@wikicasa-dev/components 2.9.0-alpha.1 → 2.9.0-alpha.2

package/dist/UIKit/Autocomplete/ClearableAutocomplete.d.ts

@@ -47,6 +47,7 @@ declare const __VLS_export: <TID extends string | number | undefined, TPayload>(
     } ? P : {});
     expose: (exposed: import('vue').ShallowUnwrapRef<{
         getRootElement: () => HTMLDivElement | null | undefined;
+        clearSuggestions: () => void;
         select: () => void;
         focus: () => void;
     }>) => void;

package/dist/UIKit/Autocomplete/ClearableAutocomplete.vue.js

@@ -1,20 +1,19 @@
 import e from "../BaseSelect/SelectItem.js";
 import t from "../BaseDropDown.js";
-import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, defineComponent as l, isMemoSame as ee, mergeModels as u, normalizeClass as d, normalizeStyle as f, onMounted as te, onUnmounted as ne, openBlock as p, renderList as re, renderSlot as m, shallowRef as h, toDisplayString as ie, unref as ae, useId as oe, useModel as g, useTemplateRef as _, vModelText as v, vShow as se, watch as y, withCtx as b, withDirectives as x, withModifiers as ce } from "vue";
+import { afterPaint as n } from "../frameUtils.js";
+import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, defineComponent as u, isMemoSame as ee, mergeModels as d, normalizeClass as f, normalizeStyle as te, onMounted as ne, onUnmounted as re, openBlock as p, renderList as ie, renderSlot as m, shallowRef as h, toDisplayString as ae, unref as oe, useId as g, useModel as _, useTemplateRef as v, vModelText as se, vShow as ce, watch as y, withCtx as b, withDirectives as x, withModifiers as le } from "vue";
 import '../../assets/ClearableAutocomplete.css';//#region lib/UIKit/Autocomplete/ClearableAutocomplete.vue?vue&type=script&setup=true&lang.ts
