@ac-design/design-system 2.0.0 → 2.1.1

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

@@ -1,14 +1,13 @@
-import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, createTextVNode as i, createVNode as a, defineComponent as o, mergeModels as s, mergeProps as c, nextTick as l, normalizeClass as u, onMounted as d, openBlock as f, ref as p, toDisplayString as m, unref as h, useAttrs as g, useId as _, useModel as v, vModelText as y, watch as b, withDirectives as x } from "vue";
-import { CircleAlert as S } from "@lucide/vue";
+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, toDisplayString as p, unref as m, useAttrs as h, useId as g, useModel as _, vModelText as v, watch as y, withDirectives as b } from "vue";
 //#region src/lib/components/AcTextarea.vue?vue&type=script&setup=true&lang.ts
-var C = ["for"], w = {
+var x = ["for"], S = {
 	key: 0,
-	class: "font-normal text-muted"
-}, T = {
+	class: "text-muted"
+}, C = {
 	key: 1,
 	class: "text-danger",
 	"aria-hidden": "true"
-}, E = ["id"], D = [
+}, w = ["id"], T = [
 	"id",
 	"name",
 	"rows",
@@ -18,19 +17,19 @@ var C = ["for"], w = {
 	"required",
 	"aria-invalid",
 	"aria-describedby"
-], O = {
+], E = {
 	key: 1,
-	class: "mt-1.5 flex items-start gap-3"
-}, k = ["id"], A = {
+	class: "mt-1 flex items-start gap-3"
+}, D = ["id"], O = {
 	key: 1,
 	class: "flex-1"
-}, j = ["id"], M = /*@__PURE__*/ o({
+}, k = ["id"], A = /*@__PURE__*/ a({
 	inheritAttrs: !1,
 	__name: "AcTextarea",
-	props: /*@__PURE__*/ s({
+	props: /*@__PURE__*/ o({
 		label: {},
 		name: { default: "" },
-		rows: { default: 4 },
+		rows: { default: void 0 },
 		autoResize: {
 			type: Boolean,
 			default: !1
@@ -60,86 +59,84 @@ var C = ["for"], w = {
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
-	setup(o, { expose: s }) {
-		let M = o, N = v(o, "modelValue"), P = _(), F = g(), I = e(() => ({
-			class: F.class,
-			style: F.style
-		})), L = e(() => {
-			let { class: e, style: t, ...n } = F;
+	setup(a, { expose: o }) {
+		let A = a, j = _(a, "modelValue"), M = g(), N = h(), P = e(() => ({
+			class: N.class,
+			style: N.style
+		})), F = e(() => {
+			let { class: e, style: t, ...n } = N;
 			return n;
-		}), R = p(null), z = p(!1), B = e(() => (N.value ?? "").length), V = e(() => M.maxlength !== void 0 && B.value >= M.maxlength), H = e(() => [
-			M.hint && `${P}-hint`,
-			M.errorMsg && `${P}-msg`,
-			M.maxlength !== void 0 && `${P}-count`
+		}), I = f(null), L = f(!1), R = e(() => A.rows ?? 4), z = e(() => (j.value ?? "").length), B = e(() => A.maxlength !== void 0 && z.value >= A.maxlength), V = e(() => [
+			A.hint && `${M}-hint`,
+			A.errorMsg && `${M}-msg`,
+			A.maxlength !== void 0 && `${M}-count`
 		].filter(Boolean).join(" ") || void 0);
-		function U() {
-			let e = R.value;
-			if (!e || !M.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 = M.rows * n + r, a = M.maxRows > 0 ? M.maxRows * n + r : Infinity;
+		function H() {
+			let e = I.value;
+			if (!e || !A.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 = R.value * n + r, a = A.maxRows > 0 ? A.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`, z.value = o > a;
+			e.style.height = `${Math.min(Math.max(o, i), a)}px`, L.value = o > a;
 		}
-		return b(N, () => l(U)), b(() => [
-			M.autoResize,
-			M.rows,
-			M.maxRows
+		return y(j, () => c(H)), y(() => [
+			A.autoResize,
+			A.rows,
+			A.maxRows
 		], () => {
-			!M.autoResize && R.value && (R.value.style.height = ""), l(U);
-		}), d(U), s({ focus: () => R.value?.focus() }), (e, s) => (f(), n("div", c(I.value, {
-			class: ["w-full", o.disabled && "opacity-50"],
+			!A.autoResize && I.value && (I.value.style.height = ""), c(H);
+		}), u(H), o({ focus: () => I.value?.focus() }), (e, o) => (d(), n("div", s(P.value, {
+			class: ["w-full", a.disabled && "opacity-50"],
 			"data-ac-ds": "",
 			"data-testid": "ac-textarea"
 		}), [
 			r("label", {
-				for: h(P),
+				for: m(M),
 				class: "mb-2 flex items-center gap-1 text-base font-medium text-heading"
 			}, [
-				r("span", null, m(o.label), 1),
-				o.readonly ? (f(), n("span", w, "(read only)")) : t("", !0),
-				o.required ? (f(), n("span", T, "*")) : t("", !0)
-			], 8, C),
-			o.hint ? (f(), n("p", {
+				r("span", null, p(a.label), 1),
+				a.readonly ? (d(), n("span", S, "(read only)")) : t("", !0),
+				a.required ? (d(), n("span", C, "*")) : t("", !0)
+			], 8, x),
+			a.hint ? (d(), n("p", {
 				key: 0,
-				id: `${h(P)}-hint`,
+				id: `${m(M)}-hint`,
 				class: "mb-2 text-base text-muted"
-			}, m(o.hint), 9, E)) : t("", !0),
-			x(r("textarea", c({
-				id: h(P),
+			}, p(a.hint), 9, w)) : t("", !0),
+			b(r("textarea", s({
+				id: m(M),
 				ref_key: "field",
-				ref: R
-			}, L.value, {
-				"onUpdate:modelValue": s[0] ||= (e) => N.value = e,
-				name: o.name,
-				rows: o.rows,
-				maxlength: o.maxlength,
-				disabled: o.disabled,
-				readonly: o.readonly,
-				required: o.required,
-				"aria-invalid": !!o.errorMsg || void 0,
-				"aria-describedby": H.value,
-				class: ["block w-full rounded-10 border px-4 py-2.5 text-base font-normal text-heading transition-[color,background-color,border-color,box-shadow] duration-200 outline-none placeholder:text-muted/80 disabled:cursor-not-allowed", [
-					o.readonly ? "bg-surface-muted" : "bg-background",
-					o.mono && "font-mono text-xs leading-5",
-					o.autoResize ? z.value ? "ac-scrollbar resize-none" : "resize-none overflow-hidden" : "ac-scrollbar resize-y",
-					o.errorMsg ? "border-danger/60 focus:border-danger focus:shadow-[0_0_0_2px_color-mix(in_srgb,var(--color-danger)_20%,transparent)]" : ["border-border focus:focus-ring", !o.disabled && "hover:border-accent-active"]
+				ref: I
+			}, F.value, {
+				"onUpdate:modelValue": o[0] ||= (e) => j.value = e,
+				name: a.name,
+				rows: R.value,
+				maxlength: a.maxlength,
+				disabled: a.disabled,
+				readonly: a.readonly,
+				required: a.required,
+				"aria-invalid": !!a.errorMsg || void 0,
+				"aria-describedby": V.value,
+				class: ["block w-full rounded-10 border px-5 py-2.5 text-base text-heading transition-[color,background-color,border-color,box-shadow] duration-200 outline-none placeholder:text-muted/80 disabled:cursor-not-allowed", [
+					a.readonly ? "bg-surface-muted" : "bg-background",
+					a.rows === void 0 && "min-h-40",
+					a.mono ? "font-mono text-xs leading-5 font-normal" : "font-medium",
+					a.autoResize ? L.value ? "ac-scrollbar resize-none" : "resize-none overflow-hidden" : "ac-scrollbar resize-y",
+					a.errorMsg ? "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"]
 				]]
-			}), null, 16, D), [[y, N.value]]),
-			o.errorMsg || o.maxlength !== void 0 ? (f(), n("div", O, [o.errorMsg ? (f(), n("p", {
+			}), null, 16, T), [[v, j.value]]),
+			a.errorMsg || a.maxlength !== void 0 ? (d(), n("div", E, [a.errorMsg ? (d(), n("p", {
 				key: 0,
-				id: `${h(P)}-msg`,
-				class: "flex min-w-0 flex-1 items-center gap-1.5 text-base text-danger-strong",
+				id: `${m(M)}-msg`,
+				class: "min-w-0 flex-1 text-base text-danger-strong",
 				role: "alert"
-			}, [a(h(S), {
-				class: "size-4 shrink-0",
-				"aria-hidden": "true"
-			}), i(" " + m(o.errorMsg), 1)], 8, k)) : (f(), n("span", A)), o.maxlength === void 0 ? t("", !0) : (f(), n("p", {
+			}, p(a.errorMsg), 9, D)) : (d(), n("span", O)), a.maxlength === void 0 ? t("", !0) : (d(), n("p", {
 				key: 2,
-				id: `${h(P)}-count`,
-				class: u(["shrink-0 text-xs tabular-nums", V.value ? "font-medium text-danger-strong" : "text-muted"])
-			}, [s[1] ||= r("span", { class: "sr-only" }, "Characters used: ", -1), i(m(B.value) + " / " + m(o.maxlength), 1)], 10, j))])) : t("", !0)
+				id: `${m(M)}-count`,
+				class: l(["shrink-0 text-xs tabular-nums", B.value ? "font-medium text-danger-strong" : "text-muted"])
+			}, [o[1] ||= r("span", { class: "sr-only" }, "Characters used: ", -1), i(p(z.value) + " / " + p(a.maxlength), 1)], 10, k))])) : t("", !0)
 		], 16));
 	}
 });
 //#endregion
-export { M as default };
+export { A as default };

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

@@ -2,15 +2,15 @@ import type { ColorMode } from "../composables/useColorMode";
 export interface Props {
     /** Used until the viewer picks a mode. */
     defaultMode?: ColorMode;
-    /** `icons` is a compact 3-icon switch; `labels` adds the words, for menus and settings pages. */
-    display?: "icons" | "labels";
+    /** `icons` is a compact 3-icon switch; `labels` adds the words, for menus and settings pages; `toggle` is cloud-ui's sun/moon switch for the navbar (64×32px), light or dark only. */
+    display?: "icons" | "labels" | "toggle";
 }
 declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "set:theme": (theme: "light" | "dark") => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     "onSet:theme"?: ((theme: "light" | "dark") => any) | undefined;
 }>, {
-    display: "icons" | "labels";
+    display: "icons" | "labels" | "toggle";
     defaultMode: ColorMode;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -1,60 +1,92 @@
 import { useColorMode as e } from "../composables/useColorMode.js";
-import { Fragment as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, defineComponent as o, normalizeClass as s, openBlock as c, renderList as l, resolveDynamicComponent as u, toDisplayString as d, unref as f } from "vue";
-import { Monitor as p, Moon as m, Sun as h } from "@lucide/vue";
+import { Fragment as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, normalizeClass as c, onBeforeUnmount as l, openBlock as u, ref as d, renderList as f, resolveDynamicComponent as p, toDisplayString as m, unref as h, watch as g } from "vue";
+import { Monitor as _, Moon as v, Sun as y } from "@lucide/vue";
 //#region src/lib/components/AcThemeMode.vue?vue&type=script&setup=true&lang.ts
-var g = {
+var b = ["aria-checked", "title"], x = {
+	key: 1,
 	role: "radiogroup",
 	"aria-label": "Theme",
 	class: "inline-flex items-center gap-1 rounded-10 bg-surface-sunken p-1",
 	"data-ac-ds": "",
 	"data-testid": "ac-theme-mode"
-}, _ = [
+}, S = [
 	"aria-checked",
 	"aria-label",
 	"title",
 	"onClick"
-], v = { key: 0 }, y = /*@__PURE__*/ o({
+], C = { key: 0 }, w = /*@__PURE__*/ s({
 	__name: "AcThemeMode",
 	props: {
 		defaultMode: { default: "light" },
 		display: { default: "icons" }
 	},
 	emits: ["set:theme"],
-	setup(o, { emit: y }) {
-		let b = o, x = y, S = [
+	setup(s, { emit: w }) {
+		let T = s, E = w, D = [
 			{
 				value: "light",
 				label: "Light",
-				icon: h
+				icon: y
 			},
 			{
 				value: "dark",
 				label: "Dark",
-				icon: m
+				icon: v
 			},
 			{
 				value: "system",
 				label: "System",
-				icon: p
+				icon: _
 			}
-		], { mode: C, isDark: w, setMode: T } = e({ defaultMode: b.defaultMode });
-		function E(e) {
-			T(e), x("set:theme", w.value ? "dark" : "light");
+		], { mode: O, isDark: k, setMode: A } = e({ defaultMode: T.defaultMode }), j = d(k.value), M;
+		function N(e) {
+			A(e), E("set:theme", k.value ? "dark" : "light");
 		}
-		return (e, p) => (c(), i("div", g, [(c(), i(t, null, l(S, (e) => a("button", {
+		function P() {
+			j.value = !j.value, clearTimeout(M), M = setTimeout(() => {
+				M = void 0, N(j.value ? "dark" : "light");
+			}, 200);
+		}
+		return g(k, (e) => {
+			M === void 0 && (j.value = e);
+		}), l(() => clearTimeout(M)), (e, l) => s.display === "toggle" ? (u(), i("button", {
+			key: 0,
+			type: "button",
+			role: "switch",
+			"aria-checked": j.value,
+			"aria-label": "Dark mode",
+			title: j.value ? "Switch to light mode" : "Switch to dark mode",
+			class: "relative inline-flex h-8 w-16 shrink-0 cursor-pointer items-center justify-center rounded-full border border-border focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none",
+			"data-ac-ds": "",
+			"data-testid": "ac-theme-mode",
+			onClick: P
+		}, [
+			a("span", {
+				class: c(["inline-flex transition-[translate,rotate,opacity] duration-500 ease-[cubic-bezier(0.26,2,0.46,0.71)] motion-reduce:transition-none", j.value ? "translate-x-[10px] rotate-0 opacity-0" : "translate-x-[3px] rotate-[15deg] opacity-100"]),
+				"aria-hidden": "true"
+			}, [o(h(y), { class: "size-[19px] text-theme-sun" })], 2),
+			a("span", {
+				class: c(["size-[21px] shrink-0 rounded-full inset-ring-2 transition-[translate,background-color] duration-500 ease-[cubic-bezier(0.26,2,0.46,0.71)] motion-reduce:transition-none", j.value ? "-translate-x-[14px] bg-theme-moon inset-ring-white" : "translate-x-4 bg-theme-sun-soft inset-ring-theme-sun"]),
+				"aria-hidden": "true"
+			}, null, 2),
+			a("span", {
+				class: c(["inline-flex transition-[translate,rotate,opacity] duration-500 ease-[cubic-bezier(0.26,2.5,0.46,0.71)] motion-reduce:transition-none", j.value ? "-translate-x-[3px] -rotate-[15deg] opacity-100" : "-translate-x-2 rotate-0 opacity-0"]),
+				"aria-hidden": "true"
+			}, [o(h(v), { class: "size-[21px] text-heading" })], 2)
+		], 8, b)) : (u(), i("div", x, [(u(), i(t, null, f(D, (e) => a("button", {
 			key: e.value,
 			type: "button",
 			role: "radio",
-			"aria-checked": f(C) === e.value,
-			"aria-label": o.display === "icons" ? `${e.label} theme` : void 0,
-			title: o.display === "icons" ? `${e.label} theme` : void 0,
-			class: s(["inline-flex h-7 cursor-pointer items-center justify-center gap-1.5 rounded-8 text-base font-medium transition-[background-color,color,box-shadow] duration-200 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset focus-visible:outline-none", [o.display === "icons" ? "w-7" : "px-3", f(C) === e.value ? "bg-surface text-heading shadow-sm" : "text-muted hover:text-heading"]]),
-			onClick: (t) => E(e.value)
-		}, [(c(), n(u(e.icon), {
+			"aria-checked": h(O) === e.value,
+			"aria-label": s.display === "icons" ? `${e.label} theme` : void 0,
+			title: s.display === "icons" ? `${e.label} theme` : void 0,
+			class: c(["inline-flex h-7 cursor-pointer items-center justify-center gap-1.5 rounded-8 text-base font-medium transition-[background-color,color,box-shadow] duration-200 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset focus-visible:outline-none", [s.display === "icons" ? "w-7" : "px-3", h(O) === e.value ? "bg-surface text-heading shadow-sm" : "text-muted hover:text-heading"]]),
+			onClick: (t) => N(e.value)
+		}, [(u(), n(p(e.icon), {
 			class: "size-4",
 			"aria-hidden": "true"
-		})), o.display === "labels" ? (c(), i("span", v, d(e.label), 1)) : r("", !0)], 10, _)), 64))]));
+		})), s.display === "labels" ? (u(), i("span", C, m(e.label), 1)) : r("", !0)], 10, S)), 64))]));
 	}
 });
 //#endregion
-export { y as default };
+export { w as default };

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

@@ -23,7 +23,7 @@ export interface Props {
     errorMsg?: string;
     /** Help text between the label and the field. */
     hint?: string;
-    /** `small` 36px or `normal` 40px tall. */
+    /** `small` 36px or `normal` 42px tall, the same as `AcInput`. */
     size?: "small" | "normal";
     /** Adds a hidden input with this name so plain form posts include the value. */
     name?: string;