@alfakit/vue 0.1.1 → 0.1.6

package/dist/components/actions/ActionModal.vue_vue_type_script_setup_true_lang.js

@@ -1,35 +1,35 @@
 import { useActionRunner as e, useDirection as t, usePanel as n, useT as r } from "../../context.js";
 import { cn as i } from "../../lib/utils.js";
-import { useStore as a } from "../../composables/use-store.js";
-import { colorClass as o, iconBackgroundColorClasses as s, outlineButtonColorClasses as c, solidButtonColorClasses as l } from "../../lib/colors.js";
-import u from "../../lib/Icon.js";
-import d from "../ui/Button2.js";
-import f from "../ui/Spinner.js";
-import p from "./ActionList.js";
-import { provideForm as ee } from "../form/form-context.js";
-import m from "../schema/SchemaRenderer.js";
-import { showToast as te } from "../notifications/flash-toasts.js";
-import h from "../panel/Slot.js";
-import ne from "../ui/Dialog.js";
-import re from "../ui/DialogContent.js";
-import g from "../ui/DialogDescription.js";
-import ie from "../ui/DialogHeader.js";
-import ae from "../ui/DialogTitle.js";
-import oe from "../ui/Sheet.js";
-import se from "../ui/SheetContent.js";
-import _ from "../ui/SheetDescription.js";
-import ce from "../ui/SheetHeader.js";
-import le from "../ui/SheetTitle.js";
-import ue from "../ui/DialogFooter.js";
-import de from "../ui/SheetFooter.js";
-import v from "./ActionModalPassword.js";
-import { FormStore as fe, PASSWORD_CONFIRMATION_INPUT as pe, actionFormComponent as me, actionFormParams as he, confirmModalClose as ge, guardModalUnload as _e, isModalSubmitVisible as ve, modalFooterAlignment as ye, nestedActionContext as be, scheduleAutofocus as xe, slideOverSide as Se, wizardProgressStore as Ce } from "@alfakit/core";
-import { computed as y, createBlock as b, createCommentVNode as x, createElementBlock as S, createElementVNode as C, createTextVNode as w, createVNode as T, defineComponent as E, nextTick as D, normalizeClass as O, onMounted as we, onScopeDispose as k, openBlock as A, ref as Te, toDisplayString as j, unref as M, useId as Ee, watch as N, withCtx as P, withModifiers as F } from "vue";
+import { useStore as ee } from "../../composables/use-store.js";
+import { colorClass as a, iconBackgroundColorClasses as o, outlineButtonColorClasses as s, solidButtonColorClasses as c } from "../../lib/colors.js";
+import l from "../../lib/Icon.js";
+import u from "../ui/Button2.js";
+import d from "../ui/Spinner.js";
+import f from "./ActionList.js";
+import { provideForm as te } from "../form/form-context.js";
+import p from "../schema/SchemaRenderer.js";
+import { showToast as ne } from "../notifications/flash-toasts.js";
+import m from "../panel/Slot.js";
+import re from "../ui/Dialog.js";
+import ie from "../ui/DialogContent.js";
+import h from "../ui/DialogDescription.js";
+import ae from "../ui/DialogHeader.js";
+import oe from "../ui/DialogTitle.js";
+import se from "../ui/Sheet.js";
+import ce from "../ui/SheetContent.js";
+import g from "../ui/SheetDescription.js";
+import le from "../ui/SheetHeader.js";
+import ue from "../ui/SheetTitle.js";
+import de from "../ui/DialogFooter.js";
+import fe from "../ui/SheetFooter.js";
+import _ from "./ActionModalPassword.js";
+import { FormStore as pe, PASSWORD_CONFIRMATION_INPUT as me, actionFormComponent as he, actionFormParams as ge, confirmModalClose as _e, formIdPrefix as ve, guardModalUnload as ye, isModalSubmitVisible as be, modalFooterAlignment as xe, nestedActionContext as Se, scheduleAutofocus as Ce, slideOverSide as we, wizardProgressStore as Te } from "@alfakit/core";
+import { computed as v, createBlock as y, createCommentVNode as b, createElementBlock as x, createElementVNode as S, createTextVNode as C, createVNode as w, defineComponent as T, nextTick as E, normalizeClass as D, onMounted as Ee, onScopeDispose as O, openBlock as k, ref as De, toDisplayString as A, unref as j, useId as Oe, watch as M, withCtx as N, withModifiers as P } from "vue";
 //#region src/components/actions/ActionModal.vue?vue&type=script&setup=true&lang.ts
