@ac-design/design-system 2.6.1 → 2.8.0

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

@@ -1,6 +1,6 @@
 import e from "./AcButton.js";
 import { useToast as t } from "../composables/useToast.js";
-import { Fragment as n, Teleport as r, TransitionGroup as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, nextTick as f, normalizeClass as p, onBeforeUnmount as m, openBlock as h, ref as g, renderList as _, resolveDynamicComponent as v, toDisplayString as y, unref as b, watch as x, withCtx as S } from "vue";
+import { Fragment as n, Teleport as r, TransitionGroup as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, nextTick as f, normalizeClass as p, normalizeStyle as m, onBeforeUnmount as h, openBlock as g, ref as _, renderList as v, resolveDynamicComponent as y, toDisplayString as b, unref as x, watch as S, withCtx as ee } from "vue";
 import { CircleCheck as C, CircleX as w, Info as T, TriangleAlert as E, X as D } from "@lucide/vue";
 //#region src/lib/components/AcToaster.vue?vue&type=script&setup=true&lang.ts
 var O = ["aria-label"], k = {
@@ -8,7 +8,7 @@ var O = ["aria-label"], k = {
 	role: "status",
 	"aria-live": "polite",
 	"aria-atomic": "true"
-}, ee = {
+}, A = {
 	class: "sr-only",
 	role: "alert",
 	"aria-live": "assertive",
@@ -16,10 +16,11 @@ var O = ["aria-label"], k = {
 }, te = ["data-tone"], ne = { class: "flex min-w-0 flex-1 flex-col gap-0.5" }, re = { class: "text-base leading-[1.35] font-semibold break-words text-heading" }, ie = {
 	key: 0,
 	class: "text-[13px] leading-[1.45] break-words text-muted"
-}, ae = ["aria-label", "onClick"], A = ["data-toast-bar"], j = 3, M = "transition-[opacity,translate] duration-300 ease-[cubic-bezier(0.21,1.02,0.73,1)] motion-reduce:duration-150", N = /*@__PURE__*/ d({
+}, j = ["aria-label", "onClick"], M = ["data-toast-bar"], N = 3, P = "transition-[opacity,translate] duration-300 ease-[cubic-bezier(0.21,1.02,0.73,1)] motion-reduce:duration-150", F = /*@__PURE__*/ d({
 	__name: "AcToaster",
 	props: {
 		position: { default: "top-right" },
+		offset: { default: "" },
 		max: { default: 5 },
 		progress: {
 			type: Boolean,
@@ -28,7 +29,7 @@ var O = ["aria-label"], k = {
 		label: { default: "Notifications" }
 	},
 	setup(d) {
-		let N = d, P = {
+		let F = d, I = {
 			neutral: {
 				iconClass: "",
 				box: "border-border bg-surface",
@@ -58,137 +59,139 @@ var O = ["aria-label"], k = {
 				box: "border-border bg-surface",
 				bar: "bg-info"
 			}
-		}, F = {
-			"top-right": "top-20 sm:right-5",
-			"top-center": "top-20 sm:left-1/2 sm:-translate-x-1/2",
-			"bottom-right": "bottom-5 sm:right-5",
-			"bottom-center": "bottom-5 sm:left-1/2 sm:-translate-x-1/2"
-		}, { toasts: I, dismiss: L } = t(), R = g(null), z = g(""), B = g(""), V = /* @__PURE__ */ new Map(), H = !1, U = /* @__PURE__ */ new Set(), W = a(() => N.position.startsWith("top")), G = a(() => I.value.slice(-N.max)), K = a(() => N.position.endsWith("right") ? "opacity-0 motion-safe:translate-x-[120%]" : W.value ? "opacity-0 motion-safe:-translate-y-2" : "opacity-0 motion-safe:translate-y-2");
-		function q(e) {
-			return e.duration > 0 && (e.progress ?? N.progress);
-		}
-		function J(e) {
-			let t = V.get(e);
-			t && !H && (t.started = Date.now(), t.handle = setTimeout(() => L(e), t.remaining), oe(e));
+		}, L = {
+			"top-right": "top-[var(--ac-toaster-offset,80px)] sm:right-5",
+			"top-center": "top-[var(--ac-toaster-offset,80px)] sm:left-1/2 sm:-translate-x-1/2",
+			"bottom-right": "bottom-[var(--ac-toaster-offset,20px)] sm:right-5",
+			"bottom-center": "bottom-[var(--ac-toaster-offset,20px)] sm:left-1/2 sm:-translate-x-1/2"
+		}, { toasts: R, dismiss: z } = t(), B = _(null), V = _(""), H = _(""), U = /* @__PURE__ */ new Map(), W = !1, G = /* @__PURE__ */ new Set(), K = a(() => F.position.startsWith("top")), q = a(() => R.value.slice(-F.max)), J = a(() => F.position.endsWith("right") ? "opacity-0 motion-safe:translate-x-[120%]" : K.value ? "opacity-0 motion-safe:-translate-y-2" : "opacity-0 motion-safe:translate-y-2");
+		function ae(e) {
+			return e.duration > 0 && (e.progress ?? F.progress);
 		}
 		function Y(e) {
-			let t = V.get(e);
+			let t = U.get(e);
+			t && !W && (t.started = Date.now(), t.handle = setTimeout(() => z(e), t.remaining), oe(e));
+		}
+		function X(e) {
+			let t = U.get(e);
 			t?.handle && (clearTimeout(t.handle), t.handle = void 0, t.remaining -= Date.now() - t.started, t.bar?.pause());
 		}
 		async function oe(e) {
 			await f();
-			let t = V.get(e);
+			let t = U.get(e);
 			if (t?.handle) {
 				if (t.bar) return t.bar.play();
-				t.bar = (R.value?.querySelector(`[data-toast-bar="${CSS.escape(e)}"]`))?.animate([{ transform: "scaleX(1)" }, { transform: "scaleX(0)" }], {
+				t.bar = (B.value?.querySelector(`[data-toast-bar="${CSS.escape(e)}"]`))?.animate([{ transform: "scaleX(1)" }, { transform: "scaleX(0)" }], {
 					duration: t.duration,
 					fill: "forwards"
 				});
 			}
 		}
-		function X(e, t = !1) {
-			Y(e), t && V.get(e)?.bar?.cancel(), V.delete(e);
-		}
-		function Z() {
-			H = !0, V.forEach((e, t) => Y(t));
+		function Z(e, t = !1) {
+			X(e), t && U.get(e)?.bar?.cancel(), U.delete(e);
 		}
 		function Q() {
-			H = !1, V.forEach((e, t) => J(t));
+			W = !0, U.forEach((e, t) => X(t));
 		}
-		function $(e) {
-			e.currentTarget.contains(e.relatedTarget) || Q();
+		function $() {
+			W = !1, U.forEach((e, t) => Y(t));
 		}
 		function se(e) {
+			e.currentTarget.contains(e.relatedTarget) || $();
+		}
+		function ce(e) {
 			let t = new Set(e.map((e) => e.id));
-			for (let [e] of V) t.has(e) || X(e);
-			for (let t of e) V.get(t.id)?.version !== t.version && (X(t.id, !0), t.duration > 0 && (V.set(t.id, {
+			for (let [e] of U) t.has(e) || Z(e);
+			for (let t of e) U.get(t.id)?.version !== t.version && (Z(t.id, !0), t.duration > 0 && (U.set(t.id, {
 				version: t.version,
 				duration: t.duration,
 				remaining: t.duration,
 				started: 0
-			}), J(t.id)));
+			}), Y(t.id)));
 		}
-		async function ce(e) {
-			let t = e.filter((e) => !U.has(`${e.id}:${e.version}`));
-			if (U = new Set(e.map((e) => `${e.id}:${e.version}`)), !t.length) return;
+		async function le(e) {
+			let t = e.filter((e) => !G.has(`${e.id}:${e.version}`));
+			if (G = new Set(e.map((e) => `${e.id}:${e.version}`)), !t.length) return;
 			let n = (e) => /[.!?…]$/.test(e.trim()) ? e.trim() : `${e.trim()}.`, r = (e) => e.flatMap((e) => [e.title, e.description ?? ""].filter(Boolean).map(n)).join(" "), i = t.filter((e) => e.tone === "error"), a = t.filter((e) => e.tone !== "error");
-			z.value = "", B.value = "", await f(), a.length && (z.value = r(a)), i.length && (B.value = r(i));
+			V.value = "", H.value = "", await f(), a.length && (V.value = r(a)), i.length && (H.value = r(i));
 		}
-		function le(e) {
-			e.action?.onClick(), L(e.id);
+		function ue(e) {
+			e.action?.onClick(), z(e.id);
 		}
-		return x(G, (e) => {
-			se(e), ce(e);
-		}, { immediate: !0 }), m(() => V.forEach((e) => {
+		return S(q, (e) => {
+			ce(e), le(e);
+		}, { immediate: !0 }), h(() => U.forEach((e) => {
 			clearTimeout(e.handle), e.bar?.cancel();
-		})), (t, a) => (h(), o(r, { to: "body" }, [l("section", {
+		})), (t, a) => (g(), o(r, { to: "body" }, [l("section", {
 			ref_key: "root",
-			ref: R,
+			ref: B,
 			"aria-label": d.label,
 			"data-ac-ds": "",
 			"data-testid": "ac-toaster"
 		}, [
-			l("div", k, y(z.value), 1),
-			l("div", ee, y(B.value), 1),
+			l("div", k, b(V.value), 1),
+			l("div", A, b(H.value), 1),
 			u(i, {
 				tag: "ol",
-				class: p(["pointer-events-none fixed inset-x-5 z-[100] flex flex-col gap-3 sm:inset-x-auto sm:w-[384px]", F[d.position]]),
-				"enter-active-class": M,
-				"enter-from-class": K.value,
-				"leave-active-class": M,
-				"leave-to-class": K.value,
+				class: p(["pointer-events-none fixed inset-x-5 z-[100] flex flex-col gap-3 sm:inset-x-auto sm:w-[384px]", L[d.position]]),
+				style: m(d.offset ? { "--ac-toaster-offset": d.offset } : void 0),
+				"enter-active-class": P,
+				"enter-from-class": J.value,
+				"leave-active-class": P,
+				"leave-to-class": J.value,
 				"move-class": "motion-safe:transition-transform motion-safe:duration-200",
-				onPointerenter: Z,
-				onPointerleave: Q,
-				onFocusin: Z,
-				onFocusout: $
+				onPointerenter: Q,
+				onPointerleave: $,
+				onFocusin: Q,
+				onFocusout: se
 			}, {
-				default: S(() => [(h(!0), c(n, null, _(G.value, (t, n) => (h(), c("li", {
+				default: ee(() => [(g(!0), c(n, null, v(q.value, (t, n) => (g(), c("li", {
 					key: t.id,
 					class: p(["pointer-events-auto relative flex items-start gap-3 overflow-hidden rounded-10 border py-3.5 pl-4 shadow-md", [
-						P[t.tone].box,
+						I[t.tone].box,
 						t.dismissible ? "pr-10" : "pr-4",
-						G.value.length - 1 - n >= j && "max-sm:hidden"
+						q.value.length - 1 - n >= N && "max-sm:hidden"
 					]]),
 					"data-ac-ds": "",
 					"data-testid": "ac-toast",
 					"data-tone": t.tone
 				}, [
-					P[t.tone].icon ? (h(), o(v(P[t.tone].icon), {
+					I[t.tone].icon ? (g(), o(y(I[t.tone].icon), {
 						key: 0,
-						class: p(["mt-px size-5 shrink-0", P[t.tone].iconClass]),
+						class: p(["mt-px size-5 shrink-0", I[t.tone].iconClass]),
 						"stroke-width": 2.25,
 						"aria-hidden": "true"
 					}, null, 8, ["class"])) : s("", !0),
-					l("div", ne, [l("p", re, y(t.title), 1), t.description ? (h(), c("p", ie, y(t.description), 1)) : s("", !0)]),
-					t.action ? (h(), o(e, {
+					l("div", ne, [l("p", re, b(t.title), 1), t.description ? (g(), c("p", ie, b(t.description), 1)) : s("", !0)]),
+					t.action ? (g(), o(e, {
 						key: 1,
 						title: t.action.label,
 						size: "small",
 						color: "white",
 						class: "-my-1 shrink-0",
-						onClick: (e) => le(t)
+						onClick: (e) => ue(t)
 					}, null, 8, ["title", "onClick"])) : s("", !0),
-					t.dismissible ? (h(), c("button", {
+					t.dismissible ? (g(), c("button", {
 						key: 2,
 						type: "button",
 						class: "absolute top-2 right-2 inline-flex size-6 cursor-pointer items-center justify-center rounded-6 text-muted transition-colors hover:bg-surface-sunken hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
 						"aria-label": `Dismiss: ${t.title}`,
-						onClick: (e) => b(L)(t.id)
-					}, [u(b(D), {
+						onClick: (e) => x(z)(t.id)
+					}, [u(x(D), {
 						class: "size-3.5",
 						"aria-hidden": "true"
-					})], 8, ae)) : s("", !0),
-					q(t) ? (h(), c("span", {
+					})], 8, j)) : s("", !0),
+					ae(t) ? (g(), c("span", {
 						key: 3,
 						"data-toast-bar": t.id,
-						class: p(["absolute bottom-0 left-0 h-0.5 w-full origin-left opacity-70 motion-reduce:hidden", P[t.tone].bar]),
+						class: p(["absolute bottom-0 left-0 h-0.5 w-full origin-left opacity-70 motion-reduce:hidden", I[t.tone].bar]),
 						"aria-hidden": "true"
-					}, null, 10, A)) : s("", !0)
+					}, null, 10, M)) : s("", !0)
 				], 10, te))), 128))]),
 				_: 1
 			}, 8, [
 				"class",
+				"style",
 				"enter-from-class",
 				"leave-to-class"
 			])
@@ -196,4 +199,4 @@ var O = ["aria-label"], k = {
 	}
 });
 //#endregion
-export { N as default };
+export { F as default };

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;
+    };
+};