npm - @gitlab/ui - Versions diffs - 49.0.1 → 49.0.3 - Mend

@gitlab/ui 49.0.1 → 49.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (128) hide show

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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
 };

package/dist/components/base/tabs/tabs/tabs.js CHANGED Viewed

@@ -4,9 +4,7 @@ import GlButton from '../../button/button';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 //
 const validatorHelper = obj => Object.keys(obj).every(val => val === 'text' || val === 'attributes');
 var script = {
   components: {
     BTabs,
@@ -47,7 +45,6 @@ var script = {
       required: false,
       default: false
     },
     /**
      * Sync active tab with query string parameters. Allows for deep linking into specific tabs.
      */
@@ -56,7 +53,6 @@ var script = {
       required: false,
       default: false
     },
     /**
      * Name to use for query string parameter.
      */
@@ -71,24 +67,21 @@ var script = {
       default: 0
     }
   },
   data() {
     return {
       activeTabIndex: 0
     };
   },
   computed: {
     hasActions() {
       return [this.actionPrimary, this.actionSecondary, this.actionTertiary].some(Boolean);
     },
     listeners() {
-      return { ...this.$listeners,
+      return {
+        ...this.$listeners,
         input: this.handleInput
       };
     }
   },
   watch: {
     value: {
@@ -97,49 +90,40 @@ var script = {
           this.activeTabIndex = newValue;
         }
       },
       immediate: true
     }
   },
   mounted() {
     if (this.syncActiveTabWithQueryParams) {
       this.syncActiveTabFromQueryParams();
       window.addEventListener('popstate', this.syncActiveTabFromQueryParams);
-    } // Because we are manually binding `value` attribute to `b-tabs` the `input`
+    }
+    // Because we are manually binding `value` attribute to `b-tabs` the `input`
     // event is no longer automatically fired when the component is mounted.
     // To maintain parity with original `b-tabs` functionality
     // we manually fire the `input` event when the component is mounted.
     this.$emit('input', this.activeTabIndex);
   },
   destroyed() {
     window.removeEventListener('popstate', this.syncActiveTabFromQueryParams);
   },
   methods: {
     buttonBinding(prop, name) {
       if (!prop.attributes) {
         return tabsButtonDefaults[name];
       }
       return prop.attributes;
     },
     primary() {
       this.$emit('primary');
     },
     secondary() {
       this.$emit('secondary');
     },
     tertiary() {
       this.$emit('tertiary');
     },
     /**
      * When the query parameter is updated, update the active tab to match.
      */
@@ -148,14 +132,12 @@ var script = {
       const tabIndexToActivate = this.getTabs().findIndex((tab, tabIndex) => this.getTabQueryParamValue(tabIndex) === queryParamValue);
       this.activeTabIndex = tabIndexToActivate !== -1 ? tabIndexToActivate : 0;
     },
     /**
      * Returns a list of all <b-tab> instances associated with this tab control.
      */
     getTabs() {
       return this.$refs.bTabs.getTabs();
     },
     /**
      * Get the value of the query param as defined by the `queryParamName` prop.
      */
@@ -163,31 +145,27 @@ var script = {
       const searchParams = new URLSearchParams(window.location.search);
       return searchParams.get(this.queryParamName);
     },
     /**
      * Set the value of the query param as defined by the `queryParamName` prop.
      * This method does nothing if the query param is already up to date.
      */
     setQueryParamValueIfNecessary(tabIndex) {
       const currentQueryParamValue = this.getQueryParamValue();
-      const newQueryParamValue = this.getTabQueryParamValue(tabIndex); // If the current query parameter is already up-to-date,
-      // avoid creating a duplicate history entry.
+      const newQueryParamValue = this.getTabQueryParamValue(tabIndex);
+      // If the current query parameter is already up-to-date,
+      // avoid creating a duplicate history entry.
       if (tabIndex === 0 && !currentQueryParamValue || tabIndex !== 0 && currentQueryParamValue === newQueryParamValue) {
         return;
       }
       const searchParams = new URLSearchParams(window.location.search);
       if (tabIndex === 0) {
         searchParams.delete(this.queryParamName);
       } else {
         searchParams.set(this.queryParamName, newQueryParamValue);
       }
       window.history.pushState({}, '', `${window.location.pathname}?${searchParams.toString()}`);
     },
     /**
      * Returns the query param value for a tab.
      * Defaults to the tab index unless the `query-param-value` attribute is set.
@@ -196,19 +174,16 @@ var script = {
       const tab = this.getTabs()[tabIndex];
       return (tab === null || tab === void 0 ? void 0 : tab.$attrs['query-param-value']) || tabIndex.toString();
     },
     /**
      * Event handler for `input` event.
      */
     handleInput(tabIndex) {
       this.$emit('input', tabIndex);
       this.activeTabIndex = tabIndex;
       if (this.syncActiveTabWithQueryParams) {
         this.setQueryParamValueIfNecessary(tabIndex);
       }
     }
   }
 };