rsesot/misskey
1
0
Fork 0
forked from mirrors/misskey
Code Pull Requests Activity

use sortablejs-vue3 instead of vuedraggable for more stability

Browse Source
This commit is contained in:
syuilo
2022-12-21 11:04:49 +09:00
parent fe158339da
commit 60b3d73cc9
8 changed files with 176 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
packages/client/src/pages/page-editor/page-editor.blocks.vue
View File

@@ -1,9 +1,9 @@
<template>
<XDraggable v-model="blocks" tag="div" item-key="id" handle=".drag-handle" :group="{ name: 'blocks' }" animation="150" swap-threshold="0.5">
<Sortable :list="blocks" tag="div" item-key="id" :options="{ handle: '.drag-handle', group: { name: 'blocks' }, animation: 150, swapThreshold: 0.5 }">
<template #item="{element}">
<component :is="'x-' + element.type" :value="element" :hpml="hpml" @update:value="updateItem" @remove="() => removeItem(element)"/>
</template>
</XDraggable>
</Sortable>
</template>
<script lang="ts">
@@ -27,14 +27,14 @@ import * as os from '@/os';
export default defineComponent({
components: {
XDraggable: defineAsyncComponent(() => import('vuedraggable').then(x => x.default)),
XSection, XText, XImage, XButton, XTextarea, XTextInput, XTextareaInput, XNumberInput, XSwitch, XIf, XPost, XCounter, XRadioButton, XCanvas, XNote
Sortable: defineAsyncComponent(() => import('sortablejs-vue3').then(x => x.Sortable)),
XSection, XText, XImage, XButton, XTextarea, XTextInput, XTextareaInput, XNumberInput, XSwitch, XIf, XPost, XCounter, XRadioButton, XCanvas, XNote,
},
props: {
modelValue: {
type: Array,
required: true
required: true,
},
hpml: {
required: true,
@@ -50,8 +50,8 @@ export default defineComponent({
},
set(value) {
this.$emit('update:modelValue', value);
}
}
},
},
},
methods: {
@@ -60,7 +60,7 @@ export default defineComponent({
const newValue = [
...this.blocks.slice(0, i),
v,
...this.blocks.slice(i + 1)
...this.blocks.slice(i + 1),
];
this.$emit('update:modelValue', newValue);
},
@@ -69,10 +69,10 @@ export default defineComponent({
const i = this.blocks.findIndex(x => x.id === el.id);
const newValue = [
...this.blocks.slice(0, i),
...this.blocks.slice(i + 1)
...this.blocks.slice(i + 1),
];
this.$emit('update:modelValue', newValue);
},
}
},
});
</script>

40
packages/client/src/pages/page-editor/page-editor.vue
View File

@@ -54,7 +54,7 @@
<div v-else-if="tab === 'variables'">
<div class="qmuvgica">
<XDraggable v-show="variables.length > 0" v-model="variables" tag="div" class="variables" item-key="name" handle=".drag-handle" :group="{ name: 'variables' }" animation="150" swap-threshold="0.5">
<Sortable v-show="variables.length > 0" v-model="variables" tag="div" class="variables" item-key="name" handle=".drag-handle" :group="{ name: 'variables' }" animation="150" swap-threshold="0.5">
<template #item="{element}">
<XVariable
:model-value="element"
@@ -66,7 +66,7 @@
@remove="() => removeVariable(element)"
/>
</template>
</XDraggable>
</Sortable>
<MkButton v-if="!readonly" class="add" @click="addVariable()"><i class="ti ti-plus"></i></MkButton>
</div>
@@ -107,7 +107,7 @@ import { mainRouter } from '@/router';
import { i18n } from '@/i18n';
import { definePageMetadata } from '@/scripts/page-metadata';
import { $i } from '@/account';
const XDraggable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
const Sortable = defineAsyncComponent(() => import('sortablejs-vue3').then(x => x.default));
const props = defineProps<{
initPageId?: string;
@@ -186,24 +186,24 @@ function save() {
if (pageId) {
options.pageId = pageId;
os.api('pages/update', options)
.then(page => {
currentName = name.trim();
os.alert({
type: 'success',
text: i18n.ts._pages.updated,
});
}).catch(onError);
.then(page => {
currentName = name.trim();
os.alert({
type: 'success',
text: i18n.ts._pages.updated,
});
}).catch(onError);
} else {
os.api('pages/create', options)
.then(created => {
pageId = created.id;
currentName = name.trim();
os.alert({
type: 'success',
text: i18n.ts._pages.created,
});
mainRouter.push(`/pages/edit/${pageId}`);
}).catch(onError);
.then(created => {
pageId = created.id;
currentName = name.trim();
os.alert({
type: 'success',
text: i18n.ts._pages.created,
});
mainRouter.push(`/pages/edit/${pageId}`);
}).catch(onError);
}
}
@@ -438,7 +438,7 @@ definePageMetadata(computed(() => {
return {
title: title,
icon: 'ti ti-pencil',
};
};
}));
</script>