@wssto2/vue-core 0.4.24 → 0.4.25

package/dist/PhotoViewer.vue_vue_type_script_setup_true_lang-QPCW3Xi6.js

@@ -1,411 +0,0 @@
-import { defineComponent as Ae, useModel as Re, ref as _, useTemplateRef as se, watch as Q, computed as g, onBeforeUnmount as Ne, nextTick as ye, onMounted as Xe, openBlock as m, createBlock as Ve, Teleport as Ye, createElementBlock as f, createVNode as T, Transition as Ze, withCtx as Ee, unref as u, createElementVNode as h, toDisplayString as ee, createCommentVNode as k, renderSlot as Ke, normalizeClass as M, withModifiers as re, normalizeStyle as te, Fragment as We, renderList as je, mergeModels as be } from "vue";
-import { useI18n as Ue } from "vue-i18n";
-import { _ as S } from "./Icon.vue_vue_type_script_lang-D7oC-d-S.js";
-import { u as Fe } from "./useDialog-CXR3hN0G.js";
-const _e = [1, 1.5, 2, 3, 4, 5], ke = 1, ue = 5, He = (a) => Math.min(ue, Math.max(ke, a)), Me = (a, l) => l % 2 === 0 ? a : { width: a.height, height: a.width };
-function qe(a, l, s) {
-  const i = Me(a, s);
-  if (i.width <= 0 || i.height <= 0 || l.width <= 0 || l.height <= 0) return { width: 0, height: 0 };
-  const o = Math.min(l.width / i.width, l.height / i.height);
-  return { width: a.width * o, height: a.height * o };
-}
-function Ge(a, l, s) {
-  return { x: Math.max(0, (a.width * s - l.width) / 2), y: Math.max(0, (a.height * s - l.height) / 2) };
-}
-function N(a, l, s, i) {
-  const o = Ge(l, s, i);
-  return { x: Math.min(o.x, Math.max(-o.x, a.x)) + 0, y: Math.min(o.y, Math.max(-o.y, a.y)) + 0 };
-}
-function Je(a, l, s, i, o) {
-  const z = He(l), r = z / a.zoom, $ = { x: s.x - (s.x - a.pan.x) * r, y: s.y - (s.y - a.pan.y) * r };
-  return { zoom: z, pan: N($, i, o, z) };
-}
-function Qe(a, l) {
-  return l === 1 ? _e.find((i) => i > a + 1e-3) ?? ue : [..._e].reverse().find((i) => i < a - 1e-3) ?? ke;
-}
-function et(a, l, s, i, o) {
-  const z = Math.min(o.width / a.width, o.height / a.height), r = { width: a.width * z, height: a.height * z }, $ = { width: a.width * s, height: a.height * s }, P = { width: Math.min(1, l.width / $.width), height: Math.min(1, l.height / $.height) }, E = { x: 0.5 - i.x / $.width, y: 0.5 - i.y / $.height };
-  return {
-    image: r,
-    view: { x: (E.x - P.width / 2) * r.width, y: (E.y - P.height / 2) * r.height, width: P.width * r.width, height: P.height * r.height }
-  };
-}
-function tt(a, l, s, i) {
-  return N({ x: (0.5 - a.x) * l.width * i, y: (0.5 - a.y) * l.height * i }, l, s, i);
-}
-const at = {
-  key: 0,
-  class: "relative z-9999"
-}, it = ["aria-label"], ot = { class: "flex items-center gap-2 px-4 pt-[max(0.875rem,var(--app-safe-top))] pb-3.5 md:px-4.5" }, nt = { class: "min-w-0 truncate text-headline font-semibold" }, lt = { key: 0 }, st = {
-  "aria-live": "polite",
-  "data-test": "photo-counter"
-}, rt = ["aria-label", "aria-disabled"], ut = {
-  class: "w-13 text-center text-subheadline tabular-nums compact:hidden",
-  "data-test": "zoom-percent"
-}, dt = ["aria-label", "aria-disabled"], ct = ["aria-label"], ht = ["href", "download", "aria-label"], vt = ["aria-label"], mt = { class: "flex min-h-0 grow items-center gap-4 px-4 md:px-4.5" }, pt = ["aria-label", "aria-disabled"], ft = ["src", "alt"], gt = ["src"], xt = ["aria-label", "aria-disabled"], wt = ["aria-label", "aria-current", "onClick"], yt = ["src"], bt = {
-  key: 1,
-  class: "h-[max(1.25rem,var(--app-safe-bottom))] shrink-0"
-}, _t = {
-  class: "sr-only",
-  "aria-live": "polite"
-}, kt = 8, Mt = 300, I = "flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-full bg-white/8 text-[#f1f5f3] transition-colors duration-motion-fast hover:bg-white/16 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#6ee7b7] aria-disabled:cursor-default aria-disabled:opacity-30 aria-disabled:hover:bg-white/8", Tt = /* @__PURE__ */ Ae({
-  __name: "PhotoViewer",
-  props: /* @__PURE__ */ be({
-    items: {},
-    title: { default: void 0 }
-  }, {
-    index: { default: 0 },
-    indexModifiers: {}
-  }),
-  emits: /* @__PURE__ */ be(["presented", "dismissed"], ["update:index"]),
-  setup(a, { expose: l, emit: s }) {
-    const i = a, o = Re(a, "index"), z = s, { t: r } = Ue(), $ = _(null), P = se("stage"), E = se("image"), de = se("strip"), K = Fe($, { initialFocus: "panel", onPresented: () => z("presented"), onDismissed: () => z("dismissed") }), { isOpen: W } = K, ae = _(!1);
-    Q(W, (e) => {
-      e && (ae.value = !0);
-    }, { flush: "sync" });
-    const ze = () => {
-      W.value || (ae.value = !1);
-    }, c = _(1), d = _({ x: 0, y: 0 }), C = _(0), j = _({ width: 0, height: 0 }), x = _({ width: 0, height: 0 }), y = _(0), ie = _(!1), X = _(null), p = g(() => i.items[o.value]), B = g(() => qe(j.value, x.value, C.value)), O = g(() => Me(B.value, C.value)), ce = g(() => B.value.width > 0), $e = g(() => Math.round(c.value * 100)), D = g(() => c.value > 1.001), he = g(() => o.value > 0), ve = g(() => o.value < i.items.length - 1), Pe = g(() => ({
-      width: `${B.value.width}px`,
-      height: `${B.value.height}px`,
-      marginLeft: `${-B.value.width / 2}px`,
-      marginTop: `${-B.value.height / 2}px`,
-      transform: `translate(${d.value.x + y.value}px, ${d.value.y}px) scale(${c.value}) rotate(${C.value * 90}deg)`
-    }));
-    function U() {
-      c.value = 1, d.value = { x: 0, y: 0 }, y.value = 0;
-    }
-    function F() {
-      const e = P.value;
-      e && (x.value = { width: e.clientWidth, height: e.clientHeight }), oe();
-    }
-    function oe() {
-      const e = E.value;
-      e && e.naturalWidth > 0 && (j.value = { width: e.naturalWidth, height: e.naturalHeight });
-    }
-    let H = null;
-    Q(P, (e) => {
-      H?.disconnect(), e && (F(), typeof ResizeObserver < "u" && (H = new ResizeObserver(() => {
-        F(), d.value = N(d.value, O.value, x.value, c.value);
-      }), H.observe(e)));
-    }), Ne(() => H?.disconnect()), Q(o, () => {
-      U(), C.value = 0, j.value = { width: 0, height: 0 }, ye(() => {
-        oe(), de.value?.querySelector("[aria-current=true]")?.scrollIntoView?.({ inline: "center", block: "nearest" });
-      });
-    }), Q(() => i.items.length, (e) => {
-      e === 0 ? K.dismiss() : o.value > e - 1 && (o.value = e - 1);
-    });
-    function Ce(e = 0) {
-      o.value = Math.min(Math.max(0, e), Math.max(0, i.items.length - 1)), U(), C.value = 0, j.value = { width: 0, height: 0 }, X.value = null, K.present(), ye(F);
-    }
-    const me = () => K.dismiss();
-    l({ present: Ce, dismiss: me });
-    function V(e) {
-      const t = o.value + e;
-      t < 0 || t > i.items.length - 1 || (X.value = e === 1 ? "forward" : "back", o.value = t);
-    }
-    function A(e) {
-      q(Qe(c.value, e), { x: 0, y: 0 });
-    }
-    function q(e, t) {
-      const n = Je({ zoom: c.value, pan: d.value }, e, t, O.value, x.value);
-      c.value = n.zoom, d.value = n.pan;
-    }
-    function ne() {
-      C.value = (C.value + 3) % 4, d.value = N(d.value, O.value, x.value, c.value);
-    }
-    function Te(e) {
-      if (e.altKey || e.ctrlKey || e.metaKey) return;
-      const n = {
-        ArrowLeft: () => V(-1),
-        ArrowRight: () => V(1),
-        "+": () => A(1),
-        "=": () => A(1),
-        "-": () => A(-1),
-        _: () => A(-1),
-        0: U,
-        r: ne,
-        R: ne
-      }[e.key];
-      n && (e.preventDefault(), n());
-    }
-    const le = (e) => {
-      const t = P.value?.getBoundingClientRect();
-      return { x: e.clientX - (t ? t.left + t.width / 2 : 0), y: e.clientY - (t ? t.top + t.height / 2 : 0) };
-    }, b = /* @__PURE__ */ new Map();
-    let Y = !1, pe = 0, R = { x: 0, y: 0 }, Z = null;
-    const fe = () => {
-      const [e, t] = [...b.values()];
-      return { x: (e.x + t.x) / 2, y: (e.y + t.y) / 2 };
-    }, ge = () => {
-      const [e, t] = [...b.values()];
-      return Math.hypot(e.x - t.x, e.y - t.y);
-    };
-    function Oe(e) {
-      e.pointerType === "mouse" && e.button !== 0 || (P.value?.setPointerCapture?.(e.pointerId), b.set(e.pointerId, { x: e.clientX, y: e.clientY }), ie.value = !0, b.size === 1 ? (Y = !1, pe = Date.now(), R = { x: 0, y: 0 }) : Y = !0);
-    }
-    function Le(e) {
-      const t = b.get(e.pointerId);
-      if (!t) return;
-      const n = { x: e.clientX, y: e.clientY };
-      if (b.size === 2) {
-        const [G, J] = [ge(), fe()];
-        b.set(e.pointerId, n);
-        const L = fe();
-        q(c.value * (ge() / (G || 1)), le({ clientX: L.x, clientY: L.y })), d.value = N({ x: d.value.x + L.x - J.x, y: d.value.y + L.y - J.y }, O.value, x.value, c.value);
-        return;
-      }
-      b.set(e.pointerId, n);
-      const v = { x: n.x - t.x, y: n.y - t.y };
-      R = { x: R.x + v.x, y: R.y + v.y }, !(!Y && Math.hypot(R.x, R.y) < kt) && (Y = !0, D.value ? d.value = N({ x: d.value.x + v.x, y: d.value.y + v.y }, O.value, x.value, c.value) : y.value = (y.value + v.x) * (y.value + v.x < 0 && !ve.value || y.value + v.x > 0 && !he.value ? 0.6 : 1));
-    }
-    function xe(e, t = !1) {
-      if (!b.delete(e.pointerId) || b.size > 0) return;
-      ie.value = !1;
-      const n = le(e);
-      if (!Y && !t) {
-        const L = Z && Date.now() - Z.at < Mt && Math.hypot(n.x - Z.point.x, n.y - Z.point.y) < 32;
-        Z = L ? null : { at: Date.now(), point: n }, L && (D.value ? U() : q(2, n));
-        return;
-      }
-      const v = Date.now() - pe < 250 && Math.abs(y.value) > 30, G = Math.abs(y.value) > Math.max(50, x.value.width * 0.15), J = y.value;
-      y.value = 0, !t && !D.value && (G || v) && V(J < 0 ? 1 : -1);
-    }
-    function Se(e) {
-      const t = e.deltaMode === 1 ? 16 : 1;
-      q(c.value * Math.exp(-e.deltaY * t * (e.ctrlKey ? 0.01 : 15e-4)), le(e));
-    }
-    const Ie = { width: 120, height: 80 }, w = g(() => ce.value ? et(O.value, x.value, c.value, d.value, Ie) : null);
-    function we(e) {
-      if (e.type === "pointermove" && e.buttons === 0) return;
-      const t = e.currentTarget.getBoundingClientRect();
-      t.width === 0 || t.height === 0 || (d.value = tt({ x: (e.clientX - t.left) / t.width, y: (e.clientY - t.top) / t.height }, O.value, x.value, c.value));
-    }
-    const Be = g(() => {
-      if (!w.value) return {};
-      const { width: e, height: t } = C.value % 2 === 0 ? w.value.image : { width: w.value.image.height, height: w.value.image.width };
-      return { width: `${e}px`, height: `${t}px`, marginLeft: `${-e / 2}px`, marginTop: `${-t / 2}px`, transform: `rotate(${C.value * 90}deg)` };
-    });
-    Xe(() => {
-      W.value && F();
-    });
-    const De = g(() => i.title ?? r("core.viewer.label"));
-    return (e, t) => (m(), Ve(Ye, { to: "body" }, [
-      ae.value ? (m(), f("div", at, [
-        T(Ze, {
-          appear: "",
-          "enter-active-class": "transition-opacity duration-motion-normal ease-motion-standard",
-          "enter-from-class": "opacity-0",
-          "leave-active-class": "pointer-events-none transition-opacity duration-motion-normal ease-motion-standard",
-          "leave-to-class": "opacity-0",
-          onAfterLeave: ze
-        }, {
-          default: Ee(() => [
-            u(W) ? (m(), f("div", {
-              key: 0,
-              ref_key: "panel",
-              ref: $,
-              role: "dialog",
-              "aria-modal": "true",
-              "aria-label": De.value,
-              tabindex: "-1",
-              "data-part": "panel",
-              "data-test": "photo-viewer",
-              class: "fixed inset-0 flex flex-col bg-[#0b1210] text-[#f1f5f3] outline-none",
-              onKeydown: Te
-            }, [
-              h("div", ot, [
-                h("h2", nt, [
-                  i.title ? (m(), f("span", lt, ee(i.title) + " · ", 1)) : k("", !0),
-                  h("span", st, ee(u(r)("core.viewer.counter", { current: o.value + 1, total: i.items.length })), 1)
-                ]),
-                t[6] || (t[6] = h("div", { class: "grow" }, null, -1)),
-                p.value ? Ke(e.$slots, "actions", {
-                  item: p.value,
-                  index: o.value
-                }, void 0, void 0, 0) : k("", !0),
-                h("button", {
-                  type: "button",
-                  class: M([I, "compact:hidden"]),
-                  "aria-label": u(r)("core.viewer.zoom_out"),
-                  "aria-disabled": !D.value,
-                  "data-test": "zoom-out",
-                  onClick: t[0] || (t[0] = (n) => A(-1))
-                }, [
-                  T(u(S), {
-                    name: "zoomOut",
-                    size: 18
-                  })
-                ], 10, rt),
-                h("p", ut, ee(u(r)("core.viewer.zoom_percent", { percent: $e.value })), 1),
-                h("button", {
-                  type: "button",
-                  class: M([I, "compact:hidden"]),
-                  "aria-label": u(r)("core.viewer.zoom_in"),
-                  "aria-disabled": c.value >= u(ue),
-                  "data-test": "zoom-in",
-                  onClick: t[1] || (t[1] = (n) => A(1))
-                }, [
-                  T(u(S), {
-                    name: "zoomIn",
-                    size: 18
-                  })
-                ], 10, dt),
-                h("button", {
-                  type: "button",
-                  class: M(I),
-                  "aria-label": u(r)("core.viewer.rotate"),
-                  "data-test": "rotate",
-                  onClick: ne
-                }, [
-                  T(u(S), {
-                    name: "rotateCounterclockwise",
-                    size: 18
-                  })
-                ], 8, ct),
-                p.value ? (m(), f("a", {
-                  key: 1,
-                  href: p.value.src,
-                  download: p.value.downloadName ?? "",
-                  target: "_blank",
-                  rel: "noopener",
-                  class: M(I),
-                  "aria-label": u(r)("core.viewer.download"),
-                  "data-test": "download"
-                }, [
-                  T(u(S), {
-                    name: "download",
-                    size: 18
-                  })
-                ], 8, ht)) : k("", !0),
-                h("button", {
-                  type: "button",
-                  class: M([I, "bg-white/16"]),
-                  "aria-label": u(r)("core.actions.close"),
-                  "data-test": "close",
-                  onClick: me
-                }, [
-                  T(u(S), {
-                    name: "close",
-                    size: 18
-                  })
-                ], 10, vt)
-              ]),
-              h("div", mt, [
-                i.items.length > 1 ? (m(), f("button", {
-                  key: 0,
-                  type: "button",
-                  class: M([I, "size-12 compact:hidden"]),
-                  "aria-label": u(r)("core.viewer.previous"),
-                  "aria-disabled": !he.value,
-                  "data-test": "previous",
-                  onClick: t[2] || (t[2] = (n) => V(-1))
-                }, [
-                  T(u(S), {
-                    name: "arrowLeftSLine",
-                    size: 22
-                  })
-                ], 10, pt)) : k("", !0),
-                h("div", {
-                  ref_key: "stage",
-                  ref: x,
-                  "data-test": "photo-stage",
-                  class: M(["relative h-full min-w-0 grow touch-none overflow-hidden rounded-md select-none", D.value ? "cursor-grab active:cursor-grabbing" : ""]),
-                  onPointerdown: Oe,
-                  onPointermove: Le,
-                  onPointerup: t[3] || (t[3] = (n) => xe(n)),
-                  onPointercancel: t[4] || (t[4] = (n) => xe(n, !0)),
-                  onWheel: re(Se, ["prevent"])
-                }, [
-                  p.value ? (m(), f("img", {
-                    key: p.value.src,
-                    ref: "image",
-                    src: p.value.src,
-                    alt: p.value.alt,
-                    draggable: "false",
-                    "data-test": "photo",
-                    class: M(["absolute top-1/2 left-1/2 max-w-none", [ce.value ? "" : "opacity-0", ie.value ? "" : "transition-transform duration-motion-normal ease-motion-standard", X.value === "back" ? "animate-step-back" : X.value === "forward" ? "animate-step-in" : ""]]),
-                    style: te(Pe.value),
-                    onLoad: oe
-                  }, null, 46, ft)) : k("", !0),
-                  D.value && w.value ? (m(), f("div", {
-                    key: 1,
-                    "data-test": "mini-map",
-                    class: "absolute right-3.5 bottom-3.5 overflow-hidden rounded-md bg-black/50 ring-1 ring-white/20",
-                    style: te({ width: `${w.value.image.width}px`, height: `${w.value.image.height}px` }),
-                    onPointerdown: re(we, ["stop"]),
-                    onPointermove: re(we, ["stop"])
-                  }, [
-                    p.value ? (m(), f("img", {
-                      key: 0,
-                      src: p.value.thumb ?? p.value.src,
-                      alt: "",
-                      draggable: "false",
-                      class: "pointer-events-none absolute top-1/2 left-1/2 max-w-none opacity-80",
-                      style: te(Be.value)
-                    }, null, 12, gt)) : k("", !0),
-                    h("span", {
-                      class: "pointer-events-none absolute rounded-xs ring-2 ring-[#6ee7b7]",
-                      "data-test": "mini-map-view",
-                      style: te({ left: `${w.value.view.x}px`, top: `${w.value.view.y}px`, width: `${w.value.view.width}px`, height: `${w.value.view.height}px` })
-                    }, null, 4)
-                  ], 36)) : k("", !0)
-                ], 34),
-                i.items.length > 1 ? (m(), f("button", {
-                  key: 1,
-                  type: "button",
-                  class: M([I, "size-12 compact:hidden"]),
-                  "aria-label": u(r)("core.viewer.next"),
-                  "aria-disabled": !ve.value,
-                  "data-test": "next",
-                  onClick: t[5] || (t[5] = (n) => V(1))
-                }, [
-                  T(u(S), {
-                    name: "arrowRightSLine",
-                    size: 22
-                  })
-                ], 10, xt)) : k("", !0)
-              ]),
-              i.items.length > 1 ? (m(), f("ul", {
-                key: 0,
-                ref_key: "strip",
-                ref: de,
-                "data-test": "photo-strip",
-                class: "flex shrink-0 justify-start gap-2 overflow-x-auto px-4 pt-4 pb-[max(1.25rem,var(--app-safe-bottom))] scrollbar-hide md:justify-center md:px-4.5"
-              }, [
-                (m(!0), f(We, null, je(i.items, (n, v) => (m(), f("li", {
-                  key: n.src,
-                  class: "shrink-0"
-                }, [
-                  h("button", {
-                    type: "button",
-                    "aria-label": n.alt,
-                    "aria-current": v === o.value ? "true" : void 0,
-                    "data-test": "thumbnail",
-                    class: M(["block h-11 w-16 cursor-pointer overflow-hidden rounded-[5px] bg-[#2a3431] transition-opacity duration-motion-fast focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#6ee7b7]", v === o.value ? "ring-2 ring-[#6ee7b7]" : "opacity-60 hover:opacity-100"]),
-                    onClick: (G) => {
-                      X.value = v > o.value ? "forward" : "back", o.value = v;
-                    }
-                  }, [
-                    h("img", {
-                      src: n.thumb ?? n.src,
-                      alt: "",
-                      loading: "lazy",
-                      draggable: "false",
-                      class: "size-full object-cover"
-                    }, null, 8, yt)
-                  ], 10, wt)
-                ]))), 128))
-              ], 512)) : (m(), f("div", bt)),
-              h("span", _t, ee(p.value?.alt), 1)
-            ], 40, it)) : k("", !0)
-          ]),
-          _: 3
-        })
-      ])) : k("", !0)
-    ]));
-  }
-});
-export {
-  Tt as _
-};