ablok-components 0.3.137 → 0.3.139
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ablok-components.css +1 -1
- package/dist/ablok-components.umd.js +2 -2
- package/dist/components/molecules/input-datepicker/input-datepicker.vue_vue_type_script_setup_true_lang.js +16 -7
- package/dist/utilities/camera/CameraManager.js +49 -49
- package/dist/utilities/camera/capture.d.ts +0 -2
- package/dist/utilities/camera/capture.js +21 -38
- package/package.json +1 -1
|
@@ -5,12 +5,15 @@ import { computed as n, createBlock as r, createCommentVNode as i, createElement
|
|
|
5
5
|
import { useI18n as _ } from "vue-i18n";
|
|
6
6
|
import { de as v, enUS as y, fr as b } from "date-fns/locale";
|
|
7
7
|
//#region src/components/molecules/input-datepicker/input-datepicker.vue?vue&type=script&setup=true&lang.ts
|
|
8
|
-
var x = { class: "row" }, S = { class: "col-12" }, C = ["for", "innerHTML"], w = {
|
|
8
|
+
var x = { class: "row" }, S = { class: "col-12" }, C = ["for", "innerHTML"], w = {
|
|
9
9
|
key: 0,
|
|
10
|
-
class: "
|
|
11
|
-
},
|
|
10
|
+
class: "input--datepicker__inputs"
|
|
11
|
+
}, T = { class: "input-group justify-content-center" }, E = {
|
|
12
|
+
key: 0,
|
|
13
|
+
class: "row input--datepicker__tracks"
|
|
14
|
+
}, D = { class: "col-12 col-md-6 input--datepicker__track" }, O = { class: "col-12 col-md-6 input--datepicker__track" }, k = {
|
|
12
15
|
key: 1,
|
|
13
|
-
class: "row"
|
|
16
|
+
class: "row input--datepicker__calendar"
|
|
14
17
|
}, A = { class: "col-12" }, j = /*@__PURE__*/ s({
|
|
15
18
|
__name: "input-datepicker",
|
|
16
19
|
props: {
|
|
@@ -213,7 +216,10 @@ var x = { class: "row" }, S = { class: "col-12" }, C = ["for", "innerHTML"], w =
|
|
|
213
216
|
return Number.isNaN(t.getTime()) ? null : t.toISOString().split(".")[0];
|
|
214
217
|
}
|
|
215
218
|
let $ = (e) => (e = Array.isArray(e) ? e.map((e) => X(e)).join(" - ") : X(e), e);
|
|
216
|
-
return (n, s) => (u(), a("div", { class: c(["input
|
|
219
|
+
return (n, s) => (u(), a("div", { class: c(["input input--datepicker", {
|
|
220
|
+
"input--datepicker--inline": t.inline,
|
|
221
|
+
"input--datepicker--range": t.range
|
|
222
|
+
}]) }, [
|
|
217
223
|
f(n.$slots, "label", {}, () => [o("div", x, [o("div", S, [t.label ? (u(), a("label", {
|
|
218
224
|
key: 0,
|
|
219
225
|
for: t.id,
|
|
@@ -271,6 +277,7 @@ var x = { class: "row" }, S = { class: "col-12" }, C = ["for", "innerHTML"], w =
|
|
|
271
277
|
]))])])) : (u(), r(p(M.value), {
|
|
272
278
|
key: 1,
|
|
273
279
|
uid: `${t.id}-input-to`,
|
|
280
|
+
class: c({ "input--datepicker__combined-range": t.range && t.textRange }),
|
|
274
281
|
modelValue: q.value,
|
|
275
282
|
"onUpdate:modelValue": s[2] ||= (e) => q.value = e,
|
|
276
283
|
format: $,
|
|
@@ -280,10 +287,11 @@ var x = { class: "row" }, S = { class: "col-12" }, C = ["for", "innerHTML"], w =
|
|
|
280
287
|
disabled: t.disabled,
|
|
281
288
|
"read-only": t.readOnly,
|
|
282
289
|
required: t.required,
|
|
283
|
-
"auto-apply": !
|
|
290
|
+
"auto-apply": !t.textRange,
|
|
284
291
|
"week-start": R.value
|
|
285
292
|
}, null, 8, [
|
|
286
293
|
"uid",
|
|
294
|
+
"class",
|
|
287
295
|
"modelValue",
|
|
288
296
|
"locale",
|
|
289
297
|
"range",
|
|
@@ -291,6 +299,7 @@ var x = { class: "row" }, S = { class: "col-12" }, C = ["for", "innerHTML"], w =
|
|
|
291
299
|
"disabled",
|
|
292
300
|
"read-only",
|
|
293
301
|
"required",
|
|
302
|
+
"auto-apply",
|
|
294
303
|
"week-start"
|
|
295
304
|
])),
|
|
296
305
|
f(n.$slots, "input-append", { slotScope: "props" })
|
|
@@ -330,7 +339,7 @@ var x = { class: "row" }, S = { class: "col-12" }, C = ["for", "innerHTML"], w =
|
|
|
330
339
|
"required",
|
|
331
340
|
"week-start"
|
|
332
341
|
]))])])) : i("", !0)
|
|
333
|
-
]));
|
|
342
|
+
], 2));
|
|
334
343
|
}
|
|
335
344
|
});
|
|
336
345
|
//#endregion
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { buildFallbackChain as e, classifyFacingFromLabel as t, dedupeByFacing as n, isFatalGumError as r, isTransientGumError as i, normalizeFacing as a, pickSwitchTarget as o, toErrorCode as s } from "./constraints.js";
|
|
2
|
+
import { isAndroid as c, isIOS as l, supportsRVFC as u } from "./platform.js";
|
|
3
3
|
import { CameraError as d } from "./types.js";
|
|
4
4
|
//#region src/utilities/camera/CameraManager.ts
|
|
5
5
|
var f = 1500, p = 2, m = 300, h = [
|
|
@@ -70,52 +70,52 @@ var f = 1500, p = 2, m = 300, h = [
|
|
|
70
70
|
attachVideo(e) {
|
|
71
71
|
this.video !== e && (this.clearWatchdog(), this.video && (this.video.srcObject = null), this.video = e, e && this.stream && this.state !== "paused" && this.bindStream());
|
|
72
72
|
}
|
|
73
|
-
async start(
|
|
73
|
+
async start(n = {}) {
|
|
74
74
|
if (this.disposed) return !1;
|
|
75
75
|
if (!S.isSupported()) return this.fail(new d("unsupported", "getUserMedia is not available in this browser")), !1;
|
|
76
|
-
let
|
|
76
|
+
let o = ++this.seq;
|
|
77
77
|
this.cancelRecovery(), this.intent = "live", this.teardown(), this.error = null, this.setState("starting");
|
|
78
|
-
let
|
|
79
|
-
deviceId:
|
|
80
|
-
facing:
|
|
81
|
-
resolution:
|
|
82
|
-
strictDevice:
|
|
78
|
+
let c = n.resolution ?? this.lastGood?.resolution ?? this.opts.resolution, l = !!(n.strictDevice && n.deviceId), u = l ? void 0 : n.facing ?? (n.deviceId ? void 0 : this.opts.preferredFacing), f = e({
|
|
79
|
+
deviceId: n.deviceId,
|
|
80
|
+
facing: u,
|
|
81
|
+
resolution: c,
|
|
82
|
+
strictDevice: l
|
|
83
83
|
}), p = null, h = null;
|
|
84
84
|
for (let e of f) {
|
|
85
|
-
if (
|
|
85
|
+
if (o !== this.seq) return !1;
|
|
86
86
|
try {
|
|
87
87
|
p = await navigator.mediaDevices.getUserMedia(e.constraints);
|
|
88
88
|
break;
|
|
89
|
-
} catch (
|
|
90
|
-
if (h =
|
|
91
|
-
if (
|
|
92
|
-
if (await x(m),
|
|
89
|
+
} catch (t) {
|
|
90
|
+
if (h = t, r(t)) break;
|
|
91
|
+
if (i(t)) {
|
|
92
|
+
if (await x(m), o !== this.seq) return !1;
|
|
93
93
|
try {
|
|
94
94
|
p = await navigator.mediaDevices.getUserMedia(e.constraints);
|
|
95
95
|
break;
|
|
96
96
|
} catch (e) {
|
|
97
|
-
if (h = e,
|
|
97
|
+
if (h = e, r(e)) break;
|
|
98
98
|
}
|
|
99
99
|
}
|
|
100
100
|
}
|
|
101
101
|
}
|
|
102
|
-
if (
|
|
102
|
+
if (o !== this.seq) return p?.getTracks().forEach((e) => e.stop()), !1;
|
|
103
103
|
if (!p) {
|
|
104
|
-
let e =
|
|
104
|
+
let e = s(h);
|
|
105
105
|
return e === "not-allowed" && (this.permission = "denied"), this.fail(new d(e, C(h), h)), !1;
|
|
106
106
|
}
|
|
107
107
|
let g = p.getVideoTracks()[0];
|
|
108
108
|
if (!g) return p.getTracks().forEach((e) => e.stop()), this.fail(new d("not-found", "Stream has no video track")), !1;
|
|
109
|
-
let _ = g.getSettings(), v = _.deviceId ??
|
|
109
|
+
let _ = g.getSettings(), v = _.deviceId ?? n.deviceId ?? null, y = v ? this.probeCache.get(v) : void 0, b = a(_.facingMode) ?? y ?? t(g.label);
|
|
110
110
|
if (v && this.probeCache.set(v, b), this.stream = p, this.activeDeviceId = v, this.activeFacing = b, this.lastGood = {
|
|
111
111
|
deviceId: v,
|
|
112
|
-
resolution:
|
|
113
|
-
}, this.permission !== "granted" && (this.permission = "granted"), g.onended = this.onTrackEnded, this.readZoomCapability(g), this.readTorchCapability(g), this.setState("live"), this.armStableTimer(), this.bindStream(), this.desiredZoom !== null && this.setZoom(this.desiredZoom), await this.refreshDevices(),
|
|
114
|
-
if (!
|
|
112
|
+
resolution: c
|
|
113
|
+
}, this.permission !== "granted" && (this.permission = "granted"), g.onended = this.onTrackEnded, this.readZoomCapability(g), this.readTorchCapability(g), this.setState("live"), this.armStableTimer(), this.bindStream(), this.desiredZoom !== null && this.setZoom(this.desiredZoom), await this.refreshDevices(), o !== this.seq) return !1;
|
|
114
|
+
if (!n.deviceId && !this.autoCorrected && this.opts.preferredFacing && b && (this.autoCorrected = !0, b !== this.opts.preferredFacing)) {
|
|
115
115
|
let e = this.devices.find((e) => e.facing === this.opts.preferredFacing && e.deviceId !== v);
|
|
116
116
|
if (e) return this.start({
|
|
117
117
|
deviceId: e.deviceId,
|
|
118
|
-
resolution:
|
|
118
|
+
resolution: c,
|
|
119
119
|
strictDevice: !0
|
|
120
120
|
});
|
|
121
121
|
}
|
|
@@ -143,7 +143,7 @@ var f = 1500, p = 2, m = 300, h = [
|
|
|
143
143
|
async switchCamera() {
|
|
144
144
|
if (this.state === "starting") return !1;
|
|
145
145
|
this.devices.length === 0 && await this.refreshDevices();
|
|
146
|
-
let e =
|
|
146
|
+
let e = o(this.devices, this.activeDeviceId, this.activeFacing);
|
|
147
147
|
return e ? this.selectDevice(e.deviceId) : !1;
|
|
148
148
|
}
|
|
149
149
|
async selectDevice(e) {
|
|
@@ -228,23 +228,23 @@ var f = 1500, p = 2, m = 300, h = [
|
|
|
228
228
|
for (let t of this.listeners) t(e);
|
|
229
229
|
}
|
|
230
230
|
bindStream(e = 0) {
|
|
231
|
-
let t = this.video,
|
|
232
|
-
if (!t || !
|
|
233
|
-
this.clearWatchdog(), t.muted = !0, t.playsInline = !0, t.setAttribute("playsinline", ""), t.autoplay = !0, t.srcObject =
|
|
234
|
-
let
|
|
235
|
-
if (!
|
|
231
|
+
let t = this.video, n = this.stream;
|
|
232
|
+
if (!t || !n) return;
|
|
233
|
+
this.clearWatchdog(), t.muted = !0, t.playsInline = !0, t.setAttribute("playsinline", ""), t.autoplay = !0, t.srcObject = n, t.load(), t.play().catch(b);
|
|
234
|
+
let r = !1, i = setTimeout(() => {
|
|
235
|
+
if (!r && (o(), this.stream === n && this.state === "live")) {
|
|
236
236
|
if (e < p) {
|
|
237
237
|
t.srcObject = null, t.offsetHeight, this.bindStream(e + 1);
|
|
238
238
|
return;
|
|
239
239
|
}
|
|
240
240
|
t.readyState >= 2 && t.videoWidth > 0 || this.opts.onWarning?.(new d("first-frame", "Video did not render its first frame"));
|
|
241
241
|
}
|
|
242
|
-
}, f),
|
|
243
|
-
|
|
244
|
-
},
|
|
245
|
-
clearTimeout(
|
|
242
|
+
}, f), a = () => {
|
|
243
|
+
r || (r = !0, o());
|
|
244
|
+
}, o = () => {
|
|
245
|
+
clearTimeout(i), t.removeEventListener("loadeddata", a), t.removeEventListener("playing", a), this.watchdogCleanup = null;
|
|
246
246
|
};
|
|
247
|
-
this.watchdogCleanup =
|
|
247
|
+
this.watchdogCleanup = o, u(t) ? t.requestVideoFrameCallback(() => a()) : (t.addEventListener("loadeddata", a), t.addEventListener("playing", a));
|
|
248
248
|
}
|
|
249
249
|
clearWatchdog() {
|
|
250
250
|
this.watchdogCleanup?.(), this.watchdogCleanup = null;
|
|
@@ -302,32 +302,32 @@ var f = 1500, p = 2, m = 300, h = [
|
|
|
302
302
|
};
|
|
303
303
|
async doRefreshDevices() {
|
|
304
304
|
if (this.disposed || !navigator.mediaDevices?.enumerateDevices || this.state === "starting") return;
|
|
305
|
-
let
|
|
305
|
+
let e;
|
|
306
306
|
try {
|
|
307
|
-
|
|
307
|
+
e = await navigator.mediaDevices.enumerateDevices();
|
|
308
308
|
} catch {
|
|
309
309
|
return;
|
|
310
310
|
}
|
|
311
|
-
let r =
|
|
312
|
-
for (let e of [...this.probeCache.keys()])
|
|
313
|
-
let
|
|
311
|
+
let r = e.filter((e) => e.kind === "videoinput" && e.deviceId), i = new Set(r.map((e) => e.deviceId));
|
|
312
|
+
for (let e of [...this.probeCache.keys()]) i.has(e) || this.probeCache.delete(e);
|
|
313
|
+
let a = c() && !l() && this.permission !== "denied", o = [];
|
|
314
314
|
for (let e of r) {
|
|
315
315
|
if (this.disposed) return;
|
|
316
|
-
let
|
|
317
|
-
if (!
|
|
318
|
-
let
|
|
319
|
-
if (
|
|
320
|
-
|
|
316
|
+
let n = this.probeCache.get(e.deviceId), r = n !== void 0;
|
|
317
|
+
if (!r && a) {
|
|
318
|
+
let t = await this.probeDevice(e.deviceId);
|
|
319
|
+
if (t === void 0) continue;
|
|
320
|
+
n = t, r = !0, this.probeCache.set(e.deviceId, t);
|
|
321
321
|
}
|
|
322
|
-
|
|
322
|
+
o.push({
|
|
323
323
|
deviceId: e.deviceId,
|
|
324
324
|
label: e.label,
|
|
325
|
-
facing:
|
|
326
|
-
probed:
|
|
325
|
+
facing: n ?? t(e.label),
|
|
326
|
+
probed: r
|
|
327
327
|
});
|
|
328
328
|
}
|
|
329
|
-
let
|
|
330
|
-
this.devices =
|
|
329
|
+
let s = a ? n(o, this.activeDeviceId) : o;
|
|
330
|
+
this.devices = s, this.emit();
|
|
331
331
|
}
|
|
332
332
|
async probeDevice(e) {
|
|
333
333
|
if (e === this.activeDeviceId && this.stream) return this.probeCache.get(e) ?? this.activeFacing;
|
|
@@ -338,7 +338,7 @@ var f = 1500, p = 2, m = 300, h = [
|
|
|
338
338
|
...y
|
|
339
339
|
} });
|
|
340
340
|
let n = t.getVideoTracks()[0];
|
|
341
|
-
return
|
|
341
|
+
return a(n?.getSettings().facingMode) ?? null;
|
|
342
342
|
} catch {
|
|
343
343
|
return;
|
|
344
344
|
} finally {
|
|
@@ -20,8 +20,6 @@ export interface TintPaint {
|
|
|
20
20
|
opacity: number;
|
|
21
21
|
}
|
|
22
22
|
export declare function resolveTintPaint(color: string, intensity: number): TintPaint;
|
|
23
|
-
/** Rotation the frame needs so that "up" in the image matches "up" on screen. */
|
|
24
|
-
export declare function orientationAngle(): number;
|
|
25
23
|
export declare function captureFrame(video: HTMLVideoElement, opts: CaptureOptions): HTMLCanvasElement;
|
|
26
24
|
export declare function cssFilter(filter: Filter): string;
|
|
27
25
|
/** Fallback for engines without ctx.filter (older Safari); matches CSS filter matrices. */
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import { isIOS as e } from "./platform.js";
|
|
2
1
|
//#region src/utilities/camera/capture.ts
|
|
3
|
-
function
|
|
2
|
+
function e(e, t, n, r) {
|
|
4
3
|
let i = Math.max(n / e, r / t), a = n / i, o = r / i;
|
|
5
4
|
return {
|
|
6
5
|
sx: (e - a) / 2,
|
|
@@ -9,7 +8,7 @@ function t(e, t, n, r) {
|
|
|
9
8
|
sh: o
|
|
10
9
|
};
|
|
11
10
|
}
|
|
12
|
-
function
|
|
11
|
+
function t(e, t) {
|
|
13
12
|
let n = Math.min(1, Math.max(0, t)), r = e.match(/^#([\da-f]{3,4}|[\da-f]{6}|[\da-f]{8})$/i)?.[1];
|
|
14
13
|
if (!r) return {
|
|
15
14
|
color: e,
|
|
@@ -21,49 +20,33 @@ function n(e, t) {
|
|
|
21
20
|
opacity: 1
|
|
22
21
|
};
|
|
23
22
|
}
|
|
24
|
-
function
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
23
|
+
function n(n, a) {
|
|
24
|
+
let o = n.videoWidth, s = n.videoHeight;
|
|
25
|
+
if (!o || !s) throw Error("Video has no frame to capture yet");
|
|
26
|
+
let c = document.createElement("canvas");
|
|
27
|
+
c.width = a.width, c.height = a.height;
|
|
28
|
+
let l = c.getContext("2d");
|
|
29
|
+
if (!l) throw Error("2D canvas context unavailable");
|
|
30
|
+
let u = "filter" in l;
|
|
31
|
+
l.save(), a.mirror && (l.translate(a.width, 0), l.scale(-1, 1)), u && a.filter && a.filter !== "none" && (l.filter = r(a.filter));
|
|
32
|
+
let d = e(o, s, a.width, a.height);
|
|
33
|
+
l.drawImage(n, d.sx, d.sy, d.sw, d.sh, 0, 0, a.width, a.height), l.restore(), !u && a.filter && a.filter !== "none" && i(l, a.filter);
|
|
34
|
+
let f = a.tintColor ? t(a.tintColor, a.tintIntensity ?? 0) : null;
|
|
35
|
+
return f && f.opacity > 0 && (l.save(), l.globalAlpha = f.opacity, l.fillStyle = f.color, l.fillRect(0, 0, a.width, a.height), l.restore()), c;
|
|
30
36
|
}
|
|
31
|
-
function
|
|
32
|
-
return (Math.round(e / 90) * 90 % 360 + 360) % 360;
|
|
33
|
-
}
|
|
34
|
-
function a(i, a) {
|
|
35
|
-
let c = i.videoWidth, l = i.videoHeight;
|
|
36
|
-
if (!c || !l) throw Error("Video has no frame to capture yet");
|
|
37
|
-
let u = document.createElement("canvas");
|
|
38
|
-
u.width = a.width, u.height = a.height;
|
|
39
|
-
let d = u.getContext("2d");
|
|
40
|
-
if (!d) throw Error("2D canvas context unavailable");
|
|
41
|
-
let f = e() ? r() : 0, p = f === 90 || f === 270, m = "filter" in d;
|
|
42
|
-
if (d.save(), a.mirror && (d.translate(a.width, 0), d.scale(-1, 1)), m && a.filter && a.filter !== "none" && (d.filter = o(a.filter)), p) {
|
|
43
|
-
d.translate(a.width / 2, a.height / 2), d.rotate(-f * Math.PI / 180);
|
|
44
|
-
let e = a.height, n = a.width, r = t(c, l, e, n);
|
|
45
|
-
d.drawImage(i, r.sx, r.sy, r.sw, r.sh, -e / 2, -n / 2, e, n);
|
|
46
|
-
} else {
|
|
47
|
-
let e = t(c, l, a.width, a.height);
|
|
48
|
-
d.drawImage(i, e.sx, e.sy, e.sw, e.sh, 0, 0, a.width, a.height);
|
|
49
|
-
}
|
|
50
|
-
d.restore(), !m && a.filter && a.filter !== "none" && s(d, a.filter);
|
|
51
|
-
let h = a.tintColor ? n(a.tintColor, a.tintIntensity ?? 0) : null;
|
|
52
|
-
return h && h.opacity > 0 && (d.save(), d.globalAlpha = h.opacity, d.fillStyle = h.color, d.fillRect(0, 0, a.width, a.height), d.restore()), u;
|
|
53
|
-
}
|
|
54
|
-
function o(e) {
|
|
37
|
+
function r(e) {
|
|
55
38
|
switch (e) {
|
|
56
39
|
case "grayscale": return "grayscale(1)";
|
|
57
40
|
case "sepia": return "sepia(1)";
|
|
58
41
|
default: return "none";
|
|
59
42
|
}
|
|
60
43
|
}
|
|
61
|
-
function
|
|
44
|
+
function i(e, t) {
|
|
62
45
|
if (t === "none") return;
|
|
63
46
|
let { width: n, height: r } = e.canvas, i = e.getImageData(0, 0, n, r);
|
|
64
|
-
|
|
47
|
+
a(i.data, t), e.putImageData(i, 0, 0);
|
|
65
48
|
}
|
|
66
|
-
function
|
|
49
|
+
function a(e, t) {
|
|
67
50
|
for (let n = 0; n < e.length; n += 4) {
|
|
68
51
|
let r = e[n] ?? 0, i = e[n + 1] ?? 0, a = e[n + 2] ?? 0;
|
|
69
52
|
if (t === "grayscale") {
|
|
@@ -72,11 +55,11 @@ function c(e, t) {
|
|
|
72
55
|
} else t === "sepia" && (e[n] = Math.min(255, .393 * r + .769 * i + .189 * a), e[n + 1] = Math.min(255, .349 * r + .686 * i + .168 * a), e[n + 2] = Math.min(255, .272 * r + .534 * i + .131 * a));
|
|
73
56
|
}
|
|
74
57
|
}
|
|
75
|
-
function
|
|
58
|
+
function o(e, t = {}) {
|
|
76
59
|
let n = t.type ?? "image/jpeg", r = t.quality ?? .92;
|
|
77
60
|
return t.asBlob ? new Promise((t, i) => {
|
|
78
61
|
e.toBlob((e) => e ? t(e) : i(/* @__PURE__ */ Error("canvas.toBlob returned null")), n, r);
|
|
79
62
|
}) : Promise.resolve(e.toDataURL(n, r));
|
|
80
63
|
}
|
|
81
64
|
//#endregion
|
|
82
|
-
export {
|
|
65
|
+
export { i as applyPixelFilter, n as captureFrame, e as coverCrop, r as cssFilter, o as exportCanvas, a as filterPixels, t as resolveTintPaint };
|