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