refactor: post-form-attaches to composition api

packages/client/src/components/post-form-attaches.vue

@@ -14,84 +14,75 @@
 </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, defineAsyncComponent } from 'vue';
+import { defineProps, defineAsyncComponent, defineEmits, computed } from 'vue';
+import { DriveFile } from 'misskey-js/built/entities';
 import MkDriveFileThumbnail from './drive-file-thumbnail.vue';
 import * as os from '@/os';
+import { i18n } from '@/i18n';
 
-export default defineComponent({
+const XDraggable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
-	components: {
-		XDraggable: defineAsyncComponent(() => import('vuedraggable').then(x => x.default)),
-		MkDriveFileThumbnail,
-	},
 
-	props: {
+const props = defineProps<{
-		files: {
+	files: DriveFile[];
-			type: Array,
+	detachMediaFn?: (id: string) => void;
-			required: true,
+}>();
-		},
-		detachMediaFn: {
-			type: Function,
-			required: false,
-		},
-	},
 
-	emits: ['updated', 'detach', 'changeSensitive', 'changeName'],
+const emit = defineEmits<{
+	(ev: 'updated', value: DriveFile[]): void;
+	(ev: 'detach', id: string): void;
+	(ev: 'changeSensitive', file: DriveFile, isSensitive: boolean): void;
+	(ev: 'changeName', file: DriveFile, name: string): void;
+}>();
 
-	data() {
+let menu: Promise<null> | null = $ref(null);
-		return {
+const _files = computed({
-			menu: null as Promise<null> | null,
-		};
-	},
-
-	computed: {
-		_files: {
 	get() {
-				return this.files;
+		return props.files;
-			},
-			set(value) {
-				this.$emit('updated', value);
-			},
 	},
+	set(value: DriveFile[]) {
+		emit('updated', value);
 	},
+});
 
-	methods: {
+function detachMedia(id: string): void {
-		detachMedia(id) {
+	if (props.detachMediaFn) {
-			if (this.detachMediaFn) {
+		props.detachMediaFn(id);
-				this.detachMediaFn(id);
 	} else {
-				this.$emit('detach', id);
+		emit('detach', id);
 	}
-		},
+}
-		toggleSensitive(file) {
+
+function toggleSensitive(file: DriveFile): void {
 	os.api('drive/files/update', {
 		fileId: file.id,
-				isSensitive: !file.isSensitive,
+		isSensitive: !file.isSensitive,,
 	}).then(() => {
-				this.$emit('changeSensitive', file, !file.isSensitive);
+		emit('changeSensitive', file, !file.isSensitive);
 	});
-		},
+}
-		async rename(file) {
+
+async function rename(file: DriveFile): Promise<void> {
 	const { canceled, result } = await os.inputText({
-				title: this.$ts.enterFileName,
+		title: i18n.ts.enterFileName,
 		default: file.name,
-				allowEmpty: false,
+		allowEmpty: false,,
 	});
 	if (canceled) return;
 	os.api('drive/files/update', {
 		fileId: file.id,
-				name: result,
+		name: result,,
 	}).then(() => {
-				this.$emit('changeName', file, result);
+		emit('changeName', file, result);
 		file.name = result;
 	});
-		},
+}
 
-		async describe(file) {
+async function describe(file: DriveFile): Promise<void> {
 	os.popup(defineAsyncComponent(() => import('@/components/media-caption.vue')), {
-				title: this.$ts.describeFile,
+		title: i18n.ts.describeFile,
 		input: {
-					placeholder: this.$ts.inputNewDescription,
+			placeholder: i18n.ts.inputNewDescription,
 			default: file.comment !== null ? file.comment : '',
 		},
 		image: file,
@@ -107,30 +98,28 @@ export default defineComponent({
 			});
 		},
 	}, 'closed');
-		},
+}
 
-		showFileMenu(file, ev: MouseEvent) {
+function showFileMenu(file: DriveFile, ev: MouseEvent): void {
-			if (this.menu) return;
+	if (menu) return;
-			this.menu = os.popupMenu([{
+	menu = os.popupMenu([{
-				text: this.$ts.renameFile,
+		text: i18n.ts.renameFile,
 		icon: 'fas fa-i-cursor',
-				action: () => { this.rename(file); },
+		action: (): void => { rename(file); },
 	}, {
-				text: file.isSensitive ? this.$ts.unmarkAsSensitive : this.$ts.markAsSensitive,
+		text: file.isSensitive ? i18n.ts.unmarkAsSensitive : i18n.ts.markAsSensitive,
 		icon: file.isSensitive ? 'fas fa-eye-slash' : 'fas fa-eye',
-				action: () => { this.toggleSensitive(file); },
+		action: (): void => { toggleSensitive(file); },
 	}, {
-				text: this.$ts.describeFile,
+		text: i18n.ts.describeFile,
 		icon: 'fas fa-i-cursor',
-				action: () => { this.describe(file); },
+		action: (): void => { describe(file); },
 	}, {
-				text: this.$ts.attachCancel,
+		text: i18n.ts.attachCancel,
 		icon: 'fas fa-times-circle',
-				action: () => { this.detachMedia(file.id); },
+		action: (): void => { detachMedia(file.id); },
-			}], ev.currentTarget ?? ev.target).then(() => this.menu = null);
+	}], ev.currentTarget ?? ev.target).then(() => menu = null);
-		},
+}
-	},
-});
 </script>
 
 <style lang="scss" scoped>

packages/client/src/os.ts

@@ -239,6 +239,7 @@ export function inputText(props: {
 	text?: string | null;
 	placeholder?: string | null;
 	default?: string | null;
+	allowEmpty?: boolean;
 }): Promise<{ canceled: true; result: undefined; } | {
 	canceled: false; result: string;
 }> {