refactor: ♻️ MkPostFormAttachees setup syntax

packages/client/src/components/MkPostFormAttaches.vue

@@ -29,20 +29,14 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { defineComponent, defineAsyncComponent } from "vue";
+<script lang="ts" setup>
+import { defineAsyncComponent, ref, computed } from "vue";
 import { VueDraggable } from "vue-draggable-plus";
 import MkDriveFileThumbnail from "@/components/MkDriveFileThumbnail.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 
-export default defineComponent({
-	components: {
-		VueDraggable,
-		MkDriveFileThumbnail,
-	},
-
-	props: {
+const props = defineProps({
 	files: {
 		type: Array,
 		required: true,
@@ -51,65 +45,57 @@ export default defineComponent({
 		type: Function,
 		required: false,
 	},
-	},
+});
 
-	emits: ["updated", "detach", "changeSensitive", "changeName"],
+const emits = defineEmits([
+	"updated",
+	"detach",
+	"changeSensitive",
+	"changeName",
+]);
 
-	data() {
-		return {
-			menu: null as Promise<null> | null,
-			i18n,
-		};
-	},
+let menu = ref<Promise<any> | null>(null);
 
-	computed: {
-		_files: {
-			get() {
-				return this.files;
-			},
-			set(value) {
-				this.$emit("updated", value);
-			},
-		},
-	},
+const _files = computed({
+	get: () => props.files,
+	set: (value) => emits("updated", value),
+});
 
-	methods: {
-		detachMedia(id) {
-			if (this.detachMediaFn) {
-				this.detachMediaFn(id);
+const detachMedia = (id) => {
+	if (props.detachMediaFn) {
+		props.detachMediaFn(id);
 	} else {
-				this.$emit("detach", id);
+		emits("detach", id);
 	}
-		},
-		toggleSensitive(file) {
+};
+
+function toggleSensitive(file) {
 	os.api("drive/files/update", {
 		fileId: file.id,
 		isSensitive: !file.isSensitive,
 	}).then(() => {
-				this.$emit("changeSensitive", file, !file.isSensitive);
+		emits("changeSensitive", file, !file.isSensitive);
 	});
-		},
-		async rename(file) {
+}
+
+async function rename(file) {
 	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(() => {
-				this.$emit("changeName", file, result);
+		emits("changeName", file, result);
 		file.name = result;
 	});
-		},
+}
 
-		async describe(file) {
+async function describe(file) {
 	os.popup(
-				defineAsyncComponent(
-					() => import("@/components/MkMediaCaption.vue"),
-				),
+		defineAsyncComponent(() => import("@/components/MkMediaCaption.vue")),
 		{
 			title: i18n.ts.describeFile,
 			input: {
@@ -121,8 +107,7 @@ export default defineComponent({
 		{
 			done: (result) => {
 				if (!result || result.canceled) return;
-						let comment =
-							result.result.length === 0 ? null : result.result;
+				let comment = result.result.length === 0 ? null : result.result;
 				os.api("drive/files/update", {
 					fileId: file.id,
 					comment: comment,
@@ -133,18 +118,18 @@ export default defineComponent({
 		},
 		"closed",
 	);
-		},
+}
 
-		showFileMenu(file, ev: MouseEvent) {
-			if (this.menu) return;
-			this.menu = os
+function showFileMenu(file, ev: MouseEvent) {
+	if (menu) return;
+	menu = os
 		.popupMenu(
 			[
 				{
 					text: i18n.ts.renameFile,
 					icon: "ph-cursor-text ph-bold ph-lg",
 					action: () => {
-								this.rename(file);
+						rename(file);
 					},
 				},
 				{
@@ -155,30 +140,28 @@ export default defineComponent({
 						? "ph-eye ph-bold ph-lg"
 						: "ph-eye-slash ph-bold ph-lg",
 					action: () => {
-								this.toggleSensitive(file);
+						toggleSensitive(file);
 					},
 				},
 				{
 					text: i18n.ts.describeFile,
 					icon: "ph-subtitles ph-bold ph-lg",
 					action: () => {
-								this.describe(file);
+						describe(file);
 					},
 				},
 				{
 					text: i18n.ts.attachCancel,
 					icon: "ph-x ph-bold ph-lg",
 					action: () => {
-								this.detachMedia(file.id);
+						detachMedia(file.id);
 					},
 				},
 			],
 			ev.currentTarget ?? ev.target,
 		)
-				.then(() => (this.menu = null));
-		},
-	},
-});
+		.then(() => (menu = null));
+}
 </script>
 
 <style lang="scss" scoped>
@@ -217,8 +200,8 @@ export default defineComponent({
 				top: 0;
 				left: 0;
 				z-index: 2;
-				background: rgba(17, 17, 17, 0.7);
-				color: #fff;
+				background: var(--header);
+				color: var(--fg);
 
 				> .icon {
 					margin: auto;