@gitlab/ui 132.0.1 → 132.0.3

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

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

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

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

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

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

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