ablok-components 0.3.134 → 0.3.137

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-6eb2389c"]]);
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-bdd9593d"]]);
 //#endregion
 export { n as default };

package/dist/components/molecules/base-camera/base-camera.vue.d.ts

@@ -119,6 +119,14 @@ declare const __VLS_export: import('../../../../vue/dist/vue.esm-bundler.js').De
         type: StringConstructor;
         default: string;
     };
+    screenFlashFullscreen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    enableTorch: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     enableShutterAnimation: {
         type: BooleanConstructor;
         default: boolean;
@@ -137,6 +145,9 @@ declare const __VLS_export: import('../../../../vue/dist/vue.esm-bundler.js').De
         permission: import('../../../../vue/dist/vue.esm-bundler.js').ComputedRef<import('../../../utilities/camera/types').CameraPermission>;
         zoom: import('../../../../vue/dist/vue.esm-bundler.js').ComputedRef<number>;
         zoomCapability: import('../../../../vue/dist/vue.esm-bundler.js').ComputedRef<import('../../../utilities/camera/types').ZoomCapability | null>;
+        torch: import('../../../../vue/dist/vue.esm-bundler.js').ComputedRef<boolean>;
+        torchCapability: import('../../../../vue/dist/vue.esm-bundler.js').ComputedRef<boolean>;
+        canLockExposure: import('../../../../vue/dist/vue.esm-bundler.js').ComputedRef<boolean>;
         isLive: import('../../../../vue/dist/vue.esm-bundler.js').ComputedRef<boolean>;
         isPaused: import('../../../../vue/dist/vue.esm-bundler.js').ComputedRef<boolean>;
         isStarting: import('../../../../vue/dist/vue.esm-bundler.js').ComputedRef<boolean>;
@@ -151,6 +162,8 @@ declare const __VLS_export: import('../../../../vue/dist/vue.esm-bundler.js').De
         selectDevice: (deviceId: string) => Promise<boolean>;
         setResolution: (r: Resolution) => Promise<boolean>;
         setZoom: (z: number) => Promise<boolean>;
+        setTorch: (on: boolean) => Promise<boolean>;
+        setExposureLocked: (locked: boolean) => Promise<boolean>;
         refreshDevices: () => Promise<void>;
         bindVideo: (el: HTMLVideoElement | null) => void;
     };
@@ -279,6 +292,14 @@ declare const __VLS_export: import('../../../../vue/dist/vue.esm-bundler.js').De
         type: StringConstructor;
         default: string;
     };
+    screenFlashFullscreen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    enableTorch: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     enableShutterAnimation: {
         type: BooleanConstructor;
         default: boolean;
@@ -309,6 +330,8 @@ declare const __VLS_export: import('../../../../vue/dist/vue.esm-bundler.js').De
     enableControls: boolean;
     enableScreenFlash: boolean;
     screenFlashColor: string;
+    screenFlashFullscreen: boolean;
+    enableTorch: boolean;
     enableShutterAnimation: boolean;
 }, {}, {}, {}, string, import('../../../../vue/dist/vue.esm-bundler.js').ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;

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

package/dist/components/molecules/input-dropdown/input-dropdown.vue_vue_type_script_setup_true_lang.js

@@ -116,7 +116,7 @@ var b = ["id"], x = ["for", "innerHTML"], S = { class: "dropdown" }, C = { class
 			role: "button",
 			type: "button",
 			title: L.value,
-			class: "btn dropdown-toggle",
+			class: u(["btn dropdown-toggle", { [`btn-${e.variant}`]: e.variant }]),
 			color: e.color,
 			outlined: e.outlined,
 			disabled: e.disabled
@@ -133,6 +133,7 @@ var b = ["id"], x = ["for", "innerHTML"], S = { class: "dropdown" }, C = { class
 		}, 8, [
 			"id",
 			"title",
+			"class",
 			"color",
 			"outlined",
 			"disabled"

package/dist/composables/useCamera.d.ts

@@ -17,6 +17,9 @@ export declare function useCamera(options?: UseCameraOptions): {
     permission: import('../../vue/dist/vue.esm-bundler.js').ComputedRef<import('../utilities/camera/types').CameraPermission>;
     zoom: import('../../vue/dist/vue.esm-bundler.js').ComputedRef<number>;
     zoomCapability: import('../../vue/dist/vue.esm-bundler.js').ComputedRef<import('../utilities/camera/types').ZoomCapability | null>;
+    torch: import('../../vue/dist/vue.esm-bundler.js').ComputedRef<boolean>;
+    torchCapability: import('../../vue/dist/vue.esm-bundler.js').ComputedRef<boolean>;
+    canLockExposure: import('../../vue/dist/vue.esm-bundler.js').ComputedRef<boolean>;
     isLive: import('../../vue/dist/vue.esm-bundler.js').ComputedRef<boolean>;
     isPaused: import('../../vue/dist/vue.esm-bundler.js').ComputedRef<boolean>;
     isStarting: import('../../vue/dist/vue.esm-bundler.js').ComputedRef<boolean>;
@@ -31,6 +34,8 @@ export declare function useCamera(options?: UseCameraOptions): {
     selectDevice: (deviceId: string) => Promise<boolean>;
     setResolution: (r: Resolution) => Promise<boolean>;
     setZoom: (z: number) => Promise<boolean>;
+    setTorch: (on: boolean) => Promise<boolean>;
+    setExposureLocked: (locked: boolean) => Promise<boolean>;
     refreshDevices: () => Promise<void>;
     bindVideo: (el: HTMLVideoElement | null) => void;
 };

package/dist/composables/useCamera.js

@@ -22,6 +22,9 @@ function a(a = {}) {
 		permission: t(() => l.value.permission),
 		zoom: t(() => l.value.zoom),
 		zoomCapability: t(() => l.value.zoomCapability),
+		torch: t(() => l.value.torch),
+		torchCapability: t(() => l.value.torchCapability),
+		canLockExposure: t(() => l.value.canLockExposure),
 		isLive: t(() => l.value.state === "live"),
 		isPaused: t(() => l.value.state === "paused"),
 		isStarting: t(() => l.value.state === "starting"),
@@ -36,6 +39,8 @@ function a(a = {}) {
 		selectDevice: (e) => c.selectDevice(e),
 		setResolution: (e) => c.setResolution(e),
 		setZoom: (e) => c.setZoom(e),
+		setTorch: (e) => c.setTorch(e),
+		setExposureLocked: (e) => c.setExposureLocked(e),
 		refreshDevices: () => c.refreshDevices(),
 		bindVideo: (e) => c.attachVideo(e)
 	};