@ac-design/design-system 0.0.0-stage → 1.0.1

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

@@ -0,0 +1,485 @@
+import e from "./AcSpinner.js";
+import t from "./AcButton.js";
+import n from "./AcBadge.js";
+import r from "./AcCellValue.js";
+import { Fragment 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, nextTick as m, normalizeClass as h, normalizeStyle as ee, openBlock as g, ref as _, renderList as v, renderSlot as y, resolveDynamicComponent as te, toDisplayString as b, toRaw as ne, unref as x, useId as re, useModel as ie, useSlots as ae, vShow as oe, withCtx as se, withDirectives as ce } from "vue";
+import { Check as le, ChevronDown as ue, ChevronRight as de, CircleAlert as fe, Pencil as pe, Plus as me, Trash2 as he, X as ge } from "@lucide/vue";
+//#region src/lib/components/AcFormArray.vue?vue&type=script&setup=true&lang.ts
+var _e = ["aria-describedby"], ve = { class: "flex min-h-8 items-center justify-between gap-3" }, ye = {
+	key: 0,
+	class: "text-danger",
+	"aria-hidden": "true"
+}, be = {
+	key: 2,
+	class: "sr-only"
+}, xe = { class: "ac-scrollbar" }, Se = { class: "w-full border-separate border-spacing-0 text-base" }, Ce = { class: "sr-only" }, we = {
+	key: 0,
+	scope: "col",
+	class: "h-8 w-px border-b border-border bg-surface-muted px-3 text-right"
+}, Te = ["data-row"], Ee = {
+	key: 0,
+	class: "h-10 border-b border-border-light px-2 text-right whitespace-nowrap [tr:last-child_&]:border-b-0"
+}, De = { class: "inline-flex items-center gap-0.5" }, Oe = [
+	"aria-expanded",
+	"aria-label",
+	"onClick"
+], ke = [
+	"aria-label",
+	"disabled",
+	"onClick"
+], Ae = [
+	"aria-label",
+	"disabled",
+	"onClick"
+], je = ["aria-label"], Me = { class: "inline-flex h-9 items-center px-1 text-body" }, Ne = { class: "border-b border-border-light px-2 py-2 text-right align-top whitespace-nowrap [tr:last-child_&]:border-b-0" }, Pe = { class: "inline-flex h-9 items-center gap-0.5" }, Fe = ["aria-label", "disabled"], Ie = ["disabled"], Le = {
+	key: 0,
+	role: "alert",
+	class: "mt-1 max-w-48 text-left text-xs whitespace-normal text-red-30"
+}, Re = { key: 2 }, ze = ["colspan"], Be = ["aria-labelledby"], Ve = ["id"], He = {
+	"data-editor-fields": "",
+	class: "space-y-4"
+}, Ue = {
+	key: 0,
+	role: "alert",
+	class: "mt-3 flex items-center gap-1 text-xs text-red-30"
+}, We = { class: "mt-4 flex justify-end gap-2" }, Ge = { key: 3 }, Ke = ["colspan"], qe = {
+	class: "sr-only",
+	"aria-live": "polite"
+}, S = -1, C = "input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [role=\"combobox\"]:not([aria-disabled=\"true\"]), button:not([disabled])", w = /*@__PURE__*/ f({
+	__name: "AcFormArray",
+	props: /*@__PURE__*/ p({
+		label: {},
+		columns: {},
+		itemName: { default: "item" },
+		newItem: {
+			type: Function,
+			default: () => ({})
+		},
+		mode: { default: "form" },
+		validate: {
+			type: Function,
+			default: void 0
+		},
+		beforeSave: {
+			type: Function,
+			default: void 0
+		},
+		beforeRemove: {
+			type: Function,
+			default: void 0
+		},
+		required: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		readonly: {
+			type: Boolean,
+			default: !1
+		},
+		editable: {
+			type: Boolean,
+			default: !0
+		},
+		addDisabled: {
+			type: Boolean,
+			default: !1
+		},
+		max: { default: void 0 },
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		collapsible: {
+			type: Boolean,
+			default: !1
+		},
+		defaultCollapsed: {
+			type: Boolean,
+			default: !1
+		},
+		errorMsg: { default: "" },
+		hint: { default: "" },
+		addLabel: { default: "" },
+		formTitle: { default: "" },
+		emptyText: { default: "Nothing added yet." }
+	}, {
+		modelValue: { default: () => [] },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ p([
+		"add",
+		"update",
+		"remove"
+	], ["update:modelValue"]),
+	setup(f, { expose: p, emit: w }) {
+		let T = f, E = ie(f, "modelValue"), D = w, Je = ae(), O = re(), Ye = `${O}-label`, Xe = `${O}-body`, k = `${O}-msg`, A = _(null), j = _(T.collapsible && T.defaultCollapsed), M = _(null), N = _({}), P = _({}), F = _(""), I = _(!1), L = _(/* @__PURE__ */ new Set()), R = _(""), z = a(() => E.value ?? []), B = a(() => I.value || T.loading), Ze = a(() => M.value !== null), V = a(() => Array.isArray(T.errorMsg) ? T.errorMsg : T.errorMsg ? [T.errorMsg] : []), Qe = a(() => T.max !== void 0 && z.value.length >= T.max), $e = a(() => !T.disabled && !T.addDisabled && !Qe.value && !Ze.value && !B.value), H = a(() => T.disabled || Ze.value || B.value), U = a(() => !T.readonly || !!Je.details || !!Je["row-actions"]), et = a(() => z.value.length > 0 || M.value === S), tt = a(() => T.columns.length + +!!U.value), nt = a(() => T.addLabel || `Add ${T.itemName}`), rt = a(() => T.formTitle || `${M.value === S ? "New" : "Edit"} ${T.itemName}`), it = a(() => {
+			let e = [];
+			return z.value.forEach((t, n) => {
+				let r = M.value === n;
+				e.push({
+					kind: r && T.mode === "inline" ? "inline" : "item",
+					index: n
+				}), r && T.mode === "form" ? e.push({
+					kind: "form",
+					index: n
+				}) : !r && L.value.has(n) && e.push({
+					kind: "details",
+					index: n
+				});
+			}), M.value === S && e.push({
+				kind: T.mode === "inline" ? "inline" : "form",
+				index: S
+			}), e;
+		});
+		function W(e) {
+			return e === S ? N.value : z.value[e];
+		}
+		function G(e) {
+			let t = T.columns[0], n = t ? z.value[e]?.[t.key] : void 0;
+			return n == null || typeof n == "object" || n === "" ? `${T.itemName} ${e + 1}` : `${T.itemName} ${String(n)}`;
+		}
+		function at(e, t) {
+			let n = W(t);
+			return e.format ? e.format(n[e.key], n) : null;
+		}
+		function ot(e) {
+			try {
+				return structuredClone(ne(e));
+			} catch {
+				return JSON.parse(JSON.stringify(e));
+			}
+		}
+		function K(e, t) {
+			m(() => {
+				(A.value?.querySelector(e) ?? t?.())?.focus();
+			});
+		}
+		function st() {
+			m(() => {
+				let e = A.value?.querySelector("[data-editor]");
+				(e?.querySelector(`[data-editor-fields] :is(${C})`) ?? e?.querySelector(C))?.focus();
+			});
+		}
+		function q(e) {
+			e >= 0 && e < z.value.length ? K(`[data-row="${e}"] [data-action="edit"], [data-row="${e}"] [data-action="remove"]`, ct) : K("[data-action='add']");
+		}
+		function ct() {
+			return A.value?.querySelector("[data-action='add']");
+		}
+		function J() {
+			P.value = {}, F.value = "";
+		}
+		function Y() {
+			$e.value && (j.value = !1, J(), N.value = T.newItem(), M.value = S, st());
+		}
+		function lt(e) {
+			!H.value && T.editable && (J(), N.value = ot(z.value[e]), M.value = e, st());
+		}
+		function X() {
+			let e = M.value;
+			e === null || I.value || (M.value = null, J(), q(e));
+		}
+		async function Z() {
+			let e = M.value;
+			if (e === null || B.value) return;
+			let t = N.value, n = T.validate?.(t, e);
+			if (P.value = n && typeof n == "object" ? n : {}, F.value = typeof n == "string" ? n : "", F.value || Object.keys(P.value).length) {
+				K("[data-editor] [aria-invalid='true'], [data-editor] [aria-invalid='true'] input");
+				return;
+			}
+			I.value = !0;
+			try {
+				if (await T.beforeSave?.(t, e) === !1) return;
+			} catch (e) {
+				F.value = e instanceof Error ? e.message : String(e);
+				return;
+			} finally {
+				I.value = !1;
+			}
+			let r = [...z.value];
+			e === S ? r.push(t) : r[e] = t, E.value = r, M.value = null, J(), e === S ? (D("add", t), R.value = `${$(T.itemName)} added.`) : (D("update", t, e), R.value = `${$(T.itemName)} updated.`), q(e === S ? r.length - 1 : e);
+		}
+		async function ut(e) {
+			if (H.value) return;
+			let t = z.value[e];
+			if (T.beforeRemove) {
+				I.value = !0;
+				try {
+					if (await T.beforeRemove(t, e) === !1) return;
+				} finally {
+					I.value = !1;
+				}
+			}
+			E.value = z.value.filter((t, n) => n !== e), L.value = /* @__PURE__ */ new Set(), D("remove", t, e), R.value = `${$(T.itemName)} removed.`, q(Math.min(e, z.value.length - 1));
+		}
+		function dt(e) {
+			let t = new Set(L.value);
+			t.delete(e) || t.add(e), L.value = t;
+		}
+		function Q(e) {
+			if (e.defaultPrevented) return;
+			let t = e.target;
+			e.key === "Escape" ? (e.preventDefault(), e.stopPropagation(), X()) : e.key === "Enter" && t.tagName === "INPUT" && ![
+				"checkbox",
+				"radio",
+				"file"
+			].includes(t.type) && (e.preventDefault(), Z());
+		}
+		function $(e) {
+			return e.charAt(0).toUpperCase() + e.slice(1);
+		}
+		return p({
+			add: Y,
+			edit: lt,
+			cancel: X
+		}), (a, p) => (g(), c("div", {
+			ref_key: "root",
+			ref: A,
+			role: "group",
+			"aria-labelledby": Ye,
+			"aria-describedby": V.value.length || f.hint ? k : void 0,
+			"data-ac-ds": "",
+			"data-testid": "ac-form-array"
+		}, [
+			l("div", ve, [(g(), o(te(f.collapsible ? "button" : "div"), {
+				type: f.collapsible ? "button" : void 0,
+				class: h(["-ml-1 flex min-w-0 items-center gap-1.5 rounded-6 px-1 py-0.5 text-left", f.collapsible && "cursor-pointer transition hover:bg-surface-sunken focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring"]),
+				"aria-expanded": f.collapsible ? !j.value : void 0,
+				"aria-controls": f.collapsible ? Xe : void 0,
+				onClick: p[0] ||= (e) => f.collapsible && (j.value = !j.value)
+			}, {
+				default: se(() => [
+					f.collapsible ? (g(), o(x(de), {
+						key: 0,
+						class: h(["size-4 shrink-0 text-muted transition-transform duration-150 motion-reduce:transition-none", !j.value && "rotate-90"]),
+						"aria-hidden": "true"
+					}, null, 8, ["class"])) : s("", !0),
+					l("span", {
+						id: Ye,
+						class: "truncate text-lg font-medium text-heading"
+					}, [u(b(f.label), 1), f.required ? (g(), c("span", ye, " *")) : s("", !0)]),
+					z.value.length ? (g(), o(n, {
+						key: 1,
+						label: String(z.value.length),
+						rounded: "",
+						class: "shrink-0"
+					}, null, 8, ["label"])) : s("", !0),
+					f.required ? (g(), c("span", be, "(required)")) : s("", !0)
+				]),
+				_: 1
+			}, 8, [
+				"type",
+				"class",
+				"aria-expanded",
+				"aria-controls"
+			])), f.readonly ? s("", !0) : (g(), o(t, {
+				key: 0,
+				"data-action": "add",
+				title: nt.value,
+				size: "small",
+				color: "white",
+				disabled: !$e.value,
+				onClick: Y
+			}, {
+				icon: se(() => [d(x(me), { "aria-hidden": "true" })]),
+				_: 1
+			}, 8, ["title", "disabled"]))]),
+			V.value.length ? (g(), c("div", {
+				key: 0,
+				id: k,
+				class: "mt-1 space-y-0.5"
+			}, [(g(!0), c(i, null, v(V.value, (e) => (g(), c("p", {
+				key: e,
+				class: "flex items-center gap-1 text-xs text-red-30"
+			}, [d(x(fe), {
+				class: "size-3.5 shrink-0",
+				"aria-hidden": "true"
+			}), u(" " + b(e), 1)]))), 128))])) : f.hint ? (g(), c("p", {
+				key: 1,
+				id: k,
+				class: "mt-0.5 text-xs text-muted"
+			}, b(f.hint), 1)) : s("", !0),
+			ce(l("div", {
+				id: Xe,
+				class: "mt-2"
+			}, [et.value ? (g(), c("div", {
+				key: 0,
+				class: h(["overflow-hidden rounded-10 border bg-surface shadow-xs", V.value.length ? "border-red-60" : "border-border"])
+			}, [l("div", xe, [l("table", Se, [
+				l("caption", Ce, b(f.label), 1),
+				l("thead", null, [l("tr", null, [(g(!0), c(i, null, v(f.columns, (e) => (g(), c("th", {
+					key: e.key,
+					scope: "col",
+					class: "h-8 border-b border-border bg-surface-muted px-3 text-left text-xs font-medium whitespace-nowrap text-label",
+					style: ee(e.width ? { width: e.width } : void 0)
+				}, b(e.label), 5))), 128)), U.value ? (g(), c("th", we, [...p[1] ||= [l("span", { class: "sr-only" }, "Actions", -1)]])) : s("", !0)])]),
+				l("tbody", null, [(g(!0), c(i, null, v(it.value, (n) => (g(), c(i, { key: `${n.kind}-${n.index}` }, [n.kind === "item" ? (g(), c("tr", {
+					key: 0,
+					"data-row": n.index,
+					class: "group/row"
+				}, [(g(!0), c(i, null, v(f.columns, (e) => (g(), c("td", {
+					key: e.key,
+					class: "h-10 border-b border-border-light px-3 whitespace-nowrap text-body [tr:last-child_&]:border-b-0"
+				}, [y(a.$slots, `cell-${e.key}`, {
+					item: W(n.index),
+					index: n.index,
+					value: W(n.index)[e.key]
+				}, () => [e.format ? (g(), c(i, { key: 0 }, [u(b(at(e, n.index)), 1)], 64)) : (g(), o(r, {
+					key: 1,
+					value: W(n.index)[e.key],
+					type: e.type ?? "auto",
+					title: e.label,
+					"max-width": "220px"
+				}, null, 8, [
+					"value",
+					"type",
+					"title"
+				]))])]))), 128)), U.value ? (g(), c("td", Ee, [l("span", De, [
+					y(a.$slots, "row-actions", {
+						item: W(n.index),
+						index: n.index
+					}),
+					a.$slots.details ? (g(), c("button", {
+						key: 0,
+						type: "button",
+						class: "inline-flex size-7 cursor-pointer items-center justify-center rounded-6 text-muted transition hover:bg-surface-sunken hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
+						"aria-expanded": L.value.has(n.index),
+						"aria-label": `Details of ${G(n.index)}`,
+						onClick: (e) => dt(n.index)
+					}, [d(x(ue), {
+						class: h(["size-4 transition-transform motion-reduce:transition-none", L.value.has(n.index) && "rotate-180"]),
+						"aria-hidden": "true"
+					}, null, 8, ["class"])], 8, Oe)) : s("", !0),
+					f.editable && !f.readonly ? (g(), c("button", {
+						key: 1,
+						type: "button",
+						"data-action": "edit",
+						class: "inline-flex size-7 cursor-pointer items-center justify-center rounded-6 text-muted transition hover:bg-surface-sunken hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent",
+						"aria-label": `Edit ${G(n.index)}`,
+						disabled: H.value,
+						onClick: (e) => lt(n.index)
+					}, [d(x(pe), {
+						class: "size-3.5",
+						"aria-hidden": "true"
+					})], 8, ke)) : s("", !0),
+					f.readonly ? s("", !0) : (g(), c("button", {
+						key: 2,
+						type: "button",
+						"data-action": "remove",
+						class: "inline-flex size-7 cursor-pointer items-center justify-center rounded-6 text-muted transition hover:bg-red-95 hover:text-red-30 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-muted",
+						"aria-label": `Remove ${G(n.index)}`,
+						disabled: H.value,
+						onClick: (e) => ut(n.index)
+					}, [d(x(he), {
+						class: "size-3.5",
+						"aria-hidden": "true"
+					})], 8, Ae))
+				])])) : s("", !0)], 8, Te)) : n.kind === "inline" ? (g(), c("tr", {
+					key: 1,
+					"data-editor": "",
+					"aria-label": rt.value,
+					class: "bg-surface-muted",
+					onKeydown: Q
+				}, [(g(!0), c(i, null, v(f.columns, (e) => (g(), c("td", {
+					key: e.key,
+					"data-editor-fields": "",
+					class: "border-b border-border-light px-2 py-2 align-top [tr:last-child_&]:border-b-0"
+				}, [y(a.$slots, `field-${e.key}`, {
+					item: N.value,
+					index: n.index,
+					error: P.value[e.key] ?? "",
+					errors: P.value
+				}, () => [l("span", Me, [d(r, {
+					value: N.value[e.key],
+					type: e.type ?? "auto",
+					title: e.label,
+					"max-width": "220px"
+				}, null, 8, [
+					"value",
+					"type",
+					"title"
+				])])])]))), 128)), l("td", Ne, [l("span", Pe, [l("button", {
+					type: "button",
+					class: "inline-flex size-7 cursor-pointer items-center justify-center rounded-6 text-primary-20 transition hover:bg-primary-95 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40",
+					"aria-label": n.index === S ? `Add ${f.itemName}` : `Save ${f.itemName}`,
+					disabled: B.value || f.disabled,
+					onClick: Z
+				}, [B.value ? (g(), o(e, {
+					key: 0,
+					class: "text-primary",
+					label: ""
+				})) : (g(), o(x(le), {
+					key: 1,
+					class: "size-4",
+					"aria-hidden": "true"
+				}))], 8, Fe), l("button", {
+					type: "button",
+					class: "inline-flex size-7 cursor-pointer items-center justify-center rounded-6 text-muted transition hover:bg-surface-sunken hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40",
+					"aria-label": "Cancel",
+					disabled: I.value,
+					onClick: X
+				}, [d(x(ge), {
+					class: "size-4",
+					"aria-hidden": "true"
+				})], 8, Ie)]), F.value ? (g(), c("p", Le, b(F.value), 1)) : s("", !0)])], 40, je)) : n.kind === "form" ? (g(), c("tr", Re, [l("td", {
+					colspan: tt.value,
+					class: "border-b border-border-light bg-surface-muted p-0 [tr:last-child_&]:border-b-0"
+				}, [l("div", {
+					"data-editor": "",
+					role: "group",
+					"aria-labelledby": `${x(O)}-form-title`,
+					class: "px-4 py-4",
+					onKeydown: Q
+				}, [
+					l("p", {
+						id: `${x(O)}-form-title`,
+						class: "mb-3 text-base font-medium text-heading"
+					}, b(rt.value), 9, Ve),
+					l("div", He, [y(a.$slots, "form", {
+						item: N.value,
+						index: n.index,
+						errors: P.value,
+						isNew: n.index === S
+					})]),
+					F.value ? (g(), c("p", Ue, [d(x(fe), {
+						class: "size-3.5 shrink-0",
+						"aria-hidden": "true"
+					}), u(" " + b(F.value), 1)])) : s("", !0),
+					l("div", We, [d(t, {
+						title: "Cancel",
+						size: "small",
+						color: "white",
+						disabled: I.value,
+						onClick: X
+					}, null, 8, ["disabled"]), d(t, {
+						title: n.index === S ? `Add ${f.itemName}` : "Save",
+						size: "small",
+						loading: B.value,
+						disabled: f.disabled,
+						onClick: Z
+					}, null, 8, [
+						"title",
+						"loading",
+						"disabled"
+					])])
+				], 40, Be)], 8, ze)])) : n.kind === "details" ? (g(), c("tr", Ge, [l("td", {
+					colspan: tt.value,
+					class: "border-b border-border-light bg-surface-muted px-4 py-3 text-base text-body [tr:last-child_&]:border-b-0"
+				}, [y(a.$slots, "details", {
+					item: W(n.index),
+					index: n.index
+				})], 8, Ke)])) : s("", !0)], 64))), 128))])
+			])])], 2)) : (g(), c("div", {
+				key: 1,
+				class: h(["rounded-10 border border-dashed px-4 py-5 text-center text-base text-muted", V.value.length ? "border-red-60" : "border-border-dark"])
+			}, [y(a.$slots, "empty", {}, () => [u(b(f.emptyText), 1)])], 2))], 512), [[oe, !j.value]]),
+			l("p", qe, b(R.value), 1)
+		], 8, _e));
+	}
+});
+//#endregion
+export { w as default };

package/dist/lib/components/AcFormFooter.js

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

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

@@ -0,0 +1,48 @@
+export interface Props {
+    /** Text of the primary button. It's a `type="submit"` button, so it submits the surrounding form. */
+    submitLabel?: string;
+    /** Text of the secondary button. */
+    cancelLabel?: string;
+    /** Hides the Cancel button. */
+    hideCancel?: boolean;
+    /** Shows a spinner on the primary button and disables both buttons while a request runs. */
+    loading?: boolean;
+    /** Disables the primary button, e.g. until the form is valid. */
+    disabled?: boolean;
+    /**
+     * `container` sticks to the bottom of the nearest scrolling area (the page, a side panel, a modal body) while the form is in view.
+     * `viewport` is always pinned to the bottom of the window, lined up with the form's column. `none` sits after the fields.
+     */
+    sticky?: "container" | "viewport" | "none";
+    /** `id` of a `<form>` to submit when the footer is rendered outside it. */
+    form?: string;
+}
+type __VLS_Slots = {
+    /** Left side: a status line ("Unsaved changes"), a Reset or Delete button. */
+    left?: () => unknown;
+    /** Right side. Replaces the default Cancel and Save buttons. */
+    right?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    cancel: () => any;
+    save: () => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onSave?: (() => any) | undefined;
+}>, {
+    form: string;
+    disabled: boolean;
+    loading: boolean;
+    submitLabel: string;
+    cancelLabel: string;
+    hideCancel: boolean;
+    sticky: "container" | "viewport" | "none";
+}, {}, {}, {}, 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;
+    };
+};

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

