1<script> 2/* This is a re-usable vue component for rendering a user avatar wrapped in 3 a clickable link (likely to the user's profile). The link, image, and 4 tooltip can be configured by props passed to this component. 5 6 Sample configuration: 7 8 <user-avatar-link 9 :link-href="userProfileUrl" 10 :img-src="userAvatarSrc" 11 :img-alt="tooltipText" 12 :img-size="20" 13 :tooltip-text="tooltipText" 14 :tooltip-placement="top" 15 :username="username" 16 /> 17 18*/ 19 20import { GlLink, GlTooltipDirective } from '@gitlab/ui'; 21import userAvatarImage from './user_avatar_image.vue'; 22 23export default { 24 name: 'UserAvatarLink', 25 components: { 26 GlLink, 27 userAvatarImage, 28 }, 29 directives: { 30 GlTooltip: GlTooltipDirective, 31 }, 32 props: { 33 lazy: { 34 type: Boolean, 35 required: false, 36 default: false, 37 }, 38 linkHref: { 39 type: String, 40 required: false, 41 default: '', 42 }, 43 imgSrc: { 44 type: String, 45 required: false, 46 default: '', 47 }, 48 imgAlt: { 49 type: String, 50 required: false, 51 default: '', 52 }, 53 imgCssClasses: { 54 type: String, 55 required: false, 56 default: '', 57 }, 58 imgSize: { 59 type: Number, 60 required: false, 61 default: 20, 62 }, 63 tooltipText: { 64 type: String, 65 required: false, 66 default: '', 67 }, 68 tooltipPlacement: { 69 type: String, 70 required: false, 71 default: 'top', 72 }, 73 username: { 74 type: String, 75 required: false, 76 default: '', 77 }, 78 }, 79 computed: { 80 shouldShowUsername() { 81 return this.username.length > 0; 82 }, 83 avatarTooltipText() { 84 return this.shouldShowUsername ? '' : this.tooltipText; 85 }, 86 }, 87}; 88</script> 89 90<template> 91 <gl-link :href="linkHref" class="user-avatar-link"> 92 <user-avatar-image 93 :img-src="imgSrc" 94 :img-alt="imgAlt" 95 :css-classes="imgCssClasses" 96 :size="imgSize" 97 :tooltip-text="avatarTooltipText" 98 :tooltip-placement="tooltipPlacement" 99 :lazy="lazy" 100 > 101 <slot></slot> </user-avatar-image 102 ><span 103 v-if="shouldShowUsername" 104 v-gl-tooltip 105 :title="tooltipText" 106 :tooltip-placement="tooltipPlacement" 107 class="js-user-avatar-link-username" 108 >{{ username }}</span 109 ><slot name="avatar-badge"></slot> 110 </gl-link> 111</template> 112