-var le = [
+var ue = [
 	"id",
 	"data-cy",
 	"placeholder"
-], ue = ["data-cy"], de = {
+], de = ["data-cy"], fe = {
 	key: 1,
 	name: "loading-state",
 	class: "uikit-progress-bar-track uikit-absolute uikit-left-0 uikit-top-0 uikit-w-full"
-}, fe = ["innerHTML"], S = (e) => {
-	typeof requestAnimationFrame == "function" && requestAnimationFrame(() => setTimeout(e, 0));
-}, C = /*@__PURE__*/ l({
+}, pe = ["innerHTML"], S = /*@__PURE__*/ u({
 	__name: "ClearableAutocomplete",
-	props: /*@__PURE__*/ u({
+	props: /*@__PURE__*/ d({
 		dataCy: {},
 		placeholder: {},
 		enableKeyboardController: {
@@ -45,7 +44,7 @@ var le = [
 		inputValue: { default: "" },
 		inputValueModifiers: {}
 	}),
-	emits: /*@__PURE__*/ u([
+	emits: /*@__PURE__*/ d([
 		"input",
 		"click",
 		"inputClick",
@@ -55,49 +54,49 @@ var le = [
 		"update:modelValue",
 		"update:inputValue"
 	]),
-	setup(l, { expose: u, emit: C }) {
-		let w = g(l, "open"), T = g(l, "modelValue"), E = g(l, "inputValue"), D = C, pe = oe(), O = _("inputRef"), k = h(0), A = h(!1), j = h(!1), M = h(!1), N = h(-1), P = h(-1), F = h([]), I = r(() => ["uikit-z-30", l.dropdownClasses]), L = null, R = 0, z = _("dropdownRef"), B = _("hiddenSpan"), V = _("inputWrapperRef"), H = _("clearButtonRef"), U = () => {
-			N.value = -1, P.value = -1;
-		}, W = () => {
-			L &&= (clearTimeout(L), null), R += 1, j.value = !1, M.value = !1;
-		}, G = !1, K = () => {
-			G = !1, F.value = [];
-		}, q = () => {
-			G && K();
-		}, me = (e) => {
-			W(), q();
-			let t = R;
-			j.value = !0, L = setTimeout(async () => {
-				L = null, w.value = !0, M.value = !0;
+	setup(u, { expose: d, emit: S }) {
+		let C = _(u, "open"), w = _(u, "modelValue"), T = _(u, "inputValue"), E = S, me = g(), D = v("inputRef"), O = h(0), k = h(!1), A = h(!1), j = h(!1), M = h(-1), N = h(-1), P = h([]), he = i(() => ["uikit-z-30", u.dropdownClasses]), F = null, I = 0, L = v("dropdownRef"), R = v("hiddenSpan"), z = v("inputWrapperRef"), B = v("clearButtonRef"), V = () => {
+			M.value = -1, N.value = -1;
+		}, H = () => {
+			F &&= (clearTimeout(F), null), I += 1, A.value = !1, j.value = !1;
+		}, U = !1, W = () => {
+			U = !1, P.value = [];
+		}, G = () => {
+			U && W();
+		}, ge = (e) => {
+			H(), G();
+			let t = I;
+			A.value = !0, F = setTimeout(async () => {
+				F = null, C.value = !0, j.value = !0;
 				let n = [];
 				try {
-					n = await l.onInputChangeCb(e);
+					n = await u.onInputChangeCb(e);
 				} catch {
 					n = [];
 				}
-				t === R && (F.value = n, U(), j.value = !1, M.value = !1, w.value = !!F.value.length);
+				t === I && (P.value = n, V(), A.value = !1, j.value = !1, C.value = !!P.value.length);
 			}, 300);
-		}, J = () => {
-			W(), K(), w.value = !1, E.value = "", T.value = null, A.value = !1, k.value = 0, U();
-		}, Y = () => {
-			J();
-		}, he = (e) => {
+		}, K = () => {
+			H(), W(), C.value = !1, T.value = "", w.value = null, k.value = !1, O.value = 0, V();
+		}, q = () => {
+			K();
+		}, _e = (e) => {
 			if (!e) {
-				J();
+				K();
 				return;
 			}
-			if (l.disableCb && e === T.value?.label) {
-				W(), q();
+			if (u.disableCb && e === w.value?.label) {
+				H(), G();
 				return;
 			}
-			me(e);
-		}, ge = (e) => {
-			D("input", e), A.value = !1, k.value = 0, !e.isComposing && he(e.target.value);
-		}, X = (e = -1, t) => {
-			let n = F.value[e];
-			!n || n.id === T.value?.id || (P.value = e, l.onOptionSelectedCb?.(n, { trigger: t }), E.value = n.label, w.value = !1, T.value = n, A.value = !0, W(), G = !0, S(q));
-		}, Z = (e) => {
-			if (!l.enableKeyboardController || !w.value || ![
+			ge(e);
+		}, ve = (e) => {
+			E("input", e), k.value = !1, O.value = 0, !e.isComposing && _e(e.target.value);
+		}, J = (e = -1, t) => {
+			let r = P.value[e];
+			!r || r.id === w.value?.id || (N.value = e, u.onOptionSelectedCb?.(r, { trigger: t }), T.value = r.label, C.value = !1, w.value = r, k.value = !0, H(), U = !0, n(G));
+		}, Y = (e) => {
+			if (!u.enableKeyboardController || !C.value || ![
 				"ArrowUp",
 				"ArrowDown",
 				"Enter",
@@ -108,11 +107,11 @@ var le = [
 				"End"
 			].includes(e.key)) return;
 			if (e.key === "Escape") {
-				N.value = P.value, w.value = !1, e.stopPropagation();
+				M.value = N.value, C.value = !1, e.stopPropagation();
 				return;
 			}
-			if (!F.value.length) return;
-			let t = F.value.length - 1;
+			if (!P.value.length) return;
+			let t = P.value.length - 1;
 			if ([
 				"ArrowUp",
 				"ArrowDown",
@@ -120,136 +119,147 @@ var le = [
 				"Home",
 				"PageDown",
 				"End"
-			].includes(e.key) && e.preventDefault(), e.key === "ArrowUp") N.value = N.value <= 0 ? t : N.value - 1;
-			else if (e.key === "ArrowDown") N.value = N.value >= t ? 0 : N.value + 1;
+			].includes(e.key) && e.preventDefault(), e.key === "ArrowUp") M.value = M.value <= 0 ? t : M.value - 1;
+			else if (e.key === "ArrowDown") M.value = M.value >= t ? 0 : M.value + 1;
 			else if (e.key === "Enter") {
-				if (N.value === -1) return;
-				e.preventDefault(), X(N.value, "enter");
-			} else e.key === "PageUp" || e.key === "Home" ? N.value = 0 : (e.key === "PageDown" || e.key === "End") && (N.value = t);
+				if (M.value === -1) return;
+				e.preventDefault(), J(M.value, "enter");
+			} else e.key === "PageUp" || e.key === "Home" ? M.value = 0 : (e.key === "PageDown" || e.key === "End") && (M.value = t);
 			e.stopPropagation();
-		}, _e = (e) => {
-			D("keydown", e), Z(e);
-		}, ve = () => {
-			O.value?.select();
-		}, ye = () => {
-			O.value?.focus();
-		}, Q = null, $ = () => {
-			if (!A.value) return;
-			let e = B.value, t = V.value, n = H.value;
+		}, ye = (e) => {
+			E("keydown", e), Y(e);
+		}, be = () => {
+			H(), W(), V(), C.value = !1;
+		}, xe = () => {
+			D.value?.select();
+		}, Se = () => {
+			D.value?.focus();
+		}, X = null, Z = () => {
+			if (!k.value) return;
+			let e = R.value, t = z.value, n = B.value;
 			if (!e || !t) return;
 			let r = e.offsetWidth, i = t.offsetWidth;
 			if (!i) return;
-			let a = l.clearButton?.offset || 0, o = l.clearButton?.width || n?.offsetWidth || 0, s = i - a - o, c = Math.min(r, s);
-			c !== k.value && (k.value = c);
+			let a = u.clearButton?.offset || 0, o = u.clearButton?.width || n?.offsetWidth || 0, s = i - a - o, c = Math.min(r, s);
+			c !== O.value && (O.value = c);
+		}, Q = !1, $ = () => {
+			Q || (Q = !0, n(() => {
+				Q = !1, Z();
+			}));
 		};
-		return te(() => {
-			V.value && (Q = new ResizeObserver(() => {
+		return ne(() => {
+			z.value && (X = new ResizeObserver(() => {
+				if (O.value) {
+					Z();
+					return;
+				}
 				$();
-			}), Q.observe(V.value));
-		}), ne(() => {
-			Q?.disconnect(), W();
+			}), X.observe(z.value));
+		}), re(() => {
+			X?.disconnect(), H();
 		}), y([
-			E,
-			A,
-			B,
-			H
+			T,
+			k,
+			R,
+			B
 		], () => {
-			S($);
-		}), y(T, (e) => {
-			if (e?.label === E.value) return;
+			$();
+		}), y(w, (e) => {
+			if (e?.label === T.value) return;
 			let t = e?.label || "";
-			E.value = t, t && (A.value = !0);
-		}, { immediate: !0 }), u({
-			getRootElement: () => z.value?.getRootElement(),
-			select: ve,
-			focus: ye
-		}), (r, u) => (p(), i(t, {
+			T.value = t, t && (k.value = !0);
+		}, { immediate: !0 }), d({
+			getRootElement: () => L.value?.getRootElement(),
+			clearSuggestions: be,
+			select: xe,
+			focus: Se
+		}), (n, i) => (p(), a(t, {
 			ref: "dropdownRef",
 			class: "uikit-clearable-autocomplete",
-			"data-cy": l.dataCy,
+			"data-cy": u.dataCy,
 			"dropdown-element": "ul",
-			"dropdown-classes": I.value,
-			"keep-state": l.keepState === "closed" ? "closed" : "opened",
+			"dropdown-classes": he.value,
+			"keep-state": u.keepState === "closed" ? "closed" : "opened",
 			"activate-keyboard-controller": !1,
-			open: w.value,
-			"onUpdate:open": u[5] ||= (e) => w.value = e
+			open: C.value,
+			"onUpdate:open": i[5] ||= (e) => C.value = e
 		}, {
-			btn_slot: b(() => [s("div", {
-				class: d(["uikit-text-16", l.triggerWrapperClasses]),
-				onClick: u[2] ||= (e) => D("click", e)
+			btn_slot: b(() => [c("div", {
+				class: f(["uikit-text-16", u.triggerWrapperClasses]),
+				onClick: i[2] ||= (e) => E("click", e)
 			}, [
-				m(r.$slots, "left-icon"),
-				s("div", {
+				m(n.$slots, "left-icon"),
+				c("div", {
 					ref: "inputWrapperRef",
-					class: d(["uikit-relative", l.inputWrapperClasses])
+					class: f(["uikit-relative", u.inputWrapperClasses])
 				}, [
-					x(s("input", {
+					x(c("input", {
 						ref: "inputRef",
-						"onUpdate:modelValue": u[0] ||= (e) => E.value = e,
-						id: ae(pe),
-						"data-cy": l.dataCy ? `ac_input_${l.dataCy}` : "",
+						"onUpdate:modelValue": i[0] ||= (e) => T.value = e,
+						id: oe(me),
+						"data-cy": u.dataCy ? `ac_input_${u.dataCy}` : "",
 						type: "text",
 						autocomplete: "off",
-						class: d(["uikit-w-full uikit-border-none focus-visible:uikit-outline-none", l.inputClasses]),
+						class: f(["uikit-w-full uikit-border-none focus-visible:uikit-outline-none", u.inputClasses]),
 						style: {
 							font: "inherit",
 							fontSize: "inherit"
 						},
-						placeholder: l.placeholder,
-						onKeydown: _e,
-						onInput: ge,
-						onClick: u[1] ||= (e) => {
-							D("inputClick", e), O.value?.select();
+						placeholder: u.placeholder,
+						onKeydown: ye,
+						onInput: ve,
+						onClick: i[1] ||= (e) => {
+							E("inputClick", e), D.value?.select();
 						}
-					}, null, 42, le), [[v, E.value]]),
-					s("span", {
+					}, null, 42, ue), [[se, T.value]]),
+					c("span", {
 						ref_key: "hiddenSpan",
-						ref: B,
-						class: d(["uikit-invisible uikit-absolute uikit-left-0 uikit-top-0 uikit-max-w-full uikit-overflow-hidden uikit-whitespace-pre", l.hiddenTextClasses]),
+						ref: R,
+						class: f(["uikit-invisible uikit-absolute uikit-left-0 uikit-top-0 uikit-max-w-full uikit-overflow-hidden uikit-whitespace-pre", u.hiddenTextClasses]),
 						style: {
 							font: "inherit",
 							fontSize: "inherit"
 						}
-					}, ie(E.value), 3),
-					x(s("button", {
+					}, ae(T.value), 3),
+					x(c("button", {
 						ref: "clearButtonRef",
 						type: "button",
-						class: d(["uikit-clear-btn uikit-absolute uikit-top-1/2 -uikit-translate-y-1/2 uikit-appearance-none", l.clearButton?.classes]),
-						"data-cy": l.clearButton?.dataCy || "clear-btn",
+						class: f(["uikit-clear-btn uikit-absolute uikit-top-1/2 -uikit-translate-y-1/2 uikit-appearance-none", u.clearButton?.classes]),
+						"data-cy": u.clearButton?.dataCy || "clear-btn",
 						"aria-label": "Clear input",
-						style: f({
-							left: `${k.value + (l.clearButton?.offset || 0)}px`,
-							width: l.clearButton?.width ? `${l.clearButton.width}px` : "auto",
-							height: l.clearButton?.height ? `${l.clearButton.height}px` : "auto"
+						style: te({
+							left: `${O.value + (u.clearButton?.offset || 0)}px`,
+							width: u.clearButton?.width ? `${u.clearButton.width}px` : "auto",
+							height: u.clearButton?.height ? `${u.clearButton.height}px` : "auto"
 						}),
-						onClick: ce(Y, ["stop"])
-					}, [m(r.$slots, "clear-icon", {}, () => [u[6] ||= c("X", -1)])], 14, ue), [[se, A.value && k.value]])
+						onClick: le(q, ["stop"])
+					}, [m(n.$slots, "clear-icon", {}, () => [i[6] ||= l("X", -1)])], 14, de), [[ce, k.value && O.value]])
 				], 2),
-				m(r.$slots, "right-icon")
+				m(n.$slots, "right-icon")
 			], 2)]),
 			default: b(() => [
-				M.value && !F.value.length ? m(r.$slots, "loading-state", {}, void 0, void 0, 0) : a("", !0),
-				j.value && F.value.length ? (p(), o("div", de, [...u[7] ||= [s("div", { class: "uikit-progress-bar-fill" }, null, -1)]])) : a("", !0),
-				F.value.length ? (p(!0), o(n, { key: 2 }, re(F.value, (t, n, a, o) => {
-					let c = [
+				j.value && !P.value.length ? m(n.$slots, "loading-state", {}, void 0, void 0, 0) : o("", !0),
+				A.value && P.value.length ? (p(), s("div", fe, [...i[7] ||= [c("div", { class: "uikit-progress-bar-fill" }, null, -1)]])) : o("", !0),
+				P.value.length ? (p(!0), s(r, { key: 2 }, ie(P.value, (t, r, i, o) => {
+					let s = [
 						t,
-						N.value === n,
-						l.enableKeyboardController
+						M.value === r,
+						u.enableKeyboardController
 					];
-					if (o && o.el && o.key === n && ee(o, c)) return o;
-					let u = (p(), i(e, {
-						key: n,
-						active: N.value === n,
-						"focus-on-active": l.enableKeyboardController,
+					if (o && o.el && o.key === r && ee(o, s)) return o;
+					let l = (p(), a(e, {
+						key: r,
+						active: M.value === r,
+						"focus-on-active": u.enableKeyboardController,
 						class: "uikit-m-1 uikit-rounded-[5px] uikit-px-5 uikit-py-10px hover:uikit-cursor-pointer",
-						onClick: (e) => X(n, "click"),
-						onKeydown: Z,
-						onMouseover: (e) => N.value = n
+						onClick: (e) => J(r, "click"),
+						onKeydown: Y,
+						onMouseover: (e) => M.value = r
 					}, {
-						default: b(() => [m(r.$slots, "option-content", {
+						default: b(() => [m(n.$slots, "option-content", {
 							option: t,
-							idx: n
-						}, () => [s("span", { innerHTML: t.label }, null, 8, fe)])]),
+							idx: r
+						}, () => [c("span", { innerHTML: t.label }, null, 8, pe)])]),
 						_: 2
 					}, 1032, [
 						"active",
@@ -257,8 +267,8 @@ var le = [
 						"onClick",
 						"onMouseover"
 					]));
-					return u.memo = c, u;
-				}, u, 3), 128)) : a("", !0)
+					return l.memo = s, l;
+				}, i, 3), 128)) : o("", !0)
 			]),
 			_: 3
 		}, 8, [
@@ -270,4 +280,4 @@ var le = [
 	}
 });
 //#endregion
-export { C as default };
+export { S as default };

package/dist/UIKit/BaseModal.vue.js

@@ -1,13 +1,14 @@
-import { Teleport as e, Transition as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, mergeModels as c, normalizeClass as l, onUnmounted as u, openBlock as d, renderSlot as f, shallowRef as p, unref as m, useModel as h, useTemplateRef as g, vShow as _, withCtx as v, withDirectives as y, withModifiers as b } from "vue";
-import { CloseIcon as x } from "@wikicasa-dev/svg-icons";
+import { afterPaint as e } from "./frameUtils.js";
+import { Teleport as t, Transition 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, onUnmounted as d, openBlock as f, renderSlot as p, shallowRef as m, unref as h, useModel as g, useTemplateRef as _, vShow as v, withCtx as y, withDirectives as b, withModifiers as x } from "vue";
+import { CloseIcon as S } from "@wikicasa-dev/svg-icons";
 import '../assets/baseModal.css';//#region lib/UIKit/BaseModal.vue?vue&type=script&setup=true&lang.ts
-var S = [
+var C = [
 	"id",
 	"data-cy",
 	"data-state"
-], C = ["innerHTML"], w = /*@__PURE__*/ s({
+], w = ["innerHTML"], T = /*@__PURE__*/ c({
 	__name: "BaseModal",
-	props: /*@__PURE__*/ c({
+	props: /*@__PURE__*/ l({
 		id: { default: "base-bt-modal" },
 		size: { default: "modal-md" },
 		customBackdropClasses: {},
@@ -44,118 +45,120 @@ var S = [
 		},
 		showModalModifiers: {}
 	}),
-	emits: /*@__PURE__*/ c([
+	emits: /*@__PURE__*/ l([
 		"closed",
 		"opened",
 		"dialogClick"
 	], ["update:showModal"]),
-	setup(s, { emit: c }) {
-		let w = c, T = h(s, "showModal"), E = T.value, D = g("backdrop"), O = g("modalDialog"), k = p(!1), A = p(!1), j = ({ key: e }) => {
-			e === "Escape" && R();
-		}, M = () => {
-			document?.body.addEventListener("keydown", j);
+	setup(c, { emit: l }) {
+		let T = l, E = g(c, "showModal"), D = E.value, O = _("backdrop"), k = _("modalDialog"), A = m(!1), j = m(!1), M = ({ key: e }) => {
+			e === "Escape" && z();
 		}, N = () => {
-			document?.body.removeEventListener("keydown", j);
+			document?.body.addEventListener("keydown", M);
 		}, P = () => {
-			A.value ||= (M(), document?.body.classList.add("sm:uikit-pr-15px", "sm:uikit-mr-0", "uikit-overflow-hidden"), !0);
+			document?.body.removeEventListener("keydown", M);
 		}, F = () => {
-			w("opened"), s.autoClose !== void 0 && setTimeout(() => {
-				R();
-			}, s.autoClose);
+			j.value ||= (N(), document?.body.classList.add("sm:uikit-pr-15px", "sm:uikit-mr-0", "uikit-overflow-hidden"), !0);
 		}, I = () => {
-			document?.body.classList.remove("sm:uikit-pr-15px", "sm:uikit-mr-0", "uikit-overflow-hidden");
+			T("opened"), c.autoClose !== void 0 && setTimeout(() => {
+				z();
+			}, c.autoClose);
 		}, L = () => {
-			N(), A.value = !1, w("closed");
+			e(() => {
+				E.value || document?.body.classList.remove("sm:uikit-pr-15px", "sm:uikit-mr-0", "uikit-overflow-hidden");
+			});
 		}, R = () => {
-			T.value = !1;
-		}, z = (e) => {
-			O.value && O.value.contains(e.target) && (k.value = !0);
+			P(), j.value = !1, T("closed");
+		}, z = () => {
+			E.value = !1;
 		}, B = (e) => {
-			O.value && O.value.contains(e.target) && (k.value = !1);
-		}, V = async (e) => {
-			if (!(e.target !== D.value && D.value?.contains(e.target)) && s.closeOnClickOut) {
-				if (k.value) {
-					k.value = !1;
+			k.value && k.value.contains(e.target) && (A.value = !0);
+		}, V = (e) => {
+			k.value && k.value.contains(e.target) && (A.value = !1);
+		}, H = async (e) => {
+			if (!(e.target !== O.value && O.value?.contains(e.target)) && c.closeOnClickOut) {
+				if (A.value) {
+					A.value = !1;
 					return;
 				}
-				R();
+				z();
 			}
 		};
-		u(() => {
-			N(), document?.body.classList.remove("sm:uikit-pr-15px", "sm:uikit-mr-0", "uikit-overflow-hidden");
+		d(() => {
+			P(), document?.body.classList.remove("sm:uikit-pr-15px", "sm:uikit-mr-0", "uikit-overflow-hidden");
 		});
-		let H = (e) => {
-			O.value === e.target && e.stopPropagation();
+		let U = (e) => {
+			k.value === e.target && e.stopPropagation();
 		};
-		return (c, u) => (d(), n(e, { to: "body" }, [o(t, {
-			appear: m(E),
+		return (e, l) => (f(), r(t, { to: "body" }, [s(n, {
+			appear: h(D),
 			name: "modal-transition",
 			duration: {
 				enter: 250,
 				leave: 250
 			},
-			onBeforeEnter: P,
-			onAfterEnter: F,
-			onLeave: I,
-			onAfterLeave: L
+			onBeforeEnter: F,
+			onAfterEnter: I,
+			onLeave: L,
+			onAfterLeave: R
 		}, {
-			default: v(() => [y(a("div", {
+			default: y(() => [b(o("div", {
 				ref: "backdrop",
-				class: l(["bbt-backdrop uikit-fixed uikit-left-0 uikit-top-0 uikit-z-50 uikit-h-full uikit-w-full", [
-					s.customBackdropClasses,
-					{ "uikit-bg-w-secondary/70": T.value },
-					{ "uikit-bg-transparent": !T.value },
-					{ "sm:uikit-pt-[30px]": !s.centered }
+				class: u(["bbt-backdrop uikit-fixed uikit-left-0 uikit-top-0 uikit-z-50 uikit-h-full uikit-w-full", [
+					c.customBackdropClasses,
+					{ "uikit-bg-w-secondary/70": E.value },
+					{ "uikit-bg-transparent": !E.value },
+					{ "sm:uikit-pt-[30px]": !c.centered }
 				]]),
-				onClick: V,
-				onMousedown: z,
-				onMouseup: B
-			}, [a("dialog", {
-				id: s.id,
+				onClick: H,
+				onMousedown: B,
+				onMouseup: V
+			}, [o("dialog", {
+				id: c.id,
 				ref: "modalDialog",
-				"data-cy": s.dataCy,
-				class: l(["uikit-modal-dialog uikit-mx-auto uikit-block uikit-w-full uikit-overflow-y-auto uikit-overflow-x-hidden uikit-rounded uikit-border-none uikit-bg-transparent uikit-bg-white uikit-p-0 uikit-shadow-lg uikit-no-scrollbar uikit-safe-bottom max-sm:uikit-fixed max-sm:uikit-bottom-0 max-sm:uikit-max-h-[95%] max-sm:uikit-rounded-bl-none max-sm:uikit-rounded-br-none sm:uikit-h-auto", [
-					s.customModalDialogClasses,
-					{ "centered sm:uikit-absolute sm:uikit-top-1/2 sm:-uikit-translate-y-1/2": s.centered },
-					{ "uikit-static": !s.centered },
-					`base-${s.size}`,
-					s.fullHeight ? "uikit-h-[95%]" : "uikit-h-auto"
+				"data-cy": c.dataCy,
+				class: u(["uikit-modal-dialog uikit-mx-auto uikit-block uikit-w-full uikit-overflow-y-auto uikit-overflow-x-hidden uikit-rounded uikit-border-none uikit-bg-transparent uikit-bg-white uikit-p-0 uikit-shadow-lg uikit-no-scrollbar uikit-safe-bottom max-sm:uikit-fixed max-sm:uikit-bottom-0 max-sm:uikit-max-h-[95%] max-sm:uikit-rounded-bl-none max-sm:uikit-rounded-br-none sm:uikit-h-auto", [
+					c.customModalDialogClasses,
+					{ "centered sm:uikit-absolute sm:uikit-top-1/2 sm:-uikit-translate-y-1/2": c.centered },
+					{ "uikit-static": !c.centered },
+					`base-${c.size}`,
+					c.fullHeight ? "uikit-h-[95%]" : "uikit-h-auto"
 				]]),
 				tabindex: "-1",
-				"data-state": T.value ? "open" : "closed",
-				onClick: u[1] ||= (e) => w("dialogClick", e),
-				onFocusin: H
+				"data-state": E.value ? "open" : "closed",
+				onClick: l[1] ||= (e) => T("dialogClick", e),
+				onFocusin: U
 			}, [
-				a("div", { class: l(["default-header uikit-sticky uikit-top-0 uikit-z-10 uikit-rounded-t uikit-border-0 uikit-bg-white uikit-px-4 uikit-pb-10px uikit-pt-20px sm:uikit-px-6", [s.customModalHeaderClasses]]) }, [s.withCloseIcon ? (d(), i("button", {
+				o("div", { class: u(["default-header uikit-sticky uikit-top-0 uikit-z-10 uikit-rounded-t uikit-border-0 uikit-bg-white uikit-px-4 uikit-pb-10px uikit-pt-20px sm:uikit-px-6", [c.customModalHeaderClasses]]) }, [c.withCloseIcon ? (f(), a("button", {
 					key: 0,
 					id: "close-icon-btn",
 					"data-cy": "bbt-default-close-icon-btn",
-					class: l(["uikit-absolute uikit-right-15px uikit-top-15px uikit-z-10 uikit-bg-transparent uikit-p-5px", s.closeIconBtnClasses]),
+					class: u(["uikit-absolute uikit-right-15px uikit-top-15px uikit-z-10 uikit-bg-transparent uikit-p-5px", c.closeIconBtnClasses]),
 					type: "button",
 					"aria-label": "Close",
-					onClick: u[0] ||= b((e) => T.value = !1, ["prevent", "stop"])
-				}, [o(m(x), {
-					class: l(["bbt-close-icon uikit-box-border", s.closeIcon?.classes]),
-					width: s.closeIcon?.size || 20,
-					height: s.closeIcon?.size || 20
+					onClick: l[0] ||= x((e) => E.value = !1, ["prevent", "stop"])
+				}, [s(h(S), {
+					class: u(["bbt-close-icon uikit-box-border", c.closeIcon?.classes]),
+					width: c.closeIcon?.size || 20,
+					height: c.closeIcon?.size || 20
 				}, null, 8, [
 					"class",
 					"width",
 					"height"
-				])], 2)) : r("", !0), f(c.$slots, "header", { closeModal: R }, () => [a("span", {
-					class: l(["uikit-w-auto uikit-text-18 uikit-font-semibold sm:uikit-text-22", s.titleClasses]),
-					innerHTML: s.headerTitle
-				}, null, 10, C)])], 2),
-				a("div", { class: l(["uikit-bbt-body uikit-flex-auto uikit-overflow-y-auto uikit-overflow-x-hidden uikit-px-4 uikit-pb-0 uikit-no-scrollbar sm:uikit-px-6 sm:uikit-pb-25px", [s.customModalBodyClasses]]) }, [f(c.$slots, "body", { closeModal: R })], 2),
-				c.$slots.footer ? (d(), i("div", {
+				])], 2)) : i("", !0), p(e.$slots, "header", { closeModal: z }, () => [o("span", {
+					class: u(["uikit-w-auto uikit-text-18 uikit-font-semibold sm:uikit-text-22", c.titleClasses]),
+					innerHTML: c.headerTitle
+				}, null, 10, w)])], 2),
+				o("div", { class: u(["uikit-bbt-body uikit-flex-auto uikit-overflow-y-auto uikit-overflow-x-hidden uikit-px-4 uikit-pb-0 uikit-no-scrollbar sm:uikit-px-6 sm:uikit-pb-25px", [c.customModalBodyClasses]]) }, [p(e.$slots, "body", { closeModal: z })], 2),
+				e.$slots.footer ? (f(), a("div", {
 					key: 0,
-					class: l(["uikit-bbt-footer uikit-sticky uikit-bottom-0 uikit-border-0 uikit-bg-white uikit-px-4 uikit-py-15px sm:uikit-px-6", s.customModalFooterClasses])
-				}, [f(c.$slots, "footer", { closeModal: R })], 2)) : r("", !0),
-				f(c.$slots, "fixed-bottom")
-			], 42, S)], 34), [[_, T.value]])]),
+					class: u(["uikit-bbt-footer uikit-sticky uikit-bottom-0 uikit-border-0 uikit-bg-white uikit-px-4 uikit-py-15px sm:uikit-px-6", c.customModalFooterClasses])
+				}, [p(e.$slots, "footer", { closeModal: z })], 2)) : i("", !0),
+				p(e.$slots, "fixed-bottom")
+			], 42, C)], 34), [[v, E.value]])]),
 			_: 3
 		}, 8, ["appear"])]));
 	}
 });
 //#endregion
-export { w as default };
+export { T as default };

package/dist/UIKit/frameUtils.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Runs a callback once the browser has painted the next frame:
+ * `requestAnimationFrame` fires *before* that paint, the nested task after it.
+ *
+ * Used for work an interaction triggers that the user cannot perceive in the
+ * paint they are waiting on. Two rules come with it:
+ *
+ * - It no-ops without `requestAnimationFrame`, and rAF does not fire in a hidden
+ *   document at all - so nothing that must survive an unload belongs here.
+ * - It defers the *work*, not the reason for it: a caller whose state may have
+ *   changed again by the time the frame arrives has to re-check it inside the
+ *   callback.
+ */
+export declare const afterPaint: (cb: () => void) => void;

package/dist/UIKit/frameUtils.js

@@ -0,0 +1,6 @@
+//#region lib/UIKit/frameUtils.ts
+var e = (e) => {
+	typeof requestAnimationFrame == "function" && requestAnimationFrame(() => setTimeout(e, 0));
+};
+//#endregion
+export { e as afterPaint };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wikicasa-dev/components",
-  "version": "2.9.0-alpha.1",
+  "version": "2.9.0-alpha.2",
   "description": "Wikicasa frontend components",
   "type": "module",
   "main": "./dist/index.js",
@@ -83,13 +83,13 @@
     "vue": "^3.5.41",
     "vue-router": "^5.1.0",
     "vue-tsc": "^3.3.3",
-    "@wikicasa-dev/eslint-config": "0.0.0",
     "@wikicasa-dev/tsconfig": "0.0.0",
+    "@wikicasa-dev/types": "2.8.0",
+    "@wikicasa-dev/eslint-config": "0.0.0",
+    "@wikicasa-dev/vue-composables": "0.2.0",
     "@wikicasa-dev/svg-icons": "1.3.7",
     "@wikicasa-dev/tailwind-plugins": "0.0.7",
-    "@wikicasa-dev/types": "2.8.0",
-    "@wikicasa-dev/utilities": "1.2.11",
-    "@wikicasa-dev/vue-composables": "0.2.0"
+    "@wikicasa-dev/utilities": "1.2.11"
   },
   "readme": "ERROR: No README data found!",
   "scripts": {