@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, createElementBlock as C, openBlock as d, normalizeClass as E, renderSlot as w, createBlock as G, createCommentVNode as N, unref as s, createSlots as T, withCtx as b, createVNode 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
      }, T({ _: 2 }, [
        A.preview || s(r).slots.preview ? {
          name: "default",
          fn: b(({ 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"])) : N("", !0)
    ], 2));
  }
});
export {
  Y as default
};
//# sourceMappingURL=image-group.vue2.mjs.map