@gitlab/ui 49.0.0 → 49.0.2

package/dist/components/base/search_box_by_click/search_box_by_click.js

@@ -36,7 +36,6 @@ var script = {
       // so we should not force any specific type for value here
       validator: () => true
     },
-
     /**
      * If provided, used as history items for this component
      */
@@ -45,7 +44,6 @@ var script = {
       required: false,
       default: null
     },
-
     /**
      * If provided, used as a placeholder for this component
      */
@@ -59,7 +57,6 @@ var script = {
       required: false,
       default: true
     },
-
     /**
      * If provided and true, disables the input and controls
      */
@@ -68,7 +65,6 @@ var script = {
       required: false,
       default: false
     },
-
     /**
      * i18n for recent searches title within history dropdown
      */
@@ -77,7 +73,6 @@ var script = {
       required: false,
       default: 'Recent searches'
     },
-
     /**
      * i18n for clear button title
      */
@@ -86,7 +81,6 @@ var script = {
       required: false,
       default: 'Clear'
     },
-
     /**
      * i18n for close button title within history dropdown
      */
@@ -95,7 +89,6 @@ var script = {
       required: false,
       default: 'Close'
     },
-
     /**
      * i18n for recent searches clear text
      */
@@ -109,7 +102,6 @@ var script = {
       required: false,
       default: "You don't have any recent searches"
     },
-
     /**
      * Container for tooltip. Valid values: DOM node, selector string or `false` for default
      */
@@ -118,7 +110,6 @@ var script = {
       default: false,
       validator: value => value === false || typeof value === 'string' || value instanceof HTMLElement
     },
-
     /**
      * HTML attributes to add to the search button
      */
@@ -128,14 +119,12 @@ var script = {
       default: () => ({})
     }
   },
-
   data() {
     return {
       currentValue: null,
       isFocused: false
     };
   },
-
   computed: {
     inputAttributes() {
       const attributes = {
@@ -143,39 +132,31 @@ var script = {
         placeholder: this.placeholder,
         ...this.$attrs
       };
-
       if (!attributes['aria-label']) {
         attributes['aria-label'] = attributes.placeholder;
       }
-
       return attributes;
     },
-
     hasValue() {
       return Boolean(this.currentValue);
     }
-
   },
   watch: {
     value: {
       handler(newValue) {
         this.currentValue = newValue;
       },
-
       immediate: true
     },
-
     currentValue(newValue) {
       if (newValue === this.value) return;
       this.$emit('input', newValue);
     }
-
   },
   methods: {
     closeHistoryDropdown() {
       this.$refs.historyDropdown.hide();
     },
-
     search(value) {
       /**
        * Emitted when search is submitted
@@ -183,40 +164,34 @@ var script = {
        */
       this.$emit('submit', value);
     },
-
     selectHistoryItem(item) {
       this.currentValue = item;
+
       /**
        * Emitted when item from history is selected
        * @property {*} item History item
        */
-
       this.$emit('history-item-selected', item);
       setTimeout(() => {
         document.activeElement.blur();
       });
     },
-
     clearInput() {
       this.currentValue = '';
       /**
        * Emitted when search is cleared
        */
-
       this.$emit('clear');
-
       if (this.$refs.input) {
         this.$refs.input.$el.focus();
       }
     },
-
     emitClearHistory() {
       /**
        * Emitted when clear history button is clicked
        */
       this.$emit('clear-history');
     }
-
   }
 };
 

package/dist/components/base/search_box_by_type/search_box_by_type.js

@@ -30,7 +30,6 @@ var script = {
       required: false,
       default: 'Clear'
     },
-
     /**
      * If provided and true, disables the input and controls
      */
@@ -39,7 +38,6 @@ var script = {
       required: false,
       default: false
     },
-
     /**
      * Puts search box into loading state, rendering spinner
      */
@@ -48,7 +46,6 @@ var script = {
       required: false,
       default: false
     },
-
     /**
      * Container for tooltip. Valid values: DOM node, selector string or `false` for default
      */
@@ -65,41 +62,34 @@ var script = {
         placeholder: 'Search',
         ...this.$attrs
       };
-
       if (!attributes['aria-label']) {
         attributes['aria-label'] = attributes.placeholder;
       }
