@gitlab/ui 49.0.1 → 49.0.3

package/dist/components/base/new_dropdowns/base_dropdown/base_dropdown.js

@@ -68,7 +68,6 @@ var script = {
       required: false,
       default: false
     },
-
     /**
      * Right align dropdown menu with respect to the toggle button
      */
@@ -86,7 +85,6 @@ var script = {
         return ['menu', 'listbox', 'tree', 'grid', 'dialog', true, false].includes(value);
       }
     },
-
     /**
      * Id that will be referenced by `aria-labelledby` attribute of the dropdown content`
      */
@@ -94,7 +92,6 @@ var script = {
       type: String,
       required: true
     },
-
     /**
      * The `aria-labelledby` attribute value for the  toggle `button`
      */
@@ -104,26 +101,20 @@ var script = {
       default: null
     }
   },
-
   data() {
     return {
       visible: false
     };
   },
-
   computed: {
     isIconOnly() {
       var _this$toggleText;
-
       return Boolean(this.icon && (!((_this$toggleText = this.toggleText) !== null && _this$toggleText !== void 0 && _this$toggleText.length) || this.textSrOnly));
     },
-
     isIconWithText() {
       var _this$toggleText2;
-
       return Boolean(this.icon && ((_this$toggleText2 = this.toggleText) === null || _this$toggleText2 === void 0 ? void 0 : _this$toggleText2.length) && !this.textSrOnly);
     },
-
     toggleButtonClasses() {
       return [this.toggleClass, {
         'gl-dropdown-toggle': true,
@@ -133,37 +124,29 @@ var script = {
         'dropdown-toggle-no-caret': this.noCaret
       }];
     },
-
     toggleLabelledBy() {
       return this.ariaLabelledby ? `${this.ariaLabelledby} ${this.toggleId}` : this.toggleId;
     },
-
     popperConfig() {
       return {
         placement: this.right ? 'bottom-end' : 'bottom-start',
         ...POPPER_CONFIG
       };
     }
-
   },
-
   mounted() {
     this.$nextTick(() => {
       this.popper = createPopper(this.$refs.toggle.$el, this.$refs.content, this.popperConfig);
     });
   },
-
   beforeDestroy() {
     this.popper.destroy();
   },
-
   methods: {
     async toggle() {
       this.visible = !this.visible;
-
       if (this.visible) {
         var _this$popper;
-
         /* Initially dropdown is hidden with `display="none"`.
           When `visible` prop is toggled ON, with the `nextTick` we wait for the DOM update -
           dropdown's `display="block"` is set (adding CSS class `show`).
@@ -181,36 +164,28 @@ var script = {
         this.$emit(GL_DROPDOWN_HIDDEN);
       }
     },
-
     open() {
       if (this.visible) {
         return;
       }
-
       this.toggle();
     },
-
     close() {
       if (!this.visible) {
         return;
       }
-
       this.toggle();
     },
-
     closeAndFocus() {
       if (!this.visible) {
         return;
       }
-
       this.toggle();
       this.focusToggle();
     },
-
     focusToggle() {
       this.$refs.toggle.$el.focus();
     }
-
   }
 };
 

package/dist/components/base/new_dropdowns/constants.js

@@ -5,11 +5,13 @@ const POPPER_CONFIG = {
       offset: [0, 4]
     }
   }]
-}; // base dropdown events
+};
 
+// base dropdown events
 const GL_DROPDOWN_SHOWN = 'shown';
-const GL_DROPDOWN_HIDDEN = 'hidden'; // KEY Codes
+const GL_DROPDOWN_HIDDEN = 'hidden';
 
+// KEY Codes
 const HOME = 'Home';
 const END = 'End';
 const ARROW_UP = 'ArrowUp';

package/dist/components/base/new_dropdowns/listbox/listbox.js

@@ -42,7 +42,6 @@ var script = {
       default: () => [],
       validator: itemsValidator
     },
-
     /**
      * array of selected items values for multi-select and selected item value for single-select
      */
@@ -51,7 +50,6 @@ var script = {
       required: false,
       default: () => []
     },
-
     /**
      * Allow multi-selection
      */
@@ -60,7 +58,6 @@ var script = {
       required: false,
       default: false
     },
-
     /**
      * Toggle button text
      */
@@ -69,7 +66,6 @@ var script = {
       required: false,
       default: ''
     },
-
     /**
      * Toggle text to be read by screen readers only
      */
@@ -78,14 +74,12 @@ var script = {
       required: false,
       default: false
     },
-
     /** The header text */
     headerText: {
       type: String,
       required: false,
       default: ''
     },
-
     /**
      * Styling option - dropdown's toggle category
      */
@@ -95,7 +89,6 @@ var script = {
       default: buttonCategoryOptions.primary,
       validator: value => Object.keys(buttonCategoryOptions).includes(value)
     },
-
     /**
      * Styling option - dropdown's toggle variant
      */
@@ -105,7 +98,6 @@ var script = {
       default: dropdownVariantOptions.default,
       validator: value => Object.keys(dropdownVariantOptions).includes(value)
     },
-
     /**
      * The size of the dropdown toggle
      */
@@ -115,7 +107,6 @@ var script = {
       default: buttonSizeOptions.medium,
       validator: value => Object.keys(buttonSizeOptions).includes(value)
     },
-
     /**
      * Icon name that will be rendered in the toggle button
      */
@@ -124,7 +115,6 @@ var script = {
       required: false,
       default: ''
     },
-
     /**
      * Set to "true" to disable the dropdown
      */
@@ -133,7 +123,6 @@ var script = {
       required: false,
       default: false
     },
-
     /**
      * Set to "true" when dropdown content (items) is loading
      * It will render a small loader in the dropdown toggle and make it disabled
@@ -143,7 +132,6 @@ var script = {
       required: false,
       default: false
     },
-
     /**
      * Additional CSS classes to customize toggle appearance
      */
@@ -152,7 +140,6 @@ var script = {
       required: false,
       default: null
     },
-
     /**
      * Set to "true" to hide the caret
      */
@@ -161,7 +148,6 @@ var script = {
       required: false,
       default: false
     },
-
     /**
      * Right align listbox menu with respect to the toggle button
      */
@@ -170,7 +156,6 @@ var script = {
       required: false,
       default: false
     },
-
     /**
      * Center selected item checkmark
      */
@@ -179,7 +164,6 @@ var script = {
       required: false,
       default: false
     },
-
     /**
      * The `aria-labelledby` attribute value for the toggle button
      * Provide the string of ids seperated by space
@@ -189,7 +173,6 @@ var script = {
       required: false,
       default: null
     },
-
     /**
      * The `aria-labelledby` attribute value for the list of options
      * Provide the string of ids seperated by space
@@ -199,7 +182,6 @@ var script = {
       required: false,
       default: null
     },
-
     /**
      * Enable search
      */
@@ -208,7 +190,6 @@ var script = {
       required: false,
       default: false
     },
-
     /**
      * Set to "true" when items search is in progress.
      * It will display loading icon below the search input
@@ -218,7 +199,6 @@ var script = {
       required: false,
       default: false
     },
-
     /**
      * Message to be displayed when filtering produced no results
      */
@@ -228,7 +208,6 @@ var script = {
       default: 'No results found'
     }
   },
-
   data() {
     return {
       selectedValues: [],
@@ -238,22 +217,18 @@ var script = {
       searchStr: ''
     };
   },
-
   computed: {
     listboxTag() {
       if (this.items.length === 0 || isOption(this.items[0])) return 'ul';
       return 'div';
     },
-
     flattenedOptions() {
       return flattenedOptions(this.items);
     },
-
     listboxToggleText() {
       if (!this.toggleText) {
         if (!this.multiple && this.selectedValues.length) {
           var _this$flattenedOption;
-
           return (_this$flattenedOption = this.flattenedOptions.find(_ref => {
             let {
               value
@@ -261,13 +236,10 @@ var script = {
             return value === this.selectedValues[0];
           })) === null || _this$flattenedOption === void 0 ? void 0 : _this$flattenedOption.text;
         }
-
         return '';
       }
-
       return this.toggleText;
     },
-
     selectedIndices() {
       return this.selectedValues.map(selected => this.flattenedOptions.findIndex(_ref2 => {
         let {
@@ -276,61 +248,49 @@ var script = {
         return value === selected;
       })).sort();
     },
-
     showList() {
       return this.flattenedOptions.length && !this.searching;
     },
-
     showNoResultsText() {
       return !this.flattenedOptions.length && !this.searching;
     },
-
     announceSRSearchResults() {
       return this.searchable && !this.showNoResultsText && this.$scopedSlots['search-summary-sr-only'];
     },
-
     headerId() {
       return this.headerText && _uniqueId('listbox-header-');
     }
-
   },
   watch: {
     selected: {
       immediate: true,
-
       handler(newSelected) {
         if (Array.isArray(newSelected)) {
           if (!this.multiple && newSelected.length) {
             throw new Error('To allow multi-selection, please, set "multiple" property to "true"');
           }
-
           this.selectedValues = [...newSelected];
         } else {
           this.selectedValues = [newSelected];
         }
       }
-
     }
   },
   methods: {
     open() {
       this.$refs.baseDropdown.open();
     },
-
     close() {
       this.$refs.baseDropdown.close();
     },
-
     groupClasses(index) {
       return index === 0 ? null : GROUP_TOP_BORDER_CLASSES;
     },
-
     onShow() {
       if (this.searchable) {
         this.focusSearchInput();
       } else {
         var _this$selectedIndices;
-
         this.focusItem((_this$selectedIndices = this.selectedIndices[0]) !== null && _this$selectedIndices !== void 0 ? _this$selectedIndices : 0, this.getFocusableListItemElements());
       }
       /**
@@ -338,11 +298,8 @@ var script = {
        *
        * @event shown
        */
-
-
       this.$emit(GL_DROPDOWN_SHOWN);
     },
-
     onHide() {
       /**
        * Emitted when dropdown is hidden
@@ -352,7 +309,6 @@ var script = {
       this.$emit(GL_DROPDOWN_HIDDEN);
       this.nextFocusedItemIndex = null;
     },
-
     onKeydown(event) {
       const {
         code,
@@ -362,7 +318,6 @@ var script = {
       if (elements.length < 1) return;
       let stop = true;
       const isSearchInput = target.matches(SEARCH_INPUT_SELECTOR);
-
       if (code === HOME) {
         this.focusItem(0, elements);
       } else if (code === END) {
@@ -371,7 +326,6 @@ var script = {
         if (isSearchInput) {
           return;
         }
-
         if (this.searchable && elements.indexOf(target) === 0) {
           this.focusSearchInput();
         } else {
@@ -386,41 +340,31 @@ var script = {
       } else {
         stop = false;
       }
-
       if (stop) {
         stopEvent(event);
       }
     },
-
     getFocusableListItemElements() {
       var _this$$refs$list;
-
       const items = (_this$$refs$list = this.$refs.list) === null || _this$$refs$list === void 0 ? void 0 : _this$$refs$list.querySelectorAll(ITEM_SELECTOR);
       return Array.from(items || []);
     },
-
     focusNextItem(event, elements, offset) {
       const {
         target
       } = event;
       const currentIndex = elements.indexOf(target);
-
       const nextIndex = _clamp(currentIndex + offset, 0, elements.length - 1);
-
       this.focusItem(nextIndex, elements);
     },
-
     focusItem(index, elements) {
       var _elements$index;
-
       this.nextFocusedItemIndex = index;
       (_elements$index = elements[index]) === null || _elements$index === void 0 ? void 0 : _elements$index.focus();
     },
-
     focusSearchInput() {
       this.$refs.searchBox.focusInput();
     },
-
     onSelect(item, isSelected) {
       if (this.multiple) {
         this.onMultiSelect(item.value, isSelected);
@@ -428,15 +372,12 @@ var script = {
         this.onSingleSelect(item.value, isSelected);
       }
     },
-
     isSelected(item) {
       return this.selectedValues.some(value => value === item.value);
     },
-
     isFocused(item) {
       return this.nextFocusedItemIndex === this.flattenedOptions.indexOf(item);
     },
-
     onSingleSelect(value, isSelected) {
       if (isSelected) {
         /**
@@ -446,10 +387,8 @@ var script = {
          */
         this.$emit('select', value);
       }
-
       this.$refs.baseDropdown.closeAndFocus();
     },
-
     onMultiSelect(value, isSelected) {
       if (isSelected) {
         this.$emit('select', [...this.selectedValues, value]);
@@ -457,7 +396,6 @@ var script = {
         this.$emit('select', this.selectedValues.filter(selectedValue => selectedValue !== value));
       }
     },
-
     search(searchTerm) {
       /**
        * Emitted when the search query string is changed
@@ -467,7 +405,6 @@ var script = {
        */
       this.$emit('search', searchTerm);
     },
-
     isOption
   }
 };

package/dist/components/base/new_dropdowns/listbox/listbox_group.js

@@ -8,11 +8,9 @@ var script = {
       required: true
     }
   },
-
   created() {
     this.nameId = _uniqueId('gl-listbox-group-');
   }
-
 };
 
 /* script */

package/dist/components/base/new_dropdowns/listbox/listbox_item.js

@@ -29,27 +29,22 @@ var script = {
       if (this.isCheckCentered) {
         return '';
       }
-
       return 'gl-mt-3 gl-align-self-start';
     }
-
   },
   methods: {
     toggleSelection() {
       this.$emit('select', !this.isSelected);
     },
-
     onKeydown(event) {
       const {
         code
       } = event;
-
       if (code === ENTER || code === SPACE) {
         stopEvent(event);
         this.toggleSelection();
       }
     }
-
   }
 };
 

package/dist/components/base/new_dropdowns/listbox/utils.js

@@ -1,34 +1,27 @@
 import _isString from 'lodash/isString';
 
 const isOption = item => Boolean(item) && _isString(item.value);
-
 const isGroup = function () {
   let {
     options
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return Array.isArray(options) && options.every(isOption);
 };
-
 const hasNoDuplicates = array => array.length === new Set(array).size;
-
 const flattenedOptions = items => items.flatMap(item => isOption(item) ? item : item.options);
-
 const isAllOptionsOrAllGroups = items => items.every(isOption) || items.every(isGroup);
-
 const hasUniqueValues = items => hasNoDuplicates(flattenedOptions(items).map(_ref => {
   let {
     value
   } = _ref;
   return value;
 }));
-
 const hasUniqueGroups = items => hasNoDuplicates(items.filter(isGroup).map(_ref2 => {
   let {
     text
   } = _ref2;
   return text;
 }));
-
 const itemsValidator = items => isAllOptionsOrAllGroups(items) && hasUniqueValues(items) && hasUniqueGroups(items);
 
 export { flattenedOptions, isOption, itemsValidator };

package/dist/components/base/paginated_list/paginated_list.js

@@ -48,28 +48,23 @@ var script = {
       default: 'Sorry, your filter produced no results.'
     }
   },
-
   data() {
     return {
       pageIndex: this.page,
       queryStr: ''
     };
   },
-
   computed: {
     filteredList() {
       if (typeof this.filter === 'function') {
         return this.list.filter(listItem => this.filter(listItem, this.queryStr));
       }
-
       return this.list.filter(listItem => listItem[this.filter].toLowerCase().includes(this.queryStr.toLowerCase()));
     },
-
     paginatedList() {
       const offset = (this.pageIndex - 1) * this.perPage;
       return this.filteredList.slice(offset, offset + this.perPage);
     },
-
     pageInfo() {
       return {
         perPage: this.perPage,
@@ -77,15 +72,12 @@ var script = {
         page: this.pageIndex
       };
     },
-
     total() {
       return this.list.length;
     },
-
     filterTotal() {
       return this.filteredList.length;
     },
-
     /**
      * Determine if the original list had 0 items
      *
@@ -95,7 +87,6 @@ var script = {
     zeroTotal() {
       return this.total === 0;
     },
-
     /**
      * Determine if our search yields an empty list
      *
@@ -105,7 +96,6 @@ var script = {
     zeroSearchResults() {
       return this.total > 0 && this.filterTotal === 0;
     },
-
     /**
      * Determine if we originally had 0 results or 0 search results
      *
@@ -115,7 +105,6 @@ var script = {
     emptyList() {
       return this.zeroTotal || this.zeroSearchResults;
     }
-
   },
   watch: {
     /**
@@ -129,7 +118,6 @@ var script = {
     page(newPage) {
       this.pageIndex = newPage;
     },
-
     /**
      * In GitLab UI storybook, when a user changes the perPage knob,
      * we reset the paginated list to the first page.
@@ -140,18 +128,15 @@ var script = {
     perPage() {
       this.pageIndex = 1;
     }
-
   },
   methods: {
     change(page) {
       this.pageIndex = page;
     },
-
     query(queryStr) {
       this.pageIndex = 1;
       this.queryStr = queryStr;
     }
-
   }
 };