@ac-design/design-system 2.3.0 → 2.4.0

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

@@ -20,7 +20,7 @@ var b = ["for"], x = {
 	"value",
 	"disabled",
 	"aria-label"
-], E = [
+], ee = [
 	"id",
 	"value",
 	"name",
@@ -29,13 +29,13 @@ var b = ["for"], x = {
 	"required",
 	"aria-invalid",
 	"aria-describedby"
-], D = ["aria-label"], O = [
+], E = ["aria-label"], D = [
 	"disabled",
 	"aria-label",
 	"aria-pressed",
 	"title",
 	"onClick"
-], k = ["id"], A = /*@__PURE__*/ a({
+], O = ["id"], k = /*@__PURE__*/ a({
 	inheritAttrs: !1,
 	__name: "AcColorInput",
 	props: /*@__PURE__*/ o({
@@ -66,58 +66,64 @@ var b = ["for"], x = {
 		modelModifiers: {}
 	}),
 	emits: /*@__PURE__*/ o(["change"], ["update:modelValue"]),
-	setup(a, { expose: o, emit: A }) {
-		let j = a, M = _(a, "modelValue"), N = A, P = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i, F = g(), I = h(), L = t(() => ({
-			class: I.class,
-			style: I.style
-		})), R = t(() => {
-			let { class: e, style: t, ...n } = I;
+	setup(a, { expose: o, emit: k }) {
+		let A = a, j = _(a, "modelValue"), M = k, N = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i, P = g(), F = h(), I = t(() => ({
+			class: F.class,
+			style: F.style
+		})), L = t(() => {
+			let { class: e, style: t, ...n } = F;
 			return n;
-		}), z = d(null), B = d(null), V = d(M.value), H = d(""), U = t(() => J(M.value)), W = t(() => j.disabled || j.readonly), G = t(() => j.errorMsg || H.value), K = t(() => [j.hint && `${F}-hint`, G.value && `${F}-msg`].filter(Boolean).join(" ") || void 0), q = t(() => j.presets.flatMap((e) => {
-			let t = typeof e == "string" ? { value: e } : e, n = J(t.value);
+		}), R = d(null), z = d(null), B = d(j.value), V = d(""), H = {
+			xs: "size-4",
+			xsmall: "size-8",
+			small: "size-10",
+			normal: "size-12",
+			large: "size-20"
+		}, U = t(() => A.size === "small" || A.size === "xs" || A.size === "xsmall"), W = t(() => Y(j.value)), G = t(() => A.disabled || A.readonly), K = t(() => A.errorMsg || V.value), q = t(() => [A.hint && `${P}-hint`, K.value && `${P}-msg`].filter(Boolean).join(" ") || void 0), J = t(() => A.presets.flatMap((e) => {
+			let t = typeof e == "string" ? { value: e } : e, n = Y(t.value);
 			return n ? [{
 				value: n,
 				label: t.label || n
 			}] : [];
 		}));
-		function J(e) {
-			let t = e ? P.exec(e.trim()) : null;
+		function Y(e) {
+			let t = e ? N.exec(e.trim()) : null;
 			if (!t) return null;
 			let n = t[1].toLowerCase();
 			return `#${n.length === 3 ? [...n].map((e) => e + e).join("") : n}`;
 		}
-		function Y(e) {
-			H.value = "", V.value = e, e !== M.value && (M.value = e, N("change", e));
-		}
 		function X(e) {
-			V.value = e.target.value, H.value = "";
-			let t = V.value.trim().replace(/^#?/, "").length === 6 ? J(V.value) : null;
-			t && (M.value = t);
+			V.value = "", B.value = e, e !== j.value && (j.value = e, M("change", e));
+		}
+		function te(e) {
+			B.value = e.target.value, V.value = "";
+			let t = B.value.trim().replace(/^#?/, "").length === 6 ? Y(B.value) : null;
+			t && (j.value = t);
 		}
 		function Z() {
-			let e = V.value.trim();
-			if (!e) return Y("");
-			let t = J(e);
-			t ? Y(t) : H.value = "Enter a hex colour such as #1c7c54 or #fff";
+			let e = B.value.trim();
+			if (!e) return X("");
+			let t = Y(e);
+			t ? X(t) : V.value = "Enter a hex colour such as #1c7c54 or #fff";
 		}
 		function Q(e) {
-			H.value = "";
+			V.value = "";
 			let t = e.target.value.toLowerCase();
-			V.value = t, M.value = t;
+			B.value = t, j.value = t;
 		}
 		function $(e) {
-			N("change", e.target.value.toLowerCase());
+			M("change", e.target.value.toLowerCase());
 		}
-		return v(M, (e) => {
-			J(V.value) !== J(e) && (V.value = e ?? "");
-		}), o({ focus: () => (j.swatchOnly ? B.value : z.value)?.focus() }), (t, o) => (u(), r("div", s(L.value, {
+		return v(j, (e) => {
+			Y(B.value) !== Y(e) && (B.value = e ?? "");
+		}), o({ focus: () => (A.swatchOnly ? z.value : R.value)?.focus() }), (t, o) => (u(), r("div", s(I.value, {
 			class: [a.swatchOnly ? "w-fit" : "w-full", a.disabled && "opacity-50"],
 			"data-ac-ds": "",
 			"data-testid": "ac-color-input"
 		}), [
 			a.label ? (u(), r("label", {
 				key: 0,
-				for: a.swatchOnly ? `${m(F)}-picker` : m(F),
+				for: a.swatchOnly ? `${m(P)}-picker` : m(P),
 				class: "mb-2 flex items-center gap-1 text-base font-medium text-heading"
 			}, [
 				i("span", null, p(a.label), 1),
@@ -126,92 +132,92 @@ var b = ["for"], x = {
 			], 8, b)) : n("", !0),
 			a.hint ? (u(), r("p", {
 				key: 1,
-				id: `${m(F)}-hint`,
+				id: `${m(P)}-hint`,
 				class: "mb-2 text-base text-muted"
 			}, p(a.hint), 9, C)) : n("", !0),
 			a.swatchOnly ? (u(), r("input", s({
 				key: 2,
-				id: `${m(F)}-picker`,
+				id: `${m(P)}-picker`,
 				ref_key: "picker",
-				ref: B
-			}, R.value, {
+				ref: z
+			}, L.value, {
 				type: "color",
-				value: U.value ?? "#000000",
+				value: W.value ?? "#000000",
 				name: a.name,
-				disabled: W.value,
+				disabled: G.value,
 				required: a.required,
-				"aria-label": a.label ? void 0 : R.value["aria-label"] ?? "Colour",
-				"aria-invalid": !!G.value || void 0,
-				"aria-describedby": K.value,
-				class: ["block cursor-pointer rounded-6 border-2 bg-background text-heading transition-all duration-200 focus:border-primary/40 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface disabled:cursor-not-allowed motion-reduce:transition-none", [a.size === "small" ? "size-10" : "size-12", G.value ? "border-danger/50" : "border-border"]],
+				"aria-label": a.label ? void 0 : L.value["aria-label"] ?? "Colour",
+				"aria-invalid": !!K.value || void 0,
+				"aria-describedby": q.value,
+				class: ["block cursor-pointer rounded-6 border-2 bg-background text-heading transition-all duration-200 focus:border-primary/40 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface disabled:cursor-not-allowed motion-reduce:transition-none", [H[a.size] ?? H.normal, K.value ? "border-danger/50" : "border-border"]],
 				"data-testid": "ac-color-input-swatch",
 				onInput: Q,
 				onChange: $
 			}), null, 16, w)) : (u(), r("div", {
 				key: 3,
 				class: c(["relative flex min-w-0 items-center rounded-10 border transition-[border-color,box-shadow,background-color] duration-200", [
-					a.size === "small" ? "h-9" : "h-10.5",
+					U.value ? "h-9" : "h-10.5",
 					a.readonly ? "bg-surface-muted" : "bg-background",
-					G.value ? "border-danger/50 focus-within:border-danger focus-within:shadow-[0_0_0_2px_color-mix(in_srgb,var(--color-danger)_20%,transparent)]" : ["border-border focus-within:focus-ring", !a.disabled && "hover:border-accent-active"]
+					K.value ? "border-danger/50 focus-within:border-danger focus-within:shadow-[0_0_0_2px_color-mix(in_srgb,var(--color-danger)_20%,transparent)]" : ["border-border focus-within:focus-ring", !a.disabled && "hover:border-accent-active"]
 				]])
 			}, [i("span", {
-				class: c(["relative ml-1 shrink-0 overflow-hidden rounded-8 border-2 border-border has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-ring has-[input:focus-visible]:ring-offset-1 has-[input:focus-visible]:ring-offset-surface", [a.size === "small" ? "size-7" : "size-8", !U.value && "bg-surface-sunken"]]),
-				style: l(U.value ? { backgroundColor: U.value } : void 0),
+				class: c(["relative ml-1 shrink-0 overflow-hidden rounded-8 border-2 border-border has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-ring has-[input:focus-visible]:ring-offset-1 has-[input:focus-visible]:ring-offset-surface", [U.value ? "size-7" : "size-8", !W.value && "bg-surface-sunken"]]),
+				style: l(W.value ? { backgroundColor: W.value } : void 0),
 				"data-testid": "ac-color-input-swatch"
 			}, [i("input", {
 				type: "color",
-				value: U.value ?? "#000000",
-				disabled: W.value,
+				value: W.value ?? "#000000",
+				disabled: G.value,
 				"aria-label": a.label ? `${a.label}: open colour picker` : "Open colour picker",
 				class: "absolute inset-0 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed",
 				onInput: Q,
 				onChange: $
 			}, null, 40, T)], 6), i("input", s({
-				id: m(F),
+				id: m(P),
 				ref_key: "input",
-				ref: z
-			}, R.value, {
+				ref: R
+			}, L.value, {
 				type: "text",
 				autocomplete: "off",
 				spellcheck: "false",
 				maxlength: "7",
-				value: V.value,
+				value: B.value,
 				name: a.name,
 				disabled: a.disabled,
 				readonly: a.readonly,
 				required: a.required,
-				"aria-invalid": !!G.value || void 0,
-				"aria-describedby": K.value,
-				class: ["block h-full w-full min-w-0 flex-1 rounded-10 bg-transparent pl-2.5 font-mono text-base font-normal text-heading outline-none placeholder:font-sans placeholder:text-muted/80 disabled:cursor-not-allowed", a.size === "small" ? "pr-3" : "pr-4"],
-				onInput: X,
+				"aria-invalid": !!K.value || void 0,
+				"aria-describedby": q.value,
+				class: ["block h-full w-full min-w-0 flex-1 rounded-10 bg-transparent pl-2.5 font-mono text-base font-normal text-heading outline-none placeholder:font-sans placeholder:text-muted/80 disabled:cursor-not-allowed", U.value ? "pr-3" : "pr-4"],
+				onInput: te,
 				onBlur: Z,
 				onKeydown: y(Z, ["enter"])
-			}), null, 16, E)], 2)),
-			q.value.length ? (u(), r("div", {
+			}), null, 16, ee)], 2)),
+			J.value.length ? (u(), r("div", {
 				key: 4,
 				class: "mt-2.5 flex flex-wrap gap-2",
 				role: "group",
 				"aria-label": a.label ? `${a.label} presets` : "Presets"
-			}, [(u(!0), r(e, null, f(q.value, (e) => (u(), r("button", {
+			}, [(u(!0), r(e, null, f(J.value, (e) => (u(), r("button", {
 				key: e.value,
 				type: "button",
-				class: c(["size-6 shrink-0 rounded-full border border-border transition-[box-shadow,transform] duration-200 hover:scale-110 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none disabled:cursor-not-allowed disabled:hover:scale-100 motion-reduce:transition-none motion-reduce:hover:scale-100", [e.value === U.value && "ring-2 ring-primary ring-offset-2 ring-offset-surface", !W.value && "cursor-pointer"]]),
+				class: c(["size-6 shrink-0 rounded-full border border-border transition-[box-shadow,transform] duration-200 hover:scale-110 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none disabled:cursor-not-allowed disabled:hover:scale-100 motion-reduce:transition-none motion-reduce:hover:scale-100", [e.value === W.value && "ring-2 ring-primary ring-offset-2 ring-offset-surface", !G.value && "cursor-pointer"]]),
 				style: l({ backgroundColor: e.value }),
-				disabled: W.value,
+				disabled: G.value,
 				"aria-label": e.label,
-				"aria-pressed": e.value === U.value,
+				"aria-pressed": e.value === W.value,
 				title: e.label,
 				"data-testid": "ac-color-input-preset",
-				onClick: (t) => Y(e.value)
-			}, null, 14, O))), 128))], 8, D)) : n("", !0),
-			G.value ? (u(), r("p", {
+				onClick: (t) => X(e.value)
+			}, null, 14, D))), 128))], 8, E)) : n("", !0),
+			K.value ? (u(), r("p", {
 				key: 5,
-				id: `${m(F)}-msg`,
+				id: `${m(P)}-msg`,
 				class: "mt-1 text-base text-danger-strong",
 				role: "alert"
-			}, p(G.value), 9, k)) : n("", !0)
+			}, p(K.value), 9, O)) : n("", !0)
 		], 16));
 	}
 });
 //#endregion
-export { A as default };
+export { k as default };

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

@@ -77,8 +77,8 @@ type __VLS_Slots = {
 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;
-    loading: boolean;
     top: string;
+    loading: boolean;
     items: CostSummaryItem[];
     subtitle: string;
     emptyText: string;

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

@@ -1,3 +1,4 @@
+import type { HTMLAttributes } from "vue";
 export interface DatePickerPreset {
     /** Button text, e.g. "Last 7 days". */
     label: string;
@@ -41,8 +42,8 @@ export interface Props {
     errorMsg?: string;
     /** Help text between the label and the field. */
     hint?: string;
-    /** `small` 36px or `normal` 42px tall, the same as `AcInput`. */
-    size?: "small" | "normal";
+    /** `small` 36px or `normal` 42px tall, the same as `AcInput`; `large` is cloud-ui's 50px date field with 16px medium text. */
+    size?: "small" | "normal" | "large";
     /** Adds a hidden input with this name so plain form posts include the value. A range posts as `start/end`. */
     name?: string;
     /** Draws the calendar in place, with no field, popover or border. In `date` mode each click updates `v-model` at once, and there's no Today button. */
@@ -53,6 +54,10 @@ export interface Props {
     hourCycle?: 12 | 24;
     /** Shows the time-zone name in the field text and under the Time tab, e.g. `GMT+6`. */
     showTimeZone?: boolean;
+    /** Shape of `v-model` in `date` and `datetime` mode: `string` as described there, `date` a `Date`, or `local` a `YYYY-MM-DDTHH:mm` string as `<input type="datetime-local">` keeps. With `date` and `local`, `date` mode keeps the time of day. Not for `range`. */
+    valueType?: "string" | "date" | "local";
+    /** Classes for the field box under the label, e.g. `max-w-md` to keep it narrower than the hint. */
+    fieldClass?: HTMLAttributes["class"];
 }
 type __VLS_Props = Props;
 type __VLS_Slots = {
@@ -63,7 +68,7 @@ type __VLS_Slots = {
 };
 type __VLS_ModelProps = {
     /** `date`: `"2026-09-30"`. `datetime`: `"2026-09-30T14:05:00Z"` (UTC). `duration`: `"26h30m"`. With `range`: `[start, end]`. `null` when empty. */
-    modelValue?: string | [string, string] | null;
+    modelValue?: string | Date | [string, string] | null;
     /** Whether the popover is open. */
     "open"?: boolean;
 };
@@ -72,10 +77,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     /** Moves focus to the field, or to the calendar's current day when `inline`. */
     focus: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string | [string, string] | null) => any;
+    "update:modelValue": (value: string | Date | [string, string] | null) => any;
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | [string, string] | null) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | Date | [string, string] | null) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     required: boolean;
@@ -83,13 +88,13 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     disabled: boolean;
     name: string;
     mode: "date" | "datetime" | "duration";
-    size: "small" | "normal";
+    size: "small" | "normal" | "large";
     hint: string;
     inline: boolean;
     placeholder: string;
+    errorMsg: string;
     range: boolean;
     clearable: boolean;
-    errorMsg: string;
     presets: DatePickerPreset[];
     locale: string;
     minDate: string;
@@ -101,6 +106,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     autoApply: boolean;
     hourCycle: 12 | 24;
     showTimeZone: boolean;
+    valueType: "string" | "date" | "local";
+    fieldClass: string | false | Record<string, any> | import("vue").ClassValue[] | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;