@ac-design/design-system 2.2.1 → 2.3.0

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

@@ -19,6 +19,8 @@ type __VLS_Slots = {
     default?: () => unknown;
     /** A search field, placed by `search-position`. Hidden below 640px. */
     search?: () => unknown;
+    /** Left-hand content that fills the row up to `actions` and shrinks first when space runs out, e.g. cloud-ui's search field with its phone-only search button. Use it instead of a centred `search`. */
+    start?: () => unknown;
     /** Right side: icon actions, notifications, theme and `AcUserMenu` last. */
     actions?: () => unknown;
 };

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

@@ -1,22 +1,28 @@
-import { createCommentVNode as e, createElementBlock as t, createElementVNode as n, createVNode as r, defineComponent as i, normalizeClass as a, openBlock as o, renderSlot as s, toDisplayString as c, unref as l } from "vue";
-import { Menu as u } from "@lucide/vue";
+import { createCommentVNode as e, createElementBlock as t, createVNode as n, defineComponent as r, normalizeClass as i, openBlock as a, renderSlot as o, toDisplayString as s, unref as c } from "vue";
+import { Menu as l } from "@lucide/vue";
 //#region src/lib/components/AcNavbar.vue?vue&type=script&setup=true&lang.ts
-var d = ["aria-label"], f = {
+var u = ["aria-label"], d = {
 	key: 1,
 	class: "flex shrink-0 items-center gap-2"
-}, p = {
+}, f = {
 	key: 0,
 	class: "inline-flex items-center rounded-6 border border-primary/25 bg-primary/10 px-1.5 py-0.5 text-sm font-semibold tracking-wide text-primary-strong uppercase"
-}, m = ["aria-label"], h = {
+}, p = ["aria-label"], m = {
 	key: 3,
 	class: "hidden min-w-0 shrink sm:block sm:w-48 md:w-60 lg:w-80 xl:w-96"
-}, g = { class: "flex min-w-0 flex-1 justify-center" }, _ = {
+}, h = {
+	key: 4,
+	class: "flex min-w-0 flex-1 items-center"
+}, g = {
+	key: 5,
+	class: "flex min-w-0 flex-1 justify-center"
+}, _ = {
 	key: 0,
 	class: "hidden w-full max-w-md sm:block"
 }, v = {
-	key: 4,
+	key: 6,
 	class: "flex shrink-0 items-center gap-0.5 sm:gap-3"
-}, y = /*@__PURE__*/ i({
+}, y = /*@__PURE__*/ r({
 	__name: "AcNavbar",
 	props: {
 		menuButton: { default: "mobile" },
@@ -30,37 +36,37 @@ var d = ["aria-label"], f = {
 		searchPosition: { default: "start" }
 	},
 	emits: ["menu"],
-	setup(i, { emit: y }) {
+	setup(r, { emit: y }) {
 		let b = y;
-		return (y, x) => (o(), t("header", {
-			class: a(["top-0 z-30 flex h-18 shrink-0 items-center gap-2 border-b border-border/80 bg-surface/90 px-4 backdrop-blur-sm sm:gap-4 sm:px-6", i.sticky && "sticky"]),
+		return (y, x) => (a(), t("header", {
+			class: i(["top-0 z-30 flex h-18 shrink-0 items-center gap-2 border-b border-border/80 bg-surface/90 px-4 backdrop-blur-sm sm:gap-4 sm:px-6", r.sticky && "sticky"]),
 			"data-ac-ds": "",
 			"data-testid": "ac-navbar"
 		}, [
-			i.menuButton === "never" ? e("", !0) : (o(), t("button", {
+			r.menuButton === "never" ? e("", !0) : (a(), t("button", {
 				key: 0,
 				type: "button",
-				class: a(["inline-flex size-9.5 shrink-0 cursor-pointer items-center justify-center rounded-10 border border-transparent text-muted transition-colors duration-200 hover:border-border hover:bg-surface-sunken/50 hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none", {
-					"md:hidden": i.menuButton === "mobile",
-					"lg:hidden": i.menuButton === "tablet"
+				class: i(["inline-flex size-9.5 shrink-0 cursor-pointer items-center justify-center rounded-10 border border-transparent text-muted transition-colors duration-200 hover:border-border hover:bg-surface-sunken/50 hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none", {
+					"md:hidden": r.menuButton === "mobile",
+					"lg:hidden": r.menuButton === "tablet"
 				}]),
-				"aria-label": i.menuLabel,
+				"aria-label": r.menuLabel,
 				"data-ac-ds": "",
 				"data-testid": "ac-navbar-menu",
 				onClick: x[0] ||= (e) => b("menu")
-			}, [r(l(u), {
+			}, [n(c(l), {
 				class: "size-5",
 				"aria-hidden": "true"
-			})], 10, d)),
-			y.$slots.brand || i.productName ? (o(), t("div", f, [s(y.$slots, "brand"), i.productName ? (o(), t("span", p, c(i.productName), 1)) : e("", !0)])) : e("", !0),
-			y.$slots.default ? (o(), t("nav", {
+			})], 10, u)),
+			y.$slots.brand || r.productName ? (a(), t("div", d, [o(y.$slots, "brand"), r.productName ? (a(), t("span", f, s(r.productName), 1)) : e("", !0)])) : e("", !0),
+			y.$slots.default ? (a(), t("nav", {
 				key: 2,
-				"aria-label": i.label,
+				"aria-label": r.label,
 				class: "hidden items-center gap-1 md:flex"
-			}, [s(y.$slots, "default")], 8, m)) : e("", !0),
-			y.$slots.search && i.searchPosition === "start" ? (o(), t("div", h, [s(y.$slots, "search")])) : e("", !0),
-			n("div", g, [y.$slots.search && i.searchPosition === "center" ? (o(), t("div", _, [s(y.$slots, "search")])) : e("", !0)]),
-			y.$slots.actions ? (o(), t("div", v, [s(y.$slots, "actions")])) : e("", !0)
+			}, [o(y.$slots, "default")], 8, p)) : e("", !0),
+			y.$slots.search && r.searchPosition === "start" ? (a(), t("div", m, [o(y.$slots, "search")])) : e("", !0),
+			y.$slots.start ? (a(), t("div", h, [o(y.$slots, "start")])) : (a(), t("div", g, [y.$slots.search && r.searchPosition === "center" ? (a(), t("div", _, [o(y.$slots, "search")])) : e("", !0)])),
+			y.$slots.actions ? (a(), t("div", v, [o(y.$slots, "actions")])) : e("", !0)
 		], 2));
 	}
 });

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

@@ -59,9 +59,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     min: number;
     name: string;
     size: "small" | "normal";
+    hint: string;
     step: number;
     readonly: boolean;
-    hint: string;
     errorMsg: string;
     unit: string;
     precision: number;

package/dist/lib/components/AcRadioCard.js

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

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

@@ -0,0 +1,55 @@
+export interface Props<V> {
+    /** Native radio `name`, used as given. Cards with the same `name` form one group: arrow keys move between them. Old cloud-ui `group`. */
+    name: string;
+    /** The value this card writes to `v-model` when it's selected. */
+    value: V;
+    /** Bold line at the top of the card. */
+    title?: string;
+    /** Muted text under the title. */
+    description?: string;
+    /** Greys the card out and stops it from being selected. */
+    disabled?: boolean;
+    /** Shows an 18px radio before the content instead of the check badge in the corner. Old cloud-ui `is-radio-show`. */
+    showRadio?: boolean;
+    /** Classes for the title, replacing `text-base font-semibold text-heading`, e.g. `text-lg font-semibold text-heading`. */
+    titleClass?: string;
+    /** Classes for the description, replacing `mt-0.5 text-xs leading-relaxed text-muted`. */
+    descriptionClass?: string;
+}
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(Props<T> & {
+        modelValue?: T;
+    }) & {
+        "onUpdate:modelValue"?: ((value: T | undefined) => any) | undefined;
+        onChange?: ((value: T) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        /** Moves focus to the radio. */
+        focus: () => void | undefined;
+    }>) => void;
+    attrs: any;
+    slots: {
+        /** Replaces the whole card body (icon, title, description, features and right content). The radio and selection styles stay. Old cloud-ui `is-custom` with `#custom`. */
+        default?: () => unknown;
+        /** Icon or logo tile before the title. */
+        icon?: () => unknown;
+        /** Content after the title on the same line, e.g. a "Recommended" pill. Old cloud-ui `#subTitle`. */
+        subtitle?: () => unknown;
+        /** Pills under the description, e.g. "HA" or "PITR". */
+        features?: () => unknown;
+        /** Content on the right of the card, e.g. a price. Below 768px it moves under the text. Hides the check badge, so pair it with `show-radio`. Old cloud-ui `#rightContent`. */
+        right?: () => unknown;
+    };
+    emit: ((evt: "change", value: T) => void) & ((event: "update:modelValue", value: T | undefined) => void);
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

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

@@ -0,0 +1,135 @@
+import { Comment as e, Transition as t, computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, mergeModels as c, mergeProps as l, normalizeClass as u, openBlock as d, ref as f, renderSlot as p, toDisplayString as m, unref as h, useAttrs as g, useId as _, useModel as v, useSlots as y, withCtx as b } from "vue";
+import { Check as x } from "@lucide/vue";
+//#region src/lib/components/AcRadioCard.vue?vue&type=script&setup=true&lang.ts
+var S = ["aria-disabled"], C = [
+	"name",
+	"value",
+	"checked",
+	"disabled",
+	"aria-labelledby",
+	"aria-describedby"
+], w = {
+	key: 1,
+	class: "flex min-w-0 flex-1 items-start gap-3"
+}, T = {
+	key: 0,
+	class: "flex shrink-0 items-center"
+}, E = { class: "flex min-w-0 flex-1 flex-col gap-2 md:flex-row md:items-start md:justify-between md:gap-4" }, D = { class: "block min-w-0" }, O = ["id"], k = ["id"], A = ["id"], j = ["id"], M = {
+	key: 0,
+	class: "absolute top-2 right-2 flex size-4 items-center justify-center rounded-full bg-primary text-white shadow-sm",
+	"aria-hidden": "true"
+}, N = /*@__PURE__*/ s({
+	inheritAttrs: !1,
+	__name: "AcRadioCard",
+	props: /*@__PURE__*/ c({
+		name: {},
+		value: {},
+		title: { default: "" },
+		description: { default: "" },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		showRadio: {
+			type: Boolean,
+			default: !1
+		},
+		titleClass: { default: "text-base font-semibold text-heading" },
+		descriptionClass: { default: "mt-0.5 text-xs leading-relaxed text-muted" }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ c(["change"], ["update:modelValue"]),
+	setup(s, { expose: c, emit: N }) {
+		let P = s, F = v(s, "modelValue"), I = N, L = _(), R = g(), z = y(), B = f(null), V = n(() => ({
+			class: R.class,
+			style: R.style
+		})), H = n(() => {
+			let { class: e, style: t, ...n } = R;
+			return n;
+		}), U = n(() => F.value === P.value);
+		function W() {
+			return !!z.default?.().some((t) => t.type !== e);
+		}
+		function G() {
+			return !W() && (!!P.title || !!z.subtitle);
+		}
+		function K() {
+			if (!W()) return [
+				P.description && `${L}-desc`,
+				z.features && `${L}-features`,
+				z.right && `${L}-right`
+			].filter(Boolean).join(" ") || void 0;
+		}
+		function q() {
+			P.disabled || (F.value = P.value, I("change", P.value));
+		}
+		return c({ focus: () => B.value?.focus() }), (e, n) => (d(), i("label", l(V.value, {
+			class: ["group relative flex items-start gap-3 rounded-14 border p-3 transition-[border-color,background-color,box-shadow] duration-200 ease-out has-[>span>input[type=radio]:focus-visible]:ring-2 has-[>span>input[type=radio]:focus-visible]:ring-ring has-[>span>input[type=radio]:focus-visible]:ring-offset-2 has-[>span>input[type=radio]:focus-visible]:ring-offset-background motion-reduce:transition-none", [
+				s.disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer",
+				U.value ? "border-primary bg-primary/5 shadow-[inset_0_0_0_1px_var(--color-primary)]" : "border-border bg-surface",
+				!U.value && !s.disabled && "hover:border-primary/40 hover:bg-accent-hover"
+			]],
+			"aria-disabled": s.disabled || void 0,
+			"data-ac-ds": "",
+			"data-testid": "ac-radio-card"
+		}), [
+			a("span", { class: u(s.showRadio ? "relative mt-0.5 inline-flex size-[18px] shrink-0" : "sr-only") }, [a("input", l({
+				ref_key: "input",
+				ref: B,
+				type: "radio",
+				name: s.name,
+				value: s.value,
+				checked: U.value,
+				disabled: s.disabled,
+				"aria-labelledby": G() ? `${h(L)}-title` : void 0,
+				"aria-describedby": K()
+			}, H.value, {
+				class: ["peer size-[18px] appearance-none rounded-full border transition-colors duration-200 focus-visible:outline-none disabled:cursor-not-allowed motion-reduce:transition-none", [U.value ? "border-primary bg-primary" : "border-muted/70 bg-background group-hover:border-primary/60", s.disabled ? "cursor-not-allowed" : "cursor-pointer"]],
+				onChange: q
+			}), null, 16, C), a("span", {
+				class: u(["pointer-events-none absolute inset-0 m-auto size-1.5 rounded-full bg-white transition-transform duration-200 motion-reduce:transition-none", U.value ? "scale-100" : "scale-0"]),
+				"aria-hidden": "true"
+			}, null, 2)], 2),
+			W() ? p(e.$slots, "default", {}, void 0, void 0, 0) : (d(), i("span", w, [e.$slots.icon ? (d(), i("span", T, [p(e.$slots, "icon")])) : r("", !0), a("span", E, [a("span", D, [
+				G() ? (d(), i("span", {
+					key: 0,
+					id: `${h(L)}-title`,
+					class: "flex flex-wrap items-center gap-x-2 gap-y-1"
+				}, [s.title ? (d(), i("span", {
+					key: 0,
+					class: u(["block font-heading tracking-[-0.012em] text-balance", s.titleClass])
+				}, m(s.title), 3)) : r("", !0), p(e.$slots, "subtitle")], 8, O)) : r("", !0),
+				s.description ? (d(), i("span", {
+					key: 1,
+					id: `${h(L)}-desc`,
+					class: u(["block text-pretty", s.descriptionClass])
+				}, m(s.description), 11, k)) : r("", !0),
+				e.$slots.features ? (d(), i("span", {
+					key: 2,
+					id: `${h(L)}-features`,
+					class: "mt-2.5 flex flex-wrap gap-1.5"
+				}, [p(e.$slots, "features")], 8, A)) : r("", !0)
+			]), e.$slots.right ? (d(), i("span", {
+				key: 0,
+				id: `${h(L)}-right`,
+				class: "block shrink-0"
+			}, [p(e.$slots, "right")], 8, j)) : r("", !0)])])),
+			o(t, {
+				"enter-active-class": "transition duration-150 ease-out motion-reduce:transition-none",
+				"enter-from-class": "scale-50 opacity-0",
+				"leave-active-class": "transition duration-100 ease-in motion-reduce:transition-none",
+				"leave-to-class": "scale-50 opacity-0"
+			}, {
+				default: b(() => [U.value && !s.showRadio && !e.$slots.right ? (d(), i("span", M, [o(h(x), {
+					class: "size-2.5",
+					"stroke-width": 3.5
+				})])) : r("", !0)]),
+				_: 1
+			})
+		], 16, S));
+	}
+});
+//#endregion
+export { N as default };

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

@@ -22,6 +22,8 @@ export interface Props<T> {
     loading?: boolean;
     /** Shows a refresh button that emits `refresh`. */
     refreshable?: boolean;
+    /** With `refreshable`, spins the refresh icon while options reload. Unlike `loading`, the field stays usable. */
+    refreshing?: boolean;
     /** Disables the field. */
     disabled?: boolean;
     /** Marks the field required and adds a red asterisk. */
@@ -34,14 +36,19 @@ export interface Props<T> {
     size?: "compact" | "small" | "normal";
     /** Text shown when no option matches the search. */
     noResultText?: string;
+    /** Side of the field the list opens on: `bottom` or `top`. It flips to the other side when there isn't room. */
+    placement?: "bottom" | "top";
 }
 declare const __VLS_export: <V>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<(Props<V> & {
         modelValue?: V | V[] | null;
+        /** Whether the list is open. Bind `v-model:open` to react when it opens or closes, e.g. to check a required field. */
+        open?: boolean;
     }) & {
         onSearch?: ((query: string) => any) | undefined;
         onSelect?: ((option: SelectOption<V>) => any) | undefined;
         "onUpdate:modelValue"?: ((value: V | V[] | null) => any) | undefined;
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
         onCreate?: ((text: string) => any) | undefined;
         onRemove?: ((option: SelectOption<V>) => any) | undefined;
         onRefresh?: (() => any) | undefined;
@@ -60,12 +67,16 @@ declare const __VLS_export: <V>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
             selected: boolean;
             active: boolean;
         }) => unknown;
+        /** Content of the closed field for the chosen option in single select, e.g. an icon and a second line. Receives the option; defaults to its label. */
+        selected?: (props: {
+            option: SelectOption<V>;
+        }) => unknown;
         /** Content shown when the list is empty or nothing matches. */
         empty?: (props: {
             query: string;
         }) => unknown;
     };
-    emit: (((evt: "search", query: string) => void) & ((evt: "select", option: SelectOption<V>) => void) & ((evt: "create", text: string) => void) & ((evt: "remove", option: SelectOption<V>) => void) & ((evt: "refresh") => void)) & ((event: "update:modelValue", value: V | V[] | null) => void);
+    emit: (((evt: "search", query: string) => void) & ((evt: "select", option: SelectOption<V>) => void) & ((evt: "create", text: string) => void) & ((evt: "remove", option: SelectOption<V>) => void) & ((evt: "refresh") => void)) & (((event: "update:modelValue", value: V | V[] | null) => void) & ((event: "update:open", value: boolean) => void));
 }>) => import("vue").VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };