Feat: ドライブ周りのUIの強化 (#16011)

* wip * wip * Update MkDrive.vue * wip * Update MkDrive.vue * Update MkDrive.vue * wip * Update MkDrive.vue * Update MkDrive.vue * wip * Update MkDrive.vue * wip * wip * wip * wip * Update MkDrive.vue * wip * wip * wip * wip * wip * wip * wip * feat(frontend): upload dialog (#16032) * wip * wip * Update MkUploadDialog.vue * wip * wip * wip * wip * wip * Update MkUploadDialog.vue * wip * wip * Update MkDrive.vue * wip * wip * Update MkPostForm.vue * wip * Update room.form.vue * Update os.ts * wiop * wip * wip * wip * wip * wip * wip * wip * Update select-file.ts * wip * wip * Update MkDrive.vue * Update drag-and-drop.ts * wip * wip * wop * wip * wip * Update MkDrive.vue * Update CHANGELOG.md * wipo * Update MkDrive.folder.vue * wip * Update MkUploaderDialog.vue * wip * wip * Update MkUploaderDialog.vue * wip * Update MkDrive.vue * Update MkDrive.vue * wip * wip
2026-05-03 09:06:17 +02:00 · 2025-05-21 07:31:24 +09:00
parent f74c38f313
commit 9480120eba
72 changed files with 1976 additions and 1468 deletions
--- a/packages/frontend/src/components/MkDriveFileSelectDialog.vue
+++ b/packages/frontend/src/components/MkDriveFileSelectDialog.vue
@@ -0,0 +1,61 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkModalWindow
+	ref="dialog"
+	:width="800"
+	:height="500"
+	:withOkButton="true"
+	:okButtonDisabled="selected.length === 0"
+	@click="cancel()"
+	@close="cancel()"
+	@ok="ok()"
+	@closed="emit('closed')"
+>
+	<template #header>
+		{{ multiple ? i18n.ts.selectFiles : i18n.ts.selectFile }}
+		<span v-if="selected.length > 0" style="margin-left: 8px; opacity: 0.5;">({{ selected.length }})</span>
+	</template>
+	<MkDrive :multiple="multiple" select="file" :initialFolder="initialFolder" @changeSelectedFiles="onChangeSelection"/>
+</MkModalWindow>
+</template>
+
+<script lang="ts" setup>
+import { ref, useTemplateRef } from 'vue';
+import * as Misskey from 'misskey-js';
+import MkDrive from '@/components/MkDrive.vue';
+import MkModalWindow from '@/components/MkModalWindow.vue';
+import { i18n } from '@/i18n.js';
+
+withDefaults(defineProps<{
+	initialFolder?: Misskey.entities.DriveFolder['id'] | null;
+	multiple: boolean;
+}>(), {
+});
+
+const emit = defineEmits<{
+	(ev: 'done', r?: Misskey.entities.DriveFile[]): void;
+	(ev: 'closed'): void;
+}>();
+
+const dialog = useTemplateRef('dialog');
+
+const selected = ref<Misskey.entities.DriveFile[]>([]);
+
+function ok() {
+	emit('done', selected.value);
+	dialog.value?.close();
+}
+
+function cancel() {
+	emit('done');
+	dialog.value?.close();
+}
+
+function onChangeSelection(v: Misskey.entities.DriveFile[]) {
+	selected.value = v;
+}
+</script>