@ac-design/design-system 2.9.1 → 2.10.1

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

@@ -0,0 +1,437 @@
+import e from "./AcSpinner.js";
+import { fixedFrame as t } from "./fixedFrame.js";
+import { Fragment as n, Teleport as r, Transition as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, mergeModels as p, mergeProps as ee, nextTick as m, normalizeClass as h, normalizeStyle as te, onBeforeUnmount as ne, openBlock as g, ref as _, renderList as re, renderSlot as v, resolveDynamicComponent as ie, toDisplayString as y, unref as b, useAttrs as ae, useId as oe, useModel as se, useSlots as ce, watch as x, withCtx as le, withModifiers as ue } from "vue";
+import { Check as de, ChevronDown as fe, ChevronUp as pe } from "@lucide/vue";
+//#region src/lib/components/AcCombobox.vue?vue&type=script&setup=true&lang.ts
+var me = {
+	key: 1,
+	class: "text-muted"
+}, he = {
+	key: 2,
+	class: "text-danger",
+	"aria-hidden": "true"
+}, ge = [
+	"value",
+	"aria-expanded",
+	"aria-activedescendant",
+	"aria-label",
+	"aria-describedby",
+	"aria-invalid",
+	"aria-required",
+	"aria-busy",
+	"placeholder",
+	"disabled",
+	"readonly",
+	"required"
+], _e = [
+	"aria-label",
+	"aria-expanded",
+	"disabled"
+], ve = [
+	"aria-labelledby",
+	"aria-label",
+	"aria-busy"
+], ye = [
+	"id",
+	"aria-selected",
+	"aria-disabled",
+	"onMouseenter",
+	"onClick"
+], be = { class: "min-w-0 flex-1" }, xe = {
+	key: 0,
+	class: "block truncate text-xs font-normal text-muted"
+}, Se = {
+	key: 0,
+	role: "presentation",
+	class: "px-4 py-3 text-center text-base text-muted"
+}, S = 320, Ce = "focus-within:shadow-[0_0_0_2px_color-mix(in_srgb,var(--color-danger)_20%,transparent)]", C = /*@__PURE__*/ f({
+	inheritAttrs: !1,
+	__name: "AcCombobox",
+	props: /*@__PURE__*/ p({
+		options: { default: () => [] },
+		label: { default: "" },
+		labelClass: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			default: void 0
+		},
+		placeholder: { default: void 0 },
+		hint: { default: "" },
+		size: { default: "normal" },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		readonly: {
+			type: Boolean,
+			default: !1
+		},
+		required: {
+			type: Boolean,
+			default: !1
+		},
+		requiredMark: {
+			type: Boolean,
+			default: !1
+		},
+		errorMsg: { default: "" },
+		invalid: {
+			type: Boolean,
+			default: !1
+		},
+		allowCustom: {
+			type: Boolean,
+			default: !0
+		},
+		filter: {
+			type: [Function, Boolean],
+			default: void 0
+		},
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		loadingText: { default: "Loading…" },
+		emptyText: { default: "" },
+		openOnFocus: {
+			type: Boolean,
+			default: !0
+		},
+		placement: { default: "bottom" },
+		inputClass: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			default: void 0
+		}
+	}, {
+		modelValue: { default: "" },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ p([
+		"select",
+		"search",
+		"focus",
+		"blur"
+	], ["update:modelValue"]),
+	setup(f, { expose: p, emit: C }) {
+		let w = f, T = se(f, "modelValue"), E = C, D = ce(), O = {
+			small: {
+				box: "h-9",
+				start: "pl-4",
+				end: "pr-1"
+			},
+			normal: {
+				box: "h-10.5",
+				start: "pl-5",
+				end: "pr-2"
+			}
+		}, k = oe(), A = ae(), j = `${k}-input`, M = `${k}-list`, N = `${k}-label`, we = `${k}-hint`, Te = `${k}-msg`, Ee = _(null), P = _(null), F = _(null), I = _(!1), L = _(""), R = _(-1), z = _(!1), B = _(!1), V = _({
+			left: 0,
+			minWidth: 0,
+			maxWidth: S,
+			maxHeight: 288
+		}), De = a(() => ({
+			class: A.class,
+			style: A.style
+		})), Oe = a(() => {
+			let { class: e, style: t, ...n } = A;
+			return n;
+		}), H = a(() => w.options.map((e) => typeof e == "string" ? {
+			value: e,
+			label: e
+		} : {
+			...e,
+			label: e.label ?? e.value
+		})), U = a(() => {
+			let e = L.value.trim();
+			if (w.filter === !1 || !z.value || !e) return H.value;
+			let t = w.filter ?? Fe;
+			return H.value.filter((n) => t(n, e));
+		}), W = a(() => w.size in O ? w.size : "normal"), ke = a(() => !!w.errorMsg || w.invalid), Ae = a(() => !!(w.label || w.readonly || D["label-icon"] || D["label-extra"])), je = a(() => w.label ? void 0 : A["aria-label"] ?? w.placeholder), Me = a(() => [
+			A["aria-describedby"],
+			w.hint && we,
+			w.errorMsg && Te
+		].filter(Boolean).join(" ") || void 0), Ne = a(() => ke.value ? ["border-danger/50 bg-background focus-within:border-danger", Ce] : [
+			w.readonly ? "bg-surface-muted" : "bg-background",
+			"border-border focus-within:focus-ring",
+			!w.disabled && !w.readonly && "hover:border-accent-active"
+		]), Pe = a(() => {
+			if (w.emptyText) return w.emptyText;
+			let e = L.value.trim();
+			return z.value && e ? `No matches for “${e}”` : "No suggestions";
+		});
+		function Fe(e, t) {
+			let n = t.toLowerCase();
+			return (e.label ?? e.value).toLowerCase().includes(n) || e.value.toLowerCase().includes(n);
+		}
+		function G(e) {
+			return w.allowCustom ? e : H.value.find((t) => t.value === e)?.label ?? e;
+		}
+		function K(e) {
+			return `${k}-opt-${e}`;
+		}
+		function q(e) {
+			return e.value === T.value;
+		}
+		function J(e = 0, t = 1) {
+			for (let n = e; n >= 0 && n < U.value.length; n += t) if (!U.value[n].disabled) return n;
+			return -1;
+		}
+		function Y() {
+			let e = Ee.value;
+			if (!e) return;
+			let n = e.getBoundingClientRect(), r = t(), i = r.bottom - n.bottom - 4 - 8, a = n.top - r.top - 4 - 8, [o, s] = w.placement === "top" ? [a, i] : [i, a], c = o < 180 && s > o, l = w.placement === "top" ? !c : c, u = Math.max(n.width, Math.min(S, r.width - 16)), d = Math.min(Math.max(F.value?.offsetWidth ?? n.width, n.width), u), f = n.left - r.left, p = {
+				left: f + d > r.width - 8 ? Math.max(8, n.right - r.left - d) : f,
+				minWidth: n.width,
+				maxWidth: u
+			};
+			V.value = l ? {
+				...p,
+				bottom: r.bottom - n.top + 4,
+				maxHeight: Math.min(288, a)
+			} : {
+				...p,
+				top: n.bottom + 4 - r.top,
+				maxHeight: Math.min(288, i)
+			};
+		}
+		function Ie() {
+			m(() => F.value?.querySelector(`#${CSS.escape(K(R.value))}`)?.scrollIntoView({ block: "nearest" }));
+		}
+		function X(e = "none") {
+			if (w.disabled || w.readonly || I.value) return;
+			z.value = !1, I.value = !0;
+			let t = U.value.findIndex(q);
+			e === "none" ? R.value = -1 : t >= 0 && !U.value[t].disabled ? R.value = t : R.value = e === "first" ? J() : J(U.value.length - 1, -1), Ie();
+		}
+		function Z() {
+			I.value = !1;
+		}
+		function Le() {
+			if (I.value) return Z();
+			X(), P.value?.focus();
+		}
+		function Re(e) {
+			let t = U.value.length;
+			if (!t) return;
+			let n = R.value < 0 ? e > 0 ? -1 : t : R.value;
+			for (let r = 0; r < t && (n = (n + e + t) % t, U.value[n].disabled); r++);
+			R.value = n, Ie();
+		}
+		function ze(e) {
+			e.disabled || (T.value = e.value, L.value = G(e.value), B.value = !1, E("select", e), Z());
+		}
+		function Be() {
+			if (w.allowCustom || !B.value) return;
+			let e = L.value.trim().toLowerCase();
+			if (!e) T.value = "";
+			else {
+				let t = H.value.find((t) => !t.disabled && (t.label.toLowerCase() === e || t.value.toLowerCase() === e));
+				t && t.value !== T.value && (T.value = t.value, E("select", t));
+			}
+			L.value = G(T.value), B.value = !1;
+		}
+		function Ve() {
+			L.value = "", T.value = "", B.value = !1, E("search", "");
+		}
+		function He(e) {
+			let t = e.target.value;
+			L.value = t, w.allowCustom ? T.value = t : B.value = !0, X(), z.value = !0, R.value = w.allowCustom ? -1 : J(), E("search", t);
+		}
+		function Ue(e) {
+			E("focus", e), w.openOnFocus && X();
+		}
+		function We(e) {
+			Z(), Be(), E("blur", e);
+		}
+		function Ge() {
+			w.openOnFocus && X();
+		}
+		function Ke(e) {
+			if (!(w.disabled || w.readonly || e.isComposing)) switch (e.key) {
+				case "ArrowDown":
+					e.preventDefault(), e.altKey ? X() : I.value ? Re(1) : X("first");
+					break;
+				case "ArrowUp":
+					e.preventDefault(), e.altKey ? Z() : I.value ? Re(-1) : X("last");
+					break;
+				case "Enter": {
+					if (!I.value) return;
+					let t = U.value[R.value];
+					t ? (e.preventDefault(), ze(t)) : (Z(), Be());
+					break;
+				}
+				case "Escape":
+					I.value ? (e.preventDefault(), Z()) : L.value && (e.preventDefault(), Ve());
+					break;
+				case "Home":
+				case "End":
+				case "ArrowLeft":
+				case "ArrowRight": R.value = -1;
+			}
+		}
+		function Q(e) {
+			e?.target instanceof Node && F.value?.contains(e.target) || Y();
+		}
+		function $() {
+			window.removeEventListener("scroll", Q, !0), window.removeEventListener("resize", Q);
+		}
+		return x(() => T.value, (e) => {
+			L.value = G(e ?? ""), B.value = !1;
+		}, { immediate: !0 }), x(H, () => {
+			B.value || (L.value = G(T.value ?? ""));
+		}), x(U, (e) => {
+			!w.allowCustom && z.value ? R.value = J() : R.value >= e.length && (R.value = -1), I.value && m(Y);
+		}), x(I, async (e) => {
+			if (!e) {
+				R.value = -1, $();
+				return;
+			}
+			Y(), window.addEventListener("scroll", Q, !0), window.addEventListener("resize", Q), await m(), Y();
+		}), ne($), p({ focus: () => P.value?.focus() }), (t, a) => (g(), c("div", ee(De.value, {
+			class: ["[:where(&)]:w-full", f.disabled && "opacity-50"],
+			"data-ac-ds": "",
+			"data-testid": "ac-combobox"
+		}), [
+			Ae.value ? (g(), c("div", {
+				key: 0,
+				class: h(["mb-2 flex items-center gap-1 text-base font-medium text-heading", f.labelClass])
+			}, [
+				v(t.$slots, "label-icon"),
+				f.label ? (g(), c("label", {
+					key: 0,
+					id: N,
+					for: j
+				}, y(f.label), 1)) : s("", !0),
+				f.readonly ? (g(), c("span", me, "(read only)")) : s("", !0),
+				v(t.$slots, "label-extra"),
+				f.required || f.requiredMark ? (g(), c("span", he, "*")) : s("", !0)
+			], 2)) : s("", !0),
+			f.hint ? (g(), c("p", {
+				key: 1,
+				id: we,
+				class: "mb-2 text-base text-muted"
+			}, y(f.hint), 1)) : s("", !0),
+			l("div", {
+				ref_key: "field",
+				ref: Ee,
+				class: h(["relative flex w-full items-center rounded-10 border transition-[border-color,box-shadow,background-color] duration-200", [O[W.value].box, Ne.value]])
+			}, [l("input", ee({
+				id: j,
+				ref_key: "input",
+				ref: P
+			}, Oe.value, {
+				value: L.value,
+				type: "text",
+				role: "combobox",
+				autocomplete: "off",
+				"aria-autocomplete": "list",
+				"aria-expanded": I.value,
+				"aria-controls": M,
+				"aria-activedescendant": I.value && R.value >= 0 ? K(R.value) : void 0,
+				"aria-label": je.value,
+				"aria-describedby": Me.value,
+				"aria-invalid": ke.value || void 0,
+				"aria-required": f.required || f.requiredMark || void 0,
+				"aria-busy": f.loading || void 0,
+				placeholder: f.placeholder,
+				disabled: f.disabled,
+				readonly: f.readonly,
+				required: f.required,
+				class: ["block h-full w-full min-w-0 flex-1 rounded-10 bg-transparent pr-2 text-base font-normal text-heading outline-none placeholder:text-muted/80 disabled:cursor-not-allowed", [O[W.value].start, f.inputClass]],
+				onInput: He,
+				onKeydown: Ke,
+				onFocus: Ue,
+				onBlur: We,
+				onClick: Ge
+			}), null, 16, ge), l("span", { class: h(["flex h-full shrink-0 items-center gap-1 text-muted", O[W.value].end]) }, [f.loading ? (g(), o(e, {
+				key: 0,
+				class: "text-primary",
+				label: ""
+			})) : s("", !0), f.readonly ? s("", !0) : (g(), c("button", {
+				key: 1,
+				type: "button",
+				tabindex: "-1",
+				class: "inline-flex size-7 cursor-pointer items-center justify-center rounded-8 transition-colors hover:bg-accent-hover hover:text-primary disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-muted",
+				"aria-label": I.value ? "Hide suggestions" : "Show suggestions",
+				"aria-controls": M,
+				"aria-expanded": I.value,
+				disabled: f.disabled,
+				"data-testid": "ac-combobox-toggle",
+				onMousedown: a[0] ||= ue(() => {}, ["prevent"]),
+				onClick: Le
+			}, [(g(), o(ie(I.value ? b(pe) : b(fe)), {
+				class: "size-4",
+				"aria-hidden": "true"
+			}))], 40, _e))], 2)], 2),
+			f.errorMsg ? (g(), c("p", {
+				key: 2,
+				id: Te,
+				class: "mt-1 text-base text-danger-strong",
+				role: "alert"
+			}, y(f.errorMsg), 1)) : s("", !0),
+			v(t.$slots, "message"),
+			(g(), o(r, { to: "body" }, [d(i, {
+				"enter-active-class": "transition-opacity duration-100 ease-out motion-reduce:transition-none",
+				"enter-from-class": "opacity-0",
+				"leave-active-class": "transition-opacity duration-75 ease-in motion-reduce:transition-none",
+				"leave-to-class": "opacity-0"
+			}, {
+				default: le(() => [I.value ? (g(), c("div", {
+					key: 0,
+					ref_key: "panel",
+					ref: F,
+					class: "fixed z-[90] flex w-max flex-col overflow-hidden rounded-10 border border-border bg-background shadow-lg",
+					style: te({
+						top: V.value.top === void 0 ? void 0 : `${V.value.top}px`,
+						bottom: V.value.bottom === void 0 ? void 0 : `${V.value.bottom}px`,
+						left: `${V.value.left}px`,
+						minWidth: `${V.value.minWidth}px`,
+						maxWidth: `${V.value.maxWidth}px`,
+						maxHeight: `${V.value.maxHeight}px`
+					}),
+					"data-ac-ds": "",
+					"data-testid": "ac-combobox-panel",
+					onMousedown: a[1] ||= ue(() => {}, ["prevent"])
+				}, [l("ul", {
+					id: M,
+					role: "listbox",
+					"aria-labelledby": f.label ? N : void 0,
+					"aria-label": f.label ? void 0 : je.value,
+					"aria-busy": f.loading || void 0,
+					class: "ac-scrollbar max-h-60 min-h-0 flex-1 p-1"
+				}, [(g(!0), c(n, null, re(U.value, (e, n) => (g(), c("li", {
+					id: K(n),
+					key: e.value,
+					role: "option",
+					"aria-selected": q(e),
+					"aria-disabled": e.disabled || void 0,
+					class: h(["flex cursor-pointer items-start gap-2.5 rounded-6 px-4 py-2 text-base text-heading transition-colors", [e.disabled && "cursor-not-allowed opacity-50", n === R.value ? "bg-accent-hover" : q(e) && "bg-accent"]]),
+					onMouseenter: (t) => !e.disabled && (R.value = n),
+					onClick: (t) => ze(e)
+				}, [l("span", be, [v(t.$slots, "option", {
+					option: e,
+					selected: q(e),
+					active: n === R.value
+				}, () => [l("span", { class: h(["block truncate", q(e) && "font-medium text-primary-strong"]) }, y(e.label), 3), e.description ? (g(), c("span", xe, y(e.description), 1)) : s("", !0)])]), !t.$slots.option && q(e) ? (g(), o(b(de), {
+					key: 0,
+					class: "mt-0.5 size-4 shrink-0 text-primary",
+					"aria-hidden": "true"
+				})) : s("", !0)], 42, ye))), 128)), U.value.length ? s("", !0) : (g(), c("li", Se, [f.loading ? (g(), c(n, { key: 0 }, [u(y(f.loadingText), 1)], 64)) : v(t.$slots, "empty", { query: L.value.trim() }, () => [u(y(Pe.value), 1)], void 0, 1)]))], 8, ve)], 36)) : s("", !0)]),
+				_: 3
+			})]))
+		], 16));
+	}
+});
+//#endregion
+export { C as default };

