@ac-design/design-system 2.3.0 → 2.4.1

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

@@ -4,6 +4,8 @@ export interface Props {
     label?: string;
     /** Native `name` attribute. */
     name?: string;
+    /** Example value shown inside the empty field. */
+    placeholder?: string;
     /** Visible height in lines. Unset, the field is 160px tall (about 6 lines). With `autoResize` it's the starting (minimum) height. */
     rows?: number;
     /** Grows the field with its content instead of showing a scrollbar. */
@@ -22,14 +24,28 @@ export interface Props {
     disabled?: boolean;
     /** Read-only field: a muted fill, and "(read only)" after the label. */
     readonly?: boolean;
+    /** Text after the label of a read-only field, e.g. "(Read Only)". */
+    readonlyText?: string;
+    /** Cloud-ui v1 error look: no field fill while it shows an error, and the message in the base `text-danger` red instead of the AA `-strong` shade. */
+    plainError?: boolean;
+    /** No gap around `#label-icon` and `#label-extra`, for slot content that brings its own margin. */
+    flushLabelSlots?: boolean;
     /** Error text under the field. Turns the border and label red and sets `aria-invalid`. */
     errorMsg?: string;
     /** Turns the border red and sets `aria-invalid` without a message, for forms that print their own. */
     invalid?: boolean;
     /** Help text between the label and the field. */
     hint?: string;
-    /** Inner spacing: `xsmall` 12px × 6px, `small` 16px × 8px or `normal` 20px × 10px. Set the height with `rows` or `input-class`. */
-    size?: "xsmall" | "small" | "normal";
+    /** Error shown under the field when the viewer clears it or leaves it empty, e.g. "Please enter a description". `error-msg` shows when this one doesn't. */
+    requiredMessage?: string;
+    /** With `required-message`, an empty field emits no `input` or `focusout`, as cloud-ui's v1 AcInput did. */
+    silentWhenEmpty?: boolean;
+    /** Inner spacing: `xs` 8px × 4px with 12px text, `xsmall` 12px × 6px, `small` 16px × 8px, `medium` 16px × 8px, `normal` 20px × 10px or `large` 24px × 12px with 16px text. Without `rows` or a height in `input-class`, `xs` is 60px tall, `medium` 120px, `large` 240px and the rest at least 160px. */
+    size?: "xs" | "xsmall" | "small" | "medium" | "normal" | "large";
+    /** Field look: `outline` (border on the page fill), `soft` (grey fill, no border), `ghost` (no fill or border until focus) or `none` (bare text, no border or focus style). */
+    variant?: "outline" | "soft" | "ghost" | "none";
+    /** Draws a 2px primary halo around the field to point the viewer at it. */
+    highlight?: boolean;
     /** Classes for the `<textarea>` element itself, e.g. `h-30` for a fixed 120px height; they replace the 160px default height. `class` goes on the wrapper. */
     inputClass?: HTMLAttributes["class"];
 }
@@ -48,23 +64,41 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     /** Moves focus to the textarea. */
     focus: () => void | undefined;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    input: (event: Event) => any;
     "update:modelValue": (value: string) => any;
+    blur: (event: FocusEvent) => any;
+    change: (event: Event) => any;
+    focus: (event: FocusEvent) => any;
+    focusout: (event: FocusEvent) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onInput?: ((event: Event) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onBlur?: ((event: FocusEvent) => any) | undefined;
+    onChange?: ((event: Event) => any) | undefined;
+    onFocus?: ((event: FocusEvent) => any) | undefined;
+    onFocusout?: ((event: FocusEvent) => any) | undefined;
 }>, {
+    variant: "outline" | "soft" | "ghost" | "none";
     required: boolean;
     label: string;
     disabled: boolean;
     name: string;
-    size: "xsmall" | "small" | "normal";
-    hint: string;
+    size: "xs" | "xsmall" | "small" | "medium" | "normal" | "large";
     invalid: boolean;
+    hint: string;
     rows: number;
     readonly: boolean;
+    placeholder: string;
     errorMsg: string;
+    highlight: boolean;
     mono: boolean;
     maxlength: number;
     requiredMark: boolean;
+    requiredMessage: string;
+    silentWhenEmpty: boolean;
+    readonlyText: string;
+    plainError: boolean;
+    flushLabelSlots: boolean;
     inputClass: string | false | Record<string, any> | import("vue").ClassValue[] | null;
     autoResize: boolean;
     maxRows: number;

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

@@ -1,15 +1,9 @@
 import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, createTextVNode as i, defineComponent as a, mergeModels as o, mergeProps as s, nextTick as c, normalizeClass as l, onMounted 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, vModelText as b, watch as x, withDirectives as S } from "vue";
 //#region src/lib/components/AcTextarea.vue?vue&type=script&setup=true&lang.ts
-var C = ["for"], w = { key: 0 }, T = {
-	key: 1,
-	class: "text-muted"
-}, E = {
-	key: 2,
-	class: "text-danger",
-	"aria-hidden": "true"
-}, D = ["id"], O = [
+var ee = ["for"], C = { key: 0 }, w = ["id"], T = [
 	"id",
 	"name",
+	"placeholder",
 	"rows",
 	"maxlength",
 	"disabled",
@@ -18,18 +12,19 @@ var C = ["for"], w = { key: 0 }, T = {
 	"aria-label",
 	"aria-invalid",
 	"aria-describedby"
-], k = {
+], E = {
 	key: 2,
 	class: "mt-1 flex items-start gap-3"
-}, A = ["id"], j = {
+}, te = ["id"], ne = {
 	key: 1,
 	class: "flex-1"
-}, M = ["id"], N = /*@__PURE__*/ a({
+}, D = ["id"], O = "focus:shadow-[0_0_0_2px_color-mix(in_srgb,var(--color-danger)_20%,transparent)]", k = "focus:shadow-[0_0_0_2px_color-mix(in_srgb,var(--color-primary)_20%,transparent)]", A = /*@__PURE__*/ a({
 	inheritAttrs: !1,
 	__name: "AcTextarea",
 	props: /*@__PURE__*/ o({
 		label: { default: "" },
 		name: { default: "" },
+		placeholder: { default: void 0 },
 		rows: { default: void 0 },
 		autoResize: {
 			type: Boolean,
@@ -57,13 +52,32 @@ var C = ["for"], w = { key: 0 }, T = {
 			type: Boolean,
 			default: !1
 		},
+		readonlyText: { default: "(read only)" },
+		plainError: {
+			type: Boolean,
+			default: !1
+		},
+		flushLabelSlots: {
+			type: Boolean,
+			default: !1
+		},
 		errorMsg: { default: "" },
 		invalid: {
 			type: Boolean,
 			default: !1
 		},
 		hint: { default: "" },
+		requiredMessage: { default: "" },
+		silentWhenEmpty: {
+			type: Boolean,
+			default: !1
+		},
 		size: { default: "normal" },
+		variant: { default: "outline" },
+		highlight: {
+			type: Boolean,
+			default: !1
+		},
 		inputClass: {
 			type: [
 				Boolean,
@@ -78,39 +92,71 @@ var C = ["for"], w = { key: 0 }, T = {
 		modelValue: { default: "" },
 		modelModifiers: {}
 	}),
-	emits: ["update:modelValue"],
-	setup(a, { expose: o }) {
-		let N = a, P = v(a, "modelValue"), F = {
-			xsmall: "px-3 py-1.5",
-			small: "px-4 py-2",
-			normal: "px-5 py-2.5"
+	emits: /*@__PURE__*/ o([
+		"focus",
+		"blur",
+		"focusout",
+		"input",
+		"change"
+	], ["update:modelValue"]),
+	setup(a, { expose: o, emit: A }) {
+		let j = a, M = v(a, "modelValue"), N = A, P = {
+			xs: "px-2 py-1 text-xs",
+			xsmall: "px-3 py-1.5 text-base",
+			small: "px-4 py-2 text-base",
+			medium: "px-4 py-2 text-base",
+			normal: "px-5 py-2.5 text-base",
+			large: "px-6 py-3 text-lg"
+		}, F = {
+			xs: "h-15",
+			xsmall: "min-h-40",
+			small: "min-h-40",
+			medium: "h-30",
+			normal: "min-h-40",
+			large: "h-60"
 		}, I = _(), L = g(), R = y(), z = e(() => ({
 			class: L.class,
 			style: L.style
 		})), B = e(() => {
 			let { class: e, style: t, ...n } = L;
 			return n;
-		}), V = f(null), H = f(!1), U = e(() => !!N.label || !!R["label-icon"] || !!R["label-extra"]), W = e(() => U.value ? void 0 : L["aria-label"] ?? L.placeholder), G = e(() => !!N.errorMsg || N.invalid), K = e(() => N.rows ?? 4), q = e(() => (P.value ?? "").length), J = e(() => N.maxlength !== void 0 && q.value >= N.maxlength), Y = e(() => [
+		}), V = f(null), H = f(!1), U = e(() => !!j.label || !!R["label-icon"] || !!R["label-extra"]), W = e(() => U.value ? void 0 : L["aria-label"] ?? j.placeholder), G = f(""), K = e(() => G.value || j.errorMsg), q = e(() => !!K.value || j.invalid), J = e(() => j.size in P ? j.size : "normal"), Y = e(() => {
+			let e = !j.disabled;
+			return j.variant === "soft" ? q.value ? `border-transparent bg-danger/5 focus:bg-danger/10 ${O}` : [
+				"border-transparent bg-accent focus:bg-accent-hover",
+				k,
+				e && "hover:bg-accent-hover"
+			] : j.variant === "ghost" ? q.value ? `border-transparent bg-transparent focus:bg-danger/5 ${O}` : `border-transparent bg-transparent focus:bg-accent-hover ${k}` : j.variant === "none" ? ["border-transparent bg-transparent", q.value && "text-danger-strong"] : [q.value && j.plainError ? "bg-transparent" : j.readonly ? "bg-surface-muted" : "bg-background", q.value ? `border-danger/50 focus:border-danger ${O}` : ["border-border focus:focus-ring", e && "hover:border-accent-active"]];
+		}), X = e(() => j.rows ?? 4), Z = e(() => (M.value ?? "").length), re = e(() => j.maxlength !== void 0 && Z.value >= j.maxlength), ie = e(() => [
 			L["aria-describedby"],
-			N.hint && `${I}-hint`,
-			N.errorMsg && `${I}-msg`,
-			N.maxlength !== void 0 && `${I}-count`
+			j.hint && `${I}-hint`,
+			K.value && `${I}-msg`,
+			j.maxlength !== void 0 && `${I}-count`
 		].filter(Boolean).join(" ") || void 0);
-		function X() {
+		function Q(e) {
+			j.requiredMessage && (G.value = e.target.value === "" ? j.requiredMessage : "");
+		}
+		function ae(e) {
+			Q(e), j.silentWhenEmpty && G.value || N("input", e);
+		}
+		function oe(e) {
+			Q(e), j.silentWhenEmpty && G.value || N("focusout", e);
+		}
+		function $() {
 			let e = V.value;
-			if (!e || !N.autoResize) return;
-			let t = getComputedStyle(e), n = parseFloat(t.lineHeight) || 20, r = parseFloat(t.paddingTop) + parseFloat(t.paddingBottom) + parseFloat(t.borderTopWidth) + parseFloat(t.borderBottomWidth), i = K.value * n + r, a = N.maxRows > 0 ? N.maxRows * n + r : Infinity;
+			if (!e || !j.autoResize) return;
+			let t = getComputedStyle(e), n = parseFloat(t.lineHeight) || 20, r = parseFloat(t.paddingTop) + parseFloat(t.paddingBottom) + parseFloat(t.borderTopWidth) + parseFloat(t.borderBottomWidth), i = X.value * n + r, a = j.maxRows > 0 ? j.maxRows * n + r : Infinity;
 			e.style.height = "auto";
 			let o = e.scrollHeight + parseFloat(t.borderTopWidth) + parseFloat(t.borderBottomWidth);
 			e.style.height = `${Math.min(Math.max(o, i), a)}px`, H.value = o > a;
 		}
-		return x(P, () => c(X)), x(() => [
-			N.autoResize,
-			N.rows,
-			N.maxRows
+		return x(M, () => c($)), x(() => [
+			j.autoResize,
+			j.rows,
+			j.maxRows
 		], () => {
-			!N.autoResize && V.value && (V.value.style.height = ""), c(X);
-		}), u(X), o({ focus: () => V.value?.focus() }), (e, o) => (d(), n("div", s(z.value, {
+			!j.autoResize && V.value && (V.value.style.height = ""), c($);
+		}), u($), o({ focus: () => V.value?.focus() }), (e, o) => (d(), n("div", s(z.value, {
 			class: ["w-full", a.disabled && "opacity-50"],
 			"data-ac-ds": "",
 			"data-testid": "ac-textarea"
@@ -118,56 +164,70 @@ var C = ["for"], w = { key: 0 }, T = {
 			U.value ? (d(), n("label", {
 				key: 0,
 				for: h(I),
-				class: "mb-2 flex items-center gap-1 text-base font-medium text-heading"
+				class: l(["mb-2 flex items-center text-base font-medium text-heading", !a.flushLabelSlots && "gap-1"])
 			}, [
 				p(e.$slots, "label-icon"),
-				a.label ? (d(), n("span", w, m(a.label), 1)) : t("", !0),
-				a.readonly ? (d(), n("span", T, "(read only)")) : t("", !0),
+				a.label ? (d(), n("span", C, m(a.label), 1)) : t("", !0),
+				a.readonly ? (d(), n("span", {
+					key: 1,
+					class: l(["text-muted", a.flushLabelSlots && "ml-1"])
+				}, m(a.readonlyText), 3)) : t("", !0),
 				p(e.$slots, "label-extra"),
-				a.required || a.requiredMark ? (d(), n("span", E, "*")) : t("", !0)
-			], 8, C)) : t("", !0),
+				a.required || a.requiredMark ? (d(), n("span", {
+					key: 2,
+					class: l(["text-danger", a.flushLabelSlots && "ml-1"]),
+					"aria-hidden": "true"
+				}, "*", 2)) : t("", !0)
+			], 10, ee)) : t("", !0),
 			a.hint ? (d(), n("p", {
 				key: 1,
 				id: `${h(I)}-hint`,
 				class: "mb-2 text-base text-muted"
-			}, m(a.hint), 9, D)) : t("", !0),
+			}, m(a.hint), 9, w)) : t("", !0),
 			S(r("textarea", s({
 				id: h(I),
 				ref_key: "field",
 				ref: V
 			}, B.value, {
-				"onUpdate:modelValue": o[0] ||= (e) => P.value = e,
+				"onUpdate:modelValue": o[0] ||= (e) => M.value = e,
 				name: a.name,
-				rows: K.value,
+				placeholder: a.placeholder,
+				rows: X.value,
 				maxlength: a.maxlength,
 				disabled: a.disabled,
 				readonly: a.readonly,
 				required: a.required,
 				"aria-label": W.value,
-				"aria-invalid": G.value || void 0,
-				"aria-describedby": Y.value,
-				class: ["block w-full rounded-10 border text-base text-heading transition-[color,background-color,border-color,box-shadow] duration-200 outline-none placeholder:text-muted/80 disabled:cursor-not-allowed", [
-					F[a.size] ?? F.normal,
-					a.readonly ? "bg-surface-muted" : "bg-background",
-					a.rows === void 0 && !a.inputClass && "min-h-40",
+				"aria-invalid": q.value || void 0,
+				"aria-describedby": ie.value,
+				class: ["block w-full rounded-10 border text-heading transition-[color,background-color,border-color,box-shadow] duration-200 outline-none placeholder:text-muted/80 disabled:cursor-not-allowed", [
+					P[J.value],
+					a.rows === void 0 && !a.inputClass && !a.autoResize && F[J.value],
+					a.rows === void 0 && !a.inputClass && a.autoResize && "min-h-40",
 					a.mono ? "font-mono text-xs leading-5 font-normal" : "font-medium",
 					a.autoResize ? H.value ? "ac-scrollbar resize-none" : "resize-none overflow-hidden" : "ac-scrollbar resize-y",
-					G.value ? "border-danger/50 focus:border-danger focus:shadow-[0_0_0_2px_color-mix(in_srgb,var(--color-danger)_20%,transparent)]" : ["border-border focus:focus-ring", !a.disabled && "hover:border-accent-active"],
+					Y.value,
+					a.highlight && "ring-2 ring-primary/20 ring-offset-2 ring-offset-surface",
 					a.inputClass
-				]]
-			}), null, 16, O), [[b, P.value]]),
-			a.errorMsg || a.maxlength !== void 0 ? (d(), n("div", k, [a.errorMsg ? (d(), n("p", {
+				]],
+				onInput: ae,
+				onFocusout: oe,
+				onFocus: o[1] ||= (e) => N("focus", e),
+				onBlur: o[2] ||= (e) => N("blur", e),
+				onChange: o[3] ||= (e) => N("change", e)
+			}), null, 16, T), [[b, M.value]]),
+			K.value || a.maxlength !== void 0 ? (d(), n("div", E, [K.value ? (d(), n("p", {
 				key: 0,
 				id: `${h(I)}-msg`,
-				class: "min-w-0 flex-1 text-base text-danger-strong",
+				class: l(["min-w-0 flex-1 text-base", a.plainError ? "text-danger" : "text-danger-strong"]),
 				role: "alert"
-			}, m(a.errorMsg), 9, A)) : (d(), n("span", j)), a.maxlength === void 0 ? t("", !0) : (d(), n("p", {
+			}, m(K.value), 11, te)) : (d(), n("span", ne)), a.maxlength === void 0 ? t("", !0) : (d(), n("p", {
 				key: 2,
 				id: `${h(I)}-count`,
-				class: l(["shrink-0 text-xs tabular-nums", J.value ? "font-medium text-danger-strong" : "text-muted"])
-			}, [o[1] ||= r("span", { class: "sr-only" }, "Characters used: ", -1), i(m(q.value) + " / " + m(a.maxlength), 1)], 10, M))])) : t("", !0)
+				class: l(["shrink-0 text-xs tabular-nums", re.value ? "font-medium text-danger-strong" : "text-muted"])
+			}, [o[4] ||= r("span", { class: "sr-only" }, "Characters used: ", -1), i(m(Z.value) + " / " + m(a.maxlength), 1)], 10, D))])) : t("", !0)
 		], 16));
 	}
 });
 //#endregion
-export { N as default };
+export { A as default };

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

@@ -1,3 +1,4 @@
+import type { HTMLAttributes } from "vue";
 export interface Props {
     /** Label above the field. Doubles as the accessible name of the trigger and the popover. */
     label?: string;
@@ -23,12 +24,16 @@ 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. */
     name?: string;
     /** Draws the hour and minute columns in place, with no field, popover or border. Each click updates `v-model` at once. */
     inline?: boolean;
+    /** `string` keeps `"HH:mm"`; `date` keeps a `Date` and changes only its hours and minutes, starting from today when empty. */
+    valueType?: "string" | "date";
+    /** 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 = {
@@ -39,8 +44,8 @@ type __VLS_Slots = {
 };
 declare function scrollToSelected(): Promise<void>;
 type __VLS_ModelProps = {
-    /** `"14:05"`, or `"14:05:30"` with `show-seconds`, always 24-hour. `null` when empty. */
-    modelValue?: string | null;
+    /** `"14:05"`, or `"14:05:30"` with `show-seconds`, always 24-hour; a `Date` with `value-type="date"`. `null` when empty. */
+    modelValue?: string | Date | null;
     /** Whether the popover is open. */
     "open"?: boolean;
 };
@@ -51,10 +56,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     /** Scrolls each column to its selected value. Call it when an `inline` picker becomes visible, e.g. on a tab switch. */
     scrollToSelected: typeof scrollToSelected;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string | null) => any;
+    "update:modelValue": (value: string | Date | null) => any;
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | Date | null) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     required: boolean;
@@ -63,14 +68,16 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     max: string;
     min: string;
     name: string;
-    size: "small" | "normal";
+    size: "small" | "normal" | "large";
     hint: string;
     inline: boolean;
     placeholder: string;
-    clearable: boolean;
     errorMsg: string;
+    clearable: boolean;
     showSeconds: boolean;
     hourCycle: 12 | 24;
+    valueType: "string" | "date";
+    fieldClass: string | false | Record<string, any> | import("vue").ClassValue[] | null;
     minuteStep: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;