vue3-ciallo-viewer
Version:
579 lines (578 loc) • 24.4 kB
JavaScript
import { defineComponent as Z, ref as g, inject as ue, onBeforeMount as me, onMounted as ee, openBlock as H, createElementBlock as P, provide as ce, nextTick as ve, onBeforeUnmount as we, watch as Te, normalizeStyle as de, withModifiers as K, createElementVNode as j, Fragment as Ne, renderList as Oe, createVNode as Q, toDisplayString as fe, createCommentVNode as pe, getCurrentInstance as Ce, renderSlot as Ie, render as ge } from "vue";
/**
* @vue/shared v3.5.12
* (c) 2018-present Yuxi (Evan) You and Vue contributors
* @license MIT
**/
process.env.NODE_ENV !== "production" && Object.freeze({});
process.env.NODE_ENV !== "production" && Object.freeze([]);
const he = Object.assign, Ve = (n) => typeof n == "function", We = (n) => typeof n == "symbol", je = (n, t) => !Object.is(n, t);
/**
* @vue/reactivity v3.5.12
* (c) 2018-present Yuxi (Evan) You and Vue contributors
* @license MIT
**/
function Fe(n, ...t) {
console.warn(`[Vue warn] ${n}`, ...t);
}
let y, xe = 0, X, z;
function Le(n, t = !1) {
if (n.flags |= 8, t) {
n.next = z, z = n;
return;
}
n.next = X, X = n;
}
function Re() {
xe++;
}
function He() {
if (--xe > 0)
return;
if (z) {
let t = z;
for (z = void 0; t; ) {
const e = t.next;
t.next = void 0, t.flags &= -9, t = e;
}
}
let n;
for (; X; ) {
let t = X;
for (X = void 0; t; ) {
const e = t.next;
if (t.next = void 0, t.flags &= -9, t.flags & 1)
try {
t.trigger();
} catch (i) {
n || (n = i);
}
t = e;
}
}
if (n) throw n;
}
function Pe(n) {
for (let t = n.deps; t; t = t.nextDep)
t.version = -1, t.prevActiveLink = t.dep.activeLink, t.dep.activeLink = t;
}
function $e(n) {
let t, e = n.depsTail, i = e;
for (; i; ) {
const a = i.prevDep;
i.version === -1 ? (i === e && (e = a), Se(i), Xe(i)) : t = i, i.dep.activeLink = i.prevActiveLink, i.prevActiveLink = void 0, i = a;
}
n.deps = t, n.depsTail = e;
}
function Ae(n) {
for (let t = n.deps; t; t = t.nextDep)
if (t.dep.version !== t.version || t.dep.computed && (be(t.dep.computed) || t.dep.version !== t.version))
return !0;
return !!n._dirty;
}
function be(n) {
if (n.flags & 4 && !(n.flags & 16) || (n.flags &= -17, n.globalVersion === U))
return;
n.globalVersion = U;
const t = n.dep;
if (n.flags |= 2, t.version > 0 && !n.isSSR && n.deps && !Ae(n)) {
n.flags &= -3;
return;
}
const e = y, i = G;
y = n, G = !0;
try {
Pe(n);
const a = n.fn(n._value);
(t.version === 0 || je(a, n._value)) && (n._value = a, t.version++);
} catch (a) {
throw t.version++, a;
} finally {
y = e, G = i, $e(n), n.flags &= -3;
}
}
function Se(n, t = !1) {
const { dep: e, prevSub: i, nextSub: a } = n;
if (i && (i.nextSub = a, n.prevSub = void 0), a && (a.prevSub = i, n.nextSub = void 0), process.env.NODE_ENV !== "production" && e.subsHead === n && (e.subsHead = a), e.subs === n && (e.subs = i, !i && e.computed)) {
e.computed.flags &= -5;
for (let v = e.computed.deps; v; v = v.nextDep)
Se(v, !0);
}
!t && !--e.sc && e.map && e.map.delete(e.key);
}
function Xe(n) {
const { prevDep: t, nextDep: e } = n;
t && (t.nextDep = e, n.prevDep = void 0), e && (e.prevDep = t, n.nextDep = void 0);
}
let G = !0, U = 0;
class ze {
constructor(t, e) {
this.sub = t, this.dep = e, this.version = e.version, this.nextDep = this.prevDep = this.nextSub = this.prevSub = this.prevActiveLink = void 0;
}
}
class Ye {
constructor(t) {
this.computed = t, this.version = 0, this.activeLink = void 0, this.subs = void 0, this.map = void 0, this.key = void 0, this.sc = 0, process.env.NODE_ENV !== "production" && (this.subsHead = void 0);
}
track(t) {
if (!y || !G || y === this.computed)
return;
let e = this.activeLink;
if (e === void 0 || e.sub !== y)
e = this.activeLink = new ze(y, this), y.deps ? (e.prevDep = y.depsTail, y.depsTail.nextDep = e, y.depsTail = e) : y.deps = y.depsTail = e, _e(e);
else if (e.version === -1 && (e.version = this.version, e.nextDep)) {
const i = e.nextDep;
i.prevDep = e.prevDep, e.prevDep && (e.prevDep.nextDep = i), e.prevDep = y.depsTail, e.nextDep = void 0, y.depsTail.nextDep = e, y.depsTail = e, y.deps === e && (y.deps = i);
}
return process.env.NODE_ENV !== "production" && y.onTrack && y.onTrack(
he(
{
effect: y
},
t
)
), e;
}
trigger(t) {
this.version++, U++, this.notify(t);
}
notify(t) {
Re();
try {
if (process.env.NODE_ENV !== "production")
for (let e = this.subsHead; e; e = e.nextSub)
e.sub.onTrigger && !(e.sub.flags & 8) && e.sub.onTrigger(
he(
{
effect: e.sub
},
t
)
);
for (let e = this.subs; e; e = e.prevSub)
e.sub.notify() && e.sub.dep.notify();
} finally {
He();
}
}
}
function _e(n) {
if (n.dep.sc++, n.sub.flags & 4) {
const t = n.dep.computed;
if (t && !n.dep.subs) {
t.flags |= 20;
for (let i = t.deps; i; i = i.nextDep)
_e(i);
}
const e = n.dep.subs;
e !== n && (n.prevSub = e, e && (e.nextSub = n)), process.env.NODE_ENV !== "production" && n.dep.subsHead === void 0 && (n.dep.subsHead = n), n.dep.subs = n;
}
}
Symbol(
process.env.NODE_ENV !== "production" ? "Object iterate" : ""
);
Symbol(
process.env.NODE_ENV !== "production" ? "Map keys iterate" : ""
);
Symbol(
process.env.NODE_ENV !== "production" ? "Array iterate" : ""
);
new Set(
/* @__PURE__ */ Object.getOwnPropertyNames(Symbol).filter((n) => n !== "arguments" && n !== "caller").map((n) => Symbol[n]).filter(We)
);
class Be {
constructor(t, e, i) {
this.fn = t, this.setter = e, this._value = void 0, this.dep = new Ye(this), this.__v_isRef = !0, this.deps = void 0, this.depsTail = void 0, this.flags = 16, this.globalVersion = U - 1, this.next = void 0, this.effect = this, this.__v_isReadonly = !e, this.isSSR = i;
}
/**
* @internal
*/
notify() {
if (this.flags |= 16, !(this.flags & 8) && // avoid infinite self recursion
y !== this)
return Le(this, !0), !0;
process.env.NODE_ENV;
}
get value() {
const t = process.env.NODE_ENV !== "production" ? this.dep.track({
target: this,
type: "get",
key: "value"
}) : this.dep.track();
return be(this), t && (t.version = this.dep.version), this._value;
}
set value(t) {
this.setter ? this.setter(t) : process.env.NODE_ENV !== "production" && Fe("Write operation failed: computed value is readonly");
}
}
function qe(n, t, e = !1) {
let i, a;
Ve(n) ? i = n : (i = n.get, a = n.set);
const v = new Be(i, a, e);
return process.env.NODE_ENV !== "production" && t && !e && (v.onTrack = t.onTrack, v.onTrigger = t.onTrigger), v;
}
const b = qe(() => (n) => n.length === 0 ? "" : n.map(({ type: t, duration: e }) => `${t} ${e}ms cubic-bezier(0.33, 1, 0.68, 1)`).join(", ")), R = (n, t) => {
Object.entries(n).forEach(([e, i]) => {
i != null && (t.style[e] = i);
});
}, N = (n, t, e, i, a, v) => `matrix(${n}, ${t}, ${e}, ${i}, ${a}, ${v})`, Ge = /* @__PURE__ */ Z({
__name: "CialloItem",
props: {
src: {},
index: {},
duration: { default: 300 },
targetIndex: {},
rawObject: {},
scaleFactor: { default: 0 },
isMouseDown: { type: Boolean }
},
setup(n, { expose: t }) {
const e = n, i = g(null);
let a = new Image(), v = e.rawObject.naturalWidth / e.rawObject.naturalHeight, c = { w: 0, h: 0 };
const l = { x: 0, y: 0 }, _ = ue("isRunning", g(!1)), d = ue("isXGO", g(null)), E = () => {
let o, f;
e.rawObject.naturalWidth === 0 || e.rawObject.naturalHeight === 0 ? (o = e.rawObject.clientWidth, f = e.rawObject.clientHeight, v = o / f) : e.rawObject.naturalWidth > e.rawObject.naturalHeight ? (o = Math.min(window.innerWidth, window.innerHeight * v), f = o / v) : (f = Math.min(window.innerHeight, window.innerWidth / v), o = f * v), a.style.width = `${o}px`, a.style.height = `${f}px`, l.x = (window.innerWidth - o) / 2, l.y = (window.innerHeight - f) / 2, c.w = e.rawObject.width / o, c.h = e.rawObject.height / f;
}, u = () => {
i.value != null && (i.value.style.transition = b.value([{ type: "transform", duration: e.duration }]), E(), i.value.style.transform = N(1, 0, 0, 1, l.x, l.y));
}, S = () => {
i.value == null || a.width > window.innerWidth || a.height > window.innerHeight || (l.x = (window.innerWidth - a.width) / 2, l.y = (window.innerHeight - a.height) / 2, i.value.style.transition = b.value([{ type: "transform", duration: e.duration }]), i.value.style.transform = N(1, 0, 0, 1, l.x, l.y));
}, M = () => {
i.value != null && (i.value.style.transition = b.value([{ type: "transform", duration: e.duration }]), i.value.style.transform = N(1, 0, 0, 1, l.x, l.y));
};
return me(() => {
a.src = e.src, E(), _.value = !0;
}), ee(() => {
if (i.value != null) {
if (e.targetIndex === e.index) {
const o = e.rawObject.getBoundingClientRect();
let f, m;
o.x === 0 && o.y === 0 && (e.rawObject.naturalHeight === 0 || e.rawObject.naturalWidth === 0) ? (f = (window.innerWidth - o.width) / 2, m = (window.innerHeight - o.height) / 2) : (f = o.x, m = o.y), i.value.style.transform = N(c.w, 0, 0, c.h, f, m);
} else
M();
i.value.appendChild(a);
}
}), t({
reSetImageStatus: u,
viewInstance: i,
centerPosition: l,
close: () => {
if (i.value == null) return;
_.value = !0, i.value.style.transition = b.value([{ type: "transform", duration: e.duration }, { type: "opacity", duration: e.duration }]);
const o = e.rawObject.getBoundingClientRect();
i.value.style.transform = N(c.w, 0, 0, c.h, o.x, o.y);
},
move: (o, f) => {
i.value != null && (i.value.style.transform = N(e.scaleFactor, 0, 0, e.scaleFactor, l.x + o, l.y + f), i.value.style.transition = b.value([{ type: "transform", duration: o === 0 && f === 0 ? e.duration : 0 }]));
},
open: () => {
a.onload = async (o) => {
const f = o.target;
try {
f && f.decode && await f.decode(), M();
} catch {
M();
} finally {
_.value = !1;
}
}, a.onerror = () => {
_.value = !1;
};
},
boundaryCalculation: (o, f) => {
if (i.value == null) return;
l.x += o, l.y += f, i.value.style.transition = b.value([{ type: "transform", duration: e.duration }]);
const m = a.getBoundingClientRect(), T = Math.abs(f), L = Math.abs(o);
m.width > window.innerWidth ? m.x > 0 ? (l.x = 0, d.value == null && T < 20 && (d.value = !0)) : m.right < window.innerWidth ? (l.x = window.innerWidth - m.width, d.value == null && T < 20 && (d.value = !0)) : d.value = null : (l.x = (window.innerWidth - m.width) / 2, d.value = a.width / 4 < L && d.value === null && T < 20 ? !0 : null), m.height > window.innerHeight ? m.y > 0 ? (l.y = 0, d.value = null) : m.bottom <= window.innerHeight && (l.y = window.innerHeight - m.height, d.value = null) : l.y = (window.innerHeight - m.height) / 2, i.value.style.transform = N(e.scaleFactor, 0, 0, e.scaleFactor, l.x, l.y);
},
moveToCenter: S
}), (o, f) => (H(), P("div", {
class: "view_instance_0721",
ref_key: "viewInstance",
ref: i
}, null, 512));
}
}), Ue = { class: "index" }, Je = /* @__PURE__ */ Z({
__name: "CialloViewer",
props: {
array: {},
targetIndex: { default: 0 },
duration: { default: 300 },
zoomSpeed: {},
maxScaleFactor: { default: 5 }
},
setup(n) {
const t = n, e = g(null), i = g(null), a = g(null), v = g(null), c = g({ backgroundColor: "rgba(0, 0, 0, 0)", transition: b.value([{ type: "background-color", duration: t.duration }]) }), l = g({ transition: b.value([{ type: "transform", duration: t.duration }]), transform: "" }), _ = g(!1), d = g(), E = g(!1), u = g(t.targetIndex), S = { x: 0, y: 0 }, M = g(!1), x = g({
x: {
status: !1,
movement: 0
},
y: {
status: !1,
movement: 0
}
}), k = { x: 0, y: 0 }, p = g(1), I = g(!1), o = g(null);
let f = 0, m = 1, T = 1, L;
ce("isRunning", I), ce("isXGO", o);
const Y = () => {
S.x = 0, S.y = 0, M.value = !1, window.requestAnimationFrame(() => {
c.value.backgroundColor = A(1), c.value.transition = b.value([{ type: "background-color", duration: t.duration }]), i.value && R({
opacity: "1",
transition: b.value([{ type: "opacity", duration: t.duration }])
}, i.value), a.value && R({
opacity: "1",
transition: b.value([{ type: "opacity", duration: t.duration }])
}, a.value), v.value && R({
opacity: "1",
transition: b.value([{ type: "opacity", duration: t.duration }])
}, v.value);
}), o.value ? V(u.value * window.innerWidth, 0) : d.value[u.value].moveToCenter(), o.value = !1;
}, J = () => {
E.value = !0, M.value = !1, window.requestAnimationFrame(() => {
d.value[u.value].close(), c.value.transition = b.value([{ type: "background-color", duration: t.duration }]), c.value.backgroundColor = A(0), i.value && R({
opacity: "0",
transition: b.value([{ type: "opacity", duration: t.duration }])
}, i.value), a.value && R({
opacity: "0",
transition: b.value([{ type: "opacity", duration: t.duration }])
}, a.value), v.value && R({
opacity: "0",
transition: b.value([{ type: "opacity", duration: t.duration }])
}, v.value);
}), setTimeout(() => {
Ze();
}, t.duration);
}, te = (s) => {
if (!(E.value || s.target.localName !== "img" || I.value)) {
if (s instanceof MouseEvent)
S.x = s.x, S.y = s.y;
else if (s instanceof TouchEvent) {
const r = s.touches;
if (r.length == 1) {
const h = r[0];
S.x = h.clientX, S.y = h.clientY;
} else if (r.length == 2) {
const h = r[0], D = r[1];
f = Math.hypot(D.clientX - h.clientX, D.clientY - h.clientY), m = p.value;
}
}
c.value.transition = b.value([{ type: "background-color", duration: 0 }]), M.value = !0;
}
}, ne = (s) => {
if (!M.value || E.value || I.value) return;
let r = 0, h = 0, D = 0, w = 0;
if (s instanceof MouseEvent)
r = s.x - S.x, h = s.y - S.y, D = Math.abs(r) / window.innerWidth, w = Math.abs(h) / window.innerHeight, x.value.x.status = D >= 0.2 && w <= 0.05, x.value.y.status = w >= 0.2 && D <= 0.05, o.value == null && (o.value = w < 0.05 && s.movementX !== 0 && p.value === 1), o.value ? (x.value.x.movement = r, V(u.value * window.innerWidth - r, 0, 0)) : (L.move(r, h), k.x = r, k.y = h, x.value.y.movement = h, p.value == 1 && window.requestAnimationFrame(() => {
c.value.backgroundColor = A(1 - w), i.value && (i.value.style.opacity = `${1 - w}`), a.value && (a.value.style.opacity = `${1 - w}`), v.value && (v.value.style.opacity = `${1 - w}`);
}));
else if (s instanceof TouchEvent) {
const O = s.touches;
if (O.length == 1) {
const W = s.touches[0];
r = W.clientX - S.x, h = W.clientY - S.y, k.x = r, k.y = h, D = Math.abs(r) / window.innerWidth, w = Math.abs(h) / window.innerHeight, x.value.x.status = D >= 0.2 && w <= 0.05, x.value.y.status = w >= 0.2 && D <= 0.2, x.value.y.movement = h, x.value.x.movement = r, o.value == null ? o.value = w < 0.05 && Math.abs(x.value.x.movement) > 5 && p.value == 1 : o.value ? V(u.value * window.innerWidth - r, 0, 0) : (L.move(r, h), p.value == 1 && window.requestAnimationFrame(() => {
c.value.backgroundColor = A(1 - w * 2), i.value && (i.value.style.opacity = `${1 - w * 2}`);
}));
} else if (O.length == 2 && !o.value) {
const W = O[0], q = O[1];
if (f == 0) return;
const Ee = Math.hypot(q.clientX - W.clientX, q.clientY - W.clientY) / f;
p.value = Math.max(0.5, Math.min(t.maxScaleFactor, m * Ee));
const ke = (W.clientX + q.clientX) / 2, Me = (W.clientY + q.clientY) / 2, C = d.value[u.value], le = p.value / T;
C.centerPosition.x += (ke - C.centerPosition.x) * (1 - le), C.centerPosition.y += (Me - C.centerPosition.y) * (1 - le), C.viewInstance.style.transition = "", C.viewInstance.style.transform = N(
p.value,
0,
0,
p.value,
C.centerPosition.x,
C.centerPosition.y
), T = p.value;
}
}
}, ie = (s) => {
if (E.value || I.value) return;
o.value ? x.value.x.status ? x.value.x.movement < 0 && u.value >= 0 && t.array.length > 0 && u.value + 1 < t.array.length ? re() : x.value.x.movement > 0 && u.value > 0 ? oe() : Y() : Y() : (p.value === 1 && x.value.y.status && !x.value.x.status ? J() : p.value === 1 && Y(), o.value = null);
const r = d.value[u.value];
p.value > 1 ? (r.boundaryCalculation(k.x, k.y), k.x = 0, k.y = 0) : s instanceof TouchEvent && p.value < 1 && (r.moveToCenter(), $()), M.value = !1, x.value.x.status = !1, x.value.y.status = !1, x.value.y.movement = null;
}, B = (s) => {
s instanceof MouseEvent && (s.clientY < 0 || s.clientY > window.innerHeight || s.clientX < 0 || s.clientX > window.innerWidth) && (Y(), $());
}, ae = () => {
se(), $();
for (let s of d.value)
s.reSetImageStatus(), V(u.value * window.innerWidth, 0, 0);
}, De = (s) => {
if (o.value && (o.value = !1), s.target.localName !== "img" || I.value) return;
p.value = Math.min(t.maxScaleFactor, Math.max(1, p.value - Math.sign(s.deltaY) * t.zoomSpeed));
const r = d.value[u.value], h = p.value / T;
r.centerPosition.x += Math.round((s.clientX - r.centerPosition.x) * (1 - h)), r.centerPosition.y += Math.round((s.clientY - r.centerPosition.y) * (1 - h)), r.viewInstance.style.transform = N(
p.value,
0,
0,
p.value,
r.centerPosition.x,
r.centerPosition.y
), T = p.value, p.value == 1 && r.reSetImageStatus();
}, V = (s, r, h = t.duration) => {
l.value.transition = b.value([{ type: "transform", duration: h }]), l.value.transform = `translate(${-s}px, ${r}px)`;
}, oe = () => {
u.value !== 0 && ($(), d.value[u.value].reSetImageStatus(), u.value--, V(u.value * window.innerWidth, 0));
}, re = () => {
u.value != t.array.length - 1 && ($(), d.value[u.value].reSetImageStatus(), u.value++, V(u.value * window.innerWidth, 0));
}, se = () => {
_.value = /android|iPad|iPhone|iPod/.test(navigator.userAgent);
}, $ = () => {
p.value = 1, m = 1, T = 1, f = 0, k.x = 0, k.y = 0;
};
me(() => {
se(), document.addEventListener("mouseup", B, { passive: !1 }), document.addEventListener("touchend", B, { passive: !1 }), window.addEventListener("resize", ae, { passive: !1 }), V(u.value * window.innerWidth, 0);
}), ee(() => {
document.body.style.overflow = "hidden", t.targetIndex == null && (u.value = 0), e.value && window.requestAnimationFrame(() => {
c.value.backgroundColor = A(1), ve(() => L.open());
});
}), we(() => {
document.removeEventListener("mouseup", B), document.removeEventListener("touchend", B), window.removeEventListener("resize", ae), document.body.style.overflow = "";
}), Te(() => u.value, (s) => {
ve(() => {
var r;
d.value == null || ((r = d.value) == null ? void 0 : r.length) === 0 || (L = d.value[s], o.value = null);
});
}, { immediate: !0 });
const A = (s) => `rgba(0, 0, 0, ${s})`;
return (s, r) => {
var h, D;
return H(), P("div", {
ref_key: "mask",
ref: e,
style: de(c.value),
class: "image-view-mask",
onMousedown: K(te, ["prevent"]),
onMousemove: K(ne, ["prevent"]),
onMouseup: K(ie, ["prevent"]),
onTouchstartPassive: te,
onTouchmovePassive: ne,
onTouchendPassive: ie,
onWheelPassive: De
}, [
j("ul", {
style: de(l.value)
}, [
(H(!0), P(Ne, null, Oe(t.array, (w, O) => (H(), P("li", { key: O }, [
Q(Ge, {
ref_for: !0,
ref_key: "imageRefs",
ref: d,
index: O,
src: w.src,
duration: t.duration,
isRunning: I.value,
rawObject: w,
targetIndex: u.value,
scaleFactor: u.value === O ? p.value : 1,
isMouseDown: M.value
}, null, 8, ["index", "src", "duration", "isRunning", "rawObject", "targetIndex", "scaleFactor", "isMouseDown"])
]))), 128))
], 4),
j("div", {
class: "top-function",
ref_key: "topFunction",
ref: i
}, [
j("div", Ue, [
j("span", null, fe(u.value + 1), 1),
r[2] || (r[2] = j("span", null, "/", -1)),
j("span", null, fe((h = d.value) == null ? void 0 : h.length), 1)
]),
j("div", {
class: "close",
onClick: J,
onTouchstartPassive: J
}, null, 32)
], 512),
u.value !== 0 && !_.value ? (H(), P("div", {
key: 0,
ref_key: "arrowLeft",
ref: a,
class: "left-arrow",
onClick: r[0] || (r[0] = (w) => oe())
}, null, 512)) : pe("", !0),
u.value !== ((D = t.array) == null ? void 0 : D.length) - 1 && !_.value ? (H(), P("div", {
key: 1,
ref_key: "arrowRight",
ref: v,
class: "right-arrow",
onClick: r[1] || (r[1] = (w) => re())
}, null, 512)) : pe("", !0)
], 36);
};
}
}), Ke = (n, t) => {
const e = n.__vccOpts || n;
for (const [i, a] of t)
e[i] = a;
return e;
}, ye = /* @__PURE__ */ Ke(Je, [["__scopeId", "data-v-82d27748"]]), nt = /* @__PURE__ */ Z({
__name: "ViewerList",
props: {
duration: { default: 300 },
zoomSpeed: { default: 0.2 },
maxScaleFactor: { default: 5 }
},
setup(n) {
const t = n, e = g([]), i = (c) => {
Qe({
array: e.value,
targetIndex: e.value.findIndex((l) => l == c.currentTarget),
duration: t.duration,
zoomSpeed: t.zoomSpeed,
maxScaleFactor: t.maxScaleFactor
});
}, a = (c) => (c == null ? void 0 : c.__v_isVNode) === !0, v = (c) => {
if (c === null) return [];
const l = [], _ = [c];
for (; _.length > 0; ) {
const d = _.pop();
if (!d) continue;
const E = d.el;
if (E && E.tagName === "IMG") {
const u = E;
u.addEventListener("click", i), l.push(u);
}
if (Array.isArray(d.children)) {
const u = d.children.filter(a);
for (let S = u.length - 1; S >= 0; S--)
_.push(u[S]);
}
}
return l;
};
return ee(() => {
var l;
const c = (l = Ce()) == null ? void 0 : l.subTree;
c != null && (e.value = v(c));
}), we(() => {
e.value.length != 0 && e.value.forEach((c) => {
c.removeEventListener("click", i);
});
}), (c, l) => Ie(c.$slots, "default");
}
});
let F;
function Qe(n, t = 0, e = 400, i = 0.2, a = 5) {
let v;
if (typeof n == "object" && "array" in n) {
if (n.array.length === 0) return;
v = Q(ye, { array: n.array, targetIndex: n.targetIndex, duration: n.duration, zoomSpeed: n.zoomSpeed, maxScaleFactor: n.maxScaleFactor });
} else if (n instanceof HTMLCollection) {
if (n.length === 0) return;
v = Q(ye, { array: n, targetIndex: t, duration: e, zoomSpeed: i, maxScaleFactor: a });
} else
throw new Error("Invalid arguments");
ge(v, et());
}
const Ze = () => ge(null, F);
function et() {
return F || (F = document.createElement("div"), F.setAttribute("type", "ciallo-viewer"), F.setAttribute("id", `ciallo-viewer-${(Math.random() * 1e5).toFixed(0)}`), document.body.appendChild(F)), F;
}
export {
Qe as CialloViewer,
Ze as UnmountTargetViewer,
nt as ViewerList
};