@ac-design/design-system 2.0.0 → 2.1.1

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

@@ -1,12 +1,15 @@
 import e from "../charts/ChartFrame.js";
-import { chartDuration as t } from "../charts/shared.js";
-import { useXYChart as n } from "../charts/xy.js";
-import { computed as r, createBlock as i, createSlots as a, createVNode as o, defineComponent as s, guardReactiveProps as c, isRef as l, normalizeProps as u, openBlock as d, ref as f, renderSlot as p, unref as m, withCtx as h } from "vue";
-import { ChartColumn as g } from "@lucide/vue";
-import { VisAxis as _, VisGroupedBar as v, VisStackedBar as y, VisXYContainer as b } from "@unovis/vue";
-import { GroupedBar as x, StackedBar as S } from "@unovis/ts";
+import { bindAxisHover as t, useEChart as n } from "../charts/echarts.js";
+import { readNumber as r } from "../charts/shared.js";
+import { LARGE_DATA as i, useXYChart as a } from "../charts/xy.js";
+import { cartesianOption as o, locateRow as s, prepareZoom as c } from "../charts/cartesian.js";
+import { computed as l, createBlock as u, createElementVNode as d, createSlots as f, defineComponent as p, guardReactiveProps as m, isRef as h, normalizeProps as g, openBlock as _, ref as v, renderSlot as y, unref as b, withCtx as x } from "vue";
+import { ChartColumn as S } from "@lucide/vue";
+import { use as C } from "echarts/core";
+import { BarChart as w } from "echarts/charts";
+import { AxisPointerComponent as T, GridComponent as E } from "echarts/components";
 //#region src/lib/components/AcBarChart.vue?vue&type=script&setup=true&lang.ts
