revert: use sortablejs-vue3 instead of vuedraggable for more stability

packages/client/package.json

@@ -46,8 +46,6 @@
 		"s-age": "1.1.2",
 		"sass": "1.57.0",
 		"seedrandom": "3.0.5",
-		"sortablejs": "^1.15.0",
-		"sortablejs-vue3": "^1.2.3",
 		"strict-event-emitter-types": "2.0.0",
 		"stringz": "2.1.0",
 		"syuilo-password-strength": "0.0.1",
@@ -63,7 +61,8 @@
 		"vanilla-tilt": "1.8.0",
 		"vite": "4.0.2",
 		"vue": "3.2.45",
-		"vue-prism-editor": "2.0.0-alpha.2"
+		"vue-prism-editor": "2.0.0-alpha.2",
+		"vuedraggable": "next"
 	},
 	"devDependencies": {
 		"@types/escape-regexp": "0.0.1",

packages/client/src/components/MkPostFormAttaches.vue

@@ -1,6 +1,6 @@
 <template>
 <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">
+	<Sortable :model-value="props.modelValue" class="files" item-key="id" :animation="150" :delay="100" :delay-on-touch-only="true" @update:modelValue="v => emit('update:modelValue', v)">
 		<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"/>
@@ -15,13 +15,13 @@
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent } from 'vue';
+import { defineAsyncComponent, watch } from 'vue';
 import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
 import * as os from '@/os';
 import { deepClone } from '@/scripts/clone';
 import { i18n } from '@/i18n';
 
-const Sortable = defineAsyncComponent(() => import('sortablejs-vue3').then(x => x.Sortable));
+const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
 
 const props = defineProps<{
 	modelValue: any[];
@@ -37,13 +37,6 @@ const emit = defineEmits<{
 
 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);

packages/client/src/components/MkWidgets.vue

@@ -10,10 +10,11 @@
 			<MkButton inline @click="$emit('exit')">{{ i18n.ts.close }}</MkButton>
 		</header>
 		<Sortable
-			:list="props.widgets"
+			:model-value="props.widgets"
 			item-key="id"
-			:options="{ handle: '.handle', animation: 150 }"
-			@end="onSorted"
+			handle=".handle"
+			:animation="150"
+			@update:modelValue="v => emit('updateWidgets', v)"
 		>
 			<template #item="{element}">
 				<div class="customize-container">
@@ -40,7 +41,7 @@ import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { deepClone } from '@/scripts/clone';
 
-const Sortable = defineAsyncComponent(() => import('sortablejs-vue3').then(x => x.Sortable));
+const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
 
 type Widget = {
 	name: string;
@@ -84,13 +85,6 @@ const updateWidget = (id, data) => {
 	emit('updateWidget', { id, data });
 };
 
-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) => {
 		if (el.tagName === 'A') return true;

packages/client/src/pages/page-editor/page-editor.blocks.vue

@@ -27,7 +27,7 @@ import * as os from '@/os';
 
 export default defineComponent({
 	components: {
-		Sortable: defineAsyncComponent(() => import('sortablejs-vue3').then(x => x.Sortable)),
+		Sortable: defineAsyncComponent(() => import('vuedraggable').then(x => x.default)),
 		XSection, XText, XImage, XButton, XTextarea, XTextInput, XTextareaInput, XNumberInput, XSwitch, XIf, XPost, XCounter, XRadioButton, XCanvas, XNote,
 	},
 

packages/client/src/pages/page-editor/page-editor.vue

@@ -107,7 +107,7 @@ import { mainRouter } from '@/router';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { $i } from '@/account';
-const Sortable = defineAsyncComponent(() => import('sortablejs-vue3').then(x => x.default));
+const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
 
 const props = defineProps<{
 	initPageId?: string;

packages/client/src/pages/settings/reaction.vue

@@ -3,7 +3,7 @@
 	<FromSlot class="_formBlock">
 		<template #label>{{ i18n.ts.reactionSettingDescription }}</template>
 		<div v-panel style="border-radius: 6px;">
-			<Sortable :list="reactions" class="zoaiodol" :item-key="item => item" :options="{ animation: 150, delay: 100, delayOnTouchOnly: true }" @end="onSorted">
+			<Sortable v-model="reactions" class="zoaiodol" :item-key="item => item" :animation="150" :delay="100" :delay-on-touch-only="true">
 				<template #item="{element}">
 					<button class="_button item" @click="remove(element, $event)">
 						<MkEmoji :emoji="element" :normal="true"/>
@@ -13,8 +13,6 @@
 					<button class="_button add" @click="chooseEmoji"><i class="ti ti-plus"></i></button>
 				</template>
 			</Sortable>
-			<!-- TODO: https://github.com/MaxLeiter/sortablejs-vue3/issues/52 が実装されたら消す -->
-			<button class="_button add" @click="chooseEmoji"><i class="ti ti-plus"></i></button>
 		</div>
 		<template #caption>{{ i18n.ts.reactionSettingDescription2 }} <button class="_textButton" @click="preview">{{ i18n.ts.preview }}</button></template>
 	</FromSlot>
@@ -57,7 +55,7 @@
 
 <script lang="ts" setup>
 import { defineAsyncComponent, watch } from 'vue';
-import { Sortable } from 'sortablejs-vue3';
+import Sortable from 'vuedraggable';
 import FormInput from '@/components/form/input.vue';
 import FormRadios from '@/components/form/radios.vue';
 import FromSlot from '@/components/form/slot.vue';
@@ -77,11 +75,6 @@ const reactionPickerWidth = $computed(defaultStore.makeGetterSetter('reactionPic
 const reactionPickerHeight = $computed(defaultStore.makeGetterSetter('reactionPickerHeight'));
 const reactionPickerUseDrawerForMobile = $computed(defaultStore.makeGetterSetter('reactionPickerUseDrawerForMobile'));
 
-function onSorted(event) {
-	const item = reactions.splice(event.oldIndex, 1)[0];
-	reactions.splice(event.newIndex, 0, item);
-}
-
 function save() {
 	defaultStore.set('reactions', reactions);
 }