@ac-design/design-system 2.6.1 → 2.7.0

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

@@ -18,20 +18,32 @@ var ue = {
 }, ge = {
 	key: 1,
 	class: "text-xs font-semibold"
-}, _e = [
+}, _e = {
+	key: 1,
+	class: "min-w-0 flex-1"
+}, ve = { class: "block truncate" }, ye = { class: "block truncate text-xs font-normal text-muted" }, be = [
 	"disabled",
 	"aria-expanded",
 	"aria-controls",
 	"title",
 	"onClick"
-], ve = {
+], xe = {
 	key: 1,
 	class: "text-xs font-semibold"
-}, ye = ["id"], be = { class: "min-w-0 flex-1 truncate" }, xe = [
+}, Se = {
+	key: 1,
+	class: "min-w-0 flex-1"
+}, Ce = { class: "block truncate" }, we = { class: "block truncate text-xs font-normal text-muted" }, Te = ["id"], Ee = {
+	key: 1,
+	class: "min-w-0 flex-1"
+}, De = { class: "block truncate" }, Oe = { class: "block truncate text-xs font-normal text-muted" }, ke = {
+	key: 2,
+	class: "min-w-0 flex-1 truncate"
+}, Ae = [
 	"aria-label",
 	"aria-expanded",
 	"title"
-], Se = { key: 2 }, Ce = {
+], je = { key: 2 }, Me = {
 	key: 1,
 	class: "min-w-0 flex-1"
 }, C = /*@__PURE__*/ s({
@@ -75,19 +87,19 @@ var ue = {
 			success: "bg-success text-white",
 			warning: "bg-warning text-on-warning",
 			danger: "bg-danger text-white"
-		}, we = {
+		}, Ne = {
 			neutral: "bg-muted",
 			primary: "bg-primary",
 			info: "bg-info",
 			success: "bg-success",
 			warning: "bg-warning",
 			danger: "bg-danger"
-		}, Te = {
+		}, Pe = {
 			none: ["border-transparent text-heading/80 hover:border-border hover:bg-accent-hover hover:text-heading", "border-primary/35 bg-primary/10 text-heading shadow-xs shadow-primary/10"],
 			danger: ["border-transparent text-danger-strong hover:border-danger/25 hover:bg-danger/10", "border-danger/25 bg-danger/10 text-danger-strong"],
 			warning: ["border-transparent text-warning-strong hover:border-warning/30 hover:bg-warning/10", "border-warning/30 bg-warning/10 text-warning-strong"],
 			success: ["border-transparent text-success-strong hover:border-success/25 hover:bg-success/10", "border-success/25 bg-success/10 text-success-strong"]
-		}, O = ae(), Ee = oe(), k = c()?.appContext, A = k?.components.RouterLink, j = k?.config.globalProperties.$router, M = h(null), N = h(null), P = h(!1), F = h(0), I = h({}), L = null, R = null, z = n(() => !!Ee.default), B = n(() => T.value && !P.value), V = n(() => C.items.flatMap((e) => e.children?.length ? e.children : [e])), De = n(() => {
+		}, O = ae(), Fe = oe(), k = c()?.appContext, A = k?.components.RouterLink, j = k?.config.globalProperties.$router, M = h(null), N = h(null), P = h(!1), F = h(0), I = h({}), L = null, R = null, z = n(() => !!Fe.default), B = n(() => T.value && !P.value), V = n(() => C.items.flatMap((e) => e.children?.length ? e.children : [e])), Ie = n(() => {
 			let e = [];
 			for (let t of C.items) {
 				let n = t.group ?? "", r = e[e.length - 1];
@@ -97,17 +109,19 @@ var ue = {
 				});
 			}
 			return e;
-		}), Oe = n(() => C.items.flatMap((e) => e.children?.length ? e.children.map((t) => ({
+		}), Le = n(() => C.items.flatMap((e) => e.children?.length ? e.children.map((t) => ({
 			value: t.key,
 			label: t.label,
+			description: t.description,
 			group: e.label,
 			disabled: t.disabled
 		})) : [{
 			value: e.key,
 			label: e.label,
+			description: e.description,
 			group: e.group,
 			disabled: e.disabled
-		}])), ke = n(() => {
+		}])), Re = n(() => {
 			if (!j) return "";
 			let e = j.currentRoute.value.path, t = "", n = -1;
 			for (let r of V.value) {
@@ -123,10 +137,10 @@ var ue = {
 				e.startsWith(a) && i.length > n && (t = r.key, n = i.length);
 			}
 			return t;
-		}), H = n(() => F.value ? `calc(${C.top} + ${F.value}px)` : C.top), Ae = n(() => C.sticky ? {
+		}), H = n(() => F.value ? `calc(${C.top} + ${F.value}px)` : C.top), ze = n(() => C.sticky ? {
 			top: H.value,
 			maxHeight: `calc(100dvh - ${H.value} - ${C.bottom})`
-		} : void 0), je = n(() => ({
+		} : void 0), Be = n(() => ({
 			width: B.value ? "calc(56px * var(--ac-scale))" : C.width,
 			minHeight: C.sticky && z.value ? `calc(100dvh - ${H.value} - ${C.bottom})` : void 0
 		}));
@@ -139,7 +153,7 @@ var ue = {
 		function G(e) {
 			return !I.value[e.key];
 		}
-		function Me(e) {
+		function Ve(e) {
 			if (B.value) {
 				T.value = !1, I.value[e.key] = !1;
 				return;
@@ -154,7 +168,7 @@ var ue = {
 			return t === A ? n.to = e.to : t === "a" ? e.disabled ? (n.role = "link", n["aria-disabled"] = "true") : n.href = e.href ?? e.to : (n.type = "button", n.disabled = e.disabled || void 0), n;
 		}
 		function J(e) {
-			let [t, n] = Te[e.tone ?? "none"];
+			let [t, n] = Pe[e.tone ?? "none"];
 			return [U(e) ? n : t, e.disabled ? "pointer-events-none cursor-not-allowed opacity-50" : "cursor-pointer"];
 		}
 		function Y(e, t) {
@@ -164,7 +178,7 @@ var ue = {
 			}
 			w.value = e.key, E("select", e);
 		}
-		function Ne(e) {
+		function He(e) {
 			let t = V.value.find((t) => t.key === e);
 			t && !t.disabled && (w.value = t.key, E("select", t), t.to !== void 0 && j ? j.push(t.to) : t.href && window.location.assign(t.href));
 		}
@@ -197,7 +211,7 @@ var ue = {
 			let e = C.offsetSelectors.map((e) => document.querySelector(e)).filter((e) => !!e), t = () => F.value = e.reduce((e, t) => e + t.offsetHeight, 0);
 			R = new ResizeObserver(t), e.forEach((e) => R.observe(e)), t();
 		}
-		return x(ke, (e) => {
+		return x(Re, (e) => {
 			e && (w.value = e);
 		}, { immediate: !0 }), x(w, (e) => {
 			let t = C.items.find((t) => t.children?.some((t) => t.key === e));
@@ -218,9 +232,9 @@ var ue = {
 			"data-testid": "ac-side-tabs"
 		}, [s.hideTabs ? i("", !0) : (m(), a(t, { key: 0 }, [P.value && s.mobile === "select" ? (m(), a("div", ue, [te(e, {
 			"model-value": w.value || null,
-			options: Oe.value,
+			options: Le.value,
 			label: s.label,
-			"onUpdate:modelValue": Ne
+			"onUpdate:modelValue": He
 		}, null, 8, [
 			"model-value",
 			"options",
@@ -258,13 +272,13 @@ var ue = {
 		}, 1040, ["class", "onClick"]))]))), 128))], 544)], 8, de)) : (m(), a("div", {
 			key: 2,
 			class: "shrink-0 border-r border-border bg-surface transition-[width] duration-200 ease-out-soft motion-reduce:transition-none",
-			style: p(je.value)
+			style: p(Be.value)
 		}, [o("nav", {
 			"aria-label": s.label,
 			class: f(["ac-scrollbar flex flex-col gap-4", [s.sticky && "sticky", B.value ? "p-2" : "p-3"]]),
-			style: p(Ae.value),
+			style: p(ze.value),
 			onKeydown: X
-		}, [(m(!0), a(t, null, g(De.value, (e, n) => (m(), a("div", { key: e.name || `section-${n}` }, [e.name && !B.value ? (m(), a("p", pe, v(e.name), 1)) : e.name && n > 0 ? (m(), a("div", me)) : i("", !0), o("ul", he, [(m(!0), a(t, null, g(e.items, (e) => (m(), a("li", { key: e.key }, [e.children?.length ? (m(), a(t, { key: 1 }, [o("button", {
+		}, [(m(!0), a(t, null, g(Ie.value, (e, n) => (m(), a("div", { key: e.name || `section-${n}` }, [e.name && !B.value ? (m(), a("p", pe, v(e.name), 1)) : e.name && n > 0 ? (m(), a("div", me)) : i("", !0), o("ul", he, [(m(!0), a(t, null, g(e.items, (e) => (m(), a("li", { key: e.key }, [e.children?.length ? (m(), a(t, { key: 1 }, [o("button", {
 			type: "button",
 			"data-side-tab": "",
 			class: f(["group flex w-full cursor-pointer items-center gap-3 rounded-10 border py-2 text-left text-base font-medium transition-all duration-200 select-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-inset disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none", [B.value ? "h-9.5 justify-center" : "px-3", B.value && W(e) ? "border-primary/35 bg-primary/10 text-heading shadow-xs shadow-primary/10" : ["border-transparent hover:border-border hover:bg-accent-hover hover:text-heading", W(e) ? "text-heading" : "text-heading/80"]]]),
@@ -272,7 +286,7 @@ var ue = {
 			"aria-expanded": B.value ? void 0 : G(e),
 			"aria-controls": `${y(O)}-${e.key}`,
 			title: B.value ? e.label : void 0,
-			onClick: (t) => Me(e)
+			onClick: (t) => Ve(e)
 		}, [
 			e.icon || B.value ? (m(), a("span", {
 				key: 0,
@@ -281,18 +295,21 @@ var ue = {
 			}, [e.icon ? (m(), r(_(e.icon), {
 				key: 0,
 				class: "size-4"
-			})) : (m(), a("span", ve, v(e.label.charAt(0)), 1))], 2)) : i("", !0),
-			o("span", { class: f(B.value ? "sr-only" : "min-w-0 flex-1 truncate") }, v(e.label), 3),
+			})) : (m(), a("span", xe, v(e.label.charAt(0)), 1))], 2)) : i("", !0),
+			e.description && !B.value ? (m(), a("span", Se, [o("span", Ce, v(e.label), 1), o("span", we, v(e.description), 1)])) : (m(), a("span", {
+				key: 2,
+				class: f(B.value ? "sr-only" : "min-w-0 flex-1 truncate")
+			}, v(e.label), 3)),
 			!B.value && e.badge !== void 0 && e.badge !== "" ? (m(), a("span", {
-				key: 1,
+				key: 3,
 				class: f(["inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-6 px-2 text-xs leading-none font-medium tabular-nums", D[e.badgeColor ?? "neutral"]])
 			}, v(e.badge), 3)) : i("", !0),
 			B.value ? i("", !0) : (m(), r(y(se), {
-				key: 2,
+				key: 4,
 				class: f(["size-4 shrink-0 text-muted transition-transform duration-200 motion-reduce:transition-none", G(e) && "rotate-90"]),
 				"aria-hidden": "true"
 			}, null, 8, ["class"]))
-		], 10, _e), o("ul", {
+		], 10, be), o("ul", {
 			id: `${y(O)}-${e.key}`,
 			role: "list",
 			class: f(["mt-1 ml-5 flex-col gap-1 border-l border-border pl-2", G(e) && !B.value ? "flex" : "hidden"])
@@ -307,14 +324,14 @@ var ue = {
 					class: f(["size-4 shrink-0", !e.tone && (U(e) ? "text-primary" : "text-muted group-hover:text-heading")]),
 					"aria-hidden": "true"
 				}, null, 8, ["class"])) : i("", !0),
-				o("span", be, v(e.label), 1),
+				e.description ? (m(), a("span", Ee, [o("span", De, v(e.label), 1), o("span", Oe, v(e.description), 1)])) : (m(), a("span", ke, v(e.label), 1)),
 				e.badge !== void 0 && e.badge !== "" ? (m(), a("span", {
-					key: 1,
+					key: 3,
 					class: f(["inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-6 px-2 text-xs leading-none font-medium tabular-nums", D[e.badgeColor ?? "neutral"]])
 				}, v(e.badge), 3)) : i("", !0)
 			]),
 			_: 2
-		}, 1040, ["class", "onClick"]))]))), 128))], 10, ye)], 64)) : (m(), r(_(K(e)), u({
+		}, 1040, ["class", "onClick"]))]))), 128))], 10, Te)], 64)) : (m(), r(_(K(e)), u({
 			key: 0,
 			ref_for: !0
 		}, q(e), {
@@ -332,10 +349,13 @@ var ue = {
 					key: 0,
 					class: "size-4"
 				})) : (m(), a("span", ge, v(e.label.charAt(0)), 1))], 2)) : i("", !0),
-				o("span", { class: f(B.value ? "sr-only" : "min-w-0 flex-1 truncate") }, v(e.label), 3),
-				e.badge !== void 0 && e.badge !== "" ? (m(), a(t, { key: 1 }, [B.value ? (m(), a("span", {
+				e.description && !B.value ? (m(), a("span", _e, [o("span", ve, v(e.label), 1), o("span", ye, v(e.description), 1)])) : (m(), a("span", {
+					key: 2,
+					class: f(B.value ? "sr-only" : "min-w-0 flex-1 truncate")
+				}, v(e.label), 3)),
+				e.badge !== void 0 && e.badge !== "" ? (m(), a(t, { key: 3 }, [B.value ? (m(), a("span", {
 					key: 0,
-					class: f(["absolute top-1 right-1 size-2 rounded-full", we[e.badgeColor ?? "neutral"]]),
+					class: f(["absolute top-1 right-1 size-2 rounded-full", Ne[e.badgeColor ?? "neutral"]]),
 					"aria-hidden": "true"
 				}, null, 2)) : (m(), a("span", {
 					key: 1,
@@ -363,7 +383,7 @@ var ue = {
 			key: 1,
 			class: "size-4 shrink-0 text-muted group-hover:text-heading",
 			"aria-hidden": "true"
-		})), B.value ? i("", !0) : (m(), a("span", Se, "Collapse"))], 10, xe)) : i("", !0)], 46, fe)], 4))], 64)), z.value ? (m(), a("div", Ce, [ie(n.$slots, "default", {
+		})), B.value ? i("", !0) : (m(), a("span", je, "Collapse"))], 10, Ae)) : i("", !0)], 46, fe)], 4))], 64)), z.value ? (m(), a("div", Me, [ie(n.$slots, "default", {
 			active: w.value,
 			compact: P.value
 		})])) : i("", !0)], 2));

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

@@ -38,9 +38,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     onClick?: ((e: MouseEvent) => any) | undefined;
 }>, {
     disabled: boolean;
-    icon: Component;
     href: string;
     to: string | object;
+    icon: Component;
     active: boolean;
     badge: string | number;
     badgeColor: Tone | "neutral";

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

@@ -57,10 +57,10 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
 }>, {
     progress: number;
     value: string | number;
-    icon: Component;
     target: string;
     href: string;
     to: string | Record<string, unknown>;
+    icon: Component;
     size: "small" | "normal";
     status: "default" | "success" | "info" | "warning" | "danger";
     loading: boolean;

package/dist/lib/components/AcTreeChart.js

@@ -0,0 +1,5 @@
+import e from "./AcTreeChart.vue_vue_type_script_setup_true_lang.js";
+//#region src/lib/components/AcTreeChart.vue
+var t = e;
+//#endregion
+export { t as default };

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

@@ -0,0 +1,135 @@
+import type { Component } from "vue";
+import type { ChartRenderer } from "../charts/echarts";
+import type { ChartColor } from "../charts/shared";
+/** A node's health: drawn as the ring colour, and counted as a problem when `warning` or `danger`. */
+export type TreeChartStatus = "success" | "info" | "warning" | "danger" | "neutral";
+/** One node of the tree. Nest nodes in `children`. */
+export interface TreeChartNode {
+    /** Unique id across the whole tree. Events and `reveal()` use it. */
+    id: string;
+    /** Name on the first line of the label, e.g. `demo-vpc`. */
+    name: string;
+    /** Second line of the label, e.g. a CIDR or an instance size. Also in the tooltip. */
+    description?: string;
+    /** Resource type, e.g. "Subnet". Picks the icon and its colour through `kindIcons` and `kindColors`, and shows in the tooltip. */
+    kind?: string;
+    /** A Lucide icon component, or 1–3 characters of text, drawn in the node. Overrides `kindIcons`. Without either the node is a dot. */
+    icon?: Component | string;
+    /** Colours the ring. `warning` and `danger` also add a `!` badge to the label. */
+    status?: TreeChartStatus;
+    /** Status in words for the tooltip and data table, e.g. "NotReady". Defaults to the status name. */
+    statusText?: string;
+    /** A short chip after the name, e.g. `{ text: "Public", tone: "success" }`. */
+    badge?: {
+        text: string;
+        tone?: TreeChartStatus;
+    };
+    /** How the node relates to its parent, shown muted before the name, e.g. "routes via" or ":8080". */
+    relation?: string;
+    /** Draws the node and its label faded, e.g. a reference to a resource whose own entry is elsewhere in the tree. */
+    muted?: boolean;
+    /** Starts this node folded (`true`) or open (`false`), whatever `expandDepth` says. */
+    collapsed?: boolean;
+    children?: TreeChartNode[];
+}
+/** What the `tooltip` slot gets for the hovered node. */
+export interface TreeChartTooltipSlotProps {
+    /** The hovered node, as passed in `data`. */
+    node: TreeChartNode;
+    /** Names of its ancestors, from the root down. */
+    path: string[];
+    /** Whether its children are showing. Always false for a node without children. */
+    expanded: boolean;
+}
+export interface Props {
+    /** The tree: one root node, or an array of roots drawn one under the other. */
+    data: TreeChartNode | TreeChartNode[];
+    /** Layout direction: `LR` (left to right, best for deep or wide trees) or `TB` (top to bottom, for small hierarchies). */
+    direction?: "LR" | "TB";
+    /** How many levels start open: `1` shows the roots' children, `2` their grandchildren too. A node's `collapsed` wins. Pass `Infinity` to open everything. */
+    expandDepth?: number;
+    /** Text to find. Matching names, descriptions and kinds are highlighted, and their branches open. */
+    search?: string;
+    /** Plot height in px. With `autoHeight`, only used while there's nothing to measure yet. */
+    height?: number;
+    /** Grows the plot to fit the open rows (34px a row, 40px with descriptions, up to 4,000px), so opening a branch never squeezes the rest. */
+    autoHeight?: boolean;
+    /** `polyline` draws square elbows from a parent to its children; `curve` draws one curved line per child. */
+    edgeShape?: "polyline" | "curve";
+    /** Icon colour per kind: `{ Subnet: "chart-2" }`. Without it, kinds take `chart-1`, `chart-2`… in order of first appearance. */
+    kindColors?: Record<string, ChartColor>;
+    /** Icon per kind, so node data can stay plain JSON: `{ Subnet: Network }`. A node's own `icon` wins. */
+    kindIcons?: Record<string, Component | string>;
+    /** Shows zoom in, zoom out and fit buttons in the bottom-right corner. Dragging pans either way. */
+    zoom?: boolean;
+    /** Shows a tooltip with the node's name, kind, status and description on hover. */
+    tooltip?: boolean;
+    /** Shows a skeleton of the same height while data loads. */
+    loading?: boolean;
+    /** Text shown in place of the tree when `data` is empty. */
+    emptyText?: string;
+    /** Accessible name, e.g. "Resources of demo-vpc". Show the visible title in the surrounding card. */
+    title?: string;
+    /** A sentence for screen readers on what the tree shows. Defaults to the number of items, levels and problems. */
+    description?: string;
+    /** `canvas` (default) stays fast with thousands of nodes; `svg` is crisper when printed and lighter for a few dozen. */
+    renderer?: ChartRenderer;
+    /** Animates opening and moving branches. Off when the viewer asks for reduced motion, and above 2,000 nodes. */
+    animation?: boolean;
+}
+type __VLS_Slots = {
+    /** Replaces the tooltip body for the hovered node. */
+    tooltip?: (props: TreeChartTooltipSlotProps) => unknown;
+};
+/** Opens every level down to `depth` (`1` shows the roots' children) and folds the rest. */
+declare function expandToDepth(depth: number): void;
+/** Opens every node. */
+declare function expandAll(): void;
+/** Folds everything below the roots' children. */
+declare function collapseAll(): void;
+/** Opens the ancestors of the node with this id, so it's on screen. */
+declare function reveal(id: string): void;
+/** Resets pan and zoom to show the tree as first drawn. */
+declare function fit(): void;
+declare const __VLS_base: import("vue").DefineComponent<Props, {
+    expandAll: typeof expandAll;
+    collapseAll: typeof collapseAll;
+    expandToDepth: typeof expandToDepth;
+    reveal: typeof reveal;
+    fit: typeof fit;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (node: TreeChartNode) => any;
+    open: (node: TreeChartNode) => any;
+    toggle: (node: TreeChartNode, expanded: boolean) => any;
+    matches: (nodes: TreeChartNode[]) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onSelect?: ((node: TreeChartNode) => any) | undefined;
+    onOpen?: ((node: TreeChartNode) => any) | undefined;
+    onToggle?: ((node: TreeChartNode, expanded: boolean) => any) | undefined;
+    onMatches?: ((nodes: TreeChartNode[]) => any) | undefined;
+}>, {
+    search: string;
+    title: string;
+    description: string;
+    height: number;
+    direction: "LR" | "TB";
+    animation: boolean;
+    tooltip: boolean;
+    loading: boolean;
+    emptyText: string;
+    renderer: ChartRenderer;
+    zoom: boolean;
+    kindColors: Record<string, ChartColor>;
+    kindIcons: Record<string, Component | string>;
+    expandDepth: number;
+    autoHeight: boolean;
+    edgeShape: "polyline" | "curve";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};