@gitlab/ui 131.3.0 → 131.3.2

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

@@ -1,198 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,139 +0,0 @@
-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 };

package/dist/components/base/badge/badge.js

@@ -1,197 +0,0 @@
-import GlLink from '../link/link';
-import { badgeVariantOptions, badgeIconSizeOptions, linkVariantUnstyled } from '../../../utils/constants';
-import GlIcon from '../icon/icon';
-import { logWarning } from '../../../utils/utils';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-const variantClass = {
-  [badgeVariantOptions.neutral]: 'badge-neutral',
-  [badgeVariantOptions.info]: 'badge-info',
-  [badgeVariantOptions.success]: 'badge-success',
-  [badgeVariantOptions.warning]: 'badge-warning',
-  [badgeVariantOptions.danger]: 'badge-danger',
-  [badgeVariantOptions.tier]: 'badge-tier'
-};
-var script = {
-  name: 'GlBadge',
-  components: {
-    GlLink,
-    GlIcon
-  },
-  props: {
-    /**
-     * The variant of the badge.
-     */
-    variant: {
-      type: String,
-      default: badgeVariantOptions.neutral,
-      validator(value) {
-        return badgeVariantOptions[value] !== undefined;
-      },
-      required: false
-    },
-    /**
-     * The icon to show next to the text
-     */
-    icon: {
-      type: String,
-      required: false,
-      default: null
-    },
-    /**
-     * The size of the icon 16 or 12
-     */
-    iconSize: {
-      type: String,
-      default: 'md',
-      validator: value => Object.keys(badgeIconSizeOptions).includes(value),
-      required: false
-    },
-    /**
-     * Optically aligns circular icons with the badge.
-     */
-    iconOpticallyAligned: {
-      type: Boolean,
-      default: false,
-      required: false
-    },
-    /**
-     * Custom tag to use (unless `href` is defined)
-     */
-    tag: {
-      type: String,
-      required: false,
-      default: 'span'
-    },
-    /**
-     * Creates the badge as link (ignores `tag` property)
-     */
-    href: {
-      type: String,
-      required: false,
-      default: undefined
-    },
-    /**
-     * Sets the `rel` attributes, when `href` is defined
-     */
-    rel: {
-      type: String,
-      required: false,
-      default: null
-    },
-    /**
-     * Sets the `target`, when `href` is defined
-     */
-    target: {
-      type: String,
-      required: false,
-      default: '_self'
-    },
-    /**
-     * Adds the `active` class, when `href` is defined
-     */
-    active: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    /**
-     * Disables the link, when `href` is defined
-     */
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
-  },
-  computed: {
-    hasIconOnly() {
-      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
-      return Boolean(this.icon && Object.keys(this.$slots).length === 0);
-    },
-    isCircularIcon() {
-      return this.iconOpticallyAligned || ['issue-open-m', 'issue-close'].includes(this.icon);
-    },
-    role() {
-      return this.hasIconOnly ? 'img' : undefined;
-    },
-    iconSizeComputed() {
-      return badgeIconSizeOptions[this.iconSize];
-    },
-    isLink() {
-      return Boolean(this.href);
-    },
-    computedTag() {
-      return this.isLink ? GlLink : this.tag;
-    },
-    computedProps() {
-      if (!this.isLink) return {};
-      const {
-        href,
-        rel,
-        target,
-        active,
-        disabled
-      } = this;
-      return {
-        href,
-        rel,
-        target,
-        active,
-        disabled,
-        variant: linkVariantUnstyled
-      };
-    },
-    classes() {
-      return ['gl-badge', 'badge', 'badge-pill', variantClass[this.variant], {
-        '!gl-px-2': !this.$scopedSlots.default
-      }];
-    }
-  },
-  mounted() {
-    if (this.hasIconOnly && !this.$attrs['aria-label']) {
-      logWarning('Icon-only badges require an aria-label for accessibility. The label should describe the metadata (e.g., "Due date", "Open issue"), not the icon name. See https://design.gitlab.com/components/badge#using-icon-only-badges', {
-        name: 'GlBadge',
-        element: this.$el
-      });
-    }
-  }
-};
-
-/* 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(_vm.computedTag,_vm._g(_vm._b({tag:"component",class:_vm.classes,attrs:{"role":_vm.role}},'component',_vm.computedProps,false),_vm.$listeners),[(_vm.icon)?_c('gl-icon',{staticClass:"gl-badge-icon",class:{ '-gl-ml-2': _vm.isCircularIcon },attrs:{"size":_vm.iconSizeComputed,"name":_vm.icon}}):_vm._e(),_vm._v(" "),(_vm.$slots.default)?_c('span',{staticClass:"gl-badge-content"},[_vm._t("default")],2):_vm._e()],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 };