@gitlab/ui 132.0.1 → 132.0.2

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

@@ -0,0 +1,397 @@
+import { isFunction, debounce, range } from 'lodash-es';
+import { breakpoints, GlBreakpointInstance } from '../../../utils/breakpoints';
+import { alignOptions, resizeDebounceTime } from '../../../utils/constants';
+import { translate, sprintf } from '../../../utils/i18n';
+import GlIcon from '../icon/icon';
+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: 'GlPagination',
+  components: {
+    GlLink,
+    GlIcon
+  },
+  model: {
+    prop: 'value',
+    event: 'input'
+  },
+  props: {
+    /**
+     * The current page number. Must be greater than 0.
+     */
+    value: {
+      type: Number,
+      required: false,
+      default: 1,
+      validator: x => x > 0
+    },
+    /**
+     * Number of items per page
+     */
+    perPage: {
+      type: Number,
+      required: false,
+      default: 20,
+      validator: x => x > 0
+    },
+    /**
+     * Total number of items
+     */
+    totalItems: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    /**
+     * The object must contain the xs, sm, md and default keys
+     */
+    limits: {
+      type: Object,
+      required: false,
+      default: () => ({
+        xs: 0,
+        sm: 3,
+        md: 9,
+        default: 9
+      }),
+      validator: value => {
+        const missingSizes = Object.keys(breakpoints).filter(size => !value[size]).length;
+        return missingSizes === 0 ? true : value.default;
+      }
+    },
+    /**
+     * A function that receives the page number and that returns a string representing the page URL
+     */
+    linkGen: {
+      type: Function,
+      required: false,
+      default: null
+    },
+    /**
+     * When using the compact pagination, use this prop to pass the previous page number
+     */
+    prevPage: {
+      type: Number,
+      required: false,
+      default: null
+    },
+    /**
+     * When using the compact pagination, use this prop to pass the next page number
+     */
+    nextPage: {
+      type: Number,
+      required: false,
+      default: null
+    },
+    /**
+     * Text for the ellipsis (overridden by "ellipsis-left" and "ellipsis-right" slots)
+     */
+    ellipsisText: {
+      type: String,
+      required: false,
+      default: '…'
+    },
+    /**
+     * aria-label for the nav
+     */
+    labelNav: {
+      type: String,
+      required: false,
+      default: translate('GlPagination.nav', 'Pagination')
+    },
+    /**
+     * aria-label for the first page item
+     */
+    labelFirstPage: {
+      type: String,
+      required: false,
+      default: translate('GlPagination.labelFirstPage', 'Go to first page')
+    },
+    /**
+     * aria-label for the previous page item
+     */
+    labelPrevPage: {
+      type: String,
+      required: false,
+      default: translate('GlPagination.labelPrevPage', 'Go to previous page')
+    },
+    /**
+     * aria-label for the next page item
+     */
+    labelNextPage: {
+      type: String,
+      required: false,
+      default: translate('GlPagination.labelNextPage', 'Go to next page')
+    },
+    /**
+     * aria-label for the last page item
+     */
+    labelLastPage: {
+      type: String,
+      required: false,
+      default: translate('GlPagination.labelLastPage', 'Go to last page')
+    },
+    /**
+     * aria-label getter for numbered page items, defaults to "Go to page <page_number>"
+     */
+    labelPage: {
+      // note: `Function` support is for legacy reasons
+      type: [Function, String],
+      required: false,
+      default: translate('GlPagination.labelPage', 'Go to page %{page}')
+    },
+    /**
+     * Controls the component\'s horizontal alignment, value should be one of "left", "center", "right" or "fill"
+     */
+    align: {
+      type: String,
+      required: false,
+      default: alignOptions.left,
+      validator: value => Object.keys(alignOptions).includes(value)
+    }
+  },
+  data() {
+    return {
+      breakpoint: GlBreakpointInstance.getBreakpointSize(),
+      // If total pages count is below or equal to minTotalPagesToCollapse, collapsing is disabled
+      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('gl-justify-center');
+      }
+      if (this.align === alignOptions.right) {
+        classes.push('gl-justify-end');
+      }
+      if (this.isFillAlign) {
+        classes.push('gl-text-center');
+      }
+      return classes;
+    },
+    shouldCollapseLeftSide() {
+      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
+        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
+        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.labelForPage(this.value - 1);
+    },
+    nextPageAriaLabel() {
+      return this.nextPageIsDisabled ? false : this.labelNextPage || this.labelForPage(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() {
+    this.resizeDebounced = debounce(this.setBreakpoint, resizeDebounceTime);
+    window.addEventListener('resize', this.resizeDebounced);
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.resizeDebounced);
+  },
+  methods: {
+    labelForPage(page) {
+      if (isFunction(this.labelPage)) {
+        return this.labelPage(page);
+      }
+      return sprintf(this.labelPage, {
+        page
+      });
+    },
+    setBreakpoint() {
+      this.breakpoint = GlBreakpointInstance.getBreakpointSize();
+    },
+    pageIsDisabled(page) {
+      return 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 = {
+        'aria-label': label || this.labelForPage(page),
+        href: '#',
+        class: []
+      };
+      const isActivePage = page === this.value;
+      const isDisabled = this.pageIsDisabled(page);
+      const attrs = {
+        ...commonAttrs
+      };
+      const listeners = {};
+      if (isActivePage) {
+        attrs.class.push('active');
+        attrs['aria-current'] = 'page';
+      }
+      // 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,
+        disabled: isDisabled,
+        key: `page_${page}`,
+        slot: 'page-number',
+        slotData: {
+          page,
+          active: isActivePage,
+          disabled: isDisabled
+        },
+        attrs,
+        listeners
+      };
+    },
+    getEllipsisItem(side) {
+      return {
+        content: this.ellipsisText,
+        key: `ellipsis_${side}`,
+        slot: `ellipsis-${side}`,
+        component: 'span',
+        disabled: true,
+        slotData: {},
+        listeners: {}
+      };
+    },
+    handleClick(event, value) {
+      if (!this.isLinkBased) {
+        event.preventDefault();
+        /**
+         * Emitted when the page changes
+         * @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');
+    }
+  }
+};
+
+/* 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.isVisible)?_c('nav',{staticClass:"gl-pagination",attrs:{"aria-label":_vm.labelNav}},[_c('ul',{class:_vm.wrapperClasses},[_c('li',{class:{
+        disabled: _vm.prevPageIsDisabled,
+        'gl-flex-auto': _vm.isFillAlign,
+      },attrs:{"aria-hidden":_vm.prevPageIsDisabled,"data-testid":"gl-pagination-li"}},[_c(_vm.prevPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-pagination-item",attrs:{"data-testid":"gl-pagination-prev","aria-label":_vm.prevPageAriaLabel,"href":_vm.prevPageHref},on:{"click":function($event){!_vm.prevPageIsDisabled ? _vm.handlePrevious($event, _vm.value - 1) : null;}}},[_vm._t("previous",function(){return [_c('gl-icon',{attrs:{"name":"chevron-lg-left"}})]},null,{ page: _vm.value - 1, disabled: _vm.prevPageIsDisabled })],2)],1),_vm._v(" "),_vm._l((_vm.visibleItems),function(item){return _c('li',{key:item.key,class:{
+        disabled: item.disabled,
+        'gl-flex-auto': _vm.isFillAlign,
+      },attrs:{"data-testid":"gl-pagination-li"}},[_c(item.component,_vm._g(_vm._b({tag:"component",staticClass:"gl-pagination-item",attrs:{"data-testid":"gl-pagination-item","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',{class:{
+        disabled: _vm.nextPageIsDisabled,
+        'gl-flex-auto': _vm.isFillAlign,
+      },attrs:{"aria-hidden":_vm.nextPageIsDisabled,"data-testid":"gl-pagination-li"}},[_c(_vm.nextPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-pagination-item",attrs:{"data-testid":"gl-pagination-next","aria-label":_vm.nextPageAriaLabel,"href":_vm.nextPageHref},on:{"click":function($event){!_vm.nextPageIsDisabled ? _vm.handleNext($event, _vm.value + 1) : null;}}},[_vm._t("next",function(){return [_c('gl-icon',{attrs:{"name":"chevron-lg-right"}})]},null,{ page: _vm.value + 1, disabled: _vm.nextPageIsDisabled })],2)],1)],2)]):_vm._e()};
+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/path/data.js

@@ -0,0 +1,34 @@
+const mockPathItems = () => [{
+  title: 'First',
+  metric: '1d'
+}, {
+  title: 'Second',
+  metric: '2d'
+}, {
+  title: 'Third',
+  metric: '3d'
+}, {
+  title: 'Fourth',
+  metric: '4d'
+}, {
+  title: 'Fifth',
+  metric: '5d'
+}, {
+  title: 'Sixth',
+  metric: '6d'
+}, {
+  title: 'Seventh',
+  metric: '7d'
+}, {
+  title: 'Eighth',
+  metric: '8d',
+  disabled: true
+}, {
+  title: 'Ninth',
+  metric: '9d'
+}, {
+  title: 'Tenth',
+  metric: '10d'
+}];
+
+export { mockPathItems };

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

@@ -0,0 +1,177 @@
+import iconSpriteInfo from '@gitlab/svgs/dist/icons.json';
+import { uniqueId, findLast } from 'lodash-es';
+import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
+import GlIcon from '../icon/icon';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const BOUNDARY_WIDTH = 40;
+const PATH_ITEM_CLASS = 'gl-path-button';
+const PATH_ACTIVE_ITEM_CLASS = 'gl-path-active-item';
+var script = {
+  name: 'GlPath',
+  components: {
+    GlIcon
+  },
+  directives: {
+    GlResizeObserverDirective
+  },
+  props: {
+    /**
+     * A list of path items in the form:
+     * ```
+     * {
+     *   title:    String, required
+     *   metric:   Any, optional
+     *   icon:     String, optional
+     *   disabled: Boolean, optional
+     * }
+     * ```
+     */
+    items: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    /**
+     * The items' background color.
+     */
+    backgroundColor: {
+      type: String,
+      required: false,
+      default: 'rgba(0,0,0,0)'
+    }
+  },
+  data() {
+    return {
+      selectedIndex: 0,
+      width: 0,
+      scrollLeft: 0
+    };
+  },
+  computed: {
+    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} ${PATH_ACTIVE_ITEM_CLASS}` : 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: {
+          width
+        }
+      } = _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,
+        behavior: 'smooth'
+      });
+      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}`;
+    },
+    getAriaCurrentAttr(index) {
+      return index === this.selectedIndex;
+    }
+  }
+};
+
+/* 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',{directives:[{name:"gl-resize-observer-directive",rawName:"v-gl-resize-observer-directive",value:(_vm.handleResize),expression:"handleResize"}],staticClass:"gl-path-nav",style:({ '--path-bg-color': _vm.backgroundColor }),attrs:{"data-testid":"gl-path-nav"}},[_c('span',{directives:[{name:"show",rawName:"v-show",value:(_vm.displayScrollLeft),expression:"displayScrollLeft"}],staticClass:"gl-path-fade gl-path-fade-left"},[_c('button',{staticClass:"gl-clear-icon-button",attrs:{"aria-label":"Scroll left"},on:{"click":_vm.scrollPathLeft}},[_c('gl-icon',{attrs:{"size":32,"name":"chevron-left"}})],1)]),_vm._v(" "),_c('ul',{ref:"pathNavList",staticClass:"gl-path-nav-list"},_vm._l((_vm.items),function(item,index){return _c('li',{key:index,ref:"pathListItems",refInFor:true,staticClass:"gl-path-nav-list-item"},[_c('button',{class:_vm.pathItemClass(index),attrs:{"id":_vm.pathId(index),"aria-current":_vm.getAriaCurrentAttr(index),"category":item.disabled ? 'tertiary' : undefined,"disabled":item.disabled},on:{"click":function($event){return _vm.onItemClicked(index)}}},[(_vm.shouldDisplayIcon(item.icon))?_c('gl-icon',{staticClass:"gl-mr-2",attrs:{"name":item.icon,"data-testid":"gl-path-item-icon"}}):_vm._e(),_vm._v(_vm._s(item.title)),(item.metric)?_c('span',{staticClass:"gl-pl-2 gl-font-normal"},[_vm._v(_vm._s(item.metric))]):_vm._e()],1),_vm._v(" "),_vm._t("default",null,{"pathItem":item,"pathId":_vm.pathId(index)})],2)}),0),_vm._v(" "),_c('span',{directives:[{name:"show",rawName:"v-show",value:(_vm.displayScrollRight),expression:"displayScrollRight"}],staticClass:"gl-path-fade gl-path-fade-right"},[_c('button',{staticClass:"gl-clear-icon-button",attrs:{"aria-label":"Scroll right"},on:{"click":_vm.scrollPathRight}},[_c('gl-icon',{attrs:{"size":32,"name":"chevron-right"}})],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 };