@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
3 lines (2 loc) • 5.96 kB
JavaScript
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("../../common/utils/index.cjs"),i=require("./avatar-constants.cjs"),o=require("../icon/icon-constants.cjs"),c=require("./utils.cjs"),e=require("vue"),d=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),u=require("../presence/presence.cjs"),m={compatConfig:{MODE:3},name:"DtAvatar",components:{DtPresence:u.default},inheritAttrs:!1,props:{id:{type:String,default(){return l.getUniqueString()}},seed:{type:String,default:void 0},color:{type:String,default:void 0},size:{type:String,default:"md",validator:t=>Object.keys(i.AVATAR_SIZE_MODIFIERS).includes(t)},avatarClass:{type:[String,Array,Object],default:""},canvasClass:{type:[String,Array,Object],default:""},iconClass:{type:[String,Array,Object],default:""},presence:{type:String,default:i.AVATAR_PRESENCE_STATES.NONE,validator:t=>Object.values(i.AVATAR_PRESENCE_STATES).includes(t)},presenceProps:{type:Object,default:()=>({})},group:{type:Number,default:void 0,validator:t=>i.AVATAR_GROUP_VALIDATOR(t)},overlayText:{type:String,default:""},overlayClass:{type:[String,Array,Object],default:""},imageSrc:{type:String,default:""},imageAlt:{type:String,default:void 0},iconSize:{type:String,default:"",validator:t=>!t||Object.keys(o.ICON_SIZE_MODIFIERS).includes(t)},fullName:{type:String,default:""},clickable:{type:Boolean,default:!1},iconAriaLabel:{type:String,default:void 0}},emits:["click"],data(){return{AVATAR_SIZE_MODIFIERS:i.AVATAR_SIZE_MODIFIERS,AVATAR_KIND_MODIFIERS:i.AVATAR_KIND_MODIFIERS,AVATAR_PRESENCE_SIZE_MODIFIERS:i.AVATAR_PRESENCE_SIZE_MODIFIERS,AVATAR_ICON_SIZES:i.AVATAR_ICON_SIZES,imageLoadedSuccessfully:null,formattedInitials:"",initializing:!1,hasSlotContent:l.hasSlotContent}},computed:{hasOverlayIcon(){return l.hasSlotContent(this.$slots.overlayIcon)},iconDataQa(){return"dt-avatar-icon"},avatarClasses(){return["d-avatar",this.$attrs.class,i.AVATAR_SIZE_MODIFIERS[this.validatedSize],this.avatarClass,{"d-avatar--group":this.showGroup,[`d-avatar--color-${this.getColor()}`]:!this.isIconType(),"d-avatar--clickable":this.clickable}]},overlayClasses(){return["d-avatar__overlay",this.overlayClass,{"d-avatar__overlay-icon":this.hasOverlayIcon}]},showGroup(){return i.AVATAR_GROUP_VALIDATOR(this.group)},formattedGroup(){return this.group>99?"99+":this.group},validatedSize(){return this.group?"xs":this.size},showImage(){return this.imageLoadedSuccessfully!==!1&&this.imageSrc}},watch:{fullName:{immediate:!0,handler(){this.formatInitials()}},size:{immediate:!0,handler(){this.formatInitials()}},group:{immediate:!0,handler(){this.formatInitials()}},imageSrc(t){this.imageLoadedSuccessfully=null,t&&(this.validateProps(),this.setImageListeners())}},mounted(){this.validateProps(),this.setImageListeners()},methods:{isIconType(){return l.hasSlotContent(this.$slots.icon)},async setImageListeners(){await this.$nextTick();const t=this.$refs.avatarImage;t&&(t.addEventListener("load",()=>this._loadedImageEventHandler(t),{once:!0}),t.addEventListener("error",()=>this._erroredImageEventHandler(t),{once:!0}))},formatInitials(){const t=c.extractInitialsFromName(this.fullName);this.validatedSize==="xs"?this.formattedInitials="":this.validatedSize==="sm"?this.formattedInitials=t[0]:this.formattedInitials=t},getColor(){return this.color??l.getRandomElement(i.AVATAR_RANDOM_COLORS,this.seed)},_loadedImageEventHandler(t){this.imageLoadedSuccessfully=!0,t.classList.remove("d-d-none")},_erroredImageEventHandler(t){this.imageLoadedSuccessfully=!1,t.classList.add("d-d-none")},validateProps(){this.imageSrc&&this.imageAlt===void 0&&console.error('image-alt required if image-src is provided. Can be set to "" (empty string) if the image is described in text nearby')},handleClick(t){this.clickable&&this.$emit("click",t)}}},_=["src","alt"],S=["aria-label","data-qa","role"],v={key:1,class:"d-avatar__overlay-text"},A={key:1,class:"d-avatar__count","data-qa":"dt-avatar-count"};function I(t,y,a,g,s,r){const n=e.resolveComponent("dt-presence");return e.openBlock(),e.createBlock(e.resolveDynamicComponent(a.clickable?"button":"div"),{id:a.id,class:e.normalizeClass(r.avatarClasses),style:e.normalizeStyle(t.$attrs.style),"data-qa":"dt-avatar",onClick:r.handleClick},{default:e.withCtx(()=>[e.createElementVNode("div",{ref:"canvas",class:e.normalizeClass([a.canvasClass,"d-avatar__canvas",{"d-avatar--image-loaded":s.imageLoadedSuccessfully}])},[r.showImage?(e.openBlock(),e.createElementBlock("img",{key:0,ref:"avatarImage",class:"d-avatar__image","data-qa":"dt-avatar-image",src:a.imageSrc,alt:a.imageAlt},null,8,_)):r.isIconType()?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass([a.iconClass,s.AVATAR_KIND_MODIFIERS.icon]),"aria-label":a.clickable?a.iconAriaLabel:"","data-qa":r.iconDataQa,role:a.clickable?"button":""},[e.renderSlot(t.$slots,"icon",{iconSize:a.iconSize||s.AVATAR_ICON_SIZES[a.size]})],10,S)):(e.openBlock(),e.createElementBlock("span",{key:2,class:e.normalizeClass([s.AVATAR_KIND_MODIFIERS.initials])},e.toDisplayString(s.formattedInitials),3))],2),r.hasOverlayIcon||a.overlayText?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(r.overlayClasses)},[r.hasOverlayIcon?e.renderSlot(t.$slots,"overlayIcon",{key:0}):a.overlayText?(e.openBlock(),e.createElementBlock("p",v,e.toDisplayString(a.overlayText),1)):e.createCommentVNode("",!0)],2)):e.createCommentVNode("",!0),r.showGroup?(e.openBlock(),e.createElementBlock("span",A,e.toDisplayString(r.formattedGroup),1)):e.createCommentVNode("",!0),a.presence&&!r.showGroup?(e.openBlock(),e.createBlock(n,e.mergeProps({key:2,presence:a.presence,class:["d-avatar__presence",s.AVATAR_PRESENCE_SIZE_MODIFIERS[a.size]]},a.presenceProps,{"data-qa":"dt-presence"}),null,16,["presence","class"])):e.createCommentVNode("",!0)]),_:3},8,["id","class","style","onClick"])}const h=d._(m,[["render",I]]);exports.default=h;
//# sourceMappingURL=avatar.cjs.map