@ac-design/design-system 1.0.3 → 2.1.0

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

@@ -1,38 +1,48 @@
-import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, createTextVNode as i, defineComponent as a, inject as o, normalizeClass as s, openBlock as c, renderSlot as l, toDisplayString as u, unref as d, useId as f } from "vue";
+import { computed as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, inject as s, normalizeClass as c, openBlock as l, renderSlot as u, resolveDynamicComponent as d, toDisplayString as f, unref as p, useId as m } from "vue";
 //#region src/lib/components/AcFormSection.vue?vue&type=script&setup=true&lang.ts
-var p = ["aria-labelledby", "aria-describedby"], m = { class: "min-w-0 flex-1" }, h = ["id"], g = ["id"], _ = {
+var h = ["aria-labelledby", "aria-describedby"], g = {
 	key: 0,
+	class: "flex size-7 shrink-0 items-center justify-center rounded-8 border border-primary/20 bg-primary/8 text-primary",
+	"aria-hidden": "true"
+}, _ = { class: "min-w-0 flex-1" }, v = ["id"], y = ["id"], b = {
+	key: 1,
 	class: "flex shrink-0 items-center gap-2"
-}, v = /*@__PURE__*/ a({
+}, x = /*@__PURE__*/ o({
 	__name: "AcFormSection",
 	props: {
 		title: { default: "" },
 		description: { default: "" },
+		icon: { default: void 0 },
 		layout: { default: void 0 },
+		variant: { default: void 0 },
 		columns: { default: 1 }
 	},
-	setup(a) {
-		let v = a, y = o("ac-form", null), b = f(), x = e(() => v.layout ?? y?.layout.value ?? "stacked");
-		return (e, o) => (c(), n("div", {
+	setup(o) {
+		let x = o, S = s("ac-form", null), C = m(), w = e(() => x.layout ?? S?.layout.value ?? "stacked"), T = e(() => x.variant ?? S?.variant?.value ?? "card");
+		return (e, s) => (l(), r("div", {
 			role: "group",
-			"aria-labelledby": a.title ? `${d(b)}-title` : void 0,
-			"aria-describedby": a.description || e.$slots.description ? `${d(b)}-desc` : void 0,
-			class: s(["border-t border-border-light py-7 first:border-t-0 first:pt-0", x.value === "aside" && "md:grid md:grid-cols-[minmax(0,1fr)_minmax(0,2fr)] md:gap-10"]),
+			"aria-labelledby": o.title ? `${p(C)}-title` : void 0,
+			"aria-describedby": o.description || e.$slots.description ? `${p(C)}-desc` : void 0,
+			class: c([T.value === "card" ? "rounded-14 border border-border bg-surface p-5" : "border-t border-border py-7 first:border-t-0 first:pt-0", w.value === "aside" && "md:grid md:grid-cols-[minmax(0,1fr)_minmax(0,2fr)] md:gap-10"]),
 			"data-ac-ds": "",
 			"data-testid": "ac-form-section"
-		}, [a.title || a.description || e.$slots.description || e.$slots.actions ? (c(), n("div", {
+		}, [o.title || o.description || o.icon || e.$slots.description || e.$slots.actions ? (l(), r("div", {
 			key: 0,
-			class: s(["mb-5 flex items-start gap-4", x.value === "aside" && "md:mb-0"])
-		}, [r("div", m, [a.title ? (c(), n("h3", {
-			key: 0,
-			id: `${d(b)}-title`,
-			class: "text-xl leading-6 font-semibold tracking-[-0.01em] text-heading"
-		}, u(a.title), 9, h)) : t("", !0), a.description || e.$slots.description ? (c(), n("div", {
-			key: 1,
-			id: `${d(b)}-desc`,
-			class: "mt-1 text-base text-muted [&_a]:font-medium [&_a]:text-primary-20 [&_a]:underline [&_a]:underline-offset-2"
-		}, [l(e.$slots, "description", {}, () => [i(u(a.description), 1)])], 8, g)) : t("", !0)]), e.$slots.actions && x.value === "stacked" ? (c(), n("div", _, [l(e.$slots, "actions")])) : t("", !0)], 2)) : t("", !0), r("div", { class: s(["grid min-w-0 gap-5", [a.columns === 2 && "sm:grid-cols-2", x.value === "aside" && "md:col-start-2"]]) }, [l(e.$slots, "default")], 2)], 10, p));
+			class: c(["mb-5 flex items-start gap-3", w.value === "aside" && "md:mb-0"])
+		}, [
+			o.icon ? (l(), r("span", g, [(l(), t(d(o.icon), { class: "size-3.5" }))])) : n("", !0),
+			i("div", _, [o.title ? (l(), r("h3", {
+				key: 0,
+				id: `${p(C)}-title`,
+				class: c(["font-heading font-semibold tracking-tight text-heading", T.value === "card" ? "text-base" : "text-lg"])
+			}, f(o.title), 11, v)) : n("", !0), o.description || e.$slots.description ? (l(), r("div", {
+				key: 1,
+				id: `${p(C)}-desc`,
+				class: c([T.value === "card" ? "mt-0.5 text-xs leading-relaxed" : "mt-1 text-base", "text-muted [&_a]:font-medium [&_a]:text-primary-strong [&_a]:underline [&_a]:underline-offset-2"])
+			}, [u(e.$slots, "description", {}, () => [a(f(o.description), 1)])], 10, y)) : n("", !0)]),
+			e.$slots.actions && w.value === "stacked" ? (l(), r("div", b, [u(e.$slots, "actions")])) : n("", !0)
+		], 2)) : n("", !0), i("div", { class: c(["grid min-w-0 gap-5", [o.columns === 2 && "sm:grid-cols-2", w.value === "aside" && "md:col-start-2"]]) }, [u(e.$slots, "default")], 2)], 10, h));
 	}
 });
 //#endregion
-export { v as default };
+export { x as default };

package/dist/lib/components/AcGraphChart.js

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

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

@@ -0,0 +1,124 @@
+import type { Component } from "vue";
+import type { ChartRenderer } from "../charts/echarts";
+import type { ChartColor } from "../charts/shared";
+/** A node's or link's health: drawn as the ring colour, and counted as a problem when `warning` or `danger`. */
+export type GraphStatus = "success" | "info" | "warning" | "danger" | "neutral";
+/** One resource in the diagram. */
+export interface GraphNode {
+    /** Unique id; links refer to it. */
+    id: string;
+    /** Name under the node, e.g. `demo-postgres`. */
+    label: string;
+    /** Resource type, e.g. "Load balancer". Shown under the label, in the legend and in the tooltip. */
+    kind?: string;
+    /** A Lucide icon component, or 1–3 characters of text, drawn in the node. Overrides `kindIcons`. */
+    icon?: Component | string;
+    /** Colours the ring. `warning` and `danger` also add a `!` badge. */
+    status?: GraphStatus;
+    /** Status in words for the tooltip and data table, e.g. "NotReady". Defaults to the status name. */
+    statusText?: string;
+    /** A sentence for the tooltip, e.g. the CIDR or the instance size. */
+    description?: string;
+    /** Nodes with the same group are drawn inside one labelled box, e.g. a subnet. */
+    group?: string;
+}
+/** A connection between two nodes, drawn from `source` to `target`. */
+export interface GraphLink {
+    /** Id of the node the link starts at. */
+    source: string;
+    /** Id of the node the link ends at. */
+    target: string;
+    /** Short text on the line, e.g. `10.0.1.0/24` or `:5432`. */
+    label?: string;
+    /** Colours the line: `warning` or `danger` for a broken or degraded path. */
+    status?: GraphStatus;
+    /** Draws the line dashed, e.g. for a tunnel or a standby path. */
+    dashed?: boolean;
+}
+/** What the `tooltip` slot gets for the hovered node. */
+export interface GraphTooltipSlotProps {
+    /** The hovered node, as passed in `nodes`. */
+    node: GraphNode;
+    /** Labels of the nodes it links to. */
+    targets: string[];
+    /** Labels of the nodes that link to it. */
+    sources: string[];
+}
+export interface Props {
+    /** The resources to draw. Each needs a unique `id`; `kind`, `status`, `icon` and `group` are optional. */
+    nodes: GraphNode[];
+    /** Connections between nodes by id. Links to an unknown id are skipped. */
+    links?: GraphLink[];
+    /** Layout direction: `LR` (left to right, like a network path) or `TB` (top to bottom, like a hierarchy). */
+    direction?: "LR" | "TB";
+    /** Plot height in px. The diagram is fitted inside it. */
+    height?: number;
+    /** Node shape: `circle` or `square` (rounded). */
+    shape?: "circle" | "square";
+    /** Colour per kind: `{ "Load balancer": "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: `{ Database: DatabaseIcon }`. A node's own `icon` wins. */
+    kindIcons?: Record<string, Component | string>;
+    /** Draws an arrowhead on each link to show its direction. */
+    arrows?: boolean;
+    /** Shows zoom in, zoom out and fit buttons in the bottom-right corner. */
+    zoom?: boolean;
+    /** Legend of kinds `top`, `bottom`, or `none`. Clicking a kind hides or shows its nodes. */
+    legend?: "top" | "bottom" | "none";
+    /** Shows a tooltip with the node's label, 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 diagram when `nodes` is empty. */
+    emptyText?: string;
+    /** Accessible name, e.g. "Topology of demo-vpc". Show the visible title in the surrounding card. */
+    title?: string;
+    /** A sentence for screen readers on what the diagram shows. Defaults to the number of resources, connections and problems. */
+    description?: string;
+    /** `canvas` (default) stays fast with hundreds of nodes; `svg` is crisper when printed and lighter for a few dozen. */
+    renderer?: ChartRenderer;
+    /** Animates the first draw and layout changes. Off when the viewer asks for reduced motion. */
+    animation?: boolean;
+}
+type __VLS_Props = Props;
+type __VLS_Slots = {
+    /** Replaces the tooltip body for the hovered node. */
+    tooltip?: (props: GraphTooltipSlotProps) => unknown;
+};
+type __VLS_ModelProps = {
+    /** Id of the selected node: it and its links are highlighted and the rest fade. Clicking a node selects it; clicking it again, the background or pressing Escape clears it. */
+    "selected"?: string | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:selected": (value: string | null) => any;
+    "node-click": (node: GraphNode, event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:selected"?: ((value: string | null) => any) | undefined;
+    "onNode-click"?: ((node: GraphNode, event: MouseEvent) => any) | undefined;
+}>, {
+    legend: "top" | "bottom" | "none";
+    title: string;
+    description: string;
+    height: number;
+    direction: "LR" | "TB";
+    loading: boolean;
+    animation: boolean;
+    shape: "circle" | "square";
+    tooltip: boolean;
+    emptyText: string;
+    links: GraphLink[];
+    renderer: ChartRenderer;
+    zoom: boolean;
+    kindColors: Record<string, ChartColor>;
+    kindIcons: Record<string, Component | string>;
+    arrows: boolean;
+}, {}, {}, {}, 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;
+    };
+};