fix(frontend): popupのemit型が正しく利用できるように修正 (#16826)

* fix(frontend): popupのemit型が正しく利用できるように修正

* fix: revert unnecessary code (for testing purpose)

* fix lint

* fix type errors

* fix types

* add comment

* fix

* fix

* fix: OverloadToUnionの仕組みを変更

* add comments, clean up

* fix lint

* fix types

* clean up [ci skip]

* fix

* add comments [ci skip]

packages/frontend/src/components/MkAnnouncementDialog.vue

@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkModal ref="modal" :zPriority="'middle'" :preferType="'dialog'" @closed="$emit('closed')" @click="onBgClick">
+<MkModal ref="modal" :zPriority="'middle'" :preferType="'dialog'" @closed="emit('closed')" @click="onBgClick">
 	<div ref="rootEl" :class="$style.root">
 		<div :class="$style.header">
 			<span :class="$style.icon">
@@ -44,6 +44,10 @@ const props = defineProps<{
 	announcement: Misskey.entities.Announcement;
 }>();
 
+const emit = defineEmits<{
+	(ev: 'closed'): void;
+}>();
+
 const rootEl = useTemplateRef('rootEl');
 const bottomEl = useTemplateRef('bottomEl');
 const modal = useTemplateRef('modal');

packages/frontend/src/components/MkCropperDialog.vue

@@ -28,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </MkModalWindow>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup generic="F extends File | Blob">
 import { onMounted, useTemplateRef, ref, onUnmounted } from 'vue';
 import * as Misskey from 'misskey-js';
 import Cropper from 'cropperjs';
@@ -38,13 +38,13 @@ import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
 
 const props = defineProps<{
-	imageFile: File | Blob;
+	imageFile: F;
 	aspectRatio: number | null;
 	uploadFolder?: string | null;
 }>();
 
 const emit = defineEmits<{
-	(ev: 'ok', cropped: File | Blob): void;
+	(ev: 'ok', cropped: F): void;
 	(ev: 'cancel'): void;
 	(ev: 'closed'): void;
 }>();
@@ -74,8 +74,14 @@ async function ok() {
 	});
 
 	const f = await promise;
+	let finalFile: F;
+	if (props.imageFile instanceof File) {
+		finalFile = new File([f], props.imageFile.name, { type: f.type }) as F;
+	} else {
+		finalFile = f as F;
+	}
 
-	emit('ok', f);
+	emit('ok', finalFile);
 	if (dialogEl.value != null) dialogEl.value.close();
 }
 

packages/frontend/src/components/MkDialog.vue

@@ -41,6 +41,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 </MkModal>
 </template>
 
+<script lang="ts">
+export type Result = string | number | true | null;
+export type MkDialogReturnType<T = Result> = { canceled: true, result: undefined } | { canceled: false, result: T };
+</script>
+
 <script lang="ts" setup>
 import { ref, useTemplateRef, computed } from 'vue';
 import MkModal from '@/components/MkModal.vue';
@@ -65,8 +70,6 @@ type Select = {
 	default: OptionValue | null;
 };
 
