@synopackageland/ui 0.25.21 → 0.25.22

package/dist/modules/components/app/app-sidebar/AppSidebar.vue.js

@@ -0,0 +1,134 @@
+import { defineComponent as G, inject as v, computed as i, ref as g, watch as V, unref as n, openBlock as r, createBlock as x, createElementBlock as u, createCommentVNode as _, Fragment as I, renderList as O, normalizeClass as L, createVNode as $, createTextVNode as Y, toDisplayString as C } from "vue";
+import { useLocalizedDefaults as M } from "../../../i18n/text.js";
+import { ChevronDown as R } from "@lucide/vue";
+import { APP_SIDEBAR_COLLAPSED_KEY as j, APP_TOP_NAVIGATION_KEY as q, APP_PAGE_CHANGE_KEY as F } from "../../../lib/adaptiveLayout.js";
+import H from "../../composite/search-field/SearchField.vue.js";
+import U from "./AppSidebarItems.vue.js";
+import J from "./AppTopNav.vue.js";
+const Q = ["aria-label", "data-ui-sidebar-collapsed"], W = ["aria-expanded", "onClick"], X = {
+  key: 1,
+  "data-nav-group-label": "",
+  class: "flex h-6 items-center px-[var(--ui-space-3)] text-[length:var(--ui-font-size-sm)] font-semibold text-[var(--ui-text-secondary)]"
+}, de = /* @__PURE__ */ G({
+  __name: "AppSidebar",
+  props: {
+    modelValue: {},
+    groups: {},
+    ariaLabel: {},
+    clearSearchLabel: {},
+    searchable: { type: Boolean, default: !1 },
+    searchPlaceholder: {},
+    collapsible: { type: Boolean, default: !1 },
+    expandedKeys: { default: void 0 },
+    defaultExpandedKeys: { default: () => [] }
+  },
+  emits: ["update:modelValue", "update:expandedKeys", "select", "branchToggle"],
+  setup(E, { emit: A }) {
+    const o = M(E, { ariaLabel: "Application navigation", clearSearchLabel: "Clear search", searchPlaceholder: "Search" }), d = A, s = v(j, i(() => !1)), K = v(q, i(() => !1)), p = g(""), m = g(/* @__PURE__ */ new Set());
+    function y(e, a) {
+      return e.flatMap((l) => {
+        const t = l.children ? y(l.children, a) : [];
+        return l.label.toLowerCase().includes(a) ? [{ ...l }] : t.length ? [{ ...l, children: t }] : [];
+      });
+    }
+    const B = i(() => {
+      const e = p.value.trim().toLowerCase();
+      return o.groups.map((a, l) => ({
+        group: a,
+        id: a.label ?? String(l),
+        items: e ? y(a.items, e) : a.items
+      })).filter((a) => !e || a.items.length > 0);
+    }), P = i(() => !!p.value.trim());
+    function T(e) {
+      const a = new Set(m.value);
+      a.delete(e) || a.add(e), m.value = a;
+    }
+    const h = (e) => !o.collapsible || P.value || s.value || !m.value.has(e), b = g([...o.defaultExpandedKeys]), c = i(() => o.expandedKeys ?? b.value);
+    function k(e, a = o.groups.flatMap((t) => t.items), l = []) {
+      for (const t of a) {
+        if (t.key === e) return l;
+        const f = t.children ? k(e, t.children, [...l, t.key]) : void 0;
+        if (f) return f;
+      }
+      return [];
+    }
+    function w(e) {
+      const a = k(e);
+      if (!a.length) return;
+      const l = [.../* @__PURE__ */ new Set([...c.value, ...a])];
+      b.value = l, d("update:expandedKeys", l);
+    }
+    V(() => o.modelValue, (e) => {
+      e && w(e);
+    }, { immediate: !0 });
+    const N = v(F, null);
+    V(() => o.modelValue, (e, a) => {
+      e && a && e !== a && N?.();
+    });
+    function z(e) {
+      const a = c.value.includes(e), l = a ? c.value.filter((t) => t !== e) : [...c.value, e];
+      b.value = l, d("update:expandedKeys", l), d("branchToggle", e, !a);
+    }
+    function S(e) {
+      e.disabled || (d("update:modelValue", e.key), d("select", e), w(e.key));
+    }
+    return (e, a) => n(K) ? (r(), x(J, {
+      key: 0,
+      groups: n(o).groups,
+      "model-value": n(o).modelValue,
+      label: n(o).ariaLabel,
+      onSelect: S
+    }, null, 8, ["groups", "model-value", "label"])) : (r(), u("nav", {
+      key: 1,
+      class: "h-full overflow-auto p-2",
+      "aria-label": n(o).ariaLabel,
+      "data-ui-sidebar-collapsed": n(s) ? "true" : void 0,
+      "data-syno-pkg-land-ui": ""
+    }, [
+      n(o).searchable && !n(s) ? (r(), x(H, {
+        key: 0,
+        modelValue: p.value,
+        "onUpdate:modelValue": a[0] || (a[0] = (l) => p.value = l),
+        class: "mb-2",
+        placeholder: n(o).searchPlaceholder,
+        "clear-label": n(o).clearSearchLabel
+      }, null, 8, ["modelValue", "placeholder", "clear-label"])) : _("", !0),
+      (r(!0), u(I, null, O(B.value, ({ group: l, id: t, items: f }, D) => (r(), u("section", {
+        key: t,
+        class: L(D > 0 && "mt-2 border-t border-[var(--ui-border-subtle)] pt-2")
+      }, [
+        l.label && n(o).collapsible && !n(s) ? (r(), u("button", {
+          key: 0,
+          type: "button",
+          "data-group-toggle": "",
+          "data-ui-hit": "",
+          "data-ui-hit-row": "",
+          "data-nav-group-label": "",
+          "aria-expanded": h(t),
+          class: "flex h-6 w-full items-center gap-1 border-0 bg-transparent px-[var(--ui-space-3)] text-left text-[length:var(--ui-font-size-sm)] font-semibold text-[var(--ui-text-secondary)] outline-none focus-visible:shadow-[var(--ui-shadow-focus)]",
+          onClick: (ee) => T(t)
+        }, [
+          $(n(R), {
+            class: L(["size-3 shrink-0 transition-transform", !h(t) && "-rotate-90"]),
+            "aria-hidden": "true"
+          }, null, 8, ["class"]),
+          Y(" " + C(l.label), 1)
+        ], 8, W)) : l.label && !n(s) ? (r(), u("div", X, C(l.label), 1)) : _("", !0),
+        h(t) ? (r(), x(U, {
+          key: 2,
+          items: f,
+          "model-value": n(o).modelValue,
+          "expanded-keys": c.value,
+          depth: 0,
+          searching: P.value,
+          collapsed: n(s),
+          onSelect: S,
+          onToggle: z
+        }, null, 8, ["items", "model-value", "expanded-keys", "searching", "collapsed"])) : _("", !0)
+      ], 2))), 128))
+    ], 8, Q));
+  }
+});
+export {
+  de as default
+};

