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

revert: use sortablejs-vue3 instead of vuedraggable for more stability

Browse Source
This commit is contained in:
syuilo
2022-12-21 15:10:21 +09:00
parent b71d26fbca
commit 5cac199710
7 changed files with 31 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -27,7 +27,7 @@ import * as os from '@/os';
export default defineComponent({
components: {
Sortable: defineAsyncComponent(() => import('sortablejs-vue3').then(x => x.Sortable)),
Sortable: defineAsyncComponent(() => import('vuedraggable').then(x => x.default)),
XSection, XText, XImage, XButton, XTextarea, XTextInput, XTextareaInput, XNumberInput, XSwitch, XIf, XPost, XCounter, XRadioButton, XCanvas, XNote,
},

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

@@ -107,7 +107,7 @@ import { mainRouter } from '@/router';
import { i18n } from '@/i18n';
import { definePageMetadata } from '@/scripts/page-metadata';
import { $i } from '@/account';
const Sortable = defineAsyncComponent(() => import('sortablejs-vue3').then(x => x.default));
const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
const props = defineProps<{
initPageId?: string;

11
packages/client/src/pages/settings/reaction.vue
View File

@@ -3,7 +3,7 @@
<FromSlot class="_formBlock">
<template #label>{{ i18n.ts.reactionSettingDescription }}</template>
<div v-panel style="border-radius: 6px;">
<Sortable :list="reactions" class="zoaiodol" :item-key="item => item" :options="{ animation: 150, delay: 100, delayOnTouchOnly: true }" @end="onSorted">
<Sortable v-model="reactions" class="zoaiodol" :item-key="item => item" :animation="150" :delay="100" :delay-on-touch-only="true">
<template #item="{element}">
<button class="_button item" @click="remove(element, $event)">
<MkEmoji :emoji="element" :normal="true"/>
@@ -13,8 +13,6 @@
<button class="_button add" @click="chooseEmoji"><i class="ti ti-plus"></i></button>
</template>
</Sortable>
<!-- TODO: https://github.com/MaxLeiter/sortablejs-vue3/issues/52 が実装されたら消す -->
<button class="_button add" @click="chooseEmoji"><i class="ti ti-plus"></i></button>
</div>
<template #caption>{{ i18n.ts.reactionSettingDescription2 }} <button class="_textButton" @click="preview">{{ i18n.ts.preview }}</button></template>
</FromSlot>
@@ -57,7 +55,7 @@
<script lang="ts" setup>
import { defineAsyncComponent, watch } from 'vue';
import { Sortable } from 'sortablejs-vue3';
import Sortable from 'vuedraggable';
import FormInput from '@/components/form/input.vue';
import FormRadios from '@/components/form/radios.vue';
import FromSlot from '@/components/form/slot.vue';
@@ -77,11 +75,6 @@ const reactionPickerWidth = $computed(defaultStore.makeGetterSetter('reactionPic
const reactionPickerHeight = $computed(defaultStore.makeGetterSetter('reactionPickerHeight'));
const reactionPickerUseDrawerForMobile = $computed(defaultStore.makeGetterSetter('reactionPickerUseDrawerForMobile'));
function onSorted(event) {
const item = reactions.splice(event.oldIndex, 1)[0];
reactions.splice(event.newIndex, 0, item);
}
function save() {
defaultStore.set('reactions', reactions);
}