@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
3 lines (2 loc) • 5.17 kB
JavaScript
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("../../common/utils/index.cjs"),t=require("./avatar-constants.cjs"),r=require("../icon/icon-constants.cjs"),n=require("./utils.cjs"),l=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),o=require("../presence/presence.cjs"),d={name:"DtAvatar",components:{DtPresence:o.default},inheritAttrs:!1,props:{id:{type:String,default(){return i.getUniqueString()}},seed:{type:String,default:void 0},color:{type:String,default:void 0},size:{type:String,default:"md",validator:a=>Object.keys(t.AVATAR_SIZE_MODIFIERS).includes(a)},avatarClass:{type:[String,Array,Object],default:""},canvasClass:{type:[String,Array,Object],default:""},iconClass:{type:[String,Array,Object],default:""},presence:{type:String,default:t.AVATAR_PRESENCE_STATES.NONE,validator:a=>Object.values(t.AVATAR_PRESENCE_STATES).includes(a)},presenceProps:{type:Object,default:()=>({})},group:{type:Number,default:void 0,validator:a=>t.AVATAR_GROUP_VALIDATOR(a)},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:a=>!a||Object.keys(r.ICON_SIZE_MODIFIERS).includes(a)},fullName:{type:String,default:""},clickable:{type:Boolean,default:!1},iconAriaLabel:{type:String,default:void 0}},emits:["click"],data(){return{AVATAR_SIZE_MODIFIERS:t.AVATAR_SIZE_MODIFIERS,AVATAR_KIND_MODIFIERS:t.AVATAR_KIND_MODIFIERS,AVATAR_PRESENCE_SIZE_MODIFIERS:t.AVATAR_PRESENCE_SIZE_MODIFIERS,AVATAR_ICON_SIZES:t.AVATAR_ICON_SIZES,imageLoadedSuccessfully:null,formattedInitials:"",initializing:!1}},computed:{hasOverlayIcon(){return!!this.$slots.overlayIcon},iconDataQa(){return"dt-avatar-icon"},avatarClasses(){return["d-avatar",t.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 t.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(a){this.imageLoadedSuccessfully=null,a&&(this.validateProps(),this.setImageListeners())}},mounted(){this.validateProps(),this.setImageListeners()},methods:{isIconType(){return this.$scopedSlots.icon&&this.$scopedSlots.icon()},async setImageListeners(){await this.$nextTick();const a=this.$refs.avatarImage;a&&(a.addEventListener("load",()=>this._loadedImageEventHandler(a),{once:!0}),a.addEventListener("error",()=>this._erroredImageEventHandler(a),{once:!0}))},formatInitials(){const a=n.extractInitialsFromName(this.fullName);this.validatedSize==="xs"?this.formattedInitials="":this.validatedSize==="sm"?this.formattedInitials=a[0]:this.formattedInitials=a},getColor(){return this.color??i.getRandomElement(t.AVATAR_RANDOM_COLORS,this.seed)},_loadedImageEventHandler(a){this.imageLoadedSuccessfully=!0,a.classList.remove("d-d-none")},_erroredImageEventHandler(a){this.imageLoadedSuccessfully=!1,a.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(a){this.clickable&&this.$emit("click",a)}}};var c=function(){var e=this,s=e._self._c;return s(e.clickable?"button":"div",{tag:"component",class:e.avatarClasses,attrs:{id:e.id,"data-qa":"dt-avatar"},on:{click:e.handleClick}},[s("div",{ref:"canvas",class:[e.canvasClass,"d-avatar__canvas",{"d-avatar--image-loaded":e.imageLoadedSuccessfully}]},[e.showImage?s("img",{ref:"avatarImage",staticClass:"d-avatar__image",attrs:{"data-qa":"dt-avatar-image",src:e.imageSrc,alt:e.imageAlt}}):e.isIconType()?s("div",{class:[e.iconClass,e.AVATAR_KIND_MODIFIERS.icon],attrs:{"aria-label":e.clickable?e.iconAriaLabel:"","data-qa":e.iconDataQa,role:e.clickable?"button":""}},[e._t("icon",null,{iconSize:e.iconSize||e.AVATAR_ICON_SIZES[e.size]})],2):s("span",{class:[e.AVATAR_KIND_MODIFIERS.initials]},[e._v(" "+e._s(e.formattedInitials)+" ")])]),e.hasOverlayIcon||e.overlayText?s("div",{class:e.overlayClasses},[e.hasOverlayIcon?e._t("overlayIcon"):e.overlayText?s("p",{staticClass:"d-avatar__overlay-text"},[e._v(" "+e._s(e.overlayText)+" ")]):e._e()],2):e._e(),e.showGroup?s("span",{staticClass:"d-avatar__count",attrs:{"data-qa":"dt-avatar-count"}},[e._v(e._s(e.formattedGroup))]):e._e(),e.presence&&!e.showGroup?s("dt-presence",e._b({class:["d-avatar__presence",e.AVATAR_PRESENCE_SIZE_MODIFIERS[e.size]],attrs:{presence:e.presence,"data-qa":"dt-presence"}},"dt-presence",e.presenceProps,!1)):e._e()],1)},u=[],_=l.n(d,c,u);const v=_.exports;exports.default=v;
//# sourceMappingURL=avatar.cjs.map