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

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

View File

@ -46,8 +46,6 @@
"s-age": "1.1.2", "s-age": "1.1.2",
"sass": "1.57.0", "sass": "1.57.0",
"seedrandom": "3.0.5", "seedrandom": "3.0.5",
"sortablejs": "^1.15.0",
"sortablejs-vue3": "^1.2.3",
"strict-event-emitter-types": "2.0.0", "strict-event-emitter-types": "2.0.0",
"stringz": "2.1.0", "stringz": "2.1.0",
"syuilo-password-strength": "0.0.1", "syuilo-password-strength": "0.0.1",
@ -63,7 +61,8 @@
"vanilla-tilt": "1.8.0", "vanilla-tilt": "1.8.0",
"vite": "4.0.2", "vite": "4.0.2",
"vue": "3.2.45", "vue": "3.2.45",
"vue-prism-editor": "2.0.0-alpha.2" "vue-prism-editor": "2.0.0-alpha.2",
"vuedraggable": "next"
}, },
"devDependencies": { "devDependencies": {
"@types/escape-regexp": "0.0.1", "@types/escape-regexp": "0.0.1",

View File

@ -1,6 +1,6 @@
<template> <template>
<div v-show="props.modelValue.length != 0" class="skeikyzd"> <div v-show="props.modelValue.length != 0" class="skeikyzd">
<Sortable :list="props.modelValue" class="files" item-key="id" :options="{ animation: 150, delay: 100, delayOnTouchOnly: true }" @end="onSorted"> <Sortable :model-value="props.modelValue" class="files" item-key="id" :animation="150" :delay="100" :delay-on-touch-only="true" @update:modelValue="v => emit('update:modelValue', v)">
<template #item="{element}"> <template #item="{element}">
<div class="file" @click="showFileMenu(element, $event)" @contextmenu.prevent="showFileMenu(element, $event)"> <div class="file" @click="showFileMenu(element, $event)" @contextmenu.prevent="showFileMenu(element, $event)">
<MkDriveFileThumbnail :data-id="element.id" class="thumbnail" :file="element" fit="cover"/> <MkDriveFileThumbnail :data-id="element.id" class="thumbnail" :file="element" fit="cover"/>
@ -15,13 +15,13 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { defineAsyncComponent } from 'vue'; import { defineAsyncComponent, watch } from 'vue';
import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue'; import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
import * as os from '@/os'; import * as os from '@/os';
import { deepClone } from '@/scripts/clone'; import { deepClone } from '@/scripts/clone';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
const Sortable = defineAsyncComponent(() => import('sortablejs-vue3').then(x => x.Sortable)); const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
const props = defineProps<{ const props = defineProps<{
modelValue: any[]; modelValue: any[];
@ -37,13 +37,6 @@ const emit = defineEmits<{
let menuShowing = false; let menuShowing = false;
function onSorted(event) {
const items = deepClone(props.modelValue);
const item = items.splice(event.oldIndex, 1)[0];
items.splice(event.newIndex, 0, item);
emit('update:modelValue', items);
}
function detachMedia(id) { function detachMedia(id) {
if (props.detachMediaFn) { if (props.detachMediaFn) {
props.detachMediaFn(id); props.detachMediaFn(id);

View File

@ -10,10 +10,11 @@
<MkButton inline @click="$emit('exit')">{{ i18n.ts.close }}</MkButton> <MkButton inline @click="$emit('exit')">{{ i18n.ts.close }}</MkButton>
</header> </header>
<Sortable <Sortable
:list="props.widgets" :model-value="props.widgets"
item-key="id" item-key="id"
:options="{ handle: '.handle', animation: 150 }" handle=".handle"
@end="onSorted" :animation="150"
@update:modelValue="v => emit('updateWidgets', v)"
> >
<template #item="{element}"> <template #item="{element}">
<div class="customize-container"> <div class="customize-container">
@ -40,7 +41,7 @@ import * as os from '@/os';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
import { deepClone } from '@/scripts/clone'; import { deepClone } from '@/scripts/clone';
const Sortable = defineAsyncComponent(() => import('sortablejs-vue3').then(x => x.Sortable)); const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
type Widget = { type Widget = {
name: string; name: string;
@ -84,13 +85,6 @@ const updateWidget = (id, data) => {
emit('updateWidget', { id, data }); emit('updateWidget', { id, data });
}; };
function onSorted(event) {
const items = deepClone(props.widgets);
const item = items.splice(event.oldIndex, 1)[0];
items.splice(event.newIndex, 0, item);
emit('updateWidgets', items);
}
function onContextmenu(widget: Widget, ev: MouseEvent) { function onContextmenu(widget: Widget, ev: MouseEvent) {
const isLink = (el: HTMLElement) => { const isLink = (el: HTMLElement) => {
if (el.tagName === 'A') return true; if (el.tagName === 'A') return true;

View File

@ -27,7 +27,7 @@ import * as os from '@/os';
export default defineComponent({ export default defineComponent({
components: { 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, XSection, XText, XImage, XButton, XTextarea, XTextInput, XTextareaInput, XNumberInput, XSwitch, XIf, XPost, XCounter, XRadioButton, XCanvas, XNote,
}, },

View File

@ -107,7 +107,7 @@ import { mainRouter } from '@/router';
import { i18n } from '@/i18n'; 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 Sortable = defineAsyncComponent(() => import('sortablejs-vue3').then(x => x.default)); const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
const props = defineProps<{ const props = defineProps<{
initPageId?: string; initPageId?: string;

View File

@ -3,7 +3,7 @@
<FromSlot class="_formBlock"> <FromSlot class="_formBlock">
<template #label>{{ i18n.ts.reactionSettingDescription }}</template> <template #label>{{ i18n.ts.reactionSettingDescription }}</template>
<div v-panel style="border-radius: 6px;"> <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}"> <template #item="{element}">
<button class="_button item" @click="remove(element, $event)"> <button class="_button item" @click="remove(element, $event)">
<MkEmoji :emoji="element" :normal="true"/> <MkEmoji :emoji="element" :normal="true"/>
@ -13,8 +13,6 @@
<button class="_button add" @click="chooseEmoji"><i class="ti ti-plus"></i></button> <button class="_button add" @click="chooseEmoji"><i class="ti ti-plus"></i></button>
</template> </template>
</Sortable> </Sortable>
<!-- TODO: https://github.com/MaxLeiter/sortablejs-vue3/issues/52 -->
<button class="_button add" @click="chooseEmoji"><i class="ti ti-plus"></i></button>
</div> </div>
<template #caption>{{ i18n.ts.reactionSettingDescription2 }} <button class="_textButton" @click="preview">{{ i18n.ts.preview }}</button></template> <template #caption>{{ i18n.ts.reactionSettingDescription2 }} <button class="_textButton" @click="preview">{{ i18n.ts.preview }}</button></template>
</FromSlot> </FromSlot>
@ -57,7 +55,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { defineAsyncComponent, watch } from 'vue'; import { defineAsyncComponent, watch } from 'vue';
import { Sortable } from 'sortablejs-vue3'; import Sortable from 'vuedraggable';
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';
@ -77,11 +75,6 @@ const reactionPickerWidth = $computed(defaultStore.makeGetterSetter('reactionPic
const reactionPickerHeight = $computed(defaultStore.makeGetterSetter('reactionPickerHeight')); const reactionPickerHeight = $computed(defaultStore.makeGetterSetter('reactionPickerHeight'));
const reactionPickerUseDrawerForMobile = $computed(defaultStore.makeGetterSetter('reactionPickerUseDrawerForMobile')); 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() { function save() {
defaultStore.set('reactions', reactions); defaultStore.set('reactions', reactions);
} }

View File

@ -5193,8 +5193,6 @@ __metadata:
s-age: 1.1.2 s-age: 1.1.2
sass: 1.57.0 sass: 1.57.0
seedrandom: 3.0.5 seedrandom: 3.0.5
sortablejs: ^1.15.0
sortablejs-vue3: ^1.2.3
start-server-and-test: 1.15.2 start-server-and-test: 1.15.2
strict-event-emitter-types: 2.0.0 strict-event-emitter-types: 2.0.0
stringz: 2.1.0 stringz: 2.1.0
@ -5214,6 +5212,7 @@ __metadata:
vue-eslint-parser: ^9.1.0 vue-eslint-parser: ^9.1.0
vue-prism-editor: 2.0.0-alpha.2 vue-prism-editor: 2.0.0-alpha.2
vue-tsc: ^1.0.14 vue-tsc: ^1.0.14
vuedraggable: next
languageName: unknown languageName: unknown
linkType: soft linkType: soft
@ -15316,23 +15315,10 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"sortablejs-vue3@npm:^1.2.3": "sortablejs@npm:1.14.0":
version: 1.2.3 version: 1.14.0
resolution: "sortablejs-vue3@npm:1.2.3" resolution: "sortablejs@npm:1.14.0"
dependencies: checksum: 7b9d2cbb0331f3f259b8703a17174ff46a941b6d59c77c75ca05a5bd484bf2b409a9c1d21344f9c933939880450803b254825c7c7d7f88034e8c7e675420b389
sortablejs: ^1.15.0
vue: ^3.2.37
peerDependencies:
sortablejs: ^1.15.0
vue: ^3.2.25
checksum: 1cf069db4e950a9b447d98d6f4d233082f84b43ac88735e3aab07f2dcebee99026425ee5fc69b04893fe2bb9040fa8cda088a57205f7c46453043d32764b5b36
languageName: node
linkType: hard
"sortablejs@npm:^1.15.0":
version: 1.15.0
resolution: "sortablejs@npm:1.15.0"
checksum: bb82223a663484640d317cad510ac987f26b7a443631040407224de1be069afcc6c39048b6d8527f10f269e33595e8128d7de2fac23517c8260470f77f932d55
languageName: node languageName: node
linkType: hard linkType: hard
@ -17177,7 +17163,7 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"vue@npm:3.2.45, vue@npm:^3.2.37": "vue@npm:3.2.45":
version: 3.2.45 version: 3.2.45
resolution: "vue@npm:3.2.45" resolution: "vue@npm:3.2.45"
dependencies: dependencies:
@ -17190,6 +17176,17 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"vuedraggable@npm:next":
version: 4.1.0
resolution: "vuedraggable@npm:4.1.0"
dependencies:
sortablejs: 1.14.0
peerDependencies:
vue: ^3.0.1
checksum: 8b4c5a6b384361df97f7a3595d7772dfbb086bf97c6702a1117b532a9e49db2908cb5d21b7959cb10179714c4c2225e4be0b77b29f778923169ea8a8197a429f
languageName: node
linkType: hard
"w3c-xmlserializer@npm:^4.0.0": "w3c-xmlserializer@npm:^4.0.0":
version: 4.0.0 version: 4.0.0
resolution: "w3c-xmlserializer@npm:4.0.0" resolution: "w3c-xmlserializer@npm:4.0.0"