@gitlab/ui
Version:
GitLab UI Components
247 lines (235 loc) • 7.24 kB
JavaScript
import { isNumber } from 'lodash-es';
import { avatarSizeOptions, avatarShapeOptions } from '../../../utils/constants';
import { getAvatarChar } from '../../../utils/string_utils';
import { avatarSizeValidator } from './utils';
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
function _arrayLikeToArray(r, a) {
(null == a || a > r.length) && (a = r.length);
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
return n;
}
function _arrayWithHoles(r) {
if (Array.isArray(r)) return r;
}
function _iterableToArrayLimit(r, l) {
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
if (null != t) {
var e,
n,
i,
u,
a = [],
f = !0,
o = !1;
try {
if (i = (t = t.call(r)).next, 0 === l) {
if (Object(t) !== t) return;
f = !1;
} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
} catch (r) {
o = !0, n = r;
} finally {
try {
if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
} finally {
if (o) throw n;
}
}
return a;
}
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _objectWithoutProperties(e, t) {
if (null == e) return {};
var o,
r,
i = _objectWithoutPropertiesLoose(e, t);
if (Object.getOwnPropertySymbols) {
var n = Object.getOwnPropertySymbols(e);
for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
}
return i;
}
function _objectWithoutPropertiesLoose(r, e) {
if (null == r) return {};
var t = {};
for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
if (-1 !== e.indexOf(n)) continue;
t[n] = r[n];
}
return t;
}
function _slicedToArray(r, e) {
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
}
function _unsupportedIterableToArray(r, a) {
if (r) {
if ("string" == typeof r) return _arrayLikeToArray(r, a);
var t = {}.toString.call(r).slice(8, -1);
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
}
}
const _excluded = ["default"];
const IDENTICON_BG_COUNT = 7;
var script = {
name: 'GlAvatar',
props: {
/**
* ID of the entity, used to generate a unique placeholder avatar.
*/
entityId: {
type: Number,
required: false,
default: 0
},
/**
* Name of the entity, used to generate a unique placeholder avatar.
*/
entityName: {
type: String,
required: false,
default: ''
},
/**
* Avatar image src.
*/
src: {
type: String,
required: false,
default: ''
},
/**
* Show fallback identicon when image fails to load
*/
fallbackOnError: {
type: Boolean,
required: false,
default: false
},
/**
* Alt text for the img tag.
*/
alt: {
type: String,
required: false,
default: 'avatar'
},
/**
* Size of the avatar.
* Available sizes are 96, 64, 48, 32, 24, 16.
*/
size: {
type: [Number, Object],
required: false,
default: avatarSizeOptions[1],
validator: avatarSizeValidator
},
/**
* Shape of the avatar.
* Available shapes are `circle` and `rect`.
*/
shape: {
type: String,
required: false,
default: avatarShapeOptions.circle
}
},
data() {
return {
imageLoadError: false
};
},
computed: {
sizeClasses() {
if (isNumber(this.size)) {
// eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
return `gl-avatar-s${this.size}`;
}
const _this$size = this.size,
defaultSize = _this$size.default,
nonDefaultSizes = _objectWithoutProperties(_this$size, _excluded);
return [
// eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
`gl-avatar-s${defaultSize || avatarSizeOptions[1]}`, ...Object.entries(nonDefaultSizes).map(
// eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
_ref => {
let _ref2 = _slicedToArray(_ref, 2),
breakpoint = _ref2[0],
size = _ref2[1];
return `gl-${breakpoint}-avatar-s${size}`;
})];
},
isCircle() {
return this.shape === avatarShapeOptions.circle;
},
identiconBackgroundClass() {
/*
* Gets a number between 1-7 depending on the 'entityId'.
* Gets the remainder after dividing the 'entityId' by the number of available backgrounds.
*/
const type = this.entityId % IDENTICON_BG_COUNT + 1;
// eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
return `gl-avatar-identicon-bg${type}`;
},
identiconText() {
return getAvatarChar(this.entityName);
},
showImage() {
// Don't show when image is not present
if (!this.src) {
return false;
}
// Don't show when fallbackOnError is true and there was failure to load image
if (this.src && this.fallbackOnError && this.imageLoadError) {
return false;
}
return true;
}
},
watch: {
src(newSrc, oldSrc) {
if (newSrc !== oldSrc) this.imageLoadError = false;
}
},
methods: {
handleLoadError(event) {
this.imageLoadError = true;
this.$emit('load-error', event);
}
}
};
/* script */
const __vue_script__ = script;
/* template */
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.showImage)?_c('img',_vm._g({class:['gl-avatar', { 'gl-avatar-circle': _vm.isCircle }, _vm.sizeClasses],attrs:{"src":_vm.src,"alt":_vm.alt},on:{"error":_vm.handleLoadError}},_vm.$listeners)):_c('div',_vm._g({class:[
'gl-avatar gl-avatar-identicon',
{ 'gl-avatar-circle': _vm.isCircle },
_vm.sizeClasses,
_vm.identiconBackgroundClass ],attrs:{"aria-hidden":"true"}},_vm.$listeners),[_vm._v("\n "+_vm._s(_vm.identiconText)+"\n")])};
var __vue_staticRenderFns__ = [];
/* style */
const __vue_inject_styles__ = undefined;
/* scoped */
const __vue_scope_id__ = undefined;
/* module identifier */
const __vue_module_identifier__ = undefined;
/* functional template */
const __vue_is_functional_template__ = false;
/* style inject */
/* style inject SSR */
/* style inject shadow dom */
const __vue_component__ = /*#__PURE__*/__vue_normalize__(
{ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
__vue_inject_styles__,
__vue_script__,
__vue_scope_id__,
__vue_is_functional_template__,
__vue_module_identifier__,
false,
undefined,
undefined,
undefined
);
export { __vue_component__ as default };