@extclp/vexip-ui/es/components/image/image-group.vue2.mjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

import { defineComponent as y, useSlots as I, ref as c, reactive as u, computed as v, provide as P, toRef as f, openBlock as d, createElementBlock as C, normalizeClass as E, renderSlot as w, unref as s, createBlock as G, createSlots as N, withCtx as T, createVNode as b, createCommentVNode as B } from "vue";
import "../image-viewer/index.mjs";
import "../renderer/index.mjs";
import { useProps as R, useNameHelper as U, emitEvent as $ } from "@vexip-ui/config";
import { debounceMinor as z } from "@vexip-ui/utils";
import { imageGroupProps as V } from "./props.mjs";
import { GROUP_STATE as H } from "./symbol.mjs";
import L from "./image-viewer.vue2.mjs";
import M from "../renderer/renderer.mjs";
const Y = /* @__PURE__ */ y({
  name: "ImageGroup",
  __name: "image-group",
  props: V,
  setup(g, { expose: x }) {
    const r = R("imageGroup", g, {
      showAll: !1,
      preview: !1,
      viewerTransfer: null,
      slots: () => ({})
    }), A = I(), l = U("image-group"), a = c(!1), i = c(0), n = u(/* @__PURE__ */ new Set()), S = v(() => [
      l.b(),
      l.ns("image-vars"),
      {
        [l.bm("preview")]: r.preview
      }
    ]), p = v(() => Array.from(n).map((e) => e.src)), m = z(() => {
      const e = n.size;
      Array.from(n).forEach((t, o) => {
        t.index = o, t.total = e;
      });
    });
    P(
      H,
      u({
        showAll: f(r, "showAll"),
        preview: f(r, "preview"),
        increaseItem: _,
        decreaseItem: h,
        handlePreview: k
      })
    ), x({ currentActive: a, currentIndex: i });
    function _(e) {
      n.add(e), m();
    }
    function h(e) {
      n.delete(e), m();
    }
    function k(e) {
      i.value = e.index, a.value = !0, $(r.onPreview, e.src, Array.from(p.value));
    }
    return (e, t) => (d(), C("div", {
      class: E(S.value)
    }, [
      w(e.$slots, "default"),
      s(r).preview ? (d(), G(s(L), {
        key: 0,
        active: a.value,
        "onUpdate:active": t[0] || (t[0] = (o) => a.value = o),
        index: i.value,
        "onUpdate:index": t[1] || (t[1] = (o) => i.value = o),
        "src-list": p.value,
        transfer: s(r).viewerTransfer
      }, N({ _: 2 }, [
        A.preview || s(r).slots.preview ? {
          name: "default",
          fn: T(({ src: o }) => [
            w(e.$slots, "preview", { src: o }, () => [
              b(s(M), {
                renderer: s(r).slots.preview,
                data: { src: o }
              }, null, 8, ["renderer", "data"])
            ])
          ]),
          key: "0"
        } : void 0
      ]), 1032, ["active", "index", "src-list", "transfer"])) : B("", !0)
    ], 2));
  }
});
export {
  Y as default
};
//# sourceMappingURL=image-group.vue2.mjs.map