Use vuedraggable instead of vue-draggable-next

Fix #6852

3 files changed, 46 insertions, 36 deletions

diff --git a/src/client/ui/deck.vue b/src/client/ui/deck.vue
index ad65ccd499..b1219c34ff 100644
--- a/src/client/ui/deck.vue
+++ b/src/client/ui/deck.vue
@@ -3,7 +3,7 @@
 	<XSidebar ref="nav"/>
 
 	<!-- TODO: deckMainColumnPlace を見て位置変える -->
-	<deck-column class="column" v-if="$store.state.device.deckAlwaysShowMainColumn || $route.name !== 'index'">
+	<DeckColumn class="column" v-if="$store.state.device.deckAlwaysShowMainColumn || $route.name !== 'index'">
 		<template #header>
 			<XHeader :info="pageInfo"/>
 		</template>
@@ -15,13 +15,13 @@
 				</keep-alive>
 			</transition>
 		</router-view>
-	</deck-column>
+	</DeckColumn>
 
 	<template v-for="ids in layout">
 		<div v-if="ids.length > 1" class="folder column">
-			<deck-column-core v-for="id in ids" :ref="id" :key="id" :column="columns.find(c => c.id === id)" :is-stacked="true" @parent-focus="moveFocus(id, $event)"/>
+			<DeckColumnCore v-for="id in ids" :ref="id" :key="id" :column="columns.find(c => c.id === id)" :is-stacked="true" @parent-focus="moveFocus(id, $event)"/>
 		</div>
-		<deck-column-core v-else class="column" :ref="ids[0]" :key="ids[0]" :column="columns.find(c => c.id === ids[0])" @parent-focus="moveFocus(ids[0], $event)"/>
+		<DeckColumnCore v-else class="column" :ref="ids[0]" :key="ids[0]" :column="columns.find(c => c.id === ids[0])" @parent-focus="moveFocus(ids[0], $event)"/>
 	</template>
 
 	<button @click="addColumn" class="_button add"><Fa :icon="faPlus"/></button>
diff --git a/src/client/ui/deck/widgets-column.vue b/src/client/ui/deck/widgets-column.vue
index e19fb01e5e..f3ad5ab716 100644
--- a/src/client/ui/deck/widgets-column.vue
+++ b/src/client/ui/deck/widgets-column.vue
@@ -13,14 +13,16 @@
 				<MkButton inline @click="edit = false">{{ $t('close') }}</MkButton>
 			</header>
 			<XDraggable
-				:list="column.widgets"
+				v-model="_widgets"
+				item-key="id"
 				animation="150"
-				@sort="onWidgetSort"
 			>
-				<div v-for="widget in column.widgets" class="customize-container" :key="widget.id" @click="widgetFunc(widget.id)">
-					<button class="remove _button" @click.prevent.stop="removeWidget(widget)"><Fa :icon="faTimes"/></button>
-					<component :is="`mkw-${widget.name}`" :widget="widget" :setting-callback="setting => settings[widget.id] = setting" :column="column"/>
-				</div>
+				<template #item="{element}">
+					<div class="customize-container" @click="widgetFunc(element.id)">
+						<button class="remove _button" @click.prevent.stop="removeWidget(element)"><Fa :icon="faTimes"/></button>
+						<component :is="`mkw-${element.name}`" :widget="element" :setting-callback="setting => settings[element.id] = setting" :column="column"/>
+					</div>
+				</template>
 			</XDraggable>
 		</template>
 		<component v-else class="widget" v-for="widget in column.widgets" :is="`mkw-${widget.name}`" :key="widget.id" :widget="widget" :column="column"/>