package/dist/modules/components/app/app-sidebar/AppSidebar2.vue.js

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

package/dist/modules/components/app/app-sidebar/AppSidebarItems.vue.js

@@ -0,0 +1,125 @@
+import { defineComponent as B, computed as A, resolveComponent as I, openBlock as t, createElementBlock as s, Fragment as x, renderList as $, createBlock as p, withCtx as E, normalizeStyle as f, normalizeClass as i, createVNode as m, unref as K, resolveDynamicComponent as k, createCommentVNode as r, createElementVNode as _, toDisplayString as c } from "vue";
+import { ChevronRight as N } from "@lucide/vue";
+import j from "./AppSidebarTip.vue.js";
+const D = ["data-nav-toggle", "data-nav-item", "disabled", "aria-current", "aria-expanded", "onClick"], L = {
+  key: 1,
+  "data-nav-badge": "",
+  class: "inline-flex min-w-5 items-center justify-center rounded-full bg-[var(--ui-primary)] px-1 py-0.5 text-[length:var(--ui-font-size-sm)] font-semibold leading-none text-[var(--ui-primary-foreground)]"
+}, F = ["disabled", "aria-current", "onClick"], H = {
+  key: 0,
+  "data-nav-chevron-spacer": "",
+  class: "size-3.5 shrink-0",
+  "aria-hidden": "true"
+}, R = {
+  key: 2,
+  "data-nav-badge": "",
+  class: "inline-flex min-w-5 items-center justify-center rounded-full bg-[var(--ui-primary)] px-1 py-0.5 text-[length:var(--ui-font-size-sm)] font-semibold leading-none text-[var(--ui-primary-foreground)]"
+}, T = ["aria-label"], w = "min-w-0 flex-1 [overflow-wrap:anywhere] [text-wrap:pretty]", M = /* @__PURE__ */ B({
+  name: "AppSidebarItems",
+  __name: "AppSidebarItems",
+  props: {
+    items: {},
+    modelValue: {},
+    expandedKeys: {},
+    depth: {},
+    searching: { type: Boolean },
+    collapsed: { type: Boolean }
+  },
+  emits: ["select", "toggle"],
+  setup(v, { emit: C }) {
+    const a = v, o = C, u = (n) => a.searching || a.expandedKeys.includes(n.key), h = (n) => a.collapsed ? void 0 : { paddingLeft: `calc(var(--ui-space-3) + ${n * 16}px)` }, g = (n) => !!a.collapsed && !n.icon, b = (n) => !!n.children?.some((l) => g(l) && a.modelValue === l.key || b(l)), z = (n) => a.modelValue === n.key || !!a.collapsed && b(n), V = A(() => !a.collapsed && a.items.some((n) => n.children?.length)), y = (n) => [
+      "flex min-h-[var(--ui-nav-row-height,var(--ui-nav-row-height-default,42px))] w-full items-center border-0 gap-[var(--ui-space-2)] rounded-[var(--ui-radius-nav)] px-[var(--ui-space-3)] py-1 text-left text-[length:var(--ui-font-size-lg)] leading-snug outline-none transition-colors focus-visible:shadow-[var(--ui-shadow-focus)] disabled:opacity-40",
+      z(n) ? "bg-[var(--ui-surface-selected)] text-[var(--ui-text)]" : "bg-transparent text-[var(--ui-text)] hover:bg-[var(--ui-surface-hover)]"
+    ];
+    return (n, l) => {
+      const S = I("AppSidebarItems", !0);
+      return t(!0), s(x, null, $(v.items, (e) => (t(), s(x, {
+        key: e.key
+      }, [
+        g(e) ? r("", !0) : (t(), p(j, {
+          key: 0,
+          label: e.label,
+          enabled: !!a.collapsed
+        }, {
+          default: E(() => [
+            e.children?.length ? (t(), s("button", {
+              key: 0,
+              type: "button",
+              "data-nav-branch": "",
+              "data-ui-hit-row": "",
+              "data-nav-toggle": e.key,
+              "data-nav-item": e.selectable ? "" : void 0,
+              disabled: e.disabled,
+              "aria-current": e.selectable && a.modelValue === e.key ? "page" : void 0,
+              "aria-expanded": u(e),
+              class: i(y(e)),
+              style: f(h(a.depth)),
+              onClick: (d) => {
+                o("toggle", e.key), e.selectable && o("select", e);
+              }
+            }, [
+              m(K(N), {
+                "data-nav-chevron": "",
+                class: i(["size-3.5 shrink-0 text-[var(--ui-text-muted)] transition-transform", u(e) && "rotate-90"]),
+                "aria-hidden": "true"
+              }, null, 8, ["class"]),
+              e.icon ? (t(), p(k(e.icon), {
+                key: 0,
+                class: "size-[var(--ui-icon-size,22px)] shrink-0",
+                "aria-hidden": "true"
+              })) : r("", !0),
+              _("span", {
+                "data-nav-label": "",
+                class: i(a.collapsed ? "sr-only" : w)
+              }, c(e.label), 3),
+              e.badge !== void 0 ? (t(), s("span", L, c(e.badge), 1)) : r("", !0)
+            ], 14, D)) : (t(), s("button", {
+              key: 1,
+              type: "button",
+              "data-nav-item": "",
+              "data-ui-hit-row": "",
+              disabled: e.disabled,
+              "aria-current": a.modelValue === e.key ? "page" : void 0,
+              class: i(y(e)),
+              style: f(h(a.depth)),
+              onClick: (d) => o("select", e)
+            }, [
+              V.value ? (t(), s("span", H)) : r("", !0),
+              e.icon ? (t(), p(k(e.icon), {
+                key: 1,
+                class: "size-[var(--ui-icon-size,22px)] shrink-0",
+                "aria-hidden": "true"
+              })) : r("", !0),
+              _("span", {
+                "data-nav-label": "",
+                class: i(a.collapsed ? "sr-only" : w)
+              }, c(e.label), 3),
+              e.badge !== void 0 ? (t(), s("span", R, c(e.badge), 1)) : r("", !0)
+            ], 14, F))
+          ]),
+          _: 2
+        }, 1032, ["label", "enabled"])),
+        e.children?.length && u(e) ? (t(), s("div", {
+          key: 1,
+          role: "group",
+          "aria-label": e.label,
+          "data-nav-children": ""
+        }, [
+          m(S, {
+            items: e.children,
+            "model-value": a.modelValue,
+            "expanded-keys": a.expandedKeys,
+            depth: a.depth + 1,
+            searching: a.searching,
+            collapsed: a.collapsed,
+            onSelect: l[0] || (l[0] = (d) => o("select", d)),
+            onToggle: l[1] || (l[1] = (d) => o("toggle", d))
+          }, null, 8, ["items", "model-value", "expanded-keys", "depth", "searching", "collapsed"])
+        ], 8, T)) : r("", !0)
+      ], 64))), 128);
+    };
+  }
+});
+export {
+  M as default
+};

