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

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

"use strict";const e=require("vue");require("../icon/index.cjs");require("../resize-observer/index.cjs");require("../renderer/index.cjs");const i=require("@vexip-ui/config"),H=require("@vexip-ui/hooks"),V=require("./props.cjs"),k=require("./symbol.cjs"),b=require("../renderer/renderer.cjs"),$=require("../icon/icon.cjs"),P=require("../resize-observer/resize-observer.cjs"),T=["src","alt","srcset"],W=["src","alt"],F=e.defineComponent({name:"Avatar",__name:"avatar",props:V.avatarProps,setup(h,{expose:g}){const y=h,r=i.useProps("avatar",y,{size:"default",src:{default:"",static:!0},icon:i.createIconProp(),circle:!1,alt:"",fit:{default:"cover",validator:t=>k.objectFitValues.includes(t)},srcSet:"",gap:4,iconScale:1.4,fallbackSrc:"",color:null,background:null,slots:()=>({})}),z=e.useSlots(),f=e.inject(k.GROUP_STATE,null),l=i.useNameHelper("avatar"),n=e.ref(!1),s=e.ref(!1),v=e.ref(),p=H.useDisplay(()=>c(!0)),o=e.computed(()=>(f==null?void 0:f.size)??r.size),C=e.computed(()=>({[l.b()]:!0,[l.bs("vars")]:!0,[l.bm("inherit")]:r.inherit,[l.bm(o.value)]:typeof o.value!="number"&&o.value!=="default",[l.bm("circle")]:r.circle})),E=e.computed(()=>{const t={[l.cv("color")]:r.color,[l.cv("bg-color")]:r.background,[l.cv("image-fit")]:r.fit};return typeof o.value=="number"&&(t[l.cv("size")]=`${o.value}px`),t});e.watch(()=>r.src,()=>{n.value=!1,s.value=!1,c()}),e.watch(()=>r.fallbackSrc,()=>{s.value=!1,c()}),e.watch(()=>r.gap,()=>c()),g({loadFail:n,fallbackFail:s});function S(t){n.value=!0,i.emitEvent(r.onError,t)}let d=null;function c(t=!1){const u=v.value,a=p.value;if(u&&a&&(t||d===null||d!==a.textContent)){d=a.textContent;const{offsetWidth:q,offsetHeight:_}=u,{offsetWidth:B,offsetHeight:w}=a,m=r.gap*2,N=Math.min((q-m)/(B||1),(_-m)/(w||1),1);a.style.transform=`scale(${N})`}}function x(t){i.emitEvent(r.onClick,t)}return(t,u)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"wrapper",ref:v,class:e.normalizeClass(C.value),style:e.normalizeStyle(E.value),onClick:x},[(e.unref(r).src||e.unref(r).srcSet)&&!n.value?(e.openBlock(),e.createElementBlock("img",{key:0,class:e.normalizeClass(e.unref(l).be("image")),src:e.unref(r).src,alt:e.unref(r).alt,srcset:e.unref(r).srcSet,onError:S},null,42,T)):n.value&&e.unref(r).fallbackSrc&&!s.value?(e.openBlock(),e.createElementBlock("img",{key:1,class:e.normalizeClass(e.unref(l).be("image")),src:e.unref(r).fallbackSrc,alt:e.unref(r).alt,onError:u[0]||(u[0]=a=>s.value=!0)},null,42,W)):t.icon||z.icon?e.renderSlot(t.$slots,"icon",{key:2},()=>[e.createVNode(e.unref(b),{renderer:e.unref(r).slots.icon},{default:e.withCtx(()=>[e.createVNode(e.unref($),{class:e.normalizeClass(e.unref(l).be("icon")),icon:t.icon,scale:e.unref(r).iconScale},null,8,["class","icon","scale"])]),_:1},8,["renderer"])]):(e.openBlock(),e.createBlock(e.unref(P),{key:3,"on-resize":c},{default:e.withCtx(()=>[e.createElementVNode("span",{ref_key:"text",ref:p,class:e.normalizeClass(e.unref(l).be("text"))},[e.renderSlot(t.$slots,"default",{},()=>[e.createVNode(e.unref(b),{renderer:e.unref(r).slots.default},null,8,["renderer"])])],2)]),_:3}))],6))}});module.exports=F;
//# sourceMappingURL=avatar.vue2.cjs.map