ablok-components 0.3.128 → 0.3.131

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

@@ -0,0 +1,410 @@
+import e from "../../atoms/svg-icon/svg-icon.js";
+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";
+//#region src/components/molecules/base-camera/base-camera.vue?vue&type=script&setup=true&lang.ts
+var x = {
+	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 = {
+	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 = {
+	key: 0,
+	class: "spinner-border text-light",
+	role: "status"
+}, ue = {
+	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 = {
+	key: 0,
+	class: "d-flex align-items-center justify-content-center gap-4 w-100"
+}, T = ["disabled", "aria-label"], E = {
+	key: 0,
+	viewBox: "0 0 24 24",
+	width: "22",
+	height: "22",
+	fill: "currentColor",
+	"aria-hidden": "true"
+}, de = {
+	key: 1,
+	viewBox: "0 0 24 24",
+	width: "22",
+	height: "22",
+	fill: "currentColor",
+	"aria-hidden": "true"
+}, fe = ["disabled"], pe = ["aria-label"], me = {
+	key: 2,
+	class: "base-camera__countdown-overlay",
+	role: "status",
+	"aria-live": "polite",
+	"aria-atomic": "true"
+}, he = ["data-countdown"], ge = {
+	key: 0,
+	class: "base-camera__zoom"
+}, D = /*@__PURE__*/ m({
+	__name: "base-camera",
+	props: {
+		modelValue: { type: null },
+		enableSelectDevice: {
+			type: Boolean,
+			default: !1
+		},
+		enableSwitchCamera: {
+			type: Boolean,
+			default: !0
+		},
+		defaultRearCamera: {
+			type: Boolean,
+			default: !1
+		},
+		enableMirrorCamera: {
+			type: Boolean,
+			default: !1
+		},
+		ratio: {
+			type: String,
+			default: "3x4"
+		},
+		resolutions: {
+			type: Object,
+			default: () => ({
+				"1x1": {
+					width: 720,
+					height: 720
+				},
+				"2x3": {
+					width: 720,
+					height: 1080
+				},
+				"3x2": {
+					width: 1080,
+					height: 720
+				},
+				"3x4": {
+					width: 720,
+					height: 960
+				},
+				"4x3": {
+					width: 960,
+					height: 720
+				},
+				"4x5": {
+					width: 960,
+					height: 1200
+				},
+				"5x4": {
+					width: 1200,
+					height: 960
+				},
+				"16x9": {
+					width: 1280,
+					height: 720
+				},
+				"9x16": {
+					width: 720,
+					height: 1280
+				}
+			})
+		},
+		zoom: {
+			type: Number,
+			default: 1
+		},
+		enableZoomSlider: {
+			type: Boolean,
+			default: !1
+		},
+		filter: {
+			type: String,
+			default: "none",
+			validator: (e) => [
+				"none",
+				"grayscale",
+				"sepia"
+			].includes(e)
+		},
+		tintColor: {
+			type: String,
+			default: "#FF000080"
+		},
+		tintIntensity: {
+			type: Number,
+			default: .3
+		},
+		countdown: {
+			type: Number,
+			default: 0
+		},
+		emitBlob: {
+			type: Boolean,
+			default: !1
+		},
+		autoStart: {
+			type: Boolean,
+			default: !0
+		},
+		enableGuide: {
+			type: Boolean,
+			default: !0
+		},
+		guideSrc: {
+			type: String,
+			default: s
+		},
+		enableControls: {
+			type: Boolean,
+			default: !0
+		},
+		enableScreenFlash: {
+			type: Boolean,
+			default: !1
+		},
+		screenFlashColor: {
+			type: String,
+			default: "#FFFFFF"
+		},
+		enableShutterAnimation: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	emits: [
+		"update:modelValue",
+		"update:zoom",
+		"capture",
+		"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] ?? {
+			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;
+		});
+		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();
+		}), 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;
+		});
+		function _e() {
+			O.enableShutterAnimation && (J && clearTimeout(J), H.value++, V.value = !0, J = setTimeout(() => {
+				J = null, V.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();
+		}
+		async function ye() {
+			let e = j.value;
+			if (!e || !R.value || z.value) return null;
+			z.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
+				});
+				G.value && await ve(), _e();
+				let i = await r(t, { asBlob: O.emitBlob });
+				return k("update:modelValue", i), k("capture", i, t), i;
+			} finally {
+				z.value = !1;
+			}
+		}
+		function be() {
+			return new Promise((e) => {
+				X = e, q = setTimeout(() => {
+					q = null, X = 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();
+		}
+		function $() {
+			return K || (!j.value || !R.value ? Promise.resolve(null) : (K = xe().finally(() => {
+				B.value = 0, K = null;
+			}), K));
+		}
+		function Se(e) {
+			let t = e.target.value;
+			t && N.selectDevice(t);
+		}
+		function Ce(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({
+			onCapture: $,
+			camera: N,
+			zoom: Q
+		}), (n, r) => (h(), d("div", x, [p(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
+		}, {
+			default: b(() => [
+				s.enableGuide && s.guideSrc ? (h(), d("img", {
+					key: 0,
+					src: s.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, {
+					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,
+					"aria-label": "Select camera",
+					onChange: Se,
+					options: v(N).devices.value.map((e, t) => ({
+						value: e.deviceId,
+						text: Ce(e, t)
+					}))
+				}, null, 8, [
+					"modelValue",
+					"disabled",
+					"options"
+				])) : (h(), d("span", oe)), I.value ? (h(), d("button", {
+					key: 2,
+					type: "button",
+					class: "btn d-grid place-content-center px-2",
+					disabled: v(N).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", {
+					key: 0,
+					type: "button",
+					class: "btn btn-sm btn-outline-light",
+					onClick: r[2] ||= (e) => v(N).start()
+				}, " Retry ")) : u("", !0)])) : (h(), d("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", {
+						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", {
+						x: "6",
+						y: "5",
+						width: "4",
+						height: "14",
+						rx: "1"
+					}, null, -1), f("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", {
+						type: "button",
+						class: "btn btn-light rounded-circle base-camera__shutter",
+						disabled: !R.value || z.value || B.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", {
+						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, {
+						key: 0,
+						symbol: "zap"
+					})) : (h(), l(e, {
+						key: 1,
+						symbol: "zap-off"
+					}))], 8, pe)
+				])) : u("", !0)]),
+				B.value ? (h(), d("div", me, [(h(), d("p", {
+					key: B.value,
+					class: "base-camera__countdown",
+					"data-countdown": B.value
+				}, _(B.value), 9, he))])) : u("", !0),
+				V.value ? (h(), d("div", {
+					key: H.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,
+						class: "base-camera__screen-flash",
+						style: te({ background: s.screenFlashColor }),
+						"aria-hidden": "true"
+					}, null, 4)) : u("", !0)]),
+					_: 1
+				})
+			]),
+			_: 1
+		}, 8, [
+			"ratio",
+			"resolutions",
+			"mirror",
+			"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
+		}, null, 8, [
+			"modelValue",
+			"min",
+			"max",
+			"step"
+		])])) : u("", !0)]));
+	}
+});
+//#endregion
+export { D as default };

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

@@ -124,8 +124,8 @@ declare const __VLS_base: import('../../../../vue/dist/vue.esm-bundler.js').Defi
     };
 }>, {}, {}, {}, {}, import('../../../../vue/dist/vue.esm-bundler.js').ComponentOptionsMixin, import('../../../../vue/dist/vue.esm-bundler.js').ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
-    "update:center": (...args: any[]) => void;
     "update:zoom": (...args: any[]) => void;
+    "update:center": (...args: any[]) => void;
     "map-click": (...args: any[]) => void;
     "marker-click": (...args: any[]) => void;
 }, string, import('../../../../vue/dist/vue.esm-bundler.js').PublicProps, Readonly<import('../../../../vue/dist/vue.esm-bundler.js').ExtractPropTypes<{
@@ -238,8 +238,8 @@ declare const __VLS_base: import('../../../../vue/dist/vue.esm-bundler.js').Defi
     };
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-    "onUpdate:center"?: ((...args: any[]) => any) | undefined;
     "onUpdate:zoom"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:center"?: ((...args: any[]) => any) | undefined;
     "onMap-click"?: ((...args: any[]) => any) | undefined;
     "onMarker-click"?: ((...args: any[]) => any) | undefined;
 }>, {

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

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

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

@@ -0,0 +1,32 @@
+import { Filter, Resolution } from '../../../utilities/camera/types';
+type __VLS_Props = {
+    ratio?: string;
+    resolutions?: Record<string, Resolution>;
+    mirror?: boolean;
+    filter?: Filter;
+    tintColor?: string;
+    tintIntensity?: number;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import('../../../../vue/dist/vue.esm-bundler.js').DefineComponent<__VLS_Props, {
+    videoEl: import('../../../../vue/dist/vue.esm-bundler.js').Ref<HTMLVideoElement | null, HTMLVideoElement | null>;
+    resolution: import('../../../../vue/dist/vue.esm-bundler.js').ComputedRef<Resolution>;
+}, {}, {}, {}, import('../../../../vue/dist/vue.esm-bundler.js').ComponentOptionsMixin, import('../../../../vue/dist/vue.esm-bundler.js').ComponentOptionsMixin, {}, string, import('../../../../vue/dist/vue.esm-bundler.js').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    filter: Filter;
+    ratio: string;
+    resolutions: Record<string, Resolution>;
+    mirror: boolean;
+    tintColor: string;
+    tintIntensity: number;
+}, {}, {}, {}, string, import('../../../../vue/dist/vue.esm-bundler.js').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,67 @@
+import { cssFilter as e, resolveTintPaint as t } from "../../../utilities/camera/capture.js";
+import { computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, defineComponent as o, normalizeStyle as s, openBlock as c, ref as l, renderSlot as u } from "vue";
+//#region src/components/molecules/camera-preview/camera-preview.vue?vue&type=script&setup=true&lang.ts
+var d = /*@__PURE__*/ o({
+	__name: "camera-preview",
+	props: {
+		ratio: { default: "3x4" },
+		resolutions: { default: () => ({}) },
+		mirror: {
+			type: Boolean,
+			default: !1
+		},
+		filter: { default: "none" },
+		tintColor: { default: "#FF000080" },
+		tintIntensity: { default: .3 }
+	},
+	setup(o, { expose: d }) {
+		let f = o, p = l(null), m = n(() => {
+			let e = f.resolutions[f.ratio];
+			if (e) return e;
+			let [t, n] = f.ratio.split(/[x:/]/).map(Number);
+			return t && n ? {
+				width: t,
+				height: n
+			} : {
+				width: 3,
+				height: 4
+			};
+		}), h = n(() => ({ aspectRatio: `${m.value.width} / ${m.value.height}` })), g = n(() => ({
+			transform: f.mirror ? "scaleX(-1)" : "none",
+			filter: e(f.filter)
+		})), _ = n(() => {
+			let e = t(f.tintColor, f.tintIntensity);
+			return {
+				backgroundColor: e.color,
+				opacity: e.opacity
+			};
+		});
+		return d({
+			videoEl: p,
+			resolution: m
+		}), (e, t) => (c(), i("div", {
+			class: "camera-preview position-relative overflow-hidden bg-black w-100",
+			style: s(h.value)
+		}, [
+			a("video", {
+				ref_key: "videoEl",
+				ref: p,
+				class: "camera-preview__video position-absolute top-0 start-0 w-100 h-100",
+				style: s(g.value),
+				playsinline: "",
+				muted: "",
+				autoplay: "",
+				disablepictureinpicture: ""
+			}, null, 4),
+			o.tintIntensity > 0 ? (c(), i("div", {
+				key: 0,
+				class: "position-absolute top-0 start-0 w-100 h-100 pe-none",
+				style: s(_.value),
+				"aria-hidden": "true"
+			}, null, 4)) : r("", !0),
+			u(e.$slots, "default", {}, void 0, !0)
+		], 4));
+	}
+});
+//#endregion
+export { d as default };

package/dist/components/molecules/popover-tooltip/popover-tooltip.vue.d.ts

@@ -120,10 +120,10 @@ declare const __VLS_export: __VLS_WithSlots<import('../../../../vue/dist/vue.esm
     modelValue: boolean;
     disabled: boolean;
     content: string;
+    ariaLabel: string;
     hover: boolean;
     hoverDelay: number;
     exclusive: boolean;
-    ariaLabel: string;
 }, {}, {}, {}, string, import('../../../../vue/dist/vue.esm-bundler.js').ComponentProvideOptions, true, {}, any>, {
     button?: (props: {}) => any;
 } & {

package/dist/composables/useCamera.d.ts

@@ -0,0 +1,37 @@
+import { Ref } from '../../vue/dist/vue.esm-bundler.js';
+import { CameraManager, CameraManagerOptions } from '../utilities/camera/CameraManager';
+import { Resolution, StartOptions } from '../utilities/camera/types';
+export interface UseCameraOptions extends CameraManagerOptions {
+    /** Video element to bind; may become available after setup. */
+    videoRef?: Ref<HTMLVideoElement | null | undefined>;
+}
+export declare function useCamera(options?: UseCameraOptions): {
+    manager: CameraManager;
+    state: import('../../vue/dist/vue.esm-bundler.js').ComputedRef<import('../utilities/camera/types').CameraState>;
+    intent: import('../../vue/dist/vue.esm-bundler.js').ComputedRef<import('../utilities/camera/types').CameraIntent>;
+    stream: import('../../vue/dist/vue.esm-bundler.js').ComputedRef<MediaStream | null>;
+    devices: import('../../vue/dist/vue.esm-bundler.js').ComputedRef<import('../utilities/camera/types').CameraDevice[]>;
+    activeDeviceId: import('../../vue/dist/vue.esm-bundler.js').ComputedRef<string | null>;
+    activeFacing: import('../../vue/dist/vue.esm-bundler.js').ComputedRef<import('../utilities/camera/types').Facing | null>;
+    error: import('../../vue/dist/vue.esm-bundler.js').ComputedRef<import('../utilities/camera/types').CameraError | null>;
+    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>;
+    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>;
+    canSwitch: import('../../vue/dist/vue.esm-bundler.js').ComputedRef<boolean>;
+    isSupported: boolean;
+    start: (opts?: StartOptions) => Promise<boolean>;
+    stop: () => void;
+    pause: () => void;
+    resume: () => Promise<boolean>;
+    toggle: () => Promise<boolean>;
+    switchCamera: () => Promise<boolean>;
+    selectDevice: (deviceId: string) => Promise<boolean>;
+    setResolution: (r: Resolution) => Promise<boolean>;
+    setZoom: (z: number) => Promise<boolean>;
+    refreshDevices: () => Promise<void>;
+    bindVideo: (el: HTMLVideoElement | null) => void;
+};
+export type UseCameraReturn = ReturnType<typeof useCamera>;

package/dist/composables/useCamera.js

@@ -0,0 +1,44 @@
+import { CameraManager as e } from "../utilities/camera/CameraManager.js";
+import { computed as t, onScopeDispose as n, shallowRef as r, watch as i } from "vue";
+//#region src/composables/useCamera.ts
+function a(a = {}) {
+	let { videoRef: o, ...s } = a, c = new e(s), l = r(c.snapshot()), u = c.subscribe((e) => {
+		l.value = e;
+	});
+	return o && i(o, (e) => c.attachVideo(e ?? null), {
+		immediate: !0,
+		flush: "post"
+	}), n(() => {
+		u(), c.dispose();
+	}), {
+		manager: c,
+		state: t(() => l.value.state),
+		intent: t(() => l.value.intent),
+		stream: t(() => l.value.stream),
+		devices: t(() => l.value.devices),
+		activeDeviceId: t(() => l.value.activeDeviceId),
+		activeFacing: t(() => l.value.activeFacing),
+		error: t(() => l.value.error),
+		permission: t(() => l.value.permission),
+		zoom: t(() => l.value.zoom),
+		zoomCapability: t(() => l.value.zoomCapability),
+		isLive: t(() => l.value.state === "live"),
+		isPaused: t(() => l.value.state === "paused"),
+		isStarting: t(() => l.value.state === "starting"),
+		canSwitch: t(() => l.value.devices.length > 1),
+		isSupported: e.isSupported(),
+		start: (e) => c.start(e),
+		stop: () => c.stop(),
+		pause: () => c.pause(),
+		resume: () => c.resume(),
+		toggle: () => c.toggle(),
+		switchCamera: () => c.switchCamera(),
+		selectDevice: (e) => c.selectDevice(e),
+		setResolution: (e) => c.setResolution(e),
+		setZoom: (e) => c.setZoom(e),
+		refreshDevices: () => c.refreshDevices(),
+		bindVideo: (e) => c.attachVideo(e)
+	};
+}
+//#endregion
+export { a as useCamera };