@ac-design/design-system 2.2.0 → 2.2.1

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

@@ -1,10 +1,11 @@
 import e from "./AcButton.js";
-import { Teleport as t, Transition as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createVNode as s, defineComponent as c, mergeModels as l, nextTick as u, normalizeClass as d, normalizeStyle as f, onBeforeUnmount as p, onMounted as m, onUpdated as h, openBlock as g, provide as _, ref as v, renderSlot as y, toRef as ee, unref as b, useId as x, useModel as S, useSlots as te, watch as C, withCtx as w } from "vue";
-import { ChevronDown as T, Ellipsis as E } from "@lucide/vue";
+import { fixedFrame as t } from "./fixedFrame.js";
+import { Teleport as n, Transition as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createVNode as c, defineComponent as l, mergeModels as u, nextTick as d, normalizeClass as f, normalizeStyle as ee, onBeforeUnmount as te, onMounted as p, onUpdated as m, openBlock as h, provide as g, ref as _, renderSlot as v, toRef as y, unref as b, useId as x, useModel as S, useSlots as C, watch as w, withCtx as T } from "vue";
+import { ChevronDown as E, Ellipsis as D } from "@lucide/vue";
 //#region src/lib/components/AcDropdown.vue?vue&type=script&setup=true&lang.ts
