vue-amazing-ui/lib/avatar/Avatar.vue2.cjs

An Amazing Vue3 UI Components Library, Using TypeScript.

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),s=require("../utils/index.cjs"),f=["src","alt"],m=t.defineComponent({__name:"Avatar",props:{color:{default:"rgba(0, 0, 0, 0.25)"},shape:{default:"circle"},size:{default:"middle"},src:{default:void 0},alt:{default:void 0},icon:{type:[Object,Function],default:void 0},href:{default:void 0},target:{default:"_self"}},setup(i){const e=i,o=t.ref(window.innerWidth),a=s.useSlotsExist(["default","icon"]),r=t.computed(()=>e.src?!1:!!(a.icon||e.icon)),n=t.computed(()=>{if(typeof e.size=="number")return r.value?{backgroundColor:e.color,width:`${e.size}px`,height:`${e.size}px`,lineHeight:`${e.size}px`,fontSize:`${e.size/2}px`}:{backgroundColor:e.color,width:`${e.size}px`,height:`${e.size}px`,lineHeight:`${e.size}px`,fontSize:"18px"};if(typeof e.size=="object"){let l=32;return o.value>=1600&&e.size.xxl!==void 0?l=e.size.xxl:o.value>=1200&&e.size.xl!==void 0?l=e.size.xl:o.value>=992&&e.size.lg!==void 0?l=e.size.lg:o.value>=768&&e.size.md!==void 0?l=e.size.md:o.value>=576&&e.size.sm!==void 0?l=e.size.sm:o.value<576&&e.size.xs!==void 0&&(l=e.size.xs),{backgroundColor:e.color,width:`${l}px`,height:`${l}px`,lineHeight:`${l}px`,fontSize:`${l/2}px`}}return{backgroundColor:e.color}}),c=t.computed(()=>!e.src&&!r.value?a.default:!1),u=t.computed(()=>{if(typeof e.size=="string")return{transform:"scale(1) translateX(-50%)"};if(typeof e.size=="number"){const l=Math.min(1,Math.max(.022222222222222223,(1+(e.size-9)*1)/45));return{lineHeight:`${e.size}px`,transform:`scale(${l}) translateX(-50%)`}}return{}});s.useEventListener(window,"resize",d);function d(){o.value=window.innerWidth}return(l,v)=>(t.openBlock(),t.createBlock(t.resolveDynamicComponent(i.href?"a":"div"),{class:t.normalizeClass(["avatar-wrap",[`avatar-${i.shape}`,{[`avatar-${i.size}`]:typeof i.size=="string"&&["small","middle","large"].includes(i.size),"avatar-image":i.src,"avatar-link":i.href}]]),style:t.normalizeStyle(n.value),href:i.href,target:i.target},{default:t.withCtx(()=>[i.src?(t.openBlock(),t.createElementBlock("img",{key:0,class:"image-item",src:i.src,alt:i.alt},null,8,f)):t.createCommentVNode("",!0),!i.src&&r.value?t.renderSlot(l.$slots,"icon",{key:1},()=>[(t.openBlock(),t.createBlock(t.resolveDynamicComponent(i.icon)))],!0):t.createCommentVNode("",!0),c.value?(t.openBlock(),t.createElementBlock("span",{key:2,class:"string-item",style:t.normalizeStyle(u.value)},[t.renderSlot(l.$slots,"default",{},void 0,!0)],4)):t.createCommentVNode("",!0)]),_:3},8,["class","style","href","target"]))}});exports.default=m;