@miletorix/vitepress-gallery/dist/gallery.es.js

A responsive, swipeable image gallery component for VitePress with thumbnails, navigation, captions, and smooth transitions.

import { defineComponent as B, ref as m, onMounted as P, onUnmounted as V, computed as v, createElementBlock as i, openBlock as r, createElementVNode as a, createCommentVNode as H, toDisplayString as f, Fragment as T, renderList as x, withModifiers as _, normalizeClass as I, createVNode as S, Transition as $, withCtx as D } from "vue";
const G = { class: "gallery-box" }, q = { class: "top-bar" }, F = ["disabled"], O = { class: "counter" }, U = ["disabled"], W = { class: "thumbnails" }, j = ["onClick", "aria-pressed", "title"], A = ["src", "alt"], J = {
  class: "all-images-hidden",
  "aria-hidden": "true"
}, K = ["src", "alt"], Q = {
  key: 0,
  class: "caption"
}, R = { class: "image-wrapper" }, Y = ["src", "alt"], Z = /* @__PURE__ */ B({
  __name: "Gallery",
  props: {
    images: {},
    captions: {}
  },
  setup(g) {
    const o = g, e = m(0), u = m("fade"), c = m(!1);
    let w = 0;
    function p() {
      c.value = window.innerWidth <= 960;
    }
    function L(t) {
      w = t.changedTouches[0].clientX;
    }
    P(() => {
      p(), window.addEventListener("resize", p);
    }), V(() => {
      window.removeEventListener("resize", p);
    });
    function E(t) {
      const s = t.changedTouches[0].clientX - w, n = 40;
      s > n ? C() : s < -n && y();
    }
    const b = v(() => e.value > 0), k = v(() => e.value < o.images.length - 1);
    function C() {
      b.value && (u.value = "slide-right", e.value--);
    }
    function y() {
      k.value && (u.value = "slide-left", e.value++);
    }
    function M(t) {
      t !== e.value && (u.value = t > e.value ? "slide-left" : "slide-right", e.value = t);
    }
    const N = v(() => {
      const t = [], l = c.value ? 1 : 2, s = (c.value, 2);
      for (let n = -l; n <= s; n++) {
        const h = e.value + n;
        h >= 0 && h < o.images.length && t.push(o.images[h]);
      }
      return t;
    }), d = v(() => {
      const t = c.value ? 1 : 2;
      return Math.min(t, e.value);
    });
    function z(t) {
      return t.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
    }
    const X = v(() => {
      const t = o.captions?.[e.value];
      return t ? z(t) : `Image ${e.value + 1}`;
    });
    return (t, l) => (r(), i("div", {
      class: "gallery-container",
      onTouchstart: L,
      onTouchend: E
    }, [
      a("div", G, [
        a("div", q, [
          a("button", {
            onClick: C,
            disabled: !b.value,
            "aria-label": "Previous",
            title: "Previous"
          }, [...l[2] || (l[2] = [
            a("svg", {
              xmlns: "http://www.w3.org/2000/svg",
              width: "20",
              height: "20",
              viewBox: "0 0 20 20"
            }, [
              a("path", {
                fill: "currentColor",
                d: "m5.83 9l5.58-5.58L10 2l-8 8l8 8l1.41-1.41L5.83 11H18V9z"
              })
            ], -1)
          ])], 8, F),
          a("span", O, f(e.value + 1) + " / " + f(o.images.length), 1),
          a("button", {
            onClick: y,
            disabled: !k.value,
            "aria-label": "Next",
            title: "Next"
          }, [...l[3] || (l[3] = [
            a("svg", {
              xmlns: "http://www.w3.org/2000/svg",
              width: "20",
              height: "20",
              viewBox: "0 0 20 20"
            }, [
              a("path", {
                fill: "currentColor",
                d: "M2 11h12.2l-5.6 5.6L10 18l8-8l-8-8l-1.4 1.4L14.2 9H2z"
              })
            ], -1)
          ])], 8, U)
        ]),
        a("div", W, [
          (r(!0), i(T, null, x(N.value, (s, n) => (r(), i("button", {
            key: n,
            type: "button",
            class: I(["thumb", { active: e.value === e.value - d.value + n }]),
            onPointerdown: l[1] || (l[1] = _(() => {
            }, ["stop"])),
            onClick: _((h) => M(e.value - d.value + n), ["stop"]),
            "aria-pressed": e.value === e.value - d.value + n,
            title: o.captions?.[e.value - d.value + n] || `Image ${e.value - d.value + n + 1}`
          }, [
            a("img", {
              src: s,
              alt: o.captions?.[e.value - d.value + n] || "",
              draggable: "false",
              onDragstart: l[0] || (l[0] = _(() => {
              }, ["prevent"]))
            }, null, 40, A)
          ], 42, j))), 128))
        ]),
        a("div", J, [
          (r(!0), i(T, null, x(o.images, (s, n) => (r(), i("img", {
            key: "hidden-" + n,
            src: s,
            alt: o.captions?.[n] || "",
            loading: "eager",
            draggable: "false"
          }, null, 8, K))), 128))
        ]),
        o.captions?.[e.value] ? (r(), i("div", Q, f(o.captions[e.value]), 1)) : H("", !0),
        a("div", R, [
          S($, {
            name: u.value,
            mode: "out-in"
          }, {
            default: D(() => [
              (r(), i("img", {
                src: o.images[e.value],
                alt: X.value,
                key: o.images[e.value]
              }, null, 8, Y))
            ]),
            _: 1
          }, 8, ["name"])
        ])
      ])
    ], 32));
  }
}), ee = (g, o) => {
  const e = g.__vccOpts || g;
  for (const [u, c] of o)
    e[u] = c;
  return e;
}, ne = /* @__PURE__ */ ee(Z, [["__scopeId", "data-v-0631162a"]]);
export {
  ne as Gallery
};