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

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

"use strict";const e=require("vue");require("./index.cjs");require("../renderer/index.cjs");require("../tooltip/index.cjs");const f=require("@vexip-ui/config"),m=require("./props.cjs"),k=require("./symbol.cjs"),c=require("../renderer/renderer.cjs"),o=require("./avatar.vue2.cjs"),h=require("../tooltip/tooltip.cjs"),b=e.defineComponent({name:"AvatarGroup",__name:"avatar-group",props:m.avatarGroupProps,setup(d){const p=d,r=f.useProps("avatarGroup",p,{size:"default",options:{default:()=>[],static:!0},circle:!1,max:null,showTip:!1,tipTrigger:"hover",vertical:!1,offset:null,restColor:null,restBackground:null,slots:()=>({})}),l=f.useNameHelper("avatar-group"),u=e.ref([]),a=e.ref([]);e.watchEffect(()=>{const s=r.options.length;r.max>0&&s>r.max?(u.value=r.options.slice(0,r.max-1),a.value=r.options.slice(r.max-1)):(u.value=Array.from(r.options),a.value=[])}),e.provide(k.GROUP_STATE,r);const v=e.computed(()=>({[l.b()]:!0,[l.ns("avatar-vars")]:!0,[l.bm("inherit")]:r.inherit,[l.bm(r.size)]:typeof r.size!="number"&&r.size!=="default",[l.bm("circle")]:r.circle,[l.bm("vertical")]:r.vertical})),g=e.computed(()=>{const s={};return typeof r.offset=="number"&&(s[l.cv("offset")]=`${r.offset}px`),s});return(s,i)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(v.value),role:"group",style:e.normalizeStyle(g.value)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(u.value,(t,n)=>(e.openBlock(),e.createElementBlock("div",{key:n,class:e.normalizeClass(e.unref(l).be("item"))},[e.renderSlot(s.$slots,"default",{option:t,index:n},()=>[e.createVNode(e.unref(c),{renderer:e.unref(r).slots.default,data:{option:t,index:n}},{default:e.withCtx(()=>[e.createVNode(e.unref(o),{inherit:"",src:t.src,icon:t.icon,alt:t.alt,fit:t.fit,"src-set":t.srcSet,gap:t.gap,"icon-scale":t.iconScale,"fallback-src":t.fallbackSrc},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.text),1)]),_:2},1032,["src","icon","alt","fit","src-set","gap","icon-scale","fallback-src"])]),_:2},1032,["renderer","data"])])],2))),128)),a.value.length?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass([e.unref(l).be("item"),e.unref(l).bem("item","rest")])},[e.unref(r).showTip?(e.openBlock(),e.createBlock(e.unref(h),{key:0,inherit:"",trigger:e.unref(r).tipTrigger,"tip-class":e.unref(l).be("rest")},{trigger:e.withCtx(()=>[e.renderSlot(s.$slots,"rest",{options:a.value,count:a.value.length},()=>[e.createVNode(e.unref(c),{renderer:e.unref(r).slots.rest,data:{options:a.value,count:a.value.length}},{default:e.withCtx(()=>[e.createVNode(e.unref(o),{inherit:"",color:e.unref(r).restColor,background:e.unref(r).restBackground},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(`+${a.value.length}`),1)]),_:1},8,["color","background"])]),_:1},8,["renderer","data"]),i[0]||(i[0]=e.createTextVNode("> "))])]),default:e.withCtx(()=>[e.renderSlot(s.$slots,"tip",{options:a.value,count:a.value.length},()=>[e.createVNode(e.unref(c),{renderer:e.unref(r).slots.tip,data:{options:a.value,count:a.value.length}},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.value,(t,n)=>(e.openBlock(),e.createBlock(e.unref(o),{key:n,inherit:"",src:t.src,icon:t.icon,alt:t.alt,fit:t.fit,"src-set":t.srcSet,gap:t.gap,"icon-scale":t.iconScale,"fallback-src":t.fallbackSrc},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.text),1)]),_:2},1032,["src","icon","alt","fit","src-set","gap","icon-scale","fallback-src"]))),128))]),_:1},8,["renderer","data"])])]),_:3},8,["trigger","tip-class"])):e.renderSlot(s.$slots,"rest",{key:1,options:a.value,count:a.value.length},()=>[e.createVNode(e.unref(c),{renderer:e.unref(r).slots.rest,data:{options:a.value,count:a.value.length}},{default:e.withCtx(()=>[e.createVNode(e.unref(o),{inherit:"",color:e.unref(r).restColor,background:e.unref(r).restBackground},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(`+${a.value.length}`),1)]),_:1},8,["color","background"])]),_:1},8,["renderer","data"])])],2)):e.createCommentVNode("",!0)],6))}});module.exports=b;
//# sourceMappingURL=avatar-group.vue2.cjs.map