-
       return attributes;
     },
-
     hasValue() {
       return Boolean(this.value.length);
     },
-
     inputListeners() {
-      return { ...this.$listeners,
+      return {
+        ...this.$listeners,
         input: value => {
           this.$emit('input', value);
         }
       };
     },
-
     showClearButton() {
       return this.hasValue && !this.disabled;
     }
-
   },
   methods: {
     clearInput() {
       this.$emit('input', '');
       this.focusInput();
     },
-
     focusInput() {
       this.$refs.input.$el.focus();
     }
-
   }
 };
 

package/dist/components/base/segmented_control/segmented_control.js

@@ -25,35 +25,28 @@ var script = {
     enabledOptions() {
       return this.options.filter(option => !option.disabled);
     }
-
   },
   watch: {
     checked: {
       handler(newValue, oldValue) {
         this.checkValue(newValue, oldValue);
       }
-
     },
     options: {
       handler() {
         this.checkValue(this.checked);
       }
-
     }
   },
-
   created() {
     this.checkValue(this.checked);
   },
-
   methods: {
     checkValue(newValue) {
       let oldValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-
       if (!this.isValidValue(newValue)) {
         // eslint-disable-next-line no-console
         console.warn(genericErrorMessage);
-
         if (this.enabledOptions.length) {
           const suggestion = oldValue && this.isValidValue(oldValue) ? oldValue : this.enabledOptions[0].value;
           /**
@@ -61,12 +54,10 @@ var script = {
            * @event input
            * @argument checked The selected option
            */
-
           this.$emit('input', suggestion);
         }
       }
     },
-
     isValidValue(val) {
       return this.enabledOptions.some(_ref => {
         let {
@@ -75,7 +66,6 @@ var script = {
         return value === val;
       });
     }
-
   }
 };
 

package/dist/components/base/skeleton_loader/skeleton_loader.js

@@ -21,7 +21,6 @@ var script = {
       default: null,
       required: false
     },
-
     /**
      * It will be set in the viewbox attr in the <svg />. Defaults to 130 when skeleton is passed via the slot.
      * Defaults to the combined height of the lines when default skeleton is used
@@ -31,7 +30,6 @@ var script = {
       default: null,
       required: false
     },
-
     /**
      * Aspect ratio option of <svg/>
      */
@@ -40,7 +38,6 @@ var script = {
       default: 'xMidYMid meet',
       required: false
     },
-
     /**
      * Required if you're using <base url="/" /> in your <head />. Defaults to an empty string.
      * This prop is common used as: <gl-skeleton-loader :base-url="$route.fullPath" /> which will fill the SVG attribute with the relative path.
@@ -50,7 +47,6 @@ var script = {
       default: '',
       required: false
     },
-
     /**
      * Defaults to unique id
      */
@@ -59,7 +55,6 @@ var script = {
       default: () => uid(),
       required: false
     },
-
     /**
      * Number of lines to show when using the default skeleton
      */
@@ -68,7 +63,6 @@ var script = {
       default: 3,
       required: false
     },
-
     /**
      * If the default skeleton lines should all be the same width
      */
@@ -78,41 +72,31 @@ var script = {
       required: false
     }
   },
-
   render(createElement, _ref) {
     let {
       props,
       slots
     } = _ref;
-
     const slotIsSet = () => slots().default;
-
     const propValueOrDefault = (name, defaultValue) => props[name] !== null ? props[name] : defaultValue;
-
     const width = () => {
       if (slotIsSet()) {
         return propValueOrDefault('width', DEFAULT_SVG_WIDTH);
       }
-
       return propValueOrDefault('width', DEFAULT_LINE_MAX_WIDTH);
     };
-
     const height = () => {
       if (slotIsSet()) {
         return propValueOrDefault('height', DEFAULT_SVG_HEIGHT);
       }
-
       return propValueOrDefault('height', props.lines * DEFAULT_LINE_HEIGHT + (props.lines - 1) * DEFAULT_LINE_SPACING);
     };
-
     const lineWidth = index => {
       if (props.equalWidthLines) {
         return '100%';
       }
-
       return `${DEFAULT_LINE_WIDTH_PERCENTAGES[index % DEFAULT_LINE_WIDTH_PERCENTAGES.length]}%`;
     };
-
     const svg = createElement('svg', {
       class: {
         'gl-skeleton-loader': true,
@@ -187,11 +171,9 @@ var script = {
         repeatCount: 'indefinite'
       }
     })])])])]);
