@gitlab/ui 49.0.0 → 49.0.2

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

package/dist/components/base/pagination/pagination.js

@@ -8,9 +8,7 @@ import GlLink from '../link/link';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 //
-
 const pageRange = (from, to) => range(from, to + 1, 1);
-
 var script = {
   name: 'Pagination',
   components: {
@@ -28,7 +26,6 @@ var script = {
       default: 1,
       validator: x => x > 0
     },
-
     /**
      * Number of items per page
      */
@@ -38,7 +35,6 @@ var script = {
       default: 20,
       validator: x => x > 0
     },
-
     /**
      * Total number of items
      */
@@ -47,7 +43,6 @@ var script = {
       required: false,
       default: 0
     },
-
     /**
      * The object must contain the xs, sm, md and default keys
      */
@@ -65,7 +60,6 @@ var script = {
         return missingSizes === 0 ? true : value.default;
       }
     },
-
     /**
      * A function that receives the page number and that returns a string representing the page URL
      */
@@ -74,7 +68,6 @@ var script = {
       required: false,
       default: null
     },
-
     /**
      * When using the compact pagination, use this prop to pass the previous page number
      */
@@ -83,7 +76,6 @@ var script = {
       required: false,
       default: null
     },
-
     /**
      * Text for the previous button (overridden by "previous" slot)
      */
@@ -92,7 +84,6 @@ var script = {
       required: false,
       default: 'Previous'
     },
-
     /**
      * When using the compact pagination, use this prop to pass the next page number
      */
@@ -101,7 +92,6 @@ var script = {
       required: false,
       default: null
     },
-
     /**
      * Text for the next button (overridden by "next" slot)
      */
@@ -110,7 +100,6 @@ var script = {
       required: false,
       default: 'Next'
     },
-
     /**
      * Text for the ellipsis (overridden by "ellipsis-left" and "ellipsis-right" slots)
      */
@@ -119,7 +108,6 @@ var script = {
       required: false,
       default: '…'
     },
-
     /**
      * aria-label for the first page item
      */
@@ -128,7 +116,6 @@ var script = {
       required: false,
       default: 'Go to first page'
     },
-
     /**
      * aria-label for the previous page item
      */
@@ -137,7 +124,6 @@ var script = {
       required: false,
       default: 'Go to previous page'
     },
-
     /**
      * aria-label for the next page item
      */
@@ -146,7 +132,6 @@ var script = {
       required: false,
       default: 'Go to next page'
     },
-
     /**
      * aria-label for the last page item
      */
@@ -155,7 +140,6 @@ var script = {
       required: false,
       default: 'Go to last page'
     },
-
     /**
      * aria-label getter for numbered page items, defaults to "Go to page <page_number>"
      */
@@ -164,7 +148,6 @@ var script = {
       required: false,
       default: page => `Go to page ${page}`
     },
-
     /**
      * Controls the component\'s horizontal alignment, value should be one of "left", "center", "right" or "fill"
      */
@@ -180,7 +163,6 @@ var script = {
       default: false
     }
   },
