refactor: post-form-attaches to composition api

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

@@ -14,123 +14,112 @@
 </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)),
+const props = defineProps<{
-		MkDriveFileThumbnail,
+	files: DriveFile[];
+	detachMediaFn?: (id: string) => void;
+}>();
+
+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;
+}>();
+
+let menu: Promise<null> | null = $ref(null);
+const _files = computed({
+	get() {
+		return props.files;
 	},
-
+	set(value: DriveFile[]) {
-	props: {
+		emit('updated', value);
-		files: {
-			type: Array,
-			required: true,
-		},
-		detachMediaFn: {
-			type: Function,
-			required: false,
-		},
-	},
-
-	emits: ['updated', 'detach', 'changeSensitive', 'changeName'],
-
-	data() {
-		return {
-			menu: null as Promise<null> | null,
-		};
-	},
-
-	computed: {
-		_files: {
-			get() {
-				return this.files;
-			},
-			set(value) {
-				this.$emit('updated', value);
-			},
-		},
-	},
-
-	methods: {
-		detachMedia(id) {
-			if (this.detachMediaFn) {
-				this.detachMediaFn(id);
-			} else {
-				this.$emit('detach', id);
-			}
-		},
-		toggleSensitive(file) {
-			os.api('drive/files/update', {
-				fileId: file.id,
-				isSensitive: !file.isSensitive,
-			}).then(() => {
-				this.$emit('changeSensitive', file, !file.isSensitive);
-			});
-		},
-		async rename(file) {
-			const { canceled, result } = await os.inputText({
-				title: this.$ts.enterFileName,
-				default: file.name,
-				allowEmpty: false,
-			});
-			if (canceled) return;
-			os.api('drive/files/update', {
-				fileId: file.id,
-				name: result,
-			}).then(() => {
-				this.$emit('changeName', file, result);
-				file.name = result;
-			});
-		},
-
-		async describe(file) {
-			os.popup(defineAsyncComponent(() => import('@/components/media-caption.vue')), {
-				title: this.$ts.describeFile,
-				input: {
-					placeholder: this.$ts.inputNewDescription,
-					default: file.comment !== null ? file.comment : '',
-				},
-				image: file,
-			}, {
-				done: result => {
-					if (!result || result.canceled) return;
-					let comment = result.result.length === 0 ? null : result.result;
-					os.api('drive/files/update', {
-						fileId: file.id,
-						comment,
-					}).then(() => {
-						file.comment = comment;
-					});
-				},
-			}, 'closed');
-		},
-
-		showFileMenu(file, ev: MouseEvent) {
-			if (this.menu) return;
-			this.menu = os.popupMenu([{
-				text: this.$ts.renameFile,
-				icon: 'fas fa-i-cursor',
-				action: () => { this.rename(file); },
-			}, {
-				text: file.isSensitive ? this.$ts.unmarkAsSensitive : this.$ts.markAsSensitive,
-				icon: file.isSensitive ? 'fas fa-eye-slash' : 'fas fa-eye',
-				action: () => { this.toggleSensitive(file); },
-			}, {
-				text: this.$ts.describeFile,
-				icon: 'fas fa-i-cursor',
-				action: () => { this.describe(file); },
-			}, {
-				text: this.$ts.attachCancel,
-				icon: 'fas fa-times-circle',
-				action: () => { this.detachMedia(file.id); },
-			}], ev.currentTarget ?? ev.target).then(() => this.menu = null);
-		},
 	},
 });
+
+function detachMedia(id: string): void {
+	if (props.detachMediaFn) {
+		props.detachMediaFn(id);
+	} else {
+		emit('detach', id);
+	}
+}
+
+function toggleSensitive(file: DriveFile): void {
+	os.api('drive/files/update', {
+		fileId: file.id,
+		isSensitive: !file.isSensitive,,
+	}).then(() => {
+		emit('changeSensitive', file, !file.isSensitive);
+	});
+}
+
+async function rename(file: DriveFile): Promise<void> {
+	const { canceled, result } = await os.inputText({
+		title: i18n.ts.enterFileName,
+		default: file.name,
+		allowEmpty: false,,
+	});
+	if (canceled) return;
+	os.api('drive/files/update', {
+		fileId: file.id,
+		name: result,,
+	}).then(() => {
+		emit('changeName', file, result);
+		file.name = result;
+	});
+}
+
+async function describe(file: DriveFile): Promise<void> {
+	os.popup(defineAsyncComponent(() => import('@/components/media-caption.vue')), {
+		title: i18n.ts.describeFile,
+		input: {
+			placeholder: i18n.ts.inputNewDescription,
+			default: file.comment !== null ? file.comment : '',
+		},
+		image: file,
+	}, {
+		done: result => {
+			if (!result || result.canceled) return;
+			let comment = result.result.length === 0 ? null : result.result;
+			os.api('drive/files/update', {
+				fileId: file.id,
+				comment,
+			}).then(() => {
+				file.comment = comment;
+			});
+		},
+	}, 'closed');
+}
+
+function showFileMenu(file: DriveFile, ev: MouseEvent): void {
+	if (menu) return;
+	menu = os.popupMenu([{
+		text: i18n.ts.renameFile,
+		icon: 'fas fa-i-cursor',
+		action: (): void => { rename(file); },
+	}, {
+		text: file.isSensitive ? i18n.ts.unmarkAsSensitive : i18n.ts.markAsSensitive,
+		icon: file.isSensitive ? 'fas fa-eye-slash' : 'fas fa-eye',
+		action: (): void => { toggleSensitive(file); },
+	}, {
+		text: i18n.ts.describeFile,
+		icon: 'fas fa-i-cursor',
+		action: (): void => { describe(file); },
+	}, {
+		text: i18n.ts.attachCancel,
+		icon: 'fas fa-times-circle',
+		action: (): void => { detachMedia(file.id); },
+	}], 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;
 }> {