@gitlab/ui 122.13.0 → 123.0.0

package/dist/components/base/avatar/avatar.js

@@ -1,6 +1,7 @@
 import isNumber from 'lodash/isNumber';
 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';
 
 //
@@ -9,16 +10,25 @@ 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,
@@ -32,28 +42,28 @@ var script = {
       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: value => {
-        const sizes = isNumber(value) ? [value] : Object.values(value);
-        const areValidSizes = sizes.every(size => {
-          const isValidSize = avatarSizeOptions.includes(size);
-          if (!isValidSize) {
-            /* eslint-disable-next-line no-console */
-            console.error(`Avatar size should be one of [${avatarSizeOptions}], received: ${size}`);
-          }
-          return isValidSize;
-        });
-        return areValidSizes;
-      }
+      validator: avatarSizeValidator
     },
+    /**
+     * Shape of the avatar.
+     * Available shapes are `circle` and `rect`.
+     */
     shape: {
       type: String,
       required: false,

package/dist/components/base/avatar/utils.js

@@ -0,0 +1,17 @@
+import isNumber from 'lodash/isNumber';
+import { avatarSizeOptions } from '../../../utils/constants';
+
+const avatarSizeValidator = value => {
+  const sizes = isNumber(value) ? [value] : Object.values(value);
+  const areValidSizes = sizes.every(size => {
+    const isValidSize = avatarSizeOptions.includes(size);
+    if (!isValidSize) {
+      /* eslint-disable-next-line no-console */
+      console.error(`Avatar size should be one of [${avatarSizeOptions}], received: ${size}`);
+    }
+    return isValidSize;
+  });
+  return areValidSizes;
+};
+
+export { avatarSizeValidator };

package/dist/components/base/avatar_labeled/avatar_labeled.js

@@ -1,5 +1,7 @@
 import GlAvatar from '../avatar/avatar';
 import GlLink from '../link/link';
+import { avatarSizeOptions, avatarShapeOptions } from '../../../utils/constants';
+import { avatarSizeValidator } from '../avatar/utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
@@ -8,23 +10,34 @@ var script = {
     GlAvatar,
     GlLink
   },
+  inheritAttrs: false,
   props: {
+    /**
+     * Label displayed to the right of the avatar.
+     */
     label: {
       type: String,
       required: true
     },
+    /**
+     * Sub-label displayed below the label when inlineLabels is false.
+     * Displayed to the right of label when inlineLabels is true.
+     */
     subLabel: {
       type: String,
       required: false,
       default: ''
     },
+    /**
+     * Link for the label.
+     */
     labelLink: {
       type: String,
       required: false,
       default: ''
     },
     /**
-     * Attributes to pass to the label link
+     * Attributes to pass to the label link.
      */
     labelLinkAttrs: {
       type: Object,
@@ -33,15 +46,72 @@ var script = {
         return {};
       }
     },
+    /**
+     * Link for the sub-label.
+     */
     subLabelLink: {
       type: String,
       required: false,
       default: ''
     },
+    /**
+     * Display label and sub-label inline.
+     */
     inlineLabels: {
       type: Boolean,
       required: false,
       default: false
+    },
+    /**
+     * 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
+    },
+    /**
+     * 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
     }
   },
   computed: {
@@ -69,6 +139,17 @@ var script = {
       return {
         'inline-labels': this.inlineLabels
       };
+    },
+    avatarPropsAndAttrs() {
+      return {
+        ...this.$attrs,
+        entityId: this.entityId,
+        entityName: this.entityName,
+        src: this.src,
+        fallbackOnError: this.fallbackOnError,
+        size: this.size,
+        shape: this.shape
+      };
     }
   },
   methods: {
@@ -82,7 +163,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-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.$attrs,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)};
+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)};
 var __vue_staticRenderFns__ = [];
 
   /* style */