@ac-design/design-system 2.0.0 → 2.1.1

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

@@ -1,15 +1,19 @@
-import e from "./AcButton.js";
+import e from "./AcSpinner.js";
 import t from "./AcModal.js";
 import n from "./AcInput.js";
-import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, mergeModels as f, openBlock as p, ref as m, renderSlot as h, toDisplayString as g, useModel as _, watch as v, withCtx as y } from "vue";
+import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, mergeModels as f, normalizeClass as p, openBlock as m, ref as h, renderSlot as g, toDisplayString as _, useModel as v, watch as y, withCtx as b } from "vue";
 //#region src/lib/components/AcDeleteModal.vue?vue&type=script&setup=true&lang.ts
-var b = { class: "flex flex-col gap-5" }, x = { class: "text-base text-body" }, S = { class: "font-mono font-semibold break-all text-heading" }, C = {
+var x = {
+	class: "flex flex-col gap-5",
+	"data-ac-ds": "",
+	"data-testid": "ac-delete-modal"
+}, S = { class: "text-lg text-muted" }, C = { class: "font-mono font-semibold break-all text-heading" }, w = {
 	key: 0,
-	class: "mt-1.5 text-base text-muted"
-}, w = {
+	class: "mt-2 text-base text-muted"
+}, T = {
 	key: 0,
 	class: "flex flex-col gap-2"
-}, T = { class: "self-start rounded-8 bg-surface-sunken px-2.5 py-1.5 font-mono text-base break-all text-heading" }, E = { key: 1 }, D = /*@__PURE__*/ d({
+}, E = { class: "self-start rounded-8 bg-surface-sunken px-2.5 py-1.5 font-mono text-base break-all text-heading" }, D = { key: 1 }, O = ["disabled"], k = ["disabled", "aria-busy"], A = "inline-flex h-10 cursor-pointer items-center justify-center gap-2 rounded-10 border px-4 text-lg whitespace-nowrap transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50", j = /*@__PURE__*/ d({
 	__name: "AcDeleteModal",
 	props: /*@__PURE__*/ f({
 		title: { default: "Delete" },
@@ -34,59 +38,61 @@ var b = { class: "flex flex-col gap-5" }, x = { class: "text-base text-body" },
 	}),
 	emits: /*@__PURE__*/ f(["confirm", "cancel"], ["update:open"]),
 	setup(d, { emit: f }) {
-		let D = d, O = f, k = _(d, "open"), A = m("");
-		v(k, (e) => e && (A.value = ""));
-		let j = i(() => !D.confirmByTyping || A.value === D.itemName), M = () => {
-			k.value = !1, O("cancel");
-		};
-		return (i, f) => (p(), a(t, {
-			open: k.value,
-			"onUpdate:open": f[2] ||= (e) => k.value = e,
+		let j = d, M = v(d, "open"), N = f, P = h("");
+		y(M, (e) => e && (P.value = ""));
+		let F = i(() => !j.confirmByTyping || P.value === j.itemName);
+		function I() {
+			M.value = !1, N("cancel");
+		}
+		return (i, f) => (m(), a(t, {
+			open: M.value,
+			"onUpdate:open": f[2] ||= (e) => M.value = e,
 			title: d.title,
 			size: "small",
+			variant: "plain",
 			closable: !d.loading,
 			"close-on-outside-click": !d.loading,
-			onClose: f[3] ||= (e) => O("cancel")
+			onClose: f[3] ||= (e) => N("cancel")
 		}, {
-			footer: y(() => [u(e, {
-				title: "Cancel",
-				color: "white",
+			footer: b(() => [c("button", {
+				type: "button",
+				class: p([A, "border-border bg-transparent text-heading hover:bg-surface-sunken focus-visible:ring-ring"]),
 				disabled: d.loading,
 				"data-ac-ds": "",
 				"data-testid": "ac-delete-modal-cancel",
-				onClick: M
-			}, null, 8, ["disabled"]), u(e, {
-				title: d.confirmText,
-				color: "danger",
-				loading: d.loading,
-				disabled: !j.value,
+				onClick: I
+			}, " Cancel ", 8, O), c("button", {
+				type: "button",
+				class: p([[A, d.loading && "pointer-events-none"], "border-transparent bg-danger text-white hover:bg-danger-hover focus-visible:ring-danger"]),
+				disabled: !F.value || void 0,
+				"aria-busy": d.loading || void 0,
 				"data-ac-ds": "",
 				"data-testid": "ac-delete-modal-confirm",
-				onClick: f[1] ||= (e) => O("confirm", d.itemName)
-			}, null, 8, [
-				"title",
-				"loading",
-				"disabled"
-			])]),
-			default: y(() => [c("div", b, [
-				c("div", null, [c("p", x, [
-					l(g(d.message), 1),
-					d.itemName ? (p(), s(r, { key: 0 }, [f[4] ||= l(g(" "), -1), c("strong", S, g(d.itemName), 1)], 64)) : o("", !0),
+				onClick: f[1] ||= (e) => !d.loading && N("confirm", d.itemName)
+			}, [d.loading ? (m(), a(e, {
+				key: 0,
+				class: "-ml-0.5",
+				label: ""
+			})) : o("", !0), l(" " + _(d.confirmText), 1)], 10, k)]),
+			default: b(() => [c("div", x, [
+				c("div", null, [c("p", S, [
+					l(_(d.message), 1),
+					d.itemName ? (m(), s(r, { key: 0 }, [f[4] ||= l(_(" "), -1), c("strong", C, _(d.itemName), 1)], 64)) : o("", !0),
 					f[5] ||= l("? ", -1)
-				]), d.detail ? (p(), s("p", C, g(d.detail), 1)) : o("", !0)]),
-				d.confirmByTyping && d.itemName ? (p(), s("div", w, [
+				]), d.detail ? (m(), s("p", w, _(d.detail), 1)) : o("", !0)]),
+				d.confirmByTyping && d.itemName ? (m(), s("div", T, [
 					f[6] ||= c("p", { class: "text-base text-muted" }, "To confirm, type the name below.", -1),
-					c("code", T, g(d.itemName), 1),
+					c("code", E, _(d.itemName), 1),
 					u(n, {
-						modelValue: A.value,
-						"onUpdate:modelValue": f[0] ||= (e) => A.value = e,
+						modelValue: P.value,
+						"onUpdate:modelValue": f[0] ||= (e) => P.value = e,
 						class: "mt-3",
 						label: "Resource name",
 						placeholder: "Enter the name",
 						autocomplete: "off"
 					}, null, 8, ["modelValue"])
 				])) : o("", !0),
-				i.$slots.default ? (p(), s("div", E, [h(i.$slots, "default")])) : o("", !0)
+				i.$slots.default ? (m(), s("div", D, [g(i.$slots, "default")])) : o("", !0)
 			])]),
 			_: 3
 		}, 8, [
@@ -98,4 +104,4 @@ var b = { class: "flex flex-col gap-5" }, x = { class: "text-base text-body" },
 	}
 });
 //#endregion
-export { D as default };
+export { j as default };

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

@@ -1,4 +1,5 @@
 import type { ChartTooltipSlotProps } from "../charts/ChartFrame.vue";
+import type { ChartRenderer } from "../charts/echarts";
 import type { ChartAccessor, ChartCategory, ChartDatum } from "../charts/shared";
 export interface Props {
     /** One row per segment, e.g. `{ engine: "Postgres", count: 42 }`. */
@@ -13,6 +14,8 @@ export interface Props {
     height?: number;
     /** Ring thickness in px. `0` draws a pie. */
     arcWidth?: number;
+    /** Draws the top half of the ring only, like a gauge, e.g. for a quota. The centre value sits under the arc. */
+    half?: boolean;
     /** Formats values in the legend, tooltip, centre and data table. Defaults to compact numbers: `1.2K`. */
     valueFormatter?: (value: number) => string;
     /** Legend to the `right` (it wraps below on narrow screens), `top`, `bottom`, or `none`. Clicking an entry hides or shows that segment. */
@@ -35,6 +38,10 @@ export interface Props {
     title?: string;
     /** A sentence for screen readers on what the chart shows. Defaults to each segment's share. */
     description?: string;
+    /** `canvas` (default) or `svg`, which is crisper when printed or zoomed. */
+    renderer?: ChartRenderer;
+    /** Sweeps the segments in and animates changes. Always off when the viewer asks for reduced motion. */
+    animation?: boolean;
 }
 type __VLS_Slots = {
     /** Content in the ring's centre. Gets the visible total, raw and formatted. */
@@ -52,11 +59,14 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     description: string;
     height: number;
     loading: boolean;
+    animation: boolean;
     index: ChartAccessor<string>;
     tooltip: boolean;
     emptyText: string;
+    renderer: ChartRenderer;
     categories: Record<string, ChartCategory>;
     arcWidth: number;
+    half: boolean;
     valueFormatter: (value: number) => string;
     legendValues: boolean;
     centerLabel: string;

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

@@ -1,20 +1,18 @@
 import e from "../charts/ChartFrame.js";
-import { chartColor as t, chartDuration as n, formatCompact as r, readValue as i } from "../charts/shared.js";
-import { Fragment as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createSlots as u, createVNode as d, defineComponent as f, guardReactiveProps as p, normalizeProps as m, normalizeStyle as h, openBlock as g, ref as _, renderList as v, renderSlot as y, toDisplayString as b, unref as x, withCtx as S } from "vue";
-import { ChartPie as C } from "@lucide/vue";
-import { VisDonut as w, VisSingleContainer as T } from "@unovis/vue";
-import { Donut as E } from "@unovis/ts";
+import { bindItemHover as t, useEChart as n } from "../charts/echarts.js";
+import { chartColor as r, formatCompact as i, readValue as a } from "../charts/shared.js";
+import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createSlots as f, defineComponent as p, guardReactiveProps as m, normalizeClass as h, normalizeProps as g, normalizeStyle as _, openBlock as v, ref as y, renderList as b, renderSlot as x, toDisplayString as S, unref as ee, withCtx as C } from "vue";
+import { ChartPie as w } from "@lucide/vue";
+import { use as T } from "echarts/core";
+import { PieChart as E } from "echarts/charts";
 //#region src/lib/components/AcDonutChart.vue?vue&type=script&setup=true&lang.ts
 var D = {
-	key: 0,
-	class: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center"
-}, O = {
 	key: 0,
 	class: "text-2xl font-semibold tracking-tight text-heading tabular-nums"
-}, k = {
+}, O = {
 	key: 1,
 	class: "text-xs text-muted"
-}, A = 24, j = .04, M = /*@__PURE__*/ f({
+}, k = 24, A = .04, j = 4, M = /*@__PURE__*/ p({
 	__name: "AcDonutChart",
 	props: {
 		data: {},
@@ -29,6 +27,10 @@ var D = {
 		categories: { default: void 0 },
 		height: { default: 240 },
 		arcWidth: { default: 24 },
+		half: {
+			type: Boolean,
+			default: !1
+		},
 		valueFormatter: {
 			type: Function,
 			default: void 0
@@ -54,22 +56,28 @@ var D = {
 		},
 		emptyText: { default: "No data to show yet" },
 		title: { default: "" },
-		description: { default: "" }
+		description: { default: "" },
+		renderer: { default: "canvas" },
+		animation: {
+			type: Boolean,
+			default: !0
+		}
 	},
-	setup(f) {
-		let M = f, N = n(), P = _([]), F = _(0), I = _(null), L = o(() => M.data.map((e, t) => String(i(e, t, M.index)))), R = o(() => M.data.map((e, t) => Math.max(0, Number(i(e, t, M.value)) || 0))), z = o(() => R.value.map((e, t) => P.value.includes(L.value[t]) ? 0 : e)), B = o(() => z.value.reduce((e, t) => e + t, 0)), V = o(() => L.value.map((e, n) => t(M.categories?.[e]?.color, n))), H = o(() => L.value.map((e) => M.categories?.[e]?.name ?? e));
+	setup(p) {
+		T([E]);
+		let M = p, N = y(), P = y([]), F = y(0), I = y(null), L = s(() => M.data.map((e, t) => String(a(e, t, M.index)))), R = s(() => M.data.map((e, t) => Math.max(0, Number(a(e, t, M.value)) || 0))), z = s(() => R.value.map((e, t) => P.value.includes(L.value[t]) ? 0 : e)), B = s(() => z.value.reduce((e, t) => e + t, 0)), V = s(() => L.value.map((e, t) => r(M.categories?.[e]?.color, t))), H = s(() => L.value.map((e) => M.categories?.[e]?.name ?? e));
 		function U(e) {
-			return M.valueFormatter ? M.valueFormatter(e) : r(e);
+			return M.valueFormatter ? M.valueFormatter(e) : i(e);
 		}
 		function W(e, t = B.value) {
 			return t ? `${Math.round(e / t * 100)}%` : "0%";
 		}
-		let G = o(() => L.value.map((e, t) => ({
+		let G = s(() => L.value.map((e, t) => ({
 			key: e,
 			name: H.value[t],
 			color: V.value[t],
 			value: M.legendValues ? U(R.value[t]) : void 0
-		}))), K = o(() => R.value.reduce((e, t) => e + t, 0)), q = o(() => ({
+		}))), K = s(() => R.value.reduce((e, t) => e + t, 0)), q = s(() => ({
 			columns: [
 				"Name",
 				"Value",
@@ -80,112 +88,131 @@ var D = {
 				U(R.value[t]),
 				W(R.value[t], K.value)
 			])
-		})), J = o(() => {
+		})), J = s(() => {
 			let e = L.value.map((e, t) => `${H.value[t]} ${W(R.value[t], K.value)}`).join(", ");
 			return [M.title, M.description || `${L.value.length} segments: ${e}.`].filter(Boolean).join(". ");
-		}), Y = o(() => Math.min(F.value || M.height, M.height)), X = o(() => M.arcLabels ? Math.max(40, Y.value / 2 - A) : void 0), Z = o(() => {
+		}), Y = s(() => F.value || M.height), X = s(() => {
+			let e = M.half ? Math.min(Y.value / 2, M.height) : Math.min(Y.value, M.height) / 2;
+			return Math.max(40, e - j - (M.arcLabels ? k : 0));
+		}), Z = s(() => M.arcWidth > 0 ? Math.max(0, X.value - M.arcWidth) : 0), Q = s(() => Y.value / 2), $ = s(() => M.half ? M.height / 2 + X.value / 2 : M.height / 2), te = s(() => {
 			if (!M.arcLabels || !B.value || !F.value) return [];
-			let e = (X.value ?? Y.value / 2) + A / 2 + 2, t = 0;
-			return z.value.flatMap((n, r) => {
-				let i = (t + n / 2) / B.value * 2 * Math.PI;
-				return t += n, n / B.value < j ? [] : [{
-					key: L.value[r],
-					text: W(n),
-					left: F.value / 2 + e * Math.sin(i),
-					top: M.height / 2 - e * Math.cos(i)
+			let e = X.value + k / 2 + 2, t = M.half ? Math.PI : 2 * Math.PI, n = M.half ? -Math.PI / 2 : 0, r = 0;
+			return z.value.flatMap((i, a) => {
+				let o = n + (r + i / 2) / B.value * t;
+				return r += i, i / B.value < A ? [] : [{
+					key: L.value[a],
+					text: W(i),
+					left: Q.value + e * Math.sin(o),
+					top: $.value - e * Math.cos(o)
 				}];
 			});
-		}), Q = (e, t) => z.value[t], $ = (e, t) => V.value[t];
-		function ee(e, t) {
-			let n = e.index, r = z.value[n];
+		});
+		function ne(e) {
+			return {
+				type: "pie",
+				data: L.value.flatMap((t, n) => P.value.includes(t) ? [] : [{
+					name: H.value[n],
+					value: R.value[n],
+					row: n,
+					itemStyle: { color: e.color(V.value[n]) }
+				}]),
+				center: [Q.value, $.value],
+				radius: [Z.value, X.value],
+				startAngle: M.half ? 180 : 90,
+				endAngle: M.half ? 360 : "auto",
+				avoidLabelOverlap: !1,
+				label: { show: !1 },
+				labelLine: { show: !1 },
+				itemStyle: {
+					borderColor: e.surface,
+					borderWidth: 2,
+					borderRadius: M.arcWidth > 0 ? 4 : 0
+				},
+				emphasis: {
+					scale: !0,
+					scaleSize: j
+				},
+				animationType: "expansion",
+				animationTypeUpdate: "transition",
+				animationDuration: 500,
+				animationDurationUpdate: 300
+			};
+		}
+		function re(e, t, n) {
+			if (!e || !M.tooltip) return;
+			let r = e.row, i = z.value[r];
 			I.value = {
-				clientX: t.clientX,
-				clientY: t.clientY,
+				clientX: t,
+				clientY: n,
 				title: "",
 				items: [{
-					key: L.value[n],
-					name: H.value[n],
-					color: V.value[n],
-					value: r,
-					formatted: `${U(r)} (${W(r)})`
+					key: L.value[r],
+					name: H.value[r],
+					color: V.value[r],
+					value: i,
+					formatted: `${U(i)} (${W(i)})`
 				}],
-				datum: e.data,
-				index: n
+				datum: M.data[r],
+				index: r
 			};
 		}
-		function te() {
-			I.value = null;
-		}
-		let ne = { [E.selectors.segment]: {
-			mousemove: ee,
-			mouseleave: te
-		} };
-		return (t, n) => (g(), s(e, {
+		return n({
+			host: N,
+			renderer: () => M.renderer,
+			option: (e) => ({
+				animation: M.animation && !e.reducedMotion,
+				series: [ne(e)]
+			}),
+			setup: (e) => t(e, (e) => re(e.data, e.clientX, e.clientY), () => I.value = null)
+		}), (t, n) => (v(), c(e, {
 			hidden: P.value,
 			"onUpdate:hidden": n[0] ||= (e) => P.value = e,
 			width: F.value,
 			"onUpdate:width": n[1] ||= (e) => F.value = e,
 			testid: "ac-donut-chart",
-			height: f.height,
-			loading: f.loading,
-			empty: !f.data.length || !K.value,
-			"empty-text": f.emptyText,
-			"empty-icon": x(C),
-			legend: f.legend,
+			height: p.height,
+			loading: p.loading,
+			empty: !p.data.length || !K.value,
+			"empty-text": p.emptyText,
+			"empty-icon": ee(w),
+			legend: p.legend,
 			"legend-items": G.value,
 			"legend-centered": "",
 			summary: J.value,
-			title: f.title,
-			description: f.description,
+			title: p.title,
+			description: p.description,
 			table: q.value,
 			tip: I.value,
-			tooltip: f.tooltip
-		}, u({
-			default: S(() => [
-				d(x(T), {
-					data: f.data,
-					height: f.height,
-					duration: x(N)
-				}, {
-					default: S(() => [d(x(w), {
-						value: Q,
-						color: $,
-						"arc-width": f.arcWidth,
-						radius: X.value,
-						"pad-angle": 0,
-						"corner-radius": f.arcWidth ? 2 : 0,
-						"show-background": !0,
-						events: f.tooltip ? ne : void 0
-					}, null, 8, [
-						"arc-width",
-						"radius",
-						"corner-radius",
-						"events"
-					])]),
-					_: 1
-				}, 8, [
-					"data",
-					"height",
-					"duration"
-				]),
-				t.$slots.center || f.centerValue !== "" || f.centerLabel ? (g(), l("div", D, [y(t.$slots, "center", {
+			tooltip: p.tooltip
+		}, f({
+			default: C(() => [
+				d("div", {
+					ref_key: "host",
+					ref: N,
+					class: "size-full"
+				}, null, 512),
+				t.$slots.center || p.centerValue !== "" || p.centerLabel ? (v(), u("div", {
+					key: 0,
+					class: h(["pointer-events-none absolute inset-x-0 flex flex-col items-center text-center", p.half ? "justify-end" : "inset-y-0 justify-center"]),
+					style: _(p.half ? { bottom: `${p.height - $.value + 2}px` } : void 0)
+				}, [x(t.$slots, "center", {
 					total: B.value,
 					formatted: U(B.value)
-				}, () => [f.centerValue === "" ? c("", !0) : (g(), l("span", O, b(f.centerValue), 1)), f.centerLabel ? (g(), l("span", k, b(f.centerLabel), 1)) : c("", !0)])])) : c("", !0),
-				(g(!0), l(a, null, v(Z.value, (e) => (g(), l("span", {
+				}, () => [p.centerValue === "" ? l("", !0) : (v(), u("span", D, S(p.centerValue), 1)), p.centerLabel ? (v(), u("span", O, S(p.centerLabel), 1)) : l("", !0)])], 6)) : l("", !0),
+				(v(!0), u(o, null, b(te.value, (e) => (v(), u("span", {
 					key: e.key,
 					class: "pointer-events-none absolute -translate-x-1/2 -translate-y-1/2 text-xs font-medium text-muted tabular-nums",
-					style: h({
+					style: _({
 						left: `${e.left}px`,
 						top: `${e.top}px`
 					}),
 					"aria-hidden": "true"
-				}, b(e.text), 5))), 128))
+				}, S(e.text), 5))), 128))
 			]),
 			_: 2
 		}, [t.$slots.tooltip ? {
 			name: "tooltip",
-			fn: S((e) => [y(t.$slots, "tooltip", m(p(e)))]),
+			fn: C((e) => [x(t.$slots, "tooltip", g(m(e)))]),
 			key: "0"
 		} : void 0]), 1032, [
 			"hidden",

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

@@ -1,7 +1,7 @@
 export interface Props {
-    /** Text of the default trigger button. Without it (and without a `trigger` slot) a 32px ⋮ icon button is shown. */
+    /** Text of the default trigger button. Without it (and without a `trigger` slot) a 28px ⋯ icon button is shown. */
     label?: string;
-    /** Accessible name of the menu and of the ⋮ trigger, e.g. "Actions for demo-postgres". */
+    /** Accessible name of the menu and of the ⋯ trigger, e.g. "Actions for demo-postgres". */
     menuLabel?: string;
     /** Which edge of the trigger the menu lines up with. Use `end` for menus at the right of a row. Old `is-right`. */
     align?: "start" | "end";
@@ -9,6 +9,8 @@ export interface Props {
     placement?: "bottom" | "top";
     /** Disables the default trigger and stops the menu opening. */
     disabled?: boolean;
+    /** `menu`: cloud-ui's row-action list, at least 240px, full-width rows. `panel`: its navbar Create menu, 320px, padded with rounded rows, 20px icons and a medium-weight label over the description. */
+    variant?: "menu" | "panel";
 }
 type __VLS_Props = Props;
 type __VLS_Slots = {
@@ -29,6 +31,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
+    variant: "menu" | "panel";
     label: string;
     disabled: boolean;
     align: "start" | "end";