@synopackageland/ui 0.25.21 → 0.25.22

package/dist/modules/components/composite/tag-picker/TagPickerList.vue.js

@@ -0,0 +1,203 @@
+import { defineComponent as j, provide as H, ref as y, shallowRef as M, computed as c, watch as F, onMounted as O, useId as W, openBlock as s, createElementBlock as u, createVNode as G, unref as o, renderSlot as J, createTextVNode as Q, toDisplayString as p, createCommentVNode as _, createElementVNode as V, normalizeStyle as C, Fragment as X, renderList as Z, withModifiers as ee, normalizeClass as S, createBlock as B, nextTick as ae } from "vue";
+import { Plus as te, Check as le } from "@lucide/vue";
+import oe from "../search-field/SearchField.vue.js";
+import { FORM_FIELD_KEY as ie } from "../form/context.js";
+import { useLocalizedDefaults as re, useUiText as se } from "../../../i18n/text.js";
+import { tagPickerRows as ne, visibleWindow as ue } from "./tagPicker.js";
+const ce = {
+  key: 0,
+  class: "flex min-h-5 items-center justify-between gap-2 px-1 text-[length:var(--ui-font-size-sm)] text-[var(--ui-text-secondary)] tabular-nums",
+  "data-ui-tag-picker-status": ""
+}, de = {
+  key: 0,
+  "data-ui-tag-picker-full": "",
+  "aria-live": "polite"
+}, ve = {
+  key: 1,
+  "data-ui-tag-picker-count": ""
+}, pe = { key: 2 }, me = ["id", "aria-multiselectable", "aria-label"], fe = ["id", "aria-selected", "aria-disabled", "aria-setsize", "aria-posinset", "data-ui-tag-option", "data-ui-tag-create", "onPointerenter", "onClick"], ge = { class: "min-w-0 truncate" }, he = {
+  key: 0,
+  class: "m-0 px-2 py-2 text-[length:var(--ui-font-size-sm)] text-[var(--ui-text-secondary)]",
+  "data-ui-tag-picker-empty": ""
+}, Ve = /* @__PURE__ */ j({
+  __name: "TagPickerList",
+  props: {
+    modelValue: {},
+    options: {},
+    loading: { type: Boolean, default: !1 },
+    allowCreate: { type: Boolean, default: !1 },
+    createFilter: { type: Function, default: void 0 },
+    max: { default: void 0 },
+    single: { type: Boolean, default: !1 },
+    label: {},
+    searchPlaceholder: {},
+    emptyText: {},
+    loadingText: {},
+    clearText: {},
+    visibleRows: { default: 8 }
+  },
+  emits: ["pick", "clear", "remove-last"],
+  setup(R, { expose: E, emit: I }) {
+    const a = re(R, {
+      label: "Choose tags",
+      searchPlaceholder: "Search tags",
+      emptyText: "No matching tags",
+      loadingText: "Loading tags",
+      clearText: "Clear"
+    }), b = I, $ = se();
+    H(ie, null);
+    const d = y(""), i = y(0), f = y(0), m = M(), P = M(), n = y(32), g = c(() => a.visibleRows * n.value), h = c(() => !a.single && a.max !== void 0), x = c(
+      () => ne(a.options, a.modelValue, d.value, {
+        allowCreate: a.allowCreate,
+        createFilter: a.createFilter,
+        max: h.value ? a.max : void 0
+      })
+    ), r = c(() => [
+      ...x.value.create === null ? [] : [{ kind: "create", value: x.value.create, label: $('Create "{name}"', { name: x.value.create }), selected: !1, disabled: !1 }],
+      ...x.value.rows.map((t) => ({ kind: "tag", ...t }))
+    ]), w = c(() => ue(f.value, n.value, g.value, r.value.length)), L = c(() => r.value.slice(w.value.start, w.value.end).map((t, e) => ({ item: t, index: w.value.start + e }))), N = c(() => h.value && a.modelValue.length >= a.max);
+    F(d, () => {
+      i.value = 0, f.value = 0, m.value && (m.value.scrollTop = 0);
+    }), F(() => r.value.length, (t) => {
+      i.value >= t && (i.value = Math.max(0, t - 1));
+    }), O(() => {
+      const t = m.value;
+      if (!t || typeof getComputedStyle != "function") return;
+      const e = parseFloat(getComputedStyle(t).getPropertyValue("--ui-menu-row-height"));
+      e > 0 && (n.value = e);
+    });
+    function z(t) {
+      const e = r.value[t];
+      !e || e.disabled || (b("pick", e.value, e.kind), e.kind === "create" && (d.value = ""));
+    }
+    function U(t) {
+      const e = m.value;
+      if (!e) return;
+      const l = t * n.value;
+      l < e.scrollTop ? e.scrollTop = l : l + n.value > e.scrollTop + g.value && (e.scrollTop = l + n.value - g.value), f.value = e.scrollTop;
+    }
+    function k(t) {
+      const e = r.value.length;
+      e && (i.value = Math.max(0, Math.min(e - 1, t)), ae(() => U(i.value)));
+    }
+    function A(t) {
+      if (t.isComposing) return;
+      const e = r.value.length, l = Math.max(1, a.visibleRows - 1);
+      switch (t.key) {
+        case "ArrowDown":
+          t.preventDefault(), e && k((i.value + 1) % e);
+          break;
+        case "ArrowUp":
+          t.preventDefault(), e && k((i.value + e - 1) % e);
+          break;
+        case "PageDown":
+          t.preventDefault(), k(i.value + l);
+          break;
+        case "PageUp":
+          t.preventDefault(), k(i.value - l);
+          break;
+        case "Enter":
+          t.preventDefault(), z(i.value);
+          break;
+        case "Backspace":
+          !d.value && a.modelValue.length && !a.single && b("remove-last");
+          break;
+      }
+    }
+    const T = W(), D = (t) => `${T}-option-${t}`, q = c(() => r.value.length ? D(i.value) : void 0);
+    function K() {
+      P.value?.$el?.querySelector?.("input")?.focus();
+    }
+    return E({ focus: K }), (t, e) => (s(), u("div", {
+      class: "flex min-w-0 flex-col gap-2",
+      "data-ui-tag-picker-list": "",
+      "data-syno-pkg-land-ui": "",
+      onKeydown: A
+    }, [
+      G(oe, {
+        ref_key: "search",
+        ref: P,
+        modelValue: d.value,
+        "onUpdate:modelValue": e[0] || (e[0] = (l) => d.value = l),
+        placeholder: o(a).searchPlaceholder,
+        role: "combobox",
+        "aria-autocomplete": "list",
+        "aria-expanded": "true",
+        "aria-controls": o(T),
+        "aria-activedescendant": q.value,
+        "data-ui-tag-picker-search": ""
+      }, null, 8, ["modelValue", "placeholder", "aria-controls", "aria-activedescendant"]),
+      !o(a).single && (o(a).modelValue.length || h.value) ? (s(), u("div", ce, [
+        N.value ? (s(), u("span", de, [
+          J(t.$slots, "limit", {
+            max: o(a).max,
+            count: o(a).modelValue.length
+          }, () => [
+            Q(p(o($)("At most {max} tags", { max: o(a).max })), 1)
+          ])
+        ])) : h.value ? (s(), u("span", ve, p(o(a).modelValue.length) + " / " + p(o(a).max), 1)) : (s(), u("span", pe)),
+        o(a).modelValue.length ? (s(), u("button", {
+          key: 3,
+          type: "button",
+          class: "rounded-[var(--ui-radius-inner)] border-0 bg-transparent p-0 text-[length:inherit] text-[var(--ui-primary)] outline-none hover:underline focus-visible:shadow-[var(--ui-shadow-focus)]",
+          "data-ui-tag-picker-clear": "",
+          onClick: e[1] || (e[1] = (l) => b("clear"))
+        }, p(o(a).clearText), 1)) : _("", !0)
+      ])) : _("", !0),
+      V("div", {
+        id: o(T),
+        ref_key: "list",
+        ref: m,
+        role: "listbox",
+        "aria-multiselectable": o(a).single ? void 0 : "true",
+        "aria-label": o(a).label,
+        class: "relative overflow-y-auto overscroll-contain",
+        style: C({ height: `${Math.min(g.value, Math.max(1, r.value.length) * n.value)}px` }),
+        "data-ui-tag-picker-options": "",
+        onScroll: e[3] || (e[3] = (l) => f.value = l.target.scrollTop)
+      }, [
+        V("div", {
+          class: "relative",
+          style: C({ height: `${r.value.length * n.value}px` })
+        }, [
+          (s(!0), u(X, null, Z(L.value, ({ item: l, index: v }) => (s(), u("div", {
+            id: D(v),
+            key: `${l.kind}:${l.value}`,
+            role: "option",
+            "aria-selected": l.selected,
+            "aria-disabled": l.disabled || void 0,
+            "aria-setsize": r.value.length,
+            "aria-posinset": v + 1,
+            class: S([
+              "absolute inset-x-0 top-0 flex items-center gap-2 rounded-[var(--ui-radius-inner)] px-2 text-[length:var(--ui-font-size-control)]",
+              v === i.value && "bg-[var(--ui-surface-hover)]",
+              l.disabled ? "cursor-default text-[var(--ui-text-disabled)]" : "cursor-pointer text-[var(--ui-text)]"
+            ]),
+            style: C({ height: `${n.value}px`, transform: `translateY(${v * n.value}px)` }),
+            "data-ui-tag-option": l.kind === "tag" ? l.value : void 0,
+            "data-ui-tag-create": l.kind === "create" ? l.value : void 0,
+            onPointerenter: (Y) => i.value = v,
+            onMousedown: e[2] || (e[2] = ee(() => {
+            }, ["prevent"])),
+            onClick: (Y) => z(v)
+          }, [
+            l.kind === "create" ? (s(), B(o(te), {
+              key: 0,
+              class: "size-3.5 shrink-0 text-[var(--ui-primary)]",
+              "aria-hidden": "true"
+            })) : (s(), B(o(le), {
+              key: 1,
+              class: S(["size-3.5 shrink-0 text-[var(--ui-primary)]", !l.selected && "invisible"]),
+              "aria-hidden": "true"
+            }, null, 8, ["class"])),
+            V("span", ge, p(l.label), 1)
+          ], 46, fe))), 128))
+        ], 4),
+        r.value.length ? _("", !0) : (s(), u("p", he, p(o(a).loading ? o(a).loadingText : o(a).emptyText), 1))
+      ], 44, me)
+    ], 32));
+  }
+});
+export {
+  Ve as default
+};

