@owocow/saber-ui 0.1.12 → 0.1.14

package/dist/SaberAppLayout.vue_vue_type_script_setup_true_lang-DaxscIFe.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 font-medium",
+        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-[1684px]" : 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 _
+};