fix: 🐛 fix draggable

Use vue-draggable-plus instead of vuedraggable: https://github.com/SortableJS/vue.draggable.next/issues/216

Closes #10467

packages/client/package.json

@@ -87,9 +87,9 @@
 		"vite": "4.4.2",
 		"vite-plugin-compression": "^0.5.1",
 		"vue": "3.3.4",
+		"vue-draggable-plus": "^0.2.2",
 		"vue-isyourpasswordsafe": "^2.0.0",
 		"vue-plyr": "^7.0.0",
-		"vue-prism-editor": "2.0.0-alpha.2",
+		"vue-prism-editor": "2.0.0-alpha.2"
-		"vuedraggable": "4.1.0"
 	}
 }

packages/client/src/components/MkCropperDialog.vue

@@ -13,7 +13,9 @@
 		<template #default="{ width, height }">
 			<div
 				class="mk-cropper-dialog"
-				:style="`--vw: ${width ? `${width}px` : '100%'}; --vh: ${height ? `${height}px` : '100%'};`"
+				:style="`--vw: ${width ? `${width}px` : '100%'}; --vh: ${
+					height ? `${height}px` : '100%'
+				};`"
 			>
 				<Transition name="fade">
 					<div v-if="loading" class="loading">

packages/client/src/components/MkPostFormAttaches.vue

@@ -1,6 +1,6 @@
 <template>
 	<div v-show="files.length != 0" class="skeikyzd">
-		<XDraggable
+		<VueDraggable
 			v-model="_files"
 			class="files"
 			item-key="id"
@@ -25,22 +25,21 @@
 					</div>
 				</div>
 			</template>
-		</XDraggable>
+		</VueDraggable>
 		<p class="remain">{{ 16 - files.length }}/16</p>
 	</div>
 </template>
 
 <script lang="ts">
 import { defineComponent, defineAsyncComponent } from "vue";
+import { VueDraggable } from "vue-draggable-plus";
 import MkDriveFileThumbnail from "@/components/MkDriveFileThumbnail.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 
 export default defineComponent({
 	components: {
-		XDraggable: defineAsyncComponent(() =>
+		VueDraggable,
-			import("vuedraggable").then((x) => x.default),
-		),
 		MkDriveFileThumbnail,
 	},
 

packages/client/src/components/MkWidgets.vue

@@ -28,7 +28,7 @@
 					i18n.ts.close
 				}}</MkButton>
 			</header>
-			<XDraggable
+			<VueDraggable
 				v-model="widgets_"
 				item-key="id"
 				handle=".handle"
@@ -59,7 +59,7 @@
 						</div>
 					</div>
 				</template>
-			</XDraggable>
+			</VueDraggable>
 		</template>
 		<component
 			:is="`mkw-${widget.name}`"
@@ -78,14 +78,13 @@
 <script lang="ts" setup>
 import { defineAsyncComponent, reactive, ref, computed } from "vue";
 import { v4 as uuid } from "uuid";
+import { VueDraggable } from "vue-draggable-plus";
 import MkSelect from "@/components/form/select.vue";
 import MkButton from "@/components/MkButton.vue";
 import { widgets as widgetDefs } from "@/widgets";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 
-const XDraggable = defineAsyncComponent(() => import("vuedraggable"));
-
 type Widget = {
 	name: string;
 	id: string;

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

@@ -1,5 +1,5 @@
 <template>
-	<XDraggable
+	<VueDraggable
 		v-model="blocks"
 		tag="div"
 		item-key="id"
@@ -17,11 +17,12 @@
 				@remove="() => removeItem(element)"
 			/>
 		</template>
-	</XDraggable>
+	</VueDraggable>
 </template>
 
 <script lang="ts">
 import { defineComponent, defineAsyncComponent } from "vue";
+import { VueDraggable } from "vue-draggable-plus";
 import XSection from "./els/page-editor.el.section.vue";
 import XText from "./els/page-editor.el.text.vue";
 import XTextarea from "./els/page-editor.el.textarea.vue";
@@ -41,9 +42,7 @@ import * as os from "@/os";
 
 export default defineComponent({
 	components: {
-		XDraggable: defineAsyncComponent(() =>
+		VueDraggable,
-			import("vuedraggable").then((x) => x.default),
-		),
 		XSection,
 		XText,
 		XImage,

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

@@ -118,7 +118,7 @@
 
 			<div v-else-if="tab === 'variables'">
 				<div class="qmuvgica">
-					<XDraggable
+					<VueDraggable
 						v-show="variables.length > 0"
 						v-model="variables"
 						tag="div"
@@ -140,7 +140,7 @@
 								@remove="() => removeVariable(element)"
 							/>
 						</template>
-					</XDraggable>
+					</VueDraggable>
 
 					<MkButton
 						v-if="!readonly"
@@ -174,6 +174,7 @@ import { blockDefs } from "@/scripts/hpml/index";
 import { HpmlTypeChecker } from "@/scripts/hpml/type-checker";
 import { url } from "@/config";
 import { collectPageVars } from "@/scripts/collect-page-vars";
+import { VueDraggable } from "vue-draggable-plus";
 import * as os from "@/os";
 import { selectFile } from "@/scripts/select-file";
 import { mainRouter } from "@/router";
@@ -181,10 +182,6 @@ import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { $i } from "@/account";
 
-const XDraggable = defineAsyncComponent(() =>
-	import("vuedraggable").then((x) => x.default),
-);
-
 const props = defineProps<{
 	initPageId?: string;
 	initPageName?: string;

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

@@ -10,7 +10,7 @@
 					i18n.ts.reactionSettingDescription
 				}}</template>
 				<div v-panel style="border-radius: 6px">
-					<XDraggable
+					<VueDraggable
 						v-model="reactions"
 						class="zoaiodol"
 						:item-key="(item) => item"
@@ -35,7 +35,7 @@
 								<i class="ph-plus ph-bold ph-lg"></i>
 							</button>
 						</template>
-					</XDraggable>
+					</VueDraggable>
 				</div>
 				<template #caption
 					>{{ i18n.ts.reactionSettingDescription2 }}
@@ -124,7 +124,7 @@
 
 <script lang="ts" setup>
 import { defineAsyncComponent, watch } from "vue";
-import XDraggable from "vuedraggable";
+import { VueDraggable } from "vue-draggable-plus";
 import FormInput from "@/components/form/input.vue";
 import FormRadios from "@/components/form/radios.vue";
 import FromSlot from "@/components/form/slot.vue";

packages/client/vite.config.ts

@@ -96,6 +96,6 @@ export default defineConfig(({ command, mode }) => {
 			auto: true,
 		},
 
-		logLevel: 'warn',
+		logLevel: "warn",
 	};
 });

pnpm-lock.yaml

@@ -910,6 +910,9 @@ importers:
       vue:
         specifier: 3.3.4
         version: 3.3.4
+      vue-draggable-plus:
+        specifier: ^0.2.2
+        version: 0.2.2
       vue-isyourpasswordsafe:
         specifier: ^2.0.0
         version: 2.0.0
@@ -919,9 +922,6 @@ importers:
       vue-prism-editor:
         specifier: 2.0.0-alpha.2
         version: 2.0.0-alpha.2(vue@3.3.4)
-      vuedraggable:
-        specifier: 4.1.0
-        version: 4.1.0(vue@3.3.4)
 
   packages/megalodon:
     dependencies:
@@ -5446,7 +5446,7 @@ packages:
   /axios@0.24.0:
     resolution: {integrity: sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==}
     dependencies:
-      follow-redirects: 1.15.2
+      follow-redirects: 1.15.2(debug@4.3.4)
     transitivePeerDependencies:
       - debug
     dev: false
@@ -5472,7 +5472,7 @@ packages:
   /axios@1.4.0:
     resolution: {integrity: sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==}
     dependencies:
-      follow-redirects: 1.15.2
+      follow-redirects: 1.15.2(debug@4.3.4)
       form-data: 4.0.0
       proxy-from-env: 1.1.0
     transitivePeerDependencies:
@@ -7137,17 +7137,6 @@ packages:
     dependencies:
       ms: 2.0.0
 
-  /debug@3.2.7:
-    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
-    dependencies:
-      ms: 2.1.3
-    dev: false
-
   /debug@3.2.7(supports-color@8.1.1):
     resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
     peerDependencies:
@@ -7158,7 +7147,6 @@ packages:
     dependencies:
       ms: 2.1.3
       supports-color: 8.1.1
-    dev: true
 
   /debug@4.3.3:
     resolution: {integrity: sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==}
@@ -8742,16 +8730,6 @@ packages:
       tabbable: 6.2.0
     dev: true
 
-  /follow-redirects@1.15.2:
-    resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
-    engines: {node: '>=4.0'}
-    peerDependencies:
-      debug: '*'
-    peerDependenciesMeta:
-      debug:
-        optional: true
-    dev: false
-
   /follow-redirects@1.15.2(debug@4.3.4):
     resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
     engines: {node: '>=4.0'}
@@ -9693,7 +9671,7 @@ packages:
     engines: {node: '>= 4.5.0'}
     dependencies:
       agent-base: 4.3.0
-      debug: 3.2.7
+      debug: 3.2.7(supports-color@8.1.1)
     transitivePeerDependencies:
       - supports-color
     dev: false
@@ -11844,7 +11822,7 @@ packages:
     resolution: {integrity: sha512-UqyYyH5YEXaJrf9S8E23GoJFQZXkBVJ9zYYMPGz919MSX1KuvAcycIuS0ci150HCoPf4XQVhQ84Qf8xRPWxFaQ==}
     engines: {node: '>= 7.6.0'}
     dependencies:
-      debug: 3.2.7
+      debug: 3.2.7(supports-color@8.1.1)
       koa-send: 5.0.1
     transitivePeerDependencies:
       - supports-color
@@ -12891,7 +12869,7 @@ packages:
     engines: {node: '>= 4.4.x'}
     hasBin: true
     dependencies:
-      debug: 3.2.7
+      debug: 3.2.7(supports-color@8.1.1)
       iconv-lite: 0.4.24
       sax: 1.2.4
     transitivePeerDependencies:
@@ -15438,10 +15416,6 @@ packages:
       is-plain-obj: 1.1.0
     dev: true
 
-  /sortablejs@1.14.0:
-    resolution: {integrity: sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==}
-    dev: true
-
   /source-map-js@1.0.2:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
@@ -17135,6 +17109,15 @@ packages:
     resolution: {integrity: sha512-AFbieoL7a5LMqcnOF04ji+rpXadgOXnZsxQr//r83kLPr7biP7am3g9zbaZIaBGwBRWeSvoMD4mgPdX3e4NWBg==}
     dev: true
 
+  /vue-draggable-plus@0.2.2:
+    resolution: {integrity: sha512-Mp9T7FK/N8anWr1Bi3RKQ3GETRu/pCHz+upvd0CTHY9Rq4sITfVtpoKsMUkasg55svx5sw8B+yeQob3WfaqqzQ==}
+    peerDependencies:
+      '@vue/composition-api': '*'
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dev: true
+
   /vue-isyourpasswordsafe@2.0.0:
     resolution: {integrity: sha512-j3ORj18R9AgFiP2UOM35KuZbSeJAUiwCSyeRBFN3CGFYTJSKsxqU9qGqOHOz6OhLAYKMTin8JOmqugAbF9O+Bg==}
     dependencies:
@@ -17174,15 +17157,6 @@ packages:
       '@vue/shared': 3.3.4
     dev: true
 
-  /vuedraggable@4.1.0(vue@3.3.4):
-    resolution: {integrity: sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==}
-    peerDependencies:
-      vue: ^3.0.1
-    dependencies:
-      sortablejs: 1.14.0
-      vue: 3.3.4
-    dev: true
-
   /w3c-hr-time@1.0.2:
     resolution: {integrity: sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==}
     deprecated: Use your platform's native performance.now() and performance.timeOrigin.