package/dist/modules/components/composite/tag-picker/TagPickerList2.vue.js

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

package/dist/modules/components/composite/tag-picker/tagPicker.js

@@ -0,0 +1,28 @@
+function v(a) {
+  return typeof a == "string" ? { value: a, label: a, disabled: !1 } : { value: a.value, label: a.label ?? a.value, disabled: a.disabled === !0 };
+}
+function L(a, n, i, t = {}) {
+  const r = i.trim(), s = r.toLocaleLowerCase(), o = new Set(n), u = t.max !== void 0 && n.length >= t.max, c = /* @__PURE__ */ new Map();
+  for (const e of a) {
+    const l = v(e);
+    l.value.trim() !== "" && !c.has(l.value) && c.set(l.value, l);
+  }
+  for (const e of n)
+    e.trim() !== "" && !c.has(e) && c.set(e, { value: e, label: e, disabled: !1 });
+  const d = [...c.values()], b = (s ? d.filter((e) => e.label.toLocaleLowerCase().includes(s)) : d).map((e) => {
+    const l = o.has(e.value);
+    return { value: e.value, label: e.label, selected: l, disabled: !l && (e.disabled || u) };
+  });
+  b.sort((e, l) => (s ? 0 : Number(l.selected) - Number(e.selected)) || e.label.localeCompare(l.label));
+  const f = d.some((e) => e.label.toLocaleLowerCase() === s || e.value.toLocaleLowerCase() === s), m = t.createFilter ? t.createFilter(r) : !0, h = t.allowCreate && r && !f && !u && m ? r : null;
+  return { rows: b, create: h };
+}
+function M(a, n, i, t, r = 4) {
+  const s = Math.floor(Math.max(0, a) / n), o = Math.max(0, Math.min(t, s - r)), u = Math.min(t, s + Math.ceil(i / n) + r);
+  return { start: o, end: Math.max(o, u) };
+}
+export {
+  v as normalizeTagOption,
+  L as tagPickerRows,
+  M as visibleWindow
+};

