@ac-design/design-system 2.2.1 → 2.4.0

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

@@ -1,92 +1,103 @@
 import { useColorMode as e } from "../composables/useColorMode.js";
-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";
+import { Fragment as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, mergeModels as l, normalizeClass as u, onBeforeUnmount as d, openBlock as f, ref as p, renderList as m, resolveDynamicComponent as h, toDisplayString as g, unref as _, useModel as v, watch as y } from "vue";
+import { Monitor as b, Moon as x, Sun as S } from "@lucide/vue";
 //#region src/lib/components/AcThemeMode.vue?vue&type=script&setup=true&lang.ts
-var b = ["aria-checked", "title"], x = {
+var C = ["aria-checked", "title"], w = {
 	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 = [
+}, T = [
 	"aria-checked",
 	"aria-label",
 	"title",
 	"onClick"
-], C = { key: 0 }, w = /*@__PURE__*/ s({
+], E = { key: 0 }, D = /*@__PURE__*/ c({
 	__name: "AcThemeMode",
-	props: {
+	props: /*@__PURE__*/ l({
 		defaultMode: { default: "light" },
 		display: { default: "icons" }
-	},
-	emits: ["set:theme"],
-	setup(s, { emit: w }) {
-		let T = s, E = w, D = [
+	}, {
+		dark: {
+			type: Boolean,
+			default: void 0
+		},
+		darkModifiers: {}
+	}),
+	emits: /*@__PURE__*/ l(["set:theme"], ["update:dark"]),
+	setup(c, { emit: l }) {
+		let D = c, O = v(c, "dark"), k = l, A = [
 			{
 				value: "light",
 				label: "Light",
-				icon: y
+				icon: S
 			},
 			{
 				value: "dark",
 				label: "Dark",
-				icon: v
+				icon: x
 			},
 			{
 				value: "system",
 				label: "System",
-				icon: _
+				icon: b
 			}
-		], { 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");
+		], j = O.value === void 0 ? e({ defaultMode: D.defaultMode }) : null, M = n(() => j ? j.isDark.value : !!O.value), N = n(() => j ? j.mode.value : O.value ? "dark" : "light"), P = p(M.value), F;
+		function I(e) {
+			if (j) {
+				j.setMode(e), k("set:theme", M.value ? "dark" : "light");
+				return;
+			}
+			let t = e === "system" ? window.matchMedia("(prefers-color-scheme: dark)").matches : e === "dark";
+			O.value = t, k("set:theme", t ? "dark" : "light");
 		}
-		function P() {
-			j.value = !j.value, clearTimeout(M), M = setTimeout(() => {
-				M = void 0, N(j.value ? "dark" : "light");
+		function L() {
+			P.value = !P.value, clearTimeout(F), F = setTimeout(() => {
+				F = void 0, I(P.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", {
+		return y(M, (e) => {
+			F === void 0 && (P.value = e);
+		}), d(() => clearTimeout(F)), (e, n) => c.display === "toggle" ? (f(), a("button", {
 			key: 0,
 			type: "button",
 			role: "switch",
-			"aria-checked": j.value,
+			"aria-checked": P.value,
 			"aria-label": "Dark mode",
-			title: j.value ? "Switch to light mode" : "Switch to dark mode",
+			title: P.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
+			onClick: L
 		}, [
-			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"]),
+			o("span", {
+				class: u(["inline-flex transition-[translate,rotate,opacity] duration-500 ease-[cubic-bezier(0.26,2,0.46,0.71)] motion-reduce:transition-none", P.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"]),
+			}, [s(_(S), { class: "size-[19px] text-theme-sun" })], 2),
+			o("span", {
+				class: u(["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", P.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"]),
+			o("span", {
+				class: u(["inline-flex transition-[translate,rotate,opacity] duration-500 ease-[cubic-bezier(0.26,2.5,0.46,0.71)] motion-reduce:transition-none", P.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", {
+			}, [s(_(x), { class: "size-[21px] text-heading" })], 2)
+		], 8, C)) : (f(), a("div", w, [(f(), a(t, null, m(A, (e) => o("button", {
 			key: e.value,
 			type: "button",
 			role: "radio",
-			"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), {
+			"aria-checked": N.value === e.value,
+			"aria-label": c.display === "icons" ? `${e.label} theme` : void 0,
+			title: c.display === "icons" ? `${e.label} theme` : void 0,
+			class: u(["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", [c.display === "icons" ? "w-7" : "px-3", N.value === e.value ? "bg-surface text-heading shadow-sm" : "text-muted hover:text-heading"]]),
+			onClick: (t) => I(e.value)
+		}, [(f(), r(h(e.icon), {
 			class: "size-4",
 			"aria-hidden": "true"
-		})), s.display === "labels" ? (u(), i("span", C, m(e.label), 1)) : r("", !0)], 10, S)), 64))]));
+		})), c.display === "labels" ? (f(), a("span", E, g(e.label), 1)) : i("", !0)], 10, T)), 64))]));
 	}
 });
 //#endregion
-export { w as default };
+export { D 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,27 +24,42 @@ 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 = {
+    /** Content before the label text, such as a 14px icon. */
+    "label-icon"?: () => unknown;
+    /** Content after the label text, such as "(Optional)" or an info tooltip. */
+    "label-extra"?: () => unknown;
+};
+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;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
-    /** Moves focus to the field. */
-    focus: () => void | undefined;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    /** Moves focus to the field, or to the hours column when `inline`. */
+    focus: () => void;
+    /** 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;
@@ -52,14 +68,23 @@ declare const __VLS_export: 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>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};