Mizah/Sharkey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

13
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;">
<XDraggable v-model="reactions" class="zoaiodol" :item-key="item => item" animation="150" delay="100" delay-on-touch-only="true">
<Sortable :list="reactions" class="zoaiodol" :item-key="item => item" :options="{ animation: 150, delay: 100, delayOnTouchOnly: true }" @end="onSorted">
<template #item="{element}">
<button class="_button item" @click="remove(element, $event)">
<MkEmoji :emoji="element" :normal="true"/>
@ -12,7 +12,9 @@
<template #footer>
<button class="_button add" @click="chooseEmoji"><i class="ti ti-plus"></i></button>
</template>
</XDraggable>
</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>
@ -55,7 +57,7 @@
<script lang="ts" setup>
import { defineAsyncComponent, watch } from 'vue';
import XDraggable from 'vuedraggable';
import { Sortable } from 'sortablejs-vue3';
import FormInput from '@/components/form/input.vue';
import FormRadios from '@/components/form/radios.vue';
import FromSlot from '@/components/form/slot.vue';
@ -75,6 +77,11 @@ 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);
}