usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix

This commit is contained in:
kakkokari-gtyih 2024-09-02 00:17:18 +09:00
parent b013ec288c
commit 041b2f1ed4
1 changed files with 25 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
packages/frontend/src/components/MkPostFormAttaches.vue
View File

@ -4,11 +4,18 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<div v-show="props.modelValue.length != 0" :class="$style.root"> <div
v-show="props.modelValue.length != 0"
:class="$style.root"
@dragover.stop
@dragenter.stop
@dragleave.stop
@drop.stop
>
<div ref="dndParentEl" :class="$style.files"> <div ref="dndParentEl" :class="$style.files">
<div v-for="item in items" :key="item.id" :class="$style.file" @click="showFileMenu(item, $event)" @contextmenu.prevent="showFileMenu(item, $event)"> <div v-for="fileId in fileIds" :key="fileId" :class="$style.file" @click="showFileMenu(fileKvs[fileId], $event)" @contextmenu.prevent="showFileMenu(fileKvs[fileId], $event)">
<MkDriveFileThumbnail :data-id="item.id" :class="$style.thumbnail" :file="item" fit="cover"/> <MkDriveFileThumbnail :data-id="fileId" :class="$style.thumbnail" :file="fileKvs[fileId]" fit="cover"/>
<div v-if="item.isSensitive" :class="$style.sensitive"> <div v-if="fileKvs[fileId].isSensitive" :class="$style.sensitive">
<i class="ti ti-eye-exclamation" style="margin: auto;"></i> <i class="ti ti-eye-exclamation" style="margin: auto;"></i>
</div> </div>
</div> </div>
@ -18,10 +25,10 @@ SPDX-License-Identifier: AGPL-3.0-only
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { defineAsyncComponent, inject, watch } from 'vue'; import { defineAsyncComponent, computed, inject, shallowRef } from 'vue';
import * as Misskey from 'misskey-js'; import * as Misskey from 'misskey-js';
import { animations } from '@formkit/drag-and-drop'; import { animations } from '@formkit/drag-and-drop';
import { useDragAndDrop } from '@formkit/drag-and-drop/vue'; import { dragAndDrop } from '@formkit/drag-and-drop/vue';
import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue'; import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
import * as os from '@/os.js'; import * as os from '@/os.js';
import { misskeyApi } from '@/scripts/misskey-api.js'; import { misskeyApi } from '@/scripts/misskey-api.js';
@ -35,19 +42,25 @@ const props = defineProps<{
const mock = inject<boolean>('mock', false); const mock = inject<boolean>('mock', false);
const emit = defineEmits<{ const emit = defineEmits<{
(ev: 'update:modelValue', value: any[]): void; (ev: 'update:modelValue', value: Misskey.entities.DriveFile[]): void;
(ev: 'detach', id: string): void; (ev: 'detach', id: string): void;
(ev: 'changeSensitive', file: Misskey.entities.DriveFile, isSensitive: boolean): void; (ev: 'changeSensitive', file: Misskey.entities.DriveFile, isSensitive: boolean): void;
(ev: 'changeName', file: Misskey.entities.DriveFile, newName: string): void; (ev: 'changeName', file: Misskey.entities.DriveFile, newName: string): void;
(ev: 'replaceFile', file: Misskey.entities.DriveFile, newFile: Misskey.entities.DriveFile): void; (ev: 'replaceFile', file: Misskey.entities.DriveFile, newFile: Misskey.entities.DriveFile): void;
}>(); }>();
const [dndParentEl, items] = useDragAndDrop(props.modelValue, { const dndParentEl = shallowRef<HTMLElement>();
plugins: [animations()],
const fileKvs = computed(() => Object.fromEntries(props.modelValue.map(file => [file.id, file])));
const fileIds = computed({
get: () => props.modelValue.map(file => file.id),
set: (ids: string[]) => emit('update:modelValue', ids.map(id => fileKvs.value[id])),
}); });
watch(items, () => { dragAndDrop({
emit('update:modelValue', items.value); parent: dndParentEl,
values: fileIds,
plugins: [animations()],
}); });
let menuShowing = false; let menuShowing = false;
@ -69,7 +82,7 @@ async function detachAndDeleteMedia(file: Misskey.entities.DriveFile) {
const { canceled } = await os.confirm({ const { canceled } = await os.confirm({
type: 'warning', type: 'warning',
text: i18n.t('driveFileDeleteConfirm', { name: file.name }), text: i18n.tsx.driveFileDeleteConfirm({ name: file.name }),
}); });
if (canceled) return; if (canceled) return;