@owocow/saber-ui 0.0.9 → 0.1.11

package/dist/SaberAppSidebar.vue_vue_type_script_setup_true_lang-CEWQTjEi.js

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

package/dist/SaberNavigationSearch.vue_vue_type_script_setup_true_lang-Bj96kMla.js

@@ -0,0 +1,137 @@
+import D from "@nuxt/ui/components/DashboardSearch.vue";
+import V from "@nuxt/ui/components/Button.vue";
+import j from "@nuxt/ui/components/Kbd.vue";
+import { defineComponent as A, useModel as k, computed as S, openBlock as i, createElementBlock as T, normalizeClass as m, unref as r, createVNode as L, withCtx as U, createElementVNode as F, Fragment as G, renderList as O, createBlock as R, renderSlot as W, normalizeProps as q, guardReactiveProps as H, mergeModels as w } from "vue";
+import { tv as J } from "tailwind-variants";
+const te = /* @__PURE__ */ A({
+  name: "SaberNavigationSearch",
+  __name: "SaberNavigationSearch",
+  props: /* @__PURE__ */ w({
+    groups: {},
+    label: { default: "搜索菜单" },
+    placeholder: { default: "搜索菜单" },
+    shortcut: { default: "meta_k" },
+    kbds: { default: () => ["meta", "k"] },
+    ui: {}
+  }, {
+    open: { type: Boolean, default: !1 },
+    openModifiers: {},
+    searchTerm: { default: "" },
+    searchTermModifiers: {}
+  }),
+  emits: /* @__PURE__ */ w(["select"], ["update:open", "update:searchTerm"]),
+  setup(s, { emit: B }) {
+    const e = s, I = B, a = k(s, "open"), u = k(s, "searchTerm");
+    function z(o, t) {
+      I("select", {
+        source: "search",
+        item: o,
+        sectionKey: t.sectionKey,
+        groupKey: t.key
+      }), a.value = !1, u.value = "";
+    }
+    const C = S(
+      () => e.groups.map((o) => ({
+        id: o.key,
+        label: o.label,
+        items: o.items.map((t) => ({
+          ...t,
+          onSelect: () => z(t, o)
+        }))
+      }))
+    ), K = {
+      fuseOptions: {
+        keys: ["label", "description"],
+        useTokenSearch: !0,
+        threshold: 0.2
+      },
+      resultLimit: 12,
+      matchAllWhenSearchEmpty: !0
+    }, M = {
+      modal: "sm:max-w-xl sm:h-[28rem] rounded-lg shadow-xs",
+      root: "bg-default divide-y divide-default",
+      input: "[&>input]:h-12 border-muted/60",
+      content: "min-h-0",
+      viewport: "py-2 px-9 minimal-scrollbar",
+      group: "border-none px-0 pb-4",
+      label: "py-1.5 pl-0 text-[11px] font-normal text-muted",
+      item: "items-center gap-2 rounded-full p-2 -mx-2 w-full",
+      itemLeadingIcon: "size-4 text-default",
+      itemLabel: "hidden",
+      itemLabelBase: "font-medium text-default",
+      itemDescription: "text-sm text-default",
+      empty: "py-12 text-sm text-muted"
+    }, N = S(() => {
+      var o;
+      return {
+        ...M,
+        // 业务项目仍然可以覆盖 Saber UI 默认值
+        ...(o = e.ui) == null ? void 0 : o.panel
+      };
+    }), l = J({
+      slots: {
+        root: "mb-3",
+        button: "w-full h-8.5 rounded-md justify-start text-xs text-dimmed font-normal",
+        buttonTrailing: "ml-auto flex items-center gap-0.5",
+        buttonLeadingIcon: "size-4 shrink-0"
+      }
+    })();
+    return (o, t) => {
+      var c, d, p, b, f, h, g, v, x;
+      const E = j, P = V, $ = D;
+      return i(), T("div", {
+        class: m(r(l).root({ class: (c = e.ui) == null ? void 0 : c.root }))
+      }, [
+        L(P, {
+          "data-testid": "search-button",
+          color: "neutral",
+          variant: "outline",
+          icon: "solar:magnifier-linear",
+          label: e.label,
+          class: m(r(l).button({ class: [(p = (d = e.ui) == null ? void 0 : d.button) == null ? void 0 : p.base, (f = (b = e.ui) == null ? void 0 : b.button) == null ? void 0 : f.hover] })),
+          ui: {
+            leadingIcon: r(l).buttonLeadingIcon({ class: (g = (h = e.ui) == null ? void 0 : h.button) == null ? void 0 : g.leadingIcon }),
+            label: (x = (v = e.ui) == null ? void 0 : v.button) == null ? void 0 : x.label
+          },
+          onClick: t[0] || (t[0] = (n) => a.value = !0)
+        }, {
+          trailing: U(() => {
+            var n, y;
+            return [
+              F("span", {
+                class: m(r(l).buttonTrailing({ class: (y = (n = e.ui) == null ? void 0 : n.button) == null ? void 0 : y.trailing }))
+              }, [
+                (i(!0), T(G, null, O(e.kbds, (_) => (i(), R(E, {
+                  key: _,
+                  value: _,
+                  variant: "subtle"
+                }, null, 8, ["value"]))), 128))
+              ], 2)
+            ];
+          }),
+          _: 1
+        }, 8, ["label", "class", "ui"]),
+        L($, {
+          open: a.value,
+          "onUpdate:open": t[1] || (t[1] = (n) => a.value = n),
+          "search-term": u.value,
+          "onUpdate:searchTerm": t[2] || (t[2] = (n) => u.value = n),
+          groups: C.value,
+          shortcut: e.shortcut,
+          placeholder: e.placeholder,
+          fuse: K,
+          "color-mode": !1,
+          ui: N.value
+        }, {
+          empty: U((n) => [
+            W(o.$slots, "empty", q(H(n)))
+          ]),
+          _: 3
+        }, 8, ["open", "search-term", "groups", "shortcut", "placeholder", "ui"])
+      ], 2);
+    };
+  }
+});
+export {
+  te as _
+};

