ablok-components 0.3.105 → 0.3.106

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

@@ -0,0 +1,505 @@
+import { __toESM as e } from "../../../_virtual/_rolldown/runtime.js";
+import t from "../../atoms/svg-icon/svg-icon.js";
+import n from "../../atoms/loading-spinner/loading-spinner.js";
+import { dataURItoBlob as r } from "../../../utilities/helpers.js";
+import i from "../input-dropdown/input-dropdown.js";
+import { require_debounce as a } from "../../../node_modules/.pnpm/lodash@4.18.1/node_modules/lodash/debounce.js";
+import { useCameraFilter as o } from "../../../composables/useCameraFilter.js";
+import s from "../../atoms/zoom-slider/zoom-slider.js";
+import c from "../../../assets/img/guide.js";
+import { computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createVNode as m, defineComponent as h, nextTick as ee, normalizeClass as g, normalizeStyle as _, onBeforeUnmount as te, onMounted as ne, openBlock as v, ref as y, toDisplayString as b, vShow as re, watch as ie, withCtx as ae, withDirectives as oe, withModifiers as se } from "vue";
+//#region src/components/molecules/base-camera/base-camera.vue?vue&type=script&async=true&setup=true&lang.ts
+var ce = /* @__PURE__ */ e(a(), 1), le = { class: "camera__preview" }, ue = {
+	key: 0,
+	class: "camera__bg-notification"
+}, de = ["innerHTML"], fe = ["width", "height"], pe = {
+	key: 1,
+	class: "camera__countdown-overlay"
+}, me = ["innerHTML", "data-countdown"], he = ["src"], ge = {
+	key: 3,
+	class: "camera__zoom-slider"
+}, _e = { class: "camera__controls" }, ve = { class: "container" }, ye = { class: "row" }, be = { class: "col" }, xe = { class: "btn-group" }, Se = { key: 0 }, Ce = { key: 1 }, we = {
+	key: 0,
+	class: "camera__select-device"
+}, Te = { class: "col" }, Ee = { class: "" }, De = {
+	name: "BaseCamera",
+	inheritAttrs: !1
+}, Oe = {
+	"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
+	}
+}, x = /*@__PURE__*/ h({
+	...De,
+	props: {
+		modelValue: { type: null },
+		enableSwitchCamera: {
+			type: Boolean,
+			default: !0
+		},
+		defaultRearCamera: {
+			type: Boolean,
+			default: !1
+		},
+		enableMirrorCamera: {
+			type: Boolean,
+			default: !1
+		},
+		enableGuide: {
+			type: Boolean,
+			default: !0
+		},
+		guideSrc: {
+			type: String,
+			default: () => c
+		},
+		countdown: {
+			type: Number,
+			default: 0
+		},
+		ratio: {
+			type: String,
+			default: ""
+		},
+		filter: {
+			type: String,
+			default: "none",
+			validator: (e) => [
+				"none",
+				"grayscale",
+				"sepia"
+			].includes(e)
+		},
+		tintColor: {
+			type: String,
+			default: ""
+		},
+		tintIntensity: {
+			type: Number,
+			default: .3
+		},
+		enableAudio: {
+			type: Boolean,
+			default: !1
+		},
+		enableSelectDevice: {
+			type: Boolean,
+			default: !1
+		},
+		enableCropImage: {
+			type: Boolean,
+			default: !0
+		},
+		resolutions: {
+			type: Object,
+			default: () => Oe
+		},
+		zoom: {
+			type: Number,
+			default: 1
+		},
+		enableZoomSlider: {
+			type: Boolean,
+			default: !1
+		},
+		correctOrientation: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: ["update:modelValue"],
+	setup(e, { expose: a, emit: c }) {
+		let h = e, De = c, x = y(), S = y(), ke = y(!1), C = y([]), w = y(), T = y(), E = y(), D = y(!1), O = y(!1), k = y(0), A = y(0), j = y(), M = y(h.zoom || 1), Ae = y(!1), N = y(!1), P = y(null), F = y(!1), I, L, je = typeof window < "u" && "DeviceMotionEvent" in window && (window.matchMedia?.("(pointer: coarse)")?.matches || "ontouchstart" in window), Me = l(() => h.correctOrientation && je), R = l(() => ke.value && (!Me.value || F.value));
+		function z() {
+			L &&= (window.removeEventListener("pointerdown", L, !0), window.removeEventListener("touchend", L, !0), void 0);
+		}
+		function B() {
+			F.value = !0, I &&= (clearTimeout(I), void 0), z();
+		}
+		function Ne() {
+			L || (L = () => {
+				V();
+			}, window.addEventListener("pointerdown", L, !0), window.addEventListener("touchend", L, !0));
+		}
+		function Pe(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);
+			if (P.value = n, !(typeof screen < "u" && screen.orientation && screen.orientation.type || "portrait-primary").startsWith("portrait")) N.value = !1;
+			else {
+				let e = Math.abs(Math.abs(n) - 90);
+				!N.value && e < 40 ? N.value = !0 : N.value && e > 50 && (N.value = !1);
+			}
+			F.value || B();
+		}
+		async function V() {
+			if (!(!h.correctOrientation || Ae.value)) try {
+				let e = window.DeviceOrientationEvent, t = window.DeviceMotionEvent;
+				if (e && typeof e.requestPermission == "function" && await e.requestPermission() !== "granted") {
+					B();
+					return;
+				}
+				t && typeof t.requestPermission == "function" && await t.requestPermission().catch(() => {}), window.addEventListener("devicemotion", Pe, !0), Ae.value = !0, z();
+			} catch (e) {
+				console.error(e, "enableMotion: failed"), B();
+			}
+		}
+		let H = l(() => ({
+			...Oe,
+			...h.resolutions
+		})), Fe = l(() => Object.values(H.value)[0]);
+		function Ie(e) {
+			return String(e || "").trim().toLowerCase().replace(/\s+/g, "").replace(/[:/]/g, "x");
+		}
+		let U = l(() => {
+			if (H.value[h.ratio]) return h.ratio;
+			let e = Ie(h.ratio);
+			if (H.value[e]) return e;
+		}), W = l(() => U.value ? H.value[U.value] : Fe.value), Le = l(() => {
+			let e = U.value ? H.value[U.value] : void 0;
+			return e ? `${e.width} / ${e.height}` : void 0;
+		}), G = l(() => C.value.filter((e) => e.kind === "videoinput")), Re = l(() => C.value.filter((e) => e.kind === "audioinput")), K = y([]), ze = l(() => G.value.filter((e) => !K.value.includes(e.deviceId)));
+		function Be(e) {
+			e && !K.value.includes(e) && (K.value = [...K.value, e]);
+		}
+		function Ve(e) {
+			let t = G.value;
+			if (!t.length) return;
+			let n = t.findIndex((t) => t.deviceId === e);
+			for (let e = 1; e <= t.length; e++) {
+				let r = t[(Math.max(n, 0) + e) % t.length];
+				if (r && !K.value.includes(r.deviceId)) return r;
+			}
+		}
+		let He = l(() => ze.value.map((e, t) => ({
+			text: e.label.slice(0, e.label.indexOf("(")) || `Camera ${t + 1}`,
+			value: e.deviceId
+		}))), Ue = l({
+			get() {
+				return w.value && w.value.deviceId;
+			},
+			set(e) {
+				w.value = G.value.find((t) => t.deviceId === e), E.value = void 0;
+			}
+		});
+		l({
+			get() {
+				return T.value && T.value.deviceId;
+			},
+			set(e) {
+				T.value = Re.value.find((t) => t.deviceId === e);
+			}
+		});
+		let q = l(() => {
+			let e = w.value && G.value.findIndex((e) => e.deviceId === w.value?.deviceId);
+			return h.enableMirrorCamera && e === 0 ? "mirror-cam" : "";
+		}), We = l(() => {
+			let e = w.value && C.value.findIndex((e) => e.deviceId === w.value?.deviceId);
+			return q.value ? `${q.value} mirror-device-${e}` : "";
+		}), { tintRgb: Ge, applyFilterToCanvas: Ke } = o(h);
+		function qe() {
+			if (U.value && W.value) {
+				k.value = W.value.width, A.value = W.value.height;
+				return;
+			}
+			k.value = x.value.parentElement && x.value.parentElement.clientWidth, A.value = x.value.parentElement && x.value.parentElement.clientHeight;
+		}
+		let Je = (0, ce.default)(() => {
+			qe();
+		}, 300, {
+			trailing: !0,
+			leading: !1
+		});
+		function Ye(e) {
+			return new Promise((t) => setTimeout(t, e));
+		}
+		async function Xe() {
+			let e = W.value ? {
+				width: W.value.width,
+				height: W.value.height
+			} : void 0, t = e ? Math.max(e.width, e.height) : void 0, n = e ? Math.min(e.width, e.height) : void 0, r = h.enableAudio && { ...T.value ? { deviceId: T.value.deviceId } : {} }, i = w.value && w.value.deviceId, a = E.value, o = [];
+			i ? (t && n && o.push({
+				deviceId: { exact: i },
+				width: { ideal: t },
+				height: { ideal: n }
+			}), o.push({ deviceId: { exact: i } })) : a ? (t && n && o.push({
+				facingMode: { exact: a },
+				width: { ideal: t },
+				height: { ideal: n }
+			}), o.push({ facingMode: { exact: a } }), t && n && o.push({
+				width: { ideal: t },
+				height: { ideal: n }
+			}), o.push({})) : (t && n && o.push({
+				width: { ideal: t },
+				height: { ideal: n }
+			}), o.push({}));
+			for (let e of o) for (let t = 0; t < 5; t++) try {
+				return await navigator.mediaDevices.getUserMedia({
+					audio: r,
+					video: e
+				});
+			} catch (e) {
+				let t = e && e.name;
+				if (t === "NotReadableError" || t === "AbortError") {
+					await Ye(500);
+					continue;
+				}
+				break;
+			}
+		}
+		function J() {
+			x.value && x.value.srcObject && (x.value.srcObject.getTracks().forEach((e) => {
+				e.stop();
+			}), x.value.srcObject = null);
+		}
+		let Y = 0, X, Ze;
+		function Z() {
+			X &&= (clearTimeout(X), void 0), Ze &&= (Ze(), void 0);
+		}
+		function Qe(e) {
+			Be(e);
+			let t = Ve(e);
+			t && t.deviceId !== e && (w.value = t);
+		}
+		function $e(e) {
+			Z();
+			let t = w.value && w.value.deviceId, n = x.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 (Z(), e !== Y || !x.value) return;
+				let n = Ve(t);
+				n && n.deviceId !== t && (J(), Qe(t));
+			}, a = () => {
+				e === Y && x.value && x.value.videoWidth > 0 && Z();
+			}, o = () => {
+				i();
+			};
+			r.addEventListener("unmute", a), r.addEventListener("ended", o), Ze = () => {
+				r.removeEventListener("unmute", a), r.removeEventListener("ended", o);
+			}, X = setTimeout(() => {
+				X = void 0, !(e !== Y || !x.value) && (x.value.videoWidth === 0 ? i() : Z());
+			}, 8e3);
+		}
+		let et = 0;
+		async function Q() {
+			let e = ++Y;
+			Z();
+			let t = !!(x.value && x.value.srcObject);
+			if (J(), t && (await Ye(350), e !== Y)) return;
+			let n = await Xe();
+			if (e !== Y) {
+				n?.getTracks?.().forEach((e) => e.stop());
+				return;
+			}
+			if (n && x.value) {
+				et = 0, x.value.srcObject = n, x.value.muted = !0;
+				try {
+					await x.value.play?.();
+				} catch {}
+				$e(e);
+			} else if (!n && w.value) {
+				et < 2 && (et++, await Ye(600), e === Y && await Q());
+				return;
+			}
+			return C.value = await navigator.mediaDevices.enumerateDevices(), {
+				stream: x.value && x.value.srcObject,
+				devices: C.value
+			};
+		}
+		function tt() {
+			D.value ? (D.value = !1, O.value = !1, J()) : (D.value = !0, Q());
+		}
+		function nt() {
+			w.value = void 0, E.value = E.value === "user" ? "environment" : "user", Q();
+		}
+		async function rt(e, t) {
+			e && (!t || e.deviceId !== t.deviceId) && await Q();
+		}
+		ie(() => w.value, rt), ie(() => T.value, rt);
+		function $() {
+			h.countdown ? (j.value = j.value ? j.value - 1 : h.countdown, j.value ? setTimeout($, 1e3) : ot()) : ot();
+		}
+		a({
+			onCapture: $,
+			enableMotion: V,
+			camera: x.value,
+			zoom: M
+		});
+		function it() {
+			if (!h.correctOrientation || P.value == null) return 0;
+			let e = ((P.value - 180) % 360 + 360) % 360;
+			return (-1 * (Math.round(e / 90) * 90 % 360) % 360 + 360) % 360;
+		}
+		function at(e, t, n, r, i) {
+			let a = S.value.width, o = S.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) * (M.value && M.value > 0 ? M.value : 1), u = r * l, d = i * l;
+			e.drawImage(t, -u / 2, -d / 2, u, d);
+		}
+		function ot() {
+			O.value = !0;
+			let e = S.value.getContext("2d"), t = x.value, n = t && t.srcObject && t.srcObject.getTracks(), { aspectRatio: r, width: i, height: a } = n.length && n[0].getSettings(), o = t?.videoWidth || i || k.value, s = t?.videoHeight || a || A.value, c = o && s ? o / s : r, l = W.value || {
+				width: o,
+				height: s
+			}, u = l?.width || o, d = U.value ? l?.height || s : Math.round(u / c), f = u / d;
+			if (S.value.width = u, S.value.height = d, !o || !s || !c) return;
+			let p = it();
+			if (e.save(), p === 90 || p === 270) {
+				at(e, t, p, o, s), e.restore(), Ke(e, S.value.width, S.value.height), st(S.value.toDataURL("image/png"));
+				return;
+			}
+			if (p === 180 && (e.translate(S.value.width, S.value.height), e.scale(-1, -1)), q.value && (e.translate(S.value.width, 0), e.scale(-1, 1)), h.enableCropImage) {
+				let n = 0, r = 0, i = o, a = s;
+				if (c > f ? (i = s * f, n = (o - i) / 2) : c < f && (a = o / f, r = (s - a) / 2), M.value && M.value !== 1) {
+					let e = i / M.value, t = a / M.value;
+					n += (i - e) / 2, r += (a - t) / 2, i = e, a = t;
+				}
+				e.drawImage(t, n, r, i, a, 0, 0, S.value.width, S.value.height);
+			} else {
+				let n = S.value.width, r = S.value.height, i = 0, a = 0;
+				if (c > f ? (r = S.value.width / c, a = (S.value.height - r) / 2) : c < f && (n = S.value.height * c, i = (S.value.width - n) / 2), M.value && M.value !== 1) {
+					let c = o / M.value, l = s / M.value, u = (o - c) / 2, d = (s - l) / 2;
+					q.value && (i = S.value.width - i - n), e.drawImage(t, u, d, c, l, i, a, n, r);
+				} else q.value && (i = S.value.width - i - n), e.drawImage(t, 0, 0, o, s, i, a, n, r);
+			}
+			e.restore(), Ke(e, S.value.width, S.value.height), st(S.value.toDataURL("image/png"));
+		}
+		function st(e) {
+			let t = r(e);
+			De("update:modelValue", {
+				name: `cam-pic-${(/* @__PURE__ */ new Date()).toISOString()}`,
+				id: `cam-pic-${(/* @__PURE__ */ new Date()).toISOString()}`,
+				blob: t,
+				size: t.size
+			});
+		}
+		return ne(async () => {
+			await Q(), D.value = !0, E.value = h.defaultRearCamera ? "environment" : "user";
+			let e = h.defaultRearCamera && G.value.length > 1 ? G.value[G.value.length - 1] : G.value[0];
+			if (w.value = e, h.enableAudio && (T.value = Re.value[0]), navigator.mediaDevices.addEventListener("devicechange", async (e) => {
+				await Q();
+			}), window.addEventListener("resize", Je), qe(), Me.value) {
+				I = setTimeout(B, 3e3);
+				let e = window.DeviceOrientationEvent;
+				e && typeof e.requestPermission == "function" ? Ne() : V();
+			}
+			await ee(), ke.value = !0;
+		}), te(() => {
+			D.value = !1, O.value = !1, Z(), J(), window.removeEventListener("resize", Je), window.removeEventListener("devicemotion", Pe, !0), I && clearTimeout(I), z();
+		}), (r, a) => (v(), f("div", { class: g(["camera", We.value]) }, [
+			p("div", le, [
+				R.value ? d("", !0) : (v(), f("div", ue, [m(n, { color: "#000" }, {
+					default: ae(() => [p("span", {
+						class: g("d-block text-center"),
+						innerHTML: r.$t("camera.waitForCameraNotification")
+					}, null, 8, de)]),
+					_: 1
+				})])),
+				oe(p("div", {
+					class: g(["camera__video-wrapper", U.value ? `aspect-ratio--${U.value}` : ""]),
+					style: _({
+						aspectRatio: Le.value || void 0,
+						transform: M.value === 1 ? void 0 : `scale(${M.value})`
+					})
+				}, [p("video", {
+					ref_key: "camera",
+					ref: x,
+					class: "camera__video",
+					style: _({
+						filter: h.filter === "grayscale" ? "grayscale(100%)" : h.filter === "sepia" ? "sepia(100%)" : "none",
+						transform: e.correctOrientation && N.value ? "rotate(180deg)" : void 0
+					}),
+					autoplay: "",
+					muted: "",
+					playsinline: ""
+				}, null, 4), e.tintColor ? (v(), f("div", {
+					key: 0,
+					class: "camera__tint-overlay",
+					style: _({
+						backgroundColor: e.tintColor,
+						opacity: e.tintIntensity,
+						mixBlendMode: "multiply"
+					})
+				}, null, 4)) : d("", !0)], 6), [[re, R.value]]),
+				oe(p("canvas", {
+					ref_key: "canvas",
+					ref: S,
+					class: "camera__canvas",
+					width: k.value,
+					height: A.value
+				}, null, 8, fe), [[re, O.value]]),
+				j.value ? (v(), f("div", pe, [(v(), f("p", {
+					class: "countdown",
+					key: j.value,
+					innerHTML: j.value,
+					"data-countdown": j.value
+				}, null, 8, me))])) : d("", !0),
+				e.enableGuide && D.value && R.value ? (v(), f("img", {
+					key: 2,
+					class: "camera__guide",
+					src: e.guideSrc
+				}, null, 8, he)) : d("", !0),
+				e.enableZoomSlider ? (v(), f("div", ge, [m(s, {
+					modelValue: M.value,
+					"onUpdate:modelValue": a[0] ||= (e) => M.value = e
+				}, null, 8, ["modelValue"])])) : d("", !0)
+			]),
+			p("div", _e, [p("div", ve, [p("div", ye, [p("div", be, [p("div", xe, [p("button", {
+				type: "button",
+				class: "camera__toggle btn btn-primary",
+				onClick: tt
+			}, [D.value ? (v(), f("span", Ce, b(r.$t("common.pause")), 1)) : (v(), f("span", Se, b(r.$t("common.play")), 1))]), p("button", {
+				type: "button",
+				class: "camera__capture btn btn-primary",
+				onClick: $
+			}, b(r.$t("camera.capture")), 1)])])])])]),
+			(e.enableSwitchCamera || e.enableSelectDevice) && ze.value && ze.value.length > 1 ? (v(), f("div", we, [p("div", Te, [e.enableSelectDevice ? (v(), u(i, {
+				key: 0,
+				modelValue: Ue.value,
+				"onUpdate:modelValue": a[1] ||= (e) => Ue.value = e,
+				options: He.value,
+				class: "w-100"
+			}, null, 8, ["modelValue", "options"])) : d("", !0)]), p("div", Ee, [e.enableSwitchCamera ? (v(), f("button", {
+				key: 0,
+				class: "btn",
+				onClick: se(nt, ["prevent"])
+			}, [m(t, { symbol: "switch-camera" })])) : d("", !0)])])) : d("", !0)
+		], 2));
+	}
+});
+//#endregion
+export { x as default };

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

@@ -0,0 +1,6 @@
+import e from "./base-map.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                         */
+//#region src/components/molecules/base-map/base-map.vue
+var t = e;
+//#endregion
+export { t as default };