30 lines
4.6 KiB
JavaScript
30 lines
4.6 KiB
JavaScript
import{o as I,i as M}from"./utils.js";import{a as W}from"./Tag.js";import{z as G,as as T,a_ as K,ar as P,bT as N,au as _,ay as k,B as V,ax as A,r as p,c as H,j as y,aY as Y,aC as D,c2 as U,s as X,az as q,u as J,w as Q,b4 as Z,H as O,aG as ee,bf as re}from"./_plugin-vue_export-helper.js";import{at as oe}from"./main.js";const te=G("n-avatar-group"),ne=T("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);
|
|
`,[K(P("&","--n-merged-color: var(--n-color-modal);")),N(P("&","--n-merged-color: var(--n-color-popover);")),P("img",`
|
|
width: 100%;
|
|
height: 100%;
|
|
`),_("text",`
|
|
white-space: nowrap;
|
|
display: inline-block;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
`),T("icon",`
|
|
vertical-align: bottom;
|
|
font-size: calc(var(--n-merged-size) - 6px);
|
|
`),_("text","line-height: 1.25")]),ae=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}),ce=V({name:"Avatar",props:ae,setup(o){const{mergedClsPrefixRef:l,inlineThemeDisabled:m}=A(o),g=p(!1);let d=null;const c=p(null),s=p(null),R=()=>{const{value:e}=c;if(e&&(d===null||d!==e.innerHTML)){d=e.innerHTML;const{value:r}=s;if(r){const{offsetWidth:t,offsetHeight:a}=r,{offsetWidth:n,offsetHeight:j}=e,x=.9,S=Math.min(t/n*x,a/j*x,1);e.style.transform=`translateX(-50%) translateY(-50%) scale(${S})`}}},b=H(te,null),i=y(()=>{const{size:e}=o;if(e)return e;const{size:r}=b||{};return r||"medium"}),u=k("Avatar","-avatar",ne,oe,o,l),z=H(W,null),f=y(()=>{if(b)return!0;const{round:e,circle:r}=o;return e!==void 0||r!==void 0?e||r:z?z.roundRef.value:!1}),v=y(()=>b?!0:o.bordered||!1),F=y(()=>{const e=i.value,r=f.value,t=v.value,{color:a}=o,{self:{borderRadius:n,fontSize:j,color:x,border:S,colorModal:w,colorPopover:B},common:{cubicBezierEaseInOut:$}}=u.value;let E;return typeof e=="number"?E=`${e}px`:E=u.value.self[Y("height",e)],{"--n-font-size":j,"--n-border":t?S:"none","--n-border-radius":r?"50%":n,"--n-color":a||x,"--n-color-modal":a||w,"--n-color-popover":a||B,"--n-bezier":$,"--n-merged-size":`var(--n-avatar-size-override, ${E})`}}),h=m?D("avatar",y(()=>{const e=i.value,r=f.value,t=v.value,{color:a}=o;let n="";return e&&(typeof e=="number"?n+=`a${e}`:n+=e[0]),r&&(n+="b"),t&&(n+="c"),a&&(n+=U(a)),n}),F,o):void 0,L=p(!o.lazy);X(()=>{if(o.lazy&&o.intersectionObserverOptions){let e;const r=q(()=>{e==null||e(),e=void 0,o.lazy&&(e=I(s.value,o.intersectionObserverOptions,L))});J(()=>{r(),e==null||e()})}}),Q(()=>{var e;return o.src||((e=o.imgProps)===null||e===void 0?void 0:e.src)},()=>{g.value=!1});const C=p(!o.lazy);return{textRef:c,selfRef:s,mergedRoundRef:f,mergedClsPrefix:l,fitTextTransform:R,cssVars:m?void 0:F,themeClass:h==null?void 0:h.themeClass,onRender:h==null?void 0:h.onRender,hasLoadError:g,shouldStartLoading:L,loaded:C,mergedOnError:e=>{if(!L.value)return;g.value=!0;const{onError:r,imgProps:{onError:t}={}}=o;r==null||r(e),t==null||t(e)},mergedOnLoad:e=>{const{onLoad:r,imgProps:{onLoad:t}={}}=o;r==null||r(e),t==null||t(e),C.value=!0}}},render(){var o,l;const{$slots:m,src:g,mergedClsPrefix:d,lazy:c,onRender:s,loaded:R,hasLoadError:b,imgProps:i={}}=this;s==null||s();let u;const z=!R&&!b&&(this.renderPlaceholder?this.renderPlaceholder():(l=(o=this.$slots).placeholder)===null||l===void 0?void 0:l.call(o));return this.hasLoadError?u=this.renderFallback?this.renderFallback():Z(m.fallback,()=>[O("img",{src:this.fallbackSrc,style:{objectFit:this.objectFit}})]):u=ee(m.default,f=>{if(f)return O(re,{onResize:this.fitTextTransform},{default:()=>O("span",{ref:"textRef",class:`${d}-avatar__text`},f)});if(g||i.src){const v=this.src||i.src;return O("img",Object.assign(Object.assign({},i),{loading:M&&!this.intersectionObserverOptions&&c?"lazy":"eager",src:c&&this.intersectionObserverOptions?this.shouldStartLoading?v:void 0:v,"data-image-src":v,onLoad:this.mergedOnLoad,onError:this.mergedOnError,style:[i.style||"",{objectFit:this.objectFit},z?{height:"0",width:"0",visibility:"hidden",position:"absolute"}:""]}))}}),O("span",{ref:"selfRef",class:[`${d}-avatar`,this.themeClass],style:this.cssVars},u,c&&z)}});export{ce as _};
|