@gitlab/ui 131.2.0 → 131.3.1

package/dist/components/base/animated_icon/animated_sort_icon.js

@@ -1,45 +0,0 @@
-import GlBaseAnimatedIcon from './base_animated_icon';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  name: 'GlAnimatedSortIcon',
-  extends: GlBaseAnimatedIcon
-};
-
-/* 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('svg',{staticClass:"gl-animated-sort-icon",class:[_vm.iconStateClass, _vm.iconVariantClass],attrs:{"aria-label":_vm.ariaLabel,"width":"16","height":"16","viewBox":"0 0 16 16","fill":"none","xmlns":"http://www.w3.org/2000/svg"}},[_c('path',{staticClass:"gl-animated-sort-arrow-left",attrs:{"d":"M3 1.06065L0.75 3.31065","stroke":"currentColor","stroke-width":"1.5","stroke-linecap":"round"}}),_vm._v(" "),_c('path',{staticClass:"gl-animated-sort-arrow-right",attrs:{"d":"M5.25 3.31065L3 1.06065","stroke":"currentColor","stroke-width":"1.5","stroke-linecap":"round"}}),_vm._v(" "),_c('path',{staticClass:"gl-animated-sort-long-line-on",attrs:{"d":"M8.75 2.75L15.25 2.75","stroke":"currentColor","stroke-width":"1.5","stroke-linecap":"round"}}),_vm._v(" "),_c('path',{staticClass:"gl-animated-sort-medium-line-on",attrs:{"d":"M8.75 6L13.25 6","stroke":"currentColor","stroke-width":"1.5","stroke-linecap":"round"}}),_vm._v(" "),_c('path',{staticClass:"gl-animated-sort-short-line-on",attrs:{"d":"M8.75 9.25L10.25 9.25","stroke":"currentColor","stroke-width":"1.5","stroke-linecap":"round"}}),_vm._v(" "),_c('path',{staticClass:"gl-animated-sort-long-line-off",attrs:{"d":"M8.75 13.25L15.25 13.25","stroke":"currentColor","stroke-width":"1.5","stroke-linecap":"round"}}),_vm._v(" "),_c('path',{staticClass:"gl-animated-sort-medium-line-off",attrs:{"d":"M8.75 10L13.25 10","stroke":"currentColor","stroke-width":"1.5","stroke-linecap":"round"}}),_vm._v(" "),_c('path',{staticClass:"gl-animated-sort-short-line-off",attrs:{"d":"M8.75 6.75L10.25 6.75","stroke":"currentColor","stroke-width":"1.5","stroke-linecap":"round"}}),_vm._v(" "),_c('path',{staticClass:"gl-animated-sort-line",attrs:{"d":"M3 13.2506L3 4.0006","stroke":"currentColor","stroke-width":"1.5","stroke-linecap":"round"}})])};
-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/animated_icon/animated_star_icon.js

@@ -1,45 +0,0 @@
-import GlBaseAnimatedIcon from './base_animated_icon';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  name: 'GlAnimatedStarIcon',
-  extends: GlBaseAnimatedIcon
-};
-
-/* 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('svg',{class:[_vm.iconStateClass, _vm.iconVariantClass],attrs:{"aria-label":_vm.ariaLabel,"width":"16","height":"16","viewBox":"0 0 16 16","fill":"none","xmlns":"http://www.w3.org/2000/svg"}},[_c('path',{staticClass:"gl-animated-star-shape",attrs:{"d":"M6.56177 5.79259L8 2.33467L9.43822 5.79259C9.58223 6.13883 9.90785 6.37539 10.2816 6.40536L14.0147 6.70464L11.1705 9.14103C10.8857 9.38498 10.7613 9.76775 10.8484 10.1325L11.7173 13.7754L8.52125 11.8232C8.20124 11.6278 7.79876 11.6278 7.47875 11.8232L4.28269 13.7754L5.15165 10.1325C5.23865 9.76776 5.11428 9.38498 4.82949 9.14103L1.98526 6.70464L5.71837 6.40536C6.09216 6.37539 6.41777 6.13882 6.56177 5.79259Z","fill":"transparent","stroke":"currentColor","stroke-width":"1.5"}})])};
-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/animated_icon/animated_todo_icon.js

@@ -1,45 +0,0 @@
-import GlBaseAnimatedIcon from './base_animated_icon';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  name: 'GlAnimatedTodoIcon',
-  extends: GlBaseAnimatedIcon
-};
-
-/* 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('svg',{class:[_vm.iconStateClass, _vm.iconVariantClass],attrs:{"aria-label":_vm.ariaLabel,"width":"16","height":"16","viewBox":"0 0 16 16","fill":"none","xmlns":"http://www.w3.org/2000/svg"}},[_c('path',{staticClass:"gl-animated-todo-box",attrs:{"d":"M14.25 6.75L14.25 13C14.25 13.6904 13.6904 14.25 13 14.25L3 14.25C2.30964 14.25 1.75 13.6904 1.75 13L1.75 3C1.75 2.30964 2.30964 1.75 3 1.75L13.25 1.75","stroke":"currentColor","stroke-width":"1.5","stroke-linecap":"round"}}),_vm._v(" "),_c('path',{staticClass:"gl-animated-todo-plus-line",attrs:{"d":"M10.75 3L15.25 3","stroke":"currentColor","stroke-width":"1.5","stroke-linecap":"round"}}),_vm._v(" "),_c('path',{staticClass:"gl-animated-todo-plus-line",attrs:{"d":"M13 5.25L13 0.75","stroke":"currentColor","stroke-width":"1.5","stroke-linecap":"round"}}),_vm._v(" "),_c('path',{staticClass:"gl-animated-todo-check",attrs:{"d":"M6.75 7.76299L9.15312 10.2469L15.25 4.15","stroke":"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"}})])};
-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/animated_icon/animated_upload_icon.js

@@ -1,45 +0,0 @@
-import GlBaseAnimatedIcon from './base_animated_icon';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  name: 'GlAnimatedUploadIcon',
-  extends: GlBaseAnimatedIcon
-};
-
-/* 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('svg',{class:[_vm.iconStateClass, _vm.iconVariantClass],attrs:{"aria-label":_vm.ariaLabel,"width":"16","height":"16","viewBox":"0 0 16 16","fill":"none","xmlns":"http://www.w3.org/2000/svg"}},[_c('path',{staticClass:"gl-animated-upload-base",attrs:{"d":"M14.25 9.75V13C14.25 13.6904 13.6904 14.25 13 14.25L3 14.25C2.30964 14.25 1.75 13.6904 1.75 13L1.75 9.75","stroke":"currentColor","stroke-width":"1.5","stroke-linecap":"round"}}),_vm._v(" "),_c('path',{staticClass:"gl-animated-upload-line",attrs:{"d":"M8 11.25V2.5","stroke":"currentColor","stroke-width":"1.5","stroke-linecap":"round"}}),_vm._v(" "),_c('path',{staticClass:"gl-animated-upload-arrow",attrs:{"d":"M11.25 5.31066L8 2.06066L4.75 5.31066","stroke":"currentColor","stroke-width":"1.5","stroke-linecap":"round"}})])};
-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/animated_icon/base_animated_icon.js

@@ -1,77 +0,0 @@
-import { animatedIconVariantOptions } from '../../../utils/constants';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  name: 'GlBaseAnimatedIcon',
-  props: {
-    /**
-     * Accessible icon name used by screen readers and other assistive technologies.
-     * Provide when icon is not merely decorative
-     */
-    ariaLabel: {
-      type: String,
-      required: false,
-      default: undefined
-    },
-    /**
-     * Icon variant
-     */
-    variant: {
-      type: String,
-      required: false,
-      default: 'current',
-      validator: value => Object.keys(animatedIconVariantOptions).includes(value)
-    },
-    isOn: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
-  },
-  computed: {
-    iconStateClass() {
-      return this.isOn ? 'gl-animated-icon gl-animated-icon-on' : 'gl-animated-icon gl-animated-icon-off';
-    },
-    iconVariantClass() {
-      return this.variant ? animatedIconVariantOptions[this.variant] : '';
-    }
-  }
-};
-
-/* 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('svg',{class:[_vm.iconStateClass, _vm.iconVariantClass],attrs:{"aria-label":_vm.ariaLabel,"width":"16","height":"16","viewBox":"0 0 16 16","fill":"none","xmlns":"http://www.w3.org/2000/svg"}})};
-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/attribute_list/attribute_list.js

@@ -1,100 +0,0 @@
-import GlIcon from '../icon/icon';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  name: 'GlAttributeList',
-  components: {
-    GlIcon
-  },
-  props: {
-    /**
-     * Array of items to display. Each item should have `label`, `text`, and optionally `icon` properties.
-     */
-    items: {
-      type: Array,
-      required: false,
-      default: () => [],
-      validator: items => {
-        return items.every(item => item && typeof item.label === 'string' && typeof item.text === 'string');
-      }
-    },
-    /**
-     * CSS classes on attribute list item label contents
-     */
-    labelClass: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    /**
-     * CSS classes on attribute list item description contents
-     */
-    descriptionClass: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    /**
-     * Layout of label and text: 'horizontal' for line or 'vertical' for stacked
-     */
-    layout: {
-      type: String,
-      default: 'horizontal',
-      required: false,
-      validator: value => ['horizontal', 'vertical'].includes(value)
-    }
-  },
-  computed: {
-    layoutClass() {
-      return {
-        'gl-attribute-list-horizontal-items': this.layout === 'horizontal',
-        'gl-attribute-list-vertical-items': this.layout === 'vertical'
-      };
-    },
-    rowCount() {
-      // Calculate rows needed when there is enough space for 2 column layout
-      const rows = Math.ceil(this.items.length / 2);
-      return {
-        '--attribute-list-row-count': rows
-      };
-    }
-  }
-};
-
-/* 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('dl',{staticClass:"gl-attribute-list",class:_vm.layoutClass,style:(_vm.rowCount),attrs:{"data-testid":"gl-attribute-list"}},_vm._l((_vm.items),function(item,index){return _c('div',{key:index,staticClass:"gl-attribute-list-item",attrs:{"data-testid":"gl-attribute-list-item"}},[_c('dt',{staticClass:"gl-attribute-list-item-label",class:_vm.labelClass,attrs:{"data-testid":"gl-attribute-list-item-label"}},[_vm._t("label",function(){return [(item.icon)?_c('gl-icon',{staticClass:"gl-attribute-list-item-label-icon",attrs:{"name":item.icon,"variant":"strong"}}):_vm._e(),_vm._v(" "),_c('span',[_vm._v(_vm._s(item.label))])]},{"item":item,"index":index})],2),_vm._v(" "),_c('dd',{staticClass:"gl-attribute-list-item-description",class:_vm.descriptionClass,attrs:{"data-testid":"gl-attribute-list-item-description"}},[_vm._t("description",function(){return [_vm._v("\n        "+_vm._s(item.text)+"\n      ")]},{"item":item,"index":index})],2)])}),0)};
-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/avatar.js

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

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