@rhino-design/vue 0.2.2 → 0.2.3

package/dist/components/XTreeNode.vue2.js

@@ -0,0 +1,314 @@
+import { defineComponent as oe, computed as a, ref as I, resolveComponent as ae, openBlock as r, createElementBlock as s, normalizeClass as v, createElementVNode as y, normalizeStyle as K, createCommentVNode as x, renderSlot as i, createVNode as O, unref as de, withModifiers as E, toDisplayString as V, Fragment as ie, renderList as re, createSlots as se, withCtx as b, mergeProps as m } from "vue";
+import ce from "./XIcon.js";
+const ue = ["draggable"], fe = {
+  key: 1,
+  class: "x-tree-node__switcher-icon",
+  viewBox: "0 0 1024 1024",
+  fill: "currentColor"
+}, ve = {
+  key: 0,
+  class: "x-tree-node__line-placeholder"
+}, he = ["checked", "indeterminate", "disabled"], ge = {
+  key: 0,
+  class: "x-tree-node__icon"
+}, ke = { class: "x-tree-node__title-text" }, be = /* @__PURE__ */ oe({
+  __name: "XTreeNode",
+  props: {
+    node: {},
+    fieldKey: {},
+    fieldTitle: {},
+    fieldChildren: {},
+    selectedKeys: {},
+    checkedKeys: {},
+    expandedKeys: {},
+    halfCheckedKeys: {},
+    selectable: { type: Boolean },
+    checkable: { type: Boolean },
+    showLine: { type: Boolean },
+    blockNode: { type: Boolean },
+    loadMore: { type: Function },
+    draggable: { type: Boolean },
+    filterTreeNode: { type: Function },
+    searchValue: {},
+    level: {},
+    indentSize: {},
+    halfIndentSize: {},
+    virtualized: { type: Boolean }
+  },
+  emits: ["select", "check", "expand", "dragStart", "dragEnd", "dragOver", "dragLeave", "drop"],
+  setup(n, { emit: X }) {
+    const l = n, c = X, h = a(() => l.node[l.fieldKey]), F = a(() => l.node[l.fieldTitle] || ""), z = a(() => l.node[l.fieldChildren] || []), D = a(() => z.value.length > 0), w = a(() => l.node.isLeaf ?? !D.value), B = a(() => l.selectedKeys.includes(h.value)), P = a(() => l.checkedKeys.includes(h.value)), H = a(() => l.halfCheckedKeys.includes(h.value)), g = a(() => l.expandedKeys.includes(h.value)), C = a(() => l.node.disabled === !0), Y = a(() => l.selectable !== !1 && l.node.selectable !== !1), N = a(() => l.checkable === !0 && l.node.checkable !== !1), L = a(() => l.indentSize ?? 18), S = a(() => l.halfIndentSize ?? 9), T = a(() => (l.level || 0) * L.value), j = a(() => ((l.level || 0) - 1) * L.value + S.value), R = a(() => (l.level || 0) * L.value + S.value), u = I(null), $ = I(!1);
+    function q(e) {
+      C.value || e.target.closest(".x-tree-node__switcher") || (Y.value && c("select", h.value, l.node, e), w.value || M(e, !1));
+    }
+    function A(e) {
+      if (C.value || !N.value) return;
+      const t = e.target;
+      c("check", h.value, l.node, t.checked, e);
+    }
+    async function G() {
+      if (!l.loadMore || D.value || w.value || $.value) return !0;
+      $.value = !0;
+      try {
+        return await l.loadMore(l.node), !0;
+      } catch (e) {
+        return console.error("[XTree] loadMore failed:", e), !1;
+      } finally {
+        $.value = !1;
+      }
+    }
+    async function M(e, t = !0) {
+      if (t && e.stopPropagation(), w.value || $.value) return;
+      const d = !g.value;
+      d && !await G() || c("expand", h.value, l.node, d, e);
+    }
+    function J(e) {
+      M(e, !0);
+    }
+    function Q(e) {
+      !l.draggable || C.value || c("dragStart", e, l.node);
+    }
+    function U(e) {
+      l.draggable && (u.value = null, c("dragEnd", e, l.node));
+    }
+    function W(e) {
+      if (!l.draggable) return;
+      e.preventDefault();
+      const t = e.currentTarget.getBoundingClientRect(), d = e.clientY - t.top, f = t.height;
+      d < f * 0.25 ? u.value = "before" : d > f * 0.75 ? u.value = "after" : u.value = "inside", c("dragOver", e, l.node);
+    }
+    function Z(e) {
+      l.draggable && (u.value = null, c("dragLeave", e, l.node));
+    }
+    function _(e) {
+      if (!l.draggable) return;
+      e.preventDefault();
+      const t = u.value || "inside";
+      u.value = null, c("drop", e, l.node, t);
+    }
+    function ee(e, t, d) {
+      c("select", e, t, d);
+    }
+    function ne(e, t, d, f) {
+      c("check", e, t, d, f);
+    }
+    function le(e, t, d, f) {
+      c("expand", e, t, d, f);
+    }
+    function te(e, t, d) {
+      c("drop", e, t, d);
+    }
+    return (e, t) => {
+      const d = ae("XTreeNode", !0);
+      return r(), s("div", {
+        class: v(["x-tree-node", {
+          "x-tree-node--selected": B.value,
+          "x-tree-node--disabled": C.value,
+          "x-tree-node--leaf": w.value,
+          "x-tree-node--expanded": g.value,
+          "x-tree-node--drag-over-before": u.value === "before",
+          "x-tree-node--drag-over-inside": u.value === "inside",
+          "x-tree-node--drag-over-after": u.value === "after"
+        }]),
+        draggable: n.draggable && !C.value,
+        onDragstart: Q,
+        onDragend: U,
+        onDragover: W,
+        onDragleave: Z,
+        onDrop: _
+      }, [
+        y("div", {
+          class: v(["x-tree-node__content", { "x-tree-node__content--block": n.blockNode }]),
+          style: K({
+            paddingLeft: `${T.value}px`,
+            "--x-tree-content-indent": `${T.value}px`
+          }),
+          onClick: q
+        }, [
+          n.showLine && n.level && n.level > 0 ? (r(), s("span", {
+            key: 0,
+            class: v(["x-tree-node__line-horizontal", { "x-tree-node__line-horizontal--leaf": w.value }]),
+            style: K({ left: `${j.value}px` })
+          }, null, 6)) : x("", !0),
+          w.value ? (r(), s("span", {
+            key: 2,
+            class: v(["x-tree-node__switcher x-tree-node__switcher--leaf", { "x-tree-node__switcher--leaf-no-indent": n.showLine }])
+          }, [
+            n.showLine ? (r(), s("span", ve)) : x("", !0)
+          ], 2)) : (r(), s("span", {
+            key: 1,
+            class: v(["x-tree-node__switcher", {
+              "x-tree-node__switcher--arrow-expanded": g.value && !n.showLine
+            }]),
+            onClick: J
+          }, [
+            $.value ? i(e.$slots, "loading-icon", {
+              key: 0,
+              node: n.node
+            }, () => [
+              O(de(ce), {
+                name: "jiazai",
+                spin: "",
+                size: 18,
+                class: "x-tree-node__loading-icon-default"
+              })
+            ], !0) : i(e.$slots, "switcher-icon", {
+              key: 1,
+              node: n.node,
+              expanded: g.value
+            }, () => [
+              n.showLine ? i(e.$slots, "switcher-line-icon", {
+                key: 0,
+                node: n.node,
+                expanded: g.value
+              }, () => [
+                y("span", {
+                  class: v(["x-tree-node__switcher-line-icon", { "is-expanded": g.value }])
+                }, null, 2)
+              ], !0) : (r(), s("svg", fe, [...t[7] || (t[7] = [
+                y("path", { d: "M715.8 493.5L435.9 213.6c-14.1-14.1-36.9-14.1-51 0-14.1 14.1-14.1 36.9 0 51l249.8 249.8-249.8 249.8c-14.1 14.1-14.1 36.9 0 51 7 7 16.2 10.5 25.5 10.5s18.4-3.5 25.5-10.5l279.9-279.9c14.1-14.1 14.1-36.9 0-51z" }, null, -1)
+              ])]))
+            ], !0)
+          ], 2)),
+          N.value ? (r(), s("span", {
+            key: 3,
+            class: "x-tree-node__checkbox",
+            onClick: t[0] || (t[0] = E(() => {
+            }, ["stop"]))
+          }, [
+            y("input", {
+              type: "checkbox",
+              checked: P.value,
+              indeterminate: H.value,
+              disabled: C.value,
+              onChange: A
+            }, null, 40, he)
+          ])) : x("", !0),
+          n.draggable ? (r(), s("span", {
+            key: 4,
+            class: "x-tree-node__drag-handle",
+            onClick: t[1] || (t[1] = E(() => {
+            }, ["stop"]))
+          }, [
+            i(e.$slots, "drag-icon", { node: n.node }, () => [
+              t[8] || (t[8] = y("span", { class: "x-tree-node__drag-icon" }, "⋮⋮", -1))
+            ], !0)
+          ])) : x("", !0),
+          y("span", {
+            class: v(["x-tree-node__title", { "x-tree-node__title--selected": B.value }])
+          }, [
+            i(e.$slots, "icon", { node: n.node }, () => [
+              n.node.icon ? (r(), s("span", ge, V(n.node.icon), 1)) : x("", !0)
+            ], !0),
+            i(e.$slots, "title", { node: n.node }, () => [
+              y("span", ke, V(F.value), 1)
+            ], !0)
+          ], 2),
+          e.$slots.extra ? (r(), s("span", {
+            key: 5,
+            class: "x-tree-node__extra",
+            onClick: t[2] || (t[2] = E(() => {
+            }, ["stop"]))
+          }, [
+            i(e.$slots, "extra", { node: n.node }, void 0, !0)
+          ])) : x("", !0)
+        ], 6),
+        !n.virtualized && D.value && g.value ? (r(), s("div", {
+          key: 0,
+          class: "x-tree-node__children",
+          style: K(n.showLine ? { "--tree-line-left": `${R.value}px` } : {})
+        }, [
+          (r(!0), s(ie, null, re(z.value, (f, p) => (r(), s("div", {
+            key: f[n.fieldKey],
+            class: v(["x-tree-node__child-item", {
+              "x-tree-node__child-item--with-line": n.showLine,
+              "x-tree-node__child-item--first": p === 0,
+              "x-tree-node__child-item--last": p === z.value.length - 1
+            }])
+          }, [
+            O(d, {
+              node: f,
+              "field-key": n.fieldKey,
+              "field-title": n.fieldTitle,
+              "field-children": n.fieldChildren,
+              "selected-keys": n.selectedKeys,
+              "checked-keys": n.checkedKeys,
+              "expanded-keys": n.expandedKeys,
+              "half-checked-keys": n.halfCheckedKeys,
+              selectable: n.selectable,
+              checkable: n.checkable,
+              "show-line": n.showLine,
+              "block-node": n.blockNode,
+              "load-more": n.loadMore,
+              draggable: n.draggable,
+              level: (n.level || 0) + 1,
+              "indent-size": L.value,
+              "half-indent-size": S.value,
+              onSelect: ee,
+              onCheck: ne,
+              onExpand: le,
+              onDragStart: t[3] || (t[3] = (o, k) => e.$emit("dragStart", o, k)),
+              onDragEnd: t[4] || (t[4] = (o, k) => e.$emit("dragEnd", o, k)),
+              onDragOver: t[5] || (t[5] = (o, k) => e.$emit("dragOver", o, k)),
+              onDragLeave: t[6] || (t[6] = (o, k) => e.$emit("dragLeave", o, k)),
+              onDrop: te
+            }, se({ _: 2 }, [
+              e.$slots.title ? {
+                name: "title",
+                fn: b((o) => [
+                  i(e.$slots, "title", m({ ref_for: !0 }, o), void 0, !0)
+                ]),
+                key: "0"
+              } : void 0,
+              e.$slots.icon ? {
+                name: "icon",
+                fn: b((o) => [
+                  i(e.$slots, "icon", m({ ref_for: !0 }, o), void 0, !0)
+                ]),
+                key: "1"
+              } : void 0,
+              e.$slots["switcher-icon"] ? {
+                name: "switcher-icon",
+                fn: b((o) => [
+                  i(e.$slots, "switcher-icon", m({ ref_for: !0 }, o), void 0, !0)
+                ]),
+                key: "2"
+              } : void 0,
+              e.$slots["switcher-line-icon"] ? {
+                name: "switcher-line-icon",
+                fn: b((o) => [
+                  i(e.$slots, "switcher-line-icon", m({ ref_for: !0 }, o), void 0, !0)
+                ]),
+                key: "3"
+              } : void 0,
+              e.$slots["loading-icon"] ? {
+                name: "loading-icon",
+                fn: b((o) => [
+                  i(e.$slots, "loading-icon", m({ ref_for: !0 }, o), void 0, !0)
+                ]),
+                key: "4"
+              } : void 0,
+              e.$slots["drag-icon"] ? {
+                name: "drag-icon",
+                fn: b((o) => [
+                  i(e.$slots, "drag-icon", m({ ref_for: !0 }, o), void 0, !0)
+                ]),
+                key: "5"
+              } : void 0,
+              e.$slots.extra ? {
+                name: "extra",
+                fn: b((o) => [
+                  i(e.$slots, "extra", m({ ref_for: !0 }, o), void 0, !0)
+                ]),
+                key: "6"
+              } : void 0
+            ]), 1032, ["node", "field-key", "field-title", "field-children", "selected-keys", "checked-keys", "expanded-keys", "half-checked-keys", "selectable", "checkable", "show-line", "block-node", "load-more", "draggable", "level", "indent-size", "half-indent-size"])
+          ], 2))), 128))
+        ], 4)) : x("", !0)
+      ], 42, ue);
+    };
+  }
+});
+export {
+  be as default
+};

package/dist/components/XTreeSelect.vue.js

@@ -0,0 +1,7 @@
+import o from "./XTreeSelect.vue2.js";
+/* empty css                 */
+import t from "../_virtual/_plugin-vue_export-helper.js";
+const a = /* @__PURE__ */ t(o, [["__scopeId", "data-v-c868c52a"]]);
+export {
+  a as default
+};