-type Result = string | number | true | null;
-
 const props = withDefaults(defineProps<{
 	type?: 'success' | 'error' | 'warning' | 'info' | 'question' | 'waiting';
 	title?: string;
@@ -93,7 +96,7 @@ const props = withDefaults(defineProps<{
 });
 
 const emit = defineEmits<{
-	(ev: 'done', v: { canceled: true } | { canceled: false, result: Result }): void;
+	(ev: 'done', v: MkDialogReturnType): void;
 	(ev: 'closed'): void;
 }>();
 
@@ -131,7 +134,7 @@ function done(canceled: true): void;
 function done(canceled: false, result: Result): void; // eslint-disable-line no-redeclare
 
 function done(canceled: boolean, result?: Result): void { // eslint-disable-line no-redeclare
-	emit('done', { canceled, result } as { canceled: true } | { canceled: false, result: Result });
+	emit('done', { canceled, result } as MkDialogReturnType);
 	modal.value?.close();
 }
 

packages/frontend/src/components/MkDrive.folder.vue

@@ -231,17 +231,17 @@ function rename() {
 }
 
 function move() {
-	selectDriveFolder(null).then(folder => {
-		if (folder[0] && folder[0].id === props.folder.id) return;
+	selectDriveFolder(null).then(({ canceled, folders }) => {
+		if (canceled || (folders[0] && folders[0].id === props.folder.id)) return;
 
 		misskeyApi('drive/folders/update', {
 			folderId: props.folder.id,
-			parentId: folder[0] ? folder[0].id : null,
+			parentId: folders[0] ? folders[0].id : null,
 		}).then(() => {
 			globalEvents.emit('driveFoldersUpdated', [{
 				...props.folder,
-				parentId: folder[0] ? folder[0].id : null,
-				parent: folder[0] ?? null,
+				parentId: folders[0] ? folders[0].id : null,
+				parent: folders[0] ?? null,
 			}]);
 		});
 	});

packages/frontend/src/components/MkDrive.vue

@@ -577,17 +577,19 @@ function cd(target?: Misskey.entities.DriveFolder | Misskey.entities.DriveFolder
 async function moveFilesBulk() {
 	if (selectedFiles.value.length === 0) return;
 
-	const toFolder = await selectDriveFolder(folder.value ? folder.value.id : null);
+	const { canceled, folders } = await selectDriveFolder(folder.value ? folder.value.id : null);
+
+	if (canceled) return;
 
 	await os.apiWithDialog('drive/files/move-bulk', {
 		fileIds: selectedFiles.value.map(f => f.id),
-		folderId: toFolder[0] ? toFolder[0].id : null,
+		folderId: folders[0] ? folders[0].id : null,
 	});
 
 	globalEvents.emit('driveFilesUpdated', selectedFiles.value.map(x => ({
 		...x,
-		folderId: toFolder[0] ? toFolder[0].id : null,
-		folder: toFolder[0] ?? null,
+		folderId: folders[0] ? folders[0].id : null,
+		folder: folders[0] ?? null,
 	})));
 }
 

packages/frontend/src/components/MkImgPreviewDialog.vue

@@ -11,6 +11,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	@close="close"
 	@esc="close"
 	@click="close"
+	@closed="emit('closed')"
 >
 	<template #header>{{ file.name }}</template>
 	<div :class="$style.container">
@@ -27,6 +28,10 @@ defineProps<{
 	file: Misskey.entities.DriveFile;
 }>();
 
+const emit = defineEmits<{
+	(ev: 'closed'): void;
+}>();
+
 const modal = ref<typeof MkModalWindow | null>(null);
 
 function close() {

packages/frontend/src/components/MkNotificationSelectWindow.vue

@@ -42,7 +42,7 @@ import { i18n } from '@/i18n.js';
 type TypesMap = Record<typeof notificationTypes[number], Ref<boolean>>;
 
 const emit = defineEmits<{
-	(ev: 'done', v: { excludeTypes: string[] }): void,
+	(ev: 'done', v: { excludeTypes: typeof notificationTypes[number][] }): void,
 	(ev: 'closed'): void,
 }>();
 

packages/frontend/src/components/MkUpdated.vue

@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkModal ref="modal" preferType="dialog" :zPriority="'middle'" @click="modal?.close()" @closed="$emit('closed')">
+<MkModal ref="modal" preferType="dialog" :zPriority="'middle'" @click="modal?.close()" @closed="emit('closed')">
 	<div :class="$style.root">
 		<div :class="$style.title"><MkSparkle>{{ i18n.ts.misskeyUpdated }}</MkSparkle></div>
 		<div :class="$style.version">✨{{ version }}🚀</div>
@@ -26,6 +26,10 @@ import { confetti } from '@/utility/confetti.js';
 
 const modal = useTemplateRef('modal');
 
+const emit = defineEmits<{
+	(ev: 'closed'): void;
+}>();
+
 const isBeta = version.includes('-beta') || version.includes('-alpha') || version.includes('-rc');
 
 function whatIsNew() {

packages/frontend/src/components/MkYouTubePlayer.vue

@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkWindow :initialWidth="640" :initialHeight="402" :canResize="true" :closeButton="true">
+<MkWindow :initialWidth="640" :initialHeight="402" :canResize="true" :closeButton="true" @closed="emit('closed')">
 	<template #header>
 		<i class="icon ti ti-brand-youtube" style="margin-right: 0.5em;"></i>
 		<span>{{ title ?? 'YouTube' }}</span>
@@ -34,6 +34,10 @@ const props = defineProps<{
 	url: string;
 }>();
 
+const emit = defineEmits<{
+	(ev: 'closed'): void;
+}>();
+
 const requestUrl = new URL(props.url);
 if (!['http:', 'https:'].includes(requestUrl.protocol)) throw new Error('invalid url');