ablok-components 0.3.133 → 0.3.134

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

@@ -2,6 +2,6 @@ import e from "../../../_virtual/_plugin-vue_export-helper.js";
 import t from "./base-camera.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                            */
 //#region src/components/molecules/base-camera/base-camera.vue
-var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-3ebd93f1"]]);
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-6eb2389c"]]);
 //#endregion
 export { n as default };

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

@@ -3,50 +3,50 @@ import t from "../input-dropdown/input-dropdown.js";
 import { captureFrame as n, exportCanvas as r } from "../../../utilities/camera/capture.js";
 import { useCamera as i } from "../../../composables/useCamera.js";
 import a from "../camera-preview/camera-preview.js";
-import o from "../../atoms/zoom-slider/zoom-slider.js";
-import s from "../../../assets/img/guide.js";
-import { Transition as ee, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createVNode as p, defineComponent as m, normalizeStyle as te, onMounted as ne, onScopeDispose as re, openBlock as h, ref as g, toDisplayString as _, unref as v, watch as y, withCtx as b } from "vue";
+import ee from "../../atoms/zoom-slider/zoom-slider.js";
+import o from "../../../assets/img/guide.js";
+import { Transition as te, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createVNode as f, defineComponent as p, normalizeStyle as ne, onMounted as m, onScopeDispose as re, openBlock as h, ref as g, toDisplayString as _, unref as v, watch as y, withCtx as b } from "vue";
 //#region src/components/molecules/base-camera/base-camera.vue?vue&type=script&setup=true&lang.ts
