@pantograph/vue 0.23.0 → 0.23.2

package/dist/Tree.vue_vue_type_style_index_0_lang-DWj8WAj6.js

@@ -1,528 +0,0 @@
-import { defineComponent as we, useSlots as ze, computed as u, ref as B, useTemplateRef as Ve, resolveComponent as $e, createElementBlock as E, openBlock as f, mergeProps as oe, unref as n, createCommentVNode as X, createVNode as xe, withDirectives as Te, normalizeClass as R, withKeys as Ke, withCtx as H, createBlock as D, renderSlot as Z, normalizeProps as fe, guardReactiveProps as ye, withModifiers as Se, Fragment as he, createElementVNode as Le, toDisplayString as Pe, renderList as ae, createSlots as Fe, vShow as Re, watch as Y, normalizeStyle as Ae, onMounted as Ue, onBeforeUnmount as je } from "vue";
-import { generateVariantClassList as _, getBemElement as x, getBemModifier as ke, getBemBlock as Ge, usePCId as Me } from "@pantograph/utils";
-import { cva as Ie } from "class-variance-authority";
-import { f as Oe, r as I, u as qe, v as Ce, w as He } from "./Icon.vue_vue_type_style_index_0_lang-DwTaEYnw.js";
-import { u as Ne } from "./uniq-D7FwKSyV.js";
-import "sortablejs";
-import { g as Ee } from "./options-D4et5euX.js";
-import { createContext as Je, RovingFocusItem as Qe, RovingFocusGroup as We } from "reka-ui";
-import { _ as Xe } from "./IndentLevel.vue_vue_type_style_index_0_lang-DbECAb3_.js";
-import { _ as Ye } from "./Checkbox.vue_vue_type_style_index_0_lang-D8rc8anP.js";
-import { U as Ze, u as De } from "./useInputDataStates-DdGDk2Hm.js";
-import { useElementSize as et } from "@vueuse/core";
-const tt = ["sm", "md", "lg"], Be = { none: "gap-none", sm: "gap-sm", md: "gap-md", lg: "gap-lg" }, [st, nt] = Je("CheckboxGroup"), lt = ["data-parents", "data-key", "data-draggable"], ot = ["data-parents", "data-level"], at = /* @__PURE__ */ we({
-  ...Ee("TreeNode"),
-  __name: "TreeNode",
-  props: {
-    item: {},
-    level: { default: 1 },
-    parentKeys: {}
-  },
-  setup(re) {
-    const g = re, t = ze(), e = st(), ie = Ie(e.prefixes.node, {
-      variants: {
-        disabled: _("disabled", e.prefixes.node),
-        active: _("active", e.prefixes.node),
-        hasChildren: _("has-children", e.prefixes.node)
-      }
-    }), h = u(() => {
-      switch (e.size.value) {
-        case "sm":
-          return "2xsm";
-        case "md":
-        case "lg":
-          return "xsm";
-      }
-    }), J = u(() => {
-      switch (e.size.value) {
-        case "sm":
-          return "2xsm";
-        default:
-          return "xsm";
-      }
-    }), w = (r) => e.getNodeField(r, "children"), V = (r) => e.getNodeField(r, "key"), $ = u(() => w(g.item)), de = u(() => e.getNodeField(g.item, "leaf")), j = u(() => {
-      var r;
-      return (r = e.props) != null && r.draggable ? e.getNodeField(g.item, "draggable") ?? !0 : !1;
-    }), K = u(() => V(g.item)), k = u(
-      () => !!(e.disabled.value || e.getNodeField(g.item, "disabled"))
-    ), G = u(
-      () => {
-        var r;
-        return !!((r = $.value) != null && r.some((s) => e.expandedKeys.value.includes(V(s))));
-      }
-    ), m = u(
-      () => !(g.item.dragging ?? !1) && e.expandedKeys.value.includes(K.value)
-    ), Q = u(() => {
-      var r, s;
-      return !!(!e.dragging.value && ((r = e.props) != null && r.showLine) && m.value && ((s = $.value) != null && s.length));
-    }), M = () => {
-      k.value || e.onSelect(g.item);
-    }, S = u(() => !!e.model.value.includes(K.value)), T = u(() => {
-      const r = (a = g.item) => {
-        const o = w(a);
-        return (o == null ? void 0 : o.length) && o.every((c) => e.checked.value.includes(V(c)));
-      }, s = (a = g.item) => {
-        const o = w(a);
-        return o != null && o.length ? !!(o != null && o.some(
-          (c) => e.checked.value.includes(V(c)) || s(c)
-        )) : !1;
-      }, l = e.checked.value.includes(K.value);
-      return r() ? (l || e.onCheck(g.item), !0) : s() ? (l && e.onCheck(g.item), "indeterminate") : !!l;
-    }), L = () => {
-      var l;
-      if (!((l = $.value) != null && l.length)) return e.onCheck(g.item);
-      const r = (d = g.item) => {
-        const a = w(d);
-        return a != null && a.length ? a.reduce((o, c) => {
-          const z = w(c), P = V(c);
-          return z != null && z.length ? [...o, P, ...r(c)] : [...o, P];
-        }, []) : [];
-      }, s = r();
-      return e.onCheck(g.item, {
-        keys: [K.value, ...s],
-        value: !e.checked.value.includes(K.value)
-      });
-    }, A = u(() => [...g.parentKeys ?? [], K.value]), C = (r) => {
-      e.onExpandKey(g.item, r);
-    }, ee = u(() => g.item.dragging_level ?? g.level), O = u(() => ee.value + 1), b = B(), ce = B();
-    e.useSortable({
-      root: b,
-      instance: ce,
-      node: g.item
-    });
-    const ue = u(() => {
-      switch (e.size.value) {
-        case "sm":
-          return "2xsm";
-        case "md":
-          return "xsm";
-        case "lg":
-          return "sm";
-      }
-    }), { rootBindings: ge, inputBindings: W } = Ze({
-      getDisabled: () => k.value
-    }), q = u(
-      () => {
-        var r, s;
-        return !!((r = $.value) != null && r.length || (s = e.props) != null && s.lazyLoad && !de.value);
-      }
-    ), U = Ve("indent"), { width: te, height: pe } = et(U), se = () => {
-      e.dir.value === "ltr" ? C(!1) : C(!0);
-    }, ve = () => {
-      e.dir.value === "rtl" ? C(!1) : C(!0);
-    };
-    return (r, s) => {
-      var d, a, o, c, z, P, y, N;
-      const l = $e("TreeNode", !0);
-      return f(), E("div", oe({
-        "data-parents": (d = n(e).props) != null && d.draggable ? r.parentKeys : void 0,
-        "data-key": (a = n(e).props) != null && a.draggable ? K.value : void 0,
-        "data-draggable": (o = n(e).props) != null && o.draggable ? !k.value && j.value : void 0,
-        class: [
-          (c = $.value) != null && c.length ? n(e).prefixes.group : "",
-          n(x)(n(e).prefixes.node, "root"),
-          n(e).getNodeField(r.item, "class"),
-          {
-            [n(ke)(n(e).prefixes.group, "child-expanded")]: G.value,
-            [n(ke)(n(e).prefixes.group, "draggable")]: (z = n(e).props) == null ? void 0 : z.draggable
-          }
-        ]
-      }, n(ge), {
-        style: {
-          "--ptc-tree-node-indent-height": `${n(pe)}px`,
-          "--ptc-tree-node-indent-width": `${n(te)}px`
-        }
-      }), [
-        Q.value ? (f(), E("div", {
-          key: 0,
-          class: R(n(x)(n(e).prefixes.group, "line"))
-        }, null, 2)) : X("", !0),
-        xe(n(Qe), oe({
-          as: "div",
-          tabStopId: K.value,
-          onKeyup: [
-            Ke(se, ["left"]),
-            Ke(ve, ["right"])
-          ],
-          focusable: !k.value,
-          class: [
-            n(ie)({
-              disabled: k.value,
-              active: S.value,
-              hasChildren: q.value
-            })
-          ]
-        }, n(W), { onClick: M }), {
-          default: H(() => {
-            var i, p, v, F;
-            return [
-              (i = n(e).props) != null && i.draggable ? (f(), E("span", {
-                key: 0,
-                class: R(n(e).prefixes.draggable)
-              }, [
-                !r.item.dragging && !n(e).dragging.value ? (f(), D(Oe, {
-                  key: 0,
-                  icon: "tabler:grip-vertical",
-                  size: J.value,
-                  class: R(n(e).prefixes.draggableIcon)
-                }, {
-                  default: H(() => [
-                    Z(r.$slots, "dragTrigger", fe(ye({ ...r.item, selected: S.value, checked: T.value, disabled: k.value, unFocusable: !0 })))
-                  ]),
-                  _: 3
-                }, 8, ["size", "class"])) : X("", !0)
-              ], 2)) : X("", !0),
-              xe(Xe, {
-                ref_key: "indent",
-                ref: U,
-                level: ee.value,
-                children: q.value,
-                size: ue.value,
-                expanded: m.value,
-                showLine: !1,
-                class: R(n(x)(n(e).prefixes.node, "indent")),
-                loading: n(e).getNodeField(r.item, "loading"),
-                "branch-icon": n(e).getNodeField(r.item, "switcherIcon") ?? ((p = n(e).props) == null ? void 0 : p.switcherIcon),
-                "no-rotate-branch": n(e).getNodeField(r.item, "noRotateSwitcherIcon") ?? ((v = n(e).props) == null ? void 0 : v.noRotateSwitcherIcon),
-                onToggleExpand: s[0] || (s[0] = Se((ne) => C(), ["stop"]))
-              }, {
-                default: H(() => [
-                  Z(r.$slots, "switcherIcon", fe(ye({ ...r.item, selected: S.value, checked: T.value, expanded: m.value, disabled: k.value, unFocusable: !0 })))
-                ]),
-                _: 3
-              }, 8, ["level", "children", "size", "expanded", "class", "loading", "branch-icon", "no-rotate-branch"]),
-              !r.item.dragging || !n(e).dragging.value ? (f(), E(he, { key: 1 }, [
-                (F = n(e).props) != null && F.checkbox ? (f(), D(Ye, {
-                  key: 0,
-                  size: h.value,
-                  onClick: s[1] || (s[1] = Se(() => {
-                  }, ["stop"])),
-                  modelValue: T.value,
-                  "onUpdate:modelValue": L,
-                  disabled: k.value
-                }, null, 8, ["size", "modelValue", "disabled"])) : X("", !0),
-                Z(r.$slots, "title", fe(ye({ ...r.item, selected: S.value, checked: T.value, disabled: k.value, unFocusable: !0 })), () => [
-                  Le("div", {
-                    class: R(n(x)(n(e).prefixes.node, "title"))
-                  }, Pe(n(e).getNodeField(r.item, "title")), 3)
-                ])
-              ], 64)) : (f(), E("div", {
-                key: 2,
-                class: R(n(x)(n(e).prefixes.node, "slot"))
-              }, null, 2))
-            ];
-          }),
-          _: 3
-        }, 16, ["tabStopId", "focusable", "class"]),
-        (P = $.value) != null && P.length ? Te((f(), E("div", {
-          key: 1,
-          class: R(n(e).prefixes.groupList),
-          ref_key: "root",
-          ref: b,
-          "data-parents": (y = n(e).props) != null && y.draggable ? A.value : void 0,
-          "data-level": (N = n(e).props) != null && N.draggable ? O.value : void 0
-        }, [
-          (f(!0), E(he, null, ae(w(r.item), (i) => (f(), D(l, {
-            key: n(e).getNodeField(i, "key"),
-            parentKeys: A.value,
-            item: i,
-            level: O.value
-          }, Fe({ _: 2 }, [
-            ae(Object.keys(t), (p) => ({
-              name: p,
-              fn: H((v) => [
-                Z(r.$slots, p, oe({ ref_for: !0 }, v))
-              ])
-            }))
-          ]), 1032, ["parentKeys", "item", "level"]))), 128))
-        ], 10, ot)), [
-          [Re, m.value]
-        ]) : X("", !0)
-      ], 16, lt);
-    };
-  }
-}), kt = /* @__PURE__ */ we({
-  ...Ee("Tree"),
-  __name: "Tree",
-  props: {
-    class: {},
-    size: { default: "md" },
-    gap: {},
-    dir: {},
-    data: {},
-    modelValue: {},
-    value: {},
-    checkedKeys: {},
-    expandedKeys: {},
-    multiple: { type: Boolean },
-    checkbox: { type: Boolean },
-    defaultExpandAll: { type: Boolean },
-    selectable: { type: Boolean },
-    showLine: { type: Boolean },
-    inlineNode: { type: Boolean },
-    lazyLoad: { type: Boolean },
-    fieldNames: {},
-    groupName: {},
-    getSortableProps: {},
-    switcherIcon: {},
-    noRotateSwitcherIcon: { type: Boolean },
-    draggable: { type: Boolean },
-    disabled: { type: Boolean }
-  },
-  emits: ["update:modelValue", "update:value", "update:expandedKeys", "update:checkedKeys", "expand", "select", "check", "dragStart", "dragEnd", "move", "choose", "unchoose"],
-  setup(re, { emit: g }) {
-    const t = re, e = g, ie = ze(), h = Ge("tree"), J = x(h, "node"), w = x(J, "group"), V = x(J, "draggable"), $ = x(V, "icon"), de = x(w, "list"), j = {
-      node: J,
-      group: w,
-      draggable: V,
-      draggableIcon: $,
-      groupList: de
-    }, K = Ie(h, {
-      variants: {
-        size: _(tt, h),
-        gap: _(Be, h),
-        selectable: _("selectable", h),
-        disabled: _("disabled", h),
-        inlineNode: _("inline-node", h),
-        dragging: _("dragging", h)
-      }
-    }), k = u(() => I(t.data)), G = B(k.value), m = (s, l) => {
-      var a;
-      const d = Ce(s, l);
-      return (a = t.fieldNames) != null && a[l] ? Ce(s, t.fieldNames[l], d) : d;
-    }, Q = () => {
-      if (!t.lazyLoad) {
-        const s = [], l = (d) => {
-          for (const a of d) {
-            const o = m(a, "children");
-            o != null && o.length && (s.push(m(a, "key")), l(o));
-          }
-        };
-        return l(G.value), s;
-      }
-      return [];
-    }, M = B(
-      t.expandedKeys ?? (t.defaultExpandAll ? Q() : [])
-    );
-    Y(
-      () => [t.defaultExpandAll, t.expandedKeys],
-      ([s, l], [d, a]) => {
-        l !== a ? M.value = t.expandedKeys ?? [] : s && !d && (M.value = Q());
-      }
-    );
-    const S = u({
-      get() {
-        return t.expandedKeys ? t.expandedKeys : M.value;
-      },
-      set(s) {
-        t.expandedKeys || (M.value = s), e("update:expandedKeys", s);
-      }
-    });
-    Y(
-      k,
-      (s) => {
-        G.value = s;
-        const l = Q();
-        S.value = S.value.filter((d) => l.includes(d)), q.value++;
-      },
-      { deep: !0 }
-    );
-    const T = B(t.modelValue ?? t.value ?? []);
-    Y(
-      () => [t.modelValue, t.value],
-      () => {
-        T.value = t.modelValue ?? t.value ?? [];
-      }
-    );
-    const L = u({
-      get() {
-        return t.modelValue ?? t.value ? t.modelValue ?? t.value : T.value;
-      },
-      set(s) {
-        s && ((t.modelValue ?? t.value) || (T.value = s), e("update:modelValue", s), e("update:value", s));
-      }
-    }), { getDisabled: A, getSize: C } = De(), ee = (s) => {
-      var l, d;
-      if (t.selectable && !A.value) {
-        let a = I(L.value ?? []);
-        const o = m(s, "key");
-        t.multiple ? (l = L.value) != null && l.includes(o) ? a = I((d = L.value) == null ? void 0 : d.filter((c) => c !== o)) : a = I([...L.value ?? [], o]) : a.includes(o) ? a = [] : a = [o], L.value = a, e("select", s, a.includes(o));
-      }
-    }, O = B(t.checkedKeys ?? []);
-    Y(
-      () => t.checkedKeys,
-      () => {
-        O.value = t.checkedKeys ?? [];
-      }
-    );
-    const b = u({
-      get() {
-        return t.checkedKeys ? t.checkedKeys : O.value;
-      },
-      set(s) {
-        t.checkedKeys || (O.value = s), e("update:checkedKeys", s);
-      }
-    }), ce = (s, l) => {
-      if (t.checkbox && !A.value) {
-        let d = I(b.value);
-        const a = m(s, "key");
-        l != null && l.keys.length ? l.value ? d = Ne([...l.keys, ...d]) : d = I(b.value.filter((c) => !l.keys.includes(c))) : b.value.includes(a) ? d = I(b.value.filter((c) => c !== a)) : d = I([...b.value, a]), b.value = d;
-        const o = (l == null ? void 0 : l.value) ?? b.value.includes(a);
-        e("check", s, o, (l == null ? void 0 : l.keys) ?? a);
-      }
-    }, ue = (s, l) => {
-      let d = !0;
-      const a = m(s, "key");
-      let o = I(S.value);
-      l || l !== !1 && !o.includes(a) ? (o = Ne([...o, a]), d = !0) : (o = o.filter((c) => c !== a), d = !1), S.value = o, e("expand", s, d);
-    }, ge = u(() => {
-      if (t.gap) {
-        if (typeof t.gap == "number") return `${t.gap}px`;
-        if (!Object.keys(Be).includes(t.gap)) return t.gap;
-      }
-    }), W = t.groupName ?? Me(h), q = B(1), U = B(!1), te = B(), pe = B(), se = (s) => {
-      const { root: l, instance: d, node: a } = s, o = (y) => {
-        var N;
-        return (N = y.getAttribute("data-parents")) == null ? void 0 : N.split(",");
-      }, c = (y) => {
-        const N = (v, F = G.value) => {
-          const { parents: ne, self: _e } = v;
-          for (let me of F) {
-            const be = m(me, "key").toString();
-            if (be === _e) return me;
-            const le = m(me, "children");
-            if (ne != null && ne.includes(be) && (le != null && le.length)) return N(v, le);
-          }
-        }, i = o(y), p = y.getAttribute("data-key") ?? "";
-        return N({ parents: i, self: p });
-      }, z = ke(x(h, "dragging_item"), C.value), P = () => {
-        var y;
-        (y = d.value) == null || y.destroy(), d.value = void 0;
-      };
-      Ue(() => {
-        Y(
-          () => [l.value, t.draggable, q.value],
-          async () => {
-            var y;
-            if (d.value) P();
-            else if (l.value && t.draggable) {
-              const { default: N } = await import("sortablejs");
-              d.value = new N(l.value, {
-                ...((y = t.getSortableProps) == null ? void 0 : y.call(t, a)) || {},
-                group: He(W) ? W(a) : W,
-                animation: 150,
-                forceFallback: !0,
-                fallbackOnBody: !0,
-                filter: "[data-draggable=false]",
-                handle: `.${j.node} .${j.draggable} .${j.draggableIcon}`,
-                // swapThreshold: 0.65,
-                dataIdAttr: "data-key",
-                dragClass: z,
-                onChoose(i) {
-                  const p = c(i == null ? void 0 : i.item);
-                  p && (p.dragging = !0), e("choose", i);
-                },
-                onStart(i) {
-                  var p;
-                  if (typeof document < "u") {
-                    const v = document.querySelector(`.${z}`), F = (p = getComputedStyle(l.value)) == null ? void 0 : p.direction;
-                    v != null && v.style && (v.style.direction = F);
-                  }
-                  U.value = !0, e("dragStart", i);
-                },
-                onUnchoose(i) {
-                  const p = c(i == null ? void 0 : i.item);
-                  p && (p.dragging = !1), e("unchoose", i);
-                },
-                onEnd(i) {
-                  U.value = !1, e("dragEnd", {
-                    ...i,
-                    node: c(i == null ? void 0 : i.item),
-                    oldParents: o(i == null ? void 0 : i.item),
-                    newParents: o(i == null ? void 0 : i.to)
-                  });
-                },
-                onMove(i) {
-                  var F;
-                  const p = Number(((F = i == null ? void 0 : i.to) == null ? void 0 : F.getAttribute("data-level")) ?? "1"), v = c(i == null ? void 0 : i.dragged);
-                  v && (v.dragging_level = p), e("move", i);
-                }
-              });
-            }
-          },
-          { immediate: !0 }
-        );
-      }), je(() => {
-        d.value && P();
-      });
-    };
-    se({
-      root: te,
-      instance: pe
-    });
-    const { getDir: ve } = qe(), r = ve();
-    return nt({
-      size: C,
-      disabled: A,
-      props: t,
-      expandedKeys: S,
-      model: L,
-      dir: r,
-      checked: b,
-      onExpandKey: ue,
-      onSelect: ee,
-      onCheck: ce,
-      getNodeField: m,
-      useSortable: se,
-      dragging: U,
-      prefixes: j
-    }), (s, l) => (f(), D(n(We), {
-      "as-child": "",
-      orientation: "vertical",
-      dir: n(r)
-    }, {
-      default: H(() => [
-        (f(), E("div", {
-          role: "tree",
-          key: q.value,
-          class: R([
-            n(K)({
-              size: n(C),
-              gap: t.gap ?? n(C),
-              selectable: t.selectable,
-              disabled: n(A),
-              inlineNode: t.inlineNode,
-              dragging: U.value
-            }),
-            t.class
-          ]),
-          style: Ae({
-            "--ptc-tree-gap": ge.value
-          }),
-          ref_key: "root",
-          ref: te
-        }, [
-          (f(!0), E(he, null, ae(G.value, (d) => (f(), D(at, {
-            key: m(d, "key"),
-            item: d
-          }, Fe({ _: 2 }, [
-            ae(Object.keys(ie), (a) => ({
-              name: a,
-              fn: H((o) => [
-                Z(s.$slots, a, oe({ ref_for: !0 }, o))
-              ])
-            }))
-          ]), 1032, ["item"]))), 128))
-        ], 6))
-      ]),
-      _: 3
-    }, 8, ["dir"]));
-  }
-});
-export {
-  tt as T,
-  kt as _,
-  Be as a,
-  st as i,
-  nt as p
-};