use sortablejs-vue3 instead of vuedraggable for more stability

packages/client/src/components/MkPostForm.vue

@@ -43,7 +43,7 @@
 		<input v-show="useCw" ref="cwInputEl" v-model="cw" class="cw" :placeholder="i18n.ts.annotation" @keydown="onKeydown">
 		<textarea ref="textareaEl" v-model="text" class="text" :class="{ withCw: useCw }" :disabled="posting" :placeholder="placeholder" data-cy-post-form-text @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/>
 		<input v-show="withHashtags" ref="hashtagsInputEl" v-model="hashtags" class="hashtags" :placeholder="i18n.ts.hashtags" list="hashtags">
-		<XPostFormAttaches class="attaches" :files="files" @updated="updateFiles" @detach="detachFile" @changeSensitive="updateFileSensitive" @changeName="updateFileName"/>
+		<XPostFormAttaches v-model="files" class="attaches" @detach="detachFile" @changeSensitive="updateFileSensitive" @changeName="updateFileName"/>
 		<XPollEditor v-if="poll" v-model="poll" @destroyed="poll = null"/>
 		<XNotePreview v-if="showPreview" class="preview" :text="text"/>
 		<footer>
@@ -370,10 +370,6 @@ function detachFile(id) {
 	files = files.filter(x => x.id !== id);
 }
 
-function updateFiles(_files) {
-	files = _files;
-}
-
 function updateFileSensitive(file, sensitive) {
 	files[files.findIndex(x => x.id === file.id)].isSensitive = sensitive;
 }

packages/client/src/components/MkPostFormAttaches.vue

@@ -1,6 +1,6 @@
 <template>
-<div v-show="files.length != 0" class="skeikyzd">
-	<XDraggable v-model="_files" class="files" item-key="id" animation="150" delay="100" delay-on-touch-only="true">
+<div v-show="props.modelValue.length != 0" class="skeikyzd">
+	<Sortable :list="props.modelValue" class="files" item-key="id" :options="{ animation: 150, delay: 100, delayOnTouchOnly: true }" @end="onSorted">
 		<template #item="{element}">
 			<div class="file" @click="showFileMenu(element, $event)" @contextmenu.prevent="showFileMenu(element, $event)">
 				<MkDriveFileThumbnail :data-id="element.id" class="thumbnail" :file="element" fit="cover"/>
@@ -9,128 +9,116 @@
 				</div>
 			</div>
 		</template>
-	</XDraggable>
-	<p class="remain">{{ 16 - files.length }}/16</p>
+	</Sortable>
+	<p class="remain">{{ 16 - props.modelValue.length }}/16</p>
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, defineAsyncComponent } from 'vue';
+<script lang="ts" setup>
+import { defineAsyncComponent } from 'vue';
 import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
 import * as os from '@/os';
+import { deepClone } from '@/scripts/clone';
+import { i18n } from '@/i18n';
 
