@gitlab/ui 72.12.0 → 72.12.1

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

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

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

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

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

@@ -0,0 +1,111 @@
+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__;