ablok-components 0.3.114 → 0.3.116

package/dist/components/molecules/base-camera/base-camera.vue_vue_type_script_async_true_setup_true_lang.js

@@ -6,7 +6,7 @@ import { useCameraFilter as i } from "../../../composables/useCameraFilter.js";
 import a from "../../atoms/zoom-slider/zoom-slider.js";
 import o from "../../../assets/img/guide.js";
 import { computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createVNode as f, defineComponent as p, nextTick as ee, normalizeClass as m, normalizeStyle as h, onBeforeUnmount as te, onMounted as ne, openBlock as g, ref as _, toDisplayString as v, vShow as re, watch as ie, withCtx as ae, withDirectives as oe, withModifiers as se } from "vue";
-import ce from "lodash/debounce";
+import ce from "lodash";
 //#region src/components/molecules/base-camera/base-camera.vue?vue&type=script&async=true&setup=true&lang.ts
 var le = { class: "camera__preview" }, ue = {
 	key: 0,
@@ -60,7 +60,7 @@ var le = { class: "camera__preview" }, ue = {
 		width: 720,
 		height: 1280
 	}
-}, y = /*@__PURE__*/ p({
+}, ke = /*@__PURE__*/ p({
 	...De,
 	props: {
 		modelValue: { type: null },
@@ -140,19 +140,19 @@ var le = { class: "camera__preview" }, ue = {
 	},
 	emits: ["update:modelValue"],
 	setup(o, { expose: p, emit: De }) {
-		let y = o, ke = De, b = _(), x = _(), Ae = _(!1), S = _([]), C = _(), w = _(), T = _(), E = _(!1), D = _(!1), O = _(0), k = _(0), A = _(), j = _(y.zoom || 1), je = _(!1), M = _(!1), N = _(null), P = _(!1), F, I, Me = typeof window < "u" && "DeviceMotionEvent" in window && (window.matchMedia?.("(pointer: coarse)")?.matches || "ontouchstart" in window), Ne = s(() => y.correctOrientation && Me), L = s(() => Ae.value && (!Ne.value || P.value));
+		let { debounce: ke } = ce, y = o, Ae = De, b = _(), x = _(), je = _(!1), S = _([]), C = _(), w = _(), T = _(), E = _(!1), D = _(!1), O = _(0), k = _(0), A = _(), j = _(y.zoom || 1), Me = _(!1), M = _(!1), N = _(null), P = _(!1), F, I, Ne = typeof window < "u" && "DeviceMotionEvent" in window && (window.matchMedia?.("(pointer: coarse)")?.matches || "ontouchstart" in window), Pe = s(() => y.correctOrientation && Ne), L = s(() => je.value && (!Pe.value || P.value));
 		function R() {
 			I &&= (window.removeEventListener("pointerdown", I, !0), window.removeEventListener("touchend", I, !0), void 0);
 		}
 		function z() {
 			P.value = !0, F &&= (clearTimeout(F), void 0), R();
 		}
-		function Pe() {
+		function Fe() {
 			I || (I = () => {
 				B();
 			}, window.addEventListener("pointerdown", I, !0), window.addEventListener("touchend", I, !0));
 		}
-		function Fe(e) {
+		function Ie(e) {
 			let t = e.accelerationIncludingGravity;
 			if (!t || t.x == null || t.y == null) return;
 			let n = Math.round(Math.atan2(t.x, t.y) * 180 / Math.PI);
@@ -164,13 +164,13 @@ var le = { class: "camera__preview" }, ue = {
 			P.value || z();
 		}
 		async function B() {
-			if (!(!y.correctOrientation || je.value)) try {
+			if (!(!y.correctOrientation || Me.value)) try {
 				let e = window.DeviceOrientationEvent, t = window.DeviceMotionEvent;
 				if (e && typeof e.requestPermission == "function" && await e.requestPermission() !== "granted") {
 					z();
 					return;
 				}
-				t && typeof t.requestPermission == "function" && await t.requestPermission().catch(() => {}), window.addEventListener("devicemotion", Fe, !0), je.value = !0, R();
+				t && typeof t.requestPermission == "function" && await t.requestPermission().catch(() => {}), window.addEventListener("devicemotion", Ie, !0), Me.value = !0, R();
 			} catch (e) {
 				console.error(e, "enableMotion: failed"), z();
 			}
@@ -178,22 +178,22 @@ var le = { class: "camera__preview" }, ue = {
 		let V = s(() => ({
 			...Oe,
 			...y.resolutions
-		})), Ie = s(() => Object.values(V.value)[0]);
-		function Le(e) {
+		})), Le = s(() => Object.values(V.value)[0]);
+		function Re(e) {
 			return String(e || "").trim().toLowerCase().replace(/\s+/g, "").replace(/[:/]/g, "x");
 		}
 		let H = s(() => {
 			if (V.value[y.ratio]) return y.ratio;
-			let e = Le(y.ratio);
+			let e = Re(y.ratio);
 			if (V.value[e]) return e;
-		}), U = s(() => H.value ? V.value[H.value] : Ie.value), Re = s(() => {
+		}), U = s(() => H.value ? V.value[H.value] : Le.value), ze = s(() => {
 			let e = H.value ? V.value[H.value] : void 0;
 			return e ? `${e.width} / ${e.height}` : void 0;
-		}), W = s(() => S.value.filter((e) => e.kind === "videoinput")), ze = s(() => S.value.filter((e) => e.kind === "audioinput")), G = _([]), K = s(() => W.value.filter((e) => !G.value.includes(e.deviceId)));
-		function Be(e) {
+		}), W = s(() => S.value.filter((e) => e.kind === "videoinput")), Be = s(() => S.value.filter((e) => e.kind === "audioinput")), G = _([]), K = s(() => W.value.filter((e) => !G.value.includes(e.deviceId)));
+		function Ve(e) {
 			e && !G.value.includes(e) && (G.value = [...G.value, e]);
 		}
-		function Ve(e) {
+		function He(e) {
 			let t = W.value;
 			if (!t.length) return;
 			let n = t.findIndex((t) => t.deviceId === e);
@@ -202,10 +202,10 @@ var le = { class: "camera__preview" }, ue = {
 				if (r && !G.value.includes(r.deviceId)) return r;
 			}
 		}
-		let He = s(() => K.value.map((e, t) => ({
+		let Ue = s(() => K.value.map((e, t) => ({
 			text: e.label.slice(0, e.label.indexOf("(")) || `Camera ${t + 1}`,
 			value: e.deviceId
-		}))), Ue = s({
+		}))), We = s({
 			get() {
 				return C.value && C.value.deviceId;
 			},
@@ -218,33 +218,33 @@ var le = { class: "camera__preview" }, ue = {
 				return w.value && w.value.deviceId;
 			},
 			set(e) {
-				w.value = ze.value.find((t) => t.deviceId === e);
+				w.value = Be.value.find((t) => t.deviceId === e);
 			}
 		});
 		let q = s(() => {
 			let e = C.value && W.value.findIndex((e) => e.deviceId === C.value?.deviceId);
 			return y.enableMirrorCamera && e === 0 ? "mirror-cam" : "";
-		}), We = s(() => {
+		}), Ge = s(() => {
 			let e = C.value && S.value.findIndex((e) => e.deviceId === C.value?.deviceId);
 			return q.value ? `${q.value} mirror-device-${e}` : "";
-		}), { tintRgb: Ge, applyFilterToCanvas: Ke } = i(y);
-		function qe() {
+		}), { tintRgb: Ke, applyFilterToCanvas: qe } = i(y);
+		function Je() {
 			if (H.value && U.value) {
 				O.value = U.value.width, k.value = U.value.height;
 				return;
 			}
 			O.value = b.value.parentElement && b.value.parentElement.clientWidth, k.value = b.value.parentElement && b.value.parentElement.clientHeight;
 		}
-		let Je = ce(() => {
-			qe();
+		let Ye = ke(() => {
+			Je();
 		}, 300, {
 			trailing: !0,
 			leading: !1
 		});
-		function J(e) {
+		function Xe(e) {
 			return new Promise((t) => setTimeout(t, e));
 		}
-		async function Ye() {
+		async function Ze() {
 			let e = U.value ? {
 				width: U.value.width,
 				height: U.value.height
@@ -272,66 +272,66 @@ var le = { class: "camera__preview" }, ue = {
 			} catch (e) {
 				let t = e && e.name;
 				if (t === "NotReadableError" || t === "AbortError") {
-					await J(500);
+					await Xe(500);
 					continue;
 				}
 				break;
 			}
 		}
-		function Y() {
+		function J() {
 			b.value && b.value.srcObject && (b.value.srcObject.getTracks().forEach((e) => {
 				e.stop();
 			}), b.value.srcObject = null);
 		}
-		let X = 0, Z, Xe;
-		function Q() {
-			Z &&= (clearTimeout(Z), void 0), Xe &&= (Xe(), void 0);
+		let Y = 0, X, Qe;
+		function Z() {
+			X &&= (clearTimeout(X), void 0), Qe &&= (Qe(), void 0);
 		}
-		function Ze(e) {
-			Be(e);
-			let t = Ve(e);
+		function $e(e) {
+			Ve(e);
+			let t = He(e);
 			t && t.deviceId !== e && (C.value = t);
 		}
-		function Qe(e) {
-			Q();
+		function et(e) {
+			Z();
 			let t = C.value && C.value.deviceId, n = b.value;
 			if (!t || !n) return;
 			let r = n.srcObject && n.srcObject.getVideoTracks?.()[0];
 			if (!r || typeof r.addEventListener != "function" || n.videoWidth > 0) return;
 			let i = () => {
-				if (Q(), e !== X || !b.value) return;
-				let n = Ve(t);
-				n && n.deviceId !== t && (Y(), Ze(t));
+				if (Z(), e !== Y || !b.value) return;
+				let n = He(t);
+				n && n.deviceId !== t && (J(), $e(t));
 			}, a = () => {
-				e === X && b.value && b.value.videoWidth > 0 && Q();
+				e === Y && b.value && b.value.videoWidth > 0 && Z();
 			}, o = () => {
 				i();
 			};
-			r.addEventListener("unmute", a), r.addEventListener("ended", o), Xe = () => {
+			r.addEventListener("unmute", a), r.addEventListener("ended", o), Qe = () => {
 				r.removeEventListener("unmute", a), r.removeEventListener("ended", o);
-			}, Z = setTimeout(() => {
-				Z = void 0, !(e !== X || !b.value) && (b.value.videoWidth === 0 ? i() : Q());
+			}, X = setTimeout(() => {
+				X = void 0, !(e !== Y || !b.value) && (b.value.videoWidth === 0 ? i() : Z());
 			}, 8e3);
 		}
-		let $e = 0;
-		async function $() {
-			let e = ++X;
-			Q();
+		let tt = 0;
+		async function Q() {
+			let e = ++Y;
+			Z();
 			let t = !!(b.value && b.value.srcObject);
-			if (Y(), t && (await J(350), e !== X)) return;
-			let n = await Ye();
-			if (e !== X) {
+			if (J(), t && (await Xe(350), e !== Y)) return;
+			let n = await Ze();
+			if (e !== Y) {
 				n?.getTracks?.().forEach((e) => e.stop());
 				return;
 			}
 			if (n && b.value) {
-				$e = 0, b.value.srcObject = n, b.value.muted = !0;
+				tt = 0, b.value.srcObject = n, b.value.muted = !0;
 				try {
 					await b.value.play?.();
 				} catch {}
-				Qe(e);
+				et(e);
 			} else if (!n && C.value) {
-				$e < 2 && ($e++, await J(600), e === X && await $());
+				tt < 2 && (tt++, await Xe(600), e === Y && await Q());
 				return;
 			}
 			return S.value = await navigator.mediaDevices.enumerateDevices(), {
@@ -339,46 +339,46 @@ var le = { class: "camera__preview" }, ue = {
 				devices: S.value
 			};
 		}
-		function et() {
-			E.value ? (E.value = !1, D.value = !1, Y()) : (E.value = !0, $());
+		function nt() {
+			E.value ? (E.value = !1, D.value = !1, J()) : (E.value = !0, Q());
 		}
-		function tt() {
-			C.value = void 0, T.value = T.value === "user" ? "environment" : "user", $();
+		function rt() {
+			C.value = void 0, T.value = T.value === "user" ? "environment" : "user", Q();
 		}
-		async function nt(e, t) {
-			e && (!t || e.deviceId !== t.deviceId) && await $();
+		async function it(e, t) {
+			e && (!t || e.deviceId !== t.deviceId) && await Q();
 		}
-		ie(() => C.value, nt), ie(() => w.value, nt);
-		function rt() {
-			y.countdown ? (A.value = A.value ? A.value - 1 : y.countdown, A.value ? setTimeout(rt, 1e3) : ot()) : ot();
+		ie(() => C.value, it), ie(() => w.value, it);
+		function $() {
+			y.countdown ? (A.value = A.value ? A.value - 1 : y.countdown, A.value ? setTimeout($, 1e3) : st()) : st();
 		}
 		p({
-			onCapture: rt,
+			onCapture: $,
 			enableMotion: B,
 			camera: b.value,
 			zoom: j
 		});
-		function it() {
+		function at() {
 			if (!y.correctOrientation || N.value == null) return 0;
 			let e = ((N.value - 180) % 360 + 360) % 360;
 			return (-1 * (Math.round(e / 90) * 90 % 360) % 360 + 360) % 360;
 		}
-		function at(e, t, n, r, i) {
+		function ot(e, t, n, r, i) {
 			let a = x.value.width, o = x.value.height;
 			e.translate(a / 2, o / 2), q.value && e.scale(-1, 1), e.rotate(n * Math.PI / 180);
 			let s = o, c = a, l = Math.max(s / r, c / i) * (j.value && j.value > 0 ? j.value : 1), u = r * l, d = i * l;
 			e.drawImage(t, -u / 2, -d / 2, u, d);
 		}
-		function ot() {
+		function st() {
 			D.value = !0;
 			let e = x.value.getContext("2d"), t = b.value, n = t && t.srcObject && t.srcObject.getTracks(), { aspectRatio: r, width: i, height: a } = n.length && n[0].getSettings(), o = t?.videoWidth || i || O.value, s = t?.videoHeight || a || k.value, c = o && s ? o / s : r, l = U.value || {
 				width: o,
 				height: s
 			}, u = l?.width || o, d = H.value ? l?.height || s : Math.round(u / c), f = u / d;
 			if (x.value.width = u, x.value.height = d, !o || !s || !c) return;
-			let p = it();
+			let p = at();
 			if (e.save(), p === 90 || p === 270) {
-				at(e, t, p, o, s), e.restore(), Ke(e, x.value.width, x.value.height), st(x.value.toDataURL("image/png"));
+				ot(e, t, p, o, s), e.restore(), qe(e, x.value.width, x.value.height), ct(x.value.toDataURL("image/png"));
 				return;
 			}
 			if (p === 180 && (e.translate(x.value.width, x.value.height), e.scale(-1, -1)), q.value && (e.translate(x.value.width, 0), e.scale(-1, 1)), y.enableCropImage) {
@@ -395,11 +395,11 @@ var le = { class: "camera__preview" }, ue = {
 					q.value && (i = x.value.width - i - n), e.drawImage(t, u, d, c, l, i, a, n, r);
 				} else q.value && (i = x.value.width - i - n), e.drawImage(t, 0, 0, o, s, i, a, n, r);
 			}
-			e.restore(), Ke(e, x.value.width, x.value.height), st(x.value.toDataURL("image/png"));
+			e.restore(), qe(e, x.value.width, x.value.height), ct(x.value.toDataURL("image/png"));
 		}
-		function st(e) {
+		function ct(e) {
 			let t = n(e);
-			ke("update:modelValue", {
+			Ae("update:modelValue", {
 				name: `cam-pic-${(/* @__PURE__ */ new Date()).toISOString()}`,
 				id: `cam-pic-${(/* @__PURE__ */ new Date()).toISOString()}`,
 				blob: t,
@@ -407,19 +407,19 @@ var le = { class: "camera__preview" }, ue = {
 			});
 		}
 		return ne(async () => {
-			await $(), E.value = !0, T.value = y.defaultRearCamera ? "environment" : "user";
+			await Q(), E.value = !0, T.value = y.defaultRearCamera ? "environment" : "user";
 			let e = y.defaultRearCamera && W.value.length > 1 ? W.value[W.value.length - 1] : W.value[0];
-			if (C.value = e, y.enableAudio && (w.value = ze.value[0]), navigator.mediaDevices.addEventListener("devicechange", async (e) => {
-				await $();
-			}), window.addEventListener("resize", Je), qe(), Ne.value) {
+			if (C.value = e, y.enableAudio && (w.value = Be.value[0]), navigator.mediaDevices.addEventListener("devicechange", async (e) => {
+				await Q();
+			}), window.addEventListener("resize", Ye), Je(), Pe.value) {
 				F = setTimeout(z, 3e3);
 				let e = window.DeviceOrientationEvent;
-				e && typeof e.requestPermission == "function" ? Pe() : B();
+				e && typeof e.requestPermission == "function" ? Fe() : B();
 			}
-			await ee(), Ae.value = !0;
+			await ee(), je.value = !0;
 		}), te(() => {
-			E.value = !1, D.value = !1, Q(), Y(), window.removeEventListener("resize", Je), window.removeEventListener("devicemotion", Fe, !0), F && clearTimeout(F), R();
-		}), (n, i) => (g(), u("div", { class: m(["camera", We.value]) }, [
+			E.value = !1, D.value = !1, Z(), J(), window.removeEventListener("resize", Ye), window.removeEventListener("devicemotion", Ie, !0), F && clearTimeout(F), R();
+		}), (n, i) => (g(), u("div", { class: m(["camera", Ge.value]) }, [
 			d("div", le, [
 				L.value ? l("", !0) : (g(), u("div", ue, [f(t, { color: "#000" }, {
 					default: ae(() => [d("span", {
@@ -431,7 +431,7 @@ var le = { class: "camera__preview" }, ue = {
 				oe(d("div", {
 					class: m(["camera__video-wrapper", H.value ? `aspect-ratio--${H.value}` : ""]),
 					style: h({
-						aspectRatio: Re.value || void 0,
+						aspectRatio: ze.value || void 0,
 						transform: j.value === 1 ? void 0 : `scale(${j.value})`
 					})
 				}, [d("video", {
@@ -480,25 +480,25 @@ var le = { class: "camera__preview" }, ue = {
 			d("div", _e, [d("div", ve, [d("div", ye, [d("div", be, [d("div", xe, [d("button", {
 				type: "button",
 				class: "camera__toggle btn btn-primary",
-				onClick: et
+				onClick: nt
 			}, [E.value ? (g(), u("span", Ce, v(n.$t("common.pause")), 1)) : (g(), u("span", Se, v(n.$t("common.play")), 1))]), d("button", {
 				type: "button",
 				class: "camera__capture btn btn-primary",
-				onClick: rt
+				onClick: $
 			}, v(n.$t("camera.capture")), 1)])])])])]),
 			(o.enableSwitchCamera || o.enableSelectDevice) && K.value && K.value.length > 1 ? (g(), u("div", we, [d("div", Te, [o.enableSelectDevice ? (g(), c(r, {
 				key: 0,
-				modelValue: Ue.value,
-				"onUpdate:modelValue": i[1] ||= (e) => Ue.value = e,
-				options: He.value,
+				modelValue: We.value,
+				"onUpdate:modelValue": i[1] ||= (e) => We.value = e,
+				options: Ue.value,
 				class: "w-100"
 			}, null, 8, ["modelValue", "options"])) : l("", !0)]), d("div", Ee, [o.enableSwitchCamera ? (g(), u("button", {
 				key: 0,
 				class: "btn",
-				onClick: se(tt, ["prevent"])
+				onClick: se(rt, ["prevent"])
 			}, [f(e, { symbol: "switch-camera" })])) : l("", !0)])])) : l("", !0)
 		], 2));
 	}
 });
 //#endregion
-export { y as default };
+export { ke as default };

package/dist/components/molecules/dom-renderer/dom-renderer.vue_vue_type_script_setup_true_lang.js

@@ -1,5 +1,5 @@
 import { createElementBlock as e, defineComponent as t, normalizeClass as n, normalizeStyle as r, onBeforeUnmount as i, onMounted as a, openBlock as o, ref as s, renderSlot as c } from "vue";
-import l from "lodash/debounce";
+import l from "lodash";
 import u from "html2canvas";
 //#region src/components/molecules/dom-renderer/dom-renderer.vue?vue&type=script&setup=true&lang.ts
 var d = /*@__PURE__*/ t({
@@ -40,55 +40,55 @@ var d = /*@__PURE__*/ t({
 	},
 	emits: ["update:modelValue", "update:pending"],
 	setup(t, { emit: d }) {
-		let f = t, p = d, m = s(), h = s(""), g = s(), _ = s(!0);
-		async function v() {
-			if (!m.value || !_.value) return "";
-			let e = m.value;
+		let { debounce: f } = l, p = t, m = d, h = s(), g = s(""), _ = s(), v = s(!0);
+		async function y() {
+			if (!h.value || !v.value) return "";
+			let e = h.value;
 			if (!e.isConnected) return "";
 			try {
-				f.emitPending && p("update:pending", !0);
+				p.emitPending && m("update:pending", !0);
 				let t = e.firstElementChild;
 				if (!t) return "";
 				let n = await u(t, {
 					backgroundColor: "rgba(0, 0, 0, 0)",
 					scale: 1,
-					...f.options
+					...p.options
 				});
-				if (!_.value || !m.value || !e.isConnected) return "";
+				if (!v.value || !h.value || !e.isConnected) return "";
 				let r = n.toDataURL();
-				if (p("update:modelValue", r), f.emitPending && p("update:pending", !1), f.debug) {
+				if (m("update:modelValue", r), p.emitPending && m("update:pending", !1), p.debug) {
 					let e = new Image();
 					e.src = r, document.body.appendChild(e);
 				}
 				return r;
 			} catch (e) {
-				return _.value && f.emitPending && p("update:pending", !1), console.warn("dom-renderer: Render failed", e), "";
+				return v.value && p.emitPending && m("update:pending", !1), console.warn("dom-renderer: Render failed", e), "";
 			}
 		}
-		let y = l(async () => {
-			h.value = await v();
+		let b = f(async () => {
+			g.value = await y();
 		}, 300, {
 			trailing: !0,
 			leading: !1
 		});
 		return a(() => {
-			let e = m.value;
-			f.renderUpdates && (g.value = new MutationObserver(async (t) => {
-				!_.value || !e.isConnected || (f.emitPending && p("update:pending", !0), y());
-			}), g.value.observe(e, {
+			let e = h.value;
+			p.renderUpdates && (_.value = new MutationObserver(async (t) => {
+				!v.value || !e.isConnected || (p.emitPending && m("update:pending", !0), b());
+			}), _.value.observe(e, {
 				attributes: !0,
 				childList: !0,
 				characterData: !0,
 				subtree: !0
 			})), setTimeout(() => {
-				f.emitPending && p("update:pending", !0), y();
+				p.emitPending && m("update:pending", !0), b();
 			}, 500);
 		}), i(() => {
-			_.value = !1, g.value && g.value.disconnect(), y.cancel();
+			v.value = !1, _.value && _.value.disconnect(), b.cancel();
 		}), (i, a) => (o(), e("div", {
 			class: n(["dom-renderer", { "off-screen": !t.debug }]),
 			ref_key: "renderer",
-			ref: m,
+			ref: h,
 			style: r(t.fixedWidth > 0 ? { width: `${t.fixedWidth}px` } : {})
 		}, [c(i.$slots, "default")], 6));
 	}

package/dist/components/molecules/image-resize/image-resize.vue_vue_type_script_setup_true_lang.js

@@ -2,7 +2,7 @@ import e from "../../atoms/base-image/base-image.js";
 import { resizeImageElementToDataUrl as t } from "../../../utilities/helpers.js";
 import n from "../../atoms/base-input/base-input.js";
 import { createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, onMounted as l, openBlock as u, ref as d, renderSlot as f, toDisplayString as p, useTemplateRef as m, vModelText as h, watch as g, withDirectives as _, withModifiers as v } from "vue";
-import y from "lodash/debounce";
+import y from "lodash";
 //#region src/components/molecules/image-resize/image-resize.vue?vue&type=script&setup=true&lang.ts
 var b = {
 	key: 0,
@@ -26,55 +26,55 @@ var b = {
 	},
 	emits: ["update:modelValue"],
 	setup(c, { emit: N }) {
-		let P = N, F = m("image"), I = d(1), L = d(0), R = d(0), z = d(null), B = d(0), V = d(0);
-		function H() {
-			z.value && (P("update:modelValue", z.value), I.value = 1);
+		let { debounce: P } = y, F = N, I = m("image"), L = d(1), R = d(0), z = d(0), B = d(null), V = d(0), H = d(0);
+		function U() {
+			B.value && (F("update:modelValue", B.value), L.value = 1);
 		}
-		let U = () => {
-			if (!B.value || !V.value) return;
-			L.value = Math.round(B.value * I.value);
-			let e = V.value / B.value;
-			R.value = Math.round(L.value * e);
-			let n = F.value?.$el;
+		let W = () => {
+			if (!V.value || !H.value) return;
+			R.value = Math.round(V.value * L.value);
+			let e = H.value / V.value;
+			z.value = Math.round(R.value * e);
+			let n = I.value?.$el;
 			if (!n) return;
 			let r = n.querySelector("img");
-			r && (z.value = t(r, L.value, R.value, "image/png"));
-		}, W = y(U, 300);
-		return g(I, () => {
-			B.value && (L.value = Math.round(B.value * I.value), W());
-		}), g(L, () => {
-			if (!B.value || L.value === 0) return;
-			let e = L.value / B.value;
-			Math.abs(e - I.value) > 1e-4 && (I.value = Number(e.toFixed(4)));
-			let t = V.value / B.value;
-			R.value = Math.round(L.value * t), W();
+			r && (B.value = t(r, R.value, z.value, "image/png"));
+		}, G = P(W, 300);
+		return g(L, () => {
+			V.value && (R.value = Math.round(V.value * L.value), G());
 		}), g(R, () => {
 			if (!V.value || R.value === 0) return;
 			let e = R.value / V.value;
-			Math.abs(e - I.value) > 1e-4 && (I.value = Number(e.toFixed(4)));
-			let t = B.value / V.value;
-			L.value = Math.round(R.value * t), W();
+			Math.abs(e - L.value) > 1e-4 && (L.value = Number(e.toFixed(4)));
+			let t = H.value / V.value;
+			z.value = Math.round(R.value * t), G();
+		}), g(z, () => {
+			if (!H.value || z.value === 0) return;
+			let e = z.value / H.value;
+			Math.abs(e - L.value) > 1e-4 && (L.value = Number(e.toFixed(4)));
+			let t = V.value / H.value;
+			R.value = Math.round(z.value * t), G();
 		}), l(() => {
-			let e = F.value?.$el;
+			let e = I.value?.$el;
 			if (!e) return;
 			let t = e.querySelector("img");
 			if (!t) return;
 			let n = () => {
-				B.value = t.naturalWidth, V.value = t.naturalHeight, U();
+				V.value = t.naturalWidth, H.value = t.naturalHeight, W();
 			};
 			t.complete ? n() : t.addEventListener("load", n);
 		}), (t, l) => c.modelValue ? (u(), a("div", b, [
 			o("div", x, [o("div", S, [s(e, {
 				ref_key: "image",
-				ref: F,
+				ref: I,
 				class: "d-none",
 				src: c.modelValue,
 				animate: !1
-			}, null, 8, ["src"]), z.value ? (u(), r(e, {
+			}, null, 8, ["src"]), B.value ? (u(), r(e, {
 				key: 0,
 				ref: "targetImage",
 				class: "",
-				src: z.value,
+				src: B.value,
 				animate: !1
 			}, null, 8, ["src"])) : i("", !0)])]),
 			o("div", C, [
@@ -82,31 +82,31 @@ var b = {
 					type: "range",
 					class: "form-range",
 					id: "scaleRange",
-					"onUpdate:modelValue": l[0] ||= (e) => I.value = e,
+					"onUpdate:modelValue": l[0] ||= (e) => L.value = e,
 					min: "0",
 					max: "2",
 					step: "0.0001"
-				}, null, 512), [[h, I.value]])])]),
+				}, null, 512), [[h, L.value]])])]),
 				o("div", E, [o("div", D, [s(n, {
 					type: "number",
 					class: "form-input mb-0",
 					id: "targetWidth",
-					modelValue: L.value,
-					"onUpdate:modelValue": l[1] ||= (e) => L.value = e
+					modelValue: R.value,
+					"onUpdate:modelValue": l[1] ||= (e) => R.value = e
 				}, null, 8, ["modelValue"])])]),
 				l[3] ||= o("div", { class: "col-auto d-flex align-items-center" }, [o("output", null, "×")], -1),
 				o("div", O, [o("div", k, [s(n, {
 					type: "number",
 					class: "form-input mb-0",
 					id: "targetHeight",
-					modelValue: R.value,
-					"onUpdate:modelValue": l[2] ||= (e) => R.value = e
+					modelValue: z.value,
+					"onUpdate:modelValue": l[2] ||= (e) => z.value = e
 				}, null, 8, ["modelValue"])])])
 			]),
 			o("div", A, [o("div", j, [f(t.$slots, "actions"), o("button", {
 				class: "btn btn-sm btn-primary",
-				disabled: !z.value,
-				onClick: v(H, ["prevent", "stop"])
+				disabled: !B.value,
+				onClick: v(U, ["prevent", "stop"])
 			}, p(t.$t("common.apply")), 9, M)])])
 		])) : i("", !0);
 	}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ablok-components",
   "private": false,
-  "version": "0.3.114",
+  "version": "0.3.116",
   "type": "module",
   "dependencies": {
     "@tiptap/core": "^3.30.0",