@itguy614/clean-ui 0.9.0 → 1.0.0

package/dist/components/CuiTransferList.vue.js

@@ -0,0 +1,442 @@
+import { defineComponent as oe, ref as z, computed as k, withDirectives as se, openBlock as c, createElementBlock as m, normalizeStyle as y, createElementVNode as s, toDisplayString as p, createVNode as o, withCtx as b, createCommentVNode as x, Fragment as j, renderList as U, renderSlot as q, createBlock as G, vShow as de } from "vue";
+import V from "./CuiButton.vue.js";
+import v from "./CuiIcon.vue.js";
+import J from "./CuiInput.vue.js";
+const ue = { style: { padding: "calc(0.625rem * var(--cui-density-scale, 1)) calc(0.75rem * var(--cui-density-scale, 1))", display: "flex", justifyContent: "space-between", alignItems: "center" } }, ce = { style: { fontSize: "0.6875rem", color: "var(--cui-text-tertiary)" } }, ve = {
+  key: 0,
+  style: { padding: "0 calc(0.5rem * var(--cui-density-scale, 1)) calc(0.375rem * var(--cui-density-scale, 1))" }
+}, fe = ["draggable", "onClick", "onDblclick", "onDragstart", "onDragover"], me = { style: { flex: "1", minWidth: "0" } }, ge = { style: { lineHeight: "1.3" } }, ye = {
+  key: 0,
+  style: { fontSize: "0.6875rem", color: "var(--cui-text-tertiary)", lineHeight: "1.3" }
+}, pe = {
+  key: 0,
+  style: { padding: "calc(1rem * var(--cui-density-scale, 1))", textAlign: "center", fontSize: "0.8125rem", color: "var(--cui-text-tertiary)" }
+}, be = { style: { display: "flex", flexDirection: "column", justifyContent: "center", gap: "calc(0.25rem * var(--cui-density-scale, 1))", flexShrink: "0" } }, xe = { style: { padding: "calc(0.625rem * var(--cui-density-scale, 1)) calc(0.75rem * var(--cui-density-scale, 1))", display: "flex", justifyContent: "space-between", alignItems: "center" } }, he = { style: { fontSize: "0.6875rem", color: "var(--cui-text-tertiary)" } }, Se = {
+  key: 0,
+  style: { padding: "0 calc(0.5rem * var(--cui-density-scale, 1)) calc(0.375rem * var(--cui-density-scale, 1))" }
+}, ze = ["onClick", "onDblclick", "onDragstart", "onDragover"], ke = { style: { flex: "1", minWidth: "0" } }, De = { style: { lineHeight: "1.3" } }, Ve = {
+  key: 0,
+  style: { fontSize: "0.6875rem", color: "var(--cui-text-tertiary)", lineHeight: "1.3" }
+}, Ce = {
+  key: 0,
+  style: { padding: "calc(1rem * var(--cui-density-scale, 1))", textAlign: "center", fontSize: "0.8125rem", color: "var(--cui-text-tertiary)" }
+}, Be = /* @__PURE__ */ oe({
+  __name: "CuiTransferList",
+  props: {
+    items: {},
+    modelValue: { default: () => [] },
+    sourceTitle: { default: "Available" },
+    targetTitle: { default: "Selected" },
+    filterable: { type: Boolean, default: !0 },
+    sourcePlaceholder: { default: "Filter..." },
+    targetPlaceholder: { default: "Filter..." },
+    height: { default: "320px" },
+    size: { default: "md" },
+    hidden: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue"],
+  setup(n, { emit: K }) {
+    const r = n, f = K, C = z(""), w = z(""), h = z(/* @__PURE__ */ new Set()), u = z(/* @__PURE__ */ new Set()), M = k(() => new Set(r.modelValue)), T = k(
+      () => r.items.filter((l) => !M.value.has(l.value))
+    ), P = k(() => {
+      if (!C.value) return T.value;
+      const l = C.value.toLowerCase();
+      return T.value.filter(
+        (e) => e.label.toLowerCase().includes(l) || e.description && e.description.toLowerCase().includes(l)
+      );
+    }), B = k(
+      () => r.modelValue.map((l) => r.items.find((e) => e.value === l)).filter(Boolean)
+    ), L = k(() => {
+      if (!w.value) return B.value;
+      const l = w.value.toLowerCase();
+      return B.value.filter(
+        (e) => e.label.toLowerCase().includes(l) || e.description && e.description.toLowerCase().includes(l)
+      );
+    });
+    function Q() {
+      if (r.disabled) return;
+      const l = [...r.modelValue, ...h.value];
+      h.value = /* @__PURE__ */ new Set(), f("update:modelValue", l);
+    }
+    function X() {
+      if (r.disabled) return;
+      const l = [...r.modelValue, ...T.value.filter((e) => !e.disabled).map((e) => e.value)];
+      h.value = /* @__PURE__ */ new Set(), f("update:modelValue", l);
+    }
+    function Z() {
+      if (r.disabled) return;
+      const l = u.value, e = r.modelValue.filter((a) => !l.has(a));
+      u.value = /* @__PURE__ */ new Set(), f("update:modelValue", e);
+    }
+    function _() {
+      r.disabled || (u.value = /* @__PURE__ */ new Set(), f("update:modelValue", []));
+    }
+    function ee() {
+      if (r.disabled || u.value.size !== 1) return;
+      const l = [...u.value][0], e = [...r.modelValue], a = e.indexOf(l);
+      a > 0 && ([e[a - 1], e[a]] = [e[a], e[a - 1]], f("update:modelValue", e));
+    }
+    function te() {
+      if (r.disabled || u.value.size !== 1) return;
+      const l = [...u.value][0], e = [...r.modelValue], a = e.indexOf(l);
+      a < e.length - 1 && ([e[a], e[a + 1]] = [e[a + 1], e[a]], f("update:modelValue", e));
+    }
+    function le(l) {
+      if (r.disabled) return;
+      const e = new Set(h.value);
+      e.has(l) ? e.delete(l) : e.add(l), h.value = e;
+    }
+    function ae(l) {
+      if (r.disabled) return;
+      const e = new Set(u.value);
+      e.has(l) ? e.delete(l) : e.add(l), u.value = e;
+    }
+    function re(l) {
+      r.disabled || l.disabled || f("update:modelValue", [...r.modelValue, l.value]);
+    }
+    function ie(l) {
+      r.disabled || f("update:modelValue", r.modelValue.filter((e) => e !== l.value));
+    }
+    const S = z(null), d = z(null), D = z(null);
+    function O(l, e, a) {
+      if (r.disabled) {
+        l.preventDefault();
+        return;
+      }
+      S.value = { value: e, from: a }, l.dataTransfer.effectAllowed = "move", l.dataTransfer.setData("text/plain", String(e));
+    }
+    function A() {
+      S.value = null, d.value = null, D.value = null;
+    }
+    function H(l, e, a) {
+      l.preventDefault(), l.dataTransfer.dropEffect = "move";
+      const g = l.currentTarget.getBoundingClientRect(), t = g.top + g.height / 2, i = l.clientY < t ? "before" : "after";
+      d.value = { value: e, side: a, position: i };
+    }
+    function $(l, e) {
+      l.preventDefault(), l.dataTransfer.dropEffect = "move", D.value = e;
+    }
+    function E() {
+      D.value = null;
+    }
+    function N(l, e) {
+      if (l.preventDefault(), !S.value) return;
+      const { value: a, from: g } = S.value;
+      if (g === "source" && e === "target") {
+        const t = [...r.modelValue];
+        if (d.value && d.value.side === "target") {
+          const i = t.indexOf(d.value.value);
+          if (i >= 0) {
+            const F = d.value.position === "after" ? i + 1 : i;
+            t.splice(F, 0, a);
+          } else
+            t.push(a);
+        } else
+          t.push(a);
+        f("update:modelValue", t);
+      } else if (g === "target" && e === "source")
+        f("update:modelValue", r.modelValue.filter((t) => t !== a));
+      else if (g === "target" && e === "target") {
+        const t = r.modelValue.filter((i) => i !== a);
+        if (d.value && d.value.side === "target") {
+          const i = t.indexOf(d.value.value);
+          if (i >= 0) {
+            const F = d.value.position === "after" ? i + 1 : i;
+            t.splice(F, 0, a);
+          } else
+            t.push(a);
+        } else
+          t.push(a);
+        f("update:modelValue", t);
+      }
+      S.value = null, d.value = null, D.value = null;
+    }
+    function R(l, e) {
+      if (!d.value || d.value.value !== l || d.value.side !== e) return;
+      const a = "2px solid var(--cui-primary)";
+      return d.value.position === "before" ? { borderTop: a } : { borderBottom: a };
+    }
+    const ne = {
+      sm: { fontSize: "0.8125rem", itemPad: "0.3125rem 0.5rem", titleFont: "0.75rem" },
+      md: { fontSize: "0.875rem", itemPad: "0.4375rem 0.625rem", titleFont: "0.8125rem" },
+      lg: { fontSize: "0.9375rem", itemPad: "0.5rem 0.75rem", titleFont: "0.875rem" }
+    }, I = k(() => ne[r.size]);
+    function W(l, e) {
+      return {
+        display: "flex",
+        alignItems: "center",
+        gap: "calc(0.5rem * var(--cui-density-scale, 1))",
+        padding: I.value.itemPad,
+        fontSize: I.value.fontSize,
+        cursor: e ? "default" : "pointer",
+        borderRadius: "0.25rem",
+        background: l ? "var(--cui-primary-bg)" : "transparent",
+        color: e ? "var(--cui-text-tertiary)" : "var(--cui-text-body)",
+        opacity: e ? "0.5" : "1",
+        transition: "background 0.1s ease",
+        userSelect: "none"
+      };
+    }
+    const Y = k(() => ({
+      flex: "1",
+      minWidth: "0",
+      border: "1px solid var(--cui-border)",
+      borderRadius: "0.5rem",
+      background: "var(--cui-surface-base, white)",
+      display: "flex",
+      flexDirection: "column",
+      overflow: "hidden"
+    }));
+    return (l, e) => {
+      var a, g;
+      return se((c(), m("div", {
+        style: y({
+          display: "flex",
+          gap: "calc(0.5rem * var(--cui-density-scale, 1))",
+          alignItems: "stretch",
+          opacity: n.disabled ? "0.5" : "1"
+        })
+      }, [
+        s("div", {
+          style: y(Y.value)
+        }, [
+          s("div", ue, [
+            s("span", {
+              style: y({ fontSize: I.value.titleFont, fontWeight: "600", color: "var(--cui-text-body)", textTransform: "uppercase", letterSpacing: "0.03em" })
+            }, p(n.sourceTitle), 5),
+            s("span", ce, p(P.value.length), 1)
+          ]),
+          n.filterable ? (c(), m("div", ve, [
+            o(J, {
+              modelValue: C.value,
+              "onUpdate:modelValue": e[0] || (e[0] = (t) => C.value = t),
+              placeholder: n.sourcePlaceholder,
+              size: "sm"
+            }, {
+              prefix: b(() => [
+                o(v, {
+                  name: "magnifying-glass",
+                  size: "0.75rem"
+                })
+              ]),
+              _: 1
+            }, 8, ["modelValue", "placeholder"])
+          ])) : x("", !0),
+          s("div", {
+            style: y({
+              flex: "1",
+              overflowY: "auto",
+              padding: "0 calc(0.375rem * var(--cui-density-scale, 1)) calc(0.375rem * var(--cui-density-scale, 1))",
+              maxHeight: n.height,
+              outline: D.value === "source" && ((a = S.value) == null ? void 0 : a.from) === "target" ? "2px dashed var(--cui-primary)" : "none",
+              outlineOffset: "-2px",
+              borderRadius: "0 0 0.5rem 0.5rem"
+            }),
+            onDragover: e[1] || (e[1] = (t) => $(t, "source")),
+            onDragleave: E,
+            onDrop: e[2] || (e[2] = (t) => N(t, "source"))
+          }, [
+            (c(!0), m(j, null, U(P.value, (t) => (c(), m("div", {
+              key: String(t.value),
+              draggable: !t.disabled && !n.disabled,
+              style: y({ ...W(h.value.has(t.value), t.disabled), ...R(t.value, "source") }),
+              onClick: (i) => !t.disabled && le(t.value),
+              onDblclick: (i) => re(t),
+              onDragstart: (i) => O(i, t.value, "source"),
+              onDragend: A,
+              onDragover: (i) => H(i, t.value, "source")
+            }, [
+              o(v, {
+                name: "dots-six-vertical",
+                size: "0.75rem",
+                style: { flexShrink: "0", color: "var(--cui-text-tertiary)", cursor: "grab", opacity: "0.4" }
+              }),
+              q(l.$slots, "item", {
+                item: t,
+                side: "source"
+              }, () => [
+                t.icon ? (c(), G(v, {
+                  key: 0,
+                  name: t.icon,
+                  size: "0.875rem",
+                  style: { flexShrink: "0", color: "var(--cui-text-secondary)" }
+                }, null, 8, ["name"])) : x("", !0),
+                s("div", me, [
+                  s("div", ge, p(t.label), 1),
+                  t.description ? (c(), m("div", ye, p(t.description), 1)) : x("", !0)
+                ])
+              ])
+            ], 44, fe))), 128)),
+            P.value.length === 0 ? (c(), m("div", pe, " No items ")) : x("", !0)
+          ], 36)
+        ], 4),
+        s("div", be, [
+          o(V, {
+            variant: "outline",
+            size: "xs",
+            disabled: n.disabled || h.value.size === 0,
+            onClick: Q
+          }, {
+            default: b(() => [
+              o(v, {
+                name: "caret-right",
+                size: "0.875rem"
+              })
+            ]),
+            _: 1
+          }, 8, ["disabled"]),
+          o(V, {
+            variant: "outline",
+            size: "xs",
+            disabled: n.disabled || T.value.length === 0,
+            onClick: X
+          }, {
+            default: b(() => [
+              o(v, {
+                name: "caret-double-right",
+                size: "0.875rem"
+              })
+            ]),
+            _: 1
+          }, 8, ["disabled"]),
+          o(V, {
+            variant: "outline",
+            size: "xs",
+            disabled: n.disabled || u.value.size === 0,
+            onClick: Z
+          }, {
+            default: b(() => [
+              o(v, {
+                name: "caret-left",
+                size: "0.875rem"
+              })
+            ]),
+            _: 1
+          }, 8, ["disabled"]),
+          o(V, {
+            variant: "outline",
+            size: "xs",
+            disabled: n.disabled || B.value.length === 0,
+            onClick: _
+          }, {
+            default: b(() => [
+              o(v, {
+                name: "caret-double-left",
+                size: "0.875rem"
+              })
+            ]),
+            _: 1
+          }, 8, ["disabled"]),
+          e[6] || (e[6] = s("div", { style: { height: "0.5rem" } }, null, -1)),
+          o(V, {
+            variant: "outline",
+            size: "xs",
+            disabled: n.disabled || u.value.size !== 1,
+            onClick: ee
+          }, {
+            default: b(() => [
+              o(v, {
+                name: "caret-up",
+                size: "0.875rem"
+              })
+            ]),
+            _: 1
+          }, 8, ["disabled"]),
+          o(V, {
+            variant: "outline",
+            size: "xs",
+            disabled: n.disabled || u.value.size !== 1,
+            onClick: te
+          }, {
+            default: b(() => [
+              o(v, {
+                name: "caret-down",
+                size: "0.875rem"
+              })
+            ]),
+            _: 1
+          }, 8, ["disabled"])
+        ]),
+        s("div", {
+          style: y(Y.value)
+        }, [
+          s("div", xe, [
+            s("span", {
+              style: y({ fontSize: I.value.titleFont, fontWeight: "600", color: "var(--cui-text-body)", textTransform: "uppercase", letterSpacing: "0.03em" })
+            }, p(n.targetTitle), 5),
+            s("span", he, p(L.value.length), 1)
+          ]),
+          n.filterable ? (c(), m("div", Se, [
+            o(J, {
+              modelValue: w.value,
+              "onUpdate:modelValue": e[3] || (e[3] = (t) => w.value = t),
+              placeholder: n.targetPlaceholder,
+              size: "sm"
+            }, {
+              prefix: b(() => [
+                o(v, {
+                  name: "magnifying-glass",
+                  size: "0.75rem"
+                })
+              ]),
+              _: 1
+            }, 8, ["modelValue", "placeholder"])
+          ])) : x("", !0),
+          s("div", {
+            style: y({
+              flex: "1",
+              overflowY: "auto",
+              padding: "0 calc(0.375rem * var(--cui-density-scale, 1)) calc(0.375rem * var(--cui-density-scale, 1))",
+              maxHeight: n.height,
+              outline: D.value === "target" && ((g = S.value) == null ? void 0 : g.from) === "source" ? "2px dashed var(--cui-primary)" : "none",
+              outlineOffset: "-2px",
+              borderRadius: "0 0 0.5rem 0.5rem"
+            }),
+            onDragover: e[4] || (e[4] = (t) => $(t, "target")),
+            onDragleave: E,
+            onDrop: e[5] || (e[5] = (t) => N(t, "target"))
+          }, [
+            (c(!0), m(j, null, U(L.value, (t) => (c(), m("div", {
+              key: String(t.value),
+              draggable: "true",
+              style: y({ ...W(u.value.has(t.value)), ...R(t.value, "target") }),
+              onClick: (i) => ae(t.value),
+              onDblclick: (i) => ie(t),
+              onDragstart: (i) => O(i, t.value, "target"),
+              onDragend: A,
+              onDragover: (i) => H(i, t.value, "target")
+            }, [
+              o(v, {
+                name: "dots-six-vertical",
+                size: "0.75rem",
+                style: { flexShrink: "0", color: "var(--cui-text-tertiary)", cursor: "grab", opacity: "0.4" }
+              }),
+              q(l.$slots, "item", {
+                item: t,
+                side: "target"
+              }, () => [
+                t.icon ? (c(), G(v, {
+                  key: 0,
+                  name: t.icon,
+                  size: "0.875rem",
+                  style: { flexShrink: "0", color: "var(--cui-text-secondary)" }
+                }, null, 8, ["name"])) : x("", !0),
+                s("div", ke, [
+                  s("div", De, p(t.label), 1),
+                  t.description ? (c(), m("div", Ve, p(t.description), 1)) : x("", !0)
+                ])
+              ])
+            ], 44, ze))), 128)),
+            L.value.length === 0 ? (c(), m("div", Ce, " No items ")) : x("", !0)
+          ], 36)
+        ], 4)
+      ], 4)), [
+        [de, !n.hidden]
+      ]);
+    };
+  }
+});
+export {
+  Be as default
+};

package/dist/components/CuiTransferList.vue2.js

@@ -0,0 +1,4 @@
+import f from "./CuiTransferList.vue.js";
+export {
+  f as default
+};

package/dist/components/CuiTreeNode.vue.js

@@ -0,0 +1,180 @@
+import { defineComponent as I, computed as y, ref as b, watch as E, nextTick as H, resolveComponent as R, openBlock as n, createElementBlock as o, normalizeStyle as l, createCommentVNode as c, createElementVNode as k, createBlock as $, renderSlot as S, createTextVNode as Y, toDisplayString as V, Fragment as F, renderList as P, withCtx as W, mergeProps as X } from "vue";
+import C from "./CuiIcon.vue.js";
+const j = ["aria-expanded"], q = { style: { flex: "1", minWidth: "0", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, w = "var(--cui-border-strong, var(--cui-border))", O = /* @__PURE__ */ I({
+  __name: "CuiTreeNode",
+  props: {
+    node: {},
+    depth: {},
+    isLast: { type: Boolean },
+    expanded: {},
+    selectedSet: {},
+    selectable: { type: Boolean },
+    showLines: { type: Boolean },
+    animated: { type: Boolean },
+    cfg: {}
+  },
+  emits: ["toggle-expand", "select-node"],
+  setup(e, { emit: z }) {
+    const t = e, r = z, s = y(() => t.node.children && t.node.children.length > 0), u = y(() => t.expanded.has(t.node.id)), v = y(() => t.selectedSet.has(t.node.id)), f = b(null), i = b(void 0), h = b(u.value);
+    E(u, (d) => {
+      if (!t.animated) {
+        h.value = d;
+        return;
+      }
+      d ? (h.value = !0, i.value = "0px", H(() => {
+        f.value && (i.value = f.value.scrollHeight + "px", setTimeout(() => {
+          i.value = void 0;
+        }, 250));
+      })) : f.value && (i.value = f.value.scrollHeight + "px", requestAnimationFrame(() => {
+        i.value = "0px", setTimeout(() => {
+          h.value = !1, i.value = void 0;
+        }, 250);
+      }));
+    });
+    function L(d) {
+      d.stopPropagation(), r("toggle-expand", t.node);
+    }
+    function T() {
+      s.value && !t.selectable ? r("toggle-expand", t.node) : r("select-node", t.node);
+    }
+    const m = y(() => t.cfg.padX);
+    return (d, a) => {
+      const B = R("CuiTreeNode", !0);
+      return n(), o("div", {
+        role: "treeitem",
+        "aria-expanded": s.value ? u.value : void 0,
+        style: { position: "relative" }
+      }, [
+        e.showLines && e.depth > 0 && !e.isLast ? (n(), o("div", {
+          key: 0,
+          style: l({
+            position: "absolute",
+            left: `calc((${e.depth} - 1) * ${e.cfg.indent} + ${m.value} + 0.5rem)`,
+            top: "0",
+            bottom: "0",
+            width: "0",
+            borderLeft: `1px solid ${w}`,
+            zIndex: "0"
+          })
+        }, null, 4)) : c("", !0),
+        e.showLines && e.depth > 0 && e.isLast ? (n(), o("div", {
+          key: 1,
+          style: l({
+            position: "absolute",
+            left: `calc((${e.depth} - 1) * ${e.cfg.indent} + ${m.value} + 0.5rem)`,
+            top: "0",
+            height: `calc(${e.cfg.padY} + 0.625em)`,
+            width: "0",
+            borderLeft: `1px solid ${w}`,
+            zIndex: "0"
+          })
+        }, null, 4)) : c("", !0),
+        e.showLines && e.depth > 0 ? (n(), o("div", {
+          key: 2,
+          style: l({
+            position: "absolute",
+            left: `calc((${e.depth} - 1) * ${e.cfg.indent} + ${m.value} + 0.5rem)`,
+            top: `calc(${e.cfg.padY} + 0.625em)`,
+            width: `calc(${e.cfg.indent} * 0.5)`,
+            height: "0",
+            borderTop: `1px solid ${w}`,
+            zIndex: "0"
+          })
+        }, null, 4)) : c("", !0),
+        k("div", {
+          style: l({
+            display: "flex",
+            alignItems: "center",
+            gap: "calc(0.25rem * var(--cui-density-scale, 1))",
+            paddingTop: e.cfg.padY,
+            paddingRight: e.cfg.padX,
+            paddingBottom: e.cfg.padY,
+            paddingLeft: `calc(${m.value} + ${e.depth} * ${e.cfg.indent})`,
+            fontSize: e.cfg.fontSize,
+            cursor: e.node.disabled ? "default" : "pointer",
+            borderRadius: "0.25rem",
+            background: v.value ? "var(--cui-primary-bg)" : "transparent",
+            color: e.node.disabled ? "var(--cui-text-tertiary)" : v.value ? "var(--cui-primary)" : "var(--cui-text-body)",
+            fontWeight: v.value ? "600" : "400",
+            opacity: e.node.disabled ? "0.5" : "1",
+            transition: "background 0.1s ease",
+            position: "relative",
+            zIndex: "1"
+          }),
+          onClick: T
+        }, [
+          k("div", {
+            style: l({
+              width: e.cfg.iconSize,
+              height: e.cfg.iconSize,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexShrink: "0",
+              transition: "transform 0.15s ease",
+              transform: u.value ? "rotate(90deg)" : "rotate(0deg)"
+            }),
+            onClick: a[0] || (a[0] = (x) => s.value && L(x))
+          }, [
+            s.value ? (n(), $(C, {
+              key: 0,
+              name: "caret-right",
+              size: e.cfg.iconSize,
+              style: { color: "var(--cui-text-tertiary)" }
+            }, null, 8, ["size"])) : c("", !0)
+          ], 4),
+          e.node.icon ? (n(), $(C, {
+            key: 0,
+            name: e.node.icon,
+            size: e.cfg.iconSize,
+            style: l({ flexShrink: "0", color: v.value ? "var(--cui-primary)" : "var(--cui-text-secondary)" })
+          }, null, 8, ["name", "size", "style"])) : c("", !0),
+          k("div", q, [
+            S(d.$slots, "node", {
+              node: e.node,
+              selected: v.value,
+              expanded: u.value,
+              depth: e.depth
+            }, () => [
+              Y(V(e.node.label), 1)
+            ])
+          ])
+        ], 4),
+        s.value && h.value ? (n(), o("div", {
+          key: 3,
+          ref_key: "childrenRef",
+          ref: f,
+          style: l({
+            position: "relative",
+            overflow: e.animated ? "hidden" : void 0,
+            maxHeight: i.value,
+            transition: e.animated ? "max-height 0.25s ease" : void 0
+          })
+        }, [
+          (n(!0), o(F, null, P(e.node.children, (x, N) => (n(), $(B, {
+            key: String(x.id),
+            node: x,
+            depth: e.depth + 1,
+            "is-last": N === e.node.children.length - 1,
+            expanded: e.expanded,
+            "selected-set": e.selectedSet,
+            selectable: e.selectable,
+            "show-lines": e.showLines,
+            animated: e.animated,
+            cfg: e.cfg,
+            onToggleExpand: a[1] || (a[1] = (g) => r("toggle-expand", g)),
+            onSelectNode: a[2] || (a[2] = (g) => r("select-node", g))
+          }, {
+            node: W((g) => [
+              S(d.$slots, "node", X({ ref_for: !0 }, g))
+            ]),
+            _: 3
+          }, 8, ["node", "depth", "is-last", "expanded", "selected-set", "selectable", "show-lines", "animated", "cfg"]))), 128))
+        ], 4)) : c("", !0)
+      ], 8, j);
+    };
+  }
+});
+export {
+  O as default
+};

package/dist/components/CuiTreeNode.vue2.js

@@ -0,0 +1,4 @@
+import f from "./CuiTreeNode.vue.js";
+export {
+  f as default
+};