calckey/packages/client/src/components/MkDriveSelectDialog.vue

79 lines
1.5 KiB
Vue

<template>
<XModalWindow
ref="dialog"
:width="800"
:height="500"
:with-ok-button="true"
:ok-button-disabled="type === 'file' && selected.length === 0"
@click="cancel()"
@close="cancel()"
@ok="ok()"
@closed="emit('closed')"
>
<template #header>
{{
multiple
? type === "file"
? i18n.ts.selectFiles
: i18n.ts.selectFolders
: type === "file"
? i18n.ts.selectFile
: i18n.ts.selectFolder
}}
<span
v-if="selected.length > 0"
style="margin-left: 8px; opacity: 0.5"
>({{ number(selected.length) }})</span
>
</template>
<XDrive
:multiple="multiple"
:select="type"
@changeSelection="onChangeSelection"
@selected="ok()"
/>
</XModalWindow>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import * as Misskey from "calckey-js";
import XDrive from "@/components/MkDrive.vue";
import XModalWindow from "@/components/MkModalWindow.vue";
import number from "@/filters/number";
import { i18n } from "@/i18n";
withDefaults(
defineProps<{
type?: "file" | "folder";
multiple: boolean;
}>(),
{
type: "file",
}
);
const emit = defineEmits<{
(ev: "done", r?: Misskey.entities.DriveFile[]): void;
(ev: "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>