refactor(frontend): vuedraggableを@formkit/drag-and-dropに変更

packages/frontend/package.json

@@ -18,6 +18,7 @@
 	},
 	"dependencies": {
 		"@discordapp/twemoji": "15.1.0",
+		"@formkit/drag-and-drop": "0.2.0",
 		"@github/webauthn-json": "2.1.1",
 		"@mcaptcha/vanilla-glue": "0.1.0-alpha-3",
 		"@misskey-dev/browser-image-resizer": "2024.1.0",
@@ -72,8 +73,7 @@
 		"uuid": "10.0.0",
 		"v-code-diff": "1.13.1",
 		"vite": "5.4.8",
-		"vue": "3.5.11",
-		"vuedraggable": "next"
+		"vue": "3.5.11"
 	},
 	"devDependencies": {
 		"@misskey-dev/summaly": "5.1.0",

packages/frontend/src/components/MkPostFormAttaches.vue

@@ -4,54 +4,74 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div v-show="props.modelValue.length != 0" :class="$style.root">
-	<Sortable :modelValue="props.modelValue" :class="$style.files" itemKey="id" :animation="150" :delay="100" :delayOnTouchOnly="true" @update:modelValue="v => emit('update:modelValue', v)">
-		<template #item="{element}">
-			<div
-				:class="$style.file"
-				role="button"
-				tabindex="0"
-				@click="showFileMenu(element, $event)"
-				@keydown.space.enter="showFileMenu(element, $event)"
-				@contextmenu.prevent="showFileMenu(element, $event)"
-			>
-				<MkDriveFileThumbnail :data-id="element.id" :class="$style.thumbnail" :file="element" fit="cover"/>
-				<div v-if="element.isSensitive" :class="$style.sensitive">
-					<i class="ti ti-eye-exclamation" style="margin: auto;"></i>
-				</div>
+<div
+	v-show="props.modelValue.length != 0"
+	:class="$style.root"
+	@dragover.stop
+	@dragenter.stop
+	@dragleave.stop
+	@drop.stop
+>
+	<div ref="dndParentEl" :class="$style.files">
+		<div
+			v-for="file in files"
+			:key="file.id"
+			:class="$style.file"
+			role="button"
+			tabindex="0"
+			@click="showFileMenu(file, $event)"
+			@keydown.space.enter="showFileMenu(file, $event)"
+			@contextmenu.prevent="showFileMenu(file, $event)"
+		>
+			<MkDriveFileThumbnail :data-id="file.id" :class="$style.thumbnail" :file="file" fit="cover"/>
+			<div v-if="file.isSensitive" :class="$style.sensitive">
+				<i class="ti ti-eye-exclamation" style="margin: auto;"></i>
 			</div>
-		</template>
-	</Sortable>
+		</div>
+	</div>
 	<p :class="$style.remain">{{ 16 - props.modelValue.length }}/16</p>
 </div>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, inject } from 'vue';
+import { defineAsyncComponent, computed, inject, shallowRef } from 'vue';
 import * as Misskey from 'misskey-js';
+import { animations } from '@formkit/drag-and-drop';
+import { dragAndDrop } from '@formkit/drag-and-drop/vue';
 import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import type { MenuItem } from '@/types/menu.js';
 
-const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
-
 const props = defineProps<{
-	modelValue: any[];
+	modelValue: Misskey.entities.DriveFile[];
 	detachMediaFn?: (id: string) => void;
 }>();
 
 const mock = inject<boolean>('mock', false);
 
 const emit = defineEmits<{
-	(ev: 'update:modelValue', value: any[]): void;
+	(ev: 'update:modelValue', value: Misskey.entities.DriveFile[]): void;
 	(ev: 'detach', id: string): void;
 	(ev: 'changeSensitive', file: Misskey.entities.DriveFile, isSensitive: boolean): void;
 	(ev: 'changeName', file: Misskey.entities.DriveFile, newName: string): void;
 	(ev: 'replaceFile', file: Misskey.entities.DriveFile, newFile: Misskey.entities.DriveFile): void;
 }>();
 
