images-viewer-vue3/dist/es/components/viewer.vue.js

A lightweight image viewer for Vue3

import { defineComponent as g, ref as k, onMounted as d, openBlock as h, createElementBlock as v, renderSlot as _, getCurrentInstance as b, nextTick as y } from "vue";
import { imageViewerApi as w } from "../index.js";
const C = {
  ref: "viewerWrapRef",
  class: "viewer-root"
}, E = /* @__PURE__ */ g({
  __name: "viewer",
  emits: ["on-click"],
  setup($, { emit: m }) {
    const u = m, s = k([]), f = () => {
      const e = b();
      if (e && (e != null && e.proxy)) {
        const c = e == null ? void 0 : e.proxy.$el;
        y().then((A) => {
          Array.from(c.children).forEach((r, t) => {
            r.setAttribute("data-index", `${t}`), r.src && s.value.push({ key: `${t}`, index: t, url: r.src });
            const n = new MutationObserver(() => {
              r.src && (s.value.push({ key: `${t}`, index: t, url: r.src }), n.disconnect());
            });
            n.observe(r, { attributes: !0, attributeFilter: ["src"] }), r.onclick = function(i) {
              const { src: a } = i.target, l = s.value.sort((o, p) => Number(o.key) - Number(p.key));
              w({
                specifyIndex: t,
                current: a,
                imageDom: r,
                from: "component",
                images: l.map((o) => o.url).filter((o) => o)
              }), u("on-click", { evt: i, image: a });
            };
          });
        });
      }
    };
    return d(() => {
      f();
    }), (e, c) => (h(), v("div", C, [
      _(e.$slots, "default", { ref: "slotContent" })
    ], 512));
  }
});
export {
  E as default
};