package/dist/modules/components/composite/timeline-row/TimelineRow.vue.js

@@ -0,0 +1,140 @@
+import { defineComponent as $, useModel as k, useId as y, computed as g, openBlock as i, createElementBlock as o, createElementVNode as d, renderSlot as n, createCommentVNode as a, createBlock as r, resolveDynamicComponent as b, toDisplayString as m, createTextVNode as p, createVNode as v, withCtx as u, unref as s, normalizeClass as C, mergeModels as L } from "vue";
+import { useLocalizedDefaults as z } from "../../../i18n/text.js";
+import B from "../../primitives/motion/MotionCollapse.vue.js";
+import { ChevronDown as D } from "@lucide/vue";
+import M from "../../primitives/badge/Badge.vue.js";
+import N from "../../primitives/button/IconButton.vue.js";
+const T = ["data-tone", "data-expanded"], V = { class: "ui-timeline-row-line" }, S = {
+  key: 0,
+  "data-ui-timeline-row-leading": "",
+  class: "ui-timeline-row-leading"
+}, x = {
+  key: 1,
+  "data-ui-timeline-row-icon": "",
+  class: "ui-timeline-row-icon",
+  "aria-hidden": "true"
+}, E = { class: "ui-timeline-row-main" }, I = ["title"], P = {
+  key: 0,
+  "data-ui-timeline-row-meta": "",
+  class: "ui-timeline-row-meta"
+}, H = {
+  key: 2,
+  class: "ui-timeline-row-trail"
+}, R = {
+  key: 0,
+  "data-ui-timeline-row-chip": "",
+  class: "ui-timeline-row-chip"
+}, j = ["datetime", "title"], q = {
+  key: 3,
+  "data-ui-timeline-row-actions": "",
+  class: "ui-timeline-row-actions"
+}, A = ["id"], X = /* @__PURE__ */ $({
+  __name: "TimelineRow",
+  props: /* @__PURE__ */ L({
+    title: {},
+    meta: { default: void 0 },
+    tone: { default: "neutral" },
+    icon: { default: void 0 },
+    chip: { default: void 0 },
+    chipTone: { default: "neutral" },
+    time: { default: void 0 },
+    datetime: { default: void 0 },
+    showLabel: {},
+    hideLabel: {}
+  }, {
+    expanded: { type: Boolean, default: !1 },
+    expandedModifiers: {}
+  }),
+  emits: ["update:expanded"],
+  setup(e) {
+    const c = z(e, { showLabel: "Show details", hideLabel: "Hide details" }), h = k(e, "expanded"), w = y(), l = g(() => h.value);
+    return (t, f) => (i(), o("div", {
+      class: "ui-timeline-row",
+      "data-tone": e.tone,
+      "data-expanded": l.value || void 0,
+      "data-ui-timeline-row": "",
+      "data-syno-pkg-land-ui": ""
+    }, [
+      d("div", V, [
+        t.$slots.leading ? (i(), o("span", S, [
+          n(t.$slots, "leading")
+        ])) : a("", !0),
+        e.icon || t.$slots.icon ? (i(), o("span", x, [
+          n(t.$slots, "icon", {}, () => [
+            (i(), r(b(e.icon), { class: "size-4" }))
+          ])
+        ])) : a("", !0),
+        d("span", E, [
+          d("span", {
+            "data-ui-timeline-row-title": "",
+            class: "ui-timeline-row-title",
+            title: e.title
+          }, m(e.title), 9, I),
+          e.meta || t.$slots.meta ? (i(), o("span", P, [
+            n(t.$slots, "meta", {}, () => [
+              p(m(e.meta), 1)
+            ])
+          ])) : a("", !0)
+        ]),
+        e.chip || t.$slots.chip || e.time ? (i(), o("span", H, [
+          e.chip || t.$slots.chip ? (i(), o("span", R, [
+            n(t.$slots, "chip", {}, () => [
+              v(M, { tone: e.chipTone }, {
+                default: u(() => [
+                  p(m(e.chip), 1)
+                ]),
+                _: 1
+              }, 8, ["tone"])
+            ])
+          ])) : a("", !0),
+          e.time ? (i(), o("time", {
+            key: 1,
+            "data-ui-timeline-row-time": "",
+            class: "ui-timeline-row-time",
+            datetime: e.datetime,
+            title: e.datetime
+          }, m(e.time), 9, j)) : a("", !0)
+        ])) : a("", !0),
+        t.$slots.actions || t.$slots.expand ? (i(), o("span", q, [
+          n(t.$slots, "actions"),
+          t.$slots.expand ? (i(), r(N, {
+            key: 0,
+            variant: "ghost",
+            size: "sm",
+            label: l.value ? s(c).hideLabel : s(c).showLabel,
+            "aria-expanded": l.value,
+            "aria-controls": s(w),
+            "data-ui-timeline-row-toggle": "",
+            onClick: f[0] || (f[0] = (G) => h.value = !l.value)
+          }, {
+            default: u(() => [
+              v(s(D), {
+                class: C(["size-4 transition-transform duration-[var(--ui-motion-fast)]", l.value && "rotate-180"])
+              }, null, 8, ["class"])
+            ]),
+            _: 1
+          }, 8, ["label", "aria-expanded", "aria-controls"])) : a("", !0)
+        ])) : a("", !0),
+        t.$slots.expand ? (i(), r(B, {
+          key: 4,
+          open: l.value,
+          class: "[grid-area:detail]"
+        }, {
+          default: u(() => [
+            d("div", {
+              id: s(w),
+              "data-ui-timeline-row-detail": "",
+              class: "ui-timeline-row-detail"
+            }, [
+              n(t.$slots, "expand")
+            ], 8, A)
+          ]),
+          _: 3
+        }, 8, ["open"])) : a("", !0)
+      ])
+    ], 8, T));
+  }
+});
+export {
+  X as default
+};