+const dndParentEl = shallowRef<HTMLElement>();
+
+const files = computed({
+	get: () => props.modelValue,
+	set: (v) => emit('update:modelValue', v),
+});
+
+dragAndDrop({
+	parent: dndParentEl,
+	values: files,
+	plugins: [animations()],
+});
+
 let menuShowing = false;
 
 function detachMedia(id: string) {

packages/frontend/src/components/MkWidgets.vue

@@ -14,52 +14,33 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<MkButton inline primary data-cy-widget-add @click="addWidget"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
 			<MkButton inline @click="$emit('exit')">{{ i18n.ts.close }}</MkButton>
 		</header>
-		<Sortable
-			:modelValue="props.widgets"
-			itemKey="id"
-			handle=".handle"
-			:animation="150"
-			:group="{ name: 'SortableMkWidgets' }"
-			:class="$style.editEditing"
-			@update:modelValue="v => emit('updateWidgets', v)"
-		>
-			<template #item="{element}">
-				<div :class="[$style.widget, $style.customizeContainer]" data-cy-customize-container>
-					<button :class="$style.customizeContainerConfig" class="_button" @click.prevent.stop="configWidget(element.id)"><i class="ti ti-settings"></i></button>
-					<button :class="$style.customizeContainerRemove" data-cy-customize-container-remove class="_button" @click.prevent.stop="removeWidget(element)"><i class="ti ti-x"></i></button>
-					<div class="handle">
-						<component :is="`widget-${element.name}`" :ref="el => widgetRefs[element.id] = el" class="widget" :class="$style.customizeContainerHandleWidget" :widget="element" @updateProps="updateWidget(element.id, $event)"/>
-					</div>
+		<div ref="dndParentEl" :class="$style.editEditing">
+			<div v-for="widgetId in widgetIds" :key="widgetId" :class="[$style.widget, $style.customizeContainer]" data-cy-customize-container>
+				<button :class="$style.customizeContainerConfig" class="_button" @click.prevent.stop="configWidget(widgetId)"><i class="ti ti-settings"></i></button>
+				<button :class="$style.customizeContainerRemove" data-cy-customize-container-remove class="_button" @click.prevent.stop="removeWidget(getWidgetById(widgetId)!)"><i class="ti ti-x"></i></button>
+				<div class="handle">
+					<component :is="`widget-${getWidgetById(widgetId)!.name}`" :ref="el => widgetRefs[widgetId] = el" class="widget" :class="$style.customizeContainerHandleWidget" :widget="getWidgetById(widgetId)!" @updateProps="updateWidget(widgetId, $event)"/>
 				</div>
-			</template>
-		</Sortable>
+			</div>
+		</div>
 	</template>
 	<component :is="`widget-${widget.name}`" v-for="widget in widgets" v-else :key="widget.id" :ref="el => widgetRefs[widget.id] = el" :class="$style.widget" :widget="widget" @updateProps="updateWidget(widget.id, $event)" @contextmenu.stop="onContextmenu(widget, $event)"/>
 </div>
 </template>
 
-<script lang="ts">
-export type Widget = {
-	name: string;
-	id: string;
-	data: Record<string, any>;
-};
-export type DefaultStoredWidget = {
-	place: string | null;
-} & Widget;
-</script>
-
 <script lang="ts" setup>
-import { defineAsyncComponent, ref } from 'vue';
+import { ref, shallowRef, watch } from 'vue';
 import { v4 as uuid } from 'uuid';
+import { animations } from '@formkit/drag-and-drop';
+import { dragAndDrop } from '@formkit/drag-and-drop/vue';
 import MkSelect from '@/components/MkSelect.vue';
 import MkButton from '@/components/MkButton.vue';
 import { widgets as widgetDefs } from '@/widgets/index.js';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
 import { isLink } from '@@/js/is-link.js';
 
-const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
+import type { Widget, WidgetProps } from '@/widgets/widget.js';
 
 const props = defineProps<{
 	widgets: Widget[];
@@ -74,10 +55,40 @@ const emit = defineEmits<{
 	(ev: 'exit'): void;
 }>();
 
+function updateWidgetIds(to: Widget[]) {
+	return to.map(w => w.id);
+}
+
+function getWidgetById(id: string) {
+	return props.widgets.find(w => w.id === id) ?? null;
+}
+
+const widgetIds = ref(updateWidgetIds(props.widgets));
+
+watch(() => props.widgets, (to) => {
+	const updated = updateWidgetIds(to);
+	widgetIds.value = updated;
+});
+
+const dndParentEl = shallowRef<HTMLElement>();
+
+dragAndDrop({
+	parent: dndParentEl,
+	values: widgetIds,
+	plugins: [animations()],
+	dragHandle: '.handle',
+	onDragend: () => {
+		// Widget ids to widget object array
+		const widgets = widgetIds.value.map(id => props.widgets.find(w => w.id === id) ?? null).filter(w => w !== null);
+		emit('updateWidgets', widgets);
+	},
+});
+
 const widgetRefs = {};
 const configWidget = (id: string) => {
 	widgetRefs[id].configure();
 };
+
 const widgetAdderSelected = ref<string | null>(null);
 const addWidget = () => {
 	if (widgetAdderSelected.value == null) return;
@@ -90,10 +101,12 @@ const addWidget = () => {
 
 	widgetAdderSelected.value = null;
 };
-const removeWidget = (widget) => {
+
+const removeWidget = (widget: Widget) => {
 	emit('removeWidget', widget);
 };
-const updateWidget = (id, data) => {
+
+const updateWidget = (id: string, data: Partial<WidgetProps>) => {
 	emit('updateWidget', { id, data });
 };