@ac-design/design-system 2.1.0 → 2.1.1
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.
|
@@ -20,6 +20,8 @@ export interface Props {
|
|
|
20
20
|
top?: string;
|
|
21
21
|
/** `normal` suits a page's main header: a 20px title, 24px from 768px. `compact` has a 16px title and less padding, for dense pages and forms. */
|
|
22
22
|
size?: "normal" | "compact";
|
|
23
|
+
/** Heading level of the title. Use `h1` for the page's main title; the default `h4` keeps older pages' outline. */
|
|
24
|
+
titleTag?: "h1" | "h2" | "h3" | "h4";
|
|
23
25
|
}
|
|
24
26
|
type __VLS_Slots = {
|
|
25
27
|
/** A logo or icon before the title, shown in a 44px tile: a Lucide icon gets a solid primary tile, an `<img>` (e.g. the database engine's logo) a bordered white one. */
|
|
@@ -47,6 +49,7 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
|
|
|
47
49
|
top: string;
|
|
48
50
|
subtitle: string;
|
|
49
51
|
sticky: boolean;
|
|
52
|
+
titleTag: "h1" | "h2" | "h3" | "h4";
|
|
50
53
|
countLabel: string;
|
|
51
54
|
docsHref: string;
|
|
52
55
|
backButton: boolean;
|
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, normalizeClass as l, normalizeStyle as u, openBlock as d, renderSlot as f, resolveDynamicComponent as p, toDisplayString as m, unref as h } from "vue";
|
|
2
|
-
import { ArrowLeft as
|
|
1
|
+
import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, normalizeClass as l, normalizeStyle as u, openBlock as d, renderSlot as f, resolveDynamicComponent as p, toDisplayString as m, unref as h, withCtx as g } from "vue";
|
|
2
|
+
import { ArrowLeft as _, BookOpen as v, SquareArrowOutUpRight as y } from "@lucide/vue";
|
|
3
3
|
//#region src/lib/components/AcHeader.vue?vue&type=script&setup=true&lang.ts
|
|
4
|
-
var
|
|
4
|
+
var b = {
|
|
5
5
|
key: 0,
|
|
6
6
|
class: "mb-4"
|
|
7
|
-
},
|
|
7
|
+
}, x = { class: "min-w-0" }, S = {
|
|
8
8
|
key: 0,
|
|
9
9
|
class: "mb-2"
|
|
10
|
-
},
|
|
10
|
+
}, C = { class: "flex min-w-0 flex-wrap items-center gap-2.5" }, w = {
|
|
11
11
|
key: 0,
|
|
12
12
|
class: "inline-flex items-center rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium whitespace-nowrap text-primary-strong",
|
|
13
13
|
"data-testid": "ac-header-count"
|
|
14
|
-
},
|
|
14
|
+
}, T = {
|
|
15
15
|
key: 1,
|
|
16
16
|
class: "mt-2"
|
|
17
|
-
},
|
|
17
|
+
}, E = ["href"], D = /*@__PURE__*/ c({
|
|
18
18
|
__name: "AcHeader",
|
|
19
19
|
props: {
|
|
20
20
|
title: { default: "" },
|
|
@@ -32,22 +32,23 @@ var y = {
|
|
|
32
32
|
default: !1
|
|
33
33
|
},
|
|
34
34
|
top: { default: "0px" },
|
|
35
|
-
size: { default: "normal" }
|
|
35
|
+
size: { default: "normal" },
|
|
36
|
+
titleTag: { default: "h4" }
|
|
36
37
|
},
|
|
37
38
|
emits: ["back"],
|
|
38
|
-
setup(c, { emit:
|
|
39
|
-
let
|
|
40
|
-
return (t,
|
|
41
|
-
class: l(
|
|
39
|
+
setup(c, { emit: D }) {
|
|
40
|
+
let O = c, k = D, A = t(() => O.size === "compact"), j = t(() => O.variant === "hero"), M = t(() => O.variant === "bar" ? ["z-20 border-b border-border/80 bg-surface/90 backdrop-blur-sm", O.sticky && "sticky"] : O.sticky && "sticky z-20 bg-background/90 backdrop-blur-sm"), N = t(() => O.variant === "bar" ? ["flex-wrap items-center gap-x-6 gap-y-4", A.value ? "px-4 py-3 sm:px-6" : "px-4 py-5 sm:px-6"] : ["flex-col gap-4 sm:flex-row sm:items-center", O.variant === "plain" && A.value && "py-2"]), P = t(() => j.value ? "size-12 rounded-14 border border-primary/25 bg-surface text-primary-strong shadow-sm ring-4 ring-primary/5 [&_svg]:size-6" : ["bg-primary text-white has-[img]:border has-[img]:border-border has-[img]:bg-surface has-[img]:p-2 [&_img]:size-full [&_img]:object-contain", A.value ? "size-9 rounded-10 [&_svg]:size-5" : "size-11 rounded-14 [&_svg]:size-6"]), F = t(() => j.value ? "text-3xl text-balance sm:text-[28px]" : ["truncate", A.value ? "text-lg" : "text-2xl md:text-3xl"]);
|
|
41
|
+
return (t, D) => (d(), i("header", {
|
|
42
|
+
class: l(M.value),
|
|
42
43
|
style: u(c.sticky ? { top: c.top } : void 0),
|
|
43
44
|
"data-ac-ds": "",
|
|
44
45
|
"data-testid": "ac-header"
|
|
45
|
-
}, [
|
|
46
|
-
|
|
46
|
+
}, [j.value && t.$slots.breadcrumb ? (d(), i("div", b, [f(t.$slots, "breadcrumb")])) : r("", !0), a("div", { class: l(j.value && "relative isolate overflow-hidden rounded-16 border border-border bg-surface px-5 py-5 shadow-xs sm:px-7 sm:py-6") }, [j.value ? (d(), i(e, { key: 0 }, [
|
|
47
|
+
D[1] ||= a("div", {
|
|
47
48
|
class: "absolute inset-0 -z-10 bg-linear-to-br from-primary/10 via-primary/3 to-transparent",
|
|
48
49
|
"aria-hidden": "true"
|
|
49
50
|
}, null, -1),
|
|
50
|
-
|
|
51
|
+
D[2] ||= a("div", {
|
|
51
52
|
class: "absolute inset-0 -z-10 bg-[radial-gradient(circle_at_1px_1px,var(--color-border)_1px,transparent_0)] bg-size-[18px_18px] [mask-image:linear-gradient(to_left,black,transparent_60%)]",
|
|
52
53
|
"aria-hidden": "true"
|
|
53
54
|
}, null, -1),
|
|
@@ -56,7 +57,7 @@ var y = {
|
|
|
56
57
|
class: "absolute -right-8 -bottom-12 -z-10 size-48 text-primary/6",
|
|
57
58
|
"aria-hidden": "true"
|
|
58
59
|
})) : r("", !0)
|
|
59
|
-
], 64)) : r("", !0), a("div", { class: l(["flex justify-between",
|
|
60
|
+
], 64)) : r("", !0), a("div", { class: l(["flex justify-between", N.value]) }, [a("div", { class: l(["flex min-w-0 items-center gap-3.5", j.value && "gap-4"]) }, [
|
|
60
61
|
c.backButton ? (d(), i("button", {
|
|
61
62
|
key: 0,
|
|
62
63
|
type: "button",
|
|
@@ -64,31 +65,34 @@ var y = {
|
|
|
64
65
|
"aria-label": "Back",
|
|
65
66
|
"data-ac-ds": "",
|
|
66
67
|
"data-testid": "ac-header-back",
|
|
67
|
-
onClick:
|
|
68
|
-
}, [s(h(
|
|
68
|
+
onClick: D[0] ||= (e) => k("back")
|
|
69
|
+
}, [s(h(_), {
|
|
69
70
|
class: "size-4",
|
|
70
71
|
"aria-hidden": "true"
|
|
71
72
|
})])) : r("", !0),
|
|
72
73
|
t.$slots.icon || c.icon ? (d(), i("span", {
|
|
73
74
|
key: 1,
|
|
74
|
-
class: l(["inline-flex shrink-0 items-center justify-center overflow-hidden",
|
|
75
|
+
class: l(["inline-flex shrink-0 items-center justify-center overflow-hidden", P.value]),
|
|
75
76
|
"aria-hidden": "true"
|
|
76
77
|
}, [f(t.$slots, "icon", {}, () => [(d(), n(p(c.icon)))])], 2)) : r("", !0),
|
|
77
|
-
a("div",
|
|
78
|
-
!
|
|
79
|
-
f(t.$slots, "title", {}, () => [a("div",
|
|
80
|
-
|
|
81
|
-
|
|
78
|
+
a("div", x, [
|
|
79
|
+
!j.value && t.$slots.breadcrumb ? (d(), i("div", S, [f(t.$slots, "breadcrumb")])) : r("", !0),
|
|
80
|
+
f(t.$slots, "title", {}, () => [a("div", C, [
|
|
81
|
+
(d(), n(p(c.titleTag), { class: l(["font-heading font-semibold tracking-tight text-heading", F.value]) }, {
|
|
82
|
+
default: g(() => [o(m(c.title), 1)]),
|
|
83
|
+
_: 1
|
|
84
|
+
}, 8, ["class"])),
|
|
85
|
+
c.countLabel ? (d(), i("span", w, m(c.countLabel), 1)) : r("", !0),
|
|
82
86
|
f(t.$slots, "title-extra")
|
|
83
87
|
]), c.subtitle ? (d(), i("p", {
|
|
84
88
|
key: 0,
|
|
85
89
|
class: l(["mt-1 max-w-prose text-base text-muted", c.variant === "bar" ? "truncate" : "leading-relaxed"])
|
|
86
90
|
}, m(c.subtitle), 3)) : r("", !0)]),
|
|
87
|
-
t.$slots.meta ? (d(), i("div",
|
|
91
|
+
t.$slots.meta ? (d(), i("div", T, [f(t.$slots, "meta")])) : r("", !0)
|
|
88
92
|
])
|
|
89
93
|
], 2), t.$slots.default || c.docsHref ? (d(), i("div", {
|
|
90
94
|
key: 0,
|
|
91
|
-
class: l(["flex shrink-0 flex-wrap items-center gap-2",
|
|
95
|
+
class: l(["flex shrink-0 flex-wrap items-center gap-2", j.value && "self-start sm:self-center"])
|
|
92
96
|
}, [c.docsHref ? (d(), i("a", {
|
|
93
97
|
key: 0,
|
|
94
98
|
href: c.docsHref,
|
|
@@ -97,18 +101,18 @@ var y = {
|
|
|
97
101
|
class: "inline-flex h-8 items-center gap-2 rounded-10 border border-border bg-background/80 px-3 text-base font-medium text-heading shadow-xs backdrop-blur-sm transition-colors duration-200 hover:border-primary/40 hover:text-primary-strong focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none",
|
|
98
102
|
"data-testid": "ac-header-docs"
|
|
99
103
|
}, [
|
|
100
|
-
s(h(
|
|
104
|
+
s(h(v), {
|
|
101
105
|
class: "size-4",
|
|
102
106
|
"aria-hidden": "true"
|
|
103
107
|
}),
|
|
104
|
-
|
|
105
|
-
s(h(
|
|
108
|
+
D[3] ||= o(" Documentation ", -1),
|
|
109
|
+
s(h(y), {
|
|
106
110
|
class: "size-3 text-muted",
|
|
107
111
|
"aria-hidden": "true"
|
|
108
112
|
}),
|
|
109
|
-
|
|
110
|
-
], 8,
|
|
113
|
+
D[4] ||= a("span", { class: "sr-only" }, "(opens in a new tab)", -1)
|
|
114
|
+
], 8, E)) : r("", !0), f(t.$slots, "default")], 2)) : r("", !0)], 2)], 2)], 6));
|
|
111
115
|
}
|
|
112
116
|
});
|
|
113
117
|
//#endregion
|
|
114
|
-
export {
|
|
118
|
+
export { D as default };
|