@ac-design/design-system 2.2.0 → 2.3.0

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>>;
 };