@kp-ui/lowcode 1.0.25 → 1.0.26

package/src/lib/vuedraggable/src/vuedraggable.js

@@ -1,44 +1,48 @@
-import f from "sortablejs";
-import { removeNode as a, insertNodeAt as m } from "./util/htmlHelper.js";
-import { console as x } from "./util/console.js";
-import { getValidSortableEntries as y, createSortableOption as I, getComponentAttributes as _ } from "./core/componentBuilderHelper.js";
-import { computeComponentStructure as b } from "./core/renderHelper.js";
-import { events as c } from "./core/sortableEvents.js";
-import { defineComponent as D, nextTick as g, h as u } from "vue";
-function h(e, t) {
-  g(() => this.$emit(e.toLowerCase(), t));
+import Sortable from "sortablejs";
+import { removeNode, insertNodeAt } from "./util/htmlHelper.js";
+import { console } from "./util/console.js";
+import { getValidSortableEntries, createSortableOption, getComponentAttributes } from "./core/componentBuilderHelper.js";
+import { computeComponentStructure } from "./core/renderHelper.js";
+import { events } from "./core/sortableEvents.js";
+import { defineComponent, nextTick, h } from "vue";
+function emit(evtName, evtData) {
+  nextTick(() => this.$emit(evtName.toLowerCase(), evtData));
 }
-function p(e) {
-  return (t, n) => {
-    if (this.realList !== null)
-      return this[`onDrag${e}`](t, n);
+function manage(evtName) {
+  return (evtData, originalElement) => {
+    if (this.realList !== null) {
+      return this[`onDrag${evtName}`](evtData, originalElement);
+    }
   };
 }
-function C(e) {
-  const t = p.call(this, e);
-  return (n, r) => {
-    t.call(this, n, r), h.call(this, e, n);
+function manageAndEmit(evtName) {
+  const delegateCallBack = manage.call(this, evtName);
+  return (evtData, originalElement) => {
+    delegateCallBack.call(this, evtData, originalElement);
+    emit.call(this, evtName, evtData);
   };
 }
-let d = null;
-const V = {
+let draggingElement = null;
+const props = {
   list: {
     type: Array,
-    required: !1,
+    required: false,
     default: null
   },
   modelValue: {
     type: Array,
-    required: !1,
+    required: false,
     default: null
   },
   itemKey: {
     type: [String, Function],
-    required: !0
+    required: true
   },
   clone: {
     type: Function,
-    default: (e) => e
+    default: (original) => {
+      return original;
+    }
   },
   tag: {
     type: String,
@@ -50,175 +54,210 @@ const V = {
   },
   componentData: {
     type: Object,
-    required: !1,
+    required: false,
     default: null
   }
-}, L = [
+};
+const emits = [
   "update:modelValue",
   "change",
-  ...[...c.manageAndEmit, ...c.emit].map((e) => e.toLowerCase())
-], P = D({
+  ...[...events.manageAndEmit, ...events.emit].map((evt) => evt.toLowerCase())
+];
+const draggableComponent = defineComponent({
   name: "draggable",
-  inheritAttrs: !1,
-  props: V,
-  emits: L,
+  inheritAttrs: false,
+  props,
+  emits,
   data() {
     return {
-      error: !1
+      error: false
     };
   },
   render() {
     try {
-      this.error = !1;
-      const { $slots: e, $attrs: t, tag: n, componentData: r, realList: o, getKey: i } = this, s = b({
-        $slots: e,
-        tag: n,
-        realList: o,
-        getKey: i
+      this.error = false;
+      const { $slots, $attrs, tag, componentData, realList, getKey } = this;
+      const componentStructure = computeComponentStructure({
+        $slots,
+        tag,
+        realList,
+        getKey
       });
-      this.componentStructure = s;
-      const l = _({ $attrs: t, componentData: r });
-      return s.render(u, l);
-    } catch (e) {
-      return this.error = !0, u("pre", { style: { color: "red" } }, e.stack);
+      this.componentStructure = componentStructure;
+      const attributes = getComponentAttributes({ $attrs, componentData });
+      return componentStructure.render(h, attributes);
+    } catch (err) {
+      this.error = true;
+      return h("pre", { style: { color: "red" } }, err.stack);
     }
   },
   created() {
-    this.list !== null && this.modelValue !== null && x.error("modelValue and list props are mutually exclusive! Please set one or another.");
+    if (this.list !== null && this.modelValue !== null) {
+      console.error("modelValue and list props are mutually exclusive! Please set one or another.");
+    }
   },
   mounted() {
-    if (this.error)
+    if (this.error) {
       return;
-    const { $attrs: e, $el: t, componentStructure: n } = this;
-    n.updated();
-    const r = I({
-      $attrs: e,
+    }
+    const { $attrs, $el, componentStructure } = this;
+    componentStructure.updated();
+    const sortableOptions = createSortableOption({
+      $attrs,
       callBackBuilder: {
-        manageAndEmit: (i) => C.call(this, i),
-        emit: (i) => h.bind(this, i),
-        manage: (i) => p.call(this, i)
+        manageAndEmit: (event) => manageAndEmit.call(this, event),
+        emit: (event) => emit.bind(this, event),
+        manage: (event) => manage.call(this, event)
       }
-    }), o = t.nodeType === 1 ? t : t.parentElement;
-    this._sortable = new f(o, r), this.targetDomElement = o, o.__draggable_component__ = this;
+    });
+    const targetDomElement = $el.nodeType === 1 ? $el : $el.parentElement;
+    this._sortable = new Sortable(targetDomElement, sortableOptions);
+    this.targetDomElement = targetDomElement;
+    targetDomElement.__draggable_component__ = this;
   },
   updated() {
     this.componentStructure.updated();
   },
   beforeUnmount() {
-    this._sortable !== void 0 && this._sortable.destroy();
+    if (this._sortable !== void 0) this._sortable.destroy();
   },
   computed: {
     realList() {
-      const { list: e } = this;
-      return e || this.modelValue;
+      const { list } = this;
+      return list ? list : this.modelValue;
     },
     getKey() {
-      const { itemKey: e } = this;
-      return typeof e == "function" ? e : (t) => t[e];
+      const { itemKey } = this;
+      if (typeof itemKey === "function") {
+        return itemKey;
+      }
+      return (element) => element[itemKey];
     }
   },
   watch: {
     $attrs: {
-      handler(e) {
-        const { _sortable: t } = this;
-        t && y(e).forEach(([n, r]) => {
-          t.option(n, r);
+      handler(newOptionValue) {
+        const { _sortable } = this;
+        if (!_sortable) return;
+        getValidSortableEntries(newOptionValue).forEach(([key, value]) => {
+          _sortable.option(key, value);
         });
       },
-      deep: !0
+      deep: true
     }
   },
   methods: {
-    getUnderlyingVm(e) {
-      return this.componentStructure.getUnderlyingVm(e) || null;
+    getUnderlyingVm(domElement) {
+      return this.componentStructure.getUnderlyingVm(domElement) || null;
     },
-    getUnderlyingPotencialDraggableComponent(e) {
-      return e.__draggable_component__;
+    getUnderlyingPotencialDraggableComponent(htmElement) {
+      return htmElement.__draggable_component__;
     },
-    emitChanges(e) {
-      g(() => this.$emit("change", e));
+    emitChanges(evt) {
+      nextTick(() => this.$emit("change", evt));
     },
-    alterList(e) {
+    alterList(onList) {
       if (this.list) {
-        e(this.list);
+        onList(this.list);
         return;
       }
-      const t = [...this.modelValue];
-      e(t), this.$emit("update:modelValue", t);
+      const newList = [...this.modelValue];
+      onList(newList);
+      this.$emit("update:modelValue", newList);
     },
     spliceList() {
-      const e = (t) => t.splice(...arguments);
-      this.alterList(e);
+      const spliceList = (list) => list.splice(...arguments);
+      this.alterList(spliceList);
     },
-    updatePosition(e, t) {
-      const n = (r) => r.splice(t, 0, r.splice(e, 1)[0]);
-      this.alterList(n);
+    updatePosition(oldIndex, newIndex) {
+      const updatePosition = (list) => list.splice(newIndex, 0, list.splice(oldIndex, 1)[0]);
+      this.alterList(updatePosition);
     },
-    getRelatedContextFromMoveEvent({ to: e, related: t }) {
-      const n = this.getUnderlyingPotencialDraggableComponent(e);
-      if (!n)
-        return { component: n };
-      const r = n.realList, o = { list: r, component: n };
-      return e !== t && r ? { ...n.getUnderlyingVm(t) || {}, ...o } : o;
+    getRelatedContextFromMoveEvent({ to, related }) {
+      const component = this.getUnderlyingPotencialDraggableComponent(to);
+      if (!component) {
+        return { component };
+      }
+      const list = component.realList;
+      const context = { list, component };
+      if (to !== related && list) {
+        const destination = component.getUnderlyingVm(related) || {};
+        return { ...destination, ...context };
+      }
+      return context;
     },
-    getVmIndexFromDomIndex(e) {
-      return this.componentStructure.getVmIndexFromDomIndex(e, this.targetDomElement);
+    getVmIndexFromDomIndex(domIndex) {
+      return this.componentStructure.getVmIndexFromDomIndex(domIndex, this.targetDomElement);
     },
-    onDragStart(e) {
-      this.context = this.getUnderlyingVm(e.item), e.item._underlying_vm_ = this.clone(this.context.element), d = e.item;
+    onDragStart(evt) {
+      this.context = this.getUnderlyingVm(evt.item);
+      evt.item._underlying_vm_ = this.clone(this.context.element);
+      draggingElement = evt.item;
     },
-    onDragAdd(e) {
-      const t = e.item._underlying_vm_;
-      if (t === void 0)
+    onDragAdd(evt) {
+      const element = evt.item._underlying_vm_;
+      if (element === void 0) {
         return;
-      a(e.item);
-      const n = this.getVmIndexFromDomIndex(e.newIndex);
-      this.spliceList(n, 0, t);
-      const r = { element: t, newIndex: n };
-      this.emitChanges({ added: r });
+      }
+      removeNode(evt.item);
+      const newIndex = this.getVmIndexFromDomIndex(evt.newIndex);
+      this.spliceList(newIndex, 0, element);
+      const added = { element, newIndex };
+      this.emitChanges({ added });
     },
-    onDragRemove(e) {
-      if (m(e.from, e.item, e.oldIndex), e.pullMode === "clone") {
-        a(e.clone);
+    onDragRemove(evt) {
+      insertNodeAt(evt.from, evt.item, evt.oldIndex);
+      if (evt.pullMode === "clone") {
+        removeNode(evt.clone);
         return;
       }
-      const { index: t, element: n } = this.context;
-      this.spliceList(t, 1);
-      const r = { element: n, oldIndex: t };
-      this.emitChanges({ removed: r });
+      const { index: oldIndex, element } = this.context;
+      this.spliceList(oldIndex, 1);
+      const removed = { element, oldIndex };
+      this.emitChanges({ removed });
     },
-    onDragUpdate(e) {
-      a(e.item), m(e.from, e.item, e.oldIndex);
-      const t = this.context.index, n = this.getVmIndexFromDomIndex(e.newIndex);
-      this.updatePosition(t, n);
-      const r = { element: this.context.element, oldIndex: t, newIndex: n };
-      this.emitChanges({ moved: r });
+    onDragUpdate(evt) {
+      removeNode(evt.item);
+      insertNodeAt(evt.from, evt.item, evt.oldIndex);
+      const oldIndex = this.context.index;
+      const newIndex = this.getVmIndexFromDomIndex(evt.newIndex);
+      this.updatePosition(oldIndex, newIndex);
+      const moved = { element: this.context.element, oldIndex, newIndex };
+      this.emitChanges({ moved });
     },
-    computeFutureIndex(e, t) {
-      if (!e.element)
+    computeFutureIndex(relatedContext, evt) {
+      if (!relatedContext.element) {
         return 0;
-      const n = [...t.to.children].filter((s) => s.style.display !== "none"), r = n.indexOf(t.related), o = e.component.getVmIndexFromDomIndex(r);
-      return n.indexOf(d) !== -1 || !t.willInsertAfter ? o : o + 1;
+      }
+      const domChildren = [...evt.to.children].filter((el) => el.style["display"] !== "none");
+      const currentDomIndex = domChildren.indexOf(evt.related);
+      const currentIndex = relatedContext.component.getVmIndexFromDomIndex(currentDomIndex);
+      const draggedInList = domChildren.indexOf(draggingElement) !== -1;
+      return draggedInList || !evt.willInsertAfter ? currentIndex : currentIndex + 1;
     },
-    onDragMove(e, t) {
-      const { move: n, realList: r } = this;
-      if (!n || !r)
-        return !0;
-      const o = this.getRelatedContextFromMoveEvent(e), i = this.computeFutureIndex(o, e), s = {
+    onDragMove(evt, originalEvent) {
+      const { move, realList } = this;
+      if (!move || !realList) {
+        return true;
+      }
+      const relatedContext = this.getRelatedContextFromMoveEvent(evt);
+      const futureIndex = this.computeFutureIndex(relatedContext, evt);
+      const draggedContext = {
         ...this.context,
-        futureIndex: i
-      }, l = {
-        ...e,
-        relatedContext: o,
-        draggedContext: s
+        futureIndex
+      };
+      const sendEvent = {
+        ...evt,
+        relatedContext,
+        draggedContext
       };
-      return n(l, t);
+      return move(sendEvent, originalEvent);
     },
     onDragEnd() {
-      d = null;
+      draggingElement = null;
     }
   }
 });
 export {
-  P as default
+  draggableComponent as default
 };