HoovesSocial/hippofish
2
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

fix: 🐛 fix draggable

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/client/package.json
View file

@ -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",
"vuedraggable": "4.1.0"
"vue-prism-editor": "2.0.0-alpha.2"
}
}

4
packages/client/src/components/MkCropperDialog.vue
View file

@ -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">

9
packages/client/src/components/MkPostFormAttaches.vue
View file

@ -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(() =>
import("vuedraggable").then((x) => x.default),
),
VueDraggable,
MkDriveFileThumbnail,
},

7
packages/client/src/components/MkWidgets.vue
View file

@ -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;

9
packages/client/src/pages/page-editor/page-editor.blocks.vue
View file

@ -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(() =>
import("vuedraggable").then((x) => x.default),
),
VueDraggable,
XSection,
XText,
XImage,

9
packages/client/src/pages/page-editor/page-editor.vue
View file

@ -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;

6
packages/client/src/pages/settings/reaction.vue
View file

@ -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";

2
packages/client/vite.config.ts
View file

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

60
pnpm-lock.yaml
View file

@ -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.