package/dist/lib/components/AcPopover.js

@@ -0,0 +1,5 @@
+import e from "./AcPopover.vue_vue_type_script_setup_true_lang.js";
+//#region src/lib/components/AcPopover.vue
+var t = e;
+//#endregion
+export { t as default };

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

@@ -0,0 +1,71 @@
+export interface Props {
+    /** Text of the default trigger button, e.g. "Filters". Without a `title` it is also the panel's accessible name. */
+    label?: string;
+    /** Heading at the top of the panel. It names the dialog for screen readers. */
+    title?: string;
+    /** Shows this number in a badge on the default trigger and turns it primary, e.g. the count of active filters. Hidden at 0. */
+    count?: number;
+    /** Which edge of the trigger the panel lines up with. Use `end` for a trigger at the right of a toolbar. */
+    align?: "start" | "end";
+    /** Preferred side. The panel flips when there isn't room. */
+    placement?: "bottom" | "top";
+    /** Panel width: `sm` 240px, `md` 288px, `lg` 384px, or a number of px. It never grows wider than the viewport minus 16px. */
+    width?: "sm" | "md" | "lg" | number;
+    /** Disables the default trigger and stops the panel opening. */
+    disabled?: boolean;
+}
+type __VLS_Props = Props;
+type __VLS_Slots = {
+    /** Custom trigger, usually an `AcButton`. Bind `@click="toggle"`; the popover adds the ARIA attributes. */
+    trigger?: (props: {
+        open: boolean;
+        toggle: () => void;
+    }) => unknown;
+    /** A 16px icon before the default trigger's label, e.g. `Filter`. */
+    icon?: () => unknown;
+    /** The panel's content: form controls, text or links. It scrolls when the panel is taller than the room left. */
+    default?: () => unknown;
+    /** Right-aligned buttons under a divider, e.g. Apply. */
+    footer?: () => unknown;
+    /** Left side of the footer, e.g. a Reset link. */
+    "footer-left"?: () => unknown;
+};
+declare function show(): void;
+declare function toggle(): void;
+type __VLS_ModelProps = {
+    /** Whether the panel is open. Bind with `v-model:open` to open or close it from code, e.g. after Apply. */
+    "open"?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    /** Opens the panel and moves focus into it. */
+    open: typeof show;
+    /** Closes the panel; focus returns to the trigger if it was inside. */
+    close: () => void;
+    /** Opens or closes the panel. */
+    toggle: typeof toggle;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    open: () => any;
+    "update:open": (value: boolean) => any;
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onOpen?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onClose?: (() => any) | undefined;
+}>, {
+    label: string;
+    title: string;
+    disabled: boolean;
+    width: "sm" | "md" | "lg" | number;
+    placement: "bottom" | "top";
+    align: "start" | "end";
+    count: 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;
+    };
+};