@fifteen/design-system-vue/dist/cjs/components/FAvatar.js

Vue 3 (Composition API + Typescript) implementation of the Fifteen Design System

"use strict";const c=require("./FImage.js");;/* empty css         */const e=require("vue"),u=require("../utils/genSize.js"),l=require("../utils/getCssColor.js"),i={key:0,class:"FAvatar__letter"},d=e.defineComponent({__name:"FAvatar",props:{src:{default:""},alt:{default:""},size:{default:"80"},placeholder:{default:""},loading:{default:"lazy"},letter:{default:""},color:{default:"transparent"},textColor:{default:"secondary"}},setup(a){const t=a,o=e.computed(()=>(t.letter[0]??"").toUpperCase()),s=e.computed(()=>({"--FAvatar--size":u.genSize(t.size),"--FAvatar--color":l.getCssColor(t.color),"--FAvatar--textColor":l.getCssColor(t.textColor)}));return(r,p)=>{const n=c;return e.openBlock(),e.createElementBlock("div",{class:"FAvatar",style:e.normalizeStyle(e.unref(s))},[!r.src&&e.unref(o)?(e.openBlock(),e.createElementBlock("div",i,e.toDisplayString(e.unref(o)),1)):(e.openBlock(),e.createBlock(n,{key:1,src:r.src,placeholder:r.placeholder,alt:r.alt,width:r.size,height:r.size,loading:r.loading,"background-color":r.color,corners:"circular"},null,8,["src","placeholder","alt","width","height","loading","background-color"]))],4)}}});module.exports=d;