package/dist/components/SaberAppSidebar.mjs

@@ -1,4 +1,4 @@
-import { _ as f } from "../SaberAppSidebar.vue_vue_type_script_setup_true_lang-CZ3nsbEh.js";
+import { _ as f } from "../SaberAppSidebar.vue_vue_type_script_setup_true_lang-CEWQTjEi.js";
 export {
   f as default
 };

package/dist/components/SaberNavigationSearch.mjs

@@ -1,4 +1,4 @@
-import { _ as f } from "../SaberNavigationSearch.vue_vue_type_script_setup_true_lang-BdCVvmQo.js";
+import { _ as f } from "../SaberNavigationSearch.vue_vue_type_script_setup_true_lang-Bj96kMla.js";
 export {
   f as default
 };

package/dist/index.mjs

@@ -9,8 +9,8 @@ import { _ as P } from "./SaberInfoProvider.vue_vue_type_script_setup_true_lang-
 import { _ as z } from "./SaberModalWithMobile.vue_vue_type_script_setup_true_lang-aQlToncY.js";
 import { _ as A } from "./SaberStatus.vue_vue_type_script_setup_true_lang-D9aRVCow.js";
 import { _ as F } from "./SaberSwitchBar.vue_vue_type_script_setup_true_lang-CDx3Dcas.js";
-import { _ as U } from "./SaberAppSidebar.vue_vue_type_script_setup_true_lang-CZ3nsbEh.js";
-import { _ as V } from "./SaberNavigationSearch.vue_vue_type_script_setup_true_lang-BdCVvmQo.js";
+import { _ as U } from "./SaberAppSidebar.vue_vue_type_script_setup_true_lang-CEWQTjEi.js";
+import { _ as V } from "./SaberNavigationSearch.vue_vue_type_script_setup_true_lang-Bj96kMla.js";
 import { k as W } from "./plugin-Dr3z0YFg.js";
 import { _ as be, a as fe, b as ue, c as Se, d as _e, e as pe } from "./plugin-Dr3z0YFg.js";
 import { _ as xe } from "./SaberModal.vue_vue_type_script_setup_true_lang-DJno3jA3.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@owocow/saber-ui",
-  "version": "0.0.9",
+  "version": "0.1.11",
   "description": "Saber application foundation for Vue 3 projects built on Nuxt UI",
   "type": "module",
   "sideEffects": false,