@gitlab/ui 72.11.0 → 72.12.0

package/dist/components/base/alert/alert.js

@@ -1,222 +0,0 @@
-import { alertVariantOptions, alertVariantIconMap, buttonCategoryOptions } from '../../../utils/constants';
-import CloseButton from '../../shared_components/close_button/close_button';
-import GlButton from '../button/button';
-import GlIcon from '../icon/icon';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-//
-var script = {
-  name: 'GlAlert',
-  components: {
-    GlIcon,
-    CloseButton,
-    GlButton
-  },
-  props: {
-    title: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    /**
-     * Controls the dismiss button's visibility.
-     */
-    dismissible: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
-    /**
-     * Shows icon based on variant.
-     */
-    showIcon: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
-    /**
-     * Dismiss button's aria-label.
-     */
-    dismissLabel: {
-      type: String,
-      required: false,
-      default: 'Dismiss'
-    },
-    variant: {
-      type: String,
-      required: false,
-      default: alertVariantOptions.info,
-      validator: value => Object.keys(alertVariantOptions).includes(value)
-    },
-    /**
-     * If provided, renders the primary button as a link.
-     */
-    primaryButtonLink: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    /**
-     * If provided, renders a primary action button.
-     */
-    primaryButtonText: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    /**
-     * If provided, renders the secondary button as a link.
-     */
-    secondaryButtonLink: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    /**
-     * If provided, renders a secondary action button.
-     */
-    secondaryButtonText: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    sticky: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
-  },
-  computed: {
-    ariaLive() {
-      if ([alertVariantOptions.danger, alertVariantOptions.warning].includes(this.variant)) {
-        return 'assertive';
-      }
-      return 'polite';
-    },
-    role() {
-      if ([alertVariantOptions.danger, alertVariantOptions.warning, alertVariantOptions.success].includes(this.variant)) {
-        return 'alert';
-      }
-      return 'status';
-    },
-    iconName() {
-      return alertVariantIconMap[this.variant];
-    },
-    shouldRenderActions() {
-      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
-      return Boolean(this.$slots.actions || this.actionButtons.length);
-    },
-    actionButtons() {
-      return [{
-        text: this.primaryButtonText,
-        attrs: {
-          href: this.primaryButtonLink,
-          variant: 'confirm',
-          category: buttonCategoryOptions.primary
-        },
-        listeners: {
-          click: this.primaryButtonClicked
-        }
-      }, {
-        text: this.secondaryButtonText,
-        attrs: {
-          href: this.secondaryButtonLink,
-          variant: 'default',
-          category: buttonCategoryOptions.secondary
-        },
-        listeners: {
-          click: this.secondaryButtonClicked
-        }
-      }].reduce((acc, actionButton) => {
-        if (!actionButton.text) return acc;
-        const attrs = {
-          ...actionButton.attrs
-        };
-        if (!attrs.href) {
-          delete attrs.href;
-        }
-        acc.push({
-          ...actionButton,
-          attrs
-        });
-        return acc;
-      }, []);
-    },
-    variantClass() {
-      return `gl-alert-${this.variant}`;
-    }
-  },
-  methods: {
-    primaryButtonClicked(event) {
-      /**
-       * Emitted when the primary action button is clicked.
-       *
-       * @event primaryAction
-       * @type {object}
-       */
-      this.$emit('primaryAction', event);
-    },
-    secondaryButtonClicked(event) {
-      /**
-       * Emitted when the secondary action button is clicked.
-       *
-       * @event secondaryAction
-       * @type {object}
-       */
-      this.$emit('secondaryAction', event);
-    },
-    onDismiss() {
-      /**
-       * Emitted when the dismiss button is clicked.
-       *
-       * @event dismiss
-       * @type {object}
-       */
-      this.$emit('dismiss');
-    }
-  }
-};
-
-/* 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',{class:[
-    'gl-alert',
-    { 'gl-alert-sticky': _vm.sticky },
-    { 'gl-alert-not-dismissible': !_vm.dismissible },
-    { 'gl-alert-no-icon': !_vm.showIcon },
-    { 'gl-alert-has-title': !!_vm.title },
-    _vm.variantClass ]},[(_vm.showIcon)?_c('div',{staticClass:"gl-alert-icon-container"},[_c('gl-icon',{staticClass:"gl-alert-icon",attrs:{"name":_vm.iconName}})],1):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-alert-content",attrs:{"role":_vm.role,"aria-live":_vm.ariaLive}},[(_vm.title)?_c('h2',{staticClass:"gl-alert-title"},[_vm._v(_vm._s(_vm.title))]):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-alert-body"},[_vm._t("default")],2),_vm._v(" "),(_vm.shouldRenderActions)?_c('div',{staticClass:"gl-alert-actions"},[_vm._t("actions",function(){return _vm._l((_vm.actionButtons),function(actionButton,index){return _c('gl-button',_vm._g(_vm._b({key:index,staticClass:"gl-alert-action"},'gl-button',actionButton.attrs,false),actionButton.listeners),[_vm._v("\n          "+_vm._s(actionButton.text)+"\n        ")])})})],2):_vm._e()]),_vm._v(" "),(_vm.dismissible)?_c('close-button',{ref:"dismiss",staticClass:"gl-dismiss-btn",attrs:{"label":_vm.dismissLabel},on:{"click":_vm.onDismiss}}):_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__ = __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 default __vue_component__;

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

@@ -1,160 +0,0 @@
-import isNumber from 'lodash/isNumber';
-import { avatarSizeOptions, avatarShapeOptions } from '../../../utils/constants';
-import { getAvatarChar } from '../../../utils/string_utils';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-//
-const IDENTICON_BG_COUNT = 7;
-var script = {
-  name: 'GlAvatar',
-  props: {
-    entityId: {
-      type: Number,
-      required: false,
-      default: 0
-    },
-    entityName: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    src: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    /**
-     * Show fallback identicon when image fails to load
-     */
-    fallbackOnError: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    alt: {
-      type: String,
-      required: false,
-      default: 'avatar'
-    },
-    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;
-      }
-    },
-    shape: {
-      type: String,
-      required: false,
-      default: avatarShapeOptions.circle
-    }
-  },
-  data() {
-    return {
-      imageLoadError: false
-    };
-  },
-  computed: {
-    sizeClasses() {
-      if (isNumber(this.size)) {
-        return `gl-avatar-s${this.size}`;
-      }
-      const {
-        default: defaultSize,
-        ...nonDefaultSizes
-      } = this.size;
-      return [`gl-avatar-s${defaultSize || avatarSizeOptions[1]}`, ...Object.entries(nonDefaultSizes).map(_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;
-      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 ]},_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__ = __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 default __vue_component__;

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

@@ -1,107 +0,0 @@
-import GlAvatar from '../avatar/avatar';
-import GlLink from '../link/link';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  name: 'GlAvatarLabeled',
-  components: {
-    GlAvatar,
-    GlLink
-  },
-  props: {
-    label: {
-      type: String,
-      required: true
-    },
-    subLabel: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    labelLink: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    subLabelLink: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    inlineLabels: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
-  },
-  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
-      };
-    }
-  },
-  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.$attrs,false),_vm.avatarListeners)),_vm._v(" "),_c('div',{staticClass:"gl-avatar-labeled-labels gl-text-left!",class:_vm.avatarRowLayoutClass},[_c('div',{staticClass:"gl-display-flex gl-flex-wrap gl-align-items-center gl-text-left! gl-mx-n1 gl-my-n1"},[(_vm.hasLabelLink)?_c('gl-link',{ref:"labelLink",staticClass:"gl-avatar-link",attrs:{"href":_vm.labelLink}},[_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}},[_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__ = __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 default __vue_component__;

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: 'AvatarLink',
-  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"},'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__ = __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 default __vue_component__;

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

@@ -1,119 +0,0 @@
-import truncate from 'lodash/truncate';
-import get from 'lodash/get';
-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: 'AvatarsInline',
-  components: {
-    GlAvatar,
-    GlTooltip
-  },
-  props: {
-    avatars: {
-      type: Array,
-      required: true
-    },
-    maxVisible: {
-      type: Number,
-      required: true
-    },
-    avatarSize: {
-      type: Number,
-      required: true,
-      validator: value => avatarsInlineSizeOptions.includes(value)
-    },
-    collapsed: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    badgeSrOnlyText: {
-      type: String,
-      required: true
-    },
-    badgeTooltipProp: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    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:"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__ = __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 default __vue_component__;