Use vuedraggable instead of vue-draggable-next

Fix #6852

2 files changed, 35 insertions, 15 deletions

diff --git a/src/client/components/post-form-attaches.vue b/src/client/components/post-form-attaches.vue
index 6f3d1bca66..4a14112b10 100644
--- a/src/client/components/post-form-attaches.vue
+++ b/src/client/components/post-form-attaches.vue
@@ -1,12 +1,14 @@
 <template>
 <div class="skeikyzd" v-show="files.length != 0">
-	<XDraggable class="files" :list="files" animation="150" delay="100" delay-on-touch-only="true">
-		<div v-for="file in files" :key="file.id" @click="showFileMenu(file, $event)" @contextmenu.prevent="showFileMenu(file, $event)">
-			<MkDriveFileThumbnail :data-id="file.id" class="thumbnail" :file="file" fit="cover"/>
-			<div class="sensitive" v-if="file.isSensitive">
-				<Fa class="icon" :icon="faExclamationTriangle"/>
+	<XDraggable class="files" v-model="_files" item-key="id" animation="150" delay="100" delay-on-touch-only="true">
+		<template #item="{element}">
+			<div @click="showFileMenu(element, $event)" @contextmenu.prevent="showFileMenu(element, $event)">
+				<MkDriveFileThumbnail :data-id="element.id" class="thumbnail" :file="element" fit="cover"/>
+				<div class="sensitive" v-if="element.isSensitive">
+					<Fa class="icon" :icon="faExclamationTriangle"/>
+				</div>
 			</div>
-		</div>
+		</template>
 	</XDraggable>
 	<p class="remain">{{ 4 - files.length }}/4</p>
 </div>
@@ -21,7 +23,7 @@ import * as os from '@/os';
 
 export default defineComponent({
 	components: {
-		XDraggable: defineAsyncComponent(() => import('vue-draggable-next').then(x => x.VueDraggableNext)),
+		XDraggable: defineAsyncComponent(() => import('vuedraggable').then(x => x.default)),
 		MkDriveFileThumbnail
 	},
 
@@ -36,7 +38,7 @@ export default defineComponent({
 		}
 	},
 
-	emits: ['updated', 'detach'],
+	emits: ['updated', 'detach', 'changeSensitive', 'changeName'],
 
 	data() {
 		return {
@@ -46,6 +48,17 @@ export default defineComponent({
 		};
 	},
 
+	computed: {
+		_files: {
+			get() {
+				return this.files;
+			},
+			set(value) {
+				this.$emit('updated', value);
+			}
+		}
+	},
+
 	methods: {
 		detachMedia(id) {
 			if (this.detachMediaFn) {
@@ -59,8 +72,7 @@ export default defineComponent({
 				fileId: file.id,
 				isSensitive: !file.isSensitive
 			}).then(() => {
-				file.isSensitive = !file.isSensitive;
-				this.$emit('updated', file);
+				this.$emit('changeSensitive', file, !file.isSensitive);
 			});
 		},
 		async rename(file) {
@@ -76,8 +88,8 @@ export default defineComponent({
 				fileId: file.id,
 				name: result
 			}).then(() => {
+				this.$emit('changeName', file, result);
 				file.name = result;
-				this.$emit('updated', file);
 			});
 		},
 		showFileMenu(file, ev: MouseEvent) {
diff --git a/src/client/components/post-form.vue b/src/client/components/post-form.vue
index 020b925fb9..3f4561dad8 100644
--- a/src/client/components/post-form.vue
+++ b/src/client/components/post-form.vue
@@ -36,7 +36,7 @@
 		</div>
 		<input v-show="useCw" ref="cw" class="cw" v-model="cw" :placeholder="$t('annotation')" @keydown="onKeydown">
 		<textarea v-model="text" class="text" :class="{ withCw: useCw }" ref="text" :disabled="posting" :placeholder="placeholder" @keydown="onKeydown" @paste="onPaste"></textarea>
-		<XPostFormAttaches class="attaches" :files="files" @updated="updateMedia" @detach="detachMedia"/>
+		<XPostFormAttaches class="attaches" :files="files" @updated="updateFiles" @detach="detachFile" @changeSensitive="updateFileSensitive" @changeName="updateFileName"/>
 		<XPollEditor v-if="poll" :poll="poll" @destroyed="poll = null" @updated="onPollUpdate"/>
 		<footer>
 			<button class="_button" @click="chooseFileFrom" v-tooltip="$t('attachFile')"><Fa :icon="faPhotoVideo"/></button>
@@ -359,12 +359,20 @@ export default defineComponent({
 			});
 		},
 
-		detachMedia(id) {
+		detachFile(id) {
 			this.files = this.files.filter(x => x.id != id);
 		},
 
-		updateMedia(file) {
-			this.files[this.files.findIndex(x => x.id === file.id)] = file;
+		updateFiles(files) {
+			this.files = files;
+		},
+
+		updateFileSensitive(file, sensitive) {
+			this.files[this.files.findIndex(x => x.id === file.id)].isSensitive = sensitive;
+		},
+
+		updateFileName(file, name) {
+			this.files[this.files.findIndex(x => x.id === file.id)].name = name;
 		},
 
 		upload(file: File, name?: string) {