-
   data() {
     return {
       breakpoint: Breakpoints.getBreakpointSize(),
@@ -188,138 +170,109 @@ var script = {
       minTotalPagesToCollapse: 4
     };
   },
-
   computed: {
     isVisible() {
       return this.totalPages > 1 || this.isCompactPagination;
     },
-
     isLinkBased() {
       return isFunction(this.linkGen);
     },
-
     paginationLimit() {
       return typeof this.limits[this.breakpoint] !== 'undefined' ? this.limits[this.breakpoint] : this.limits.default;
     },
-
     maxAdjacentPages() {
       return Math.max(Math.ceil((this.paginationLimit - 1) / 2), 0);
     },
-
     totalPages() {
       return Math.ceil(this.totalItems / this.perPage);
     },
-
     isFillAlign() {
       return this.align === alignOptions.fill;
     },
-
     wrapperClasses() {
       const classes = [];
-
       if (this.align === alignOptions.center) {
         classes.push('justify-content-center');
       }
-
       if (this.align === alignOptions.right) {
         classes.push('justify-content-end');
       }
-
       if (this.isFillAlign) {
         classes.push('text-center');
       }
-
       return classes;
     },
-
     shouldCollapseLeftSide() {
-      const diff = this.value - this.maxAdjacentPages; // Magic 3: prevents collapsing a single page on the left side
+      const diff = this.value - this.maxAdjacentPages;
 
+      // Magic 3: prevents collapsing a single page on the left side
       return diff >= this.maxAdjacentPages && diff > 3 && this.totalPages > this.minTotalPagesToCollapse;
     },
-
     shouldCollapseRightSide() {
       // Magic 2: prevents collapsing a single page on the right side
       const diff = this.totalPages - 2 - this.value;
       return diff > this.maxAdjacentPages && this.totalPages > this.minTotalPagesToCollapse;
     },
-
     visibleItems() {
       let items = [];
-
       if (!this.isCompactPagination) {
-        let firstPage = this.shouldCollapseLeftSide ? this.value - this.maxAdjacentPages : 1; // If we're on last page, show at least one page to the left
-
+        let firstPage = this.shouldCollapseLeftSide ? this.value - this.maxAdjacentPages : 1;
+        // If we're on last page, show at least one page to the left
         firstPage = Math.min(firstPage, this.totalPages - 1);
-        let lastPage = this.shouldCollapseRightSide ? this.value + this.maxAdjacentPages : this.totalPages; // If we're on first page, show at least one page to the right
-
-        lastPage = Math.max(lastPage, 2); // Default numbered items
+        let lastPage = this.shouldCollapseRightSide ? this.value + this.maxAdjacentPages : this.totalPages;
+        // If we're on first page, show at least one page to the right
+        lastPage = Math.max(lastPage, 2);
 
+        // Default numbered items
         items = pageRange(firstPage, lastPage).map(page => this.getPageItem(page));
-
         if (this.shouldCollapseLeftSide) {
           items.splice(0, 0, this.getPageItem(1, this.labelFirstPage), this.getEllipsisItem('left'));
         }
-
         if (this.shouldCollapseRightSide) {
           items.push(this.getEllipsisItem('right'), this.getPageItem(this.totalPages, this.labelLastPage));
         }
       }
-
       return items;
     },
-
     isCompactPagination() {
       return Boolean(!this.totalItems && (this.prevPage || this.nextPage));
     },
-
     prevPageIsDisabled() {
       return this.pageIsDisabled(this.value - 1);
     },
-
     nextPageIsDisabled() {
       return this.pageIsDisabled(this.value + 1);
     },
-
     prevPageAriaLabel() {
       return this.prevPageIsDisabled ? false : this.labelPrevPage || this.labelPage(this.value - 1);
     },
-
     nextPageAriaLabel() {
       return this.nextPageIsDisabled ? false : this.labelNextPage || this.labelPage(this.value + 1);
     },
-
     prevPageHref() {
       if (this.prevPageIsDisabled) return false;
       if (this.isLinkBased) return this.linkGen(this.value - 1);
       return '#';
     },
-
     nextPageHref() {
       if (this.nextPageIsDisabled) return false;
       if (this.isLinkBased) return this.linkGen(this.value + 1);
       return '#';
     }
-
   },
-
   created() {
     window.addEventListener('resize', debounce(this.setBreakpoint, resizeDebounceTime));
   },
-
   beforeDestroy() {
     window.removeEventListener('resize', debounce(this.setBreakpoint, resizeDebounceTime));
   },
-
   methods: {
     setBreakpoint() {
       this.breakpoint = Breakpoints.getBreakpointSize();
     },
-
     pageIsDisabled(page) {
       return this.disabled || page < 1 || this.isCompactPagination && page > this.value && !this.nextPage || !this.isCompactPagination && page > this.totalPages;
     },
-
     getPageItem(page) {
       let label = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
       const commonAttrs = {
@@ -329,22 +282,19 @@ var script = {
       };
       const isActivePage = page === this.value;
       const isDisabled = this.pageIsDisabled(page);
-      const attrs = { ...commonAttrs
+      const attrs = {
+        ...commonAttrs
       };
       const listeners = {};
-
       if (isActivePage) {
         attrs.class.push('active');
         attrs['aria-current'] = 'page';
-      } // Disable previous and/or next buttons if needed
-
-
+      }
+      // Disable previous and/or next buttons if needed
       if (this.isLinkBased) {
         attrs.href = this.linkGen(page);
       }
-
       listeners.click = e => this.handleClick(e, page);
-
       return {
         content: page,
         component: isDisabled ? 'span' : GlLink,
@@ -360,7 +310,6 @@ var script = {
         listeners
       };
     },
-
     getEllipsisItem(side) {
       return {
         content: this.ellipsisText,
@@ -372,7 +321,6 @@ var script = {
         listeners: {}
       };
     },
-
     handleClick(event, value) {
       if (!this.isLinkBased) {
         event.preventDefault();
@@ -381,31 +329,25 @@ var script = {
          * @event input
          * @arg {number} value The page that just got loaded
          */
-
         this.$emit('input', value);
       }
     },
-
     handlePrevious(event, value) {
       this.handleClick(event, value);
       /**
        * Emitted when the "previous" button is clicked
        * @event previous
        */
-
       this.$emit('previous');
     },
-
     handleNext(event, value) {
       this.handleClick(event, value);
       /**
        * Emitted when the "next" button is clicked
        * @event next
        */
-
       this.$emit('next');
     }
-
   }
 };
 
@@ -413,7 +355,7 @@ var 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('nav',{attrs:{"aria-label":"Pagination"}},[(_vm.isVisible)?_c('ul',{staticClass:"pagination gl-pagination text-nowrap",class:_vm.wrapperClasses},[_c('li',{staticClass:"page-item",class:{
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.isVisible)?_c('nav',{staticClass:"gl-pagination text-nowrap",attrs:{"aria-label":"Pagination"}},[_c('ul',{staticClass:"pagination",class:_vm.wrapperClasses},[_c('li',{staticClass:"page-item",class:{
         disabled: _vm.prevPageIsDisabled,
         'flex-fill': _vm.isFillAlign,
       },attrs:{"aria-hidden":_vm.prevPageIsDisabled}},[_c(_vm.prevPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-link page-link prev-page-item gl-display-flex",attrs:{"aria-label":_vm.prevPageAriaLabel,"href":_vm.prevPageHref},on:{"click":function($event){return _vm.handlePrevious($event, _vm.value - 1)}}},[_vm._t("previous",function(){return [_c('gl-icon',{attrs:{"name":"chevron-left"}}),_vm._v(" "),_c('span',[_vm._v(_vm._s(_vm.prevText))])]},null,{ page: _vm.value - 1, disabled: _vm.prevPageIsDisabled })],2)],1),_vm._v(" "),_vm._l((_vm.visibleItems),function(item){return _c('li',{key:item.key,staticClass:"page-item",class:{
@@ -422,7 +364,7 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
       }},[_c(item.component,_vm._g(_vm._b({tag:"component",staticClass:"page-link",attrs:{"size":"md","aria-disabled":item.disabled}},'component',item.attrs,false),item.listeners),[_vm._t(item.slot,function(){return [_vm._v(_vm._s(item.content))]},null,item.slotData)],2)],1)}),_vm._v(" "),_c('li',{staticClass:"page-item",class:{
         disabled: _vm.nextPageIsDisabled,
         'flex-fill': _vm.isFillAlign,
-      },attrs:{"aria-hidden":_vm.nextPageIsDisabled}},[_c(_vm.nextPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-link page-link next-page-item gl-display-flex",attrs:{"aria-label":_vm.nextPageAriaLabel,"href":_vm.nextPageHref},on:{"click":function($event){return _vm.handleNext($event, _vm.value + 1)}}},[_vm._t("next",function(){return [_c('span',[_vm._v(_vm._s(_vm.nextText))]),_vm._v(" "),_c('gl-icon',{attrs:{"name":"chevron-right"}})]},null,{ page: _vm.value + 1, disabled: _vm.nextPageIsDisabled })],2)],1)],2):_vm._e()])};
+      },attrs:{"aria-hidden":_vm.nextPageIsDisabled}},[_c(_vm.nextPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-link page-link next-page-item gl-display-flex",attrs:{"aria-label":_vm.nextPageAriaLabel,"href":_vm.nextPageHref},on:{"click":function($event){return _vm.handleNext($event, _vm.value + 1)}}},[_vm._t("next",function(){return [_c('span',[_vm._v(_vm._s(_vm.nextText))]),_vm._v(" "),_c('gl-icon',{attrs:{"name":"chevron-right"}})]},null,{ page: _vm.value + 1, disabled: _vm.nextPageIsDisabled })],2)],1)],2)]):_vm._e()};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/path/path.js

@@ -33,7 +33,6 @@ var script = {
       required: false,
       default: () => []
     },
-
     /**
      * The color theme to be used.
      */
@@ -43,7 +42,6 @@ var script = {
       default: 'indigo',
       validator: theme => glThemes.includes(theme)
     },
-
     /**
      * The items' background color.
      */
@@ -53,7 +51,6 @@ var script = {
       default: 'white'
     }
   },
-
   data() {
     return {
       selectedIndex: 0,
@@ -61,64 +58,50 @@ var script = {
       scrollLeft: 0
     };
   },
-
   computed: {
     activeClass() {
       return `${PATH_ACTIVE_ITEM_PREFIX}-${this.theme}`;
     },
-
     entireListVisible() {
       return this.width >= this.getScrollWidth();
     },
-
     displayScrollLeft() {
       return !this.entireListVisible && this.scrollLeft;
     },
-
     displayScrollRight() {
       const scrollOffset = this.getScrollWidth() - this.width;
       return !this.entireListVisible && scrollOffset !== this.scrollLeft;
     },
-
     rightHandBoundary() {
       return this.width - BOUNDARY_WIDTH + this.scrollLeft;
     },
-
     leftHandBoundary() {
       return this.scrollLeft + BOUNDARY_WIDTH;
     }
-
   },
   watch: {
     items: {
       immediate: true,
-
       handler(items) {
         const selectedIndex = items.findIndex(item => item.selected);
         this.selectedIndex = selectedIndex > 0 ? selectedIndex : 0;
       }
-
     }
   },
-
   beforeCreate() {
     this.pathUuid = _uniqueId('path-');
   },
-
   methods: {
     pathItemClass(index) {
       return index === this.selectedIndex ? `${PATH_ITEM_CLASS} ${this.activeClass}` : PATH_ITEM_CLASS;
     },
-
     onItemClicked(selectedIndex) {
       this.selectedIndex = selectedIndex;
       /**
        * Emitted when an item is selected.
        */
-
       this.$emit('selected', this.items[this.selectedIndex]);
     },
-
     handleResize(_ref) {
       let {
         contentRect: {
@@ -127,33 +110,25 @@ var script = {
       } = _ref;
       this.width = width;
     },
-
     scrollPathLeft() {
       const previousItemToScollTo = _findLast(this.$refs.pathListItems, listItem => {
         return listItem.offsetLeft < this.leftHandBoundary;
       });
-
       const availableWidth = this.width - previousItemToScollTo.offsetWidth - BOUNDARY_WIDTH - BOUNDARY_WIDTH;
       let scrollTo = previousItemToScollTo.offsetLeft - BOUNDARY_WIDTH - availableWidth;
-
       if (scrollTo < 0) {
         scrollTo = 0;
       }
-
       this.scrollPath(scrollTo);
     },
-
     scrollPathRight() {
       const nextItemToScollTo = this.$refs.pathListItems.find(listItem => listItem.offsetLeft + listItem.offsetWidth > this.rightHandBoundary);
       let scrollTo = nextItemToScollTo.offsetLeft - BOUNDARY_WIDTH;
-
       if (scrollTo > this.getScrollWidth() - this.width) {
         scrollTo = this.getScrollWidth() - this.width;
       }
-
       this.scrollPath(scrollTo);
     },
-
     scrollPath(scrollTo) {
       this.$refs.pathNavList.scrollTo({
         left: scrollTo,
@@ -161,19 +136,15 @@ var script = {
       });
       this.scrollLeft = scrollTo;
     },
-
     getScrollWidth() {
       return this.$refs.pathNavList ? this.$refs.pathNavList.scrollWidth : 0;
     },
-
     shouldDisplayIcon(icon) {
       return icon && iconSpriteInfo.icons.includes(icon);
     },
-
     pathId(index) {
       return `${this.pathUuid}-item-${index}`;
     }
-
   }
 };
 

package/dist/components/base/popover/popover.js

@@ -19,7 +19,6 @@ var script = {
       required: false,
       default: () => []
     },
-
     /**
      * Space-separated triggers for the popover.
      *
@@ -50,11 +49,9 @@ var script = {
     customClass() {
       return ['gl-popover', ...this.cssClasses].join(' ');
     },
-
     shouldShowTitle() {
       return this.$scopedSlots.title || this.title || this.showCloseButton;
     }
-
   },
   methods: {
     close(e) {
@@ -62,10 +59,8 @@ var script = {
       /**
        * Emitted when the close button is clicked (requires showCloseButton to be `true`).
        */
-
       this.$emit('close-button-clicked', e);
     }
-
   },
   popoverRefName
 };