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

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

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

@ -1,6 +1,6 @@
<template>
<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}">
<div class="file" @click="showFileMenu(element, $event)" @contextmenu.prevent="showFileMenu(element, $event)">
<MkDriveFileThumbnail :data-id="element.id" class="thumbnail" :file="element" fit="cover"/>
@ -15,13 +15,13 @@
</template>
<script lang="ts" setup>
import { defineAsyncComponent } from 'vue';
import { defineAsyncComponent, watch } from 'vue';
import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
import * as os from '@/os';
import { deepClone } from '@/scripts/clone';
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<{
modelValue: any[];
@ -37,13 +37,6 @@ const emit = defineEmits<{
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) {
if (props.detachMediaFn) {
props.detachMediaFn(id);

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

@ -10,10 +10,11 @@
<MkButton inline @click="$emit('exit')">{{ i18n.ts.close }}</MkButton>
</header>
<Sortable
:list="props.widgets"
:model-value="props.widgets"
item-key="id"
:options="{ handle: '.handle', animation: 150 }"
@end="onSorted"
handle=".handle"
:animation="150"
@update:modelValue="v => emit('updateWidgets', v)"
>
<template #item="{element}">
<div class="customize-container">
@ -40,7 +41,7 @@ import * as os from '@/os';
import { i18n } from '@/i18n';
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 = {
name: string;
@ -84,13 +85,6 @@ const 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) {
const isLink = (el: HTMLElement) => {
if (el.tagName === 'A') return true;