components/drive-select-dialog.vue

packages/client/src/components/drive-select-dialog.vue

@@ -17,54 +17,40 @@
 </XModalWindow>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
+import { ref } from 'vue';
+import * as Misskey from 'misskey-js';
 import XDrive from './drive.vue';
 import XModalWindow from '@/components/ui/modal-window.vue';
 import number from '@/filters/number';
 
-export default defineComponent({
+withDefaults(defineProps<{
-	components: {
+	type?: 'file' | 'folder';
-		XDrive,
+	multiple: boolean;
-		XModalWindow,
+}>(), {
-	},
+	type: 'file',
-
-	props: {
-		type: {
-			type: String,
-			required: false,
-			default: 'file'
-		},
-		multiple: {
-			type: Boolean,
-			default: false
-		}
-	},
-
-	emits: ['done', 'closed'],
-
-	data() {
-		return {
-			selected: []
-		};
-	},
-
-	methods: {
-		ok() {
-			this.$emit('done', this.selected);
-			this.$refs.dialog.close();
-		},
-
-		cancel() {
-			this.$emit('done');
-			this.$refs.dialog.close();
-		},
-
-		onChangeSelection(xs) {
-			this.selected = xs;
-		},
-
-		number
-	}
 });
+
+const emit = defineEmits<{
+	(e: 'done', r?: Misskey.entities.DriveFile[]): void;
+	(e: 'closed'): void;
+}>();
+
+const dialog = ref<InstanceType<typeof XModalWindow>>();
+
+const selected = ref<Misskey.entities.DriveFile[]>([]);
+
+function ok() {
+	emit('done', selected.value);
+	dialog.value?.close();
+}
+
+function cancel() {
+	emit('done');
+	dialog.value?.close();
+}
+
+function onChangeSelection(files: Misskey.entities.DriveFile[]) {
+	selected.value = files;
+}
 </script>