vexip-ui/lib/components/image/image-group.vue2.cjs

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

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