78 lines
2.4 KiB
JavaScript
78 lines
2.4 KiB
JavaScript
|
import { isRef, nextTick, toValue } from "vue";
|
||
|
|
import { defaultDocument, tryOnMounted, tryOnScopeDispose, unrefElement } from "@vueuse/core";
|
||
|
|
import Sortable from "sortablejs";
|
||
|
|
|
||
|
|
//#region useSortable/index.ts
|
||
|
|
/**
|
||
|
|
* Wrapper for sortablejs.
|
||
|
|
* @param el
|
||
|
|
* @param list
|
||
|
|
* @param options
|
||
|
|
*/
|
||
|
|
function useSortable(el, list, options = {}) {
|
||
|
|
let sortable;
|
||
|
|
const { document = defaultDocument,...resetOptions } = options;
|
||
|
|
const defaultOptions = { onUpdate: (e) => {
|
||
|
|
moveArrayElement(list, e.oldIndex, e.newIndex, e);
|
||
|
|
} };
|
||
|
|
const start = () => {
|
||
|
|
const target = typeof el === "string" ? document === null || document === void 0 ? void 0 : document.querySelector(el) : unrefElement(el);
|
||
|
|
if (!target || sortable !== void 0) return;
|
||
|
|
sortable = new Sortable(target, {
|
||
|
|
...defaultOptions,
|
||
|
|
...resetOptions
|
||
|
|
});
|
||
|
|
};
|
||
|
|
const stop = () => {
|
||
|
|
sortable === null || sortable === void 0 || sortable.destroy();
|
||
|
|
sortable = void 0;
|
||
|
|
};
|
||
|
|
const option = (name, value) => {
|
||
|
|
if (value !== void 0) sortable === null || sortable === void 0 || sortable.option(name, value);
|
||
|
|
else return sortable === null || sortable === void 0 ? void 0 : sortable.option(name);
|
||
|
|
};
|
||
|
|
tryOnMounted(start);
|
||
|
|
tryOnScopeDispose(stop);
|
||
|
|
return {
|
||
|
|
stop,
|
||
|
|
start,
|
||
|
|
option
|
||
|
|
};
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Inserts a element into the DOM at a given index.
|
||
|
|
* @param parentElement
|
||
|
|
* @param element
|
||
|
|
* @param {number} index
|
||
|
|
* @see https://github.com/Alfred-Skyblue/vue-draggable-plus/blob/a3829222095e1949bf2c9a20979d7b5930e66f14/src/utils/index.ts#L81C1-L94C2
|
||
|
|
*/
|
||
|
|
function insertNodeAt(parentElement, element, index) {
|
||
|
|
const refElement = parentElement.children[index];
|
||
|
|
parentElement.insertBefore(element, refElement);
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Removes a node from the DOM.
|
||
|
|
* @param {Node} node
|
||
|
|
* @see https://github.com/Alfred-Skyblue/vue-draggable-plus/blob/a3829222095e1949bf2c9a20979d7b5930e66f14/src/utils/index.ts#L96C1-L102C2
|
||
|
|
*/
|
||
|
|
function removeNode(node) {
|
||
|
|
if (node.parentNode) node.parentNode.removeChild(node);
|
||
|
|
}
|
||
|
|
function moveArrayElement(list, from, to, e = null) {
|
||
|
|
if (e != null) {
|
||
|
|
removeNode(e.item);
|
||
|
|
insertNodeAt(e.from, e.item, from);
|
||
|
|
}
|
||
|
|
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;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
//#endregion
|
||
|
|
export { useSortable as i, moveArrayElement as n, removeNode as r, insertNodeAt as t };
|