@owocow/saber-ui 0.1.11 → 0.1.13

package/dist/SaberAppLayout.vue_vue_type_script_setup_true_lang-R7F5K7kj.js

@@ -0,0 +1,418 @@
+import Oe from "@nuxt/ui/components/Button.vue";
+import $e from "@nuxt/ui/components/Drawer.vue";
+import { getCurrentInstance as se, getCurrentScope as Be, hasInjectionContext as ue, inject as De, watch as z, shallowRef as T, watchEffect as Me, toValue as M, computed as u, onMounted as Le, unref as Ue, defineComponent as je, useSlots as Fe, useModel as te, ref as ae, useId as Ie, nextTick as ze, openBlock as x, createElementBlock as S, normalizeStyle as A, normalizeClass as d, renderSlot as h, normalizeProps as $, guardReactiveProps as B, Fragment as H, createCommentVNode as D, createVNode as G, withCtx as ne, createElementVNode as f, toDisplayString as oe, createBlock as Te, mergeModels as le } from "vue";
+import { tv as R } from "tailwind-variants";
+import { providePageHeader as Ne } from "./composables/use-page-header.mjs";
+import { _ as Ee } from "./SaberNavigationSearch.vue_vue_type_script_setup_true_lang-Bj96kMla.js";
+const V = /* @__PURE__ */ new WeakMap(), Pe = /* @__NO_SIDE_EFFECTS__ */ (...t) => {
+  var r;
+  const e = t[0], l = (r = se()) === null || r === void 0 ? void 0 : r.proxy, n = l ?? Be();
+  if (n == null && !ue()) throw new Error("injectLocal must be called in setup");
+  return n && V.has(n) && e in V.get(n) ? V.get(n)[e] : De(...t);
+}, Ae = typeof window < "u" && typeof document < "u";
+typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
+const He = Object.prototype.toString, Ge = (t) => He.call(t) === "[object Object]";
+function ie(t) {
+  return t.endsWith("rem") ? Number.parseFloat(t) * 16 : Number.parseFloat(t);
+}
+function K(t) {
+  return Array.isArray(t) ? t : [t];
+}
+function Re(t, r, e) {
+  return z(t, r, {
+    ...e,
+    immediate: !0
+  });
+}
+const de = Ae ? window : void 0;
+function Ve(t) {
+  var r;
+  const e = M(t);
+  return (r = e == null ? void 0 : e.$el) !== null && r !== void 0 ? r : e;
+}
+function Ke(...t) {
+  const r = (l, n, c, o) => (l.addEventListener(n, c, o), () => l.removeEventListener(n, c, o)), e = u(() => {
+    const l = K(M(t[0])).filter((n) => n != null);
+    return l.every((n) => typeof n != "string") ? l : void 0;
+  });
+  return Re(() => {
+    var l, n;
+    return [
+      (l = (n = e.value) === null || n === void 0 ? void 0 : n.map((c) => Ve(c))) !== null && l !== void 0 ? l : [de].filter((c) => c != null),
+      K(M(e.value ? t[1] : t[0])),
+      K(Ue(e.value ? t[2] : t[1])),
+      M(e.value ? t[3] : t[2])
+    ];
+  }, ([l, n, c, o], b, L) => {
+    if (!(l != null && l.length) || !(n != null && n.length) || !(c != null && c.length)) return;
+    const k = Ge(o) ? { ...o } : o, p = l.flatMap((g) => n.flatMap((i) => c.map((w) => r(g, i, w, k))));
+    L(() => {
+      p.forEach((g) => g());
+    });
+  }, { flush: "post" });
+}
+// @__NO_SIDE_EFFECTS__
+function Qe() {
+  const t = T(!1), r = se();
+  return r && Le(() => {
+    t.value = !0;
+  }, r), t;
+}
+// @__NO_SIDE_EFFECTS__
+function Je(t) {
+  const r = /* @__PURE__ */ Qe();
+  return u(() => (r.value, !!t()));
+}
+const Xe = Symbol("vueuse-ssr-width");
+// @__NO_SIDE_EFFECTS__
+function Ye() {
+  const t = ue() ? /* @__PURE__ */ Pe(Xe, null) : null;
+  return typeof t == "number" ? t : void 0;
+}
+function re(t, r = {}) {
+  const { window: e = de, ssrWidth: l = /* @__PURE__ */ Ye() } = r, n = /* @__PURE__ */ Je(() => e && "matchMedia" in e && typeof e.matchMedia == "function"), c = T(typeof l == "number"), o = T(), b = T(!1), L = (k) => {
+    b.value = k.matches;
+  };
+  return Me(() => {
+    if (c.value) {
+      c.value = !n.value;
+      const k = M(t).split(",");
+      b.value = k.some((p) => {
+        const g = p.includes("not all"), i = p.match(/\(\s*min-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/), w = p.match(/\(\s*max-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/);
+        let y = !!(i || w);
+        return i && y && (y = l >= ie(i[1])), w && y && (y = l <= ie(w[1])), g ? !y : y;
+      });
+      return;
+    }
+    n.value && (o.value = e.matchMedia(M(t)), b.value = o.value.matches);
+  }), Ke(o, "change", L, { passive: !0 }), u(() => b.value);
+}
+const nt = /* @__PURE__ */ je({
+  name: "SaberAppLayout",
+  __name: "SaberAppLayout",
+  props: /* @__PURE__ */ le({
+    title: { default: void 0 },
+    description: { default: void 0 },
+    maxWidth: { type: [Number, String, Boolean], default: void 0 },
+    navigationKey: { default: void 0 },
+    sidebarWidth: { default: 240 },
+    phoneBreakpoint: { default: 768 },
+    padBreakpoint: { default: 1024 },
+    searchGroups: { default: () => [] },
+    searchShortcut: { default: "meta_k" },
+    searchLabel: { default: "搜索" },
+    menuOpenLabel: { default: "菜单" },
+    menuCloseLabel: { default: "关闭" },
+    menuOpenIcon: { default: "solar:hamburger-menu-linear" },
+    menuCloseIcon: { default: "solar:close-circle-linear" },
+    ui: { default: () => ({}) }
+  }, {
+    drawerOpen: { type: Boolean, default: !1 },
+    drawerOpenModifiers: {},
+    searchOpen: { type: Boolean, default: !1 },
+    searchOpenModifiers: {}
+  }),
+  emits: /* @__PURE__ */ le(["searchSelect"], ["update:drawerOpen", "update:searchOpen"]),
+  setup(t, { emit: r }) {
+    const e = t, l = r, n = Fe(), c = R({
+      slots: {
+        root: "flex h-dvh items-start gap-2 overflow-hidden p-1.5 text-default",
+        desktopSidebar: "sticky top-0 h-full shrink-0 self-start",
+        main: "relative flex h-full min-h-0 min-w-0 flex-1 flex-col overflow-y-auto rounded-lg border border-default bg-default",
+        header: "sticky top-0 z-10 mx-auto flex w-full shrink-0 items-center justify-between gap-4 overflow-hidden bg-default/70 backdrop-blur-md",
+        headerHeading: "min-w-0",
+        title: "truncate text-xl",
+        description: "mt-1 text-sm text-muted",
+        headerSuffix: "flex shrink-0 items-center gap-2",
+        pageHeaderSuffixTarget: "contents",
+        content: "mx-auto w-full flex-1",
+        phoneDrawerContent: "h-full min-h-0 w-full min-w-0 p-2",
+        phoneSidebarFrame: "h-full min-h-0 w-full",
+        padDrawerContent: "h-full min-h-0 w-full min-w-0 p-2",
+        padSidebarFrame: "mx-auto h-full min-h-0",
+        overlay: "fixed inset-0 z-40 border-0 bg-black/35 p-0 backdrop-blur-[1px]",
+        dock: "fixed bottom-[calc(0.75rem+env(safe-area-inset-bottom))] left-1/2 z-60 flex w-42 -translate-x-1/2 items-center gap-1 rounded-2xl border border-default bg-default/95 p-1 shadow-lg backdrop-blur-md"
+      },
+      variants: {
+        mode: {
+          phone: {
+            root: "p-1.5",
+            header: "p-4",
+            title: "text-xl",
+            content: "px-3 pb-[calc(6rem+env(safe-area-inset-bottom))]"
+          },
+          pad: {
+            root: "p-1.5",
+            header: "p-4",
+            title: "text-2xl",
+            content: "px-4 pb-[calc(6rem+env(safe-area-inset-bottom))]"
+          },
+          desktop: {
+            root: "p-2",
+            header: "px-6 py-4.5 min-[1441px]:px-8 min-[1441px]:py-6",
+            title: "text-2xl",
+            content: "px-6 pb-0 min-[1441px]:px-8"
+          }
+        }
+      }
+    }), o = te(t, "drawerOpen"), b = te(t, "searchOpen"), L = re(`(max-width: ${e.phoneBreakpoint}px)`), k = re(`(max-width: ${e.padBreakpoint}px)`), p = u(() => L.value ? "phone" : k.value ? "pad" : "desktop"), g = u(() => p.value !== "desktop"), i = u(() => c({ mode: p.value })), w = ae(null), y = Ne(w), N = u(() => y.title ?? e.title), E = u(() => y.description ?? e.description), Q = u(() => {
+      if (typeof e.maxWidth == "number")
+        return Number.isFinite(e.maxWidth) && e.maxWidth > 0 ? `${e.maxWidth}px` : void 0;
+      if (!(e.maxWidth === "full" || e.maxWidth === !1 || e.maxWidth === void 0))
+        return e.maxWidth.trim() || void 0;
+    }), ce = u(
+      () => e.maxWidth === void 0 || typeof e.maxWidth == "number" && (!Number.isFinite(e.maxWidth) || e.maxWidth <= 0)
+    ), J = u(
+      () => Q.value ? { maxWidth: Q.value } : void 0
+    ), X = u(() => ce.value ? "min-[1921px]:max-w-[1620px]" : void 0), pe = u(() => typeof e.sidebarWidth == "number" ? Number.isFinite(e.sidebarWidth) && e.sidebarWidth > 0 ? `${e.sidebarWidth}px` : "240px" : e.sidebarWidth.trim() || "240px"), fe = u(() => ({ "--saber-app-layout-sidebar-width": pe.value })), me = { width: "var(--saber-app-layout-sidebar-width)" }, ve = { width: "var(--saber-app-layout-sidebar-width)" }, P = `saber-app-layout-navigation-${Ie().replaceAll(":", "")}`, Y = ae(null);
+    function F(a) {
+      return typeof a == "object" && a !== null && !Array.isArray(a);
+    }
+    function he(a) {
+      return F(a) && Object.values(a).every((s) => typeof s == "boolean");
+    }
+    function be(a) {
+      return typeof a == "function";
+    }
+    function ye(a, s) {
+      return s === void 0 ? a : be(s) ? (m) => s(R({ base: m })({ class: a })) : R({ base: a })({ class: s });
+    }
+    function U(a, s) {
+      const m = {}, O = /* @__PURE__ */ new Set([...Object.keys(a), ...Object.keys(s ?? {})]);
+      for (const v of O) {
+        const j = a[v], I = s == null ? void 0 : s[v], _ = F(I) && !he(I);
+        if (F(j) || j === void 0 && _)
+          m[v] = U(
+            F(j) ? j : {},
+            _ ? I : void 0
+          );
+        else {
+          const ee = ye(j, I);
+          ee !== void 0 && (m[v] = ee);
+        }
+      }
+      return m;
+    }
+    const xe = {
+      root: "mb-0 min-w-0 flex-1",
+      button: {
+        base: "h-10 w-20 rounded-full border-0 bg-transparent px-3 shadow-none",
+        trailing: "hidden",
+        label: "text-(--ui-text) text-sm",
+        leadingIcon: "text-(--ui-text)"
+      }
+    }, ge = {
+      base: "h-10 shrink-0 rounded-full px-3 font-normal"
+    }, we = u(
+      () => U(
+        { content: "z-50 h-[calc(100dvh-4rem)] max-h-none rounded-t-lg bg-default" },
+        e.ui.phoneDrawer
+      )
+    ), Se = u(
+      () => U(
+        { content: "z-50 h-dvh max-w-none rounded-r-lg bg-default" },
+        e.ui.padDrawer
+      )
+    ), ke = u(
+      () => U(xe, e.ui.search)
+    ), We = u(
+      () => U(ge, e.ui.menuButton)
+    );
+    function Z() {
+      g.value && (o.value = !0);
+    }
+    function W() {
+      o.value = !1;
+    }
+    function q() {
+      o.value ? W() : Z();
+    }
+    function Ce(a) {
+      l("searchSelect", a), b.value = !1, W();
+    }
+    z(() => e.navigationKey, W), z(p, W), z(o, async (a, s) => {
+      var m, O;
+      a || !s || (await ze(), (O = (m = Y.value) == null ? void 0 : m.$el) == null || O.focus());
+    });
+    const C = u(() => ({
+      mode: p.value,
+      drawerOpen: o.value,
+      openDrawer: Z,
+      closeDrawer: W,
+      toggleDrawer: q
+    }));
+    return (a, s) => {
+      const m = $e, O = Oe;
+      return x(), S("div", {
+        "data-testid": "app-layout",
+        class: d(i.value.root({ class: e.ui.root })),
+        style: A(fe.value)
+      }, [
+        p.value === "desktop" ? (x(), S("aside", {
+          key: 0,
+          "data-testid": "desktop-sidebar",
+          class: d(i.value.desktopSidebar({ class: e.ui.desktopSidebar })),
+          style: me
+        }, [
+          h(a.$slots, "sidebar", $(B(C.value)))
+        ], 2)) : p.value === "phone" ? (x(), S(H, { key: 1 }, [
+          o.value ? (x(), S("button", {
+            key: 0,
+            "data-testid": "compact-nav-overlay",
+            type: "button",
+            tabindex: "-1",
+            "aria-label": "关闭导航",
+            class: d(i.value.overlay({ class: e.ui.overlay })),
+            onClick: W
+          }, null, 2)) : D("", !0),
+          G(m, {
+            open: o.value,
+            "onUpdate:open": s[0] || (s[0] = (v) => o.value = v),
+            direction: "bottom",
+            modal: !1,
+            overlay: !1,
+            handle: !0,
+            title: t.menuOpenLabel,
+            ui: we.value
+          }, {
+            content: ne(() => [
+              f("div", {
+                id: P,
+                "data-testid": "phone-drawer-content",
+                class: d(i.value.phoneDrawerContent({ class: e.ui.phoneDrawerContent }))
+              }, [
+                f("div", {
+                  "data-testid": "phone-sidebar-frame",
+                  class: d(i.value.phoneSidebarFrame({ class: e.ui.phoneSidebarFrame }))
+                }, [
+                  n["phone-sidebar"] ? h(a.$slots, "phone-sidebar", $(B(C.value)), void 0, void 0, 0) : h(a.$slots, "sidebar", $(B(C.value)), void 0, void 0, 1)
+                ], 2)
+              ], 2)
+            ]),
+            _: 3
+          }, 8, ["open", "title", "ui"])
+        ], 64)) : (x(), S(H, { key: 2 }, [
+          o.value ? (x(), S("button", {
+            key: 0,
+            "data-testid": "compact-nav-overlay",
+            type: "button",
+            tabindex: "-1",
+            "aria-label": "关闭导航",
+            class: d(i.value.overlay({ class: e.ui.overlay })),
+            onClick: W
+          }, null, 2)) : D("", !0),
+          G(m, {
+            open: o.value,
+            "onUpdate:open": s[1] || (s[1] = (v) => o.value = v),
+            direction: "left",
+            modal: !1,
+            overlay: !1,
+            handle: !1,
+            title: t.menuOpenLabel,
+            ui: Se.value
+          }, {
+            content: ne(() => [
+              f("div", {
+                id: P,
+                "data-testid": "pad-drawer-content",
+                class: d(i.value.padDrawerContent({ class: e.ui.padDrawerContent }))
+              }, [
+                f("div", {
+                  "data-testid": "pad-sidebar-frame",
+                  class: d(i.value.padSidebarFrame({ class: e.ui.padSidebarFrame })),
+                  style: ve
+                }, [
+                  n["pad-sidebar"] ? h(a.$slots, "pad-sidebar", $(B(C.value)), void 0, void 0, 0) : h(a.$slots, "sidebar", $(B(C.value)), void 0, void 0, 1)
+                ], 2)
+              ], 2)
+            ]),
+            _: 3
+          }, 8, ["open", "title", "ui"])
+        ], 64)),
+        f("main", {
+          "data-testid": "app-layout-main",
+          class: d(i.value.main({ class: e.ui.main }))
+        }, [
+          f("header", {
+            "data-testid": "app-layout-header",
+            class: d([i.value.header({ class: e.ui.header }), X.value]),
+            style: A(J.value)
+          }, [
+            f("div", {
+              "data-testid": "app-layout-header-heading",
+              class: d(i.value.headerHeading({ class: e.ui.headerHeading }))
+            }, [
+              N.value ? h(a.$slots, "header-title", { title: N.value }, () => [
+                f("h1", {
+                  "data-testid": "app-layout-title",
+                  class: d(i.value.title({ class: e.ui.title }))
+                }, oe(N.value), 3)
+              ], void 0, 0) : D("", !0),
+              E.value ? h(a.$slots, "header-description", { description: E.value }, () => [
+                f("p", {
+                  "data-testid": "app-layout-description",
+                  class: d(i.value.description({ class: e.ui.description }))
+                }, oe(E.value), 3)
+              ], void 0, 1) : D("", !0)
+            ], 2),
+            f("div", {
+              "data-testid": "app-layout-header-suffix",
+              class: d(i.value.headerSuffix({ class: e.ui.headerSuffix }))
+            }, [
+              h(a.$slots, "header-suffix"),
+              f("div", {
+                ref_key: "suffixTarget",
+                ref: w,
+                "data-testid": "app-layout-suffix-target",
+                class: d(i.value.pageHeaderSuffixTarget({ class: e.ui.pageHeaderSuffixTarget }))
+              }, null, 2)
+            ], 2)
+          ], 6),
+          f("div", {
+            "data-testid": "app-layout-content",
+            class: d([i.value.content({ class: e.ui.content }), X.value]),
+            style: A(J.value)
+          }, [
+            h(a.$slots, "default")
+          ], 6)
+        ], 2),
+        g.value ? (x(), S("div", {
+          key: 3,
+          "data-testid": "compact-nav-dock",
+          class: d(i.value.dock({ class: e.ui.dock }))
+        }, [
+          n.dock ? h(a.$slots, "dock", $(B(C.value)), void 0, void 0, 0) : (x(), S(H, { key: 1 }, [
+            t.searchGroups.length ? (x(), Te(Ee, {
+              key: 0,
+              open: b.value,
+              "onUpdate:open": s[2] || (s[2] = (v) => b.value = v),
+              groups: t.searchGroups,
+              label: t.searchLabel,
+              shortcut: t.searchShortcut,
+              kbds: [],
+              ui: ke.value,
+              onSelect: Ce
+            }, null, 8, ["open", "groups", "label", "shortcut", "ui"])) : D("", !0),
+            G(O, {
+              ref_key: "menuButton",
+              ref: Y,
+              "data-testid": "compact-menu-button",
+              color: "neutral",
+              variant: "ghost",
+              icon: o.value ? t.menuCloseIcon : t.menuOpenIcon,
+              label: o.value ? t.menuCloseLabel : t.menuOpenLabel,
+              "aria-controls": P,
+              "aria-expanded": o.value,
+              "aria-haspopup": "dialog",
+              ui: We.value,
+              onClick: q
+            }, null, 8, ["icon", "label", "aria-expanded", "ui"])
+          ], 64))
+        ], 2)) : D("", !0)
+      ], 6);
+    };
+  }
+});
+export {
+  nt as _
+};

package/dist/SaberAppSidebar.vue_vue_type_script_setup_true_lang-Cwuj9VNi.js

@@ -0,0 +1,263 @@
+import oe from "@nuxt/ui/components/Button.vue";
+import ne from "@nuxt/ui/runtime/vue/components/Icon.vue";
+import { defineComponent as ie, useModel as ce, ref as re, computed as X, openBlock as c, createElementBlock as x, normalizeClass as s, unref as l, createElementVNode as h, renderSlot as T, createBlock as w, withCtx as $, normalizeProps as ue, guardReactiveProps as de, createCommentVNode as _, createVNode as G, Transition as me, toDisplayString as K, Fragment as H, renderList as N, mergeModels as Y } from "vue";
+import { tv as ve } from "tailwind-variants";
+import { _ as fe } from "./SaberNavigationSearch.vue_vue_type_script_setup_true_lang-Bj96kMla.js";
+const xe = /* @__PURE__ */ ie({
+  name: "SaberAppSidebar",
+  __name: "SaberAppSidebar",
+  props: /* @__PURE__ */ Y({
+    sections: {},
+    searchGroups: { default: () => [] },
+    activeKey: {},
+    shortcut: { default: "meta_k" },
+    ui: {}
+  }, {
+    activeSection: { default: void 0 },
+    activeSectionModifiers: {}
+  }),
+  emits: /* @__PURE__ */ Y(["select", "section-select"], ["update:activeSection"]),
+  setup(V, { emit: Z }) {
+    const e = V, A = Z, E = ce(V, "activeSection"), F = re(!1), B = X(() => e.sections.find((t) => t.key === E.value)), a = ve({
+      slots: {
+        root: "flex h-full min-h-0 flex-col overflow-hidden",
+        header: "shrink-0",
+        logo: "flex h-11 items-center mb-2",
+        viewport: "min-h-0 flex-1 overflow-y-auto",
+        panel: "flex min-h-full flex-col gap-1.5",
+        sectionList: "flex flex-col",
+        rootFooter: "shrink-0",
+        group: "flex flex-col",
+        groupLabel: "px-2 py-2 text-[11px] uppercase tracking-wider text-muted/70",
+        childList: "flex flex-col",
+        nestedHeader: "flex items-center",
+        footer: "shrink-0",
+        sectionItem: "flex w-full items-center rounded-md px-2 py-2 text-sm font-normal mb-0.5 gap-2 text-left transition",
+        sectionItemLeadingIcon: "size-4.5 shrink-0",
+        sectionItemLabel: "min-w-0 flex-1 truncate text-left",
+        sectionItemTrailingIcon: "size-4 shrink-0",
+        childItem: "flex w-full items-center rounded-md px-2 py-2 font-normal text-sm mb-0.5 gap-2 text-left transition",
+        childItemLeadingIcon: "size-4 shrink-0",
+        childItemLabel: "min-w-0 flex-1 truncate text-left",
+        backButton: "flex w-full items-center rounded-md h-9 px-2 gap-2 text-left transition ",
+        backButtonIcon: "size-4 shrink-0",
+        backButtonLabel: "truncate text-sm font-normal flex-1 text-center"
+      }
+    })(), z = X(() => {
+      var t, o, i, r, u, d, m, v, f, p, b, S;
+      return {
+        enterActive: ((o = (t = e.ui) == null ? void 0 : t.transition) == null ? void 0 : o.enterActive) ?? "transition duration-100 ease-out",
+        leaveActive: ((r = (i = e.ui) == null ? void 0 : i.transition) == null ? void 0 : r.leaveActive) ?? "transition duration-100 ease-out pointer-events-none",
+        enterFrom: F.value ? ((d = (u = e.ui) == null ? void 0 : u.transition) == null ? void 0 : d.backwardEnterFrom) ?? "-translate-x-2 opacity-0 blur-[2px]" : ((v = (m = e.ui) == null ? void 0 : m.transition) == null ? void 0 : v.forwardEnterFrom) ?? "translate-x-2 opacity-0 blur-[2px]",
+        leaveTo: F.value ? ((p = (f = e.ui) == null ? void 0 : f.transition) == null ? void 0 : p.backwardLeaveTo) ?? "translate-x-2 opacity-0 blur-[2px]" : ((S = (b = e.ui) == null ? void 0 : b.transition) == null ? void 0 : S.forwardLeaveTo) ?? "-translate-x-2 opacity-0 blur-[2px]"
+      };
+    });
+    function M(t) {
+      return t.groups.flatMap((o) => o.items);
+    }
+    function P(t) {
+      return M(t).some((o) => o.key === e.activeKey);
+    }
+    function ee(t) {
+      var i, r, u, d, m, v, f, p;
+      const o = P(t) ? ["font-medium", (r = (i = e.ui) == null ? void 0 : i.sectionItem) == null ? void 0 : r.active] : ["text-default", (d = (u = e.ui) == null ? void 0 : u.sectionItem) == null ? void 0 : d.inactive];
+      return a.sectionItem({ class: [(v = (m = e.ui) == null ? void 0 : m.sectionItem) == null ? void 0 : v.base, o, (p = (f = e.ui) == null ? void 0 : f.sectionItem) == null ? void 0 : p.hover] });
+    }
+    function te(t) {
+      var i, r, u, d, m, v, f, p;
+      const o = t.key === e.activeKey ? ["font-medium", (r = (i = e.ui) == null ? void 0 : i.childItem) == null ? void 0 : r.active] : ["text-default", (d = (u = e.ui) == null ? void 0 : u.childItem) == null ? void 0 : d.inactive];
+      return a.childItem({ class: [(v = (m = e.ui) == null ? void 0 : m.childItem) == null ? void 0 : v.base, o, (p = (f = e.ui) == null ? void 0 : f.childItem) == null ? void 0 : p.hover] });
+    }
+    function ae(t) {
+      var i;
+      const o = M(t);
+      if (o.length === 1) {
+        A("select", {
+          source: "direct",
+          item: o[0],
+          sectionKey: t.key,
+          groupKey: (i = t.groups[0]) == null ? void 0 : i.key
+        });
+        return;
+      }
+      F.value = !1, E.value = t.key, A("section-select", t);
+    }
+    function se() {
+      F.value = !0, E.value = void 0;
+    }
+    function le(t, o, i) {
+      A("select", { source: "item", item: t, sectionKey: o, groupKey: i });
+    }
+    return (t, o) => {
+      var u, d, m, v, f, p;
+      const i = ne, r = oe;
+      return c(), x("aside", {
+        class: s(l(a).root({ class: (u = e.ui) == null ? void 0 : u.root }))
+      }, [
+        h("header", {
+          class: s(l(a).header({ class: (d = e.ui) == null ? void 0 : d.header }))
+        }, [
+          h("div", {
+            class: s(l(a).logo({ class: (m = e.ui) == null ? void 0 : m.logo }))
+          }, [
+            T(t.$slots, "logo")
+          ], 2),
+          e.searchGroups.length ? (c(), w(fe, {
+            key: 0,
+            groups: e.searchGroups,
+            shortcut: e.shortcut,
+            ui: (v = e.ui) == null ? void 0 : v.search,
+            onSelect: o[0] || (o[0] = (b) => A("select", b))
+          }, {
+            empty: $((b) => [
+              T(t.$slots, "search-empty", ue(de(b)))
+            ]),
+            _: 3
+          }, 8, ["groups", "shortcut", "ui"])) : _("", !0)
+        ], 2),
+        h("nav", {
+          class: s(l(a).viewport({ class: (f = e.ui) == null ? void 0 : f.viewport }))
+        }, [
+          G(me, {
+            mode: "out-in",
+            "enter-active-class": z.value.enterActive,
+            "leave-active-class": z.value.leaveActive,
+            "enter-from-class": z.value.enterFrom,
+            "leave-to-class": z.value.leaveTo
+          }, {
+            default: $(() => {
+              var b, S, U, D, R, j, q, J, O;
+              return [
+                B.value ? (c(), x("div", {
+                  key: B.value.key,
+                  class: s(l(a).panel({ class: (b = e.ui) == null ? void 0 : b.panel }))
+                }, [
+                  h("div", {
+                    class: s(l(a).nestedHeader({ class: (S = e.ui) == null ? void 0 : S.nestedHeader }))
+                  }, [
+                    G(r, {
+                      "data-testid": "back-button",
+                      color: "neutral",
+                      variant: "ghost",
+                      class: s(l(a).backButton({ class: [(D = (U = e.ui) == null ? void 0 : U.backButton) == null ? void 0 : D.base, (j = (R = e.ui) == null ? void 0 : R.backButton) == null ? void 0 : j.hover] })),
+                      onClick: se
+                    }, {
+                      default: $(() => {
+                        var n, y, I, g;
+                        return [
+                          G(i, {
+                            name: "solar:alt-arrow-left-linear",
+                            class: s(l(a).backButtonIcon({ class: (y = (n = e.ui) == null ? void 0 : n.backButton) == null ? void 0 : y.icon }))
+                          }, null, 8, ["class"]),
+                          h("span", {
+                            class: s(l(a).backButtonLabel({ class: (g = (I = e.ui) == null ? void 0 : I.backButton) == null ? void 0 : g.label }))
+                          }, K(B.value.label), 3),
+                          o[1] || (o[1] = h("span", { class: "size-4.5 shrink-0" }, null, -1))
+                        ];
+                      }),
+                      _: 1
+                    }, 8, ["class"])
+                  ], 2),
+                  (c(!0), x(H, null, N(B.value.groups, (n) => {
+                    var y, I, g;
+                    return c(), x("div", {
+                      key: n.key,
+                      class: s(l(a).group({ class: (y = e.ui) == null ? void 0 : y.group }))
+                    }, [
+                      n.label ? (c(), x("p", {
+                        key: 0,
+                        class: s(l(a).groupLabel({ class: (I = e.ui) == null ? void 0 : I.groupLabel }))
+                      }, K(n.label), 3)) : _("", !0),
+                      h("div", {
+                        class: s(l(a).childList({ class: (g = e.ui) == null ? void 0 : g.childList }))
+                      }, [
+                        (c(!0), x(H, null, N(n.items, (k) => (c(), w(r, {
+                          key: k.key,
+                          "data-testid": `item-${k.key}`,
+                          "data-active": k.key === e.activeKey,
+                          color: "neutral",
+                          variant: "ghost",
+                          class: s(te(k)),
+                          onClick: (L) => le(k, B.value.key, n.key)
+                        }, {
+                          default: $(() => {
+                            var L, C, Q, W;
+                            return [
+                              k.icon ? (c(), w(i, {
+                                key: 0,
+                                name: k.icon,
+                                class: s(l(a).childItemLeadingIcon({ class: (C = (L = e.ui) == null ? void 0 : L.childItem) == null ? void 0 : C.leadingIcon }))
+                              }, null, 8, ["name", "class"])) : _("", !0),
+                              h("span", {
+                                class: s(l(a).childItemLabel({ class: (W = (Q = e.ui) == null ? void 0 : Q.childItem) == null ? void 0 : W.label }))
+                              }, K(k.label), 3)
+                            ];
+                          }),
+                          _: 2
+                        }, 1032, ["data-testid", "data-active", "class", "onClick"]))), 128))
+                      ], 2)
+                    ], 2);
+                  }), 128))
+                ], 2)) : (c(), x("div", {
+                  key: "root",
+                  class: s(l(a).panel({ class: (q = e.ui) == null ? void 0 : q.panel }))
+                }, [
+                  h("div", {
+                    class: s(l(a).sectionList({ class: (J = e.ui) == null ? void 0 : J.sectionList }))
+                  }, [
+                    (c(!0), x(H, null, N(e.sections, (n) => (c(), w(r, {
+                      key: n.key,
+                      "data-testid": `section-${n.key}`,
+                      "data-section": n.key,
+                      "data-active": P(n),
+                      color: "neutral",
+                      variant: "ghost",
+                      class: s(ee(n)),
+                      onClick: (y) => ae(n)
+                    }, {
+                      default: $(() => {
+                        var y, I, g, k, L, C;
+                        return [
+                          n.icon ? (c(), w(i, {
+                            key: 0,
+                            name: n.icon,
+                            class: s(l(a).sectionItemLeadingIcon({ class: (I = (y = e.ui) == null ? void 0 : y.sectionItem) == null ? void 0 : I.leadingIcon }))
+                          }, null, 8, ["name", "class"])) : _("", !0),
+                          h("span", {
+                            class: s(l(a).sectionItemLabel({ class: (k = (g = e.ui) == null ? void 0 : g.sectionItem) == null ? void 0 : k.label }))
+                          }, K(n.label), 3),
+                          M(n).length > 1 ? (c(), w(i, {
+                            key: 1,
+                            name: "solar:alt-arrow-right-linear",
+                            class: s(l(a).sectionItemTrailingIcon({ class: (C = (L = e.ui) == null ? void 0 : L.sectionItem) == null ? void 0 : C.trailingIcon }))
+                          }, null, 8, ["class"])) : _("", !0)
+                        ];
+                      }),
+                      _: 2
+                    }, 1032, ["data-testid", "data-section", "data-active", "class", "onClick"]))), 128))
+                  ], 2),
+                  t.$slots["root-footer"] ? (c(), x("div", {
+                    key: 0,
+                    "data-testid": "root-footer",
+                    class: s(l(a).rootFooter({ class: (O = e.ui) == null ? void 0 : O.rootFooter }))
+                  }, [
+                    T(t.$slots, "root-footer")
+                  ], 2)) : _("", !0)
+                ], 2))
+              ];
+            }),
+            _: 3
+          }, 8, ["enter-active-class", "leave-active-class", "enter-from-class", "leave-to-class"])
+        ], 2),
+        h("footer", {
+          class: s(l(a).footer({ class: (p = e.ui) == null ? void 0 : p.footer }))
+        }, [
+          T(t.$slots, "footer")
+        ], 2)
+      ], 2);
+    };
+  }
+});
+export {
+  xe as _
+};

package/dist/components/SaberAppLayout.mjs

@@ -0,0 +1,4 @@
+import { _ as f } from "../SaberAppLayout.vue_vue_type_script_setup_true_lang-R7F5K7kj.js";
+export {
+  f as default
+};