@gitlab/ui 132.0.0 → 132.0.2

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

@@ -0,0 +1,175 @@
+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';
+
+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 {
+        default: defaultSize,
+        ...nonDefaultSizes
+      } = this.size;
+      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 [breakpoint, size] = _ref;
+        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 };

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

@@ -0,0 +1,17 @@
+import { isNumber } from 'lodash-es';
+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

@@ -0,0 +1,198 @@
+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 = {
+  name: 'GlAvatarLabeled',
+  components: {
+    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.
+     */
+    labelLinkAttrs: {
+      type: Object,
+      required: false,
+      default() {
+        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: {
+    hasLabelLink() {
+      return Boolean(this.labelLink);
+    },
+    hasSubLabelLink() {
+      return Boolean(this.subLabelLink);
+    },
+    avatarListeners() {
+      if (this.hasLabelLink) {
+        return {
+          ...this.$listeners,
+          click: this.onAvatarClick
+        };
+      }
+      return this.$listeners;
+    },
+    avatarCssClasses() {
+      return {
+        'gl-cursor-pointer': this.hasLabelLink
+      };
+    },
+    avatarRowLayoutClass() {
+      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: {
+    onAvatarClick() {
+      this.$refs.labelLink.$el.click();
+    }
+  }
+};
+
+/* 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.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 */
+  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 };

package/dist/components/base/avatar_link/avatar_link.js

@@ -0,0 +1,47 @@
+import GlLink from '../link/link';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlAvatarLink',
+  components: {
+    GlLink
+  }
+};
+
+/* 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('gl-link',_vm._g(_vm._b({staticClass:"gl-avatar-link",attrs:{"variant":"meta"}},'gl-link',_vm.$attrs,false),_vm.$listeners),[_vm._t("default")],2)};
+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 };

package/dist/components/base/avatars_inline/avatars_inline.js

@@ -0,0 +1,139 @@
+import { get, truncate } from 'lodash-es';
+import { avatarsInlineSizeOptions } from '../../../utils/constants';
+import GlAvatar from '../avatar/avatar';
+import GlTooltip from '../tooltip/tooltip';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlAvatarsInline',
+  components: {
+    GlAvatar,
+    GlTooltip
+  },
+  props: {
+    /**
+     * Array of avatar objects to display
+     */
+    avatars: {
+      type: Array,
+      required: true
+    },
+    /**
+     * Maximum number of avatars to display before collapsing
+     */
+    maxVisible: {
+      type: Number,
+      required: true
+    },
+    /**
+     * Size of each avatar in pixels
+     */
+    avatarSize: {
+      type: Number,
+      required: true,
+      validator: value => avatarsInlineSizeOptions.includes(value)
+    },
+    /**
+     * Whether to show the avatars in collapsed state
+     */
+    collapsed: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * Screen reader text for the collapsed avatars badge
+     */
+    badgeSrOnlyText: {
+      type: String,
+      required: true
+    },
+    /**
+     * Property name to extract tooltip text from each hidden avatar object
+     */
+    badgeTooltipProp: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    /**
+     * Maximum number of characters to display in the badge tooltip
+     */
+    badgeTooltipMaxChars: {
+      type: Number,
+      required: false,
+      default: null
+    }
+  },
+  computed: {
+    hiddenAvatars() {
+      return this.avatars.slice(this.maxVisible);
+    },
+    collapsable() {
+      return this.hiddenAvatars.length > 0;
+    },
+    visibleAvatars() {
+      return this.collapsed ? this.avatars.slice(0, this.maxVisible) : this.avatars;
+    },
+    badgeSize() {
+      return {
+        16: 'sm',
+        24: 'md',
+        32: 'lg'
+      }[this.avatarSize] || 'lg';
+    },
+    badgeLabel() {
+      return `+${this.hiddenAvatars.length}`;
+    },
+    badgeTooltipTitle() {
+      if (!this.badgeTooltipProp) {
+        return '';
+      }
+      const tooltipTitle = this.hiddenAvatars.map(avatar => get(avatar, this.badgeTooltipProp, '').trim()).join(', ');
+
+      // truncate will append '...'
+      // we need to take these extra 3 characters into account in badgeTooltipMaxChars
+      return this.badgeTooltipMaxChars ? truncate(tooltipTitle, {
+        length: this.badgeTooltipMaxChars
+      }) : tooltipTitle;
+    }
+  }
+};
+
+/* 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-avatars-inline",class:("gl-avatars-inline-" + _vm.badgeSize)},[_vm._l((_vm.visibleAvatars),function(avatar,index){return _c('div',{key:index,staticClass:"gl-avatars-inline-child"},[_vm._t("avatar",function(){return [_c('gl-avatar',_vm._b({attrs:{"size":_vm.avatarSize}},'gl-avatar',avatar,false))]},{"avatar":avatar})],2)}),_vm._v(" "),(_vm.collapsed && _vm.collapsable)?_c('div',{staticClass:"gl-avatars-inline-child"},[(_vm.badgeTooltipProp)?_c('gl-tooltip',{attrs:{"target":function () { return _vm.$refs.badge; }}},[_vm._v("\n      "+_vm._s(_vm.badgeTooltipTitle)+"\n    ")]):_vm._e(),_vm._v(" "),_c('span',{ref:"badge",class:['gl-avatars-inline-badge', _vm.badgeSize],attrs:{"data-testid":"collapsed-avatars-badge","aria-hidden":"true"}},[_vm._v("\n      "+_vm._s(_vm.badgeLabel)+"\n    ")]),_vm._v(" "),_c('span',{staticClass:"gl-sr-only",attrs:{"data-testid":"badge-sr-only-text"}},[_vm._v(_vm._s(_vm.badgeSrOnlyText))])],1):_vm._e()],2)};
+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 };