@gitlab/ui 131.3.0 → 131.3.2

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

@@ -1,397 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,177 +0,0 @@
-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 };