@gitlab/ui 122.14.0 → 123.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/base/avatar/avatar.js +22 -12
- package/dist/components/base/avatar/utils.js +17 -0
- package/dist/components/base/avatar_labeled/avatar_labeled.js +83 -2
- package/package.json +2 -5
- package/src/components/base/avatar/avatar.vue +22 -16
- package/src/components/base/avatar/utils.js +19 -0
- package/src/components/base/avatar_labeled/avatar_labeled.vue +83 -2
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import isNumber from 'lodash/isNumber';
|
|
2
2
|
import { avatarSizeOptions, avatarShapeOptions } from '../../../utils/constants';
|
|
3
3
|
import { getAvatarChar } from '../../../utils/string_utils';
|
|
4
|
+
import { avatarSizeValidator } from './utils';
|
|
4
5
|
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
|
|
5
6
|
|
|
6
7
|
//
|
|
@@ -9,16 +10,25 @@ const IDENTICON_BG_COUNT = 7;
|
|
|
9
10
|
var script = {
|
|
10
11
|
name: 'GlAvatar',
|
|
11
12
|
props: {
|
|
13
|
+
/**
|
|
14
|
+
* ID of the entity, used to generate a unique placeholder avatar.
|
|
15
|
+
*/
|
|
12
16
|
entityId: {
|
|
13
17
|
type: Number,
|
|
14
18
|
required: false,
|
|
15
19
|
default: 0
|
|
16
20
|
},
|
|
21
|
+
/**
|
|
22
|
+
* Name of the entity, used to generate a unique placeholder avatar.
|
|
23
|
+
*/
|
|
17
24
|
entityName: {
|
|
18
25
|
type: String,
|
|
19
26
|
required: false,
|
|
20
27
|
default: ''
|
|
21
28
|
},
|
|
29
|
+
/**
|
|
30
|
+
* Avatar image src.
|
|
31
|
+
*/
|
|
22
32
|
src: {
|
|
23
33
|
type: String,
|
|
24
34
|
required: false,
|
|
@@ -32,28 +42,28 @@ var script = {
|
|
|
32
42
|
required: false,
|
|
33
43
|
default: false
|
|
34
44
|
},
|
|
45
|
+
/**
|
|
46
|
+
* Alt text for the img tag.
|
|
47
|
+
*/
|
|
35
48
|
alt: {
|
|
36
49
|
type: String,
|
|
37
50
|
required: false,
|
|
38
51
|
default: 'avatar'
|
|
39
52
|
},
|
|
53
|
+
/**
|
|
54
|
+
* Size of the avatar.
|
|
55
|
+
* Available sizes are 96, 64, 48, 32, 24, 16.
|
|
56
|
+
*/
|
|
40
57
|
size: {
|
|
41
58
|
type: [Number, Object],
|
|
42
59
|
required: false,
|
|
43
60
|
default: avatarSizeOptions[1],
|
|
44
|
-
validator:
|
|
45
|
-
const sizes = isNumber(value) ? [value] : Object.values(value);
|
|
46
|
-
const areValidSizes = sizes.every(size => {
|
|
47
|
-
const isValidSize = avatarSizeOptions.includes(size);
|
|
48
|
-
if (!isValidSize) {
|
|
49
|
-
/* eslint-disable-next-line no-console */
|
|
50
|
-
console.error(`Avatar size should be one of [${avatarSizeOptions}], received: ${size}`);
|
|
51
|
-
}
|
|
52
|
-
return isValidSize;
|
|
53
|
-
});
|
|
54
|
-
return areValidSizes;
|
|
55
|
-
}
|
|
61
|
+
validator: avatarSizeValidator
|
|
56
62
|
},
|
|
63
|
+
/**
|
|
64
|
+
* Shape of the avatar.
|
|
65
|
+
* Available shapes are `circle` and `rect`.
|
|
66
|
+
*/
|
|
57
67
|
shape: {
|
|
58
68
|
type: String,
|
|
59
69
|
required: false,
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import isNumber from 'lodash/isNumber';
|
|
2
|
+
import { avatarSizeOptions } from '../../../utils/constants';
|
|
3
|
+
|
|
4
|
+
const avatarSizeValidator = value => {
|
|
5
|
+
const sizes = isNumber(value) ? [value] : Object.values(value);
|
|
6
|
+
const areValidSizes = sizes.every(size => {
|
|
7
|
+
const isValidSize = avatarSizeOptions.includes(size);
|
|
8
|
+
if (!isValidSize) {
|
|
9
|
+
/* eslint-disable-next-line no-console */
|
|
10
|
+
console.error(`Avatar size should be one of [${avatarSizeOptions}], received: ${size}`);
|
|
11
|
+
}
|
|
12
|
+
return isValidSize;
|
|
13
|
+
});
|
|
14
|
+
return areValidSizes;
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
export { avatarSizeValidator };
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import GlAvatar from '../avatar/avatar';
|
|
2
2
|
import GlLink from '../link/link';
|
|
3
|
+
import { avatarSizeOptions, avatarShapeOptions } from '../../../utils/constants';
|
|
4
|
+
import { avatarSizeValidator } from '../avatar/utils';
|
|
3
5
|
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
|
|
4
6
|
|
|
5
7
|
var script = {
|
|
@@ -8,23 +10,34 @@ var script = {
|
|
|
8
10
|
GlAvatar,
|
|
9
11
|
GlLink
|
|
10
12
|
},
|
|
13
|
+
inheritAttrs: false,
|
|
11
14
|
props: {
|
|
15
|
+
/**
|
|
16
|
+
* Label displayed to the right of the avatar.
|
|
17
|
+
*/
|
|
12
18
|
label: {
|
|
13
19
|
type: String,
|
|
14
20
|
required: true
|
|
15
21
|
},
|
|
22
|
+
/**
|
|
23
|
+
* Sub-label displayed below the label when inlineLabels is false.
|
|
24
|
+
* Displayed to the right of label when inlineLabels is true.
|
|
25
|
+
*/
|
|
16
26
|
subLabel: {
|
|
17
27
|
type: String,
|
|
18
28
|
required: false,
|
|
19
29
|
default: ''
|
|
20
30
|
},
|
|
31
|
+
/**
|
|
32
|
+
* Link for the label.
|
|
33
|
+
*/
|
|
21
34
|
labelLink: {
|
|
22
35
|
type: String,
|
|
23
36
|
required: false,
|
|
24
37
|
default: ''
|
|
25
38
|
},
|
|
26
39
|
/**
|
|
27
|
-
* Attributes to pass to the label link
|
|
40
|
+
* Attributes to pass to the label link.
|
|
28
41
|
*/
|
|
29
42
|
labelLinkAttrs: {
|
|
30
43
|
type: Object,
|
|
@@ -33,15 +46,72 @@ var script = {
|
|
|
33
46
|
return {};
|
|
34
47
|
}
|
|
35
48
|
},
|
|
49
|
+
/**
|
|
50
|
+
* Link for the sub-label.
|
|
51
|
+
*/
|
|
36
52
|
subLabelLink: {
|
|
37
53
|
type: String,
|
|
38
54
|
required: false,
|
|
39
55
|
default: ''
|
|
40
56
|
},
|
|
57
|
+
/**
|
|
58
|
+
* Display label and sub-label inline.
|
|
59
|
+
*/
|
|
41
60
|
inlineLabels: {
|
|
42
61
|
type: Boolean,
|
|
43
62
|
required: false,
|
|
44
63
|
default: false
|
|
64
|
+
},
|
|
65
|
+
/**
|
|
66
|
+
* ID of the entity, used to generate a unique placeholder avatar.
|
|
67
|
+
*/
|
|
68
|
+
entityId: {
|
|
69
|
+
type: Number,
|
|
70
|
+
required: false,
|
|
71
|
+
default: 0
|
|
72
|
+
},
|
|
73
|
+
/**
|
|
74
|
+
* Name of the entity, used to generate a unique placeholder avatar.
|
|
75
|
+
*/
|
|
76
|
+
entityName: {
|
|
77
|
+
type: String,
|
|
78
|
+
required: false,
|
|
79
|
+
default: ''
|
|
80
|
+
},
|
|
81
|
+
/**
|
|
82
|
+
* Avatar image src.
|
|
83
|
+
*/
|
|
84
|
+
src: {
|
|
85
|
+
type: String,
|
|
86
|
+
required: false,
|
|
87
|
+
default: ''
|
|
88
|
+
},
|
|
89
|
+
/**
|
|
90
|
+
* Show fallback identicon when image fails to load
|
|
91
|
+
*/
|
|
92
|
+
fallbackOnError: {
|
|
93
|
+
type: Boolean,
|
|
94
|
+
required: false,
|
|
95
|
+
default: false
|
|
96
|
+
},
|
|
97
|
+
/**
|
|
98
|
+
* Size of the avatar.
|
|
99
|
+
* Available sizes are 96, 64, 48, 32, 24, 16.
|
|
100
|
+
*/
|
|
101
|
+
size: {
|
|
102
|
+
type: [Number, Object],
|
|
103
|
+
required: false,
|
|
104
|
+
default: avatarSizeOptions[1],
|
|
105
|
+
validator: avatarSizeValidator
|
|
106
|
+
},
|
|
107
|
+
/**
|
|
108
|
+
* Shape of the avatar.
|
|
109
|
+
* Available shapes are `circle` and `rect`.
|
|
110
|
+
*/
|
|
111
|
+
shape: {
|
|
112
|
+
type: String,
|
|
113
|
+
required: false,
|
|
114
|
+
default: avatarShapeOptions.circle
|
|
45
115
|
}
|
|
46
116
|
},
|
|
47
117
|
computed: {
|
|
@@ -69,6 +139,17 @@ var script = {
|
|
|
69
139
|
return {
|
|
70
140
|
'inline-labels': this.inlineLabels
|
|
71
141
|
};
|
|
142
|
+
},
|
|
143
|
+
avatarPropsAndAttrs() {
|
|
144
|
+
return {
|
|
145
|
+
...this.$attrs,
|
|
146
|
+
entityId: this.entityId,
|
|
147
|
+
entityName: this.entityName,
|
|
148
|
+
src: this.src,
|
|
149
|
+
fallbackOnError: this.fallbackOnError,
|
|
150
|
+
size: this.size,
|
|
151
|
+
shape: this.shape
|
|
152
|
+
};
|
|
72
153
|
}
|
|
73
154
|
},
|
|
74
155
|
methods: {
|
|
@@ -82,7 +163,7 @@ var script = {
|
|
|
82
163
|
const __vue_script__ = script;
|
|
83
164
|
|
|
84
165
|
/* template */
|
|
85
|
-
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-avatar-labeled"},[_c('gl-avatar',_vm._g(_vm._b({class:_vm.avatarCssClasses,attrs:{"alt":""}},'gl-avatar',_vm
|
|
166
|
+
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-avatar-labeled"},[_c('gl-avatar',_vm._g(_vm._b({class:_vm.avatarCssClasses,attrs:{"alt":""}},'gl-avatar',_vm.avatarPropsAndAttrs,false),_vm.avatarListeners)),_vm._v(" "),_c('div',{staticClass:"gl-avatar-labeled-labels !gl-text-left",class:_vm.avatarRowLayoutClass},[_c('div',{staticClass:"-gl-mx-1 -gl-my-1 gl-flex gl-flex-wrap gl-items-center !gl-text-left"},[(_vm.hasLabelLink)?_c('gl-link',_vm._b({ref:"labelLink",staticClass:"gl-avatar-link",attrs:{"href":_vm.labelLink,"variant":"meta"},on:{"click":function($event){return _vm.$emit('label-link-click', $event)}}},'gl-link',_vm.labelLinkAttrs,false),[_c('span',{staticClass:"gl-avatar-labeled-label"},[_vm._v(_vm._s(_vm.label))])]):_c('span',{staticClass:"gl-avatar-labeled-label"},[_vm._v(_vm._s(_vm.label))]),_vm._v(" "),_vm._t("meta")],2),_vm._v(" "),(_vm.hasSubLabelLink)?_c('gl-link',{staticClass:"gl-avatar-link",attrs:{"href":_vm.subLabelLink,"variant":"meta"}},[_c('span',{staticClass:"gl-avatar-labeled-sublabel"},[_vm._v(_vm._s(_vm.subLabel))])]):_c('span',{staticClass:"gl-avatar-labeled-sublabel"},[_vm._v(_vm._s(_vm.subLabel))]),_vm._v(" "),_vm._t("default")],2)],1)};
|
|
86
167
|
var __vue_staticRenderFns__ = [];
|
|
87
168
|
|
|
88
169
|
/* style */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gitlab/ui",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "123.0.0",
|
|
4
4
|
"description": "GitLab UI Components",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -64,9 +64,7 @@
|
|
|
64
64
|
"test:visual": "./bin/run-visual-tests.sh 'test-storybook --browsers firefox --verbose --url http://${STORYBOOK_HOST:-localhost}:${STORYBOOK_PORT:-9001}'",
|
|
65
65
|
"test:visual:update": "./bin/run-visual-tests.sh 'test-storybook -u --browsers firefox --verbose --url http://${STORYBOOK_HOST:-localhost}:${STORYBOOK_PORT:-9001}'",
|
|
66
66
|
"test:visual:internal": "NODE_ENV=test IS_VISUAL_TEST=true start-test storybook:run http-get://${STORYBOOK_HOST:-localhost}:${STORYBOOK_PORT:-9001}/iframe.html",
|
|
67
|
-
"translations:collect": "make translations.js"
|
|
68
|
-
"tailwind-config-viewer:start": "tailwind-config-viewer -o",
|
|
69
|
-
"tailwind-config-viewer:export": "tailwind-config-viewer export ./tailwind-config-viewer-static"
|
|
67
|
+
"translations:collect": "make translations.js"
|
|
70
68
|
},
|
|
71
69
|
"dependencies": {
|
|
72
70
|
"@floating-ui/dom": "1.7.4",
|
|
@@ -173,7 +171,6 @@
|
|
|
173
171
|
"storybook-dark-mode": "4.0.2",
|
|
174
172
|
"style-dictionary": "^5.0.4",
|
|
175
173
|
"style-loader": "^4",
|
|
176
|
-
"tailwind-config-viewer": "2.0.4",
|
|
177
174
|
"tailwindcss": "3.4.17",
|
|
178
175
|
"vue": "2.7.16",
|
|
179
176
|
"vue-docgen-loader": "1.5.1",
|
|
@@ -3,22 +3,32 @@
|
|
|
3
3
|
import isNumber from 'lodash/isNumber';
|
|
4
4
|
import { avatarShapeOptions, avatarSizeOptions } from '../../../utils/constants';
|
|
5
5
|
import { getAvatarChar } from '../../../utils/string_utils';
|
|
6
|
+
import { avatarSizeValidator } from './utils';
|
|
6
7
|
|
|
7
8
|
const IDENTICON_BG_COUNT = 7;
|
|
8
9
|
|
|
9
10
|
export default {
|
|
10
11
|
name: 'GlAvatar',
|
|
11
12
|
props: {
|
|
13
|
+
/**
|
|
14
|
+
* ID of the entity, used to generate a unique placeholder avatar.
|
|
15
|
+
*/
|
|
12
16
|
entityId: {
|
|
13
17
|
type: Number,
|
|
14
18
|
required: false,
|
|
15
19
|
default: 0,
|
|
16
20
|
},
|
|
21
|
+
/**
|
|
22
|
+
* Name of the entity, used to generate a unique placeholder avatar.
|
|
23
|
+
*/
|
|
17
24
|
entityName: {
|
|
18
25
|
type: String,
|
|
19
26
|
required: false,
|
|
20
27
|
default: '',
|
|
21
28
|
},
|
|
29
|
+
/**
|
|
30
|
+
* Avatar image src.
|
|
31
|
+
*/
|
|
22
32
|
src: {
|
|
23
33
|
type: String,
|
|
24
34
|
required: false,
|
|
@@ -32,32 +42,28 @@ export default {
|
|
|
32
42
|
required: false,
|
|
33
43
|
default: false,
|
|
34
44
|
},
|
|
45
|
+
/**
|
|
46
|
+
* Alt text for the img tag.
|
|
47
|
+
*/
|
|
35
48
|
alt: {
|
|
36
49
|
type: String,
|
|
37
50
|
required: false,
|
|
38
51
|
default: 'avatar',
|
|
39
52
|
},
|
|
53
|
+
/**
|
|
54
|
+
* Size of the avatar.
|
|
55
|
+
* Available sizes are 96, 64, 48, 32, 24, 16.
|
|
56
|
+
*/
|
|
40
57
|
size: {
|
|
41
58
|
type: [Number, Object],
|
|
42
59
|
required: false,
|
|
43
60
|
default: avatarSizeOptions[1],
|
|
44
|
-
validator:
|
|
45
|
-
const sizes = isNumber(value) ? [value] : Object.values(value);
|
|
46
|
-
|
|
47
|
-
const areValidSizes = sizes.every((size) => {
|
|
48
|
-
const isValidSize = avatarSizeOptions.includes(size);
|
|
49
|
-
|
|
50
|
-
if (!isValidSize) {
|
|
51
|
-
/* eslint-disable-next-line no-console */
|
|
52
|
-
console.error(`Avatar size should be one of [${avatarSizeOptions}], received: ${size}`);
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
return isValidSize;
|
|
56
|
-
});
|
|
57
|
-
|
|
58
|
-
return areValidSizes;
|
|
59
|
-
},
|
|
61
|
+
validator: avatarSizeValidator,
|
|
60
62
|
},
|
|
63
|
+
/**
|
|
64
|
+
* Shape of the avatar.
|
|
65
|
+
* Available shapes are `circle` and `rect`.
|
|
66
|
+
*/
|
|
61
67
|
shape: {
|
|
62
68
|
type: String,
|
|
63
69
|
required: false,
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import isNumber from 'lodash/isNumber';
|
|
2
|
+
import { avatarSizeOptions } from '../../../utils/constants';
|
|
3
|
+
|
|
4
|
+
export const avatarSizeValidator = (value) => {
|
|
5
|
+
const sizes = isNumber(value) ? [value] : Object.values(value);
|
|
6
|
+
|
|
7
|
+
const areValidSizes = sizes.every((size) => {
|
|
8
|
+
const isValidSize = avatarSizeOptions.includes(size);
|
|
9
|
+
|
|
10
|
+
if (!isValidSize) {
|
|
11
|
+
/* eslint-disable-next-line no-console */
|
|
12
|
+
console.error(`Avatar size should be one of [${avatarSizeOptions}], received: ${size}`);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
return isValidSize;
|
|
16
|
+
});
|
|
17
|
+
|
|
18
|
+
return areValidSizes;
|
|
19
|
+
};
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
<script>
|
|
2
2
|
import GlAvatar from '../avatar/avatar.vue';
|
|
3
3
|
import GlLink from '../link/link.vue';
|
|
4
|
+
import { avatarShapeOptions, avatarSizeOptions } from '../../../utils/constants';
|
|
5
|
+
import { avatarSizeValidator } from '../avatar/utils';
|
|
4
6
|
|
|
5
7
|
export default {
|
|
6
8
|
name: 'GlAvatarLabeled',
|
|
@@ -8,23 +10,34 @@ export default {
|
|
|
8
10
|
GlAvatar,
|
|
9
11
|
GlLink,
|
|
10
12
|
},
|
|
13
|
+
inheritAttrs: false,
|
|
11
14
|
props: {
|
|
15
|
+
/**
|
|
16
|
+
* Label displayed to the right of the avatar.
|
|
17
|
+
*/
|
|
12
18
|
label: {
|
|
13
19
|
type: String,
|
|
14
20
|
required: true,
|
|
15
21
|
},
|
|
22
|
+
/**
|
|
23
|
+
* Sub-label displayed below the label when inlineLabels is false.
|
|
24
|
+
* Displayed to the right of label when inlineLabels is true.
|
|
25
|
+
*/
|
|
16
26
|
subLabel: {
|
|
17
27
|
type: String,
|
|
18
28
|
required: false,
|
|
19
29
|
default: '',
|
|
20
30
|
},
|
|
31
|
+
/**
|
|
32
|
+
* Link for the label.
|
|
33
|
+
*/
|
|
21
34
|
labelLink: {
|
|
22
35
|
type: String,
|
|
23
36
|
required: false,
|
|
24
37
|
default: '',
|
|
25
38
|
},
|
|
26
39
|
/**
|
|
27
|
-
* Attributes to pass to the label link
|
|
40
|
+
* Attributes to pass to the label link.
|
|
28
41
|
*/
|
|
29
42
|
labelLinkAttrs: {
|
|
30
43
|
type: Object,
|
|
@@ -33,16 +46,73 @@ export default {
|
|
|
33
46
|
return {};
|
|
34
47
|
},
|
|
35
48
|
},
|
|
49
|
+
/**
|
|
50
|
+
* Link for the sub-label.
|
|
51
|
+
*/
|
|
36
52
|
subLabelLink: {
|
|
37
53
|
type: String,
|
|
38
54
|
required: false,
|
|
39
55
|
default: '',
|
|
40
56
|
},
|
|
57
|
+
/**
|
|
58
|
+
* Display label and sub-label inline.
|
|
59
|
+
*/
|
|
41
60
|
inlineLabels: {
|
|
42
61
|
type: Boolean,
|
|
43
62
|
required: false,
|
|
44
63
|
default: false,
|
|
45
64
|
},
|
|
65
|
+
/**
|
|
66
|
+
* ID of the entity, used to generate a unique placeholder avatar.
|
|
67
|
+
*/
|
|
68
|
+
entityId: {
|
|
69
|
+
type: Number,
|
|
70
|
+
required: false,
|
|
71
|
+
default: 0,
|
|
72
|
+
},
|
|
73
|
+
/**
|
|
74
|
+
* Name of the entity, used to generate a unique placeholder avatar.
|
|
75
|
+
*/
|
|
76
|
+
entityName: {
|
|
77
|
+
type: String,
|
|
78
|
+
required: false,
|
|
79
|
+
default: '',
|
|
80
|
+
},
|
|
81
|
+
/**
|
|
82
|
+
* Avatar image src.
|
|
83
|
+
*/
|
|
84
|
+
src: {
|
|
85
|
+
type: String,
|
|
86
|
+
required: false,
|
|
87
|
+
default: '',
|
|
88
|
+
},
|
|
89
|
+
/**
|
|
90
|
+
* Show fallback identicon when image fails to load
|
|
91
|
+
*/
|
|
92
|
+
fallbackOnError: {
|
|
93
|
+
type: Boolean,
|
|
94
|
+
required: false,
|
|
95
|
+
default: false,
|
|
96
|
+
},
|
|
97
|
+
/**
|
|
98
|
+
* Size of the avatar.
|
|
99
|
+
* Available sizes are 96, 64, 48, 32, 24, 16.
|
|
100
|
+
*/
|
|
101
|
+
size: {
|
|
102
|
+
type: [Number, Object],
|
|
103
|
+
required: false,
|
|
104
|
+
default: avatarSizeOptions[1],
|
|
105
|
+
validator: avatarSizeValidator,
|
|
106
|
+
},
|
|
107
|
+
/**
|
|
108
|
+
* Shape of the avatar.
|
|
109
|
+
* Available shapes are `circle` and `rect`.
|
|
110
|
+
*/
|
|
111
|
+
shape: {
|
|
112
|
+
type: String,
|
|
113
|
+
required: false,
|
|
114
|
+
default: avatarShapeOptions.circle,
|
|
115
|
+
},
|
|
46
116
|
},
|
|
47
117
|
computed: {
|
|
48
118
|
hasLabelLink() {
|
|
@@ -71,6 +141,17 @@ export default {
|
|
|
71
141
|
'inline-labels': this.inlineLabels,
|
|
72
142
|
};
|
|
73
143
|
},
|
|
144
|
+
avatarPropsAndAttrs() {
|
|
145
|
+
return {
|
|
146
|
+
...this.$attrs,
|
|
147
|
+
entityId: this.entityId,
|
|
148
|
+
entityName: this.entityName,
|
|
149
|
+
src: this.src,
|
|
150
|
+
fallbackOnError: this.fallbackOnError,
|
|
151
|
+
size: this.size,
|
|
152
|
+
shape: this.shape,
|
|
153
|
+
};
|
|
154
|
+
},
|
|
74
155
|
},
|
|
75
156
|
methods: {
|
|
76
157
|
onAvatarClick() {
|
|
@@ -81,7 +162,7 @@ export default {
|
|
|
81
162
|
</script>
|
|
82
163
|
<template>
|
|
83
164
|
<div class="gl-avatar-labeled">
|
|
84
|
-
<gl-avatar v-bind="
|
|
165
|
+
<gl-avatar v-bind="avatarPropsAndAttrs" :class="avatarCssClasses" alt v-on="avatarListeners" />
|
|
85
166
|
<div class="gl-avatar-labeled-labels !gl-text-left" :class="avatarRowLayoutClass">
|
|
86
167
|
<div class="-gl-mx-1 -gl-my-1 gl-flex gl-flex-wrap gl-items-center !gl-text-left">
|
|
87
168
|
<gl-link
|