fuyn101
90bef4d33d
All checks were successful
ci/woodpecker/push/check_format Pipeline was successful
30 lines
5 KiB
JavaScript
30 lines
5 KiB
JavaScript
import{i as I,o as W}from"./utils.js";import{a as V}from"./Tag.js";import{X as A,az as C,x as K,Z as _,_ as N,be as G,M as E,$ as H,A as X,a5 as Z,B as y,a3 as q,aZ as D,a7 as U,r as O,h as $,c as x,a9 as k,aa as Y,ac as J,bV as Q,p as ee,ax as ne,q as re,w as oe}from"./_plugin-vue_export-helper.js";function te(n){const{borderRadius:l,avatarColor:a,cardColor:d,fontSize:c,heightTiny:u,heightSmall:s,heightMedium:z,heightLarge:m,heightHuge:i,modalColor:f,popoverColor:g}=n;return{borderRadius:l,fontSize:c,border:`2px solid ${d}`,heightTiny:u,heightSmall:s,heightMedium:z,heightLarge:m,heightHuge:i,color:C(d,a),colorModal:C(f,a),colorPopover:C(g,a)}}const ae={common:A,self:te},se=K("n-avatar-group"),ie=_("avatar",`
|
|
width: var(--n-merged-size);
|
|
height: var(--n-merged-size);
|
|
color: #FFF;
|
|
font-size: var(--n-font-size);
|
|
display: inline-flex;
|
|
position: relative;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
border: var(--n-border);
|
|
border-radius: var(--n-border-radius);
|
|
--n-merged-color: var(--n-color);
|
|
background-color: var(--n-merged-color);
|
|
transition:
|
|
border-color .3s var(--n-bezier),
|
|
background-color .3s var(--n-bezier),
|
|
color .3s var(--n-bezier);
|
|
`,[N(E("&","--n-merged-color: var(--n-color-modal);")),G(E("&","--n-merged-color: var(--n-color-popover);")),E("img",`
|
|
width: 100%;
|
|
height: 100%;
|
|
`),H("text",`
|
|
white-space: nowrap;
|
|
display: inline-block;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
`),_("icon",`
|
|
vertical-align: bottom;
|
|
font-size: calc(var(--n-merged-size) - 6px);
|
|
`),H("text","line-height: 1.25")]),le=Object.assign(Object.assign({},k.props),{size:[String,Number],src:String,circle:{type:Boolean,default:void 0},objectFit:String,round:{type:Boolean,default:void 0},bordered:{type:Boolean,default:void 0},onError:Function,fallbackSrc:String,intersectionObserverOptions:Object,lazy:Boolean,onLoad:Function,renderPlaceholder:Function,renderFallback:Function,imgProps:Object,color:String}),fe=X({name:"Avatar",props:le,slots:Object,setup(n){const{mergedClsPrefixRef:l,inlineThemeDisabled:a}=U(n),d=O(!1);let c=null;const u=O(null),s=O(null),z=()=>{const{value:e}=u;if(e&&(c===null||c!==e.innerHTML)){c=e.innerHTML;const{value:r}=s;if(r){const{offsetWidth:o,offsetHeight:h}=r,{offsetWidth:t,offsetHeight:S}=e,R=.9,j=Math.min(o/t*R,h/S*R,1);e.style.transform=`translateX(-50%) translateY(-50%) scale(${j})`}}},m=$(se,null),i=x(()=>{const{size:e}=n;if(e)return e;const{size:r}=m||{};return r||"medium"}),f=k("Avatar","-avatar",ie,ae,n,l),g=$(V,null),v=x(()=>{if(m)return!0;const{round:e,circle:r}=n;return e!==void 0||r!==void 0?e||r:g?g.roundRef.value:!1}),b=x(()=>m?!0:n.bordered||!1),F=x(()=>{const e=i.value,r=v.value,o=b.value,{color:h}=n,{self:{borderRadius:t,fontSize:S,color:R,border:j,colorModal:w,colorPopover:B},common:{cubicBezierEaseInOut:M}}=f.value;let P;return typeof e=="number"?P=`${e}px`:P=f.value.self[Y("height",e)],{"--n-font-size":S,"--n-border":o?j:"none","--n-border-radius":r?"50%":t,"--n-color":h||R,"--n-color-modal":h||w,"--n-color-popover":h||B,"--n-bezier":M,"--n-merged-size":`var(--n-avatar-size-override, ${P})`}}),p=a?J("avatar",x(()=>{const e=i.value,r=v.value,o=b.value,{color:h}=n;let t="";return e&&(typeof e=="number"?t+=`a${e}`:t+=e[0]),r&&(t+="b"),o&&(t+="c"),h&&(t+=Q(h)),t}),F,n):void 0,L=O(!n.lazy);ee(()=>{if(n.lazy&&n.intersectionObserverOptions){let e;const r=ne(()=>{e==null||e(),e=void 0,n.lazy&&(e=W(s.value,n.intersectionObserverOptions,L))});re(()=>{r(),e==null||e()})}}),oe(()=>{var e;return n.src||((e=n.imgProps)===null||e===void 0?void 0:e.src)},()=>{d.value=!1});const T=O(!n.lazy);return{textRef:u,selfRef:s,mergedRoundRef:v,mergedClsPrefix:l,fitTextTransform:z,cssVars:a?void 0:F,themeClass:p==null?void 0:p.themeClass,onRender:p==null?void 0:p.onRender,hasLoadError:d,shouldStartLoading:L,loaded:T,mergedOnError:e=>{if(!L.value)return;d.value=!0;const{onError:r,imgProps:{onError:o}={}}=n;r==null||r(e),o==null||o(e)},mergedOnLoad:e=>{const{onLoad:r,imgProps:{onLoad:o}={}}=n;r==null||r(e),o==null||o(e),T.value=!0}}},render(){var n,l;const{$slots:a,src:d,mergedClsPrefix:c,lazy:u,onRender:s,loaded:z,hasLoadError:m,imgProps:i={}}=this;s==null||s();let f;const g=!z&&!m&&(this.renderPlaceholder?this.renderPlaceholder():(l=(n=this.$slots).placeholder)===null||l===void 0?void 0:l.call(n));return this.hasLoadError?f=this.renderFallback?this.renderFallback():Z(a.fallback,()=>[y("img",{src:this.fallbackSrc,style:{objectFit:this.objectFit}})]):f=q(a.default,v=>{if(v)return y(D,{onResize:this.fitTextTransform},{default:()=>y("span",{ref:"textRef",class:`${c}-avatar__text`},v)});if(d||i.src){const b=this.src||i.src;return y("img",Object.assign(Object.assign({},i),{loading:I&&!this.intersectionObserverOptions&&u?"lazy":"eager",src:u&&this.intersectionObserverOptions?this.shouldStartLoading?b:void 0:b,"data-image-src":b,onLoad:this.mergedOnLoad,onError:this.mergedOnError,style:[i.style||"",{objectFit:this.objectFit},g?{height:"0",width:"0",visibility:"hidden",position:"absolute"}:""]}))}}),y("span",{ref:"selfRef",class:[`${c}-avatar`,this.themeClass],style:this.cssVars},f,u&&g)}});export{fe as _};
|