images-viewer-vue3
Version:
A lightweight image viewer for Vue3
333 lines (332 loc) • 9.4 kB
JavaScript
import { t as M, a as R, b as x, w as G, i as T, c as I } from "./npm-@vueuse-shared-D60wi_N7.js";
import { computed as m, shallowRef as y, ref as L, watch as S, toValue as E, unref as A, getCurrentInstance as _, onMounted as j } from "vue";
const C = T ? window : void 0, K = T ? window.document : void 0;
function w(t) {
var n;
const e = E(t);
return (n = e == null ? void 0 : e.$el) != null ? n : e;
}
function k(...t) {
const n = [], e = () => {
n.forEach((u) => u()), n.length = 0;
}, s = (u, r, f, h) => (u.addEventListener(r, f, h), () => u.removeEventListener(r, f, h)), l = m(() => {
const u = x(E(t[0])).filter((r) => r != null);
return u.every((r) => typeof r != "string") ? u : void 0;
}), o = G(
() => {
var u, r;
return [
(r = (u = l.value) == null ? void 0 : u.map((f) => w(f))) != null ? r : [C].filter((f) => f != null),
x(E(l.value ? t[1] : t[0])),
x(A(l.value ? t[2] : t[1])),
// @ts-expect-error - TypeScript gets the correct types, but somehow still complains
E(l.value ? t[3] : t[2])
];
},
([u, r, f, h]) => {
if (e(), !(u != null && u.length) || !(r != null && r.length) || !(f != null && f.length))
return;
const c = I(h) ? { ...h } : h;
n.push(
...u.flatMap(
(v) => r.flatMap(
(d) => f.map((p) => s(v, d, p, c))
)
)
);
},
{ flush: "post" }
), i = () => {
o(), e();
};
return R(e), i;
}
function U() {
const t = y(!1), n = _();
return n && j(() => {
t.value = !0;
}, n), t;
}
function O(t) {
const n = U();
return m(() => (n.value, !!t()));
}
function X(t, n, e = {}) {
const { window: s = C, ...l } = e;
let o;
const i = O(() => s && "ResizeObserver" in s), u = () => {
o && (o.disconnect(), o = void 0);
}, r = m(() => {
const c = E(t);
return Array.isArray(c) ? c.map((v) => w(v)) : [w(c)];
}), f = S(
r,
(c) => {
if (u(), i.value && s) {
o = new ResizeObserver(n);
for (const v of c)
v && o.observe(v, l);
}
},
{ immediate: !0, flush: "post" }
), h = () => {
u(), f();
};
return R(h), {
isSupported: i,
stop: h
};
}
function Y(t, n = { width: 0, height: 0 }, e = {}) {
const { window: s = C, box: l = "content-box" } = e, o = m(() => {
var c, v;
return (v = (c = w(t)) == null ? void 0 : c.namespaceURI) == null ? void 0 : v.includes("svg");
}), i = y(n.width), u = y(n.height), { stop: r } = X(
t,
([c]) => {
const v = l === "border-box" ? c.borderBoxSize : l === "content-box" ? c.contentBoxSize : c.devicePixelContentBoxSize;
if (s && o.value) {
const d = w(t);
if (d) {
const p = d.getBoundingClientRect();
i.value = p.width, u.value = p.height;
}
} else if (v) {
const d = x(v);
i.value = d.reduce((p, { inlineSize: g }) => p + g, 0), u.value = d.reduce((p, { blockSize: g }) => p + g, 0);
} else
i.value = c.contentRect.width, u.value = c.contentRect.height;
},
e
);
M(() => {
const c = w(t);
c && (i.value = "offsetWidth" in c ? c.offsetWidth : n.width, u.value = "offsetHeight" in c ? c.offsetHeight : n.height);
});
const f = S(
() => w(t),
(c) => {
i.value = c ? n.width : 0, u.value = c ? n.height : 0;
}
);
function h() {
r(), f();
}
return {
width: i,
height: u,
stop: h
};
}
const z = [
"fullscreenchange",
"webkitfullscreenchange",
"webkitendfullscreen",
"mozfullscreenchange",
"MSFullscreenChange"
];
function te(t, n = {}) {
const {
document: e = K,
autoExit: s = !1
} = n, l = m(() => {
var a;
return (a = w(t)) != null ? a : e == null ? void 0 : e.documentElement;
}), o = y(!1), i = m(() => [
"requestFullscreen",
"webkitRequestFullscreen",
"webkitEnterFullscreen",
"webkitEnterFullScreen",
"webkitRequestFullScreen",
"mozRequestFullScreen",
"msRequestFullscreen"
].find((a) => e && a in e || l.value && a in l.value)), u = m(() => [
"exitFullscreen",
"webkitExitFullscreen",
"webkitExitFullScreen",
"webkitCancelFullScreen",
"mozCancelFullScreen",
"msExitFullscreen"
].find((a) => e && a in e || l.value && a in l.value)), r = m(() => [
"fullScreen",
"webkitIsFullScreen",
"webkitDisplayingFullscreen",
"mozFullScreen",
"msFullscreenElement"
].find((a) => e && a in e || l.value && a in l.value)), f = [
"fullscreenElement",
"webkitFullscreenElement",
"mozFullScreenElement",
"msFullscreenElement"
].find((a) => e && a in e), h = O(() => l.value && e && i.value !== void 0 && u.value !== void 0 && r.value !== void 0), c = () => f ? (e == null ? void 0 : e[f]) === l.value : !1, v = () => {
if (r.value) {
if (e && e[r.value] != null)
return e[r.value];
{
const a = l.value;
if ((a == null ? void 0 : a[r.value]) != null)
return !!a[r.value];
}
}
return !1;
};
async function d() {
if (!(!h.value || !o.value)) {
if (u.value)
if ((e == null ? void 0 : e[u.value]) != null)
await e[u.value]();
else {
const a = l.value;
(a == null ? void 0 : a[u.value]) != null && await a[u.value]();
}
o.value = !1;
}
}
async function p() {
if (!h.value || o.value)
return;
v() && await d();
const a = l.value;
i.value && (a == null ? void 0 : a[i.value]) != null && (await a[i.value](), o.value = !0);
}
async function g() {
await (o.value ? d() : p());
}
const b = () => {
const a = v();
(!a || a && c()) && (o.value = a);
}, F = { capture: !1, passive: !0 };
return k(e, z, b, F), k(() => w(l), z, b, F), M(b, !1), s && R(d), {
isSupported: h,
isFullscreen: o,
enter: p,
exit: d,
toggle: g
};
}
function ne(t, n) {
const { containerStyle: e, wrapperProps: s, scrollTo: l, calculateRange: o, currentList: i, containerRef: u } = "itemHeight" in n ? Q(n, t) : N(n, t);
return {
list: i,
scrollTo: l,
containerProps: {
ref: u,
onScroll: () => {
o();
},
style: e
},
wrapperProps: s
};
}
function V(t) {
const n = y(null), e = Y(n), s = L([]), l = y(t);
return { state: L({ start: 0, end: 10 }), source: l, currentList: s, size: e, containerRef: n };
}
function W(t, n, e) {
return (s) => {
if (typeof e == "number")
return Math.ceil(s / e);
const { start: l = 0 } = t.value;
let o = 0, i = 0;
for (let u = l; u < n.value.length; u++) {
const r = e(u);
if (o += r, i = u, o > s)
break;
}
return i - l;
};
}
function H(t, n) {
return (e) => {
if (typeof n == "number")
return Math.floor(e / n) + 1;
let s = 0, l = 0;
for (let o = 0; o < t.value.length; o++) {
const i = n(o);
if (s += i, s >= e) {
l = o;
break;
}
}
return l + 1;
};
}
function B(t, n, e, s, { containerRef: l, state: o, currentList: i, source: u }) {
return () => {
const r = l.value;
if (r) {
const f = e(t === "vertical" ? r.scrollTop : r.scrollLeft), h = s(t === "vertical" ? r.clientHeight : r.clientWidth), c = f - n, v = f + h + n;
o.value = {
start: c < 0 ? 0 : c,
end: v > u.value.length ? u.value.length : v
}, i.value = u.value.slice(o.value.start, o.value.end).map((d, p) => ({
data: d,
index: p + o.value.start
}));
}
};
}
function q(t, n) {
return (e) => typeof t == "number" ? e * t : n.value.slice(0, e).reduce((l, o, i) => l + t(i), 0);
}
function D(t, n, e, s) {
S([t.width, t.height, n, e], () => {
s();
});
}
function P(t, n) {
return m(() => typeof t == "number" ? n.value.length * t : n.value.reduce((e, s, l) => e + t(l), 0));
}
const J = {
horizontal: "scrollLeft",
vertical: "scrollTop"
};
function $(t, n, e, s) {
return (l) => {
s.value && (s.value[J[t]] = e(l), n());
};
}
function N(t, n) {
const e = V(n), { state: s, source: l, currentList: o, size: i, containerRef: u } = e, r = { overflowX: "auto" }, { itemWidth: f, overscan: h = 5 } = t, c = W(s, l, f), v = H(l, f), d = B("horizontal", h, v, c, e), p = q(f, l), g = m(() => p(s.value.start)), b = P(f, l);
D(i, n, u, d);
const F = $("horizontal", d, p, u), a = m(() => ({
style: {
height: "100%",
width: `${b.value - g.value}px`,
marginLeft: `${g.value}px`,
display: "flex"
}
}));
return {
scrollTo: F,
calculateRange: d,
wrapperProps: a,
containerStyle: r,
currentList: o,
containerRef: u
};
}
function Q(t, n) {
const e = V(n), { state: s, source: l, currentList: o, size: i, containerRef: u } = e, r = { overflowY: "auto" }, { itemHeight: f, overscan: h = 5 } = t, c = W(s, l, f), v = H(l, f), d = B("vertical", h, v, c, e), p = q(f, l), g = m(() => p(s.value.start)), b = P(f, l);
D(i, n, u, d);
const F = $("vertical", d, p, u), a = m(() => ({
style: {
width: "100%",
height: `${b.value - g.value}px`,
marginTop: `${g.value}px`
}
}));
return {
calculateRange: d,
scrollTo: F,
containerStyle: r,
wrapperProps: a,
currentList: o,
containerRef: u
};
}
export {
te as a,
ne as u
};