-export default defineComponent({
-	components: {
-		XDraggable: defineAsyncComponent(() => import('vuedraggable').then(x => x.default)),
-		MkDriveFileThumbnail,
-	},
+const Sortable = defineAsyncComponent(() => import('sortablejs-vue3').then(x => x.Sortable));
 
-	props: {
-		files: {
-			type: Array,
-			required: true,
+const props = defineProps<{
+	modelValue: any[];
+	detachMediaFn: () => void;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'update:modelValue', value: any[]): void;
+	(ev: 'detach'): void;
+	(ev: 'changeSensitive'): void;
+	(ev: 'changeName'): void;
+}>();
+
+let menuShowing = false;
+
+function onSorted(event) {
+	const items = deepClone(props.modelValue);
+	const item = items.splice(event.oldIndex, 1)[0];
+	items.splice(event.newIndex, 0, item);
+	emit('update:modelValue', items);
+}
+
+function detachMedia(id) {
+	if (props.detachMediaFn) {
+		props.detachMediaFn(id);
+	} else {
+		emit('detach', id);
+	}
+}
+
+function toggleSensitive(file) {
+	os.api('drive/files/update', {
+		fileId: file.id,
+		isSensitive: !file.isSensitive,
+	}).then(() => {
+		emit('changeSensitive', file, !file.isSensitive);
+	});
+}
+async function rename(file) {
+	const { canceled, result } = await os.inputText({
+		title: i18n.ts.enterFileName,
+		default: file.name,
+		allowEmpty: false,
+	});
+	if (canceled) return;
+	os.api('drive/files/update', {
+		fileId: file.id,
+		name: result,
+	}).then(() => {
+		emit('changeName', file, result);
+		file.name = result;
+	});
+}
+
+async function describe(file) {
+	os.popup(defineAsyncComponent(() => import('@/components/MkMediaCaption.vue')), {
+		title: i18n.ts.describeFile,
+		input: {
+			placeholder: i18n.ts.inputNewDescription,
+			default: file.comment !== null ? file.comment : '',
 		},
-		detachMediaFn: {
-			type: Function,
-			required: false,
-		},
-	},
-
-	emits: ['updated', 'detach', 'changeSensitive', 'changeName'],
-
-	data() {
-		return {
-			menu: null as Promise<null> | null,
-		};
-	},
-
-	computed: {
-		_files: {
-			get() {
-				return this.files;
-			},
-			set(value) {
-				this.$emit('updated', value);
-			},
-		},
-	},
-
-	methods: {
-		detachMedia(id) {
-			if (this.detachMediaFn) {
-				this.detachMediaFn(id);
-			} else {
-				this.$emit('detach', id);
-			}
-		},
-		toggleSensitive(file) {
+		image: file,
+	}, {
+		done: result => {
+			if (!result || result.canceled) return;
+			let comment = result.result.length === 0 ? null : result.result;
 			os.api('drive/files/update', {
 				fileId: file.id,
-				isSensitive: !file.isSensitive,
+				comment: comment,
 			}).then(() => {
-				this.$emit('changeSensitive', file, !file.isSensitive);
-			});
-		},
-		async rename(file) {
-			const { canceled, result } = await os.inputText({
-				title: this.$ts.enterFileName,
-				default: file.name,
-				allowEmpty: false,
-			});
-			if (canceled) return;
-			os.api('drive/files/update', {
-				fileId: file.id,
-				name: result,
-			}).then(() => {
-				this.$emit('changeName', file, result);
-				file.name = result;
+				file.comment = comment;
 			});
 		},
+	}, 'closed');
+}
 
-		async describe(file) {
-			os.popup(defineAsyncComponent(() => import('@/components/MkMediaCaption.vue')), {
-				title: this.$ts.describeFile,
-				input: {
-					placeholder: this.$ts.inputNewDescription,
-					default: file.comment !== null ? file.comment : '',
-				},
-				image: file,
-			}, {
-				done: result => {
-					if (!result || result.canceled) return;
-					let comment = result.result.length === 0 ? null : result.result;
-					os.api('drive/files/update', {
-						fileId: file.id,
-						comment: comment,
-					}).then(() => {
-						file.comment = comment;
-					});
-				},
-			}, 'closed');
-		},
-
-		showFileMenu(file, ev: MouseEvent) {
-			if (this.menu) return;
-			this.menu = os.popupMenu([{
-				text: this.$ts.renameFile,
-				icon: 'ti ti-forms',
-				action: () => { this.rename(file); },
-			}, {
-				text: file.isSensitive ? this.$ts.unmarkAsSensitive : this.$ts.markAsSensitive,
-				icon: file.isSensitive ? 'ti ti-eye-off' : 'ti ti-eye',
-				action: () => { this.toggleSensitive(file); },
-			}, {
-				text: this.$ts.describeFile,
-				icon: 'ti ti-forms',
-				action: () => { this.describe(file); },
-			}, {
-				text: this.$ts.attachCancel,
-				icon: 'ti ti-circle-x',
-				action: () => { this.detachMedia(file.id); },
-			}], ev.currentTarget ?? ev.target).then(() => this.menu = null);
-		},
-	},
-});
+function showFileMenu(file, ev: MouseEvent) {
+	if (menuShowing) return;
+	os.popupMenu([{
+		text: i18n.ts.renameFile,
+		icon: 'ti ti-forms',
+		action: () => { rename(file); },
+	}, {
+		text: file.isSensitive ? i18n.ts.unmarkAsSensitive : i18n.ts.markAsSensitive,
+		icon: file.isSensitive ? 'ti ti-eye-off' : 'ti ti-eye',
+		action: () => { toggleSensitive(file); },
+	}, {
+		text: i18n.ts.describeFile,
+		icon: 'ti ti-forms',
+		action: () => { describe(file); },
+	}, {
+		text: i18n.ts.attachCancel,
+		icon: 'ti ti-circle-x',
+		action: () => { detachMedia(file.id); },
+	}], ev.currentTarget ?? ev.target).then(() => menuShowing = false);
+	menuShowing = true;
+}
 </script>
 
 <style lang="scss" scoped>

packages/client/src/components/MkWidgets.vue

@@ -9,11 +9,11 @@
 			<MkButton inline primary class="mk-widget-add" @click="addWidget"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
 			<MkButton inline @click="$emit('exit')">{{ i18n.ts.close }}</MkButton>
 		</header>
-		<XDraggable
-			v-model="widgets_"
+		<Sortable
+			:list="props.widgets"
 			item-key="id"
-			handle=".handle"
-			animation="150"
+			:options="{ handle: '.handle', animation: 150 }"
+			@end="onSorted"
 		>
 			<template #item="{element}">
 				<div class="customize-container">
@@ -24,7 +24,7 @@
 					</div>
 				</div>
 			</template>
-		</XDraggable>
+		</Sortable>
 	</template>
 	<component :is="`mkw-${widget.name}`" v-for="widget in widgets" v-else :key="widget.id" :ref="el => widgetRefs[widget.id] = el" class="widget" :widget="widget" @updateProps="updateWidget(widget.id, $event)" @contextmenu.stop="onContextmenu(widget, $event)"/>
 </div>
@@ -38,8 +38,9 @@ import MkButton from '@/components/MkButton.vue';
 import { widgets as widgetDefs } from '@/widgets';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
+import { deepClone } from '@/scripts/clone';
 
-const XDraggable = defineAsyncComponent(() => import('vuedraggable'));
+const Sortable = defineAsyncComponent(() => import('sortablejs-vue3').then(x => x.Sortable));
 
 type Widget = {
 	name: string;
@@ -82,12 +83,13 @@ const removeWidget = (widget) => {
 const updateWidget = (id, data) => {
 	emit('updateWidget', { id, data });
 };
-const widgets_ = computed({
-	get: () => props.widgets,
-	set: (value) => {
-		emit('updateWidgets', value);
-	},
-});
+
+function onSorted(event) {
+	const items = deepClone(props.widgets);
+	const item = items.splice(event.oldIndex, 1)[0];
+	items.splice(event.newIndex, 0, item);
+	emit('updateWidgets', items);
+}
 
 function onContextmenu(widget: Widget, ev: MouseEvent) {
 	const isLink = (el: HTMLElement) => {