enhance(frontend): remove vuedraggable (#17073)

* wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * Update page-editor.blocks.vue * Update MkDraggable.vue * refactor * refactor * ✌️ * refactor * Update MkDraggable.vue * ios * 🎨 * 🎨
2026-06-12 11:44:05 +02:00 · 2026-01-07 21:46:03 +09:00
parent e18b92823f
commit 8c5572dd3b
14 changed files with 457 additions and 186 deletions
--- a/packages/frontend/src/pages/admin/RolesEditorFormula.vue
+++ b/packages/frontend/src/pages/admin/RolesEditorFormula.vue
@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<div :class="$style.header">
 		<MkSelect v-model="type" :items="typeDef" :class="$style.typeSelect">
 		</MkSelect>
-		<button v-if="draggable" class="drag-handle _button" :class="$style.dragHandle">
+		<button v-if="draggable" class="_button" :class="$style.dragHandle" :draggable="true" @dragstart.stop="dragStartCallback">
 			<i class="ti ti-menu-2"></i>
 		</button>
 		<button v-if="draggable" class="_button" :class="$style.remove" @click="removeSelf">
@@ -17,14 +17,27 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</div>

 	<div v-if="type === 'and' || type === 'or'" class="_gaps">
-		<Sortable v-model="v.values" tag="div" class="_gaps" itemKey="id" handle=".drag-handle" :group="{ name: 'roleFormula' }" :animation="150" :swapThreshold="0.5">
-			<template #item="{element}">
+		<MkDraggable
+			v-model="v.values"
+			direction="vertical"
+			withGaps
+			canNest
+			manualDragStart
+			group="roleFormula"
+		>
+			<template #default="{ item, dragStart }">
 				<div :class="$style.item">
 					<!-- divが無いとエラーになる https://github.com/SortableJS/vue.draggable.next/issues/189 -->
-					<RolesEditorFormula :modelValue="element" draggable @update:modelValue="updated => valuesItemUpdated(updated)" @remove="removeItem(element)"/>
+					<RolesEditorFormula
+						:modelValue="item"
+						:dragStartCallback="dragStart"
+						draggable
+						@update:modelValue="updated => valuesItemUpdated(updated)"
+						@remove="removeItem(item.id)"
+					/>
 				</div>
 			</template>
-		</Sortable>
+		</MkDraggable>
 		<MkButton rounded style="margin: 0 auto;" @click="addValue"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
 	</div>

@@ -45,18 +58,17 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts" setup>
-import { computed, defineAsyncComponent, ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
+import type { GetMkSelectValueTypesFromDef, MkSelectItem } from '@/components/MkSelect.vue';
 import { genId } from '@/utility/id.js';
 import MkInput from '@/components/MkInput.vue';
 import MkSelect from '@/components/MkSelect.vue';
-import type { GetMkSelectValueTypesFromDef, MkSelectItem } from '@/components/MkSelect.vue';
 import MkButton from '@/components/MkButton.vue';
+import MkDraggable from '@/components/MkDraggable.vue';
 import { i18n } from '@/i18n.js';
 import { deepClone } from '@/utility/clone.js';
 import { rolesCache } from '@/cache.js';

-const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
-
 const emit = defineEmits<{
 	(ev: 'update:modelValue', value: any): void;
 	(ev: 'remove'): void;
@@ -65,6 +77,7 @@ const emit = defineEmits<{
 const props = defineProps<{
 	modelValue: any;
 	draggable?: boolean;
+	dragStartCallback?: (ev: DragEvent) => void;
 }>();

 const v = ref(deepClone(props.modelValue));
@@ -132,8 +145,8 @@ function valuesItemUpdated(item) {
 	v.value.values[i] = item;
 }

-function removeItem(item) {
-	v.value.values = v.value.values.filter(_item => _item.id !== item.id);
+function removeItem(itemId) {
+	v.value.values = v.value.values.filter(_item => _item.id !== itemId);
 }

 function removeSelf() {
--- a/packages/frontend/src/pages/admin/server-rules.vue
+++ b/packages/frontend/src/pages/admin/server-rules.vue
@@ -12,28 +12,25 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div class="_gaps_m">
 			<div><SearchText>{{ i18n.ts._serverRules.description }}</SearchText></div>

-			<Sortable
+			<MkDraggable
 				v-model="serverRules"
-				class="_gaps_m"
-				:itemKey="(_, i) => i"
-				:animation="150"
-				:handle="'.' + $style.itemHandle"
-				@start="e => e.item.classList.add('active')"
-				@end="e => e.item.classList.remove('active')"
+				direction="vertical"
+				withGaps
+				manualDragStart
 			>
-				<template #item="{element,index}">
+				<template #default="{ item, index, dragStart }">
 					<div :class="$style.item">
 						<div :class="$style.itemHeader">
 							<div :class="$style.itemNumber" v-text="String(index + 1)"/>
-							<span :class="$style.itemHandle"><i class="ti ti-menu"/></span>
-							<button class="_button" :class="$style.itemRemove" @click="remove(index)"><i class="ti ti-x"></i></button>
+							<span :class="$style.itemHandle" :draggable="true" @dragstart.stop="dragStart"><i class="ti ti-menu"/></span>
+							<button class="_button" :class="$style.itemRemove" @click="remove(item.id)"><i class="ti ti-x"></i></button>
 						</div>
-						<MkInput v-model="serverRules[index]"/>
+						<MkInput :modelValue="item.text" @update:modelValue="serverRules[index].text = $event"/>
 					</div>
 				</template>
-			</Sortable>
+			</MkDraggable>
 			<div :class="$style.commands">
-				<MkButton rounded @click="serverRules.push('')"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
+				<MkButton rounded @click="add"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
 				<MkButton primary rounded @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
 			</div>
 		</div>
@@ -42,28 +39,31 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>

 <script lang="ts" setup>
-import { defineAsyncComponent, ref, computed } from 'vue';
+import { ref } from 'vue';
 import * as os from '@/os.js';
 import { fetchInstance, instance } from '@/instance.js';
 import { i18n } from '@/i18n.js';
 import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/MkInput.vue';
 import MkFolder from '@/components/MkFolder.vue';
+import MkDraggable from '@/components/MkDraggable.vue';

-const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
+const serverRules = ref<{ text: string; id: string; }[]>(instance.serverRules.map(text => ({ text, id: Math.random().toString() })));

-const serverRules = ref<string[]>(instance.serverRules);
-
-const save = async () => {
+async function save() {
 	await os.apiWithDialog('admin/update-meta', {
-		serverRules: serverRules.value,
+		serverRules: serverRules.value.map(r => r.text),
 	});
 	fetchInstance(true);
-};
+}

-const remove = (index: number): void => {
-	serverRules.value.splice(index, 1);
-};
+function add(): void {
+	serverRules.value.push({ text: '', id: Math.random().toString() });
+}
+
+function remove(id: string): void {
+	serverRules.value = serverRules.value.filter(r => r.id !== id);
+}
 </script>

 <style lang="scss" module>