@ac-design/design-system 1.0.3 → 2.1.0

package/dist/lib/components/AcGraphChart.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,578 @@
+import e from "./AcTooltip.js";
+import t from "../charts/ChartFrame.js";
+import { bindItemHover as n, useEChart as r } from "../charts/echarts.js";
+import { chartColor as i } from "../charts/shared.js";
+import { LABEL_DETAILS as a, labelDetail as o, layoutGraph as s, nodeImage as c, nodeKind as l, nodeName as u, overhang as d, truncate as ee } from "../charts/graph.js";
+import { Fragment as f, computed as p, createBlock as te, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createSlots as ne, createTextVNode as re, createVNode as ie, defineComponent as _, guardReactiveProps as ae, mergeModels as v, normalizeClass as oe, normalizeProps as se, normalizeStyle as ce, openBlock as y, ref as b, renderList as le, renderSlot as ue, resolveDynamicComponent as de, toDisplayString as x, unref as fe, useModel as pe, watch as me, withCtx as S } from "vue";
+import { Box as he, Maximize as ge, Network as _e, ZoomIn as ve, ZoomOut as ye } from "@lucide/vue";
+import { graphic as C, use as be } from "echarts/core";
+import { GraphChart as xe } from "echarts/charts";
+//#region src/lib/components/AcGraphChart.vue?vue&type=script&setup=true&lang.ts
+var Se = { class: "font-medium text-heading" }, Ce = {
+	key: 0,
+	class: "mt-0.5 flex items-center gap-1.5 text-muted"
+}, we = {
+	key: 2,
+	class: "mt-1.5 border-t border-border pt-1.5 text-muted"
+}, Te = {
+	key: 0,
+	class: "w-10 text-center text-xs text-muted tabular-nums",
+	"aria-hidden": "true"
+}, Ee = ["aria-label", "onClick"], w = "graph", De = 1.25, T = 16, Oe = 48, ke = .2, Ae = 4, E = "", D = /*@__PURE__*/ _({
+	__name: "AcGraphChart",
+	props: /*@__PURE__*/ v({
+		nodes: {},
+		links: { default: () => [] },
+		direction: { default: "LR" },
+		height: { default: 480 },
+		shape: { default: "circle" },
+		kindColors: { default: void 0 },
+		kindIcons: { default: void 0 },
+		arrows: {
+			type: Boolean,
+			default: !0
+		},
+		zoom: {
+			type: Boolean,
+			default: !0
+		},
+		legend: { default: "bottom" },
+		tooltip: {
+			type: Boolean,
+			default: !0
+		},
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		emptyText: { default: "No resources to show yet" },
+		title: { default: "" },
+		description: { default: "" },
+		renderer: { default: "canvas" },
+		animation: {
+			type: Boolean,
+			default: !0
+		}
+	}, {
+		selected: { default: null },
+		selectedModifiers: {}
+	}),
+	emits: /*@__PURE__*/ v(["node-click"], ["update:selected"]),
+	setup(_, { emit: v }) {
+		be([xe]);
+		let D = _, O = pe(_, "selected"), je = v, Me = [.25, 1.5], Ne = [
+			["wheel", ut],
+			["mousewheel", ut],
+			["touchstart", dt],
+			["touchmove", dt],
+			["touchend", dt]
+		], k = {
+			success: "var(--color-success)",
+			info: "var(--color-info)",
+			warning: "var(--color-warning)",
+			danger: "var(--color-danger)",
+			neutral: void 0
+		}, Pe = {
+			success: "Healthy",
+			info: "Info",
+			warning: "Warning",
+			danger: "Critical",
+			neutral: ""
+		}, Fe = {
+			success: "text-success-strong",
+			info: "text-info-strong",
+			warning: "text-warning-strong",
+			danger: "text-danger-strong",
+			neutral: "text-muted"
+		}, Ie = {
+			success: "bg-success",
+			info: "bg-info",
+			warning: "bg-warning",
+			danger: "bg-danger",
+			neutral: "bg-border-dark"
+		}, A = b(), j = b([]), M = b(0), N = b(null), Le = b(), P = b(null), F = null, I = null, L = !1, R = null, Re = /* @__PURE__ */ new Map(), z = /* @__PURE__ */ new Map(), B = p(() => new Map(D.nodes.map((e) => [e.id, e]))), ze = p(() => [...new Set(D.nodes.map((e) => e.kind ?? E).filter((e) => e !== E))]), Be = p(() => new Map(ze.value.map((e, t) => [e, i(D.kindColors?.[e], t)])));
+		function Ve(e) {
+			return Be.value.get(e.kind ?? E) ?? "var(--color-muted)";
+		}
+		function V(e) {
+			return e ?? "neutral";
+		}
+		function H(e) {
+			return e.statusText || Pe[V(e.status)];
+		}
+		function U(e) {
+			return e.status === "warning" || e.status === "danger";
+		}
+		function He(e) {
+			return e.icon ?? D.kindIcons?.[e.kind ?? E] ?? he;
+		}
+		let W = p(() => D.nodes.filter((e) => !j.value.includes(e.kind ?? E))), G = p(() => new Set(W.value.map((e) => e.id))), K = p(() => D.links.filter((e) => B.value.has(e.source) && B.value.has(e.target))), Ue = p(() => K.value.filter((e) => G.value.has(e.source) && G.value.has(e.target))), We = p(() => s(W.value.map((e) => ({
+			id: e.id,
+			label: e.label,
+			kind: e.kind ?? E,
+			group: e.group,
+			badge: U(e)
+		})), Ue.value.map((e) => ({
+			source: e.source,
+			target: e.target,
+			label: e.label ?? ""
+		})), D.direction)), q = p(() => {
+			let e = We.value, { centers: t } = e, n = Math.max(t.maxX - t.minX, 2), r = Math.max(t.maxY - t.minY, 2), i = Math.max(M.value - 32, 1), s = Math.max(D.height - T - (D.zoom ? Oe : T), 1), c = 1, l = "full", u = d(e, c, l);
+			for (l of a) {
+				u = d(e, c, l);
+				for (let t = 0; t < 4; t++) c = Math.max(Math.min(1, (i - u.left - u.right) / n, (s - u.top - u.bottom) / r), .05), u = d(e, c, l);
+				if (a.indexOf(o(c)) <= a.indexOf(l)) break;
+			}
+			let ee = n * c + u.left + u.right, f = r * c + u.top + u.bottom;
+			return {
+				layout: e,
+				scale: c,
+				detail: l,
+				left: T + (i - ee) / 2 + u.left,
+				top: T + (s - f) / 2 + u.top,
+				width: n * c,
+				height: r * c,
+				center: [(t.minX + t.maxX) / 2, (t.minY + t.maxY) / 2]
+			};
+		}), Ge = p(() => O.value && G.value.has(O.value) ? O.value : void 0), Ke = p(() => {
+			let e = Ge.value;
+			if (!e) return null;
+			let t = /* @__PURE__ */ new Set([e]);
+			for (let n of K.value) n.source === e && t.add(n.target), n.target === e && t.add(n.source);
+			return t;
+		}), qe = p(() => Math.round((P.value ?? q.value.scale) * 100)), J = p(() => P.value === null ? q.value.detail : o(P.value));
+		function Y(e) {
+			return e.replace(/[{}]/g, "");
+		}
+		function Je(e, t, n) {
+			let r = V(t.status), i = He(t), a = n ? e.primary : k[r] ? e.color(k[r]) : e.borderDark, o = e.color(Ve(t)), s = n ? 3 : 2, l = [
+				typeof i == "string" ? `t:${i}` : `c:${Ye(i)}`,
+				o,
+				a,
+				s,
+				e.surface,
+				D.shape
+			].join("|"), u = Re.get(l);
+			return u || (u = c({
+				icon: i,
+				iconColor: o,
+				fill: e.surface,
+				ring: a,
+				ringWidth: s,
+				shape: D.shape,
+				font: e.font
+			}), Re.set(l, u)), u;
+		}
+		function Ye(e) {
+			let t = z.get(e);
+			return t === void 0 && (t = z.size, z.set(e, t)), t;
+		}
+		function Xe(e) {
+			let t = U(e) ? `{${e.status}|!}` : "";
+			if (J.value === "badge") return t;
+			let n = `${t ? `${t} ` : ""}{name|${Y(u(e.label))}}`;
+			return e.kind && J.value === "full" ? `${n}\n{kind|${Y(l(e.kind))}}` : n;
+		}
+		function Ze(e) {
+			let t = q.value, n = F?.frame === t ? F : null, r = Ke.value, i = Ge.value, a = new Map(W.value.map((e, t) => [e.id, t])), o = (t, n) => ({
+				backgroundColor: e.color(t),
+				color: e.color(n),
+				width: 14,
+				height: 14,
+				lineHeight: 14,
+				borderRadius: 7,
+				align: "center",
+				fontSize: 10,
+				fontWeight: 700
+			});
+			return {
+				id: w,
+				type: "graph",
+				layout: "none",
+				left: t.left,
+				top: t.top,
+				width: t.width,
+				height: t.height,
+				roam: !0,
+				roamTrigger: "global",
+				scaleLimit: {
+					min: Math.min(1, Me[0] / t.scale),
+					max: Math.max(1, Me[1] / t.scale)
+				},
+				zoom: n?.zoom ?? 1,
+				center: n?.center ?? t.center,
+				nodeScaleRatio: 1,
+				cursor: "pointer",
+				emphasis: { disabled: !0 },
+				edgeSymbol: D.arrows ? ["none", "arrow"] : ["none", "none"],
+				edgeSymbolSize: [0, 8],
+				label: {
+					show: !0,
+					position: "bottom",
+					distance: 6,
+					fontFamily: e.font,
+					rich: {
+						name: {
+							fontSize: 12,
+							lineHeight: 16,
+							fontWeight: 500,
+							color: e.heading,
+							fontFamily: e.font
+						},
+						kind: {
+							fontSize: 11,
+							lineHeight: 14,
+							color: e.muted,
+							fontFamily: e.font
+						},
+						warning: o("var(--color-warning)", "var(--color-on-warning)"),
+						danger: o("var(--color-danger)", "var(--color-white)")
+					}
+				},
+				edgeLabel: {
+					show: !1,
+					fontSize: 11,
+					fontFamily: e.font,
+					color: e.muted,
+					backgroundColor: e.sunken,
+					padding: [2, 6],
+					borderRadius: 6
+				},
+				data: W.value.map((n) => {
+					let [a, o] = t.layout.positions.get(n.id), s = r && !r.has(n.id) ? ke : 1;
+					return {
+						id: n.id,
+						name: n.id,
+						x: a,
+						y: o,
+						symbol: Je(e, n, n.id === i),
+						symbolSize: 40 * t.scale,
+						itemStyle: { opacity: s },
+						label: {
+							formatter: Xe(n),
+							opacity: s
+						}
+					};
+				}),
+				links: Ue.value.map((t) => {
+					let n = !!i && (t.source === i || t.target === i), r = V(t.status), o = n ? e.primary : k[r] ? e.color(k[r]) : e.borderDark, s = i && !n ? ke : 1;
+					return {
+						source: a.get(t.source),
+						target: a.get(t.target),
+						lineStyle: {
+							color: o,
+							width: n ? 2.5 : 1.5,
+							type: t.dashed ? "dashed" : "solid",
+							opacity: s,
+							curveness: 0
+						},
+						label: t.label && J.value === "full" ? {
+							show: !0,
+							formatter: Y(t.label),
+							opacity: s
+						} : void 0
+					};
+				})
+			};
+		}
+		let X = r({
+			host: A,
+			renderer: () => D.renderer,
+			option: (e) => ({
+				animation: D.animation && !e.reducedMotion,
+				animationDurationUpdate: 300,
+				textStyle: { fontFamily: e.font },
+				series: [Ze(e)]
+			}),
+			setup: Qe
+		});
+		function Qe(e) {
+			let t = e.getZr();
+			R = {
+				root: new C.Group({ silent: !0 }),
+				items: /* @__PURE__ */ new Map()
+			}, t.add(R.root), n(e, st, ct), t.on("mousedown", (e) => {
+				I = [e.offsetX, e.offsetY];
+			}), t.on("click", (e) => {
+				!e.target && !$e(e) && (O.value = null);
+			}), e.on("click", (e) => {
+				let t = e, n = t.data?.id ? B.value.get(t.data.id) : void 0;
+				t.dataType === "node" && n && t.event?.event && !$e(t.event) && lt(n, t.event.event);
+			}), e.on("graphroam", () => tt(e)), e.on("rendered", () => et(e));
+		}
+		function $e(e) {
+			return !!I && Math.hypot(e.offsetX - I[0], e.offsetY - I[1]) > Ae;
+		}
+		function Z(e, t) {
+			return e.convertToPixel({ seriesId: w }, t);
+		}
+		function et(e) {
+			let t = X.theme.value;
+			if (!R || !t) return;
+			let n = /* @__PURE__ */ new Set();
+			for (let r of q.value.layout.groups) {
+				let i = Z(e, [r.x, r.y]), a = Z(e, [r.x + r.width, r.y + r.height]);
+				if (!i || !a) continue;
+				n.add(r.name);
+				let o = (a[0] - i[0]) / r.width, s = {
+					x: i[0],
+					y: i[1],
+					width: a[0] - i[0],
+					height: a[1] - i[1],
+					r: 10 * o
+				}, c = i[1] + 15 * o, l = [
+					s.x,
+					s.y,
+					s.width,
+					s.height,
+					t.surface,
+					t.borderDark,
+					t.muted
+				].map(String).join("|"), u = R.items.get(r.name);
+				u || (u = {
+					rect: new C.Rect({
+						z: 1,
+						silent: !0
+					}),
+					text: new C.Text({
+						z: 1,
+						silent: !0
+					}),
+					sig: ""
+				}, R.root.add(u.rect), R.root.add(u.text), R.items.set(r.name, u)), u.sig !== l && (u.sig = l, u.rect.setShape(s), u.rect.setStyle({
+					fill: t.color("var(--color-surface-muted)"),
+					stroke: t.borderDark,
+					lineWidth: 1
+				}), u.text.setStyle({
+					text: ee(r.name, 40),
+					x: i[0] + 10 * o,
+					y: c,
+					fill: t.muted,
+					font: `500 11px ${t.font}`,
+					verticalAlign: "middle"
+				}));
+			}
+			for (let [e, t] of R.items) n.has(e) || (R.root.remove(t.rect), R.root.remove(t.text), R.items.delete(e));
+		}
+		function tt(e) {
+			N.value = null, et(e);
+			let t = q.value, n = e.convertFromPixel({ seriesId: w }, [t.left + t.width / 2, t.top + t.height / 2]), r = Z(e, [0, 0]), i = Z(e, [100, 0]);
+			if (!n || !r || !i) return;
+			let a = (i[0] - r[0]) / 100;
+			F = {
+				frame: t,
+				zoom: a / t.scale,
+				center: n
+			}, P.value = Math.round(a * 1e3) / 1e3;
+		}
+		let nt = p(() => ze.value.map((e) => ({
+			key: e,
+			name: e,
+			color: Be.value.get(e)
+		})));
+		function rt(e) {
+			let t = (e) => B.value.get(e)?.label ?? e;
+			return {
+				targets: K.value.filter((t) => t.source === e).map((e) => t(e.target)),
+				sources: K.value.filter((t) => t.target === e).map((e) => t(e.source))
+			};
+		}
+		let it = p(() => ({
+			columns: [
+				"Resource",
+				"Kind",
+				"Status",
+				"Connects to",
+				"Connected from"
+			],
+			rows: D.nodes.map((e) => {
+				let { targets: t, sources: n } = rt(e.id);
+				return [
+					e.label,
+					e.kind ?? "",
+					H(e),
+					t.join(", ") || "None",
+					n.join(", ") || "None"
+				];
+			})
+		}));
+		function at(e, t) {
+			return `${e} ${t}${e === 1 ? "" : "s"}`;
+		}
+		let ot = p(() => {
+			let e = D.nodes.filter(U).length, t = `Topology: ${at(D.nodes.length, "resource")}, ${at(K.value.length, "connection")}${e ? `, ${e} with problems` : ""}.`;
+			return [D.title, D.description || t].filter(Boolean).join(". ");
+		}), Q = p(() => N.value ? B.value.get(String(N.value.datum.id)) : void 0), $ = p(() => Q.value ? {
+			node: Q.value,
+			...rt(Q.value.id)
+		} : void 0);
+		function st(e) {
+			let t = e.dataType === "node" ? B.value.get(String(e.data?.id)) : void 0;
+			if (!t || !D.tooltip) return ct();
+			N.value = {
+				clientX: e.clientX,
+				clientY: e.clientY,
+				title: t.label,
+				items: [],
+				datum: t,
+				index: e.dataIndex
+			};
+		}
+		function ct() {
+			N.value = null;
+		}
+		function lt(e, t) {
+			O.value = O.value === e.id ? null : e.id, Le.value?.focus({ preventScroll: !0 }), je("node-click", e, t);
+		}
+		function ut(e) {
+			let t = e;
+			!t.ctrlKey && !t.metaKey && e.stopPropagation();
+		}
+		function dt(e) {
+			let t = e;
+			t.type === "touchstart" && t.touches.length > 1 && (L = !0), L || e.stopPropagation(), t.type === "touchend" && !t.touches.length && (L = !1);
+		}
+		function ft(e) {
+			let t = X.chart.value;
+			t && t.dispatchAction({
+				type: "graphRoam",
+				seriesId: w,
+				zoom: e,
+				originX: t.getWidth() / 2,
+				originY: t.getHeight() / 2
+			});
+		}
+		function pt() {
+			ft(De);
+		}
+		function mt() {
+			ft(1 / De);
+		}
+		function ht() {
+			let e = X.chart.value, t = q.value;
+			if (!e) return;
+			let n = F?.frame === t ? F.zoom : 1, r = Z(e, t.center);
+			r && (e.dispatchAction({
+				type: "graphRoam",
+				seriesId: w,
+				zoom: 1 / n,
+				originX: r[0],
+				originY: r[1]
+			}), e.dispatchAction({
+				type: "graphRoam",
+				seriesId: w,
+				dx: t.left + t.width / 2 - r[0],
+				dy: t.top + t.height / 2 - r[1]
+			}), P.value = null);
+		}
+		let gt = [
+			{
+				label: "Zoom out",
+				icon: ye,
+				action: mt
+			},
+			{
+				label: "Zoom in",
+				icon: ve,
+				action: pt
+			},
+			{
+				label: "Fit to view",
+				icon: ge,
+				action: ht
+			}
+		];
+		function _t(e) {
+			e.key === "Escape" && !e.defaultPrevented && O.value && (e.preventDefault(), O.value = null);
+		}
+		return me(q, () => P.value = null), me(A, (e, t) => {
+			for (let [n, r] of Ne) t?.removeEventListener(n, r, { capture: !0 }), e?.addEventListener(n, r, {
+				capture: !0,
+				passive: !0
+			});
+		}), (n, r) => (y(), te(t, {
+			hidden: j.value,
+			"onUpdate:hidden": r[0] ||= (e) => j.value = e,
+			width: M.value,
+			"onUpdate:width": r[1] ||= (e) => M.value = e,
+			testid: "ac-graph-chart",
+			height: _.height,
+			loading: _.loading,
+			empty: !_.nodes.length,
+			"empty-text": _.emptyText,
+			"empty-icon": fe(_e),
+			legend: _.legend,
+			"legend-items": nt.value,
+			summary: ot.value,
+			title: _.title,
+			description: _.description,
+			table: it.value,
+			tip: N.value,
+			tooltip: _.tooltip,
+			onKeydown: _t
+		}, ne({
+			tooltip: S(() => [$.value ? ue(n.$slots, "tooltip", se(ae($.value)), () => [
+				g("p", Se, x($.value.node.label), 1),
+				$.value.node.kind ? (y(), h("p", Ce, [g("span", {
+					class: "size-2 shrink-0 rounded-full",
+					style: ce({ backgroundColor: Ve($.value.node) }),
+					"aria-hidden": "true"
+				}, null, 4), re(" " + x($.value.node.kind), 1)])) : m("", !0),
+				H($.value.node) ? (y(), h("p", {
+					key: 1,
+					class: oe(["mt-1 flex items-center gap-1.5", Fe[V($.value.node.status)]])
+				}, [g("span", {
+					class: oe(["size-2 shrink-0 rounded-full", Ie[V($.value.node.status)]]),
+					"aria-hidden": "true"
+				}, null, 2), re(" " + x(H($.value.node)), 1)], 2)) : m("", !0),
+				$.value.node.description ? (y(), h("p", we, x($.value.node.description), 1)) : m("", !0)
+			], void 0, 0) : m("", !0)]),
+			default: S(() => [g("div", {
+				ref_key: "host",
+				ref: A,
+				class: "size-full"
+			}, null, 512)]),
+			_: 2
+		}, [_.zoom ? {
+			name: "controls",
+			fn: S(() => [g("div", {
+				ref_key: "controls",
+				ref: Le,
+				class: "absolute right-3 bottom-3 flex items-center gap-0.5 rounded-full border border-border bg-surface/90 p-1 shadow-sm backdrop-blur focus:outline-none",
+				role: "group",
+				"aria-label": "Zoom",
+				tabindex: "-1"
+			}, [(y(), h(f, null, le(gt, (t) => (y(), h(f, { key: t.label }, [t.label === "Zoom in" ? (y(), h("span", Te, x(qe.value) + "%", 1)) : m("", !0), ie(e, { content: t.label }, {
+				default: S(() => [g("button", {
+					type: "button",
+					class: "inline-flex size-7 cursor-pointer items-center justify-center rounded-full text-muted transition-colors hover:bg-surface-sunken hover:text-heading focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none",
+					"aria-label": t.label,
+					onClick: t.action
+				}, [(y(), te(de(t.icon), {
+					class: "size-4",
+					"aria-hidden": "true"
+				}))], 8, Ee)]),
+				_: 2
+			}, 1032, ["content"])], 64))), 64))], 512)]),
+			key: "0"
+		} : void 0]), 1032, [
+			"hidden",
+			"width",
+			"height",
+			"loading",
+			"empty",
+			"empty-text",
+			"empty-icon",
+			"legend",
+			"legend-items",
+			"summary",
+			"title",
+			"description",
+			"table",
+			"tip",
+			"tooltip"
+		]));
+	}
+});
+//#endregion
+export { D as default };