package/dist/modules/components/composite/timeline-row/TimelineRow2.vue.js

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

package/dist/modules/components/composite/tree-view/TreeView.vue.js

@@ -0,0 +1,276 @@
+import { defineComponent as pe, useTemplateRef as he, computed as h, ref as g, watch as j, openBlock as s, createBlock as v, unref as c, withCtx as _, createElementBlock as B, Fragment as ge, renderList as me, mergeProps as ye, withModifiers as w, createVNode as E, createCommentVNode as I, normalizeClass as M, resolveDynamicComponent as be, createElementVNode as ke, toDisplayString as xe, renderSlot as O } from "vue";
+import { useUiText as _e } from "../../../i18n/text.js";
+import { Minus as we, Check as Ce, ChevronRight as De, FolderOpen as Ve, Folder as Ne, File as Se } from "@lucide/vue";
+import { CheckboxRoot_default as ze } from "../../../vendor/reka-ui/dist/Checkbox/CheckboxRoot.js";
+import { CheckboxIndicator_default as Ke } from "../../../vendor/reka-ui/dist/Checkbox/CheckboxIndicator.js";
+import { TreeRoot_default as Be } from "../../../vendor/reka-ui/dist/Tree/TreeRoot.js";
+import { TreeItem_default as Ie } from "../../../vendor/reka-ui/dist/Tree/TreeItem.js";
+import Te from "../../primitives/spinner/Spinner.vue.js";
+import Ae from "../../primitives/tooltip/OverflowTooltip.vue.js";
+import { flattenNodes as P, findNode as Le, enabledLeafIds as Y, moveNode as q, moveSibling as $e, setChildren as Re, containsId as Fe } from "./treeUtils.js";
+const Ue = ["data-ui-hit", "disabled", "aria-label", "aria-expanded", "onClick"], je = {
+  key: 2,
+  class: "size-5 shrink-0"
+}, Ee = { class: "min-w-0 flex-1 truncate" }, Xe = /* @__PURE__ */ pe({
+  __name: "TreeView",
+  props: {
+    nodes: {},
+    modelValue: {},
+    expanded: { default: () => [] },
+    multiple: { type: Boolean, default: !1 },
+    showIcons: { type: Boolean, default: !0 },
+    checkable: { type: Boolean, default: !1 },
+    checkedKeys: { default: void 0 },
+    defaultCheckedKeys: { default: () => [] },
+    draggable: { type: [Boolean, Object], default: !1 },
+    loadChildren: { type: Function, default: void 0 },
+    expandLabel: {},
+    selectionStyle: { default: "accent" }
+  },
+  emits: ["update:modelValue", "update:expanded", "update:checkedKeys", "update:nodes", "select", "check", "expand", "collapse", "reorder", "load"],
+  setup(G, { expose: H, emit: J }) {
+    const Q = _e(), T = he("treeRoot"), W = h(() => T.value?.$el ?? null), r = G, o = J, C = g(null);
+    j(() => r.nodes, () => {
+      C.value = null;
+    });
+    const d = h(() => C.value ?? r.nodes);
+    function y(e) {
+      C.value = e, o("update:nodes", e);
+    }
+    const b = h(() => P(d.value));
+    function f(e) {
+      return Le(d.value, e);
+    }
+    const X = h(() => {
+      if (r.multiple) {
+        const a = Array.isArray(r.modelValue) ? r.modelValue : r.modelValue ? [r.modelValue] : [];
+        return b.value.filter((n) => a.includes(n.id));
+      }
+      const e = Array.isArray(r.modelValue) ? r.modelValue[0] : r.modelValue;
+      return b.value.find((a) => a.id === e);
+    });
+    function Z(e) {
+      Array.isArray(e) ? (o("update:modelValue", e.map((a) => a.id)), e.at(-1) && o("select", e.at(-1))) : e ? (o("update:modelValue", e.id), o("select", e)) : o("update:modelValue", void 0);
+    }
+    const A = g([...r.defaultCheckedKeys]), D = h(() => r.checkedKeys ?? A.value);
+    function V(e) {
+      const a = Y(e);
+      if (!a.length) return D.value.includes(e.id);
+      const n = a.filter((t) => D.value.includes(t)).length;
+      return n === 0 ? !1 : n === a.length ? !0 : "indeterminate";
+    }
+    function ee(e, a) {
+      if (e.disabled) return;
+      const n = Y(e), t = new Set(D.value);
+      for (const i of n.length ? n : [e.id])
+        a ? t.add(i) : t.delete(i);
+      const l = [...t];
+      A.value = l, o("update:checkedKeys", l), o("check", { node: e, checked: a, keys: l });
+    }
+    function ae(e = !1) {
+      return b.value.filter((a) => {
+        const n = V(a);
+        return n === !0 || e && n === "indeterminate";
+      });
+    }
+    const m = g(/* @__PURE__ */ new Set()), k = g(/* @__PURE__ */ new Set());
+    j(() => r.nodes, () => {
+      k.value = /* @__PURE__ */ new Set();
+    });
+    const te = (e) => !!r.loadChildren && !e.isLeaf, L = (e) => m.value.has(e.id);
+    async function $(e) {
+      if (!(!r.loadChildren || e.isLeaf || e.children?.length || k.value.has(e.id))) {
+        m.value = /* @__PURE__ */ new Set([...m.value, e.id]);
+        try {
+          const a = await r.loadChildren(e);
+          k.value = /* @__PURE__ */ new Set([...k.value, e.id]), a && (y(Re(d.value, e.id, a)), o("load", { node: e, children: a }));
+        } finally {
+          const a = new Set(m.value);
+          a.delete(e.id), m.value = a;
+        }
+      }
+    }
+    function ne(e) {
+      const a = r.expanded;
+      o("update:expanded", e);
+      for (const n of e) {
+        if (a.includes(n)) continue;
+        const t = f(n);
+        t && $(t);
+      }
+    }
+    async function N(e, a = !r.expanded.includes(e.id)) {
+      e.disabled || (a && await $(e), o("update:expanded", a ? [...r.expanded, e.id] : r.expanded.filter((n) => n !== e.id)), o(a ? "expand" : "collapse", e));
+    }
+    const re = (e) => {
+      const a = f(e);
+      a && N(a, !0);
+    }, le = (e) => {
+      const a = f(e);
+      a && N(a, !1);
+    }, x = h(() => r.draggable ? typeof r.draggable == "object" ? r.draggable : {} : null), R = h(() => !!x.value), p = g(null), u = g(null), S = (e) => !e.disabled && R.value && e.draggable !== !1 && (x.value?.canDrag?.(e) ?? !0);
+    function F(e, a, n) {
+      return !e || a.disabled || e.id === a.id || Fe(e, a.id) || !S(e) || n === "inner" && a.canAppend === !1 ? !1 : x.value?.canDrop?.({ node: e, target: a, position: n }) ?? !0;
+    }
+    function oe(e) {
+      S(e) && (p.value = e.id);
+    }
+    function U(e, a) {
+      if (x.value?.type === "append-only") return "inner";
+      const n = a.getBoundingClientRect();
+      if (!n.height) return "inner";
+      const t = (e.clientY - n.top) / n.height;
+      return t < 0.25 ? "top" : t > 0.75 ? "bottom" : "inner";
+    }
+    function ie(e, a) {
+      const n = U(e, e.currentTarget), t = p.value ? f(p.value) : void 0;
+      if (!F(t, a, n)) {
+        u.value = null;
+        return;
+      }
+      u.value = { id: a.id, position: n }, e.dataTransfer && (e.dataTransfer.dropEffect = "move");
+    }
+    function de(e, a) {
+      const n = p.value, t = n ? f(n) : void 0, l = u.value?.id === a.id ? u.value.position : U(e, e.currentTarget);
+      if (p.value = null, u.value = null, !t || !F(t, a, l)) return;
+      const i = q(d.value, t.id, a.id, l);
+      i !== d.value && (y(i), o("reorder", { node: t, target: a, position: l, nodes: i }));
+    }
+    function ue() {
+      p.value = null, u.value = null;
+    }
+    function z(e, a) {
+      if (e.disabled) return;
+      const n = P(d.value).find((K) => K.children?.some((ve) => ve.id === e.id)), t = n ? n.children ?? [] : d.value, l = t[t.findIndex((K) => K.id === e.id) + a];
+      if (!l) return;
+      const i = $e(d.value, e.id, a);
+      i !== d.value && (y(i), o("reorder", { node: e, target: l, position: a < 0 ? "top" : "bottom", nodes: i }));
+    }
+    function se(e, a) {
+      !R.value || !e.altKey || (e.key === "ArrowUp" ? (e.preventDefault(), z(a, -1)) : e.key === "ArrowDown" && (e.preventDefault(), z(a, 1)));
+    }
+    function ce(e, a, n) {
+      const t = f(e), l = f(a);
+      if (!t || !l) return;
+      const i = q(d.value, e, a, n);
+      y(i), o("reorder", { node: t, target: l, position: n, nodes: i });
+    }
+    const fe = (e) => u.value?.id !== e.id ? "" : u.value.position === "inner" ? "bg-[var(--ui-primary-soft)] outline outline-1 outline-[var(--ui-primary)]" : u.value.position === "top" ? "shadow-[inset_0_2px_0_0_var(--ui-primary)]" : "shadow-[inset_0_-2px_0_0_var(--ui-primary)]";
+    return H({
+      getNodes: () => [...b.value],
+      nodeById: f,
+      getCheckedNodes: ae,
+      moveNode: ce,
+      moveSiblingBy: z,
+      expandNode: re,
+      collapseNode: le
+    }), (e, a) => (s(), v(c(Be), {
+      ref_key: "treeRoot",
+      ref: T,
+      items: d.value,
+      "model-value": X.value,
+      expanded: r.expanded,
+      multiple: r.multiple,
+      "get-key": (n) => n.id,
+      "get-children": (n) => n.children,
+      class: "outline-none",
+      "data-syno-pkg-land-ui": "",
+      "onUpdate:modelValue": Z,
+      "onUpdate:expanded": ne
+    }, {
+      default: _(({ flattenItems: n }) => [
+        (s(!0), B(ge, null, me(n, (t) => (s(), v(c(Ie), ye({
+          key: t._id
+        }, { ref_for: !0 }, t.bind, {
+          "data-tree-node": t.value.id,
+          "data-drop-position": u.value?.id === t.value.id ? u.value.position : void 0,
+          disabled: t.value.disabled,
+          draggable: S(t.value) || void 0,
+          class: [
+            "group flex h-[var(--ui-nav-row-height,var(--ui-nav-row-height-default,42px))] [@media(pointer:coarse)]:min-h-[var(--ui-hit-min)] select-none items-center gap-1 rounded-[var(--ui-radius-inner)] pr-2 text-[length:var(--ui-font-size-control)] text-[var(--ui-text)] outline-none transition-colors hover:bg-[var(--ui-surface-hover)] focus-visible:shadow-[var(--ui-shadow-focus-inset)] data-[selected]:bg-[var(--ui-surface-selected)]",
+            r.selectionStyle === "accent" && "data-[selected]:text-[var(--ui-primary-active)]",
+            t.value.disabled && "opacity-45",
+            p.value === t.value.id && "opacity-40",
+            fe(t.value)
+          ],
+          style: { paddingLeft: `calc(var(--ui-space-2) + ${t.level - 1} * var(--ui-space-4))` },
+          onDragstart: (l) => oe(t.value),
+          onDragover: w((l) => ie(l, t.value), ["prevent"]),
+          onDrop: w((l) => de(l, t.value), ["prevent"]),
+          onDragend: ue,
+          onKeydown: (l) => se(l, t.value)
+        }), {
+          default: _(({ isExpanded: l }) => [
+            r.checkable ? (s(), v(c(ze), {
+              key: 0,
+              "model-value": V(t.value),
+              disabled: t.value.disabled,
+              "data-tree-check": "",
+              "aria-label": t.value.label,
+              class: "flex size-[var(--ui-choice-box-size)] shrink-0 items-center justify-center rounded-[var(--ui-radius-inner)] border border-[var(--ui-border-strong)] bg-[var(--ui-surface)] text-[var(--ui-primary-foreground)] outline-none data-[state=checked]:border-[var(--ui-primary)] data-[state=checked]:bg-[var(--ui-primary)] data-[state=indeterminate]:border-[var(--ui-primary)] data-[state=indeterminate]:bg-[var(--ui-primary)] focus-visible:shadow-[var(--ui-shadow-focus)] disabled:opacity-50",
+              onClick: a[0] || (a[0] = w(() => {
+              }, ["stop"])),
+              "onUpdate:modelValue": (i) => ee(t.value, i === !0)
+            }, {
+              default: _(() => [
+                E(c(Ke), { class: "flex items-center justify-center" }, {
+                  default: _(() => [
+                    V(t.value) === "indeterminate" ? (s(), v(c(we), {
+                      key: 0,
+                      class: "size-[calc(var(--ui-choice-box-size)*0.75)] stroke-[2.5]",
+                      "aria-hidden": "true"
+                    })) : (s(), v(c(Ce), {
+                      key: 1,
+                      class: "size-[calc(var(--ui-choice-box-size)*0.75)] stroke-[2.5]",
+                      "aria-hidden": "true"
+                    }))
+                  ]),
+                  _: 2
+                }, 1024)
+              ]),
+              _: 2
+            }, 1032, ["model-value", "disabled", "aria-label", "onUpdate:modelValue"])) : I("", !0),
+            t.hasChildren || te(t.value) ? (s(), B("button", {
+              key: 1,
+              type: "button",
+              tabindex: "-1",
+              "data-tree-toggle": "",
+              "data-ui-hit": r.checkable ? void 0 : "",
+              class: "flex size-5 shrink-0 items-center justify-center rounded-[var(--ui-radius-inner)] text-[var(--ui-text-muted)] hover:bg-[var(--ui-control-bg-hover)] disabled:opacity-50",
+              disabled: t.value.disabled || L(t.value),
+              "aria-label": r.expandLabel?.(t.value, l) ?? c(Q)(l ? "Collapse {name}" : "Expand {name}", { name: t.value.label }),
+              "aria-expanded": l,
+              onClick: w((i) => N(t.value), ["stop"])
+            }, [
+              L(t.value) ? (s(), v(Te, {
+                key: 0,
+                size: 14
+              })) : (s(), v(c(De), {
+                key: 1,
+                class: M(["size-3.5 transition-transform", l && "rotate-90"]),
+                "aria-hidden": "true"
+              }, null, 8, ["class"]))
+            ], 8, Ue)) : (s(), B("span", je)),
+            r.showIcons ? (s(), v(be(t.value.icon ?? (t.hasChildren ? l ? c(Ve) : c(Ne) : c(Se))), {
+              key: 3,
+              class: M(["size-4 shrink-0 text-[var(--ui-text-muted)]", r.selectionStyle === "accent" && "group-data-[selected]:text-[var(--ui-primary)]"]),
+              "aria-hidden": "true"
+            }, null, 8, ["class"])) : I("", !0),
+            ke("span", Ee, xe(t.value.label), 1),
+            O(e.$slots, "trailing", {
+              node: t.value,
+              selected: l
+            })
+          ]),
+          _: 2
+        }, 1040, ["data-tree-node", "data-drop-position", "disabled", "draggable", "class", "style", "onDragstart", "onDragover", "onDrop", "onKeydown"]))), 128)),
+        d.value.length ? I("", !0) : O(e.$slots, "empty", {}, void 0, void 0, 0),
+        E(Ae, { target: W.value }, null, 8, ["target"])
+      ]),
+      _: 3
+    }, 8, ["items", "model-value", "expanded", "multiple", "get-key", "get-children"]));
+  }
+});
+export {
+  Xe as default
+};

package/dist/modules/components/composite/tree-view/TreeView2.vue.js

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