-
     if (slotIsSet()) {
       return svg;
     }
-
     return createElement('div', {
       class: 'gl-skeleton-loader-default-container gl-max-w-full',
       style: {
@@ -200,7 +182,6 @@ var script = {
       }
     }, [svg]);
   }
-
 };
 
 /* script */

package/dist/components/base/skeleton_loading/skeleton_loading.js

@@ -9,18 +9,15 @@ var script = {
       type: Number,
       required: false,
       default: 3,
-
       validator(value) {
         return value > 0 && value < 4;
       }
-
     }
   },
   computed: {
     lineClasses() {
       return new Array(this.lines).fill().map((_, i) => `skeleton-line-${i + 1}`);
     }
-
   }
 };
 

package/dist/components/base/sorting/sorting.js

@@ -23,7 +23,6 @@ var script = {
       required: false,
       default: ''
     },
-
     /**
      * Determines the current sort order icon displayed.
      */
@@ -32,7 +31,6 @@ var script = {
       required: false,
       default: false
     },
-
     /**
      * The text of the tool tip for the sort direction toggle button.
      */
@@ -41,7 +39,6 @@ var script = {
       required: false,
       default: 'Sort direction'
     },
-
     /**
      * Additional class(es) to apply to the root element of the GlDropdown.
      */
@@ -50,7 +47,6 @@ var script = {
       required: false,
       default: ''
     },
-
     /**
      * Additional class(es) to apply to the dropdown toggle.
      */
@@ -59,7 +55,6 @@ var script = {
       required: false,
       default: ''
     },
-
     /**
      * Additional class(es) to apply to the sort direction toggle button.
      */
@@ -73,15 +68,14 @@ var script = {
     localSortDirection() {
       return this.isAscending ? 'sort-lowest' : 'sort-highest';
     },
-
     sortDirectionAriaLabel() {
       return this.isAscending ? 'Sorting Direction: Ascending' : 'Sorting Direction: Descending';
     }
-
   },
   methods: {
     toggleSortDirection() {
       const newDirection = !this.isAscending;
+
       /**
        * Emitted when the sort direction button is clicked.
        *
@@ -90,10 +84,8 @@ var script = {
        *
        * @property {boolean} isAscending
        */
-
       this.$emit('sortDirectionChange', newDirection);
     }
-
   }
 };
 

package/dist/components/base/sorting/sorting_item.js

@@ -25,7 +25,6 @@ var script = {
       default: false,
       required: false
     },
-
     /**
      * If given, makes the item a link pointing to the given value. Otherwise,
      * the item is a button.
@@ -36,7 +35,6 @@ var script = {
       required: false
     }
   },
-
   /**
    * The content of the item.
    * @slot default
@@ -56,19 +54,19 @@ var script = {
         ariaLabel: 'Selected'
       }
     });
-    return createElement(GlDropdownItem, { ...data,
-      attrs: { ...props
+    return createElement(GlDropdownItem, {
+      ...data,
+      attrs: {
+        ...props
       },
       scopedSlots: {
         default: () => {
           var _scopedSlots$default;
-
           return [icon, (_scopedSlots$default = scopedSlots.default) === null || _scopedSlots$default === void 0 ? void 0 : _scopedSlots$default.call(scopedSlots)];
         }
       }
     });
   }
-
 };
 
 /* script */

package/dist/components/base/table/table.js