package/dist/modules/components/app/app-sidebar/AppSidebarItems2.vue.js

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

package/dist/modules/components/app/app-sidebar/AppSidebarTip.vue.js

@@ -0,0 +1,24 @@
+import { defineComponent as n, openBlock as a, createBlock as l, withCtx as r, renderSlot as o } from "vue";
+import d from "../../primitives/tooltip/Tooltip.vue.js";
+const c = /* @__PURE__ */ n({
+  __name: "AppSidebarTip",
+  props: {
+    label: {},
+    enabled: { type: Boolean }
+  },
+  setup(e) {
+    return (t, i) => e.enabled ? (a(), l(d, {
+      key: 0,
+      content: e.label,
+      side: "right"
+    }, {
+      default: r(() => [
+        o(t.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["content"])) : o(t.$slots, "default", {}, void 0, void 0, 1);
+  }
+});
+export {
+  c as default
+};

package/dist/modules/components/app/app-sidebar/AppSidebarTip2.vue.js

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

package/dist/modules/components/app/app-sidebar/AppSidebarUser.vue.js

@@ -0,0 +1,56 @@
+import { defineComponent as c, inject as m, computed as s, openBlock as d, createBlock as u, unref as n, withCtx as o, createElementVNode as t, toDisplayString as i, normalizeClass as f, createVNode as p, createElementBlock as _, createCommentVNode as h } from "vue";
+import { APP_SIDEBAR_COLLAPSED_KEY as x } from "../../../lib/adaptiveLayout.js";
+import b from "../../primitives/tooltip/OverflowTooltip.vue.js";
+import C from "../../primitives/tooltip/Tooltip.vue.js";
+const k = ["tabindex"], y = {
+  "data-ui-user-avatar": "",
+  "aria-hidden": "true"
+}, A = {
+  "data-ui-user-name": "",
+  class: "truncate"
+}, E = {
+  key: 0,
+  "data-ui-user-detail": "",
+  class: "truncate"
+}, N = /* @__PURE__ */ c({
+  __name: "AppSidebarUser",
+  props: {
+    name: {},
+    detail: {}
+  },
+  setup(e) {
+    const r = e, a = m(x, s(() => !1)), l = s(() => Array.from(r.name.trim())[0]?.toUpperCase() ?? "?");
+    return (v, B) => (d(), u(C, {
+      content: e.detail ? `${e.name}
+${e.detail}` : e.name,
+      side: "right",
+      disabled: !n(a)
+    }, {
+      default: o(() => [
+        t("div", {
+          "data-ui-sidebar-user": "",
+          "data-syno-pkg-land-ui": "",
+          tabindex: n(a) ? 0 : void 0
+        }, [
+          t("span", y, i(l.value), 1),
+          t("span", {
+            "data-ui-user-text": "",
+            class: f(n(a) ? "sr-only" : "flex min-w-0 flex-col")
+          }, [
+            p(b, null, {
+              default: o(() => [
+                t("span", A, i(e.name), 1),
+                e.detail ? (d(), _("span", E, i(e.detail), 1)) : h("", !0)
+              ]),
+              _: 1
+            })
+          ], 2)
+        ], 8, k)
+      ]),
+      _: 1
+    }, 8, ["content", "disabled"]));
+  }
+});
+export {
+  N as default
+};

package/dist/modules/components/app/app-sidebar/AppSidebarUser2.vue.js

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

package/dist/modules/components/app/app-sidebar/AppTopNav.vue.js

@@ -0,0 +1,113 @@
+import { defineComponent as K, useTemplateRef as E, useId as $, ref as j, computed as b, onMounted as D, watch as H, onBeforeUnmount as J, openBlock as v, createElementBlock as y, Fragment as q, renderList as B, normalizeClass as P, normalizeStyle as _, createBlock as C, createElementVNode as Q, nextTick as A } from "vue";
+import { useUiText as X } from "../../../i18n/text.js";
+import L from "./AppTopNavItems.vue.js";
+const Y = ["aria-label"], Z = ["aria-label", "aria-hidden", "inert"], ee = ["data-ui-overflowed", "aria-hidden", "inert"], te = ["aria-hidden", "inert"], le = /* @__PURE__ */ K({
+  __name: "AppTopNav",
+  props: {
+    groups: {},
+    modelValue: {},
+    label: {}
+  },
+  emits: ["select"],
+  setup(z, { emit: F }) {
+    const m = z, w = F, T = X(), f = E("root"), h = E("more"), V = $(), o = j(1 / 0), M = b(() => m.groups.flatMap((e) => e.items)), p = b(() => M.value.slice(o.value)), N = b(() => ({ key: V, label: T("More"), children: p.value })), W = b(() => {
+      let e = 0;
+      return m.groups.map((t) => {
+        const i = t.items.map((r) => ({ item: r, index: e++ }));
+        return { group: t, rows: i };
+      }).filter((t) => t.rows.length);
+    }), k = { position: "absolute", visibility: "hidden", pointerEvents: "none" };
+    let g;
+    const n = (e) => Number.parseFloat(e) || 0;
+    function x() {
+      const e = f.value;
+      if (!e || !h.value) return;
+      const t = getComputedStyle(e), i = e.clientWidth - n(t.paddingLeft) - n(t.paddingRight);
+      if (i <= 0) return;
+      const r = n(t.columnGap), s = [];
+      if (e.querySelectorAll("[data-nav-group]").forEach((a, c) => {
+        const l = getComputedStyle(a);
+        a.querySelectorAll("[data-ui-top-nav-item]").forEach((I, O) => {
+          const U = O === 0 ? n(l.marginLeft) + n(l.marginRight) + n(l.paddingLeft) + n(l.paddingRight) + n(l.borderLeftWidth) + n(l.borderRightWidth) + (c ? r : 0) : n(l.columnGap);
+          s.push(I.getBoundingClientRect().width + U);
+        });
+      }), !s.length || s.every((a) => a === 0)) return;
+      let d = s.length;
+      if (s.reduce((a, c) => a + c, 0) > i) {
+        const a = i - h.value.getBoundingClientRect().width - r;
+        let c = 0;
+        d = 0;
+        for (const l of s) {
+          if (c + l > a) break;
+          c += l, d++;
+        }
+      }
+      if (o.value === d) return;
+      const u = document.activeElement, S = u instanceof Element && [...e.querySelectorAll("[data-ui-top-nav-item]")].some((a, c) => c >= d && a.contains(u)), G = h.value.contains(u);
+      o.value = d, A(() => {
+        S ? h.value?.querySelector("button")?.focus() : G && !p.value.length && e.querySelector("[data-ui-top-nav-item] button")?.focus();
+      });
+    }
+    async function R() {
+      await A(), g?.disconnect(), f.value && (g?.observe(f.value), f.value.querySelectorAll("[data-ui-top-nav-item], [data-ui-top-nav-more-wrapper]").forEach((e) => g?.observe(e)), x());
+    }
+    return D(() => {
+      typeof ResizeObserver < "u" && (g = new ResizeObserver(x)), R();
+    }), H(() => m.groups, R, { deep: !0, flush: "post" }), J(() => g?.disconnect()), (e, t) => (v(), y("nav", {
+      ref_key: "root",
+      ref: f,
+      class: "relative flex h-full min-w-0 items-center gap-[var(--ui-space-1)] overflow-hidden px-2",
+      "aria-label": m.label,
+      "data-ui-navigation": "top",
+      "data-syno-pkg-land-ui": ""
+    }, [
+      (v(!0), y(q, null, B(W.value, ({ group: i, rows: r }, s) => (v(), y("div", {
+        key: s,
+        role: "group",
+        "aria-label": i.label,
+        "aria-hidden": r[0].index >= o.value || void 0,
+        inert: r[0].index >= o.value,
+        style: _(r[0].index >= o.value ? k : void 0),
+        "data-nav-group": "",
+        class: P(["flex shrink-0 items-center gap-[var(--ui-space-1)]", s > 0 && "ml-1 border-l border-[var(--ui-border-subtle)] pl-2"])
+      }, [
+        (v(!0), y(q, null, B(r, ({ item: d, index: u }) => (v(), y("div", {
+          key: d.key,
+          "data-ui-top-nav-item": "",
+          class: "inline-flex shrink-0",
+          "data-ui-overflowed": u >= o.value ? "true" : void 0,
+          style: _(u >= o.value ? k : void 0),
+          "aria-hidden": u >= o.value || void 0,
+          inert: u >= o.value
+        }, [
+          (v(), C(L, {
+            key: String(u >= o.value),
+            items: [d],
+            "model-value": m.modelValue,
+            onSelect: t[0] || (t[0] = (S) => w("select", S))
+          }, null, 8, ["items", "model-value"]))
+        ], 12, ee))), 128))
+      ], 14, Z))), 128)),
+      Q("div", {
+        ref_key: "more",
+        ref: h,
+        "data-ui-top-nav-more-wrapper": "",
+        class: "inline-flex shrink-0",
+        style: _(p.value.length ? void 0 : k),
+        "aria-hidden": !p.value.length || void 0,
+        inert: !p.value.length
+      }, [
+        (v(), C(L, {
+          key: String(!!p.value.length),
+          items: [N.value],
+          "model-value": m.modelValue,
+          overflow: "",
+          onSelect: t[1] || (t[1] = (i) => w("select", i))
+        }, null, 8, ["items", "model-value"]))
+      ], 12, te)
+    ], 8, Y));
+  }
+});
+export {
+  le as default
+};

package/dist/modules/components/app/app-sidebar/AppTopNav2.vue.js

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

package/dist/modules/components/app/app-sidebar/AppTopNavItems.vue.js

@@ -0,0 +1,108 @@
+import { defineComponent as C, openBlock as t, createElementBlock as l, Fragment as g, renderList as V, createBlock as u, withCtx as z, createElementVNode as v, normalizeClass as r, resolveDynamicComponent as y, createCommentVNode as d, toDisplayString as c, createVNode as B, unref as N } from "vue";
+import { ChevronDown as D } from "@lucide/vue";
+import S from "../../primitives/dropdown-menu/DropdownMenu.vue.js";
+const E = ["data-ui-top-nav-more", "data-ui-selected", "data-nav-toggle", "data-nav-item", "data-nav-contains-current", "disabled", "aria-current"], $ = { "data-nav-label": "" }, j = ["disabled", "aria-current", "onClick"], A = { "data-nav-label": "" }, k = "size-[var(--ui-icon-size,18px)] shrink-0", m = "inline-flex min-w-5 items-center justify-center rounded-full bg-[var(--ui-primary)] px-1 py-0.5 text-[length:var(--ui-font-size-sm)] font-semibold leading-none text-[var(--ui-primary-foreground)]", T = /* @__PURE__ */ C({
+  __name: "AppTopNavItems",
+  props: {
+    items: {},
+    modelValue: {},
+    overflow: { type: Boolean }
+  },
+  emits: ["select"],
+  setup(w, { emit: x }) {
+    const n = w, p = x, s = (a, o) => !!o && !!a.children?.some((e) => e.key === o || s(e, o));
+    function b(a) {
+      const o = (a.children ?? []).map((e) => ({
+        key: e.key,
+        label: e.label,
+        icon: e.icon,
+        disabled: e.disabled,
+        children: e.children?.length ? b(e) : void 0
+      }));
+      return a.selectable ? [{ key: a.key, label: a.label, icon: a.icon, disabled: a.disabled }, ...o] : o;
+    }
+    function f(a, o) {
+      for (const e of a) {
+        if (e.key === o) return e;
+        const i = e.children && f(e.children, o);
+        if (i) return i;
+      }
+    }
+    function _(a, o) {
+      const e = f([a], o);
+      e && !e.disabled && p("select", e);
+    }
+    const h = (a) => [
+      "inline-flex h-[var(--ui-nav-row-height,var(--ui-nav-row-height-default,42px))] shrink-0 items-center gap-[var(--ui-space-2)] whitespace-nowrap rounded-[var(--ui-radius-nav)] border-0 px-[var(--ui-space-3)] text-[length:var(--ui-font-size-lg)] outline-none transition-colors focus-visible:shadow-[var(--ui-shadow-focus)] disabled:opacity-40",
+      a ? "bg-[var(--ui-surface-selected)] text-[var(--ui-text)]" : "bg-transparent text-[var(--ui-text)] hover:bg-[var(--ui-surface-hover)]"
+    ];
+    return (a, o) => (t(!0), l(g, null, V(n.items, (e) => (t(), l(g, {
+      key: e.key
+    }, [
+      e.children?.length || n.overflow ? (t(), u(S, {
+        key: 0,
+        items: b(e),
+        "data-ui-top-nav-overflow-menu": n.overflow ? "" : void 0,
+        onSelect: (i) => _(e, i)
+      }, {
+        trigger: z(() => [
+          v("button", {
+            type: "button",
+            "data-ui-top-nav-more": n.overflow ? "" : void 0,
+            "data-ui-selected": n.overflow && s(e, n.modelValue) ? "true" : void 0,
+            "data-nav-branch": "",
+            "data-ui-hit-row": "inline",
+            "data-nav-toggle": e.key,
+            "data-nav-item": e.selectable ? "" : void 0,
+            "data-nav-contains-current": s(e, n.modelValue) || void 0,
+            disabled: e.disabled,
+            "aria-current": !n.overflow && e.selectable && n.modelValue === e.key ? "page" : void 0,
+            class: r(h(!n.overflow && n.modelValue === e.key || s(e, n.modelValue)))
+          }, [
+            e.icon ? (t(), u(y(e.icon), {
+              key: 0,
+              class: r(k),
+              "aria-hidden": "true"
+            })) : d("", !0),
+            v("span", $, c(e.label), 1),
+            e.badge !== void 0 ? (t(), l("span", {
+              key: 1,
+              "data-nav-badge": "",
+              class: r(m)
+            }, c(e.badge), 1)) : d("", !0),
+            B(N(D), {
+              "data-nav-chevron": "",
+              class: "size-3.5 shrink-0 text-[var(--ui-text-muted)]",
+              "aria-hidden": "true"
+            })
+          ], 10, E)
+        ]),
+        _: 2
+      }, 1032, ["items", "data-ui-top-nav-overflow-menu", "onSelect"])) : (t(), l("button", {
+        key: 1,
+        type: "button",
+        "data-nav-item": "",
+        "data-ui-hit-row": "inline",
+        disabled: e.disabled,
+        "aria-current": n.modelValue === e.key ? "page" : void 0,
+        class: r(h(n.modelValue === e.key)),
+        onClick: (i) => p("select", e)
+      }, [
+        e.icon ? (t(), u(y(e.icon), {
+          key: 0,
+          class: r(k),
+          "aria-hidden": "true"
+        })) : d("", !0),
+        v("span", A, c(e.label), 1),
+        e.badge !== void 0 ? (t(), l("span", {
+          key: 1,
+          "data-nav-badge": "",
+          class: r(m)
+        }, c(e.badge), 1)) : d("", !0)
+      ], 10, j))
+    ], 64))), 128));
+  }
+});
+export {
+  T as default
+};

package/dist/modules/components/app/app-sidebar/AppTopNavItems2.vue.js

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