@kp-ui/lowcode 2.13.1 → 2.14.0-alpha

package/src/lib/vuedraggable/src/core/renderHelper.js

@@ -0,0 +1,39 @@
+import { ComponentStructure as p } from "./componentStructure.js";
+import { isTransition as l, isHtmlTag as f } from "../util/tags.js";
+import { resolveComponent as d, TransitionGroup as h } from "vue";
+function g(t, n) {
+  const o = t[n];
+  return o ? o() : [];
+}
+function w({ $slots: t, realList: n, getKey: o }) {
+  const r = n || [], [a, i] = ["header", "footer"].map(
+    (e) => g(t, e)
+  ), { item: m } = t;
+  if (!m)
+    throw new Error("draggable element must have an item slot");
+  const u = r.flatMap(
+    (e, c) => m({ element: e, index: c }).map((s) => (s.key = o(e), s.props = { ...s.props || {}, "data-draggable": !0 }, s))
+  );
+  if (u.length !== r.length)
+    throw new Error("Item slot must have only one child");
+  return {
+    header: a,
+    footer: i,
+    default: u
+  };
+}
+function C(t) {
+  const n = l(t), o = !f(t) && !n;
+  return {
+    transition: n,
+    externalComponent: o,
+    tag: o ? d(t) : n ? h : t
+  };
+}
+function b({ $slots: t, tag: n, realList: o, getKey: r }) {
+  const a = w({ $slots: t, realList: o, getKey: r }), i = C(n);
+  return new p({ nodes: a, root: i, realList: o });
+}
+export {
+  b as computeComponentStructure
+};

package/src/lib/vuedraggable/src/core/sortableEvents.js

@@ -0,0 +1,12 @@
+const n = ["Start", "Add", "Remove", "Update", "End"], t = ["Choose", "Unchoose", "Sort", "Filter", "Clone"], o = ["Move"], a = [o, n, t].flatMap((e) => e).map((e) => `on${e}`), s = {
+  manage: o,
+  manageAndEmit: n,
+  emit: t
+};
+function d(e) {
+  return a.indexOf(e) !== -1;
+}
+export {
+  s as events,
+  d as isReadOnly
+};

package/src/lib/vuedraggable/src/util/console.js

@@ -0,0 +1,7 @@
+function o() {
+  return typeof window < "u" ? window.console : global.console;
+}
+const n = o();
+export {
+  n as console
+};

package/src/lib/vuedraggable/src/util/htmlHelper.js

@@ -0,0 +1,11 @@
+function i(e) {
+  e.parentElement !== null && e.parentElement.removeChild(e);
+}
+function l(e, r, n) {
+  const t = n === 0 ? e.children[0] : e.children[n - 1].nextSibling;
+  e.insertBefore(r, t);
+}
+export {
+  l as insertNodeAt,
+  i as removeNode
+};

package/src/lib/vuedraggable/src/util/string.js

@@ -0,0 +1,10 @@
+function o(e) {
+  const c = /* @__PURE__ */ Object.create(null);
+  return function(n) {
+    return c[n] || (c[n] = e(n));
+  };
+}
+const a = /-(\w)/g, h = o((e) => e.replace(a, (c, t) => t.toUpperCase()));
+export {
+  h as camelize
+};

package/src/lib/vuedraggable/src/util/tags.js

@@ -0,0 +1,133 @@
+const e = [
+  "a",
+  "abbr",
+  "address",
+  "area",
+  "article",
+  "aside",
+  "audio",
+  "b",
+  "base",
+  "bdi",
+  "bdo",
+  "blockquote",
+  "body",
+  "br",
+  "button",
+  "canvas",
+  "caption",
+  "cite",
+  "code",
+  "col",
+  "colgroup",
+  "data",
+  "datalist",
+  "dd",
+  "del",
+  "details",
+  "dfn",
+  "dialog",
+  "div",
+  "dl",
+  "dt",
+  "em",
+  "embed",
+  "fieldset",
+  "figcaption",
+  "figure",
+  "footer",
+  "form",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "head",
+  "header",
+  "hgroup",
+  "hr",
+  "html",
+  "i",
+  "iframe",
+  "img",
+  "input",
+  "ins",
+  "kbd",
+  "label",
+  "legend",
+  "li",
+  "link",
+  "main",
+  "map",
+  "mark",
+  "math",
+  "menu",
+  "menuitem",
+  "meta",
+  "meter",
+  "nav",
+  "noscript",
+  "object",
+  "ol",
+  "optgroup",
+  "option",
+  "output",
+  "p",
+  "param",
+  "picture",
+  "pre",
+  "progress",
+  "q",
+  "rb",
+  "rp",
+  "rt",
+  "rtc",
+  "ruby",
+  "s",
+  "samp",
+  "script",
+  "section",
+  "select",
+  "slot",
+  "small",
+  "source",
+  "span",
+  "strong",
+  "style",
+  "sub",
+  "summary",
+  "sup",
+  "svg",
+  "table",
+  "tbody",
+  "td",
+  "template",
+  "textarea",
+  "tfoot",
+  "th",
+  "thead",
+  "time",
+  "title",
+  "tr",
+  "track",
+  "u",
+  "ul",
+  "var",
+  "video",
+  "wbr"
+];
+function r(t) {
+  return e.includes(t);
+}
+function a(t) {
+  return ["transition-group", "TransitionGroup"].includes(t);
+}
+function i(t) {
+  return ["id", "class", "role", "style"].includes(t) || t.startsWith("data-") || t.startsWith("aria-") || t.startsWith("on");
+}
+export {
+  i as isHtmlAttribute,
+  r as isHtmlTag,
+  a as isTransition
+};

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