package/dist/lib/components/AcHeader.vue.d.ts

@@ -1,26 +1,37 @@
+import type { Component } from "vue";
 export interface Props {
     /** Page title. */
     title?: string;
     /** Line under the title. */
     subtitle?: string;
+    /** `bar` is a full-width strip with a bottom border, for detail pages. `plain` sits on the page with no frame, like cloud-ui's list pages. `hero` is a card with a primary wash, a dot grid and the icon as a watermark, for create pages. */
+    variant?: "bar" | "plain" | "hero";
+    /** A Lucide icon for the tile before the title (and the `hero` watermark). The `icon` slot replaces it. */
+    icon?: Component;
+    /** A green pill after the title, e.g. "12 databases". */
+    countLabel?: string;
+    /** Adds a "Documentation" link before the actions, opening in a new tab. */
+    docsHref?: string;
     /** Shows a back button that emits `back`. */
     backButton?: boolean;
     /** Sticks to the top while the page scrolls. */
     sticky?: boolean;
-    /** Distance from the top when sticky, e.g. `"56px"` under an app navbar. */
+    /** Distance from the top when sticky, e.g. `"72px"` under an app navbar. */
     top?: string;
-    /** `normal` suits a page's main header. `compact` has a 14px title and less padding, for dense pages and forms. */
+    /** `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. */
     size?: "normal" | "compact";
 }
 type __VLS_Slots = {
-    /** A logo or icon before the title, e.g. the database engine's logo on a resource page. Shown in a 40px tile. */
+    /** 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. */
     icon?: () => unknown;
-    /** Breadcrumb above the title. */
+    /** Breadcrumb above the title (above the card for `hero`). */
     breadcrumb?: () => unknown;
     /** Replaces the title and subtitle. */
     title?: () => unknown;
-    /** Next to the title, e.g. a status badge. */
+    /** Next to the title and count, e.g. a status badge. */
     "title-extra"?: () => unknown;
+    /** Under the subtitle, e.g. the region, created date and owner. */
+    meta?: () => unknown;
     /** Right side: the page's actions. The primary action goes last. */
     default?: () => unknown;
 };
@@ -29,11 +40,15 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     onBack?: (() => any) | undefined;
 }>, {
+    variant: "bar" | "plain" | "hero";
     title: string;
+    icon: Component;
     size: "normal" | "compact";
     top: string;
     subtitle: string;
     sticky: boolean;
+    countLabel: string;
+    docsHref: string;
     backButton: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;