@gitlab/ui 72.11.1 → 72.12.0

package/dist/components/base/infinite_scroll/infinite_scroll.js

@@ -1,197 +0,0 @@
-import throttle from 'lodash/throttle';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-const throttleDuration = 1000;
-/**
- * After adding more items, scroll will adjust slightly.
- * Values in pixels, should be a small amount.
- */
-const adjustScrollGap = 5;
-const THRESHOLD = 1;
-var script = {
-  name: 'GlInfiniteScroll',
-  props: {
-    /**
-     * Total number of items available
-     */
-    totalItems: {
-      type: Number,
-      required: false,
-      default: 0
-    },
-    /**
-     * Numbers of items fetched before scrolling
-     */
-    fetchedItems: {
-      type: Number,
-      required: true
-    },
-    /**
-     * Max height of the list before the scrollbar appears
-     */
-    maxListHeight: {
-      type: Number,
-      required: false,
-      default: 0
-    }
-  },
-  computed: {
-    listHeight() {
-      return {
-        maxHeight: this.maxListHeight ? `${this.maxListHeight}px` : 'auto'
-      };
-    },
-    legendText() {
-      if (this.totalItems > 0) {
-        return `Showing ${this.fetchedItems} of ${this.totalItems} items`;
-      }
-      return `Showing ${this.fetchedItems} items`;
-    }
-  },
-  watch: {
-    fetchedItems(newVal, oldVal) {
-      // Re-adjust scroll to the current item if more items are added
-      if (newVal > oldVal) {
-        const {
-          scrollHeight,
-          scrollTop
-        } = this.$refs.infiniteContainer;
-        // Only when scrolled to the top
-        if (scrollHeight !== 0 && scrollTop === 0) {
-          // Wait until the DOM is fully updated to adjust scroll
-          this.$nextTick(() => {
-            const {
-              scrollHeight: newScrollHeight
-            } = this.$refs.infiniteContainer;
-
-            // New scrollTop is the new height, minus the old height
-            // minus a small space to allow the user to trigger a scroll once more
-            let top = newScrollHeight - scrollHeight - adjustScrollGap;
-
-            // Never adjust to 0, or a new event may be be triggered
-            if (top < 1) {
-              top = 1;
-            }
-            this.scrollTo({
-              top
-            });
-          });
-        }
-      }
-    }
-  },
-  mounted() {
-    // Scroll to bottom for reverse effect
-    this.$nextTick(() => {
-      if (this.$listeners.topReached && !this.$listeners.bottomReached) {
-        this.scrollDown();
-      }
-    });
-  },
-  methods: {
-    /**
-     * Scroll to the top of the container, leaving a gap
-     * to avoid triggering the event.
-     */
-    scrollUp() {
-      this.scrollTo({
-        top: adjustScrollGap
-      });
-    },
-    /**
-     * Scroll to the bottom of the container, leaving a gap
-     * to avoid triggering the event.
-     */
-    scrollDown() {
-      const {
-        scrollHeight
-      } = this.$refs.infiniteContainer;
-      this.scrollTo({
-        top: scrollHeight - adjustScrollGap
-      });
-    },
-    /**
-     * Scroll to a location in the container
-     *
-     * @param params.top - Number of pixels along Y axis to
-     * scroll the list container.
-     * @param params.behavior - Determines whether scrolling
-     * is instant or animates smoothly. Can be 'auto', 'instant', or 'smooth'
-     * See [MDN spec](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo)
-     */
-    scrollTo(_ref) {
-      let {
-        top,
-        behavior
-      } = _ref;
-      this.$refs.infiniteContainer.scrollTo({
-        top,
-        behavior
-      });
-    },
-    topReached: throttle(function topReachedThrottled() {
-      /**
-       * Emitted when item container is scrolled to the top
-       */
-      this.$emit('topReached');
-    }, throttleDuration),
-    bottomReached: throttle(function bottomReachedThrottled() {
-      /**
-       * Emitted when item container is scrolled to the bottom
-       */
-      this.$emit('bottomReached');
-    }, throttleDuration),
-    itemsListHeight() {
-      return this.$refs.infiniteContainer.scrollHeight;
-    },
-    scrollTop() {
-      return this.$refs.infiniteContainer.scrollTop;
-    },
-    handleScroll: throttle(function handleScrollThrottled() {
-      if (Math.abs(this.itemsListHeight() - this.maxListHeight - this.scrollTop()) < THRESHOLD) {
-        this.bottomReached();
-      } else if (this.scrollTop() <= THRESHOLD) {
-        this.topReached();
-      }
-    })
-  }
-};
-
-/* 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',[_vm._t("header"),_vm._v(" "),_c('div',_vm._g(_vm._b({ref:"infiniteContainer",staticClass:"gl-infinite-scroll-container",style:(_vm.listHeight),on:{"scroll":_vm.handleScroll}},'div',_vm.$attrs,false),_vm.$listeners),[_vm._t("items")],2),_vm._v(" "),_c('p',{staticClass:"gl-infinite-scroll-legend"},[_vm._t("default",function(){return [_vm._v("\n      "+_vm._s(_vm.legendText)+"\n    ")]},{"fetchedItems":_vm.fetchedItems,"totalItems":_vm.totalItems})],2)],2)};
-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__ = __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 default __vue_component__;
-export { adjustScrollGap };

package/dist/components/base/keyset_pagination/keyset_pagination.js

@@ -1,151 +0,0 @@
-import GlButton from '../button/button';
-import GlButtonGroup from '../button_group/button_group';
-import GlIcon from '../icon/icon';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  name: 'GlKeysetPagination',
-  components: {
-    GlButtonGroup,
-    GlButton,
-    GlIcon
-  },
-  inheritAttrs: false,
-  props: {
-    // The following 4 properties match the default names of the
-    // [PageInfo](https://docs.gitlab.com/ee/api/graphql/reference/index.html#pageinfo)
-    // GraphQL type, allowing the returned `pageInfo` object to
-    // be bound directly to this component:
-    // `<gl-keyset-pagination v-bind="pageInfo">`
-    /**
-     * Whether or not the "Prev" button should be enabled
-     */
-    hasPreviousPage: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    /**
-     * Whether or not the "Next" button should be enabled
-     */
-    hasNextPage: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    /**
-     * A cursor that points to the first item in the current page.
-     * Will be passed as an event parameter when the "prev" event is fired.
-     */
-    startCursor: {
-      type: String,
-      required: false,
-      default: null
-    },
-    /**
-     * A cursor that points to the last item in the current page.
-     * Will be passed as an event parameter when the "next" event is fired.
-     */
-    endCursor: {
-      type: String,
-      required: false,
-      default: null
-    },
-    /**
-     * The text that will be rendered inside the "Prev" button.
-     * It\'s important to provide this parameter since the default text is not translatable.
-     */
-    prevText: {
-      type: String,
-      required: false,
-      default: 'Prev'
-    },
-    /**
-     * A link that will be used as the "Prev" button\'s "href" attribute.
-     * If provided, the "Prev" button renders as a link button; otherwise, it is rendered as a regular button.
-     */
-    prevButtonLink: {
-      type: String,
-      required: false,
-      default: null
-    },
-    /**
-     * The aria-label that needs to be set for the
-     * pagination landmark region.
-     */
-    navigationLabel: {
-      type: String,
-      required: false,
-      default: 'Pagination'
-    },
-    /**
-     * The text that will be rendered inside the "Next" button.
-     * It\'s important to provide this parameter since the default text is not translatable.
-     */
-    nextText: {
-      type: String,
-      required: false,
-      default: 'Next'
-    },
-    /**
-     * A link that will be used as the "Next" button\'s "href" attribute.
-     * If provided, the "Next" button renders as a link button; otherwise, it is rendered as a regular button.
-     */
-    nextButtonLink: {
-      type: String,
-      required: false,
-      default: null
-    },
-    /**
-     * Whether or not both buttons should be disabled (regardless of the "hasPreviousPage" and "hasNextPage" values).
-     */
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
-  },
-  computed: {
-    isVisible() {
-      return this.hasPreviousPage || this.hasNextPage;
-    }
-  }
-};
-
-/* 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.navigationLabel}},[_c('gl-button-group',_vm._g(_vm._b({staticClass:"gl-keyset-pagination"},'gl-button-group',_vm.$attrs,false),_vm.$listeners),[_c('gl-button',{attrs:{"href":_vm.prevButtonLink,"disabled":_vm.disabled || !_vm.hasPreviousPage,"data-testid":"prevButton"},on:{"click":function($event){return _vm.$emit('prev', _vm.startCursor)}}},[_vm._t("previous-button-content",function(){return [_c('div',{staticClass:"gl-display-flex gl-align-center"},[_c('gl-icon',{attrs:{"name":"chevron-left"}}),_vm._v("\n          "+_vm._s(_vm.prevText)+"\n        ")],1)]})],2),_vm._v(" "),_c('gl-button',{attrs:{"href":_vm.nextButtonLink,"disabled":_vm.disabled || !_vm.hasNextPage,"data-testid":"nextButton"},on:{"click":function($event){return _vm.$emit('next', _vm.endCursor)}}},[_vm._t("next-button-content",function(){return [_c('div',{staticClass:"gl-display-flex gl-align-center"},[_vm._v("\n          "+_vm._s(_vm.nextText)+"\n          "),_c('gl-icon',{attrs:{"name":"chevron-right"}})],1)]})],2)],1)],1):_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__ = __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 default __vue_component__;

package/dist/components/base/label/label.js

@@ -1,163 +0,0 @@
-import { labelColorOptions } from '../../../utils/constants';
-import { colorFromBackground } from '../../../utils/utils';
-import CloseButton from '../../shared_components/close_button/close_button';
-import GlLink from '../link/link';
-import GlTooltip from '../tooltip/tooltip';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-//
-var script = {
-  name: 'GlLabel',
-  components: {
-    GlLink,
-    GlTooltip,
-    CloseButton
-  },
-  props: {
-    backgroundColor: {
-      type: String,
-      required: true,
-      validator: value => /^(#|rgb|rgba)/.test(value)
-    },
-    title: {
-      type: String,
-      required: true,
-      default: ''
-    },
-    description: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    size: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    tooltipPlacement: {
-      type: String,
-      required: false,
-      default: 'top'
-    },
-    target: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    scoped: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    showCloseButton: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
-  },
-  data() {
-    return {
-      splitScopedLabelIndex: this.title.lastIndexOf('::')
-    };
-  },
-  computed: {
-    cssClasses() {
-      const textColorVariant = colorFromBackground(this.backgroundColor);
-      return {
-        'gl-label-sm': this.size === 'sm',
-        'gl-label-scoped': this.scoped,
-        'gl-label-text-dark': textColorVariant === labelColorOptions.dark,
-        'gl-label-text-light': textColorVariant === labelColorOptions.light
-      };
-    },
-    cssVariables() {
-      return {
-        '--label-background-color': this.backgroundColor,
-        '--label-inset-border': `inset 0 0 0 ${this.size === 'sm' ? '1px' : '2px'} ${this.backgroundColor}`
-      };
-    },
-    scopedKey() {
-      return this.scoped ? this.title.slice(0, this.splitScopedLabelIndex) : this.title;
-    },
-    scopedValue() {
-      return this.title.slice(this.splitScopedLabelIndex + 2);
-    },
-    closeIconSize() {
-      return this.size === 'sm' ? 12 : 16;
-    },
-    labelComponent() {
-      return this.target ? GlLink : 'span';
-    },
-    tooltipTarget() {
-      return this.target ? this.$refs.labelTitle.$el : this.$refs.labelTitle;
-    }
-  },
-  watch: {
-    title() {
-      this.splitScopedLabelIndex = this.title.lastIndexOf('::');
-    }
-  },
-  methods: {
-    onClick(e) {
-      /**
-       * Emitted when label is clicked
-       *
-       * @event click
-       * @type {object}
-       */
-      this.$emit('click', e);
-    },
-    onClose(e) {
-      /**
-       * Emitted when x is clicked
-       *
-       * @event close
-       * @type {object}
-       */
-      this.$emit('close', e);
-    }
-  }
-};
-
-/* 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('span',_vm._b({staticClass:"gl-label",class:_vm.cssClasses,style:(_vm.cssVariables),on:{"click":_vm.onClick}},'span',_vm.$attrs,false),[_c(_vm.labelComponent,{ref:"labelTitle",tag:"component",staticClass:"gl-label-link",attrs:{"href":_vm.target ? _vm.target : false,"tabindex":"0"}},[_c('span',{staticClass:"gl-label-text"},[_vm._v("\n      "+_vm._s(_vm.scopedKey)+"\n    ")]),_vm._v(" "),(_vm.scoped && _vm.scopedValue)?_c('span',{staticClass:"gl-label-text-scoped"},[_vm._v("\n      "+_vm._s(_vm.scopedValue)+"\n    ")]):_vm._e()]),_vm._v(" "),(_vm.showCloseButton)?_c('close-button',{staticClass:"gl-label-close gl-p-0!",attrs:{"label":"Remove label","variant":"reset","disabled":_vm.disabled},on:{"click":_vm.onClose}}):_vm._e(),_vm._v(" "),(_vm.description)?_c('gl-tooltip',{attrs:{"target":function () { return _vm.tooltipTarget; },"placement":_vm.tooltipPlacement,"boundary":"viewport"}},[(_vm.scoped)?_c('span',{staticClass:"gl-label-tooltip-title"},[_vm._v("Scoped label")]):_vm._e(),_vm._v("\n    "+_vm._s(_vm.description)+"\n  ")]):_vm._e()],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__ = __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 default __vue_component__;

package/dist/components/base/link/link.js

@@ -1,50 +0,0 @@
-import { BLink } from 'bootstrap-vue/esm/index.js';
-import { SafeLinkMixin } from '../../mixins/safe_link_mixin';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-//
-var script = {
-  name: 'GlLink',
-  components: {
-    BLink
-  },
-  mixins: [SafeLinkMixin]
-};
-
-/* 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('b-link',_vm._g(_vm._b({directives:[{name:"safe-link",rawName:"v-safe-link:[safeLinkConfig]",arg:_vm.safeLinkConfig}],staticClass:"gl-link",attrs:{"target":_vm.target}},'b-link',_vm.$attrs,false),_vm.$listeners),[_vm._t("default")],2)};
-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__ = __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 default __vue_component__;

package/dist/components/base/loading_icon/loading_icon.js

@@ -1,111 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-const sizes = ['sm',
-// -> 16px
-'md',
-// -> 24px
-'lg',
-// -> 32px
-'xl' // -> 64px
-];
-const colors = {
-  dark: 'dark',
-  light: 'light'
-};
-const defaultColor = colors.dark;
-var script = {
-  name: 'GlLoadingIcon',
-  props: {
-    /**
-     * Aria-label.
-     */
-    label: {
-      type: String,
-      required: false,
-      default: 'Loading'
-    },
-    size: {
-      type: String,
-      required: false,
-      default: 'sm',
-      validator(value) {
-        return sizes.indexOf(value) !== -1;
-      }
-    },
-    color: {
-      type: String,
-      required: false,
-      default: defaultColor,
-      validator(value) {
-        return Object.keys(colors).includes(value);
-      }
-    },
-    variant: {
-      type: String,
-      required: false,
-      default: 'spinner',
-      validator(value) {
-        return ['spinner', 'dots'].includes(value);
-      }
-    },
-    /**
-     * Wrap in a span or div.
-     */
-    inline: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
-  },
-  computed: {
-    rootElementType() {
-      return this.inline ? 'span' : 'div';
-    },
-    spinnerCssClasses() {
-      const baseCssClass = 'gl-spinner';
-      return [baseCssClass, `${baseCssClass}-${colors[this.color]}`, `${baseCssClass}-${this.size}`];
-    },
-    dotsCssClasses() {
-      const baseCssClass = 'gl-dots-loader';
-      return [baseCssClass, `${baseCssClass}-${colors[this.color]}`, `${baseCssClass}-${this.size}`];
-    }
-  }
-};
-
-/* 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.variant === 'spinner')?_c(_vm.rootElementType,{tag:"component",staticClass:"gl-spinner-container",attrs:{"aria-label":_vm.label,"role":"status"}},[_c('span',{staticClass:"gl-vertical-align-text-bottom!",class:_vm.spinnerCssClasses})]):_c(_vm.rootElementType,{tag:"component",class:_vm.dotsCssClasses,attrs:{"role":"status","aria-label":_vm.label}},[_c('span')])};
-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__ = __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 default __vue_component__;