@@ -0,0 +1,224 @@
+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));
+}
+function p(e) {
+  return (t, n) => {
+    if (this.realList !== null)
+      return this[`onDrag${e}`](t, n);
+  };
+}
+function C(e) {
+  const t = p.call(this, e);
+  return (n, r) => {
+    t.call(this, n, r), h.call(this, e, n);
+  };
+}
+let d = null;
+const V = {
+  list: {
+    type: Array,
+    required: !1,
+    default: null
+  },
+  modelValue: {
+    type: Array,
+    required: !1,
+    default: null
+  },
+  itemKey: {
+    type: [String, Function],
+    required: !0
+  },
+  clone: {
+    type: Function,
+    default: (e) => e
+  },
+  tag: {
+    type: String,
+    default: "div"
+  },
+  move: {
+    type: Function,
+    default: null
+  },
+  componentData: {
+    type: Object,
+    required: !1,
+    default: null
+  }
+}, L = [
+  "update:modelValue",
+  "change",
+  ...[...c.manageAndEmit, ...c.emit].map((e) => e.toLowerCase())
+], P = D({
+  name: "draggable",
+  inheritAttrs: !1,
+  props: V,
+  emits: L,
+  data() {
+    return {
+      error: !1
+    };
+  },
+  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.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);
+    }
+  },
+  created() {
+    this.list !== null && this.modelValue !== null && x.error("modelValue and list props are mutually exclusive! Please set one or another.");
+  },
+  mounted() {
+    if (this.error)
+      return;
+    const { $attrs: e, $el: t, componentStructure: n } = this;
+    n.updated();
+    const r = I({
+      $attrs: e,
+      callBackBuilder: {
+        manageAndEmit: (i) => C.call(this, i),
+        emit: (i) => h.bind(this, i),
+        manage: (i) => p.call(this, i)
+      }
+    }), o = t.nodeType === 1 ? t : t.parentElement;
+    this._sortable = new f(o, r), this.targetDomElement = o, o.__draggable_component__ = this;
+  },
+  updated() {
+    this.componentStructure.updated();
+  },
+  beforeUnmount() {
+    this._sortable !== void 0 && this._sortable.destroy();
+  },
+  computed: {
+    realList() {
+      const { list: e } = this;
+      return e || this.modelValue;
+    },
+    getKey() {
+      const { itemKey: e } = this;
+      return typeof e == "function" ? e : (t) => t[e];
+    }
+  },
+  watch: {
+    $attrs: {
+      handler(e) {
+        const { _sortable: t } = this;
+        t && y(e).forEach(([n, r]) => {
+          t.option(n, r);
+        });
+      },
+      deep: !0
+    }
+  },
+  methods: {
+    getUnderlyingVm(e) {
+      return this.componentStructure.getUnderlyingVm(e) || null;
+    },
+    getUnderlyingPotencialDraggableComponent(e) {
+      return e.__draggable_component__;
+    },
+    emitChanges(e) {
+      g(() => this.$emit("change", e));
+    },
+    alterList(e) {
+      if (this.list) {
+        e(this.list);
+        return;
+      }
+      const t = [...this.modelValue];
+      e(t), this.$emit("update:modelValue", t);
+    },
+    spliceList() {
+      const e = (t) => t.splice(...arguments);
+      this.alterList(e);
+    },
+    updatePosition(e, t) {
+      const n = (r) => r.splice(t, 0, r.splice(e, 1)[0]);
+      this.alterList(n);
+    },
+    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;
+    },
+    getVmIndexFromDomIndex(e) {
+      return this.componentStructure.getVmIndexFromDomIndex(e, this.targetDomElement);
+    },
+    onDragStart(e) {
+      this.context = this.getUnderlyingVm(e.item), e.item._underlying_vm_ = this.clone(this.context.element), d = e.item;
+    },
+    onDragAdd(e) {
+      const t = e.item._underlying_vm_;
+      if (t === 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 });
+    },
+    onDragRemove(e) {
+      if (m(e.from, e.item, e.oldIndex), e.pullMode === "clone") {
+        a(e.clone);
+        return;
+      }
+      const { index: t, element: n } = this.context;
+      this.spliceList(t, 1);
+      const r = { element: n, oldIndex: t };
+      this.emitChanges({ removed: r });
+    },
+    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 });
+    },
+    computeFutureIndex(e, t) {
+      if (!e.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;
+    },
+    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 = {
+        ...this.context,
+        futureIndex: i
+      }, l = {
+        ...e,
+        relatedContext: o,
+        draggedContext: s
+      };
+      return n(l, t);
+    },
+    onDragEnd() {
+      d = null;
+    }
+  }
+});
+export {
+  P as default
+};