-var ne = ["aria-label", "disabled"], re = ["aria-labelledby", "aria-label"], D = "[role=\"menuitem\"]:not([aria-disabled=\"true\"])", O = /*@__PURE__*/ c({
+var O = ["aria-label", "disabled"], k = ["aria-labelledby", "aria-label"], A = "[role=\"menuitem\"]:not([aria-disabled=\"true\"])", j = /*@__PURE__*/ l({
 	__name: "AcDropdown",
-	props: /*@__PURE__*/ l({
+	props: /*@__PURE__*/ u({
 		label: { default: "" },
 		menuLabel: { default: "Actions" },
 		align: { default: "start" },
@@ -22,24 +23,24 @@ var ne = ["aria-label", "disabled"], re = ["aria-labelledby", "aria-label"], D =
 		openModifiers: {}
 	}),
 	emits: ["update:open"],
-	setup(c) {
-		let l = c, O = S(c, "open"), k = te(), A = {
+	setup(l) {
+		let u = l, j = S(l, "open"), M = C(), ne = {
 			menu: 240,
 			panel: 320
-		}, j = {
+		}, re = {
 			"top-start": "origin-top-left",
 			"top-end": "origin-top-right",
 			"bottom-start": "origin-bottom-left",
 			"bottom-end": "origin-bottom-right"
-		}, M = {
+		}, ie = {
 			menu: "rounded-10 border-border py-1",
 			panel: "rounded-14 border-border/80 p-2"
-		}, N = x(), P = `${N}-menu`, F = v(null), I = v(null), L = v({}), R = v(!1), z = v(""), B = null, V = "menu", H = "", U, W = r(() => j[`${R.value ? "top" : "bottom"}-${l.align}`]);
+		}, N = x(), P = `${N}-menu`, F = _(null), I = _(null), L = _({}), R = _(!1), z = _(""), B = null, V = "menu", H = "", U, W = i(() => re[`${R.value ? "top" : "bottom"}-${u.align}`]);
 		function G() {
-			B = F.value?.querySelector("button, a[href], [tabindex]") ?? null, B && (B.id || (B.id = `${N}-trigger`), z.value = B.id, B.setAttribute("aria-haspopup", "menu"), B.setAttribute("aria-expanded", String(O.value)), O.value ? B.setAttribute("aria-controls", P) : B.removeAttribute("aria-controls"));
+			B = F.value?.querySelector("button, a[href], [tabindex]") ?? null, B && (B.id || (B.id = `${N}-trigger`), z.value = B.id, B.setAttribute("aria-haspopup", "menu"), B.setAttribute("aria-expanded", String(j.value)), j.value ? B.setAttribute("aria-controls", P) : B.removeAttribute("aria-controls"));
 		}
 		function K() {
-			return [...I.value?.querySelectorAll(D) ?? []];
+			return [...I.value?.querySelectorAll(A) ?? []];
 		}
 		function q(e) {
 			let t = K();
@@ -47,44 +48,44 @@ var ne = ["aria-label", "disabled"], re = ["aria-labelledby", "aria-label"], D =
 			t[e === "first" ? 0 : e === "last" ? t.length - 1 : (e + t.length) % t.length]?.focus();
 		}
 		function J(e) {
-			l.disabled || (V = e, O.value = !0);
+			u.disabled || (V = e, j.value = !0);
 		}
 		function Y(e = !0) {
-			O.value && (O.value = !1, e && B?.focus());
+			j.value && (j.value = !1, e && B?.focus());
 		}
 		function X() {
 			if (!B || !I.value) return;
-			let e = B.getBoundingClientRect(), t = `${Math.min(Math.max(e.width, A[l.variant]), window.innerWidth - 16)}px`;
-			I.value.style.minWidth = t;
-			let { offsetWidth: n, offsetHeight: r } = I.value, i = window.innerHeight - e.bottom - 8 - 8, a = e.top - 8 - 8, o = l.placement === "top" ? a >= r || a > i : i < r && a > i, s = l.align === "end" ? e.right - n : e.left;
-			R.value = !o, L.value = {
-				[o ? "bottom" : "top"]: `${o ? window.innerHeight - e.top + 8 : e.bottom + 8}px`,
-				left: `${Math.max(8, Math.min(s, window.innerWidth - n - 8))}px`,
-				minWidth: t,
-				maxHeight: `${Math.max(o ? a : i, 120)}px`
+			let e = B.getBoundingClientRect(), n = t(), r = `${Math.min(Math.max(e.width, ne[u.variant]), n.width - 16)}px`;
+			I.value.style.minWidth = r;
+			let { offsetWidth: i, offsetHeight: a } = I.value, o = n.bottom - e.bottom - 8 - 8, s = e.top - n.top - 8 - 8, c = u.placement === "top" ? s >= a || s > o : o < a && s > o, l = (u.align === "end" ? e.right - i : e.left) - n.left;
+			R.value = !c, L.value = {
+				[c ? "bottom" : "top"]: `${c ? n.bottom - e.top + 8 : e.bottom + 8 - n.top}px`,
+				left: `${Math.max(8, Math.min(l, n.width - i - 8))}px`,
+				minWidth: r,
+				maxHeight: `${Math.max(c ? s : o, 120)}px`
 			};
 		}
-		function ie(e) {
+		function ae(e) {
 			if (B?.contains(e.target)) {
-				if (O.value) return Y();
+				if (j.value) return Y();
 				J(e.detail === 0 ? "first" : "menu");
 			}
 		}
-		function ae(e) {
+		function oe(e) {
 			if (e.key === "ArrowDown" || e.key === "ArrowUp") {
-				if (e.preventDefault(), O.value) return q(e.key === "ArrowDown" ? "first" : "last");
+				if (e.preventDefault(), j.value) return q(e.key === "ArrowDown" ? "first" : "last");
 				J(e.key === "ArrowDown" ? "first" : "last");
 			}
 		}
-		function oe(e) {
+		function se(e) {
 			let t = K(), n = t.indexOf(document.activeElement);
 			if (e.key === "ArrowDown" || e.key === "ArrowUp") {
 				e.preventDefault();
 				let t = e.key === "ArrowDown" ? 1 : -1;
 				q(n < 0 ? t > 0 ? "first" : "last" : n + t);
-			} else e.key === "Home" || e.key === "End" ? (e.preventDefault(), q(e.key === "Home" ? "first" : "last")) : e.key === "Escape" ? (e.preventDefault(), Y()) : e.key === "Tab" ? Y() : e.key === " " && n >= 0 && t[n].tagName !== "BUTTON" ? (e.preventDefault(), t[n].click()) : e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey && e.key !== " " && se(e.key, t, n);
+			} else e.key === "Home" || e.key === "End" ? (e.preventDefault(), q(e.key === "Home" ? "first" : "last")) : e.key === "Escape" ? (e.preventDefault(), Y()) : e.key === "Tab" ? Y() : e.key === " " && n >= 0 && t[n].tagName !== "BUTTON" ? (e.preventDefault(), t[n].click()) : e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey && e.key !== " " && ce(e.key, t, n);
 		}
-		function se(e, t, n) {
+		function ce(e, t, n) {
 			H += e.toLowerCase(), clearTimeout(U), U = setTimeout(() => H = "", 500);
 			let r = (e) => (e.dataset.acLabel || e.textContent || "").trim().toLowerCase(), i = H.length === 1 ? n + 1 : Math.max(n, 0);
 			[...t.slice(i), ...t.slice(0, i)].find((e) => r(e).startsWith(H))?.focus();
@@ -99,49 +100,49 @@ var ne = ["aria-label", "disabled"], re = ["aria-labelledby", "aria-label"], D =
 		function $(e) {
 			e ? (document.addEventListener("pointerdown", Z, !0), window.addEventListener("scroll", Q, !0), window.addEventListener("resize", Q)) : (document.removeEventListener("pointerdown", Z, !0), window.removeEventListener("scroll", Q, !0), window.removeEventListener("resize", Q));
 		}
-		return _("ac-dropdown", {
+		return g("ac-dropdown", {
 			close: Y,
 			focusMenu: () => I.value?.focus(),
-			variant: ee(l, "variant")
-		}), C(O, async (e) => {
-			G(), $(e), e && (await u(), X(), V === "menu" ? I.value?.focus() : q(V), V = "menu");
-		}), m(G), h(G), p(() => {
+			variant: y(u, "variant")
+		}), w(j, async (e) => {
+			G(), $(e), e && (await d(), X(), V === "menu" ? I.value?.focus() : q(V), V = "menu");
+		}), p(G), m(G), te(() => {
 			$(!1), clearTimeout(U);
-		}), (r, l) => (g(), o("div", {
+		}), (t, i) => (h(), s("div", {
 			ref_key: "root",
 			ref: F,
 			class: "inline-flex",
 			"data-ac-ds": "",
 			"data-testid": "ac-dropdown",
-			onClick: ie,
-			onKeydown: ae
-		}, [k.trigger ? y(r.$slots, "trigger", { open: O.value }, void 0, void 0, 0) : c.label ? (g(), i(e, {
+			onClick: ae,
+			onKeydown: oe
+		}, [M.trigger ? v(t.$slots, "trigger", { open: j.value }, void 0, void 0, 0) : l.label ? (h(), a(e, {
 			key: 1,
-			title: c.label,
+			title: l.label,
 			color: "white",
-			disabled: c.disabled
+			disabled: l.disabled
 		}, {
-			default: w(() => [s(b(T), {
-				class: d(["-mr-1 text-muted transition-transform duration-200", O.value && "rotate-180"]),
+			default: T(() => [c(b(E), {
+				class: f(["-mr-1 text-muted transition-transform duration-200", j.value && "rotate-180"]),
 				"aria-hidden": "true"
 			}, null, 8, ["class"])]),
 			_: 1
-		}, 8, ["title", "disabled"])) : (g(), o("button", {
+		}, 8, ["title", "disabled"])) : (h(), s("button", {
 			key: 2,
 			type: "button",
-			"aria-label": c.menuLabel,
-			disabled: c.disabled,
-			class: d(["inline-flex size-7 cursor-pointer items-center justify-center rounded-8 text-muted transition-colors duration-200 hover:bg-surface-sunken hover:text-heading 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:opacity-50", O.value && "bg-surface-sunken text-heading"])
-		}, [s(b(E), {
+			"aria-label": l.menuLabel,
+			disabled: l.disabled,
+			class: f(["inline-flex size-7 cursor-pointer items-center justify-center rounded-8 text-muted transition-colors duration-200 hover:bg-surface-sunken hover:text-heading 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:opacity-50", j.value && "bg-surface-sunken text-heading"])
+		}, [c(b(D), {
 			class: "size-4",
 			"aria-hidden": "true"
-		})], 10, ne)), (g(), i(t, { to: "body" }, [s(n, {
+		})], 10, O)), (h(), a(n, { to: "body" }, [c(r, {
 			"enter-active-class": "transition-[opacity,scale] duration-150 ease-out motion-reduce:transition-none",
 			"enter-from-class": "opacity-0 motion-safe:scale-95",
 			"leave-active-class": "transition-[opacity,scale] duration-100 ease-in motion-reduce:transition-none",
 			"leave-to-class": "opacity-0 motion-safe:scale-95"
 		}, {
-			default: w(() => [O.value ? (g(), o("div", {
+			default: T(() => [j.value ? (h(), s("div", {
 				key: 0,
 				id: P,
 				ref_key: "panel",
@@ -149,17 +150,17 @@ var ne = ["aria-label", "disabled"], re = ["aria-labelledby", "aria-label"], D =
 				role: "menu",
 				tabindex: "-1",
 				"aria-orientation": "vertical",
-				"aria-labelledby": (k.trigger || c.label) && z.value ? z.value : void 0,
-				"aria-label": k.trigger || c.label ? void 0 : c.menuLabel,
-				class: d(["ac-scrollbar fixed z-[90] flex w-max max-w-[min(320px,calc(100vw-16px))] flex-col border bg-surface shadow-lg outline-none", [M[c.variant], W.value]]),
-				style: f(L.value),
+				"aria-labelledby": (M.trigger || l.label) && z.value ? z.value : void 0,
+				"aria-label": M.trigger || l.label ? void 0 : l.menuLabel,
+				class: f(["ac-scrollbar fixed z-[90] flex w-max max-w-[min(320px,calc(100vw-16px))] flex-col border bg-surface shadow-lg outline-none", [ie[l.variant], W.value]]),
+				style: ee(L.value),
 				"data-ac-ds": "",
 				"data-testid": "ac-dropdown-menu",
-				onKeydown: oe
-			}, [y(r.$slots, "default")], 46, re)) : a("", !0)]),
+				onKeydown: se
+			}, [v(t.$slots, "default")], 46, k)) : o("", !0)]),
 			_: 3
 		})]))], 544));
 	}
 });
 //#endregion
-export { O as default };
+export { j as default };

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

@@ -1,7 +1,8 @@
 import e from "./AcButton.js";
-import { computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, inject as c, normalizeClass as l, normalizeStyle as u, onBeforeUnmount as d, onMounted as f, openBlock as p, ref as m, renderSlot as h, watch as g } from "vue";
+import { fixedFrame as t } from "./fixedFrame.js";
+import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, inject as l, normalizeClass as u, normalizeStyle as d, onBeforeUnmount as f, onMounted as p, openBlock as m, ref as h, renderSlot as g, watch as _ } from "vue";
 //#region src/lib/components/AcFormFooter.vue?vue&type=script&setup=true&lang.ts
-var _ = { class: "flex min-w-0 items-center gap-2 text-base text-muted" }, v = { class: "ml-auto flex items-center gap-3" }, y = /*@__PURE__*/ s({
+var v = { class: "flex min-w-0 items-center gap-2 text-base text-muted" }, y = { class: "ml-auto flex items-center gap-3" }, b = /*@__PURE__*/ c({
 	__name: "AcFormFooter",
 	props: {
 		submitLabel: { default: "Save" },
@@ -22,58 +23,58 @@ var _ = { class: "flex min-w-0 items-center gap-2 text-base text-muted" }, v = {
 		form: { default: "" }
 	},
 	emits: ["cancel", "save"],
-	setup(s, { emit: y }) {
-		let b = s, x = y, S = c("ac-form", null), C = m(null), w = m(null), T = m({
+	setup(c, { emit: b }) {
+		let x = c, S = b, C = l("ac-form", null), w = h(null), T = h(null), E = h({
 			left: 0,
 			width: 0,
 			height: 0
-		}), E, D = t(() => S?.widthClass.value ?? "");
-		function O(e) {
-			e.currentTarget?.form || x("save");
+		}), D, O = n(() => C?.widthClass.value ?? "");
+		function k(e) {
+			e.currentTarget?.form || S("save");
 		}
-		function k() {
-			if (!C.value || !w.value) return;
-			let e = C.value.getBoundingClientRect();
-			T.value = {
-				left: e.left,
+		function A() {
+			if (!w.value || !T.value) return;
+			let e = w.value.getBoundingClientRect();
+			E.value = {
+				left: e.left - t().left,
 				width: e.width,
-				height: w.value.offsetHeight
+				height: T.value.offsetHeight
 			};
 		}
-		function A() {
-			j(), b.sticky === "viewport" && C.value && w.value && (k(), E = new ResizeObserver(k), E.observe(C.value), E.observe(w.value), window.addEventListener("resize", k));
-		}
 		function j() {
-			E?.disconnect(), E = void 0, window.removeEventListener("resize", k);
+			M(), x.sticky === "viewport" && w.value && T.value && (A(), D = new ResizeObserver(A), D.observe(w.value), D.observe(T.value), window.addEventListener("resize", A));
 		}
-		return g(() => b.sticky, A, { flush: "post" }), f(A), d(j), (t, c) => (p(), i("div", {
+		function M() {
+			D?.disconnect(), D = void 0, window.removeEventListener("resize", A);
+		}
+		return _(() => x.sticky, j, { flush: "post" }), p(j), f(M), (t, n) => (m(), a("div", {
 			ref_key: "root",
-			ref: C,
-			class: l(["mt-4 w-full", [s.sticky === "container" && "sticky bottom-0 z-10", s.sticky !== "viewport" && D.value]]),
-			style: u(s.sticky === "viewport" ? { height: `${T.value.height}px` } : void 0),
+			ref: w,
+			class: u(["mt-4 w-full", [c.sticky === "container" && "sticky bottom-0 z-10", c.sticky !== "viewport" && O.value]]),
+			style: d(c.sticky === "viewport" ? { height: `${E.value.height}px` } : void 0),
 			"data-ac-ds": "",
 			"data-testid": "ac-form-footer"
-		}, [a("div", {
+		}, [o("div", {
 			ref_key: "bar",
-			ref: w,
-			class: l(["border-t border-border bg-surface py-4", s.sticky === "viewport" && "fixed bottom-0 z-40 px-4"]),
-			style: u(s.sticky === "viewport" ? {
-				left: `${T.value.left}px`,
-				width: `${T.value.width}px`
+			ref: T,
+			class: u(["border-t border-border bg-surface py-4", c.sticky === "viewport" && "fixed bottom-0 z-40 px-4"]),
+			style: d(c.sticky === "viewport" ? {
+				left: `${E.value.left}px`,
+				width: `${E.value.width}px`
 			} : void 0)
-		}, [a("div", { class: l(["flex w-full flex-wrap items-center justify-between gap-x-4 gap-y-2", D.value]) }, [a("div", _, [h(t.$slots, "left")]), a("div", v, [h(t.$slots, "right", {}, () => [s.hideCancel ? r("", !0) : (p(), n(e, {
+		}, [o("div", { class: u(["flex w-full flex-wrap items-center justify-between gap-x-4 gap-y-2", O.value]) }, [o("div", v, [g(t.$slots, "left")]), o("div", y, [g(t.$slots, "right", {}, () => [c.hideCancel ? i("", !0) : (m(), r(e, {
 			key: 0,
-			title: s.cancelLabel,
+			title: c.cancelLabel,
 			color: "white",
-			disabled: s.loading,
-			onClick: c[0] ||= (e) => x("cancel")
-		}, null, 8, ["title", "disabled"])), o(e, {
-			title: s.submitLabel,
+			disabled: c.loading,
+			onClick: n[0] ||= (e) => S("cancel")
+		}, null, 8, ["title", "disabled"])), s(e, {
+			title: c.submitLabel,
 			type: "submit",
-			form: s.form || void 0,
-			loading: s.loading,
-			disabled: s.disabled,
-			onClick: O
+			form: c.form || void 0,
+			loading: c.loading,
+			disabled: c.disabled,
+			onClick: k
 		}, null, 8, [
 			"title",
 			"form",
@@ -83,4 +84,4 @@ var _ = { class: "flex min-w-0 items-center gap-2 text-base text-muted" }, v = {
 	}
 });
 //#endregion
-export { y as default };
+export { b as default };

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

@@ -82,7 +82,9 @@ var w = [
 			let t = document.body, n = Number(t.dataset.acModals ?? 0) + (e ? 1 : -1);
 			if (t.dataset.acModals = String(Math.max(n, 0)), e && n === 1) {
 				let e = window.innerWidth - document.documentElement.clientWidth;
-				t.style.overflow = "hidden", e > 0 && (t.style.paddingRight = `${e}px`);
+				t.style.overflow = "hidden";
+				let n = getComputedStyle(document.documentElement).scrollbarGutter.includes("stable");
+				e > 0 && !n && (t.style.paddingRight = `${e}px`);
 			} else !e && n <= 0 && (t.style.overflow = "", t.style.paddingRight = "");
 		}
 		return b(V, async (e, t) => {