92 lines
2.9 KiB
JavaScript
92 lines
2.9 KiB
JavaScript
import { nextTick, defineComponent, ref, reactive, h } from 'vue-demi';
|
|
import { tryOnMounted, tryOnScopeDispose, unrefElement, defaultDocument, toValue, useVModel } from '@vueuse/core';
|
|
import Sortable from 'sortablejs';
|
|
|
|
var __defProp = Object.defineProperty;
|
|
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp.call(b, prop))
|
|
__defNormalProp(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols)
|
|
for (var prop of __getOwnPropSymbols(b)) {
|
|
if (__propIsEnum.call(b, prop))
|
|
__defNormalProp(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
var __objRest = (source, exclude) => {
|
|
var target = {};
|
|
for (var prop in source)
|
|
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
target[prop] = source[prop];
|
|
if (source != null && __getOwnPropSymbols)
|
|
for (var prop of __getOwnPropSymbols(source)) {
|
|
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
target[prop] = source[prop];
|
|
}
|
|
return target;
|
|
};
|
|
function useSortable(el, list, options = {}) {
|
|
let sortable;
|
|
const _a = options, { document = defaultDocument } = _a, resetOptions = __objRest(_a, ["document"]);
|
|
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)
|
|
return;
|
|
sortable = new Sortable(target, __spreadValues(__spreadValues({}, defaultOptions), resetOptions));
|
|
};
|
|
const stop = () => sortable == null ? void 0 : sortable.destroy();
|
|
tryOnMounted(start);
|
|
tryOnScopeDispose(stop);
|
|
return { stop, start };
|
|
}
|
|
function moveArrayElement(list, from, to) {
|
|
const array = toValue(list);
|
|
if (to >= 0 && to < array.length) {
|
|
const element = array.splice(from, 1)[0];
|
|
nextTick(() => array.splice(to, 0, element));
|
|
}
|
|
}
|
|
|
|
const UseSortable = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
|
|
name: "UseSortable",
|
|
model: {
|
|
// Compatible with vue2
|
|
prop: "modelValue",
|
|
event: "update:modelValue"
|
|
},
|
|
props: {
|
|
modelValue: {
|
|
type: Array,
|
|
required: true
|
|
},
|
|
tag: {
|
|
type: String,
|
|
default: "div"
|
|
},
|
|
options: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
},
|
|
setup(props, { slots }) {
|
|
const list = useVModel(props, "modelValue");
|
|
const target = ref();
|
|
const data = reactive(useSortable(target, list, props.options));
|
|
return () => {
|
|
if (slots.default)
|
|
return h(props.tag, { ref: target }, slots.default(data));
|
|
};
|
|
}
|
|
});
|
|
|
|
export { UseSortable };
|