-var x = {
+var ie = {
 	class: "base-camera position-relative w-100 user-select-none",
 	"data-bs-theme": "dark"
-}, ie = ["src"], ae = { class: "position-absolute top-0 start-0 end-0 d-flex justify-content-between align-items-start p-2 gap-2" }, oe = { key: 1 }, se = ["disabled"], ce = {
+}, ae = ["src"], oe = { class: "position-absolute top-0 start-0 end-0 d-flex justify-content-between align-items-start p-2 gap-2" }, se = { key: 1 }, ce = ["disabled"], le = {
 	key: 1,
 	class: "position-absolute top-0 start-0 w-100 h-100 d-flex flex-column align-items-center justify-content-center text-center p-3 bg-black bg-opacity-50"
-}, le = {
+}, ue = {
 	key: 0,
 	class: "spinner-border text-light",
 	role: "status"
-}, ue = {
+}, de = {
 	key: 1,
 	class: "alert alert-danger py-2 px-3 mb-0 small"
-}, S = { class: "mb-2" }, C = { class: "position-absolute bottom-0 start-0 end-0 p-3 d-flex flex-column gap-2 align-items-center" }, w = {
+}, fe = { class: "mb-2" }, pe = { class: "position-absolute bottom-0 start-0 end-0 p-3 d-flex flex-column gap-2 align-items-center" }, me = {
 	key: 0,
 	class: "d-flex align-items-center justify-content-center gap-4 w-100"
-}, T = ["disabled", "aria-label"], E = {
+}, he = ["disabled", "aria-label"], ge = {
 	key: 0,
 	viewBox: "0 0 24 24",
 	width: "22",
 	height: "22",
 	fill: "currentColor",
 	"aria-hidden": "true"
-}, de = {
+}, _e = {
 	key: 1,
 	viewBox: "0 0 24 24",
 	width: "22",
 	height: "22",
 	fill: "currentColor",
 	"aria-hidden": "true"
-}, fe = ["disabled"], pe = ["aria-label"], me = {
+}, ve = ["disabled"], ye = ["aria-label"], be = {
 	key: 2,
 	class: "base-camera__countdown-overlay",
 	role: "status",
 	"aria-live": "polite",
 	"aria-atomic": "true"
-}, he = ["data-countdown"], ge = {
+}, x = ["data-countdown"], S = {
 	key: 0,
 	class: "base-camera__zoom"
-}, D = /*@__PURE__*/ m({
+}, C = /*@__PURE__*/ p({
 	__name: "base-camera",
 	props: {
 		modelValue: { type: null },
@@ -154,7 +154,7 @@ var x = {
 		},
 		guideSrc: {
 			type: String,
-			default: s
+			default: o
 		},
 		enableControls: {
 			type: Boolean,
@@ -180,207 +180,224 @@ var x = {
 		"error",
 		"state"
 	],
-	setup(s, { expose: m, emit: D }) {
-		let O = s, k = D, A = g(null), j = c(() => A.value?.videoEl ?? null), M = c(() => O.resolutions[O.ratio] ?? {
+	setup(o, { expose: p, emit: C }) {
+		let w = o, T = C, E = g(null), D = s(() => E.value?.videoEl ?? null), O = s(() => w.resolutions[w.ratio] ?? {
 			width: 720,
 			height: 960
-		}), N = i({
-			preferredFacing: O.defaultRearCamera ? "environment" : "user",
-			resolution: M.value,
-			videoRef: j,
-			onWarning: (e) => k("error", e)
-		}), P = c(() => O.enableMirrorCamera && N.activeFacing.value !== "environment"), F = c(() => O.enableSelectDevice && N.devices.value.length > 1), I = c(() => O.enableSwitchCamera && N.canSwitch.value), L = c(() => O.enableZoomSlider && N.zoomCapability.value !== null), R = c(() => N.isLive.value || N.isPaused.value), z = g(!1), B = g(0), V = g(!1), H = g(0), U = g(!1), W = g(0), G = g(O.enableScreenFlash);
-		y(() => O.enableScreenFlash, (e) => {
-			G.value = e;
+		}), k = i({
+			preferredFacing: w.defaultRearCamera ? "environment" : "user",
+			resolution: O.value,
+			videoRef: D,
+			onWarning: (e) => T("error", e)
+		}), A = s(() => w.enableMirrorCamera && k.activeFacing.value !== "environment"), j = s(() => w.enableSelectDevice && k.devices.value.length > 1), M = s(() => w.enableSwitchCamera && k.canSwitch.value), N = s(() => w.enableZoomSlider && k.zoomCapability.value !== null), P = s(() => k.isLive.value || k.isPaused.value), F = g(!1), I = g(0), L = g(!1), R = g(0), z = g(!1), B = g(0), V = g(w.enableScreenFlash);
+		y(() => w.enableScreenFlash, (e) => {
+			V.value = e;
 		});
-		let K = null, q = null, J = null, Y = null, X = null, Z = !1, Q = g(O.zoom);
-		y(() => O.zoom, (e) => {
-			Q.value = e;
-		}), y(Q, (e) => {
-			N.setZoom(e), e !== O.zoom && k("update:zoom", e);
-		}), y(N.zoom, (e) => {
-			N.zoomCapability.value && e !== Q.value && (Q.value = e);
-		}), y(N.zoomCapability, (e) => {
-			e && N.setZoom(Q.value);
-		}), y(N.state, (e) => k("state", e)), y(N.error, (e) => {
-			e && k("error", e);
-		}), y(M, (e) => void N.setResolution(e)), ne(() => {
-			O.autoStart && N.start();
+		let H = null, U = null, W = null, G = null, K = null, q = null, J = null, Y = !1, X = g(w.zoom);
+		y(() => w.zoom, (e) => {
+			X.value = e;
+		}), y(X, (e) => {
+			k.setZoom(e), e !== w.zoom && T("update:zoom", e);
+		}), y(k.zoom, (e) => {
+			k.zoomCapability.value && e !== X.value && (X.value = e);
+		}), y(k.zoomCapability, (e) => {
+			e && k.setZoom(X.value);
+		}), y(k.state, (e) => T("state", e)), y(k.error, (e) => {
+			e && T("error", e);
+		}), y(O, (e) => void k.setResolution(e)), m(() => {
+			w.autoStart && k.start();
 		}), re(() => {
-			Z = !0, q && clearTimeout(q), J && clearTimeout(J), Y && clearTimeout(Y), q = null, J = null, Y = null, X?.(!1), X = null, B.value = 0, V.value = !1, U.value = !1;
+			Y = !0, U && clearTimeout(U), W && clearTimeout(W), G && clearTimeout(G), U = null, W = null, G = null, J?.(!1), J = null, Z(), I.value = 0, L.value = !1, z.value = !1;
 		});
-		function _e() {
-			O.enableShutterAnimation && (J && clearTimeout(J), H.value++, V.value = !0, J = setTimeout(() => {
-				J = null, V.value = !1;
+		function xe() {
+			w.enableShutterAnimation && (W && clearTimeout(W), R.value++, L.value = !0, W = setTimeout(() => {
+				W = null, L.value = !1;
 			}, 650));
 		}
-		function ve() {
-			return G.value ? (Y && clearTimeout(Y), W.value++, U.value = !0, new Promise((e) => {
-				Y = setTimeout(() => {
-					Y = null, U.value = !1, e();
-				}, 350);
-			})) : Promise.resolve();
+		function Z() {
+			K && clearTimeout(K), K = null, q?.(), q = null;
+		}
+		function Q() {
+			if (!V.value) return {
+				peak: Promise.resolve(),
+				faded: Promise.resolve()
+			};
+			G && clearTimeout(G), Z(), B.value++, z.value = !0;
+			let e = new Promise((e) => {
+				q = e;
+			});
+			return G = setTimeout(() => {
+				G = null, z.value = !1, K = setTimeout(Z, 400);
+			}, 350), {
+				peak: new Promise((e) => setTimeout(e, 120)),
+				faded: e
+			};
 		}
-		async function ye() {
-			let e = j.value;
-			if (!e || !R.value || z.value) return null;
-			z.value = !0;
+		async function Se() {
+			let e = D.value;
+			if (!e || !P.value || F.value) return null;
+			F.value = !0;
 			try {
-				let t = n(e, {
-					width: M.value.width,
-					height: M.value.height,
-					mirror: P.value,
-					filter: O.filter,
-					tintColor: O.tintColor,
-					tintIntensity: O.tintIntensity
+				let t = Q();
+				if (await t.peak, Y || !P.value) return null;
+				let i = n(e, {
+					width: O.value.width,
+					height: O.value.height,
+					mirror: A.value,
+					filter: w.filter,
+					tintColor: w.tintColor,
+					tintIntensity: w.tintIntensity
 				});
-				G.value && await ve(), _e();
-				let i = await r(t, { asBlob: O.emitBlob });
-				return k("update:modelValue", i), k("capture", i, t), i;
+				xe();
+				let a = await r(i, { asBlob: w.emitBlob });
+				return await t.faded, Y ? null : (T("update:modelValue", a), T("capture", a, i), a);
 			} finally {
-				z.value = !1;
+				F.value = !1;
 			}
 		}
-		function be() {
+		function Ce() {
 			return new Promise((e) => {
-				X = e, q = setTimeout(() => {
-					q = null, X = null, e(!0);
+				J = e, U = setTimeout(() => {
+					U = null, J = null, e(!0);
 				}, 1e3);
 			});
 		}
-		async function xe() {
-			let e = Number.isFinite(O.countdown) ? Math.max(0, Math.floor(O.countdown)) : 0;
-			for (let t = e; t > 0; t--) if (B.value = t, !await be()) return null;
-			return B.value = 0, Z ? null : ye();
+		async function we() {
+			let e = Number.isFinite(w.countdown) ? Math.max(0, Math.floor(w.countdown)) : 0;
+			for (let t = e; t > 0; t--) if (I.value = t, !await Ce()) return null;
+			return I.value = 0, Y ? null : Se();
 		}
 		function $() {
-			return K || (!j.value || !R.value ? Promise.resolve(null) : (K = xe().finally(() => {
-				B.value = 0, K = null;
-			}), K));
+			return H || (!D.value || !P.value ? Promise.resolve(null) : (H = we().finally(() => {
+				I.value = 0, H = null;
+			}), H));
 		}
-		function Se(e) {
+		function Te(e) {
 			let t = e.target.value;
-			t && N.selectDevice(t);
+			t && k.selectDevice(t);
 		}
-		function Ce(e, t) {
+		function Ee(e, t) {
 			if (e.label) return e.label;
 			let n = e.facing === "user" ? "Front" : e.facing === "environment" ? "Back" : "";
 			return n ? `${n} camera` : `Camera ${t + 1}`;
 		}
-		return m({
+		return p({
 			onCapture: $,
-			camera: N,
-			zoom: Q
-		}), (n, r) => (h(), d("div", x, [p(a, {
+			camera: k,
+			zoom: X
+		}), (n, r) => (h(), u("div", ie, [f(a, {
 			ref_key: "previewRef",
-			ref: A,
-			ratio: s.ratio,
-			resolutions: s.resolutions,
-			mirror: P.value,
-			filter: s.filter,
-			"tint-color": s.tintColor,
-			"tint-intensity": s.tintIntensity
+			ref: E,
+			ratio: o.ratio,
+			resolutions: o.resolutions,
+			mirror: A.value,
+			filter: o.filter,
+			"tint-color": o.tintColor,
+			"tint-intensity": o.tintIntensity
 		}, {
 			default: b(() => [
-				s.enableGuide && s.guideSrc ? (h(), d("img", {
+				o.enableGuide && o.guideSrc ? (h(), u("img", {
 					key: 0,
-					src: s.guideSrc,
+					src: o.guideSrc,
 					class: "position-absolute top-0 start-0 w-100 h-100 base-camera__guide",
 					alt: "",
 					"aria-hidden": "true"
-				}, null, 8, ie)) : u("", !0),
-				f("div", ae, [F.value && v(N).activeDeviceId ? (h(), l(t, {
+				}, null, 8, ae)) : l("", !0),
+				d("div", oe, [j.value && v(k).activeDeviceId ? (h(), c(t, {
 					key: 0,
 					class: "base-camera__select",
-					modelValue: v(N).activeDeviceId.value,
-					"onUpdate:modelValue": r[0] ||= (e) => v(N).activeDeviceId.value = e,
-					disabled: v(N).isStarting.value,
+					modelValue: v(k).activeDeviceId.value,
+					"onUpdate:modelValue": r[0] ||= (e) => v(k).activeDeviceId.value = e,
+					disabled: v(k).isStarting.value,
 					"aria-label": "Select camera",
-					onChange: Se,
-					options: v(N).devices.value.map((e, t) => ({
+					onChange: Te,
+					options: v(k).devices.value.map((e, t) => ({
 						value: e.deviceId,
-						text: Ce(e, t)
+						text: Ee(e, t)
 					}))
 				}, null, 8, [
 					"modelValue",
 					"disabled",
 					"options"
-				])) : (h(), d("span", oe)), I.value ? (h(), d("button", {
+				])) : (h(), u("span", se)), M.value ? (h(), u("button", {
 					key: 2,
 					type: "button",
 					class: "btn d-grid place-content-center px-2",
-					disabled: v(N).isStarting.value,
+					disabled: v(k).isStarting.value,
 					"aria-label": "Switch camera",
-					onClick: r[1] ||= (e) => v(N).switchCamera()
-				}, [p(e, { symbol: "switch-camera" })], 8, se)) : u("", !0)]),
-				v(N).isStarting.value || v(N).state.value === "error" || v(N).state.value === "idle" && !s.autoStart ? (h(), d("div", ce, [v(N).isStarting.value ? (h(), d("div", le, [...r[8] ||= [f("span", { class: "visually-hidden" }, "Starting camera…", -1)]])) : v(N).state.value === "error" ? (h(), d("div", ue, [f("div", S, _(v(N).error.value?.message ?? "Camera error"), 1), v(N).error.value?.code !== "not-allowed" && v(N).error.value?.code !== "unsupported" ? (h(), d("button", {
+					onClick: r[1] ||= (e) => v(k).switchCamera()
+				}, [f(e, { symbol: "switch-camera" })], 8, ce)) : l("", !0)]),
+				v(k).isStarting.value || v(k).state.value === "error" || v(k).state.value === "idle" && !o.autoStart ? (h(), u("div", le, [v(k).isStarting.value ? (h(), u("div", ue, [...r[8] ||= [d("span", { class: "visually-hidden" }, "Starting camera…", -1)]])) : v(k).state.value === "error" ? (h(), u("div", de, [d("div", fe, _(v(k).error.value?.message ?? "Camera error"), 1), v(k).error.value?.code !== "not-allowed" && v(k).error.value?.code !== "unsupported" ? (h(), u("button", {
 					key: 0,
 					type: "button",
 					class: "btn btn-sm btn-outline-light",
-					onClick: r[2] ||= (e) => v(N).start()
-				}, " Retry ")) : u("", !0)])) : (h(), d("button", {
+					onClick: r[2] ||= (e) => v(k).start()
+				}, " Retry ")) : l("", !0)])) : (h(), u("button", {
 					key: 2,
 					type: "button",
 					class: "btn btn-light",
-					onClick: r[3] ||= (e) => v(N).start()
-				}, "Start camera"))])) : u("", !0),
-				f("div", C, [s.enableControls ? (h(), d("div", w, [
-					f("button", {
+					onClick: r[3] ||= (e) => v(k).start()
+				}, "Start camera"))])) : l("", !0),
+				d("div", pe, [o.enableControls ? (h(), u("div", me, [
+					d("button", {
 						type: "button",
 						class: "btn btn-dark bg-opacity-50 rounded-circle base-camera__icon-btn",
-						disabled: v(N).isStarting.value,
-						"aria-label": v(N).isLive.value ? "Pause" : "Start",
-						onClick: r[4] ||= (e) => v(N).toggle()
-					}, [v(N).isLive.value ? (h(), d("svg", E, [...r[9] ||= [f("rect", {
+						disabled: v(k).isStarting.value,
+						"aria-label": v(k).isLive.value ? "Pause" : "Start",
+						onClick: r[4] ||= (e) => v(k).toggle()
+					}, [v(k).isLive.value ? (h(), u("svg", ge, [...r[9] ||= [d("rect", {
 						x: "6",
 						y: "5",
 						width: "4",
 						height: "14",
 						rx: "1"
-					}, null, -1), f("rect", {
+					}, null, -1), d("rect", {
 						x: "14",
 						y: "5",
 						width: "4",
 						height: "14",
 						rx: "1"
-					}, null, -1)]])) : (h(), d("svg", de, [...r[10] ||= [f("path", { d: "M8 5v14l11-7z" }, null, -1)]]))], 8, T),
-					f("button", {
+					}, null, -1)]])) : (h(), u("svg", _e, [...r[10] ||= [d("path", { d: "M8 5v14l11-7z" }, null, -1)]]))], 8, he),
+					d("button", {
 						type: "button",
 						class: "btn btn-light rounded-circle base-camera__shutter",
-						disabled: !R.value || z.value || B.value > 0,
+						disabled: !P.value || F.value || I.value > 0,
 						"aria-label": "Capture photo",
 						onClick: r[5] ||= (e) => $()
-					}, [...r[11] ||= [f("span", { class: "base-camera__shutter-inner" }, null, -1)]], 8, fe),
-					f("button", {
+					}, [...r[11] ||= [d("span", { class: "base-camera__shutter-inner" }, null, -1)]], 8, ve),
+					d("button", {
 						type: "button",
 						class: "btn btn-dark bg-opacity-50 rounded-circle base-camera__icon-btn",
-						"aria-label": G.value ? "Flash On" : "Flash Off",
-						onClick: r[6] ||= (e) => G.value = !G.value
-					}, [G.value ? (h(), l(e, {
+						"aria-label": V.value ? "Flash On" : "Flash Off",
+						onClick: r[6] ||= (e) => V.value = !V.value
+					}, [V.value ? (h(), c(e, {
 						key: 0,
 						symbol: "zap"
-					})) : (h(), l(e, {
+					})) : (h(), c(e, {
 						key: 1,
 						symbol: "zap-off"
-					}))], 8, pe)
-				])) : u("", !0)]),
-				B.value ? (h(), d("div", me, [(h(), d("p", {
-					key: B.value,
+					}))], 8, ye)
+				])) : l("", !0)]),
+				I.value ? (h(), u("div", be, [(h(), u("p", {
+					key: I.value,
 					class: "base-camera__countdown",
-					"data-countdown": B.value
-				}, _(B.value), 9, he))])) : u("", !0),
-				V.value ? (h(), d("div", {
-					key: H.value,
+					"data-countdown": I.value
+				}, _(I.value), 9, x))])) : l("", !0),
+				L.value ? (h(), u("div", {
+					key: R.value,
 					class: "base-camera__shutter-effect",
 					"aria-hidden": "true"
-				}, [...r[12] ||= [f("span", { class: "base-camera__shutter-aperture" }, null, -1)]])) : u("", !0),
-				p(ee, { name: "base-camera-flash" }, {
-					default: b(() => [U.value ? (h(), d("div", {
-						key: W.value,
+				}, [...r[12] ||= [d("span", { class: "base-camera__shutter-aperture" }, null, -1)]])) : l("", !0),
+				f(te, {
+					name: "base-camera-flash",
+					onAfterLeave: Z
+				}, {
+					default: b(() => [z.value ? (h(), u("div", {
+						key: B.value,
 						class: "base-camera__screen-flash",
-						style: te({ background: s.screenFlashColor }),
+						style: ne({ background: o.screenFlashColor }),
 						"aria-hidden": "true"
-					}, null, 4)) : u("", !0)]),
+					}, null, 4)) : l("", !0)]),
 					_: 1
 				})
 			]),
@@ -392,19 +409,19 @@ var x = {
 			"filter",
 			"tint-color",
 			"tint-intensity"
-		]), L.value ? (h(), d("div", ge, [p(o, {
-			modelValue: Q.value,
-			"onUpdate:modelValue": r[7] ||= (e) => Q.value = e,
-			min: v(N).zoomCapability.value.min,
-			max: v(N).zoomCapability.value.max,
-			step: v(N).zoomCapability.value.step
+		]), N.value ? (h(), u("div", S, [f(ee, {
+			modelValue: X.value,
+			"onUpdate:modelValue": r[7] ||= (e) => X.value = e,
+			min: v(k).zoomCapability.value.min,
+			max: v(k).zoomCapability.value.max,
+			step: v(k).zoomCapability.value.step
 		}, null, 8, [
 			"modelValue",
 			"min",
 			"max",
 			"step"
-		])])) : u("", !0)]));
+		])])) : l("", !0)]));
 	}
 });
 //#endregion
-export { D as default };
+export { C as default };

package/package.json

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