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