@@ -0,0 +1,86 @@
+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";
+//#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-2" }, y = /*@__PURE__*/ s({
+	__name: "AcFormFooter",
+	props: {
+		submitLabel: { default: "Save" },
+		cancelLabel: { default: "Cancel" },
+		hideCancel: {
+			type: Boolean,
+			default: !1
+		},
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		sticky: { default: "container" },
+		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({
+			left: 0,
+			width: 0,
+			height: 0
+		}), E, D = t(() => S?.widthClass.value ?? "");
+		function O(e) {
+			e.currentTarget?.form || x("save");
+		}
+		function k() {
+			if (!C.value || !w.value) return;
+			let e = C.value.getBoundingClientRect();
+			T.value = {
+				left: e.left,
+				width: e.width,
+				height: w.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);
+		}
+		return g(() => b.sticky, A, { flush: "post" }), f(A), d(j), (t, c) => (p(), i("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),
+			"data-ac-ds": "",
+			"data-testid": "ac-form-footer"
+		}, [a("div", {
+			ref_key: "bar",
+			ref: w,
+			class: l(["border-t border-border bg-surface py-3", 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`
+			} : 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, {
+			key: 0,
+			title: s.cancelLabel,
+			color: "white",
+			disabled: s.loading,
+			onClick: c[0] ||= (e) => x("cancel")
+		}, null, 8, ["title", "disabled"])), o(e, {
+			title: s.submitLabel,
+			type: "submit",
+			form: s.form || void 0,
+			loading: s.loading,
+			disabled: s.disabled,
+			onClick: O
+		}, null, 8, [
+			"title",
+			"form",
+			"loading",
+			"disabled"
+		])])])], 2)], 6)], 6));
+	}
+});
+//#endregion
+export { y as default };

package/dist/lib/components/AcFormSection.js

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

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

@@ -0,0 +1,32 @@
+export interface Props {
+    /** Heading of the group, e.g. "Schedule" or "Retention". */
+    title?: string;
+    /** A line or two under the title explaining the group. */
+    description?: string;
+    /** `stacked` puts the title above the fields; `aside` puts it in a left column from 768px up. Defaults to the AcForm's `layout`. */
+    layout?: "stacked" | "aside";
+    /** Lays the fields out in two columns from 640px up. Use `class="sm:col-span-2"` on a field to span both. */
+    columns?: 1 | 2;
+}
+type __VLS_Slots = {
+    /** The fields. They're spaced 20px apart. */
+    default?: () => unknown;
+    /** Replaces the description, e.g. to add a docs link. */
+    description?: () => unknown;
+    /** Content at the right of the title, e.g. a "Reset to defaults" button. Only in the `stacked` layout. */
+    actions?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    title: string;
+    description: string;
+    layout: "stacked" | "aside";
+    columns: 1 | 2;
+}, {}, {}, {}, 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;
+    };
+};