@ac-design/design-system 2.0.0 → 2.1.0

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

@@ -1,57 +1,64 @@
-import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, defineComponent as i, normalizeClass as a, openBlock as o, ref as s, toDisplayString as c, watch as l } from "vue";
+import { computed as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, normalizeClass as o, openBlock as s, ref as c, toDisplayString as l, unref as u, watch as d } from "vue";
+import { Building as f } from "@lucide/vue";
 //#region src/lib/components/AcAvatar.vue?vue&type=script&setup=true&lang.ts
-var u = [
+var p = [
 	"role",
 	"aria-label",
 	"aria-hidden"
-], d = ["src"], f = {
+], m = ["src"], h = {
 	key: 1,
 	class: "tabular-nums",
 	"aria-hidden": "true"
-}, p = {
-	key: 2,
+}, g = {
+	key: 3,
 	"aria-hidden": "true"
-}, m = /*@__PURE__*/ i({
+}, _ = /*@__PURE__*/ a({
 	__name: "AcAvatar",
 	props: {
 		name: { default: "" },
 		imgUrl: { default: "" },
 		alt: { default: void 0 },
 		size: { default: "normal" },
-		shape: { default: "circle" },
+		shape: { default: void 0 },
+		kind: { default: "person" },
 		status: { default: void 0 },
 		overflowCount: { default: 0 }
 	},
-	setup(i) {
-		let m = i, h = {
+	setup(a) {
+		let _ = a, v = {
 			xs: {
 				box: "size-5 text-xm",
 				dot: "size-1.5",
-				square: "rounded-4"
+				icon: "size-2.5"
 			},
 			small: {
 				box: "size-6 text-sm",
 				dot: "size-2",
-				square: "rounded-4"
+				icon: "size-3"
 			},
 			normal: {
 				box: "size-8 text-xs",
 				dot: "size-2.5",
-				square: "rounded-6"
+				icon: "size-4"
+			},
+			medium: {
+				box: "size-10 text-base",
+				dot: "size-2.5",
+				icon: "size-5"
 			},
 			large: {
 				box: "size-12 text-xl",
 				dot: "size-3",
-				square: "rounded-10"
+				icon: "size-6"
 			}
-		}, g = [
+		}, y = [
 			"bg-primary/15 text-primary-strong",
 			"bg-info/15 text-info-strong",
 			"bg-pending/15 text-pending-strong",
 			"bg-warning/20 text-warning-strong",
 			"bg-danger/15 text-danger-strong",
 			"bg-success/15 text-success-strong"
-		], _ = {
+		], b = {
 			online: {
 				dot: "bg-success",
 				label: "Online"
@@ -68,49 +75,47 @@ var u = [
 				dot: "bg-muted",
 				label: "Offline"
 			}
-		}, v = s(!1), y = e(() => !!m.imgUrl && !v.value && !m.overflowCount), b = e(() => {
-			let e = m.name.split("@")[0].split(/[\s._-]+/).filter(Boolean);
+		}, x = c(!1), S = e(() => !!_.imgUrl && !x.value && !_.overflowCount), C = e(() => _.kind === "organization" && !_.overflowCount), w = e(() => {
+			let e = _.name.split("@")[0].split(/[\s._-]+/).filter(Boolean);
 			return e.length ? (e.length > 1 ? e[0][0] + e[1][0] : e[0].slice(0, 1)).toUpperCase() : "";
-		}), x = e(() => {
-			if (m.overflowCount || !m.name) return "bg-surface-sunken text-muted";
+		}), T = e(() => {
+			if (C.value) return "bg-linear-to-br from-primary/80 to-primary text-white";
+			if (_.overflowCount || !_.name) return "bg-surface-sunken text-muted";
 			let e = 0;
-			for (let t of m.name) e = e * 31 + t.charCodeAt(0) >>> 0;
-			return g[e % g.length];
-		}), S = e(() => {
-			if (m.overflowCount) return m.alt ?? `${m.overflowCount} more`;
-			let e = m.alt ?? m.name;
-			return e ? m.status ? `${e} (${_[m.status].label})` : e : "";
-		}), C = e(() => m.shape === "circle" ? "rounded-full" : h[m.size].square);
-		return l(() => m.imgUrl, () => v.value = !1), (e, s) => (o(), n("span", {
-			class: a(["relative inline-flex shrink-0 bg-surface align-middle", [h[i.size].box, C.value]]),
-			role: S.value ? "img" : void 0,
-			"aria-label": S.value || void 0,
-			"aria-hidden": !S.value || void 0,
+			for (let t of _.name) e = e * 31 + t.charCodeAt(0) >>> 0;
+			return y[e % y.length];
+		}), E = e(() => {
+			if (_.overflowCount) return _.alt ?? `${_.overflowCount} more`;
+			let e = _.alt ?? _.name;
+			return e ? _.status ? `${e} (${b[_.status].label})` : e : "";
+		}), D = e(() => (_.shape ?? (_.kind === "organization" ? "square" : "circle")) === "square"), O = e(() => D.value ? "rounded-4" : "rounded-full");
+		return d(() => _.imgUrl, () => x.value = !1), (e, c) => (s(), r("span", {
+			class: o(["relative inline-flex shrink-0 bg-surface align-middle", [v[a.size].box, O.value]]),
+			role: E.value ? "img" : void 0,
+			"aria-label": E.value || void 0,
+			"aria-hidden": !E.value || void 0,
 			"data-ac-ds": "",
 			"data-testid": "ac-avatar"
-		}, [
-			r("span", { class: a(["inline-flex size-full items-center justify-center overflow-hidden font-semibold tracking-[-0.01em] select-none", [C.value, y.value ? "bg-surface-sunken" : x.value]]) }, [y.value ? (o(), n("img", {
-				key: 0,
-				src: i.imgUrl,
-				alt: "",
-				class: "size-full object-cover",
-				onError: s[0] ||= (e) => v.value = !0
-			}, null, 40, d)) : i.overflowCount ? (o(), n("span", f, "+" + c(i.overflowCount), 1)) : (o(), n("span", p, c(b.value), 1))], 2),
-			r("span", {
-				class: a(["pointer-events-none absolute inset-0 ring-1 ring-heading/8 ring-inset", C.value]),
-				"aria-hidden": "true"
-			}, null, 2),
-			i.status && !i.overflowCount ? (o(), n("span", {
-				key: 0,
-				class: a(["absolute right-0 bottom-0 rounded-full ring-2 ring-surface", [
-					h[i.size].dot,
-					_[i.status].dot,
-					i.shape === "square" && "translate-x-1/4 translate-y-1/4"
-				]]),
-				"aria-hidden": "true"
-			}, null, 2)) : t("", !0)
-		], 10, u));
+		}, [i("span", { class: o(["inline-flex size-full items-center justify-center overflow-hidden font-semibold tracking-[-0.01em] select-none", [O.value, S.value ? "bg-surface-sunken" : T.value]]) }, [S.value ? (s(), r("img", {
+			key: 0,
+			src: a.imgUrl,
+			alt: "",
+			class: "size-full object-cover",
+			onError: c[0] ||= (e) => x.value = !0
+		}, null, 40, m)) : a.overflowCount ? (s(), r("span", h, "+" + l(a.overflowCount), 1)) : C.value ? (s(), t(u(f), {
+			key: 2,
+			class: o(v[a.size].icon),
+			"aria-hidden": "true"
+		}, null, 8, ["class"])) : (s(), r("span", g, l(w.value), 1))], 2), a.status && !a.overflowCount ? (s(), r("span", {
+			key: 0,
+			class: o(["absolute right-0 bottom-0 rounded-full ring-2 ring-surface", [
+				v[a.size].dot,
+				b[a.status].dot,
+				D.value && "translate-x-1/4 translate-y-1/4"
+			]]),
+			"aria-hidden": "true"
+		}, null, 2)) : n("", !0)], 10, p));
 	}
 });
 //#endregion
-export { m as default };
+export { _ as default };

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

@@ -1,21 +1,24 @@
+import type { Component } from "vue";
 import type { Tone, Variant } from "./types";
 export interface Props {
     /** Text of the badge. The default slot overrides it. Defaults to "Default", or the humanized `status`. */
     label?: string;
     /** Status or brand colour. Always pair a status colour with a word. Defaults to `default`, or the colour of `status`. */
     color?: Tone | "pending" | "default" | "secondary" | "dark";
-    /** `solid` fill, `light` tint (10% fill, 25% border, AA-contrast text) or `outlined`. Defaults to `solid`, or `light` with `status`. */
+    /** `solid` fill, `light` tint (10% fill in the colour's own text, amber text on warning) or `outlined`. Defaults to `solid`, or `light` with `status`. */
     variant?: Variant;
     /** Pill shape, the default. Set `false` for 6px corners. */
     rounded?: boolean;
     /** Shows a 6px status dot before the label. On by default with `status`. */
     dot?: boolean;
-    /** Raw state from the API, e.g. `RUNNING`, `pending_provisioning` or `NotReady`. Sets the colour, a sentence-case label, the dot and the `light` variant; any of those props you pass wins. cloud-ui's StatusBadge `state`. */
+    /** Raw state from the API, e.g. `RUNNING`, `pending_provisioning` or `NotReady`. Sets the colour, a sentence-case label, the dot and the `light` variant; any of those props you pass wins. Stopped and paused states get a hollow grey dot; in-progress ones a spinner on a primary tint. cloud-ui's StatusBadge `state`. */
     status?: string | null;
     /** Enum prefix stripped from `status` before matching, e.g. `VPC_STATE` shows `VPC_STATE_AVAILABLE` as "Available". */
     prefix?: string;
-    /** Pulses the dot to show work in progress. On by default for transient states such as Provisioning or Deleting. cloud-ui's `transient`. */
+    /** Shows a 12px spinner instead of the dot to show work in progress; with `status` the badge also turns primary. On by default for transient states such as Provisioning or Deleting. cloud-ui's `transient`. */
     pulse?: boolean;
+    /** A Lucide icon shown at 12px before the label, in the text colour, e.g. `ShieldCheck` on "4 Active Policies". Takes the place of the dot; the in-progress spinner still wins. */
+    icon?: Component;
 }
 type __VLS_Slots = {
     /** Badge content. Replaces `label`. */
@@ -24,6 +27,7 @@ type __VLS_Slots = {
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     variant: Variant;
     label: string;
+    icon: Component;
     color: Tone | "pending" | "default" | "secondary" | "dark";
     status: string | null;
     rounded: boolean;

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

@@ -1,11 +1,8 @@
 import { statusMeta as e } from "./status.js";
-import { computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, normalizeClass as s, openBlock as c, renderSlot as l, toDisplayString as u } from "vue";
+import { computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createTextVNode as a, defineComponent as o, normalizeClass as s, openBlock as c, renderSlot as l, resolveDynamicComponent as u, toDisplayString as d, unref as f } from "vue";
+import { LoaderCircle as p } from "@lucide/vue";
 //#region src/lib/components/AcBadge.vue?vue&type=script&setup=true&lang.ts
-var d = {
-	key: 0,
-	class: "relative flex size-1.5 shrink-0",
-	"aria-hidden": "true"
-}, f = /*@__PURE__*/ o({
+var m = /*@__PURE__*/ o({
 	__name: "AcBadge",
 	props: {
 		label: { default: void 0 },
@@ -24,81 +21,91 @@ var d = {
 		pulse: {
 			type: Boolean,
 			default: void 0
-		}
+		},
+		icon: { default: void 0 }
 	},
 	setup(o) {
-		let f = o, p = {
+		let m = o, h = {
 			primary: [
 				"bg-primary text-white",
-				"bg-primary/10 text-primary-strong ring-primary/25",
+				"bg-primary/10 text-primary-strong",
 				"ring-primary/40 text-primary-strong",
 				"bg-primary"
 			],
 			secondary: [
 				"bg-secondary text-white",
-				"bg-secondary-95 text-secondary-20 ring-secondary-40/25",
+				"bg-secondary-95 text-secondary-20",
 				"ring-secondary-70 text-secondary",
 				"bg-secondary-40"
 			],
 			info: [
 				"bg-info text-white",
-				"bg-info/10 text-info-strong ring-info/25",
+				"bg-info/10 text-info-strong",
 				"ring-info/40 text-info-strong",
 				"bg-info"
 			],
 			success: [
 				"bg-success text-white",
-				"bg-success/10 text-success-strong ring-success/25",
+				"bg-success/10 text-success-strong",
 				"ring-success/40 text-success-strong",
 				"bg-success"
 			],
 			warning: [
 				"bg-warning text-on-warning",
-				"bg-warning/10 text-warning-strong ring-warning/30",
+				"bg-warning/10 text-warning-strong",
 				"ring-warning/45 text-warning-strong",
 				"bg-warning"
 			],
 			danger: [
 				"bg-danger text-white",
-				"bg-danger/10 text-danger-strong ring-danger/25",
+				"bg-danger/10 text-danger-strong",
 				"ring-danger/40 text-danger-strong",
 				"bg-danger"
 			],
 			pending: [
 				"bg-pending text-white",
-				"bg-pending/10 text-pending-strong ring-pending/25",
+				"bg-pending/10 text-pending-strong",
 				"ring-pending/40 text-pending-strong",
 				"bg-pending"
 			],
 			dark: [
 				"bg-slate-20 text-surface",
-				"bg-slate-20/10 text-heading ring-slate-20/20",
+				"bg-slate-20/10 text-heading",
 				"ring-slate-20/40 text-heading",
 				"bg-slate-20"
 			],
 			default: [
 				"bg-surface-sunken text-heading",
-				"bg-surface-sunken text-muted ring-border",
+				"bg-surface-sunken/40 text-muted",
 				"ring-border text-muted",
 				"bg-muted"
 			]
-		}, m = t(() => f.status === void 0 ? null : e(f.status, { prefix: f.prefix })), h = t(() => f.color ?? m.value?.tone ?? "default"), g = t(() => f.variant ?? (m.value ? "light" : "solid")), _ = t(() => f.label || m.value?.label || "Default"), v = t(() => f.pulse ?? m.value?.transient ?? !1), y = t(() => f.dot ?? (!!m.value || v.value)), b = t(() => {
-			let [e, t, n] = p[h.value];
+		}, g = t(() => m.status === void 0 ? null : e(m.status, { prefix: m.prefix })), _ = t(() => m.pulse ?? g.value?.transient ?? !1), v = t(() => m.color ?? (g.value && _.value ? "primary" : g.value?.tone ?? "default")), y = t(() => m.variant ?? (g.value ? "light" : "solid")), b = t(() => m.label || g.value?.label || "Default"), x = t(() => m.dot ?? (!!g.value || _.value)), S = t(() => !!g.value?.hollow && !m.color), C = t(() => {
+			let [e, t, n] = h[v.value];
 			return {
 				solid: e,
-				light: `ring-1 ring-inset ${t}`,
+				light: t,
 				outlined: `bg-surface ring-1 ring-inset ${n}`
-			}[g.value];
-		}), x = t(() => g.value === "solid" && h.value !== "default" ? "bg-surface" : p[h.value][3]);
-		return (e, t) => (c(), r("span", {
-			class: s(["inline-flex h-5.5 items-center gap-1.5 px-2 text-xs leading-none font-medium whitespace-nowrap tabular-nums", [b.value, o.rounded ? "rounded-full" : "rounded-6"]]),
+			}[y.value];
+		}), w = t(() => S.value ? "border border-muted bg-transparent" : y.value === "solid" && v.value !== "default" ? "bg-surface" : h[v.value][3]);
+		return (e, t) => (c(), i("span", {
+			class: s(["inline-flex h-5 items-center gap-1.5 px-2.5 text-xs leading-none font-medium whitespace-nowrap tabular-nums", [C.value, o.rounded ? "rounded-full" : "rounded-6"]]),
 			"data-ac-ds": "",
 			"data-testid": "ac-badge"
-		}, [y.value ? (c(), r("span", d, [v.value ? (c(), r("span", {
+		}, [_.value && x.value ? (c(), n(f(p), {
 			key: 0,
-			class: s(["absolute inset-0 rounded-full opacity-60 motion-safe:animate-ping", x.value])
-		}, null, 2)) : n("", !0), i("span", { class: s(["relative size-1.5 rounded-full", x.value]) }, null, 2)])) : n("", !0), l(e.$slots, "default", {}, () => [a(u(_.value), 1)])], 2));
+			class: "size-3 shrink-0 motion-safe:animate-spin",
+			"aria-hidden": "true"
+		})) : o.icon ? (c(), n(u(o.icon), {
+			key: 1,
+			class: "size-3 shrink-0",
+			"aria-hidden": "true"
+		})) : x.value ? (c(), i("span", {
+			key: 2,
+			class: s(["size-1.5 shrink-0 rounded-full", w.value]),
+			"aria-hidden": "true"
+		}, null, 2)) : r("", !0), l(e.$slots, "default", {}, () => [a(d(b.value), 1)])], 2));
 	}
 });
 //#endregion
-export { f as default };
+export { m as default };

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

@@ -22,10 +22,13 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     orientation: "vertical" | "horizontal";
     radius: number;
     loading: boolean;
+    animation: boolean;
     tooltip: boolean;
     emptyText: string;
     stacked: boolean;
+    renderer: "canvas" | "svg";
     gridLines: boolean;
+    zoom: boolean;
     xFormatter: (value: Date | number | string) => string;
     yFormatter: (value: number) => string;
     xLabel: string;