mirror of
https://github.com/imezx/Warp.git
synced 2025-04-24 15:10:03 +00:00
46 lines
1.5 KiB
JavaScript
46 lines
1.5 KiB
JavaScript
import { tryOnMounted, tryOnScopeDispose, toValue, unrefElement, defaultDocument } from '@vueuse/core';
|
|
import Sortable from 'sortablejs';
|
|
import { isRef, nextTick } from 'vue-demi';
|
|
|
|
function useSortable(el, list, options = {}) {
|
|
let sortable;
|
|
const { document = defaultDocument, ...resetOptions } = options;
|
|
const defaultOptions = {
|
|
onUpdate: (e) => {
|
|
moveArrayElement(list, e.oldIndex, e.newIndex);
|
|
}
|
|
};
|
|
const start = () => {
|
|
const target = typeof el === "string" ? document == null ? void 0 : document.querySelector(el) : unrefElement(el);
|
|
if (!target || sortable !== void 0)
|
|
return;
|
|
sortable = new Sortable(target, { ...defaultOptions, ...resetOptions });
|
|
};
|
|
const stop = () => {
|
|
sortable == null ? void 0 : sortable.destroy();
|
|
sortable = void 0;
|
|
};
|
|
const option = (name, value) => {
|
|
if (value !== void 0)
|
|
sortable == null ? void 0 : sortable.option(name, value);
|
|
else
|
|
return sortable == null ? void 0 : sortable.option(name);
|
|
};
|
|
tryOnMounted(start);
|
|
tryOnScopeDispose(stop);
|
|
return { stop, start, option };
|
|
}
|
|
function moveArrayElement(list, from, to) {
|
|
const _valueIsRef = isRef(list);
|
|
const array = _valueIsRef ? [...toValue(list)] : toValue(list);
|
|
if (to >= 0 && to < array.length) {
|
|
const element = array.splice(from, 1)[0];
|
|
nextTick(() => {
|
|
array.splice(to, 0, element);
|
|
if (_valueIsRef)
|
|
list.value = array;
|
|
});
|
|
}
|
|
}
|
|
|
|
export { moveArrayElement, useSortable };
|