@@ -4,7 +4,6 @@ import { tableFullProps, tableFullSlots, glTableLiteWarning } from './constants'
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 //
-
 const shouldUseFullTable = _ref => {
   let {
     $attrs,
@@ -12,13 +11,11 @@ const shouldUseFullTable = _ref => {
   } = _ref;
   return tableFullProps.some(prop => $attrs[prop] !== undefined) || tableFullSlots.some(slot => $scopedSlots[slot] !== undefined);
 };
-
 var script = {
   components: {
     BTable
   },
   inheritAttrs: false,
-
   mounted() {
     // logWarning will call isDev before logging any message
     // this additional call to isDev is being made to exit the condition early when run in production
@@ -26,7 +23,6 @@ var script = {
       logWarning(glTableLiteWarning);
     }
   }
-
 };
 
 /* script */

package/dist/components/base/tabs/tab/tab.js

@@ -15,7 +15,6 @@ var script = {
       required: false,
       default: ''
     },
-
     /**
      * Query string parameter value to use when `gl-tabs` `sync-active-tab-with-query-params` prop is set to `true`.
      */
@@ -30,20 +29,17 @@ var script = {
       const {
         titleLinkClass
       } = this;
-
       if (_isArray(titleLinkClass)) {
         return [...titleLinkClass, DEFAULT_TAB_TITLE_LINK_CLASS];
       }
-
       if (_isPlainObject(titleLinkClass)) {
-        return { ...titleLinkClass,
+        return {
+          ...titleLinkClass,
           [DEFAULT_TAB_TITLE_LINK_CLASS]: true
         };
       }
-
       return `${titleLinkClass} ${DEFAULT_TAB_TITLE_LINK_CLASS}`.trim();
     }
-
   }
 };
 

package/dist/components/base/tabs/tabs/scrollable_tabs.js

@@ -15,7 +15,6 @@ var script = {
     GlResizeObserverDirective
   },
   inheritAttrs: false,
-
   data() {
     return {
       width: 0,
@@ -25,40 +24,31 @@ var script = {
       navScrollWidth: 0
     };
   },
-
   computed: {
     navClass() {
       const attrsNavClass = this.$attrs.navClass;
-
       if (!attrsNavClass) {
         return [NAV_CLASS];
       }
-
       if (_isArray(attrsNavClass)) {
         return [NAV_CLASS, ...attrsNavClass];
       }
-
       return [NAV_CLASS, attrsNavClass];
     },
-
     displayScrollLeft() {
       // if we have scrolled && there's overflow
       return this.scrollLeft && this.width < this.navScrollWidth;
     },
-
     displayScrollRight() {
       // if there's more overflow to the right
       return this.scrollLeft + this.width < this.navScrollWidth;
     },
-
     passthroughAttrs() {
       return Object.keys(this.$attrs).filter(key => !key.startsWith('action')).reduce((acc, key) => Object.assign(acc, {
         [key]: this.$attrs[key]
       }), {});
     }
-
   },
-
   mounted() {
     this.$nextTick(() => {
       this.navScrollWidth = this.getScrollWidth();
@@ -68,18 +58,15 @@ var script = {
     }, 100);
     this.getNavContainer().addEventListener('scroll', this.handleNavScroll);
   },
-
   beforeDestroy() {
     this.getNavContainer().removeEventListener('scroll', this.handleNavScroll);
   },
-
   updated() {
     // Whenever tabs are added or removed we need to recalculate the reactive scrollWidth
     this.$nextTick(() => {
       this.navScrollWidth = this.getScrollWidth();
     });
   },
-
   methods: {
     handleResize(_ref) {
       let {
@@ -90,17 +77,14 @@ var script = {
       this.width = width;
       this.navScrollWidth = this.getScrollWidth();
     },
-
     scrollTabsLeft() {
       const scrollTo = this.scrollLeft - this.width;
       this.scrollTabs(Math.max(scrollTo, 0));
     },
-
     scrollTabsRight() {
       const scrollTo = this.scrollLeft + this.width;
       this.scrollTabs(Math.min(scrollTo, this.getScrollWidth() - this.width));
     },
-
     scrollTabs(scrollTo) {
       this.getNavContainer().scrollTo({
         left: scrollTo,
@@ -108,19 +92,14 @@ var script = {
       });
       this.scrollLeft = scrollTo;
     },
-
     getScrollWidth() {
       var _this$getNavContainer;
-
       return ((_this$getNavContainer = this.getNavContainer()) === null || _this$getNavContainer === void 0 ? void 0 : _this$getNavContainer.scrollWidth) || 0;
     },
-
     getNavContainer() {
       var _this$$el;
-
       return (_this$$el = this.$el) === null || _this$$el === void 0 ? void 0 : _this$$el.querySelector(`.${NAV_CLASS}`);
     }
-
   },
   NAV_CLASS
 };