maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
1 lines • 5.19 kB
JavaScript
import{t as _plugin_vue_export_helper_default}from"./_plugin-vue_export-helper.ChmETRGw.js";import{t as resolveLinkComponent}from"./resolveLinkComponent.BkamYM5e.js";import{Fragment,computed,createBlock,createCommentVNode,createElementBlock,createElementVNode,createVNode,defineAsyncComponent,defineComponent,mergeProps,normalizeClass,normalizeStyle,openBlock,renderSlot,resolveDynamicComponent,toDisplayString,unref,withCtx}from"vue";import{MazPencil}from"@maz-ui/icons/lazy/MazPencil";import '../assets/MazAvatar.C-1UbWga.css';var _hoisted_1=[`tabindex`];var _hoisted_2=[`src`,`alt`,`loading`];var _hoisted_3={class:`m-avatar__initial`};var _hoisted_4={key:0,class:`m-avatar__caption`};var MazAvatar_default=_plugin_vue_export_helper_default(defineComponent({inheritAttrs:!1,__name:`MazAvatar`,props:{style:{type:[Boolean,null,String,Object,Array]},class:{type:[Boolean,null,String,Object,Array]},src:{default:()=>void 0},caption:{default:()=>void 0},href:{default:()=>void 0},to:{default:()=>void 0},alt:{default:`avatar image`},target:{default:`_self`},size:{default:()=>void 0},bordered:{type:Boolean},clickable:{type:Boolean},square:{type:Boolean},noElevation:{type:Boolean},showCaption:{type:Boolean},imageHeightFull:{type:Boolean},hideLoader:{type:Boolean},buttonColor:{default:`info`},hideClickableIcon:{type:Boolean},letterCount:{default:()=>void 0},roundedSize:{default:`base`},fallbackSrc:{default:()=>void 0},loading:{default:`intersecting`},color:{default:`primary`}},emits:[`click`,`intersecting`,`loading`,`loaded`,`error`],setup(__props,{emit:__emit}){let emits=__emit;let MazLazyImg=defineAsyncComponent(()=>import(`../components/MazLazyImg.js`));let componentType=computed(()=>__props.to?resolveLinkComponent():__props.href?`a`:`div`);let isLink=computed(()=>!!__props.to||!!__props.href);function getInitials(name,lettersCount=__props.letterCount){return name.split(` `).map(word=>word[0]).join(``).slice(0,lettersCount)}let shouldDisplayImg=computed(()=>__props.src||!__props.src&&!__props.caption);function handleImageError(event){if(emits(`error`,event.target),__props.fallbackSrc&&event.target instanceof HTMLImageElement){let currentSrc=new URL(event.target.src);let fallbackSource=new URL(__props.fallbackSrc);if(currentSrc.href===fallbackSource.href)return;event.target.src=fallbackSource.href}}let hasInitial=computed(()=>!__props.src&&__props.caption);return(_ctx,_cache)=>(openBlock(),createBlock(resolveDynamicComponent(componentType.value),{style:normalizeStyle([{fontSize:__props.size},__props.style]),class:normalizeClass([`m-avatar m-reset-css`,[{"--has-link":isLink.value},__props.class]]),href:__props.href,to:__props.to,target:isLink.value?__props.target:void 0},{default:withCtx(()=>[createElementVNode(`div`,{class:normalizeClass([`m-avatar__wrapper`,[{"--has-shadow":!__props.noElevation,"--bordered":__props.bordered,"--clickable":__props.clickable,"--has-initial":hasInitial.value},`--rounded-${__props.square?`none`:__props.roundedSize}`]]),tabindex:__props.clickable?0:-1,style:normalizeStyle(hasInitial.value?{backgroundColor:`hsl(var(--maz-${__props.color}))`,color:`hsl(var(--maz-${__props.color}-foreground))`}:void 0)},[shouldDisplayImg.value?(openBlock(),createElementBlock(Fragment,{key:0},[__props.loading===`intersecting`?(openBlock(),createBlock(unref(MazLazyImg),mergeProps({key:0},_ctx.$attrs,{class:`m-avatar__picture maz-w-full maz-max-w-full`,src:__props.src,alt:__props.alt,"image-height-full":``,"hide-loader":__props.hideLoader,"fallback-src":__props.fallbackSrc,onClick:_cache[0]||=$event=>__props.clickable?_ctx.$emit(`click`,$event):null,onError:_cache[1]||=$event=>_ctx.$emit(`error`,$event),onLoaded:_cache[2]||=$event=>_ctx.$emit(`loaded`,$event),onLoading:_cache[3]||=$event=>_ctx.$emit(`loading`,$event),onIntersecting:_cache[4]||=$event=>_ctx.$emit(`intersecting`,$event)}),null,16,[`src`,`alt`,`hide-loader`,`fallback-src`])):(openBlock(),createElementBlock(`img`,{key:1,class:`m-avatar__picture maz-w-full maz-max-w-full`,src:__props.src??__props.fallbackSrc,alt:__props.alt,loading:__props.loading,onError:handleImageError},null,40,_hoisted_2))],64)):createCommentVNode(``,!0),__props.caption&&!__props.src?renderSlot(_ctx.$slots,`round-text`,{key:1},()=>[createElementVNode(`span`,_hoisted_3,toDisplayString(getInitials(__props.caption)),1)],!0):createCommentVNode(``,!0),__props.clickable?(openBlock(),createElementBlock(`button`,{key:2,type:`button`,tabindex:`-1`,class:`m-avatar__button`,style:normalizeStyle({backgroundColor:__props.src?`hsl(var(--maz-${__props.buttonColor}) / 60%)`:`hsl(var(--maz-${__props.buttonColor}))`}),onClick:_cache[5]||=$event=>_ctx.$emit(`click`,$event)},[__props.hideClickableIcon?createCommentVNode(``,!0):renderSlot(_ctx.$slots,`icon`,{key:0},()=>[createVNode(unref(MazPencil),{class:`m-avatar__button__icon`})],!0)],4)):createCommentVNode(``,!0)],14,_hoisted_1),renderSlot(_ctx.$slots,`caption`,{},()=>[__props.showCaption&&__props.caption?(openBlock(),createElementBlock(`p`,_hoisted_4,toDisplayString(__props.caption),1)):createCommentVNode(``,!0)],!0)]),_:3},8,[`style`,`class`,`href`,`to`,`target`]))}}),[[`__scopeId`,`data-v-b6e4a504`]]);export{MazAvatar_default as t};