-var De = ["data-alfakit-modal"], Oe = { class: "flex flex-col gap-1.5" }, ke = ["innerHTML"], Ae = { class: "flex-1 overflow-y-auto p-4" }, je = { class: "flex flex-col gap-6" }, Me = ["id"], Ne = ["data-alfakit-modal"], Pe = { class: "flex flex-col gap-1.5" }, Fe = ["innerHTML"], Ie = {
+var ke = ["data-alfakit-modal"], Ae = { class: "flex flex-col gap-1.5" }, je = ["innerHTML"], Me = { class: "flex-1 overflow-y-auto p-4" }, Ne = { class: "flex flex-col gap-6" }, Pe = ["id"], Fe = ["data-alfakit-modal"], Ie = { class: "flex flex-col gap-1.5" }, Le = ["innerHTML"], Re = {
 	key: 0,
 	class: "flex flex-col gap-6"
-}, Le = ["id"], Re = { class: "sr-only" }, I = /*@__PURE__*/ E({
+}, ze = ["id"], F = /*@__PURE__*/ T({
 	__name: "ActionModal",
 	props: {
 		modal: {},
@@ -38,8 +38,8 @@ var De = ["data-alfakit-modal"], Oe = { class: "flex flex-col gap-1.5" }, ke = [
 			default: !1
 		}
 	},
-	setup(E) {
-		let I = {
+	setup(T) {
+		let F = {
 			"3xs": "sm:max-w-3xs",
 			"2xs": "sm:max-w-2xs",
 			xs: "sm:max-w-xs",
@@ -66,192 +66,195 @@ var De = ["data-alfakit-modal"], Oe = { class: "flex flex-col gap-1.5" }, ke = [
 			"screen-2xl": "sm:max-w-(--breakpoint-2xl)",
 			full: "sm:max-w-[calc(100%-2rem)]",
 			screen: "sm:max-w-[calc(100%-2rem)] h-[calc(100%-2rem)]"
-		}, ze = {
+		}, Be = {
 			start: "sm:justify-start",
 			center: "sm:justify-center",
 			end: "sm:justify-end",
 			between: "sm:justify-between"
-		}, L = E, R = e(), z = n(), Be = t(), B = r(), V = L.modal.action, H = L.modal.context, U = y(() => L.modal.modal), W = U.value.form ? new fe(U.value.form, {
-			token: H.token,
-			component: me(V, H),
-			record: H.record ?? null,
-			refreshUrl: z.value.endpoints.schemaRefresh,
-			optionsUrl: z.value.endpoints.schemaOptions,
-			validateUrl: z.value.endpoints.schemaValidate,
-			onNotifications: (e) => e.forEach((e) => te(e)),
-			params: he(H)
+		}, I = T, L = e(), R = n(), Ve = t(), z = r(), B = I.modal.action, V = I.modal.context, H = v(() => I.modal.modal), U = H.value.form ? new pe(H.value.form, {
+			token: V.token,
+			component: he(B, V),
+			idPrefix: ve(he(B, V)),
+			record: V.record ?? null,
+			refreshUrl: R.value.endpoints.schemaRefresh,
+			optionsUrl: R.value.endpoints.schemaOptions,
+			validateUrl: R.value.endpoints.schemaValidate,
+			onNotifications: (e) => e.forEach((e) => ne(e)),
+			params: ge(V)
 		}) : null;
-		W && ee(W);
-		let G = W ? a(W.store) : null;
-		N(() => L.modal.errors, (e) => W?.setErrors(e), { immediate: !0 }), k(() => W?.destroy()), W && k(R.registerModalForm(V, H, W));
-		let Ve = y(() => U.value.windowAttributes?.class), He = y(() => {
-			let { class: e, ...t } = U.value.windowAttributes ?? {};
+		U && te(U);
+		let W = U ? ee(U.store) : null;
+		M(() => I.modal.errors, (e) => U?.setErrors(e), { immediate: !0 }), O(() => U?.destroy()), U && O(L.registerModalForm(B, V, U));
+		let G = v(() => H.value.windowAttributes?.class), He = v(() => {
+			let { class: e, ...t } = H.value.windowAttributes ?? {};
 			return t;
-		}), K = Ee(), Ue = (e, t) => {
+		}), K = Oe(), Ue = (e, t) => {
 			for (let [n, r] of Object.entries(t)) r != null && r !== !1 && (n === "class" ? e.classList.add(...String(r).split(/\s+/).filter(Boolean)) : e.setAttribute(n, r === !0 ? "" : String(r)));
 		}, We = () => {
-			if (L.hidden || typeof document > "u") return;
+			if (I.hidden || typeof document > "u") return;
 			let e = document.querySelector(`[data-alfakit-modal="${K}"]`)?.closest("[role=\"dialog\"]"), t = e?.previousElementSibling;
-			e && Ue(e, He.value), t?.getAttribute("data-slot")?.endsWith("-overlay") && U.value.overlayAttributes && Ue(t, U.value.overlayAttributes);
+			e && Ue(e, He.value), t?.getAttribute("data-slot")?.endsWith("-overlay") && H.value.overlayAttributes && Ue(t, H.value.overlayAttributes);
 		};
-		we(() => void D(We)), N(() => L.hidden, () => void D(We), { flush: "post" });
-		let Ge = y(() => ze[ye(U.value)]), Ke = y(() => ye(U.value) === "end" ? "sm:me-auto" : void 0), qe = y(() => Se(U.value.slideOverPosition, Be.value)), Je = W ? a(Ce(W)) : null, q = y(() => ve(U.value, Je?.value)), J = Te(""), Ye = y(() => L.modal.errors[pe]?.[0]), Xe = be(H, V), Ze = (e) => {
-			let t = W?.state.values ?? {}, n = {
-				...U.value.passwordConfirmation ? { password: J.value } : {},
+		Ee(() => void E(We)), M(() => I.hidden, () => void E(We), { flush: "post" });
+		let Ge = v(() => Be[xe(H.value)]), Ke = v(() => xe(H.value) === "end" ? "sm:me-auto" : void 0), qe = v(() => we(H.value.slideOverPosition, Ve.value)), Je = U ? ee(Te(U)) : null, q = v(() => be(H.value, Je?.value)), J = De(""), Ye = v(() => I.modal.errors[me]?.[0]), Xe = Se(V, B), Ze = (e) => {
+			U ? U.whenSettled(() => Qe(e)) : Qe(e);
+		}, Qe = (e) => {
+			let t = U?.state.values ?? {}, n = {
+				...H.value.passwordConfirmation ? { password: J.value } : {},
 				...e ? { createAnother: !0 } : {}
 			};
-			Object.keys(n).length > 0 ? R.execute(V, H, t, n) : R.execute(V, H, t);
-		}, Y = () => Ze(!1), X = () => Ze(!0);
-		N(() => U.value.form, (e, t) => {
-			e && e !== t && W?.fill(e);
-		}), N(() => L.modal.refocus, (e, t, n) => {
-			let r = U.value.form?.components;
-			e && r && n(xe(() => document.getElementById(`action-form-${V.name}`), r));
+			Object.keys(n).length > 0 ? L.execute(B, V, t, n) : L.execute(B, V, t);
+		}, Y = () => Ze(!1), $e = () => Ze(!0);
+		M(() => H.value.form, (e, t) => {
+			e && e !== t && U?.fill(e);
+		}), M(() => I.modal.refocus, (e, t, n) => {
+			let r = H.value.form?.components;
+			e && r && n(Ce(() => document.getElementById(`action-form-${B.name}`), r));
 		});
-		let Qe = () => R.cancelModal(V.name), $e = B("unsaved_changes_close", {}, "You have unsaved changes. Close anyway?"), Z = () => {
-			ge(U.value, W, $e) && Qe();
+		let et = () => L.cancelModal(B.name), X = z("unsaved_changes_close", {}, "You have unsaved changes. Close anyway?"), Z = () => {
+			_e(H.value, U, X) && et();
 		};
-		k(_e(U.value, W, $e));
-		let et = y(() => U.value.cancelColor ? o(c, U.value.cancelColor) : ""), tt = y(() => U.value.createAnotherColor ? o(c, U.value.createAnotherColor) : ""), Q = y(() => U.value.heading ?? V.label ?? B("actions", {}, "Actions")), nt = (e) => {
-			!e && !L.modal.processing && Z();
-		}, $ = y(() => !!(U.value.submitLabel || U.value.cancelLabel || U.value.extraFooterActions?.length)), rt = y(() => !!(U.value.content || W || U.value.contentFooter || U.value.passwordConfirmation));
-		return (e, t) => U.value.slideOver ? (A(), b(oe, {
+		O(ye(H.value, U, X));
+		let tt = v(() => H.value.cancelColor ? a(s, H.value.cancelColor) : ""), nt = v(() => H.value.createAnotherColor ? a(s, H.value.createAnotherColor) : ""), Q = v(() => H.value.heading ?? B.label ?? z("actions", {}, "Actions")), rt = (e) => {
+			!e && !I.modal.processing && Z();
+		}, $ = v(() => !!(H.value.submitLabel || H.value.cancelLabel || H.value.extraFooterActions?.length)), it = v(() => !!(H.value.content || U || H.value.contentFooter || H.value.passwordConfirmation));
+		return (e, t) => H.value.slideOver ? (k(), y(se, {
 			key: 0,
-			open: !L.hidden,
-			modal: !U.value.clickThrough,
-			"onUpdate:open": nt
+			open: !I.hidden,
+			modal: !H.value.clickThrough,
+			"onUpdate:open": rt
 		}, {
-			default: P(() => [T(se, {
+			default: N(() => [w(ce, {
 				side: qe.value,
-				class: O(M(i)("flex w-full flex-col gap-0 p-0", I[U.value.width] ?? "sm:max-w-md", Ve.value)),
-				"show-close-button": U.value.closeButton,
-				onInteractOutside: t[1] ||= (e) => !U.value.closeByClickingAway && e.preventDefault(),
-				onEscapeKeyDown: t[2] ||= (e) => !U.value.closeByEscaping && e.preventDefault()
+				class: D(j(i)("flex w-full flex-col gap-0 p-0", F[H.value.width] ?? "sm:max-w-md", G.value)),
+				"show-close-button": H.value.closeButton,
+				onInteractOutside: t[1] ||= (e) => !H.value.closeByClickingAway && e.preventDefault(),
+				onEscapeKeyDown: t[2] ||= (e) => !H.value.closeByEscaping && e.preventDefault()
 			}, {
-				default: P(() => [
-					C("span", {
-						"data-alfakit-modal": M(K),
+				default: N(() => [
+					S("span", {
+						"data-alfakit-modal": j(K),
 						hidden: ""
-					}, null, 8, De),
-					T(ce, { class: "border-b" }, {
-						default: P(() => [C("div", { class: O(M(i)("flex gap-4", U.value.alignment === "center" && "flex-col items-center text-center")) }, [U.value.icon ? (A(), S("div", {
+					}, null, 8, ke),
+					w(le, { class: "border-b" }, {
+						default: N(() => [S("div", { class: D(j(i)("flex gap-4", H.value.alignment === "center" && "flex-col items-center text-center")) }, [H.value.icon ? (k(), x("div", {
 							key: 0,
-							class: O(M(i)("flex size-10 shrink-0 items-center justify-center rounded-full", M(o)(M(s), U.value.iconColor, "primary")))
-						}, [T(M(u), {
-							name: U.value.icon,
+							class: D(j(i)("flex size-10 shrink-0 items-center justify-center rounded-full", j(a)(j(o), H.value.iconColor, "primary")))
+						}, [w(j(l), {
+							name: H.value.icon,
 							class: "size-5"
-						}, null, 8, ["name"])], 2)) : x("", !0), C("div", Oe, [T(le, { class: O(M(i)(!U.value.heading && "sr-only")) }, {
-							default: P(() => [w(j(Q.value), 1)]),
+						}, null, 8, ["name"])], 2)) : b("", !0), S("div", Ae, [w(ue, { class: D(j(i)(!H.value.heading && "sr-only")) }, {
+							default: N(() => [C(A(Q.value), 1)]),
 							_: 1
-						}, 8, ["class"]), U.value.description ? (A(), b(_, { key: 0 }, {
-							default: P(() => [C("span", { innerHTML: U.value.description }, null, 8, ke)]),
+						}, 8, ["class"]), H.value.description ? (k(), y(g, { key: 0 }, {
+							default: N(() => [S("span", { innerHTML: H.value.description }, null, 8, je)]),
 							_: 1
-						})) : (A(), b(_, {
+						})) : (k(), y(g, {
 							key: 1,
 							class: "sr-only"
 						}, {
-							default: P(() => [w(j(Q.value), 1)]),
+							default: N(() => [C(A(Q.value), 1)]),
 							_: 1
 						}))])], 2)]),
 						_: 1
 					}),
-					C("div", Ae, [C("div", je, [
-						U.value.content ? (A(), b(m, {
+					S("div", Me, [S("div", Ne, [
+						H.value.content ? (k(), y(p, {
 							key: 0,
-							components: U.value.content
-						}, null, 8, ["components"])) : x("", !0),
-						M(W) && M(G) ? (A(), b(h, {
+							components: H.value.content
+						}, null, 8, ["components"])) : b("", !0),
+						j(U) && j(W) ? (k(), y(m, {
 							key: 1,
 							name: "modal.schema.before",
-							data: { action: M(V).name }
-						}, null, 8, ["data"])) : x("", !0),
-						M(W) && M(G) ? (A(), S("form", {
+							data: { action: j(B).name }
+						}, null, 8, ["data"])) : b("", !0),
+						j(U) && j(W) ? (k(), x("form", {
 							key: 2,
-							id: `action-form-${M(V).name}`,
-							onSubmit: F(Y, ["prevent"])
-						}, [T(m, {
-							components: M(G).components,
-							columns: M(G).columns
-						}, null, 8, ["components", "columns"])], 40, Me)) : x("", !0),
-						M(W) && M(G) ? (A(), b(h, {
+							id: `action-form-${j(B).name}`,
+							onSubmit: P(Y, ["prevent"])
+						}, [w(p, {
+							components: j(W).components,
+							columns: j(W).columns
+						}, null, 8, ["components", "columns"])], 40, Pe)) : b("", !0),
+						j(U) && j(W) ? (k(), y(m, {
 							key: 3,
 							name: "modal.schema.after",
-							data: { action: M(V).name }
-						}, null, 8, ["data"])) : x("", !0),
-						U.value.contentFooter ? (A(), b(m, {
+							data: { action: j(B).name }
+						}, null, 8, ["data"])) : b("", !0),
+						H.value.contentFooter ? (k(), y(p, {
 							key: 4,
-							components: U.value.contentFooter
-						}, null, 8, ["components"])) : x("", !0),
-						U.value.passwordConfirmation ? (A(), b(v, {
+							components: H.value.contentFooter
+						}, null, 8, ["components"])) : b("", !0),
+						H.value.passwordConfirmation ? (k(), y(_, {
 							key: 5,
 							modelValue: J.value,
 							"onUpdate:modelValue": t[0] ||= (e) => J.value = e,
 							error: Ye.value,
 							onSubmit: Y
-						}, null, 8, ["modelValue", "error"])) : x("", !0)
+						}, null, 8, ["modelValue", "error"])) : b("", !0)
 					])]),
-					$.value ? (A(), b(de, {
+					$.value ? (k(), y(fe, {
 						key: 0,
-						class: O(M(i)("border-t", U.value.stickyFooter && "bg-background sticky bottom-0"))
+						class: D(j(i)("border-t", H.value.stickyFooter && "bg-background sticky bottom-0"))
 					}, {
-						default: P(() => [C("div", { class: O(M(i)("flex w-full flex-col-reverse gap-2 sm:flex-row sm:items-center", Ge.value)) }, [
-							U.value.extraFooterActions ? (A(), b(p, {
+						default: N(() => [S("div", { class: D(j(i)("flex w-full flex-col-reverse gap-2 sm:flex-row sm:items-center", Ge.value)) }, [
+							H.value.extraFooterActions ? (k(), y(f, {
 								key: 0,
-								actions: U.value.extraFooterActions,
-								context: M(Xe),
-								class: O(Ke.value)
+								actions: H.value.extraFooterActions,
+								context: j(Xe),
+								class: D(Ke.value)
 							}, null, 8, [
 								"actions",
 								"context",
 								"class"
-							])) : x("", !0),
-							U.value.cancelLabel ? (A(), b(d, {
+							])) : b("", !0),
+							H.value.cancelLabel ? (k(), y(u, {
 								key: 1,
 								type: "button",
 								variant: "outline",
-								class: O(et.value),
-								disabled: L.modal.processing,
+								class: D(tt.value),
+								disabled: I.modal.processing,
 								onClick: Z
 							}, {
-								default: P(() => [w(j(U.value.cancelLabel), 1)]),
+								default: N(() => [C(A(H.value.cancelLabel), 1)]),
 								_: 1
-							}, 8, ["class", "disabled"])) : x("", !0),
-							U.value.createAnotherLabel && U.value.submitLabel && q.value ? (A(), b(d, {
+							}, 8, ["class", "disabled"])) : b("", !0),
+							H.value.createAnotherLabel && H.value.submitLabel && q.value ? (k(), y(u, {
 								key: 2,
 								type: "button",
 								variant: "outline",
 								"data-slot": "create-another",
-								class: O(tt.value),
-								disabled: L.modal.processing,
-								onClick: X
+								class: D(nt.value),
+								disabled: I.modal.processing,
+								onClick: $e
 							}, {
-								default: P(() => [U.value.createAnotherIcon ? (A(), b(M(u), {
+								default: N(() => [H.value.createAnotherIcon ? (k(), y(j(l), {
 									key: 0,
-									name: U.value.createAnotherIcon
-								}, null, 8, ["name"])) : x("", !0), w(j(U.value.createAnotherLabel), 1)]),
+									name: H.value.createAnotherIcon
+								}, null, 8, ["name"])) : b("", !0), C(A(H.value.createAnotherLabel), 1)]),
 								_: 1
-							}, 8, ["class", "disabled"])) : x("", !0),
-							U.value.submitLabel && q.value ? (A(), b(d, {
+							}, 8, ["class", "disabled"])) : b("", !0),
+							H.value.submitLabel && q.value ? (k(), y(u, {
 								key: 3,
 								type: "button",
-								class: O(M(o)(M(l), U.value.submitColor, "primary")),
-								disabled: L.modal.processing,
-								autofocus: U.value.autofocus && !M(W),
+								class: D(j(a)(j(c), H.value.submitColor, "primary")),
+								disabled: I.modal.processing,
+								autofocus: H.value.autofocus && !j(U),
 								onClick: Y
 							}, {
-								default: P(() => [L.modal.processing ? (A(), b(f, { key: 0 })) : U.value.submitIcon ? (A(), b(M(u), {
+								default: N(() => [I.modal.processing ? (k(), y(d, { key: 0 })) : H.value.submitIcon ? (k(), y(j(l), {
 									key: 1,
-									name: U.value.submitIcon
-								}, null, 8, ["name"])) : x("", !0), w(" " + j(U.value.submitLabel), 1)]),
+									name: H.value.submitIcon
+								}, null, 8, ["name"])) : b("", !0), C(" " + A(H.value.submitLabel), 1)]),
 								_: 1
 							}, 8, [
 								"class",
 								"disabled",
 								"autofocus"
-							])) : x("", !0)
+							])) : b("", !0)
 						], 2)]),
 						_: 1
-					}, 8, ["class"])) : x("", !0)
+					}, 8, ["class"])) : b("", !0)
 				]),
 				_: 1
 			}, 8, [
@@ -260,143 +263,142 @@ var De = ["data-alfakit-modal"], Oe = { class: "flex flex-col gap-1.5" }, ke = [
 				"show-close-button"
 			])]),
 			_: 1
-		}, 8, ["open", "modal"])) : (A(), b(ne, {
+		}, 8, ["open", "modal"])) : (k(), y(re, {
 			key: 1,
-			open: !L.hidden,
-			modal: !U.value.clickThrough,
-			"onUpdate:open": nt
+			open: !I.hidden,
+			modal: !H.value.clickThrough,
+			"onUpdate:open": rt
 		}, {
-			default: P(() => [T(re, {
-				class: O(M(i)("max-h-[calc(100vh-2rem)] overflow-y-auto", I[U.value.width] ?? "sm:max-w-lg", Ve.value)),
-				"show-close-button": U.value.closeButton,
-				onInteractOutside: t[4] ||= (e) => !U.value.closeByClickingAway && e.preventDefault(),
-				onEscapeKeyDown: t[5] ||= (e) => !U.value.closeByEscaping && e.preventDefault()
+			default: N(() => [w(ie, {
+				class: D(j(i)("max-h-[calc(100vh-2rem)] overflow-y-auto", F[H.value.width] ?? "sm:max-w-lg", G.value)),
+				"show-close-button": H.value.closeButton,
+				onInteractOutside: t[4] ||= (e) => !H.value.closeByClickingAway && e.preventDefault(),
+				onEscapeKeyDown: t[5] ||= (e) => !H.value.closeByEscaping && e.preventDefault()
 			}, {
-				default: P(() => [
-					C("span", {
-						"data-alfakit-modal": M(K),
+				default: N(() => [
+					S("span", {
+						"data-alfakit-modal": j(K),
 						hidden: ""
-					}, null, 8, Ne),
-					T(ie, { class: O(M(i)(U.value.stickyHeader && "bg-background sticky -top-6 z-10 -mx-6 -mt-6 rounded-t-lg border-b px-6 pt-6 pb-4")) }, {
-						default: P(() => [C("div", { class: O(M(i)("flex gap-4", U.value.alignment === "center" && "flex-col items-center text-center")) }, [U.value.icon ? (A(), S("div", {
+					}, null, 8, Fe),
+					w(ae, { class: D(j(i)(H.value.stickyHeader && "bg-background sticky -top-6 z-10 -mx-6 -mt-6 rounded-t-lg border-b px-6 pt-6 pb-4")) }, {
+						default: N(() => [S("div", { class: D(j(i)("flex gap-4", H.value.alignment === "center" && "flex-col items-center text-center")) }, [H.value.icon ? (k(), x("div", {
 							key: 0,
-							class: O(M(i)("flex size-10 shrink-0 items-center justify-center rounded-full", M(o)(M(s), U.value.iconColor, "primary")))
-						}, [T(M(u), {
-							name: U.value.icon,
+							class: D(j(i)("flex size-10 shrink-0 items-center justify-center rounded-full", j(a)(j(o), H.value.iconColor, "primary")))
+						}, [w(j(l), {
+							name: H.value.icon,
 							class: "size-5"
-						}, null, 8, ["name"])], 2)) : x("", !0), C("div", Pe, [T(ae, { class: O(M(i)(!U.value.heading && "sr-only")) }, {
-							default: P(() => [w(j(Q.value), 1)]),
+						}, null, 8, ["name"])], 2)) : b("", !0), S("div", Ie, [w(oe, { class: D(j(i)(!H.value.heading && "sr-only")) }, {
+							default: N(() => [C(A(Q.value), 1)]),
 							_: 1
-						}, 8, ["class"]), U.value.description ? (A(), b(g, { key: 0 }, {
-							default: P(() => [C("span", { innerHTML: U.value.description }, null, 8, Fe)]),
+						}, 8, ["class"]), H.value.description ? (k(), y(h, { key: 0 }, {
+							default: N(() => [S("span", { innerHTML: H.value.description }, null, 8, Le)]),
 							_: 1
-						})) : (A(), b(g, {
+						})) : (k(), y(h, {
 							key: 1,
 							class: "sr-only"
 						}, {
-							default: P(() => [w(j(Q.value), 1)]),
+							default: N(() => [C(A(Q.value), 1)]),
 							_: 1
 						}))])], 2)]),
 						_: 1
 					}, 8, ["class"]),
-					rt.value ? (A(), S("div", Ie, [
-						U.value.content ? (A(), b(m, {
+					it.value ? (k(), x("div", Re, [
+						H.value.content ? (k(), y(p, {
 							key: 0,
-							components: U.value.content
-						}, null, 8, ["components"])) : x("", !0),
-						M(W) && M(G) ? (A(), b(h, {
+							components: H.value.content
+						}, null, 8, ["components"])) : b("", !0),
+						j(U) && j(W) ? (k(), y(m, {
 							key: 1,
 							name: "modal.schema.before",
-							data: { action: M(V).name }
-						}, null, 8, ["data"])) : x("", !0),
-						M(W) && M(G) ? (A(), S("form", {
+							data: { action: j(B).name }
+						}, null, 8, ["data"])) : b("", !0),
+						j(U) && j(W) ? (k(), x("form", {
 							key: 2,
-							id: `action-form-${M(V).name}`,
-							onSubmit: F(Y, ["prevent"])
-						}, [T(m, {
-							components: M(G).components,
-							columns: M(G).columns
-						}, null, 8, ["components", "columns"])], 40, Le)) : x("", !0),
-						M(W) && M(G) ? (A(), b(h, {
+							id: `action-form-${j(B).name}`,
+							onSubmit: P(Y, ["prevent"])
+						}, [w(p, {
+							components: j(W).components,
+							columns: j(W).columns
+						}, null, 8, ["components", "columns"])], 40, ze)) : b("", !0),
+						j(U) && j(W) ? (k(), y(m, {
 							key: 3,
 							name: "modal.schema.after",
-							data: { action: M(V).name }
-						}, null, 8, ["data"])) : x("", !0),
-						U.value.contentFooter ? (A(), b(m, {
+							data: { action: j(B).name }
+						}, null, 8, ["data"])) : b("", !0),
+						H.value.contentFooter ? (k(), y(p, {
 							key: 4,
-							components: U.value.contentFooter
-						}, null, 8, ["components"])) : x("", !0),
-						U.value.passwordConfirmation ? (A(), b(v, {
+							components: H.value.contentFooter
+						}, null, 8, ["components"])) : b("", !0),
+						H.value.passwordConfirmation ? (k(), y(_, {
 							key: 5,
 							modelValue: J.value,
 							"onUpdate:modelValue": t[3] ||= (e) => J.value = e,
 							error: Ye.value,
 							onSubmit: Y
-						}, null, 8, ["modelValue", "error"])) : x("", !0)
-					])) : x("", !0),
-					$.value ? (A(), b(ue, {
+						}, null, 8, ["modelValue", "error"])) : b("", !0)
+					])) : b("", !0),
+					$.value ? (k(), y(de, {
 						key: 1,
-						class: O(M(i)(U.value.stickyFooter && "bg-background sticky bottom-0 -mx-6 -mb-6 rounded-b-lg border-t px-6 py-4"))
+						class: D(j(i)(H.value.stickyFooter && "bg-background sticky bottom-0 -mx-6 -mb-6 rounded-b-lg border-t px-6 py-4"))
 					}, {
-						default: P(() => [C("div", { class: O(M(i)("flex w-full flex-col-reverse gap-2 sm:flex-row sm:items-center", Ge.value)) }, [
-							U.value.extraFooterActions ? (A(), b(p, {
+						default: N(() => [S("div", { class: D(j(i)("flex w-full flex-col-reverse gap-2 sm:flex-row sm:items-center", Ge.value)) }, [
+							H.value.extraFooterActions ? (k(), y(f, {
 								key: 0,
-								actions: U.value.extraFooterActions,
-								context: M(Xe),
-								class: O(Ke.value)
+								actions: H.value.extraFooterActions,
+								context: j(Xe),
+								class: D(Ke.value)
 							}, null, 8, [
 								"actions",
 								"context",
 								"class"
-							])) : x("", !0),
-							U.value.cancelLabel ? (A(), b(d, {
+							])) : b("", !0),
+							H.value.cancelLabel ? (k(), y(u, {
 								key: 1,
 								type: "button",
 								variant: "outline",
-								class: O(et.value),
-								disabled: L.modal.processing,
+								class: D(tt.value),
+								disabled: I.modal.processing,
 								onClick: Z
 							}, {
-								default: P(() => [w(j(U.value.cancelLabel), 1)]),
+								default: N(() => [C(A(H.value.cancelLabel), 1)]),
 								_: 1
-							}, 8, ["class", "disabled"])) : x("", !0),
-							U.value.createAnotherLabel && U.value.submitLabel && q.value ? (A(), b(d, {
+							}, 8, ["class", "disabled"])) : b("", !0),
+							H.value.createAnotherLabel && H.value.submitLabel && q.value ? (k(), y(u, {
 								key: 2,
 								type: "button",
 								variant: "outline",
 								"data-slot": "create-another",
-								class: O(tt.value),
-								disabled: L.modal.processing,
-								onClick: X
+								class: D(nt.value),
+								disabled: I.modal.processing,
+								onClick: $e
 							}, {
-								default: P(() => [U.value.createAnotherIcon ? (A(), b(M(u), {
+								default: N(() => [H.value.createAnotherIcon ? (k(), y(j(l), {
 									key: 0,
-									name: U.value.createAnotherIcon
-								}, null, 8, ["name"])) : x("", !0), w(j(U.value.createAnotherLabel), 1)]),
+									name: H.value.createAnotherIcon
+								}, null, 8, ["name"])) : b("", !0), C(A(H.value.createAnotherLabel), 1)]),
 								_: 1
-							}, 8, ["class", "disabled"])) : x("", !0),
-							U.value.submitLabel && q.value ? (A(), b(d, {
+							}, 8, ["class", "disabled"])) : b("", !0),
+							H.value.submitLabel && q.value ? (k(), y(u, {
 								key: 3,
 								type: "button",
-								class: O(M(o)(M(l), U.value.submitColor, "primary")),
-								disabled: L.modal.processing,
-								autofocus: U.value.autofocus && !M(W),
+								class: D(j(a)(j(c), H.value.submitColor, "primary")),
+								disabled: I.modal.processing,
+								autofocus: H.value.autofocus && !j(U),
 								onClick: Y
 							}, {
-								default: P(() => [L.modal.processing ? (A(), b(f, { key: 0 })) : U.value.submitIcon ? (A(), b(M(u), {
+								default: N(() => [I.modal.processing ? (k(), y(d, { key: 0 })) : H.value.submitIcon ? (k(), y(j(l), {
 									key: 1,
-									name: U.value.submitIcon
-								}, null, 8, ["name"])) : x("", !0), w(" " + j(U.value.submitLabel), 1)]),
+									name: H.value.submitIcon
+								}, null, 8, ["name"])) : b("", !0), C(" " + A(H.value.submitLabel), 1)]),
 								_: 1
 							}, 8, [
 								"class",
 								"disabled",
 								"autofocus"
-							])) : x("", !0)
+							])) : b("", !0)
 						], 2)]),
 						_: 1
-					}, 8, ["class"])) : x("", !0),
-					C("span", Re, j(M(B)("close", {}, "Close")), 1)
+					}, 8, ["class"])) : b("", !0)
 				]),
 				_: 1
 			}, 8, ["class", "show-close-button"])]),
@@ -405,6 +407,6 @@ var De = ["data-alfakit-modal"], Oe = { class: "flex flex-col gap-1.5" }, ke = [
 	}
 });
 //#endregion
-export { I as default };
+export { F as default };
 
 //# sourceMappingURL=ActionModal.vue_vue_type_script_setup_true_lang.js.map