ablok-components 0.3.115 → 0.3.116

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.
@@ -6,7 +6,7 @@ import { useCameraFilter as i } from "../../../composables/useCameraFilter.js";
6
6
  import a from "../../atoms/zoom-slider/zoom-slider.js";
7
7
  import o from "../../../assets/img/guide.js";
8
8
  import { computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createVNode as f, defineComponent as p, nextTick as ee, normalizeClass as m, normalizeStyle as h, onBeforeUnmount as te, onMounted as ne, openBlock as g, ref as _, toDisplayString as v, vShow as re, watch as ie, withCtx as ae, withDirectives as oe, withModifiers as se } from "vue";
9
- import { debounce as ce } from "lodash";
9
+ import ce from "lodash";
10
10
  //#region src/components/molecules/base-camera/base-camera.vue?vue&type=script&async=true&setup=true&lang.ts
11
11
  var le = { class: "camera__preview" }, ue = {
12
12
  key: 0,
@@ -60,7 +60,7 @@ var le = { class: "camera__preview" }, ue = {
60
60
  width: 720,
61
61
  height: 1280
62
62
  }
63
- }, y = /*@__PURE__*/ p({
63
+ }, ke = /*@__PURE__*/ p({
64
64
  ...De,
65
65
  props: {
66
66
  modelValue: { type: null },
@@ -140,19 +140,19 @@ var le = { class: "camera__preview" }, ue = {
140
140
  },
141
141
  emits: ["update:modelValue"],
142
142
  setup(o, { expose: p, emit: De }) {
143
- let y = o, ke = De, b = _(), x = _(), Ae = _(!1), S = _([]), C = _(), w = _(), T = _(), E = _(!1), D = _(!1), O = _(0), k = _(0), A = _(), j = _(y.zoom || 1), je = _(!1), M = _(!1), N = _(null), P = _(!1), F, I, Me = typeof window < "u" && "DeviceMotionEvent" in window && (window.matchMedia?.("(pointer: coarse)")?.matches || "ontouchstart" in window), Ne = s(() => y.correctOrientation && Me), L = s(() => Ae.value && (!Ne.value || P.value));
143
+ let { debounce: ke } = ce, y = o, Ae = De, b = _(), x = _(), je = _(!1), S = _([]), C = _(), w = _(), T = _(), E = _(!1), D = _(!1), O = _(0), k = _(0), A = _(), j = _(y.zoom || 1), Me = _(!1), M = _(!1), N = _(null), P = _(!1), F, I, Ne = typeof window < "u" && "DeviceMotionEvent" in window && (window.matchMedia?.("(pointer: coarse)")?.matches || "ontouchstart" in window), Pe = s(() => y.correctOrientation && Ne), L = s(() => je.value && (!Pe.value || P.value));
144
144
  function R() {
145
145
  I &&= (window.removeEventListener("pointerdown", I, !0), window.removeEventListener("touchend", I, !0), void 0);
146
146
  }
147
147
  function z() {
148
148
  P.value = !0, F &&= (clearTimeout(F), void 0), R();
149
149
  }
150
- function Pe() {
150
+ function Fe() {
151
151
  I || (I = () => {
152
152
  B();
153
153
  }, window.addEventListener("pointerdown", I, !0), window.addEventListener("touchend", I, !0));
154
154
  }
155
- function Fe(e) {
155
+ function Ie(e) {
156
156
  let t = e.accelerationIncludingGravity;
157
157
  if (!t || t.x == null || t.y == null) return;
158
158
  let n = Math.round(Math.atan2(t.x, t.y) * 180 / Math.PI);
@@ -164,13 +164,13 @@ var le = { class: "camera__preview" }, ue = {
164
164
  P.value || z();
165
165
  }
166
166
  async function B() {
167
- if (!(!y.correctOrientation || je.value)) try {
167
+ if (!(!y.correctOrientation || Me.value)) try {
168
168
  let e = window.DeviceOrientationEvent, t = window.DeviceMotionEvent;
169
169
  if (e && typeof e.requestPermission == "function" && await e.requestPermission() !== "granted") {
170
170
  z();
171
171
  return;
172
172
  }
173
- t && typeof t.requestPermission == "function" && await t.requestPermission().catch(() => {}), window.addEventListener("devicemotion", Fe, !0), je.value = !0, R();
173
+ t && typeof t.requestPermission == "function" && await t.requestPermission().catch(() => {}), window.addEventListener("devicemotion", Ie, !0), Me.value = !0, R();
174
174
  } catch (e) {
175
175
  console.error(e, "enableMotion: failed"), z();
176
176
  }
@@ -178,22 +178,22 @@ var le = { class: "camera__preview" }, ue = {
178
178
  let V = s(() => ({
179
179
  ...Oe,
180
180
  ...y.resolutions
181
- })), Ie = s(() => Object.values(V.value)[0]);
182
- function Le(e) {
181
+ })), Le = s(() => Object.values(V.value)[0]);
182
+ function Re(e) {
183
183
  return String(e || "").trim().toLowerCase().replace(/\s+/g, "").replace(/[:/]/g, "x");
184
184
  }
185
185
  let H = s(() => {
186
186
  if (V.value[y.ratio]) return y.ratio;
187
- let e = Le(y.ratio);
187
+ let e = Re(y.ratio);
188
188
  if (V.value[e]) return e;
189
- }), U = s(() => H.value ? V.value[H.value] : Ie.value), Re = s(() => {
189
+ }), U = s(() => H.value ? V.value[H.value] : Le.value), ze = s(() => {
190
190
  let e = H.value ? V.value[H.value] : void 0;
191
191
  return e ? `${e.width} / ${e.height}` : void 0;
192
- }), W = s(() => S.value.filter((e) => e.kind === "videoinput")), ze = s(() => S.value.filter((e) => e.kind === "audioinput")), G = _([]), K = s(() => W.value.filter((e) => !G.value.includes(e.deviceId)));
193
- function Be(e) {
192
+ }), W = s(() => S.value.filter((e) => e.kind === "videoinput")), Be = s(() => S.value.filter((e) => e.kind === "audioinput")), G = _([]), K = s(() => W.value.filter((e) => !G.value.includes(e.deviceId)));
193
+ function Ve(e) {
194
194
  e && !G.value.includes(e) && (G.value = [...G.value, e]);
195
195
  }
196
- function Ve(e) {
196
+ function He(e) {
197
197
  let t = W.value;
198
198
  if (!t.length) return;
199
199
  let n = t.findIndex((t) => t.deviceId === e);
@@ -202,10 +202,10 @@ var le = { class: "camera__preview" }, ue = {
202
202
  if (r && !G.value.includes(r.deviceId)) return r;
203
203
  }
204
204
  }
205
- let He = s(() => K.value.map((e, t) => ({
205
+ let Ue = s(() => K.value.map((e, t) => ({
206
206
  text: e.label.slice(0, e.label.indexOf("(")) || `Camera ${t + 1}`,
207
207
  value: e.deviceId
208
- }))), Ue = s({
208
+ }))), We = s({
209
209
  get() {
210
210
  return C.value && C.value.deviceId;
211
211
  },
@@ -218,33 +218,33 @@ var le = { class: "camera__preview" }, ue = {
218
218
  return w.value && w.value.deviceId;
219
219
  },
220
220
  set(e) {
221
- w.value = ze.value.find((t) => t.deviceId === e);
221
+ w.value = Be.value.find((t) => t.deviceId === e);
222
222
  }
223
223
  });
224
224
  let q = s(() => {
225
225
  let e = C.value && W.value.findIndex((e) => e.deviceId === C.value?.deviceId);
226
226
  return y.enableMirrorCamera && e === 0 ? "mirror-cam" : "";
227
- }), We = s(() => {
227
+ }), Ge = s(() => {
228
228
  let e = C.value && S.value.findIndex((e) => e.deviceId === C.value?.deviceId);
229
229
  return q.value ? `${q.value} mirror-device-${e}` : "";
230
- }), { tintRgb: Ge, applyFilterToCanvas: Ke } = i(y);
231
- function qe() {
230
+ }), { tintRgb: Ke, applyFilterToCanvas: qe } = i(y);
231
+ function Je() {
232
232
  if (H.value && U.value) {
233
233
  O.value = U.value.width, k.value = U.value.height;
234
234
  return;
235
235
  }
236
236
  O.value = b.value.parentElement && b.value.parentElement.clientWidth, k.value = b.value.parentElement && b.value.parentElement.clientHeight;
237
237
  }
238
- let Je = ce(() => {
239
- qe();
238
+ let Ye = ke(() => {
239
+ Je();
240
240
  }, 300, {
241
241
  trailing: !0,
242
242
  leading: !1
243
243
  });
244
- function J(e) {
244
+ function Xe(e) {
245
245
  return new Promise((t) => setTimeout(t, e));
246
246
  }
247
- async function Ye() {
247
+ async function Ze() {
248
248
  let e = U.value ? {
249
249
  width: U.value.width,
250
250
  height: U.value.height
@@ -272,66 +272,66 @@ var le = { class: "camera__preview" }, ue = {
272
272
  } catch (e) {
273
273
  let t = e && e.name;
274
274
  if (t === "NotReadableError" || t === "AbortError") {
275
- await J(500);
275
+ await Xe(500);
276
276
  continue;
277
277
  }
278
278
  break;
279
279
  }
280
280
  }
281
- function Y() {
281
+ function J() {
282
282
  b.value && b.value.srcObject && (b.value.srcObject.getTracks().forEach((e) => {
283
283
  e.stop();
284
284
  }), b.value.srcObject = null);
285
285
  }
286
- let X = 0, Z, Xe;
287
- function Q() {
288
- Z &&= (clearTimeout(Z), void 0), Xe &&= (Xe(), void 0);
286
+ let Y = 0, X, Qe;
287
+ function Z() {
288
+ X &&= (clearTimeout(X), void 0), Qe &&= (Qe(), void 0);
289
289
  }
290
- function Ze(e) {
291
- Be(e);
292
- let t = Ve(e);
290
+ function $e(e) {
291
+ Ve(e);
292
+ let t = He(e);
293
293
  t && t.deviceId !== e && (C.value = t);
294
294
  }
295
- function Qe(e) {
296
- Q();
295
+ function et(e) {
296
+ Z();
297
297
  let t = C.value && C.value.deviceId, n = b.value;
298
298
  if (!t || !n) return;
299
299
  let r = n.srcObject && n.srcObject.getVideoTracks?.()[0];
300
300
  if (!r || typeof r.addEventListener != "function" || n.videoWidth > 0) return;
301
301
  let i = () => {
302
- if (Q(), e !== X || !b.value) return;
303
- let n = Ve(t);
304
- n && n.deviceId !== t && (Y(), Ze(t));
302
+ if (Z(), e !== Y || !b.value) return;
303
+ let n = He(t);
304
+ n && n.deviceId !== t && (J(), $e(t));
305
305
  }, a = () => {
306
- e === X && b.value && b.value.videoWidth > 0 && Q();
306
+ e === Y && b.value && b.value.videoWidth > 0 && Z();
307
307
  }, o = () => {
308
308
  i();
309
309
  };
310
- r.addEventListener("unmute", a), r.addEventListener("ended", o), Xe = () => {
310
+ r.addEventListener("unmute", a), r.addEventListener("ended", o), Qe = () => {
311
311
  r.removeEventListener("unmute", a), r.removeEventListener("ended", o);
312
- }, Z = setTimeout(() => {
313
- Z = void 0, !(e !== X || !b.value) && (b.value.videoWidth === 0 ? i() : Q());
312
+ }, X = setTimeout(() => {
313
+ X = void 0, !(e !== Y || !b.value) && (b.value.videoWidth === 0 ? i() : Z());
314
314
  }, 8e3);
315
315
  }
316
- let $e = 0;
317
- async function $() {
318
- let e = ++X;
319
- Q();
316
+ let tt = 0;
317
+ async function Q() {
318
+ let e = ++Y;
319
+ Z();
320
320
  let t = !!(b.value && b.value.srcObject);
321
- if (Y(), t && (await J(350), e !== X)) return;
322
- let n = await Ye();
323
- if (e !== X) {
321
+ if (J(), t && (await Xe(350), e !== Y)) return;
322
+ let n = await Ze();
323
+ if (e !== Y) {
324
324
  n?.getTracks?.().forEach((e) => e.stop());
325
325
  return;
326
326
  }
327
327
  if (n && b.value) {
328
- $e = 0, b.value.srcObject = n, b.value.muted = !0;
328
+ tt = 0, b.value.srcObject = n, b.value.muted = !0;
329
329
  try {
330
330
  await b.value.play?.();
331
331
  } catch {}
332
- Qe(e);
332
+ et(e);
333
333
  } else if (!n && C.value) {
334
- $e < 2 && ($e++, await J(600), e === X && await $());
334
+ tt < 2 && (tt++, await Xe(600), e === Y && await Q());
335
335
  return;
336
336
  }
337
337
  return S.value = await navigator.mediaDevices.enumerateDevices(), {
@@ -339,46 +339,46 @@ var le = { class: "camera__preview" }, ue = {
339
339
  devices: S.value
340
340
  };
341
341
  }
342
- function et() {
343
- E.value ? (E.value = !1, D.value = !1, Y()) : (E.value = !0, $());
342
+ function nt() {
343
+ E.value ? (E.value = !1, D.value = !1, J()) : (E.value = !0, Q());
344
344
  }
345
- function tt() {
346
- C.value = void 0, T.value = T.value === "user" ? "environment" : "user", $();
345
+ function rt() {
346
+ C.value = void 0, T.value = T.value === "user" ? "environment" : "user", Q();
347
347
  }
348
- async function nt(e, t) {
349
- e && (!t || e.deviceId !== t.deviceId) && await $();
348
+ async function it(e, t) {
349
+ e && (!t || e.deviceId !== t.deviceId) && await Q();
350
350
  }
351
- ie(() => C.value, nt), ie(() => w.value, nt);
352
- function rt() {
353
- y.countdown ? (A.value = A.value ? A.value - 1 : y.countdown, A.value ? setTimeout(rt, 1e3) : ot()) : ot();
351
+ ie(() => C.value, it), ie(() => w.value, it);
352
+ function $() {
353
+ y.countdown ? (A.value = A.value ? A.value - 1 : y.countdown, A.value ? setTimeout($, 1e3) : st()) : st();
354
354
  }
355
355
  p({
356
- onCapture: rt,
356
+ onCapture: $,
357
357
  enableMotion: B,
358
358
  camera: b.value,
359
359
  zoom: j
360
360
  });
361
- function it() {
361
+ function at() {
362
362
  if (!y.correctOrientation || N.value == null) return 0;
363
363
  let e = ((N.value - 180) % 360 + 360) % 360;
364
364
  return (-1 * (Math.round(e / 90) * 90 % 360) % 360 + 360) % 360;
365
365
  }
366
- function at(e, t, n, r, i) {
366
+ function ot(e, t, n, r, i) {
367
367
  let a = x.value.width, o = x.value.height;
368
368
  e.translate(a / 2, o / 2), q.value && e.scale(-1, 1), e.rotate(n * Math.PI / 180);
369
369
  let s = o, c = a, l = Math.max(s / r, c / i) * (j.value && j.value > 0 ? j.value : 1), u = r * l, d = i * l;
370
370
  e.drawImage(t, -u / 2, -d / 2, u, d);
371
371
  }
372
- function ot() {
372
+ function st() {
373
373
  D.value = !0;
374
374
  let e = x.value.getContext("2d"), t = b.value, n = t && t.srcObject && t.srcObject.getTracks(), { aspectRatio: r, width: i, height: a } = n.length && n[0].getSettings(), o = t?.videoWidth || i || O.value, s = t?.videoHeight || a || k.value, c = o && s ? o / s : r, l = U.value || {
375
375
  width: o,
376
376
  height: s
377
377
  }, u = l?.width || o, d = H.value ? l?.height || s : Math.round(u / c), f = u / d;
378
378
  if (x.value.width = u, x.value.height = d, !o || !s || !c) return;
379
- let p = it();
379
+ let p = at();
380
380
  if (e.save(), p === 90 || p === 270) {
381
- at(e, t, p, o, s), e.restore(), Ke(e, x.value.width, x.value.height), st(x.value.toDataURL("image/png"));
381
+ ot(e, t, p, o, s), e.restore(), qe(e, x.value.width, x.value.height), ct(x.value.toDataURL("image/png"));
382
382
  return;
383
383
  }
384
384
  if (p === 180 && (e.translate(x.value.width, x.value.height), e.scale(-1, -1)), q.value && (e.translate(x.value.width, 0), e.scale(-1, 1)), y.enableCropImage) {
@@ -395,11 +395,11 @@ var le = { class: "camera__preview" }, ue = {
395
395
  q.value && (i = x.value.width - i - n), e.drawImage(t, u, d, c, l, i, a, n, r);
396
396
  } else q.value && (i = x.value.width - i - n), e.drawImage(t, 0, 0, o, s, i, a, n, r);
397
397
  }
398
- e.restore(), Ke(e, x.value.width, x.value.height), st(x.value.toDataURL("image/png"));
398
+ e.restore(), qe(e, x.value.width, x.value.height), ct(x.value.toDataURL("image/png"));
399
399
  }
400
- function st(e) {
400
+ function ct(e) {
401
401
  let t = n(e);
402
- ke("update:modelValue", {
402
+ Ae("update:modelValue", {
403
403
  name: `cam-pic-${(/* @__PURE__ */ new Date()).toISOString()}`,
404
404
  id: `cam-pic-${(/* @__PURE__ */ new Date()).toISOString()}`,
405
405
  blob: t,
@@ -407,19 +407,19 @@ var le = { class: "camera__preview" }, ue = {
407
407
  });
408
408
  }
409
409
  return ne(async () => {
410
- await $(), E.value = !0, T.value = y.defaultRearCamera ? "environment" : "user";
410
+ await Q(), E.value = !0, T.value = y.defaultRearCamera ? "environment" : "user";
411
411
  let e = y.defaultRearCamera && W.value.length > 1 ? W.value[W.value.length - 1] : W.value[0];
412
- if (C.value = e, y.enableAudio && (w.value = ze.value[0]), navigator.mediaDevices.addEventListener("devicechange", async (e) => {
413
- await $();
414
- }), window.addEventListener("resize", Je), qe(), Ne.value) {
412
+ if (C.value = e, y.enableAudio && (w.value = Be.value[0]), navigator.mediaDevices.addEventListener("devicechange", async (e) => {
413
+ await Q();
414
+ }), window.addEventListener("resize", Ye), Je(), Pe.value) {
415
415
  F = setTimeout(z, 3e3);
416
416
  let e = window.DeviceOrientationEvent;
417
- e && typeof e.requestPermission == "function" ? Pe() : B();
417
+ e && typeof e.requestPermission == "function" ? Fe() : B();
418
418
  }
419
- await ee(), Ae.value = !0;
419
+ await ee(), je.value = !0;
420
420
  }), te(() => {
421
- E.value = !1, D.value = !1, Q(), Y(), window.removeEventListener("resize", Je), window.removeEventListener("devicemotion", Fe, !0), F && clearTimeout(F), R();
422
- }), (n, i) => (g(), u("div", { class: m(["camera", We.value]) }, [
421
+ E.value = !1, D.value = !1, Z(), J(), window.removeEventListener("resize", Ye), window.removeEventListener("devicemotion", Ie, !0), F && clearTimeout(F), R();
422
+ }), (n, i) => (g(), u("div", { class: m(["camera", Ge.value]) }, [
423
423
  d("div", le, [
424
424
  L.value ? l("", !0) : (g(), u("div", ue, [f(t, { color: "#000" }, {
425
425
  default: ae(() => [d("span", {
@@ -431,7 +431,7 @@ var le = { class: "camera__preview" }, ue = {
431
431
  oe(d("div", {
432
432
  class: m(["camera__video-wrapper", H.value ? `aspect-ratio--${H.value}` : ""]),
433
433
  style: h({
434
- aspectRatio: Re.value || void 0,
434
+ aspectRatio: ze.value || void 0,
435
435
  transform: j.value === 1 ? void 0 : `scale(${j.value})`
436
436
  })
437
437
  }, [d("video", {
@@ -480,25 +480,25 @@ var le = { class: "camera__preview" }, ue = {
480
480
  d("div", _e, [d("div", ve, [d("div", ye, [d("div", be, [d("div", xe, [d("button", {
481
481
  type: "button",
482
482
  class: "camera__toggle btn btn-primary",
483
- onClick: et
483
+ onClick: nt
484
484
  }, [E.value ? (g(), u("span", Ce, v(n.$t("common.pause")), 1)) : (g(), u("span", Se, v(n.$t("common.play")), 1))]), d("button", {
485
485
  type: "button",
486
486
  class: "camera__capture btn btn-primary",
487
- onClick: rt
487
+ onClick: $
488
488
  }, v(n.$t("camera.capture")), 1)])])])])]),
489
489
  (o.enableSwitchCamera || o.enableSelectDevice) && K.value && K.value.length > 1 ? (g(), u("div", we, [d("div", Te, [o.enableSelectDevice ? (g(), c(r, {
490
490
  key: 0,
491
- modelValue: Ue.value,
492
- "onUpdate:modelValue": i[1] ||= (e) => Ue.value = e,
493
- options: He.value,
491
+ modelValue: We.value,
492
+ "onUpdate:modelValue": i[1] ||= (e) => We.value = e,
493
+ options: Ue.value,
494
494
  class: "w-100"
495
495
  }, null, 8, ["modelValue", "options"])) : l("", !0)]), d("div", Ee, [o.enableSwitchCamera ? (g(), u("button", {
496
496
  key: 0,
497
497
  class: "btn",
498
- onClick: se(tt, ["prevent"])
498
+ onClick: se(rt, ["prevent"])
499
499
  }, [f(e, { symbol: "switch-camera" })])) : l("", !0)])])) : l("", !0)
500
500
  ], 2));
501
501
  }
502
502
  });
503
503
  //#endregion
504
- export { y as default };
504
+ export { ke as default };
@@ -1,5 +1,5 @@
1
1
  import { createElementBlock as e, defineComponent as t, normalizeClass as n, normalizeStyle as r, onBeforeUnmount as i, onMounted as a, openBlock as o, ref as s, renderSlot as c } from "vue";
2
- import { debounce as l } from "lodash";
2
+ import l from "lodash";
3
3
  import u from "html2canvas";
4
4
  //#region src/components/molecules/dom-renderer/dom-renderer.vue?vue&type=script&setup=true&lang.ts
5
5
  var d = /*@__PURE__*/ t({
@@ -40,55 +40,55 @@ var d = /*@__PURE__*/ t({
40
40
  },
41
41
  emits: ["update:modelValue", "update:pending"],
42
42
  setup(t, { emit: d }) {
43
- let f = t, p = d, m = s(), h = s(""), g = s(), _ = s(!0);
44
- async function v() {
45
- if (!m.value || !_.value) return "";
46
- let e = m.value;
43
+ let { debounce: f } = l, p = t, m = d, h = s(), g = s(""), _ = s(), v = s(!0);
44
+ async function y() {
45
+ if (!h.value || !v.value) return "";
46
+ let e = h.value;
47
47
  if (!e.isConnected) return "";
48
48
  try {
49
- f.emitPending && p("update:pending", !0);
49
+ p.emitPending && m("update:pending", !0);
50
50
  let t = e.firstElementChild;
51
51
  if (!t) return "";
52
52
  let n = await u(t, {
53
53
  backgroundColor: "rgba(0, 0, 0, 0)",
54
54
  scale: 1,
55
- ...f.options
55
+ ...p.options
56
56
  });
57
- if (!_.value || !m.value || !e.isConnected) return "";
57
+ if (!v.value || !h.value || !e.isConnected) return "";
58
58
  let r = n.toDataURL();
59
- if (p("update:modelValue", r), f.emitPending && p("update:pending", !1), f.debug) {
59
+ if (m("update:modelValue", r), p.emitPending && m("update:pending", !1), p.debug) {
60
60
  let e = new Image();
61
61
  e.src = r, document.body.appendChild(e);
62
62
  }
63
63
  return r;
64
64
  } catch (e) {
65
- return _.value && f.emitPending && p("update:pending", !1), console.warn("dom-renderer: Render failed", e), "";
65
+ return v.value && p.emitPending && m("update:pending", !1), console.warn("dom-renderer: Render failed", e), "";
66
66
  }
67
67
  }
68
- let y = l(async () => {
69
- h.value = await v();
68
+ let b = f(async () => {
69
+ g.value = await y();
70
70
  }, 300, {
71
71
  trailing: !0,
72
72
  leading: !1
73
73
  });
74
74
  return a(() => {
75
- let e = m.value;
76
- f.renderUpdates && (g.value = new MutationObserver(async (t) => {
77
- !_.value || !e.isConnected || (f.emitPending && p("update:pending", !0), y());
78
- }), g.value.observe(e, {
75
+ let e = h.value;
76
+ p.renderUpdates && (_.value = new MutationObserver(async (t) => {
77
+ !v.value || !e.isConnected || (p.emitPending && m("update:pending", !0), b());
78
+ }), _.value.observe(e, {
79
79
  attributes: !0,
80
80
  childList: !0,
81
81
  characterData: !0,
82
82
  subtree: !0
83
83
  })), setTimeout(() => {
84
- f.emitPending && p("update:pending", !0), y();
84
+ p.emitPending && m("update:pending", !0), b();
85
85
  }, 500);
86
86
  }), i(() => {
87
- _.value = !1, g.value && g.value.disconnect(), y.cancel();
87
+ v.value = !1, _.value && _.value.disconnect(), b.cancel();
88
88
  }), (i, a) => (o(), e("div", {
89
89
  class: n(["dom-renderer", { "off-screen": !t.debug }]),
90
90
  ref_key: "renderer",
91
- ref: m,
91
+ ref: h,
92
92
  style: r(t.fixedWidth > 0 ? { width: `${t.fixedWidth}px` } : {})
93
93
  }, [c(i.$slots, "default")], 6));
94
94
  }
@@ -2,7 +2,7 @@ import e from "../../atoms/base-image/base-image.js";
2
2
  import { resizeImageElementToDataUrl as t } from "../../../utilities/helpers.js";
3
3
  import n from "../../atoms/base-input/base-input.js";
4
4
  import { createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, onMounted as l, openBlock as u, ref as d, renderSlot as f, toDisplayString as p, useTemplateRef as m, vModelText as h, watch as g, withDirectives as _, withModifiers as v } from "vue";
5
- import { debounce as y } from "lodash";
5
+ import y from "lodash";
6
6
  //#region src/components/molecules/image-resize/image-resize.vue?vue&type=script&setup=true&lang.ts
7
7
  var b = {
8
8
  key: 0,
@@ -26,55 +26,55 @@ var b = {
26
26
  },
27
27
  emits: ["update:modelValue"],
28
28
  setup(c, { emit: N }) {
29
- let P = N, F = m("image"), I = d(1), L = d(0), R = d(0), z = d(null), B = d(0), V = d(0);
30
- function H() {
31
- z.value && (P("update:modelValue", z.value), I.value = 1);
29
+ let { debounce: P } = y, F = N, I = m("image"), L = d(1), R = d(0), z = d(0), B = d(null), V = d(0), H = d(0);
30
+ function U() {
31
+ B.value && (F("update:modelValue", B.value), L.value = 1);
32
32
  }
33
- let U = () => {
34
- if (!B.value || !V.value) return;
35
- L.value = Math.round(B.value * I.value);
36
- let e = V.value / B.value;
37
- R.value = Math.round(L.value * e);
38
- let n = F.value?.$el;
33
+ let W = () => {
34
+ if (!V.value || !H.value) return;
35
+ R.value = Math.round(V.value * L.value);
36
+ let e = H.value / V.value;
37
+ z.value = Math.round(R.value * e);
38
+ let n = I.value?.$el;
39
39
  if (!n) return;
40
40
  let r = n.querySelector("img");
41
- r && (z.value = t(r, L.value, R.value, "image/png"));
42
- }, W = y(U, 300);
43
- return g(I, () => {
44
- B.value && (L.value = Math.round(B.value * I.value), W());
45
- }), g(L, () => {
46
- if (!B.value || L.value === 0) return;
47
- let e = L.value / B.value;
48
- Math.abs(e - I.value) > 1e-4 && (I.value = Number(e.toFixed(4)));
49
- let t = V.value / B.value;
50
- R.value = Math.round(L.value * t), W();
41
+ r && (B.value = t(r, R.value, z.value, "image/png"));
42
+ }, G = P(W, 300);
43
+ return g(L, () => {
44
+ V.value && (R.value = Math.round(V.value * L.value), G());
51
45
  }), g(R, () => {
52
46
  if (!V.value || R.value === 0) return;
53
47
  let e = R.value / V.value;
54
- Math.abs(e - I.value) > 1e-4 && (I.value = Number(e.toFixed(4)));
55
- let t = B.value / V.value;
56
- L.value = Math.round(R.value * t), W();
48
+ Math.abs(e - L.value) > 1e-4 && (L.value = Number(e.toFixed(4)));
49
+ let t = H.value / V.value;
50
+ z.value = Math.round(R.value * t), G();
51
+ }), g(z, () => {
52
+ if (!H.value || z.value === 0) return;
53
+ let e = z.value / H.value;
54
+ Math.abs(e - L.value) > 1e-4 && (L.value = Number(e.toFixed(4)));
55
+ let t = V.value / H.value;
56
+ R.value = Math.round(z.value * t), G();
57
57
  }), l(() => {
58
- let e = F.value?.$el;
58
+ let e = I.value?.$el;
59
59
  if (!e) return;
60
60
  let t = e.querySelector("img");
61
61
  if (!t) return;
62
62
  let n = () => {
63
- B.value = t.naturalWidth, V.value = t.naturalHeight, U();
63
+ V.value = t.naturalWidth, H.value = t.naturalHeight, W();
64
64
  };
65
65
  t.complete ? n() : t.addEventListener("load", n);
66
66
  }), (t, l) => c.modelValue ? (u(), a("div", b, [
67
67
  o("div", x, [o("div", S, [s(e, {
68
68
  ref_key: "image",
69
- ref: F,
69
+ ref: I,
70
70
  class: "d-none",
71
71
  src: c.modelValue,
72
72
  animate: !1
73
- }, null, 8, ["src"]), z.value ? (u(), r(e, {
73
+ }, null, 8, ["src"]), B.value ? (u(), r(e, {
74
74
  key: 0,
75
75
  ref: "targetImage",
76
76
  class: "",
77
- src: z.value,
77
+ src: B.value,
78
78
  animate: !1
79
79
  }, null, 8, ["src"])) : i("", !0)])]),
80
80
  o("div", C, [
@@ -82,31 +82,31 @@ var b = {
82
82
  type: "range",
83
83
  class: "form-range",
84
84
  id: "scaleRange",
85
- "onUpdate:modelValue": l[0] ||= (e) => I.value = e,
85
+ "onUpdate:modelValue": l[0] ||= (e) => L.value = e,
86
86
  min: "0",
87
87
  max: "2",
88
88
  step: "0.0001"
89
- }, null, 512), [[h, I.value]])])]),
89
+ }, null, 512), [[h, L.value]])])]),
90
90
  o("div", E, [o("div", D, [s(n, {
91
91
  type: "number",
92
92
  class: "form-input mb-0",
93
93
  id: "targetWidth",
94
- modelValue: L.value,
95
- "onUpdate:modelValue": l[1] ||= (e) => L.value = e
94
+ modelValue: R.value,
95
+ "onUpdate:modelValue": l[1] ||= (e) => R.value = e
96
96
  }, null, 8, ["modelValue"])])]),
97
97
  l[3] ||= o("div", { class: "col-auto d-flex align-items-center" }, [o("output", null, "×")], -1),
98
98
  o("div", O, [o("div", k, [s(n, {
99
99
  type: "number",
100
100
  class: "form-input mb-0",
101
101
  id: "targetHeight",
102
- modelValue: R.value,
103
- "onUpdate:modelValue": l[2] ||= (e) => R.value = e
102
+ modelValue: z.value,
103
+ "onUpdate:modelValue": l[2] ||= (e) => z.value = e
104
104
  }, null, 8, ["modelValue"])])])
105
105
  ]),
106
106
  o("div", A, [o("div", j, [f(t.$slots, "actions"), o("button", {
107
107
  class: "btn btn-sm btn-primary",
108
- disabled: !z.value,
109
- onClick: v(H, ["prevent", "stop"])
108
+ disabled: !B.value,
109
+ onClick: v(U, ["prevent", "stop"])
110
110
  }, p(t.$t("common.apply")), 9, M)])])
111
111
  ])) : i("", !0);
112
112
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "ablok-components",
3
3
  "private": false,
4
- "version": "0.3.115",
4
+ "version": "0.3.116",
5
5
  "type": "module",
6
6
  "dependencies": {
7
7
  "@tiptap/core": "^3.30.0",