fix: 🐛 fix draggable

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

Closes #10467
This commit is contained in:
ThatOneCalculator 2023-07-11 18:26:53 -07:00
parent 17320b960b
commit cacee0228b
No known key found for this signature in database
GPG key ID: 8703CACD01000000
9 changed files with 40 additions and 70 deletions

View file

@ -87,9 +87,9 @@
"vite": "4.4.2", "vite": "4.4.2",
"vite-plugin-compression": "^0.5.1", "vite-plugin-compression": "^0.5.1",
"vue": "3.3.4", "vue": "3.3.4",
"vue-draggable-plus": "^0.2.2",
"vue-isyourpasswordsafe": "^2.0.0", "vue-isyourpasswordsafe": "^2.0.0",
"vue-plyr": "^7.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"
} }
} }

View file

@ -13,7 +13,9 @@
<template #default="{ width, height }"> <template #default="{ width, height }">
<div <div
class="mk-cropper-dialog" 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"> <Transition name="fade">
<div v-if="loading" class="loading"> <div v-if="loading" class="loading">

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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