@gitlab/ui 131.3.0 → 131.3.1

package/dist/components/base/form/form_select/form_select.js

@@ -1,96 +0,0 @@
-import { isObject } from 'lodash-es';
-import { BFormSelect } from '../../../../vendor/bootstrap-vue/src/components/form-select/form-select';
-import { formInputWidths } from '../../../../utils/constants';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  name: 'GlFormSelect',
-  components: {
-    BFormSelect
-  },
-  inheritAttrs: false,
-  props: {
-    /**
-     * Width of the select element.
-     */
-    width: {
-      type: [String, Object],
-      required: false,
-      default: null,
-      validator: value => {
-        const widths = isObject(value) ? Object.values(value) : [value];
-        return widths.every(width => Object.values(formInputWidths).includes(width));
-      }
-    },
-    /**
-     * Additional CSS class(es) to apply to the select element.
-     */
-    selectClass: {
-      type: [String, Object, Array],
-      required: false,
-      default: ''
-    }
-  },
-  computed: {
-    cssClasses() {
-      if (this.width === null) {
-        return [];
-      }
-      if (isObject(this.width)) {
-        const {
-          default: defaultWidth,
-          ...nonDefaultWidths
-        } = this.width;
-        return [
-        // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
-        ...(defaultWidth ? [`gl-form-select-${defaultWidth}`] : []), ...Object.entries(nonDefaultWidths).map(
-        // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
-        _ref => {
-          let [breakpoint, width] = _ref;
-          return `gl-${breakpoint}-form-select-${width}`;
-        })];
-      }
-
-      // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
-      return [`gl-form-select-${this.width}`];
-    }
-  }
-};
-
-/* 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('span',{staticClass:"gl-form-select-wrapper",class:_vm.cssClasses},[_c('b-form-select',_vm._g(_vm._b({staticClass:"gl-form-select",class:_vm.selectClass,scopedSlots:_vm._u([_vm._l((Object.keys(_vm.$slots)),function(slot){return {key:slot,fn:function(){return [_vm._t(slot)]},proxy:true}})],null,true)},'b-form-select',_vm.$attrs,false),_vm.$listeners))],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/form/form_textarea/form_textarea.js

@@ -1,166 +0,0 @@
-import { uniqueId } from 'lodash-es';
-import { BFormTextarea } from '../../../../vendor/bootstrap-vue/src/components/form-textarea/form-textarea';
-import GlFormCharacterCount from '../form_character_count/form_character_count';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-const model = {
-  prop: 'value',
-  event: 'input'
-};
-var script = {
-  name: 'GlFormTextarea',
-  components: {
-    BFormTextarea,
-    GlFormCharacterCount
-  },
-  inheritAttrs: false,
-  model,
-  props: {
-    // This prop is needed to map the v-model correctly
-    // https://alligator.io/vuejs/add-v-model-support/
-    value: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    /**
-     * When true, prevents the textarea from being resized by the user (hides the resize handle).
-     */
-    noResize: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
-    /**
-     * When true, emits a submit event when Ctrl+Enter or Cmd+Enter is pressed.
-     */
-    submitOnEnter: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    /**
-     * Max character count for the textarea.
-     */
-    characterCountLimit: {
-      type: Number,
-      required: false,
-      default: null
-    },
-    /**
-     * Additional CSS class(es) to apply to the textarea element.
-     */
-    textareaClasses: {
-      type: [String, Object, Array],
-      required: false,
-      default: null
-    },
-    /**
-     * Number of visible text rows in the textarea.
-     */
-    rows: {
-      type: [Number, String],
-      required: false,
-      default: 4
-    }
-  },
-  data() {
-    return {
-      characterCountTextId: uniqueId('form-textarea-character-count-')
-    };
-  },
-  computed: {
-    listeners() {
-      var _this = this;
-      return {
-        ...this.$listeners,
-        // Swap purpose of input and update events from underlying BFormTextarea.
-        // See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/631.
-        input: function () {
-          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-            args[_key] = arguments[_key];
-          }
-          /**
-           * Emitted to update the v-model
-           */
-          _this.$emit('update', ...args);
-        },
-        update: function () {
-          for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-            args[_key2] = arguments[_key2];
-          }
-          /**
-           * Triggered by user interaction.
-           * Emitted after any formatting (not including 'trim' or 'number' props).
-           * Useful for getting the currently entered value when the 'debounce' or 'lazy' props are set.
-           */
-          _this.$emit(model.event, ...args);
-        }
-      };
-    },
-    keypressEvent() {
-      return this.submitOnEnter ? 'keyup' : null;
-    },
-    showCharacterCount() {
-      return this.characterCountLimit !== null;
-    },
-    bFormTextareaProps() {
-      return {
-        ...this.$attrs,
-        class: ['gl-form-input gl-form-textarea', this.textareaClasses],
-        noResize: this.noResize,
-        value: this.value,
-        rows: this.rows
-      };
-    }
-  },
-  methods: {
-    handleKeyPress(e) {
-      if (e.keyCode === 13 && (e.metaKey || e.ctrlKey)) {
-        this.$emit('submit');
-      }
-    }
-  }
-};
-
-/* 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.showCharacterCount)?_c('div',[_c('b-form-textarea',_vm._g(_vm._b({attrs:{"aria-describedby":_vm.characterCountTextId},nativeOn:_vm._d({},[_vm.keypressEvent,function($event){return _vm.handleKeyPress.apply(null, arguments)}])},'b-form-textarea',_vm.bFormTextareaProps,false),_vm.listeners)),_vm._v(" "),_c('gl-form-character-count',{attrs:{"value":_vm.value,"limit":_vm.characterCountLimit,"count-text-id":_vm.characterCountTextId},scopedSlots:_vm._u([{key:"over-limit-text",fn:function(ref){
-var count = ref.count;
-return [_vm._t("character-count-over-limit-text",null,{"count":count})]}},{key:"remaining-count-text",fn:function(ref){
-var count = ref.count;
-return [_vm._t("remaining-character-count-text",null,{"count":count})]}}],null,true)})],1):_c('b-form-textarea',_vm._g(_vm._b({nativeOn:_vm._d({},[_vm.keypressEvent,function($event){return _vm.handleKeyPress.apply(null, arguments)}])},'b-form-textarea',_vm.bFormTextareaProps,false),_vm.listeners))};
-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/form/input_group_text/input_group_text.js

@@ -1,43 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  name: 'GlInputGroupText'
-};
-
-/* 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:"input-group-text"},[_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/icon/icon.js

@@ -1,113 +0,0 @@
-import iconsPath from '@gitlab/svgs/dist/icons.svg';
-import iconsInfo from '@gitlab/svgs/dist/icons.json';
-import { logWarning } from '../../../utils/utils';
-import { iconSizeOptions, iconVariantOptions } from '../../../utils/constants';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-const knownIcons = new Set(iconsInfo.icons);
-
-/** This is a re-usable vue component for rendering a svg sprite icon
- *  @example
- *  <icon
- *    name="retry"
- *    :size="32"
- *    class="top"
- *  />
- */
-var script = {
-  name: 'GlIcon',
-  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
-    },
-    /**
-     * One of the icons from https://design.gitlab.com/product-foundations/iconography-directory
-     */
-    name: {
-      type: String,
-      required: true,
-      validator: value => {
-        if (knownIcons.has(value)) {
-          return true;
-        }
-        logWarning(`Icon '${value}' is not a known icon of @gitlab/svgs`, {
-          name: 'GlIcon'
-        });
-        return false;
-      }
-    },
-    /**
-     * Icon size
-     */
-    size: {
-      type: Number,
-      required: false,
-      default: 16,
-      validator: value => iconSizeOptions.includes(value)
-    },
-    /**
-     * Icon variant
-     */
-    variant: {
-      type: String,
-      required: false,
-      default: 'current',
-      validator: value => Object.keys(iconVariantOptions).includes(value)
-    }
-  },
-  computed: {
-    spriteHref() {
-      return `${iconsPath}#${this.name}`;
-    },
-    iconSizeClass() {
-      return this.size ? `s${this.size}` : '';
-    },
-    iconVariantClass() {
-      return this.variant ? iconVariantOptions[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',_vm._g({key:_vm.spriteHref,class:['gl-icon', _vm.iconSizeClass, _vm.iconVariantClass],attrs:{"data-testid":(_vm.name + "-icon"),"role":"img","aria-hidden":!_vm.ariaLabel,"aria-label":_vm.ariaLabel}},_vm.$listeners),[_c('use',{attrs:{"href":_vm.spriteHref}})])};
-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/illustration/illustration.js

@@ -1,80 +0,0 @@
-import illustrationsPath from '@gitlab/svgs/dist/illustrations.svg';
-import illustrationsInfo from '@gitlab/svgs/dist/illustrations.json';
-import { logWarning } from '../../../utils/utils';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-const knownIllustrations = illustrationsInfo.icons;
-
-/** This is a re-usable vue component for rendering a svg sprite icon
- *  @example
- *  <illustration
- *    name="status-success-sm"
- *  />
- */
-var script = {
-  name: 'GlIllustration',
-  props: {
-    /**
-     * One of the illustrations from https://design.gitlab.com/product-foundations/illustration-directory
-     */
-    name: {
-      type: String,
-      required: true,
-      validator: value => {
-        if (knownIllustrations.some(obj => obj.name === value)) {
-          return true;
-        }
-        logWarning(`Illustration '${value}' is not a known illustration of @gitlab/svgs`, {
-          name: 'GlIllustration'
-        });
-        return false;
-      }
-    }
-  },
-  computed: {
-    spriteHref() {
-      return `${illustrationsPath}#${this.name}`;
-    },
-    illustrationSize() {
-      return knownIllustrations.find(obj => obj.name === this.name).svg_size;
-    }
-  }
-};
-
-/* 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',_vm._g({key:_vm.spriteHref,attrs:{"data-testid":(_vm.name + "-illustration"),"role":"presentation","width":_vm.illustrationSize,"height":_vm.illustrationSize}},_vm.$listeners),[_c('use',{attrs:{"href":_vm.spriteHref}})])};
-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/infinite_scroll/infinite_scroll.js

@@ -1,196 +0,0 @@
-import { throttle } from 'lodash-es';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-const throttleDuration = 1000;
-/**
- * After adding more items, scroll will adjust slightly.
- * Values in pixels, should be a small amount.
- */
-const adjustScrollGap = 5;
-const THRESHOLD = 1;
-var script = {
-  name: 'GlInfiniteScroll',
-  props: {
-    /**
-     * Total number of items available
-     */
-    totalItems: {
-      type: Number,
-      required: false,
-      default: 0
-    },
-    /**
-     * Numbers of items fetched before scrolling
-     */
-    fetchedItems: {
-      type: Number,
-      required: true
-    },
-    /**
-     * Max height of the list before the scrollbar appears
-     */
-    maxListHeight: {
-      type: Number,
-      required: false,
-      default: 0
-    }
-  },
-  computed: {
-    listHeight() {
-      return {
-        maxHeight: this.maxListHeight ? `${this.maxListHeight}px` : 'auto'
-      };
-    },
-    legendText() {
-      if (this.totalItems > 0) {
-        return `Showing ${this.fetchedItems} of ${this.totalItems} items`;
-      }
-      return `Showing ${this.fetchedItems} items`;
-    }
-  },
-  watch: {
-    fetchedItems(newVal, oldVal) {
-      // Re-adjust scroll to the current item if more items are added
-      if (newVal > oldVal) {
-        const {
-          scrollHeight,
-          scrollTop
-        } = this.$refs.infiniteContainer;
-        // Only when scrolled to the top
-        if (scrollHeight !== 0 && scrollTop === 0) {
-          // Wait until the DOM is fully updated to adjust scroll
-          this.$nextTick(() => {
-            const {
-              scrollHeight: newScrollHeight
-            } = this.$refs.infiniteContainer;
-
-            // New scrollTop is the new height, minus the old height
-            // minus a small space to allow the user to trigger a scroll once more
-            let top = newScrollHeight - scrollHeight - adjustScrollGap;
-
-            // Never adjust to 0, or a new event may be be triggered
-            if (top < 1) {
-              top = 1;
-            }
-            this.scrollTo({
-              top
-            });
-          });
-        }
-      }
-    }
-  },
-  mounted() {
-    // Scroll to bottom for reverse effect
-    this.$nextTick(() => {
-      if (this.$listeners.topReached && !this.$listeners.bottomReached) {
-        this.scrollDown();
-      }
-    });
-  },
-  methods: {
-    /**
-     * Scroll to the top of the container, leaving a gap
-     * to avoid triggering the event.
-     */
-    scrollUp() {
-      this.scrollTo({
-        top: adjustScrollGap
-      });
-    },
-    /**
-     * Scroll to the bottom of the container, leaving a gap
-     * to avoid triggering the event.
-     */
-    scrollDown() {
-      const {
-        scrollHeight
-      } = this.$refs.infiniteContainer;
-      this.scrollTo({
-        top: scrollHeight - adjustScrollGap
-      });
-    },
-    /**
-     * Scroll to a location in the container
-     *
-     * @param params.top - Number of pixels along Y axis to
-     * scroll the list container.
-     * @param params.behavior - Determines whether scrolling
-     * is instant or animates smoothly. Can be 'auto', 'instant', or 'smooth'
-     * See [MDN spec](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo)
-     */
-    scrollTo(_ref) {
-      let {
-        top,
-        behavior
-      } = _ref;
-      this.$refs.infiniteContainer.scrollTo({
-        top,
-        behavior
-      });
-    },
-    topReached: throttle(function topReachedThrottled() {
-      /**
-       * Emitted when item container is scrolled to the top
-       */
-      this.$emit('topReached');
-    }, throttleDuration),
-    bottomReached: throttle(function bottomReachedThrottled() {
-      /**
-       * Emitted when item container is scrolled to the bottom
-       */
-      this.$emit('bottomReached');
-    }, throttleDuration),
-    itemsListHeight() {
-      return this.$refs.infiniteContainer.scrollHeight;
-    },
-    scrollTop() {
-      return this.$refs.infiniteContainer.scrollTop;
-    },
-    handleScroll: throttle(function handleScrollThrottled() {
-      if (Math.abs(this.itemsListHeight() - this.maxListHeight - this.scrollTop()) < THRESHOLD) {
-        this.bottomReached();
-      } else if (this.scrollTop() <= THRESHOLD) {
-        this.topReached();
-      }
-    })
-  }
-};
-
-/* 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',[_vm._t("header"),_vm._v(" "),_c('div',_vm._g(_vm._b({ref:"infiniteContainer",staticClass:"gl-infinite-scroll-container",style:(_vm.listHeight),on:{"scroll":_vm.handleScroll}},'div',_vm.$attrs,false),_vm.$listeners),[_vm._t("items")],2),_vm._v(" "),_c('p',{staticClass:"gl-infinite-scroll-legend"},[_vm._t("default",function(){return [_vm._v("\n      "+_vm._s(_vm.legendText)+"\n    ")]},{"fetchedItems":_vm.fetchedItems,"totalItems":_vm.totalItems})],2)],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 { adjustScrollGap, __vue_component__ as default };