-var C = /*@__PURE__*/ s({
+var D = /*@__PURE__*/ p({
 	__name: "AcBarChart",
 	props: {
 		stacked: {
@@ -46,153 +49,146 @@ var C = /*@__PURE__*/ s({
 		},
 		emptyText: { default: "No data to show yet" },
 		title: { default: "" },
-		description: { default: "" }
+		description: { default: "" },
+		zoom: {
+			type: Boolean,
+			default: !1
+		},
+		renderer: { default: "canvas" },
+		animation: {
+			type: Boolean,
+			default: !0
+		}
 	},
-	setup(s) {
-		let C = s, w = t(), { hidden: T, width: E, visibleKeys: D, colors: O, legendItems: k, x: A, yAccessors: j, xTickValues: M, yTicks: N, xTickFormat: P, formatY: F, rowLabel: I, yDomain: L, tooltipItems: R, tooltipTotal: z, table: B, ariaLabel: V } = n(C, {
-			stacked: () => C.stacked,
+	setup(p) {
+		C([
+			w,
+			E,
+			T
+		]);
+		let D = p, O = l(() => D.orientation === "horizontal"), k = a(D, {
+			stacked: () => D.stacked,
 			positions: !0,
-			horizontal: () => C.orientation === "horizontal"
-		}), H = f(null), U = r(() => C.orientation === "horizontal"), W = r(() => U.value ? "y" : "x"), G = r(() => U.value ? "x" : "y"), K = r(() => U.value ? Math.max(2, Math.floor((E.value || 640) / 90)) : N.value), q = Symbol("row"), J = r(() => C.data.map((e, t) => ({
-			...e,
-			[q]: t
-		})));
-		function Y(e, t) {
-			let n = e[q], r = n === void 0 ? void 0 : C.data[n];
-			r && n !== void 0 && (H.value = {
-				clientX: t.clientX,
-				clientY: t.clientY,
-				title: I(n),
-				items: R(r),
-				total: C.stacked && D.value.length > 1 ? z(r) : void 0,
-				datum: r,
-				index: n
+			horizontal: () => O.value
+		}), { hidden: A, width: j, legendItems: M, rowLabel: N, tooltipItems: P, tooltipTotal: F, table: I, ariaLabel: L } = k, R = v(), z = v(null);
+		function B(e) {
+			let t = D.radius;
+			return O.value ? e < 0 ? [
+				t,
+				0,
+				0,
+				t
+			] : [
+				0,
+				t,
+				t,
+				0
+			] : e < 0 ? [
+				0,
+				0,
+				t,
+				t
+			] : [
+				t,
+				t,
+				0,
+				0
+			];
+		}
+		function V(e) {
+			return D.data.map((t) => {
+				let n, i;
+				for (let a of e) {
+					let e = r(t, a) ?? 0;
+					e > 0 ? n = a : e < 0 && (i = a);
+				}
+				return {
+					top: n,
+					bottom: i
+				};
 			});
 		}
-		function X() {
-			H.value = null;
+		function H(e) {
+			let t = D.data.length > i, n = k.visibleKeys.value, a = D.stacked && !t ? V(n) : [];
+			return n.map((n) => {
+				let o = e.color(k.colorOf.value[n]), s = D.data.map((e) => r(e, n)), c = t ? s : s.map((e, t) => e === null || e === 0 ? e : {
+					value: e,
+					itemStyle: { borderRadius: !D.stacked || a[t]?.top === n || a[t]?.bottom === n ? B(e) : 0 }
+				});
+				return {
+					id: n,
+					type: "bar",
+					name: D.categories[n]?.name ?? n,
+					data: c,
+					stack: D.stacked ? "total" : void 0,
+					barMaxWidth: D.barMaxWidth,
+					barCategoryGap: "30%",
+					barGap: D.stacked ? void 0 : "15%",
+					itemStyle: {
+						color: o,
+						borderColor: e.surface,
+						borderWidth: D.stacked && !t ? 1 : 0
+					},
+					emphasis: { focus: "none" },
+					large: t,
+					largeThreshold: i,
+					progressive: t ? 4e3 : 0
+				};
+			});
 		}
-		let Z = r(() => ({ [C.stacked ? S.selectors.barGroup : x.selectors.barGroup]: {
-			mousemove: Y,
-			mouseleave: X
-		} }));
-		return (t, n) => (d(), i(e, {
-			hidden: m(T),
-			"onUpdate:hidden": n[0] ||= (e) => l(T) ? T.value = e : null,
-			width: m(E),
-			"onUpdate:width": n[1] ||= (e) => l(E) ? E.value = e : null,
+		return n({
+			host: R,
+			renderer: () => D.renderer,
+			prepare: () => c(D),
+			option: (e) => ({
+				...o(e, D, k, {
+					boundaryGap: !0,
+					horizontal: O.value,
+					pointer: "shadow"
+				}),
+				series: H(e)
+			}),
+			setup: (e) => t(e, (t) => s(e, t, k, O.value), (e, t, n) => {
+				let r = D.data[e];
+				r && D.tooltip && (z.value = {
+					clientX: t,
+					clientY: n,
+					title: N(e),
+					items: P(r),
+					total: D.stacked && k.visibleKeys.value.length > 1 ? F(r) : void 0,
+					datum: r,
+					index: e
+				});
+			}, () => z.value = null)
+		}), (t, n) => (_(), u(e, {
+			hidden: b(A),
+			"onUpdate:hidden": n[0] ||= (e) => h(A) ? A.value = e : null,
+			width: b(j),
+			"onUpdate:width": n[1] ||= (e) => h(j) ? j.value = e : null,
 			testid: "ac-bar-chart",
-			height: s.height,
-			loading: s.loading,
-			empty: !s.data.length,
-			"empty-text": s.emptyText,
-			"empty-icon": m(g),
-			legend: s.legend,
-			"legend-items": m(k),
-			summary: m(V),
-			title: s.title,
-			description: s.description,
-			table: m(B),
-			tip: H.value,
-			tooltip: s.tooltip
-		}, a({
-			default: h(() => [o(m(b), {
-				data: J.value,
-				height: s.height,
-				duration: m(w),
-				"y-domain": U.value ? void 0 : m(L),
-				"x-domain": U.value ? m(L) : void 0,
-				"y-direction": U.value ? "south" : void 0,
-				padding: {
-					top: 8,
-					right: 8
-				}
-			}, {
-				default: h(() => [
-					s.stacked ? (d(), i(m(y), {
-						key: 0,
-						x: m(A),
-						y: m(j),
-						color: m(O),
-						orientation: s.orientation,
-						"rounded-corners": s.radius,
-						"bar-max-width": s.barMaxWidth,
-						"bar-padding": .3,
-						events: s.tooltip ? Z.value : void 0
-					}, null, 8, [
-						"x",
-						"y",
-						"color",
-						"orientation",
-						"rounded-corners",
-						"bar-max-width",
-						"events"
-					])) : (d(), i(m(v), {
-						key: 1,
-						x: m(A),
-						y: m(j),
-						color: m(O),
-						orientation: s.orientation,
-						"rounded-corners": s.radius,
-						"group-max-width": s.barMaxWidth * Math.max(1, m(D).length),
-						"group-padding": .3,
-						"bar-padding": .1,
-						events: s.tooltip ? Z.value : void 0
-					}, null, 8, [
-						"x",
-						"y",
-						"color",
-						"orientation",
-						"rounded-corners",
-						"group-max-width",
-						"events"
-					])),
-					o(m(_), {
-						type: W.value,
-						label: s.xLabel || void 0,
-						"tick-format": m(P),
-						"tick-values": m(M),
-						"min-max-ticks-only-when-width-is-less": 160,
-						"grid-line": !1,
-						"tick-line": !1,
-						"domain-line": !U.value,
-						"tick-text-hide-overlapping": !0
-					}, null, 8, [
-						"type",
-						"label",
-						"tick-format",
-						"tick-values",
-						"domain-line"
-					]),
-					o(m(_), {
-						type: G.value,
-						label: s.yLabel || void 0,
-						"tick-format": m(F),
-						"num-ticks": K.value,
-						"grid-line": s.gridLines,
-						"tick-line": !1,
-						"domain-line": !1
-					}, null, 8, [
-						"type",
-						"label",
-						"tick-format",
-						"num-ticks",
-						"grid-line"
-					])
-				]),
-				_: 1
-			}, 8, [
-				"data",
-				"height",
-				"duration",
-				"y-domain",
-				"x-domain",
-				"y-direction"
-			])]),
+			height: p.height,
+			loading: p.loading,
+			empty: !p.data.length,
+			"empty-text": p.emptyText,
+			"empty-icon": b(S),
+			legend: p.legend,
+			"legend-items": b(M),
+			summary: b(L),
+			title: p.title,
+			description: p.description,
+			table: b(I),
+			tip: z.value,
+			tooltip: p.tooltip
+		}, f({
+			default: x(() => [d("div", {
+				ref_key: "host",
+				ref: R,
+				class: "size-full"
+			}, null, 512)]),
 			_: 2
 		}, [t.$slots.tooltip ? {
 			name: "tooltip",
-			fn: h((e) => [p(t.$slots, "tooltip", u(c(e)))]),
+			fn: x((e) => [y(t.$slots, "tooltip", g(m(e)))]),
 			key: "0"
 		} : void 0]), 1032, [
 			"hidden",
@@ -214,4 +210,4 @@ var C = /*@__PURE__*/ s({
 	}
 });
 //#endregion
-export { C as default };
+export { D as default };

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

@@ -14,12 +14,15 @@ export interface Props {
     items: BreadcrumbItem[];
     /** Replaces the first item's label with a house icon (the label stays as its accessible name). */
     homeIcon?: boolean;
-    /** With more items than this, the middle ones collapse behind "…" until clicked. */
+    /** With more items than this, the middle ones collapse behind "…" until clicked. `0` (the default) never collapses, as in cloud-ui. */
     maxItems?: number;
+    /** The mark between crumbs: `chevron` or `slash`. */
+    separator?: "chevron" | "slash";
 }
 declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     homeIcon: boolean;
     maxItems: number;
+    separator: "chevron" | "slash";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,5 +1,5 @@
-import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, getCurrentInstance as c, mergeProps as l, normalizeClass as u, openBlock as d, ref as f, renderList as p, resolveDynamicComponent as m, toDisplayString as h, unref as g, withCtx as _ } from "vue";
-import { ChevronRight as v, House as y } from "@lucide/vue";
+import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, defineComponent as o, getCurrentInstance as s, mergeProps as c, normalizeClass as l, openBlock as u, ref as d, renderList as f, resolveDynamicComponent as p, toDisplayString as m, unref as h, withCtx as g } from "vue";
+import { ChevronRight as _, House as v, Slash as y } from "@lucide/vue";
 //#region src/lib/components/AcBreadcrumb.vue?vue&type=script&setup=true&lang.ts
 var b = {
 	"aria-label": "Breadcrumb",
@@ -19,7 +19,7 @@ var b = {
 	key: 0,
 	class: "flex size-5 shrink-0 items-center justify-center rounded-8 bg-primary/10 text-primary",
 	"aria-hidden": "true"
-}, O = { class: "max-w-48 truncate" }, k = /*@__PURE__*/ s({
+}, O = { class: "max-w-48 truncate" }, k = /*@__PURE__*/ o({
 	__name: "AcBreadcrumb",
 	props: {
 		items: {},
@@ -27,15 +27,16 @@ var b = {
 			type: Boolean,
 			default: !1
 		},
-		maxItems: { default: 4 }
+		maxItems: { default: 0 },
+		separator: { default: "chevron" }
 	},
-	setup(s) {
-		let k = s, A = c()?.appContext.components.RouterLink, j = f(!1), M = t(() => {
+	setup(o) {
+		let k = o, A = s()?.appContext.components.RouterLink, j = d(!1), M = t(() => {
 			let e = k.items.map((e, t) => ({
 				item: e,
 				index: t
 			}));
-			return j.value || e.length <= k.maxItems ? e : [
+			return j.value || k.maxItems < 3 || e.length <= k.maxItems ? e : [
 				e[0],
 				null,
 				...e.slice(e.length - (k.maxItems - 2))
@@ -52,15 +53,15 @@ var b = {
 				href: t
 			} : null;
 		}
-		return (t, c) => (d(), i("nav", b, [a("ol", x, [(d(!0), i(e, null, p(M.value, (t, f) => (d(), i(e, { key: t ? t.index : "ellipsis" }, [f > 0 ? (d(), i("li", S, [o(g(v), { class: "size-3.5 shrink-0" })])) : r("", !0), t ? (d(), i("li", w, [t.index === s.items.length - 1 || !N(t.item) ? (d(), i("span", {
+		return (t, s) => (u(), i("nav", b, [a("ol", x, [(u(!0), i(e, null, f(M.value, (t, d) => (u(), i(e, { key: t ? t.index : "ellipsis" }, [d > 0 ? (u(), i("li", S, [(u(), n(p(o.separator === "slash" ? h(y) : h(_)), { class: "size-3.5 shrink-0 rtl:rotate-180" }))])) : r("", !0), t ? (u(), i("li", w, [t.index === o.items.length - 1 || !N(t.item) ? (u(), i("span", {
 			key: 0,
-			class: u(["flex min-w-0 items-center gap-1.5 px-1.5 py-0.5", t.index === s.items.length - 1 && "font-medium text-heading"]),
-			"aria-current": t.index === s.items.length - 1 ? "page" : void 0
-		}, [t.item.icon ? (d(), n(m(t.item.icon), {
+			class: l(["flex min-w-0 items-center gap-1.5 px-1.5 py-0.5", t.index === o.items.length - 1 && "font-medium text-heading"]),
+			"aria-current": t.index === o.items.length - 1 ? "page" : void 0
+		}, [t.item.icon ? (u(), n(p(t.item.icon), {
 			key: 0,
 			class: "size-4 shrink-0 text-primary",
 			"aria-hidden": "true"
-		})) : r("", !0), a("span", E, h(t.item.label), 1)], 10, T)) : (d(), n(m(N(t.item).is), l({
+		})) : r("", !0), a("span", E, m(t.item.label), 1)], 10, T)) : (u(), n(p(N(t.item).is), c({
 			key: 1,
 			ref_for: !0
 		}, {
@@ -69,19 +70,19 @@ var b = {
 		}, {
 			class: "flex min-w-0 items-center gap-1.5 rounded-8 px-1.5 py-0.5 text-muted no-underline transition-colors duration-200 hover:bg-surface-sunken hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
 			title: t.item.label,
-			"aria-label": s.homeIcon && t.index === 0 ? t.item.label : void 0
+			"aria-label": o.homeIcon && t.index === 0 ? t.item.label : void 0
 		}), {
-			default: _(() => [s.homeIcon && t.index === 0 ? (d(), n(g(y), {
+			default: g(() => [o.homeIcon && t.index === 0 ? (u(), n(h(v), {
 				key: 0,
 				class: "size-4 shrink-0",
 				"aria-hidden": "true"
-			})) : (d(), i(e, { key: 1 }, [t.item.icon ? (d(), i("span", D, [(d(), n(m(t.item.icon), { class: "size-3.5" }))])) : r("", !0), a("span", O, h(t.item.label), 1)], 64))]),
+			})) : (u(), i(e, { key: 1 }, [t.item.icon ? (u(), i("span", D, [(u(), n(p(t.item.icon), { class: "size-3.5" }))])) : r("", !0), a("span", O, m(t.item.label), 1)], 64))]),
 			_: 2
-		}, 1040, ["title", "aria-label"]))])) : (d(), i("li", C, [a("button", {
+		}, 1040, ["title", "aria-label"]))])) : (u(), i("li", C, [a("button", {
 			type: "button",
 			class: "cursor-pointer rounded-8 px-1.5 py-0.5 transition-colors duration-200 hover:bg-surface-sunken hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
 			"aria-label": "Show full path",
-			onClick: c[0] ||= (e) => j.value = !0
+			onClick: s[0] ||= (e) => j.value = !0
 		}, " … ")]))], 64))), 128))])]));
 	}
 });

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

@@ -19,6 +19,8 @@ export interface Props {
 type __VLS_Slots = {
     /** Extra batch buttons, placed before the main action, e.g. a "Download" button. Use `size="small"` buttons. */
     actions?: () => unknown;
+    /** Same as `actions`, for cloud-ui's `BulkActionBar` markup. */
+    default?: () => unknown;
 };
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     clear: () => any;

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

@@ -51,7 +51,7 @@ var S = { class: "min-h-0 overflow-hidden" }, C = { class: "text-base text-headi
 				"aria-label": "Bulk actions",
 				class: "flex flex-wrap items-center justify-between gap-x-3 gap-y-2 rounded-14 border border-primary/30 bg-primary/5 px-4 py-2.5"
 			}, [c("p", C, [c("span", w, v(f.count), 1), u(" " + v(N.value) + " selected ", 1)]), c("div", T, [
-				g(i.$slots, "actions"),
+				g(i.$slots, "actions", {}, () => [g(i.$slots, "default")]),
 				d(e, {
 					color: "ghost",
 					size: "small",

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

@@ -4,10 +4,12 @@ export interface Props {
     title?: string;
     /** Colour of the button. `white` and `ghost` are neutral styles for secondary actions. */
     color?: Tone | "white" | "ghost";
-    /** `solid` fill, `light` tinted fill (12% of the colour) or `outlined` border with a white fill. */
-    variant?: Variant;
-    /** Height and padding: `small` 32px, `normal` 40px, `medium` 44px. */
-    size?: "small" | "normal" | "medium";
+    /** `solid` fill, `light` tinted fill (12% of the colour), `outlined` border on the page background, or `link`: coloured text with no box that underlines on hover, e.g. "Go to Health". */
+    variant?: Variant | "link";
+    /** Height and padding: `xs` 28px, `small` 36px, `normal` 42px (the field height, so a button lines up with an input), `medium` 42px with 16px text and 44px from 768px (cloud-ui's default `lg`). */
+    size?: "xs" | "small" | "normal" | "medium";
+    /** A round, square button for a single icon: 28px at `xs`, 32px at `small`, 36px at `normal`, 44px at `medium`. Put the icon in the `icon` or default slot; `title` becomes the accessible name, or add an `aria-label`. */
+    iconOnly?: boolean;
     /** Shows a spinner before the label and blocks clicks. */
     loading?: boolean;
     /** Disables the button (50% opacity, no click events). */
@@ -16,6 +18,8 @@ export interface Props {
     type?: "button" | "submit" | "reset";
     /** Renders an <a> styled as the button instead of a <button>. */
     href?: string;
+    /** Fully rounded pill corners at every size and variant, e.g. an empty state's "Get started". */
+    rounded?: boolean;
 }
 type __VLS_Slots = {
     /** Button content, after the icon and `title`. */
@@ -30,14 +34,16 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     onClick?: ((e: MouseEvent) => any) | undefined;
 }>, {
-    variant: Variant;
+    variant: Variant | "link";
     type: "button" | "submit" | "reset";
     title: string;
     disabled: boolean;
     color: Tone | "white" | "ghost";
     href: string;
-    size: "small" | "normal" | "medium";
+    size: "xs" | "small" | "normal" | "medium";
+    iconOnly: boolean;
     loading: boolean;
+    rounded: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;