@@ -40,7 +42,7 @@ import { widgets } from '../../widgets';
 export default defineComponent({
 	components: {
 		XColumn,
-		XDraggable: defineAsyncComponent(() => import('vue-draggable-next').then(x => x.VueDraggableNext)),
+		XDraggable: defineAsyncComponent(() => import('vuedraggable').then(x => x.default)),
 		MkSelect,
 		MkButton,
 	},
@@ -67,6 +69,20 @@ export default defineComponent({
 		};
 	},
 
+	computed: {
+		_widgets: {
+			get() {
+				return this.column.widgets;
+			},
+			set(value) {
+				this.$store.commit('deviceUser/setDeckWidgets', {
+					id: this.column.id,
+					widgets: value
+				});
+			}
+		}
+	},
+
 	created() {
 		this.menu = [{
 			icon: faCog,
@@ -82,10 +98,6 @@ export default defineComponent({
 			this.settings[id]();
 		},
 
-		onWidgetSort() {
-			this.saveWidgets();
-		},
-
 		addWidget() {
 			if (this.widgetAdderSelected == null) return;
 
@@ -107,10 +119,6 @@ export default defineComponent({
 				widget
 			});
 		},
-
-		saveWidgets() {
-			this.$store.commit('deviceUser/updateDeckColumn', this.column);
-		}
 	}
 });
 </script>
diff --git a/src/client/ui/default.widgets.vue b/src/client/ui/default.widgets.vue
index c41ba52a76..deedc912af 100644
--- a/src/client/ui/default.widgets.vue
+++ b/src/client/ui/default.widgets.vue
@@ -3,20 +3,22 @@
 	<template v-if="editMode">
 		<MkButton primary @click="addWidget" class="add"><Fa :icon="faPlus"/></MkButton>
 		<XDraggable
-			:list="widgets"
+			v-model="widgets"
+			item-key="id"
 			handle=".handle"
 			animation="150"
 			class="sortable"
-			@sort="onWidgetSort"
 		>
-			<div v-for="widget in widgets" class="customize-container _panel" :key="widget.id">
-				<header>
-					<span class="handle"><Fa :icon="faBars"/></span>{{ $t('_widgets.' + widget.name) }}<button class="remove _button" @click="removeWidget(widget)"><Fa :icon="faTimes"/></button>
-				</header>
-				<div @click="widgetFunc(widget.id)">
-					<component class="_close_ _forceContainerFull_" :is="`mkw-${widget.name}`" :widget="widget" :ref="widget.id" :setting-callback="setting => settings[widget.id] = setting"/>
+			<template #item="{element}">
+				<div class="customize-container _panel">
+					<header>
+						<span class="handle"><Fa :icon="faBars"/></span>{{ $t('_widgets.' + element.name) }}<button class="remove _button" @click="removeWidget(element)"><Fa :icon="faTimes"/></button>
+					</header>
+					<div @click="widgetFunc(element.id)">
+						<component class="_close_ _forceContainerFull_" :is="`mkw-${element.name}`" :widget="element" :ref="element.id" :setting-callback="setting => settings[element.id] = setting"/>
+					</div>
 				</div>
-			</div>
+			</template>
 		</XDraggable>
 		<button @click="editMode = false" class="_textButton" style="font-size: 0.9em;"><Fa :icon="faCheck"/> {{ $t('editWidgetsExit') }}</button>
 	</template>
@@ -38,7 +40,7 @@ import MkButton from '@/components/ui/button.vue';
 export default defineComponent({
 	components: {
 		MkButton,
-		XDraggable: defineAsyncComponent(() => import('vue-draggable-next').then(x => x.VueDraggableNext)),
+		XDraggable: defineAsyncComponent(() => import('vuedraggable').then(x => x.default)),
 	},
 
 	emits: ['mounted'],
@@ -52,8 +54,13 @@ export default defineComponent({
 	},
 
 	computed: {
-		widgets(): any {
-			return this.$store.state.deviceUser.widgets;
+		widgets: {
+			get() {
+				return this.$store.state.deviceUser.widgets;
+			},
+			set(value) {
+				this.$store.commit('deviceUser/setWidgets', value);
+			}
 		},
 	},
 
@@ -66,11 +73,6 @@ export default defineComponent({
 			this.settings[id]();
 		},
 
-		onWidgetSort() {
-			// TODO: vuexを直接書き換えているのでなんとかする
-			this.saveHome();
-		},
-
 		async addWidget() {
 			const { canceled, result: widget } = await os.dialog({
 				type: null,