@ac-design/design-system 1.0.2 → 2.0.0

package/dist/lib/components/AcBulkActionBar.js

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

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

@@ -0,0 +1,43 @@
+import type { Component } from "vue";
+import type { Tone } from "./types";
+export interface Props {
+    /** How many rows are selected. The bar slides in above 0 and is removed at 0. */
+    count: number;
+    /** Singular noun for one selected row, in lower case, e.g. "subnet" or "Postgres database". */
+    label: string;
+    /** Plural noun when it isn't `label` + "s", e.g. "backup policies". */
+    pluralLabel?: string;
+    /** Text of the batch action button. Pass an empty string to show only the `actions` slot. */
+    actionLabel?: string;
+    /** Colour of the batch action button, tinted (`light`). */
+    actionColor?: Tone;
+    /** Icon before the action text. Defaults to a bin when `actionColor` is `danger`, and no icon otherwise. */
+    actionIcon?: Component;
+    /** Shows a spinner on the action button and disables Clear while the batch request runs. Old cloud-ui `is-loading`. */
+    loading?: boolean;
+}
+type __VLS_Slots = {
+    /** Extra batch buttons, placed before the main action, e.g. a "Download" button. Use `size="small"` buttons. */
+    actions?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    clear: () => any;
+    action: () => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onClear?: (() => any) | undefined;
+    onAction?: (() => any) | undefined;
+}>, {
+    loading: boolean;
+    actionLabel: string;
+    actionIcon: Component;
+    actionColor: Tone;
+    pluralLabel: string;
+}, {}, {}, {}, 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;
+    };
+};

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

@@ -0,0 +1,84 @@
+import e from "./AcButton.js";
+import { Fragment as t, Teleport as n, Transition as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createSlots as l, createTextVNode as u, createVNode as d, defineComponent as f, mergeProps as p, openBlock as m, ref as h, renderSlot as g, resolveDynamicComponent as _, toDisplayString as v, watch as y, withCtx as b } from "vue";
+import { Trash2 as x } from "@lucide/vue";
+//#region src/lib/components/AcBulkActionBar.vue?vue&type=script&setup=true&lang.ts
+var S = { class: "min-h-0 overflow-hidden" }, C = { class: "text-base text-heading" }, w = { class: "font-semibold tabular-nums" }, T = { class: "flex flex-wrap items-center gap-2" }, E = {
+	class: "sr-only",
+	role: "status",
+	"data-ac-ds": "",
+	"data-testid": "ac-bulk-action-bar-status"
+}, D = "button:not([disabled]), a[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])", O = /*@__PURE__*/ f({
+	inheritAttrs: !1,
+	__name: "AcBulkActionBar",
+	props: {
+		count: {},
+		label: {},
+		pluralLabel: { default: "" },
+		actionLabel: { default: "Delete" },
+		actionColor: { default: "danger" },
+		actionIcon: { default: void 0 },
+		loading: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: ["clear", "action"],
+	setup(f, { emit: O }) {
+		let k = f, A = O, j = h(null), M = h(""), N = i(() => k.count === 1 ? k.label : k.pluralLabel || `${k.label}s`), P = i(() => `${k.count} ${N.value} selected`), F = i(() => k.actionIcon ?? (k.actionColor === "danger" ? x : void 0));
+		function I() {
+			let e = j.value;
+			if (!e || !e.contains(document.activeElement)) return;
+			let t = [...document.querySelectorAll(D)].find((t) => !e.contains(t) && !!(e.compareDocumentPosition(t) & Node.DOCUMENT_POSITION_FOLLOWING) && t.offsetParent !== null);
+			t ? t.focus() : document.activeElement?.blur();
+		}
+		return y(() => k.count, (e, t) => {
+			e <= 0 && t > 0 && I(), M.value = e > 0 ? P.value : t > 0 ? "Selection cleared" : "";
+		}), (i, h) => (m(), s(t, null, [d(r, {
+			"enter-active-class": "grid transition-[grid-template-rows,opacity,translate] duration-200 ease-out motion-reduce:transition-none",
+			"enter-from-class": "grid-rows-[0fr] -translate-y-1 opacity-0",
+			"enter-to-class": "grid-rows-[1fr]",
+			"leave-active-class": "grid transition-[grid-template-rows,opacity] duration-150 ease-in motion-reduce:transition-none",
+			"leave-from-class": "grid-rows-[1fr]",
+			"leave-to-class": "grid-rows-[0fr] opacity-0"
+		}, {
+			default: b(() => [f.count > 0 ? (m(), s("div", p({ key: 0 }, i.$attrs, {
+				"data-ac-ds": "",
+				"data-testid": "ac-bulk-action-bar"
+			}), [c("div", S, [c("div", {
+				ref_key: "bar",
+				ref: j,
+				role: "region",
+				"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"),
+				d(e, {
+					color: "ghost",
+					size: "small",
+					title: "Clear",
+					"aria-label": "Clear selection",
+					disabled: f.loading,
+					onClick: h[0] ||= (e) => A("clear")
+				}, null, 8, ["disabled"]),
+				f.actionLabel ? (m(), a(e, {
+					key: 0,
+					color: f.actionColor,
+					variant: "light",
+					size: "small",
+					loading: f.loading,
+					onClick: h[1] ||= (e) => A("action")
+				}, l({
+					default: b(() => [u(" " + v(f.actionLabel), 1)]),
+					_: 2
+				}, [F.value ? {
+					name: "icon",
+					fn: b(() => [(m(), a(_(F.value)))]),
+					key: "0"
+				} : void 0]), 1032, ["color", "loading"])) : o("", !0)
+			])], 512)])], 16)) : o("", !0)]),
+			_: 3
+		}), (m(), a(n, { to: "body" }, [c("div", E, v(M.value), 1)]))], 64));
+	}
+});
+//#endregion
+export { O as default };

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

