@owocow/saber-ui 0.1.14 → 0.1.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,487 @@
1
+ import He from "@nuxt/ui/components/Button.vue";
2
+ import Le from "@nuxt/ui/components/Drawer.vue";
3
+ import { getCurrentInstance as me, getCurrentScope as Ie, hasInjectionContext as ve, inject as Ue, watch as U, shallowRef as z, watchEffect as je, toValue as M, computed as d, onMounted as Fe, unref as ze, defineComponent as Ee, useSlots as Ne, useModel as le, ref as I, useId as Pe, nextTick as Ae, openBlock as g, createElementBlock as k, normalizeStyle as G, normalizeClass as r, renderSlot as h, normalizeProps as D, guardReactiveProps as $, Fragment as R, createCommentVNode as B, createVNode as V, withCtx as re, createElementVNode as c, withDirectives as se, toDisplayString as ue, vShow as de, createBlock as Ge, mergeModels as ce } from "vue";
4
+ import { tv as K } from "tailwind-variants";
5
+ import { providePageHeader as Re } from "./composables/use-page-header.mjs";
6
+ import { _ as Ve } from "./SaberNavigationSearch.vue_vue_type_script_setup_true_lang-Bj96kMla.js";
7
+ const Q = /* @__PURE__ */ new WeakMap(), Ke = /* @__NO_SIDE_EFFECTS__ */ (...t) => {
8
+ var u;
9
+ const e = t[0], l = (u = me()) === null || u === void 0 ? void 0 : u.proxy, i = l ?? Ie();
10
+ if (i == null && !ve()) throw new Error("injectLocal must be called in setup");
11
+ return i && Q.has(i) && e in Q.get(i) ? Q.get(i)[e] : Ue(...t);
12
+ }, Qe = typeof window < "u" && typeof document < "u";
13
+ typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
14
+ const Je = Object.prototype.toString, Xe = (t) => Je.call(t) === "[object Object]";
15
+ function pe(t) {
16
+ return t.endsWith("rem") ? Number.parseFloat(t) * 16 : Number.parseFloat(t);
17
+ }
18
+ function J(t) {
19
+ return Array.isArray(t) ? t : [t];
20
+ }
21
+ function Ye(t, u, e) {
22
+ return U(t, u, {
23
+ ...e,
24
+ immediate: !0
25
+ });
26
+ }
27
+ const he = Qe ? window : void 0;
28
+ function Ze(t) {
29
+ var u;
30
+ const e = M(t);
31
+ return (u = e == null ? void 0 : e.$el) !== null && u !== void 0 ? u : e;
32
+ }
33
+ function qe(...t) {
34
+ const u = (l, i, p, o) => (l.addEventListener(i, p, o), () => l.removeEventListener(i, p, o)), e = d(() => {
35
+ const l = J(M(t[0])).filter((i) => i != null);
36
+ return l.every((i) => typeof i != "string") ? l : void 0;
37
+ });
38
+ return Ye(() => {
39
+ var l, i;
40
+ return [
41
+ (l = (i = e.value) === null || i === void 0 ? void 0 : i.map((p) => Ze(p))) !== null && l !== void 0 ? l : [he].filter((p) => p != null),
42
+ J(M(e.value ? t[1] : t[0])),
43
+ J(ze(e.value ? t[2] : t[1])),
44
+ M(e.value ? t[3] : t[2])
45
+ ];
46
+ }, ([l, i, p, o], b, H) => {
47
+ if (!(l != null && l.length) || !(i != null && i.length) || !(p != null && p.length)) return;
48
+ const C = Xe(o) ? { ...o } : o, f = l.flatMap((S) => i.flatMap((n) => p.map((T) => u(S, n, T, C))));
49
+ H(() => {
50
+ f.forEach((S) => S());
51
+ });
52
+ }, { flush: "post" });
53
+ }
54
+ // @__NO_SIDE_EFFECTS__
55
+ function _e() {
56
+ const t = z(!1), u = me();
57
+ return u && Fe(() => {
58
+ t.value = !0;
59
+ }, u), t;
60
+ }
61
+ // @__NO_SIDE_EFFECTS__
62
+ function et(t) {
63
+ const u = /* @__PURE__ */ _e();
64
+ return d(() => (u.value, !!t()));
65
+ }
66
+ const tt = Symbol("vueuse-ssr-width");
67
+ // @__NO_SIDE_EFFECTS__
68
+ function at() {
69
+ const t = ve() ? /* @__PURE__ */ Ke(tt, null) : null;
70
+ return typeof t == "number" ? t : void 0;
71
+ }
72
+ function fe(t, u = {}) {
73
+ const { window: e = he, ssrWidth: l = /* @__PURE__ */ at() } = u, i = /* @__PURE__ */ et(() => e && "matchMedia" in e && typeof e.matchMedia == "function"), p = z(typeof l == "number"), o = z(), b = z(!1), H = (C) => {
74
+ b.value = C.matches;
75
+ };
76
+ return je(() => {
77
+ if (p.value) {
78
+ p.value = !i.value;
79
+ const C = M(t).split(",");
80
+ b.value = C.some((f) => {
81
+ const S = f.includes("not all"), n = f.match(/\(\s*min-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/), T = f.match(/\(\s*max-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/);
82
+ let x = !!(n || T);
83
+ return n && x && (x = l >= pe(n[1])), T && x && (x = l <= pe(T[1])), S ? !x : x;
84
+ });
85
+ return;
86
+ }
87
+ i.value && (o.value = e.matchMedia(M(t)), b.value = o.value.matches);
88
+ }), qe(o, "change", H, { passive: !0 }), d(() => b.value);
89
+ }
90
+ const ut = /* @__PURE__ */ Ee({
91
+ name: "SaberAppLayout",
92
+ __name: "SaberAppLayout",
93
+ props: /* @__PURE__ */ ce({
94
+ title: { default: void 0 },
95
+ description: { default: void 0 },
96
+ maxWidth: { type: [Number, String, Boolean], default: void 0 },
97
+ showHeader: { type: Boolean, default: !0 },
98
+ navigationKey: { default: void 0 },
99
+ sidebarWidth: { default: 240 },
100
+ phoneBreakpoint: { default: 768 },
101
+ padBreakpoint: { default: 1024 },
102
+ searchGroups: { default: () => [] },
103
+ searchShortcut: { default: "meta_k" },
104
+ searchLabel: { default: "搜索" },
105
+ menuOpenLabel: { default: "菜单" },
106
+ menuCloseLabel: { default: "关闭" },
107
+ menuOpenIcon: { default: "solar:hamburger-menu-linear" },
108
+ menuCloseIcon: { default: "solar:close-circle-linear" },
109
+ ui: { default: () => ({}) }
110
+ }, {
111
+ drawerOpen: { type: Boolean, default: !1 },
112
+ drawerOpenModifiers: {},
113
+ searchOpen: { type: Boolean, default: !1 },
114
+ searchOpenModifiers: {}
115
+ }),
116
+ emits: /* @__PURE__ */ ce(["searchSelect"], ["update:drawerOpen", "update:searchOpen"]),
117
+ setup(t, { emit: u }) {
118
+ const e = t, l = u, i = Ne(), p = K({
119
+ slots: {
120
+ root: "flex h-dvh items-start gap-2 overflow-hidden p-1.5 text-default",
121
+ desktopSidebar: "sticky top-0 h-full shrink-0 self-start",
122
+ 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",
123
+ header: "sticky top-0 z-10 mx-auto flex w-full shrink-0 overflow-hidden bg-default/70 backdrop-blur-md mb-1",
124
+ headerInner: "flex min-h-10 w-full items-center justify-between gap-4",
125
+ headerHeading: "min-w-0",
126
+ headerTitle: "flex flex-wrap items-center gap-x-6 gap-y-1",
127
+ title: "truncate text-xl font-medium",
128
+ headerTitleSuffix: "flex shrink-0 items-center gap-6",
129
+ headerTitleSeparator: "h-4.5 w-px shrink-0 bg-(--ui-border-muted)",
130
+ pageHeaderTitleSuffixTarget: "contents",
131
+ headerDescription: "flex items-start gap-2",
132
+ description: "mt-1 text-sm text-muted",
133
+ pageHeaderDescriptionTarget: "mt-1 flex shrink-0 items-center gap-2 empty:hidden",
134
+ headerSuffix: "flex shrink-0 items-center gap-2",
135
+ pageHeaderSuffixTarget: "contents",
136
+ content: "mx-auto w-full flex-1",
137
+ phoneDrawerContent: "h-full min-h-0 w-full min-w-0 p-2",
138
+ phoneSidebarFrame: "h-full min-h-0 w-full",
139
+ padDrawerContent: "h-full min-h-0 w-full min-w-0 p-2",
140
+ padSidebarFrame: "mx-auto h-full min-h-0",
141
+ overlay: "fixed inset-0 z-40 border-0 bg-muted/60 p-0 backdrop-blur-sm",
142
+ 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"
143
+ },
144
+ variants: {
145
+ mode: {
146
+ phone: {
147
+ root: "p-1.5",
148
+ header: "py-3 px-4",
149
+ title: "text-xl",
150
+ content: "px-3 pb-[calc(6rem+env(safe-area-inset-bottom))]"
151
+ },
152
+ pad: {
153
+ root: "p-1.5",
154
+ header: "py-3 px-4",
155
+ title: "text-2xl",
156
+ content: "px-4 pb-[calc(6rem+env(safe-area-inset-bottom))]"
157
+ },
158
+ desktop: {
159
+ root: "p-2",
160
+ header: "px-6 py-4 min-[1441px]:px-8 min-[1441px]:py-5.5",
161
+ title: "text-2xl",
162
+ content: "px-6 pb-6 min-[1441px]:px-8 min-[1441px]:pb-8"
163
+ }
164
+ }
165
+ }
166
+ }), o = le(t, "drawerOpen"), b = le(t, "searchOpen"), H = fe(`(max-width: ${e.phoneBreakpoint}px)`), C = fe(`(max-width: ${e.padBreakpoint}px)`), f = d(() => H.value ? "phone" : C.value ? "pad" : "desktop"), S = d(() => f.value !== "desktop"), n = d(() => p({ mode: f.value })), T = d(() => {
167
+ if (!e.showHeader)
168
+ return f.value === "phone" ? "pt-3" : f.value === "pad" ? "pt-4" : "pt-6 min-[1441px]:pt-8";
169
+ }), x = I(null), X = I(null), E = I(null), Y = I(!1), Z = Re(x, X, E);
170
+ U(
171
+ E,
172
+ (a, s, m) => {
173
+ const y = () => {
174
+ var w;
175
+ Y.value = !!(a != null && a.childElementCount || (w = a == null ? void 0 : a.textContent) != null && w.trim());
176
+ };
177
+ if (y(), typeof MutationObserver > "u") return;
178
+ const v = new MutationObserver(y);
179
+ a && v.observe(a, { childList: !0, subtree: !0 }), m(() => v.disconnect());
180
+ },
181
+ { flush: "post" }
182
+ );
183
+ const N = d(() => Z.title ?? e.title), P = d(() => Z.description ?? e.description), q = d(() => {
184
+ if (typeof e.maxWidth == "number")
185
+ return Number.isFinite(e.maxWidth) && e.maxWidth > 0 ? `${e.maxWidth}px` : void 0;
186
+ if (!(e.maxWidth === "full" || e.maxWidth === !1 || e.maxWidth === void 0))
187
+ return e.maxWidth.trim() || void 0;
188
+ }), be = d(
189
+ () => e.maxWidth === void 0 || typeof e.maxWidth == "number" && (!Number.isFinite(e.maxWidth) || e.maxWidth <= 0)
190
+ ), _ = d(
191
+ () => q.value ? { maxWidth: q.value } : void 0
192
+ ), ee = d(() => be.value ? "min-[1921px]:max-w-[1684px]" : void 0), xe = d(() => typeof e.sidebarWidth == "number" ? Number.isFinite(e.sidebarWidth) && e.sidebarWidth > 0 ? `${e.sidebarWidth}px` : "240px" : e.sidebarWidth.trim() || "240px"), ye = d(() => ({ "--saber-app-layout-sidebar-width": xe.value })), ge = { width: "var(--saber-app-layout-sidebar-width)" }, Se = { width: "var(--saber-app-layout-sidebar-width)" }, A = `saber-app-layout-navigation-${Pe().replaceAll(":", "")}`, te = I(null);
193
+ function j(a) {
194
+ return typeof a == "object" && a !== null && !Array.isArray(a);
195
+ }
196
+ function we(a) {
197
+ return j(a) && Object.values(a).every((s) => typeof s == "boolean");
198
+ }
199
+ function ke(a) {
200
+ return typeof a == "function";
201
+ }
202
+ function Ce(a, s) {
203
+ return s === void 0 ? a : ke(s) ? (m) => s(K({ base: m })({ class: a })) : K({ base: a })({ class: s });
204
+ }
205
+ function L(a, s) {
206
+ const m = {}, y = /* @__PURE__ */ new Set([...Object.keys(a), ...Object.keys(s ?? {})]);
207
+ for (const v of y) {
208
+ const w = a[v], F = s == null ? void 0 : s[v], ie = j(F) && !we(F);
209
+ if (j(w) || w === void 0 && ie)
210
+ m[v] = L(
211
+ j(w) ? w : {},
212
+ ie ? F : void 0
213
+ );
214
+ else {
215
+ const oe = Ce(w, F);
216
+ oe !== void 0 && (m[v] = oe);
217
+ }
218
+ }
219
+ return m;
220
+ }
221
+ const Te = {
222
+ root: "mb-0 min-w-0 flex-1",
223
+ button: {
224
+ base: "h-10 w-20 rounded-full border-0 bg-transparent px-3 shadow-none",
225
+ trailing: "hidden",
226
+ label: "text-(--ui-text) text-sm",
227
+ leadingIcon: "text-(--ui-text)"
228
+ }
229
+ }, We = {
230
+ base: "h-10 shrink-0 rounded-full px-3 font-normal"
231
+ }, Oe = d(
232
+ () => L(
233
+ { content: "z-50 h-[calc(100dvh-4rem)] max-h-none rounded-t-lg bg-default" },
234
+ e.ui.phoneDrawer
235
+ )
236
+ ), De = d(
237
+ () => L(
238
+ { content: "z-50 h-dvh max-w-none rounded-r-lg bg-default" },
239
+ e.ui.padDrawer
240
+ )
241
+ ), $e = d(
242
+ () => L(Te, e.ui.search)
243
+ ), Be = d(
244
+ () => L(We, e.ui.menuButton)
245
+ );
246
+ function ae() {
247
+ S.value && (o.value = !0);
248
+ }
249
+ function W() {
250
+ o.value = !1;
251
+ }
252
+ function ne() {
253
+ o.value ? W() : ae();
254
+ }
255
+ function Me(a) {
256
+ l("searchSelect", a), b.value = !1, W();
257
+ }
258
+ U(() => e.navigationKey, W), U(f, W), U(o, async (a, s) => {
259
+ var m, y;
260
+ a || !s || (await Ae(), (y = (m = te.value) == null ? void 0 : m.$el) == null || y.focus());
261
+ });
262
+ const O = d(() => ({
263
+ mode: f.value,
264
+ drawerOpen: o.value,
265
+ openDrawer: ae,
266
+ closeDrawer: W,
267
+ toggleDrawer: ne
268
+ }));
269
+ return (a, s) => {
270
+ const m = Le, y = He;
271
+ return g(), k("div", {
272
+ "data-testid": "app-layout",
273
+ class: r(n.value.root({ class: e.ui.root })),
274
+ style: G(ye.value)
275
+ }, [
276
+ f.value === "desktop" ? (g(), k("aside", {
277
+ key: 0,
278
+ "data-testid": "desktop-sidebar",
279
+ class: r(n.value.desktopSidebar({ class: e.ui.desktopSidebar })),
280
+ style: ge
281
+ }, [
282
+ h(a.$slots, "sidebar", D($(O.value)))
283
+ ], 2)) : f.value === "phone" ? (g(), k(R, { key: 1 }, [
284
+ o.value ? (g(), k("button", {
285
+ key: 0,
286
+ "data-testid": "compact-nav-overlay",
287
+ type: "button",
288
+ tabindex: "-1",
289
+ "aria-label": "关闭导航",
290
+ class: r(n.value.overlay({ class: e.ui.overlay })),
291
+ onClick: W
292
+ }, null, 2)) : B("", !0),
293
+ V(m, {
294
+ open: o.value,
295
+ "onUpdate:open": s[0] || (s[0] = (v) => o.value = v),
296
+ direction: "bottom",
297
+ modal: !1,
298
+ overlay: !1,
299
+ handle: !0,
300
+ title: t.menuOpenLabel,
301
+ ui: Oe.value
302
+ }, {
303
+ content: re(() => [
304
+ c("div", {
305
+ id: A,
306
+ "data-testid": "phone-drawer-content",
307
+ class: r(n.value.phoneDrawerContent({ class: e.ui.phoneDrawerContent }))
308
+ }, [
309
+ c("div", {
310
+ "data-testid": "phone-sidebar-frame",
311
+ class: r(n.value.phoneSidebarFrame({ class: e.ui.phoneSidebarFrame }))
312
+ }, [
313
+ i["phone-sidebar"] ? h(a.$slots, "phone-sidebar", D($(O.value)), void 0, void 0, 0) : h(a.$slots, "sidebar", D($(O.value)), void 0, void 0, 1)
314
+ ], 2)
315
+ ], 2)
316
+ ]),
317
+ _: 3
318
+ }, 8, ["open", "title", "ui"])
319
+ ], 64)) : (g(), k(R, { key: 2 }, [
320
+ o.value ? (g(), k("button", {
321
+ key: 0,
322
+ "data-testid": "compact-nav-overlay",
323
+ type: "button",
324
+ tabindex: "-1",
325
+ "aria-label": "关闭导航",
326
+ class: r(n.value.overlay({ class: e.ui.overlay })),
327
+ onClick: W
328
+ }, null, 2)) : B("", !0),
329
+ V(m, {
330
+ open: o.value,
331
+ "onUpdate:open": s[1] || (s[1] = (v) => o.value = v),
332
+ direction: "left",
333
+ modal: !1,
334
+ overlay: !1,
335
+ handle: !1,
336
+ title: t.menuOpenLabel,
337
+ ui: De.value
338
+ }, {
339
+ content: re(() => [
340
+ c("div", {
341
+ id: A,
342
+ "data-testid": "pad-drawer-content",
343
+ class: r(n.value.padDrawerContent({ class: e.ui.padDrawerContent }))
344
+ }, [
345
+ c("div", {
346
+ "data-testid": "pad-sidebar-frame",
347
+ class: r(n.value.padSidebarFrame({ class: e.ui.padSidebarFrame })),
348
+ style: Se
349
+ }, [
350
+ i["pad-sidebar"] ? h(a.$slots, "pad-sidebar", D($(O.value)), void 0, void 0, 0) : h(a.$slots, "sidebar", D($(O.value)), void 0, void 0, 1)
351
+ ], 2)
352
+ ], 2)
353
+ ]),
354
+ _: 3
355
+ }, 8, ["open", "title", "ui"])
356
+ ], 64)),
357
+ c("main", {
358
+ "data-testid": "app-layout-main",
359
+ class: r(n.value.main({ class: e.ui.main }))
360
+ }, [
361
+ se(c("header", {
362
+ "data-testid": "app-layout-header",
363
+ class: r([n.value.header({ class: e.ui.header }), ee.value]),
364
+ style: G(_.value)
365
+ }, [
366
+ c("div", {
367
+ "data-testid": "app-layout-header-inner",
368
+ class: r(n.value.headerInner({ class: e.ui.headerInner }))
369
+ }, [
370
+ c("div", {
371
+ "data-testid": "app-layout-header-heading",
372
+ class: r(n.value.headerHeading({ class: e.ui.headerHeading }))
373
+ }, [
374
+ c("div", {
375
+ class: r(n.value.headerTitle({ class: e.ui.headerTitle }))
376
+ }, [
377
+ N.value ? h(a.$slots, "header-title", { title: N.value }, () => [
378
+ c("span", {
379
+ "data-testid": "app-layout-title",
380
+ class: r(n.value.title({ class: e.ui.title }))
381
+ }, ue(N.value), 3)
382
+ ], void 0, 0) : B("", !0),
383
+ se(c("div", {
384
+ class: r(n.value.headerTitleSuffix({ class: e.ui.headerTitleSuffix }))
385
+ }, [
386
+ c("span", {
387
+ "data-testid": "app-layout-title-separator",
388
+ class: r(n.value.headerTitleSeparator({ class: e.ui.headerTitleSeparator }))
389
+ }, null, 2),
390
+ c("div", {
391
+ ref_key: "titleSuffixTarget",
392
+ ref: E,
393
+ "data-testid": "app-layout-title-suffix-target",
394
+ class: r(n.value.pageHeaderTitleSuffixTarget({
395
+ class: e.ui.pageHeaderTitleSuffixTarget
396
+ }))
397
+ }, null, 2)
398
+ ], 2), [
399
+ [de, Y.value]
400
+ ])
401
+ ], 2),
402
+ c("div", {
403
+ class: r(n.value.headerDescription({ class: e.ui.headerDescription }))
404
+ }, [
405
+ P.value ? h(a.$slots, "header-description", { description: P.value }, () => [
406
+ c("p", {
407
+ "data-testid": "app-layout-description",
408
+ class: r(n.value.description({ class: e.ui.description }))
409
+ }, ue(P.value), 3)
410
+ ], void 0, 0) : B("", !0),
411
+ c("div", {
412
+ ref_key: "descriptionTarget",
413
+ ref: X,
414
+ "data-testid": "app-layout-description-target",
415
+ class: r(n.value.pageHeaderDescriptionTarget({
416
+ class: e.ui.pageHeaderDescriptionTarget
417
+ }))
418
+ }, null, 2)
419
+ ], 2)
420
+ ], 2),
421
+ c("div", {
422
+ "data-testid": "app-layout-header-suffix",
423
+ class: r(n.value.headerSuffix({ class: e.ui.headerSuffix }))
424
+ }, [
425
+ h(a.$slots, "header-suffix"),
426
+ c("div", {
427
+ ref_key: "suffixTarget",
428
+ ref: x,
429
+ "data-testid": "app-layout-suffix-target",
430
+ class: r(n.value.pageHeaderSuffixTarget({ class: e.ui.pageHeaderSuffixTarget }))
431
+ }, null, 2)
432
+ ], 2)
433
+ ], 2)
434
+ ], 6), [
435
+ [de, e.showHeader]
436
+ ]),
437
+ c("div", {
438
+ "data-testid": "app-layout-content",
439
+ class: r([
440
+ n.value.content({ class: [T.value, e.ui.content] }),
441
+ ee.value
442
+ ]),
443
+ style: G(_.value)
444
+ }, [
445
+ h(a.$slots, "default")
446
+ ], 6)
447
+ ], 2),
448
+ S.value ? (g(), k("div", {
449
+ key: 3,
450
+ "data-testid": "compact-nav-dock",
451
+ class: r(n.value.dock({ class: e.ui.dock }))
452
+ }, [
453
+ i.dock ? h(a.$slots, "dock", D($(O.value)), void 0, void 0, 0) : (g(), k(R, { key: 1 }, [
454
+ t.searchGroups.length ? (g(), Ge(Ve, {
455
+ key: 0,
456
+ open: b.value,
457
+ "onUpdate:open": s[2] || (s[2] = (v) => b.value = v),
458
+ groups: t.searchGroups,
459
+ label: t.searchLabel,
460
+ shortcut: t.searchShortcut,
461
+ kbds: [],
462
+ ui: $e.value,
463
+ onSelect: Me
464
+ }, null, 8, ["open", "groups", "label", "shortcut", "ui"])) : B("", !0),
465
+ V(y, {
466
+ ref_key: "menuButton",
467
+ ref: te,
468
+ "data-testid": "compact-menu-button",
469
+ color: "neutral",
470
+ variant: "ghost",
471
+ icon: o.value ? t.menuCloseIcon : t.menuOpenIcon,
472
+ label: o.value ? t.menuCloseLabel : t.menuOpenLabel,
473
+ "aria-controls": A,
474
+ "aria-expanded": o.value,
475
+ "aria-haspopup": "dialog",
476
+ ui: Be.value,
477
+ onClick: ne
478
+ }, null, 8, ["icon", "label", "aria-expanded", "ui"])
479
+ ], 64))
480
+ ], 2)) : B("", !0)
481
+ ], 6);
482
+ };
483
+ }
484
+ });
485
+ export {
486
+ ut as _
487
+ };
@@ -16,7 +16,7 @@ const q = /* @__PURE__ */ b({
16
16
  gap: {}
17
17
  },
18
18
  setup(l) {
19
- const a = l, e = k(E, void 0), s = t(() => a.leading ?? (e == null ? void 0 : e.value.leading)), d = t(() => a.truncate ?? (e == null ? void 0 : e.value.truncate) ?? !0), c = t(() => a.mode ?? (e == null ? void 0 : e.value.mode) ?? "default"), v = t(() => a.lineheight ?? (e == null ? void 0 : e.value.lineheight)), i = t(() => a.variant ?? (e == null ? void 0 : e.value.variant) ?? "horizontal"), n = t(() => a.gap ?? (e == null ? void 0 : e.value.gap)), f = t(() => c.value === "muted" ? "text-muted/75" : c.value === "light" ? "text-muted/55" : ""), g = t(() => {
19
+ const a = l, e = k(E, void 0), s = t(() => a.leading ?? (e == null ? void 0 : e.value.leading)), d = t(() => a.truncate ?? (e == null ? void 0 : e.value.truncate) ?? !0), c = t(() => a.mode ?? (e == null ? void 0 : e.value.mode) ?? "default"), v = t(() => a.lineheight ?? (e == null ? void 0 : e.value.lineheight)), i = t(() => a.variant ?? (e == null ? void 0 : e.value.variant) ?? "horizontal"), n = t(() => a.gap ?? (e == null ? void 0 : e.value.gap)), f = t(() => c.value === "muted" ? "text-muted" : c.value === "light" ? "text-dimmed" : ""), g = t(() => {
20
20
  if (!(i.value !== "vertical" || n.value === void 0))
21
21
  return { gap: typeof n.value == "number" ? `${n.value}px` : n.value };
22
22
  });
@@ -1,4 +1,4 @@
1
- import { _ as f } from "../SaberAppLayout.vue_vue_type_script_setup_true_lang-DaxscIFe.js";
1
+ import { _ as f } from "../SaberAppLayout.vue_vue_type_script_setup_true_lang-Hr4TdNqR.js";
2
2
  export {
3
3
  f as default
4
4
  };
@@ -1,4 +1,4 @@
1
- import { _ as f } from "../SaberInfo.vue_vue_type_script_setup_true_lang-B3W5VsGR.js";
1
+ import { _ as f } from "../SaberInfo.vue_vue_type_script_setup_true_lang-B_1ugpqI.js";
2
2
  export {
3
3
  f as default
4
4
  };
@@ -1,4 +1,3 @@
1
- import { SaberControlSize } from '../control-size';
2
1
  type SaberPaginationComponentUI = Record<string, string | undefined>;
3
2
  interface SaberPaginationUI {
4
3
  root?: string;
@@ -16,7 +15,7 @@ type __VLS_Props = {
16
15
  pageSize?: number;
17
16
  total: number;
18
17
  pageSizes?: number[];
19
- size?: SaberControlSize;
18
+ size?: string;
20
19
  ui?: SaberPaginationUI;
21
20
  };
22
21
  declare function __VLS_template(): {
@@ -38,7 +37,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
38
37
  page: number;
39
38
  pageSize: number;
40
39
  pageSizes: number[];
41
- size: SaberControlSize;
40
+ size: string;
42
41
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
43
42
  declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
44
43
  export default _default;
@@ -7,6 +7,7 @@ export interface SaberAppLayoutProps {
7
7
  title?: string;
8
8
  description?: string;
9
9
  maxWidth?: SaberAppLayoutMaxWidth;
10
+ showHeader?: boolean;
10
11
  navigationKey?: string | number;
11
12
  sidebarWidth?: number | string;
12
13
  phoneBreakpoint?: number;
@@ -32,9 +33,16 @@ export interface SaberAppLayoutUI {
32
33
  desktopSidebar?: string;
33
34
  main?: string;
34
35
  header?: string;
36
+ headerInner?: string;
35
37
  headerHeading?: string;
38
+ headerTitle?: string;
36
39
  title?: string;
40
+ headerTitleSuffix?: string;
41
+ headerTitleSeparator?: string;
42
+ pageHeaderTitleSuffixTarget?: string;
43
+ headerDescription?: string;
37
44
  description?: string;
45
+ pageHeaderDescriptionTarget?: string;
38
46
  headerSuffix?: string;
39
47
  pageHeaderSuffixTarget?: string;
40
48
  content?: string;
@@ -35,6 +35,8 @@ declare function __VLS_template(): {
35
35
  dock?: (props: SaberAppLayoutNavigationSlotContext) => unknown;
36
36
  };
37
37
  refs: {
38
+ titleSuffixTarget: HTMLDivElement;
39
+ descriptionTarget: HTMLDivElement;
38
40
  suffixTarget: HTMLDivElement;
39
41
  menuButton: unknown;
40
42
  };
@@ -54,6 +56,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
54
56
  description: string;
55
57
  ui: import('./SaberAppLayout.types').SaberAppLayoutUI;
56
58
  maxWidth: import('./SaberAppLayout.types').SaberAppLayoutMaxWidth;
59
+ showHeader: boolean;
57
60
  navigationKey: string | number;
58
61
  sidebarWidth: number | string;
59
62
  phoneBreakpoint: number;
@@ -66,6 +69,8 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
66
69
  menuOpenIcon: string;
67
70
  menuCloseIcon: string;
68
71
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
72
+ titleSuffixTarget: HTMLDivElement;
73
+ descriptionTarget: HTMLDivElement;
69
74
  suffixTarget: HTMLDivElement;
70
75
  menuButton: unknown;
71
76
  }, HTMLDivElement>;
@@ -8,7 +8,7 @@ export { useSkeleton } from './use-skeleton';
8
8
  export { useDelayUnmount } from './use-delay-unmount';
9
9
  export { useAddressParse } from './use-address-parse';
10
10
  export type { UseAddressParseResult } from './use-address-parse';
11
- export { providePageHeader, usePageHeader, usePageHeaderSuffix } from './use-page-header';
11
+ export { providePageHeader, usePageHeader, usePageHeaderDescription, usePageHeaderSuffix, usePageHeaderTitleSuffix, } from './use-page-header';
12
12
  export type { PageHeaderOptions, PageHeaderState } from './use-page-header';
13
13
  export { normalizeTableResponse, useTable } from './use-table';
14
14
  export type { ApiFn, ApiParams, MaybePromise, NormalizedTableResponse, PaginationConfig, TableConfig, TableDataWithIndex, TablePagination, } from './use-table';
@@ -7,9 +7,11 @@ export interface PageHeaderOptions {
7
7
  title?: MaybeRefOrGetter<string | undefined>;
8
8
  description?: MaybeRefOrGetter<string | undefined>;
9
9
  }
10
- export declare function providePageHeader(suffixTarget: Ref<HTMLElement | null>): {
10
+ export declare function providePageHeader(suffixTarget: Ref<HTMLElement | null>, descriptionTarget?: Ref<HTMLElement | null>, titleSuffixTarget?: Ref<HTMLElement | null>): {
11
11
  title?: string | undefined;
12
12
  description?: string | undefined;
13
13
  };
14
14
  export declare function usePageHeader(options: PageHeaderOptions): void;
15
15
  export declare function usePageHeaderSuffix(): Ref<HTMLElement | null, HTMLElement | null>;
16
+ export declare function usePageHeaderDescription(): Ref<HTMLElement | null, HTMLElement | null>;
17
+ export declare function usePageHeaderTitleSuffix(): Ref<HTMLElement | null, HTMLElement | null>;
@@ -1,24 +1,36 @@
1
- import { reactive as c, provide as o, inject as r, watchEffect as u, toValue as i, onBeforeUnmount as d, ref as f } from "vue";
2
- const n = Symbol.for("@owocow/saber-ui:page-header-state"), a = Symbol.for(
1
+ import { reactive as E, provide as r, ref as t, inject as i, watchEffect as d, toValue as a, onBeforeUnmount as _ } from "vue";
2
+ const u = Symbol.for("@owocow/saber-ui:page-header-state"), c = Symbol.for(
3
3
  "@owocow/saber-ui:page-header-suffix-target"
4
+ ), s = Symbol.for(
5
+ "@owocow/saber-ui:page-header-description-target"
6
+ ), f = Symbol.for(
7
+ "@owocow/saber-ui:page-header-title-suffix-target"
4
8
  );
5
- function l(t) {
6
- const e = c({ title: void 0, description: void 0 });
7
- return o(n, e), o(a, t), e;
9
+ function g(o, e = t(null), l = t(null)) {
10
+ const n = E({ title: void 0, description: void 0 });
11
+ return r(u, n), r(c, o), r(s, e), r(f, l), n;
8
12
  }
9
- function E(t) {
10
- const e = r(n, null);
11
- e && (u(() => {
12
- e.title = i(t.title), e.description = i(t.description);
13
- }), d(() => {
13
+ function A(o) {
14
+ const e = i(u, null);
15
+ e && (d(() => {
16
+ e.title = a(o.title), e.description = a(o.description);
17
+ }), _(() => {
14
18
  e.title = void 0, e.description = void 0;
15
19
  }));
16
20
  }
17
- function p() {
18
- return r(a, f(null));
21
+ function T() {
22
+ return i(c, t(null));
23
+ }
24
+ function P() {
25
+ return i(s, t(null));
26
+ }
27
+ function S() {
28
+ return i(f, t(null));
19
29
  }
20
30
  export {
21
- l as providePageHeader,
22
- E as usePageHeader,
23
- p as usePageHeaderSuffix
31
+ g as providePageHeader,
32
+ A as usePageHeader,
33
+ P as usePageHeaderDescription,
34
+ T as usePageHeaderSuffix,
35
+ S as usePageHeaderTitleSuffix
24
36
  };
@@ -54,4 +54,5 @@ export declare function useTable<A extends ApiFn, T = any>(config: TableConfig<A
54
54
  total: import('vue').ComputedRef<number>;
55
55
  startLoading: () => void;
56
56
  endLoading: () => void;
57
+ showPagination: import('vue').ComputedRef<boolean>;
57
58
  };