@@ -4,11 +4,11 @@ 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 (-95 background, -30 text) or `outlined` border. */
+    /** `solid` fill, `light` tinted fill (12% of the colour) or `outlined` border with a white fill. */
     variant?: Variant;
-    /** Height and padding: `small` 28px, `normal` 32px, `medium` 40px. */
+    /** Height and padding: `small` 32px, `normal` 40px, `medium` 44px. */
     size?: "small" | "normal" | "medium";
-    /** Shows a spinner, hides the label and blocks clicks. */
+    /** Shows a spinner before the label and blocks clicks. */
     loading?: boolean;
     /** Disables the button (50% opacity, no click events). */
     disabled?: boolean;

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

@@ -2,11 +2,11 @@ import e from "./AcSpinner.js";
 import { computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, defineComponent as a, normalizeClass as o, openBlock as s, renderSlot as c, resolveDynamicComponent as l, toDisplayString as u, withCtx as d } from "vue";
 //#region src/lib/components/AcButton.vue?vue&type=script&setup=true&lang.ts
 var f = {
-	key: 0,
+	key: 1,
 	class: "-ml-0.5 inline-flex shrink-0 items-center justify-center",
 	"aria-hidden": "true"
-}, p = { key: 1 }, m = {
-	key: 2,
+}, p = { key: 2 }, m = {
+	key: 3,
 	class: "-mr-0.5 inline-flex shrink-0 items-center justify-center",
 	"aria-hidden": "true"
 }, h = /*@__PURE__*/ a({
@@ -31,35 +31,43 @@ var f = {
 	setup(a, { emit: h }) {
 		let g = a, _ = h, v = {
 			primary: {
-				solid: "bg-primary text-white border-black/15 shadow-button hover:bg-primary-hover",
-				light: "bg-primary-95 text-primary-20 border-transparent hover:bg-primary-93",
-				outlined: "bg-surface text-primary-20 border-[color-mix(in_srgb,var(--color-primary)_38%,var(--color-border))] shadow-xs hover:bg-primary-97 hover:border-[color-mix(in_srgb,var(--color-primary)_60%,var(--color-border))]"
+				solid: "border-transparent bg-primary text-white shadow-button hover:bg-primary-hover hover:shadow-md",
+				light: "border-transparent bg-primary/12 text-primary-strong hover:bg-primary/18",
+				outlined: "border-primary/40 bg-surface text-primary-strong hover:bg-primary/10"
 			},
 			info: {
-				solid: "bg-info text-white border-black/15 shadow-button hover:bg-info-hover",
-				light: "bg-blue-95 text-blue-30 border-transparent hover:bg-blue-93",
-				outlined: "bg-surface text-blue-30 border-blue-80 shadow-xs hover:bg-blue-97"
+				solid: "border-transparent bg-info text-white shadow-button hover:bg-info-hover hover:shadow-md",
+				light: "border-transparent bg-info/12 text-info-strong hover:bg-info/18",
+				outlined: "border-info/40 bg-surface text-info-strong hover:bg-info/10"
 			},
 			success: {
-				solid: "bg-success text-white border-black/15 shadow-button hover:bg-success-hover",
-				light: "bg-green-95 text-green-20 border-transparent hover:bg-green-93",
-				outlined: "bg-surface text-green-20 border-green-70 shadow-xs hover:bg-green-97"
+				solid: "border-transparent bg-success text-white shadow-button hover:bg-success-hover hover:shadow-md",
+				light: "border-transparent bg-success/12 text-success-strong hover:bg-success/18",
+				outlined: "border-success/40 bg-surface text-success-strong hover:bg-success/10"
 			},
 			warning: {
-				solid: "bg-warning text-on-warning border-black/10 shadow-button hover:bg-warning-hover",
-				light: "bg-yellow-95 text-yellow-20 border-transparent hover:bg-yellow-93",
-				outlined: "bg-surface text-yellow-20 border-yellow-70 shadow-xs hover:bg-yellow-97"
+				solid: "border-transparent bg-warning text-on-warning shadow-button hover:bg-warning-hover hover:shadow-md",
+				light: "border-transparent bg-warning/12 text-warning-strong hover:bg-warning/18",
+				outlined: "border-warning/45 bg-surface text-warning-strong hover:bg-warning/10"
 			},
 			danger: {
-				solid: "bg-danger text-white border-black/15 shadow-button hover:bg-danger-hover",
-				light: "bg-red-95 text-red-30 border-transparent hover:bg-red-93",
-				outlined: "bg-surface text-red-30 border-red-80 shadow-xs hover:bg-red-97"
+				solid: "border-transparent bg-danger text-white shadow-button hover:bg-danger-hover hover:shadow-md",
+				light: "border-transparent bg-danger/12 text-danger-strong hover:bg-danger/18",
+				outlined: "border-danger/40 bg-surface text-danger-strong hover:bg-danger/10"
 			}
-		}, y = t(() => g.color === "white" ? "bg-surface text-heading border-border shadow-xs hover:bg-surface-muted hover:border-border-dark" : g.color === "ghost" ? "bg-transparent text-body border-transparent hover:bg-surface-sunken hover:text-heading" : v[g.color][g.variant]), b = t(() => ({
-			small: "h-7 gap-1.5 px-2.5 text-xs [&_svg]:size-3.5",
-			normal: "h-8 gap-2 px-3.5 text-base [&_svg]:size-4",
-			medium: "h-10 gap-2 px-5 text-lg [&_svg]:size-4"
-		})[g.size]), x = (e) => {
+		}, y = {
+			primary: "focus-visible:ring-ring",
+			info: "focus-visible:ring-info",
+			success: "focus-visible:ring-success",
+			warning: "focus-visible:ring-warning",
+			danger: "focus-visible:ring-danger",
+			white: "focus-visible:ring-ring",
+			ghost: "focus-visible:ring-ring"
+		}, b = t(() => g.color === "white" ? "border-border bg-surface text-heading hover:bg-surface-sunken/70" : g.color === "ghost" ? "border-transparent bg-transparent text-heading hover:bg-surface-sunken" : v[g.color][g.variant]), x = t(() => ({
+			small: "h-8 gap-1.5 px-3 text-base [&_svg]:size-4",
+			normal: "h-10 gap-2 px-4 text-base [&_svg]:size-4",
+			medium: "h-11 gap-2 px-5 text-lg [&_svg]:size-4"
+		})[g.size]), S = (e) => {
 			!g.disabled && !g.loading && _("click", e);
 		};
 		return (t, h) => (s(), n(l(a.href ? "a" : "button"), {
@@ -68,25 +76,25 @@ var f = {
 			disabled: !a.href && a.disabled || void 0,
 			"aria-disabled": a.href && a.disabled || void 0,
 			"aria-busy": a.loading || void 0,
-			class: o(["relative inline-flex cursor-pointer items-center justify-center rounded-6 border font-medium tracking-[-0.005em] whitespace-nowrap transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-out select-none focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring active:translate-y-px disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none disabled:active:translate-y-0 aria-disabled:pointer-events-none aria-disabled:opacity-50", [
-				y.value,
+			class: o(["relative inline-flex cursor-pointer items-center justify-center rounded-10 border font-medium whitespace-nowrap transition-[color,background-color,border-color,box-shadow,transform] duration-200 select-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none active:translate-y-px disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none disabled:active:translate-y-0 aria-disabled:pointer-events-none aria-disabled:opacity-50 motion-reduce:active:translate-y-0", [
 				b.value,
-				a.loading && "text-transparent! pointer-events-none"
+				y[a.color],
+				x.value,
+				a.loading && "pointer-events-none"
 			]]),
 			"data-ac-ds": "",
 			"data-testid": "ac-button",
-			onClick: x
+			onClick: S
 		}, {
 			default: d(() => [
-				t.$slots.icon ? (s(), i("span", f, [c(t.$slots, "icon")])) : r("", !0),
-				a.title ? (s(), i("span", p, u(a.title), 1)) : r("", !0),
-				c(t.$slots, "default"),
-				t.$slots["icon-right"] ? (s(), i("span", m, [c(t.$slots, "icon-right")])) : r("", !0),
 				a.loading ? (s(), n(e, {
-					key: 3,
-					class: o(["absolute inset-0 m-auto", a.variant === "solid" && a.color !== "white" && a.color !== "ghost" ? "text-white" : "text-primary"]),
+					key: 0,
+					class: "-ml-0.5",
 					label: ""
-				}, null, 8, ["class"])) : r("", !0)
+				})) : t.$slots.icon ? (s(), i("span", f, [c(t.$slots, "icon")])) : r("", !0),
+				a.title ? (s(), i("span", p, u(a.title), 1)) : r("", !0),
+				c(t.$slots, "default"),
+				t.$slots["icon-right"] ? (s(), i("span", m, [c(t.$slots, "icon-right")])) : r("", !0)
 			]),
 			_: 3
 		}, 8, [

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

@@ -1,6 +1,6 @@
 import { computed as e, createElementBlock as t, defineComponent as n, normalizeClass as r, openBlock as i, renderSlot as a } from "vue";
 //#region src/lib/components/AcButtons.vue?vue&type=script&setup=true&lang.ts
-var o = ["aria-label"], s = "[&>*]:rounded-none [&>*:first-child]:rounded-l-6 [&>*:last-child]:rounded-r-6 [&>*:not(:first-child)]:-ml-px [&>*:hover]:z-[1] [&>*:focus-visible]:z-[2]", c = /*@__PURE__*/ n({
+var o = ["aria-label"], s = "[&>*]:rounded-none [&>*:first-child]:rounded-l-10 [&>*:last-child]:rounded-r-10 [&>*:not(:first-child)]:-ml-px [&>*:hover]:z-[1] [&>*:focus-visible]:z-[2]", c = /*@__PURE__*/ n({
 	__name: "AcButtons",
 	props: {
 		attached: {

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

@@ -1,9 +1,12 @@
+import type { Component } from "vue";
 export interface Props {
-    /** Header title. The header only renders with a title or `actions` slot. */
+    /** Header title. The header renders with a title, an `icon`, or the `actions` or `badges` slot. */
     title?: string;
     /** Small line under the title. */
     subtitle?: string;
-    /** Adds 20px padding to the body. Turn off for flush tables; the body then clips to the card's rounded corners. */
+    /** A Lucide icon shown in a tinted 32px tile before the title. */
+    icon?: Component;
+    /** Adds 24px padding to the body. Turn off for flush tables; the body then clips to the card's rounded corners. */
     padded?: boolean;
 }
 type __VLS_Slots = {
@@ -11,9 +14,14 @@ type __VLS_Slots = {
     default?: () => unknown;
     /** Buttons on the right of the header. */
     actions?: () => unknown;
+    /** Badges or tags after the title. */
+    badges?: () => unknown;
+    /** A footer row under the body, e.g. a timestamp or a link. */
+    footer?: () => unknown;
 };
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     title: string;
+    icon: Component;
     subtitle: string;
     padded: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,28 +1,54 @@
-import { createCommentVNode as e, createElementBlock as t, createElementVNode as n, defineComponent as r, normalizeClass as i, openBlock as a, renderSlot as o, toDisplayString as s } from "vue";
+import { createBlock as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, defineComponent as i, normalizeClass as a, openBlock as o, renderSlot as s, resolveDynamicComponent as c, toDisplayString as l, useSlots as u } from "vue";
 //#region src/lib/components/AcCard.vue?vue&type=script&setup=true&lang.ts
-var c = {
-	class: "rounded-10 border border-border bg-surface shadow-xs",
+var d = {
+	class: "rounded-14 border border-border bg-surface text-body",
 	"data-ac-ds": "",
 	"data-testid": "ac-card"
-}, l = {
+}, f = {
 	key: 0,
-	class: "flex items-center justify-between gap-4 border-b border-border-light px-5 py-3.5"
-}, u = { class: "min-w-0" }, d = { class: "truncate" }, f = {
+	class: "flex flex-wrap items-start justify-between gap-3 border-b border-border px-6 pt-5 pb-3"
+}, p = { class: "flex min-w-0 flex-1 items-center gap-3" }, m = {
 	key: 0,
-	class: "mt-0.5 truncate text-xs text-muted"
-}, p = { class: "flex shrink-0 items-center gap-2" }, m = /*@__PURE__*/ r({
+	class: "flex size-8 shrink-0 items-center justify-center rounded-10 border border-primary/25 bg-primary/10 text-primary-strong",
+	"aria-hidden": "true"
+}, h = { class: "min-w-0 flex-1" }, g = { class: "flex flex-wrap items-center gap-2" }, _ = {
+	key: 0,
+	class: "truncate font-heading text-lg leading-tight font-semibold tracking-tight text-heading"
+}, v = {
+	key: 0,
+	class: "mt-0.5 text-xs text-muted"
+}, y = {
+	key: 0,
+	class: "flex shrink-0 flex-wrap items-center gap-2"
+}, b = {
+	key: 1,
+	class: "flex flex-wrap items-center gap-3 border-t border-border px-6 py-3 text-base text-muted"
+}, x = /*@__PURE__*/ i({
 	__name: "AcCard",
 	props: {
 		title: { default: "" },
 		subtitle: { default: "" },
+		icon: { default: void 0 },
 		padded: {
 			type: Boolean,
 			default: !0
 		}
 	},
-	setup(r) {
-		return (m, h) => (a(), t("section", c, [r.title || m.$slots.actions ? (a(), t("header", l, [n("div", u, [n("h5", d, s(r.title), 1), r.subtitle ? (a(), t("p", f, s(r.subtitle), 1)) : e("", !0)]), n("div", p, [o(m.$slots, "actions")])])) : e("", !0), n("div", { class: i(r.padded ? "p-5" : ["overflow-hidden rounded-b-10", !(r.title || m.$slots.actions) && "rounded-t-10"]) }, [o(m.$slots, "default")], 2)]));
+	setup(i) {
+		let x = i, S = u();
+		function C() {
+			return !!(x.title || x.icon || S.actions || S.badges);
+		}
+		return (u, x) => (o(), n("section", d, [
+			C() ? (o(), n("header", f, [r("div", p, [i.icon ? (o(), n("span", m, [(o(), e(c(i.icon), { class: "size-4" }))])) : t("", !0), r("div", h, [r("div", g, [i.title ? (o(), n("h3", _, l(i.title), 1)) : t("", !0), s(u.$slots, "badges")]), i.subtitle ? (o(), n("p", v, l(i.subtitle), 1)) : t("", !0)])]), u.$slots.actions ? (o(), n("div", y, [s(u.$slots, "actions")])) : t("", !0)])) : t("", !0),
+			r("div", { class: a(i.padded ? "p-6" : [
+				"overflow-hidden",
+				!u.$slots.footer && "rounded-b-14",
+				!C() && "rounded-t-14"
+			]) }, [s(u.$slots, "default")], 2),
+			u.$slots.footer ? (o(), n("footer", b, [s(u.$slots, "footer")])) : t("", !0)
+		]));
 	}
 });
 //#endregion
-export { m as default };
+export { x as default };

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

@@ -113,6 +113,8 @@ export interface Props {
     emptyText?: string;
     /** Shows a placeholder bar while the value loads. */
     loading?: boolean;
+    /** Shows a status as a coloured dot and text without the pill, for dense tables (cloud-ui's `plain` status). */
+    plain?: boolean;
 }
 declare const _default: typeof __VLS_export;
 export default _default;
@@ -129,11 +131,12 @@ declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {},
     maxItems: number;
     tooltip: string;
     column: ResourceColumn;
-    relative: boolean;
     emptyText: string;
     cell: ResourceCell;
     resolveLink: (link: string) => string;
     mono: boolean;
     maxWidth: string;
     unit: string;
+    relative: boolean;
+    plain: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;