@gitlab/ui 39.3.0 → 39.3.1

package/dist/components/base/form/form_input_group/form_input_group.documentation.js

@@ -1,8 +0,0 @@
-var description = "The `GlFormInputGroup` component allows one to build more advanced text\ninput fields than generic `GlFormInput` when one needs that flexibility.\nBasic usage of the component:\n\n```html\n<div>\n  <gl-form-input-group>\n    <template #prepend>\n      <!-- Content to prepend your text input field -->\n    </template>\n    <template #append>\n      <!-- Content to append your text input field -->\n    </template>\n  </gl-form-input-group>\n</div>\n```\n\nOne can use any other component (custom or `<gl-*>`) in both slots or\nnot to use the slots at all. In the latter, the component will fallback\nto simple `GlFormInput`.\n\n## Predefined options\n\nSometimes custom text input from the user isn't desired. Instead, the\nuser should pick one of the predefined options that will automatically\npopulate the input field. Typically, such cases will also include an\nactionable button (like **Copy**) put into the `append` slot.\n\nTo achieve this effect, the `GlFormInputGroup` component accepts an\narray of options in the form of `predefinedOptions` param. For example:\n\n```javascript\nconst optionValues = [\n  { name: 'Option #1', value: 'Option #1 is selected!' },\n  { name: 'Option #2', value: 'Option #2 is selected!' },\n];\n...\n<gl-form-input-group :predefined-options=\"optionValues\" />\n```\n\nThis will tell `GlFormInputGroup` to render a dropdown in the `prepend`\nslot with all of the supplied options' `name`s. When one of the options\nis selected, the input field is automatically populated with the\noption's `value`. Check the \"Examples\" section below for \"With\npredefined options\" example.\n\n### Pro tips\n\nRead some useful tips below about specific usage of the component.\n\n### Readonly input\n\nOften you want to make sure user doesn't mess up the predefined content\npasted into the input field. In this case, you can set `readonly`\nparam to `true`. You can play with `Readonly` knob on the right.\n\n### Preselect the text to copy\n\nIf you set the `readonly` param on the `GlFormInputGroup` component,\nusers will still be able to manually select the text and copy it.\nHowever, it's more user-friendly to preselect the text for the users if\nthey click anywhere in the input field. This can be achieved by setting\nthe `select-on-click` param to `true`. You can play with\n`Select text on click` knob on the right. Even better, try enabling\n`Readonly`, `Select text on click`, and `Switch to predefined input`\naltogether. And, probably, remove `Prepend text`. Or leave it. It's your\ncall. :)\n";
-
-var form_input_group_documentation = {
-  followsDesignSystem: false,
-  description
-};
-
-export default form_input_group_documentation;

package/dist/components/base/form/form_radio/form_radio.documentation.js

@@ -1,8 +0,0 @@
-var description = "`GlFormRadio` components can be used directly, or via a `GlFormRadioGroup`.\n\nBelow is an example which demonstrates the direct approach. For examples using\n`GlFormRadioGroup`, see the documentation for that component.\n\n```html\n<script>\n  export default {\n    data() {\n      return {\n        selected: 'yes',\n      };\n    },\n  };\n</script>\n\n<template>\n  <div>\n    <gl-form-radio v-model=\"selected\" value=\"yes\">Yes</gl-form-radio>\n    <gl-form-radio v-model=\"selected\" value=\"no\">No</gl-form-radio>\n  </div>\n</template>\n```\n";
-
-var form_radio_documentation = {
-  description,
-  followsDesignSystem: true
-};
-
-export default form_radio_documentation;

package/dist/components/base/form/form_radio_group/form_radio_group.documentation.js

@@ -1,8 +0,0 @@
-var description = "The `GlFormRadioGroup` component provides an alternative and sometimes more\ncompact way of setting up a group of `GlFormRadio` components.\n\n## Usage\n\n`GlFormRadioGroup` can be used in a few ways to build a group of `GlFormRadio`\ncomponents: implicitly, explicitly, or a mix of both.\n\nBelow is an example which demonstrates all three approaches, written such that\nall of them produce the same visual result.\n\n```html\n<script>\nexport default {\n  data() {\n    return {\n      selected: 'one',\n      options: [\n        {\n          value: 'one',\n          text: 'One',\n        },\n        {\n          value: 'two',\n          text: 'Two',\n        },\n        {\n          value: 'three',\n          text: 'Three',\n        },\n      ],\n    };\n  },\n};\n</script>\n\n<template>\n  <div>\n    <!-- Implicit -->\n    <gl-form-radio-group v-model=\"selected\" :options=\"options\" name=\"implicit\" />\n\n    <!-- Explicit -->\n    <gl-form-radio-group v-model=\"selected\" name=\"explicit\">\n      <gl-form-radio value=\"one\">One</gl-form-radio>\n      <gl-form-radio value=\"two\">Two</gl-form-radio>\n      <gl-form-radio value=\"three\">Three</gl-form-radio>\n    </gl-form-radio-group>\n\n    <!-- Mixed -->\n    <gl-form-radio-group v-model=\"selected\" :options=\"[options[1]]\" name=\"mixed\">\n      <template #first>\n        <gl-form-radio value=\"one\">One</gl-form-radio>\n      </template>\n      <gl-form-radio value=\"three\">Three</gl-form-radio>\n    </gl-form-radio-group>\n  </div>\n</template>\n```\n\n## Stacked\n\nBy default, the GitLab Design guide mandates the `<gl-form-radio-group>` be `stacked` by default and\nis non-changeable at this time.\n";
-
-var form_radio_group_documentation = {
-  description,
-  followsDesignSystem: true
-};
-
-export default form_radio_group_documentation;

package/dist/components/base/form/form_select/form_select.documentation.js

@@ -1,8 +0,0 @@
-var description = "Form select component used to select from group of options in a form.\n";
-
-var form_select_documentation = {
-  description,
-  followDesignSystem: true
-};
-
-export default form_select_documentation;

package/dist/components/base/form/form_text/form_text.documentation.js

@@ -1,14 +0,0 @@
-var form_text = "# Usage\n\nThe component used to render form group descriptions. Useful for when you need\nto add additional form text elements to a form group.\n";
-
-var description = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': form_text
-});
-
-var form_text_documentation = {
-  description,
-  bootstrapComponent: 'b-form-text',
-  propsInfo: {}
-};
-
-export default form_text_documentation;

package/dist/components/base/form/form_textarea/form_textarea.documentation.js

@@ -1,7 +0,0 @@
-var description = "**Note:** This needs a `v-model` property to work correctly.\nSee [this issue](https://github.com/bootstrap-vue/bootstrap-vue/issues/1915) on Bootstrap Vue for\nmore information.\n";
-
-var form_textarea_documentation = {
-  description
-};
-
-export default form_textarea_documentation;

package/dist/components/base/form/input_group_text/input_group_text.documentation.js

@@ -1,12 +0,0 @@
-var input_group_text = "### Under the hood\n\nUses [`BInputGroupText`](https://bootstrap-vue.org/docs/components/input-group#comp-ref-b-input-group-text)\nfrom Vue Boostrap\n";
-
-var description = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': input_group_text
-});
-
-var input_group_text_documentation = {
-  description
-};
-
-export default input_group_text_documentation;

package/dist/components/base/icon/icon.documentation.js

@@ -1,8 +0,0 @@
-var description = "## Usage\n\nThe Icon component can be used to render any svg within the @gitlab/svgs icon sprites.\n\n### Accessibility\n\n`gl-icon` icons are hidden from screen readers by default, as usages of icons are commonly decorative.\n\nIf the icon is not decorative, add an `aria-label` attribute to `gl-icon` to give it an accessible name.\nThis label is read out by screen readers.\n\nIf the icon is clickable, use `gl-button` instead of `gl-icon` because a clickable element should\nsemantically be a button.\n\n```html\n<!-- icon, which is hidden from screen readers by default  -->\n<gl-icon name=\"rocket\" />\n\n<!-- icon, which has an accessible name \"Confidential issue\" that is read out by screen readers -->\n<gl-icon name=\"eye-slash\" :aria-label=\"__('Confidential issue')\" />\n\n<!-- clickable icon, which is borderless and padding-less -->\n<gl-button icon=\"close\" category=\"tertiary\" class=\"gl-p-0!\" aria-label=\"Close\" />\n```\n\nFor more information about icons within GitLab, visit the\n[GitLab accessibility guidelines](https://docs.gitlab.com/ee/development/fe_guide/accessibility#icons).\n";
-
-var icon_documentation = {
-  followsDesignSystem: true,
-  description
-};
-
-export default icon_documentation;

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

@@ -1,49 +0,0 @@
-import InfiniteScrollAllItemsExample from './infinite_scroll.all_items.example';
-import InfiniteScrollBasicExample from './infinite_scroll.basic.example';
-import InfiniteScrollWithFiniteTotalItemsExample from './infinite_scroll.finite_total_items.example';
-import InfiniteScrollWithLargeNumberOfFetchedItemsExample from './infinite_scroll.large_fetched_items.example';
-import InfiniteScrollReverseExample from './infinite_scroll.reverse.example';
-import InfiniteScrollWithSmallNumberOfFetchedItemsExample from './infinite_scroll.small_fetched_items.example';
-import InfiniteScrollTwoWayExample from './infinite_scroll.two_way.example';
-
-var index = [{
-  name: 'Basic',
-  items: [{
-    id: 'infinite-scroll-basic',
-    name: 'Basic',
-    description: 'Basic Infinite Scroll',
-    component: InfiniteScrollBasicExample
-  }, {
-    id: 'infinite-scroll-with-finite-total-items',
-    name: 'Fixed items',
-    description: 'With finite total items',
-    component: InfiniteScrollWithFiniteTotalItemsExample
-  }, {
-    id: 'infinite-scroll-small-fetched-items',
-    name: 'With a small number of fetched items',
-    description: 'Infinite Scroll with small number of fetched items',
-    component: InfiniteScrollWithSmallNumberOfFetchedItemsExample
-  }, {
-    id: 'infinite-scroll-large-fetched-items',
-    name: 'With a large number of fetched items',
-    description: 'Infinite Scroll with large number of fetched items',
-    component: InfiniteScrollWithLargeNumberOfFetchedItemsExample
-  }, {
-    id: 'infinite-scroll-all-items',
-    name: 'Showing all items',
-    description: 'Infinite Scroll with all items',
-    component: InfiniteScrollAllItemsExample
-  }, {
-    id: 'infinite-scroll-reverse',
-    name: 'Reversed',
-    description: 'Infinite Scroll with items added at the top',
-    component: InfiniteScrollReverseExample
-  }, {
-    id: 'infinite-scroll-two-way',
-    name: 'Two way Infinite Scroll',
-    description: 'Infinite Scroll with items added in two directions',
-    component: InfiniteScrollTwoWayExample
-  }]
-}];
-
-export default index;

package/dist/components/base/infinite_scroll/examples/infinite_scroll.all_items.example.js

@@ -1,49 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-const FETCHED_ITEMS = 5;
-var script = {
-  data() {
-    return {
-      fetchedItems: FETCHED_ITEMS
-    };
-  }
-
-};
-
-/* 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('gl-infinite-scroll',{attrs:{"fetched-items":_vm.fetchedItems},scopedSlots:_vm._u([{key:"items",fn:function(){return [_c('ul',{staticClass:"list-group list-group-flushed list-unstyled"},_vm._l((_vm.fetchedItems),function(item){return _c('li',{key:item,staticClass:"list-group-item"},[_vm._v("Item #"+_vm._s(item))])}),0)]},proxy:true},{key:"default",fn:function(){return [_c('div',{staticClass:"gl-mt-3"},[_c('span',[_vm._v("All items loaded")])])]},proxy:true}])})};
-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/infinite_scroll/examples/infinite_scroll.basic.example.js

@@ -1,62 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-const ITEMS_BATCH_SIZE = 20;
-var script = {
-  data() {
-    return {
-      isLoading: false,
-      fetchedItems: ITEMS_BATCH_SIZE,
-      loadTimer: null
-    };
-  },
-
-  methods: {
-    bottomReached() {
-      clearTimeout(this.loadTimer);
-      this.isLoading = true;
-      this.loadTimer = setTimeout(() => {
-        this.fetchedItems += ITEMS_BATCH_SIZE;
-        this.isLoading = false;
-      }, 500);
-    }
-
-  }
-};
-
-/* 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('gl-infinite-scroll',{attrs:{"max-list-height":285,"fetched-items":_vm.fetchedItems},on:{"bottomReached":_vm.bottomReached},scopedSlots:_vm._u([{key:"items",fn:function(){return [_c('ul',{staticClass:"list-group list-group-flushed list-unstyled"},_vm._l((_vm.fetchedItems),function(item){return _c('li',{key:item,staticClass:"list-group-item"},[_vm._v("Item #"+_vm._s(item))])}),0)]},proxy:true},{key:"default",fn:function(){return [_c('div',{staticClass:"gl-mt-3"},[(_vm.isLoading)?_c('gl-loading-icon'):_c('span',[_vm._v(_vm._s(_vm.fetchedItems)+" items loaded")])],1)]},proxy:true}])})};
-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/infinite_scroll/examples/infinite_scroll.finite_total_items.example.js

@@ -1,72 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-const ITEMS_BATCH_SIZE = 60;
-const TOTAL_ITEMS = 100;
-var script = {
-  data() {
-    return {
-      totalItems: TOTAL_ITEMS,
-      isLoading: false,
-      fetchedItems: ITEMS_BATCH_SIZE,
-      loadTimer: null
-    };
-  },
-
-  methods: {
-    bottomReached() {
-      clearTimeout(this.loadTimer);
-
-      if (this.fetchedItems < TOTAL_ITEMS) {
-        this.isLoading = true;
-        this.loadTimer = setTimeout(() => {
-          this.fetchedItems += ITEMS_BATCH_SIZE;
-
-          if (this.fetchedItems > TOTAL_ITEMS) {
-            this.fetchedItems = TOTAL_ITEMS;
-          }
-
-          this.isLoading = false;
-        }, 500);
-      }
-    }
-
-  }
-};
-
-/* 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('gl-infinite-scroll',{attrs:{"max-list-height":285,"fetched-items":_vm.fetchedItems,"total-items":_vm.totalItems},on:{"bottomReached":_vm.bottomReached},scopedSlots:_vm._u([{key:"items",fn:function(){return [_c('ul',{staticClass:"list-group list-group-flushed list-unstyled"},_vm._l((_vm.fetchedItems),function(item){return _c('li',{key:item,staticClass:"list-group-item"},[_vm._v("Item #"+_vm._s(item))])}),0)]},proxy:true}])})};
-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/infinite_scroll/examples/infinite_scroll.large_fetched_items.example.js

@@ -1,62 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-const ITEMS_BATCH_SIZE = 1200;
-var script = {
-  data() {
-    return {
-      isLoading: false,
-      fetchedItems: ITEMS_BATCH_SIZE,
-      loadTimer: null
-    };
-  },
-
-  methods: {
-    bottomReached() {
-      clearTimeout(this.loadTimer);
-      this.isLoading = true;
-      this.loadTimer = setTimeout(() => {
-        this.fetchedItems += ITEMS_BATCH_SIZE;
-        this.isLoading = false;
-      }, 500);
-    }
-
-  }
-};
-
-/* 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('gl-infinite-scroll',{attrs:{"max-list-height":285,"fetched-items":_vm.fetchedItems},on:{"bottomReached":_vm.bottomReached},scopedSlots:_vm._u([{key:"items",fn:function(){return [_c('ul',{staticClass:"list-group list-group-flushed list-unstyled"},_vm._l((_vm.fetchedItems),function(item){return _c('li',{key:item,staticClass:"list-group-item"},[_vm._v("Item #"+_vm._s(item))])}),0)]},proxy:true},{key:"default",fn:function(){return [_c('div',{staticClass:"gl-mt-3"},[(_vm.isLoading)?_c('gl-loading-icon'):_c('span',[_vm._v("Showing "+_vm._s(_vm.fetchedItems)+" of 1000+ items")])],1)]},proxy:true}])})};
-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/infinite_scroll/examples/infinite_scroll.reverse.example.js

@@ -1,63 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-const ITEMS_BATCH_SIZE = 5;
-const INIT_ITEMS_COUNT = 10;
-var script = {
-  data() {
-    return {
-      isLoading: false,
-      fetchedItems: INIT_ITEMS_COUNT,
-      loadTimer: null
-    };
-  },
-
-  methods: {
-    topReached() {
-      clearTimeout(this.loadTimer);
-      this.isLoading = true;
-      this.loadTimer = setTimeout(() => {
-        this.fetchedItems += ITEMS_BATCH_SIZE;
-        this.isLoading = false;
-      }, 2000);
-    }
-
-  }
-};
-
-/* 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('gl-infinite-scroll',{attrs:{"max-list-height":285,"fetched-items":_vm.fetchedItems},on:{"topReached":_vm.topReached},scopedSlots:_vm._u([{key:"header",fn:function(){return [_c('div',{staticClass:"gl-h-6"},[(_vm.isLoading)?_c('gl-loading-icon'):_vm._e()],1)]},proxy:true},{key:"items",fn:function(){return [_c('ul',{staticClass:"list-group list-group-flushed list-unstyled"},_vm._l((_vm.fetchedItems),function(item){return _c('li',{key:item,staticClass:"list-group-item"},[_vm._v("\n        Item #"+_vm._s(Math.abs(item - _vm.fetchedItems) + 1)+"\n      ")])}),0)]},proxy:true},{key:"default",fn:function(){return [_c('div',{staticClass:"gl-mt-3"},[_c('span',[_vm._v(_vm._s(_vm.fetchedItems)+" items loaded, scroll up for more")])])]},proxy:true}])})};
-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/infinite_scroll/examples/infinite_scroll.small_fetched_items.example.js

@@ -1,62 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-const ITEMS_BATCH_SIZE = 60;
-var script = {
-  data() {
-    return {
-      isLoading: false,
-      fetchedItems: ITEMS_BATCH_SIZE,
-      loadTimer: null
-    };
-  },
-
-  methods: {
-    bottomReached() {
-      clearTimeout(this.loadTimer);
-      this.isLoading = true;
-      this.loadTimer = setTimeout(() => {
-        this.fetchedItems += ITEMS_BATCH_SIZE;
-        this.isLoading = false;
-      }, 500);
-    }
-
-  }
-};
-
-/* 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('gl-infinite-scroll',{attrs:{"max-list-height":285,"fetched-items":_vm.fetchedItems},on:{"bottomReached":_vm.bottomReached},scopedSlots:_vm._u([{key:"items",fn:function(){return [_c('ul',{staticClass:"list-group list-group-flushed list-unstyled"},_vm._l((_vm.fetchedItems),function(item){return _c('li',{key:item,staticClass:"list-group-item"},[_vm._v("Item #"+_vm._s(item))])}),0)]},proxy:true},{key:"default",fn:function(){return [_c('div',{staticClass:"gl-mt-3"},[(_vm.isLoading)?_c('gl-loading-icon'):_c('span',[_vm._v("Showing "+_vm._s(_vm.fetchedItems)+" of 1000+ items")])],1)]},proxy:true}])})};
-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/infinite_scroll/examples/infinite_scroll.two_way.example.js

@@ -1,94 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-const ITEMS_BATCH_SIZE = 10;
-const INIT_ITEMS_COUNT = 20;
-const colors = ['Violet', 'Indigo', 'Blue', 'Green', 'Yellow', 'Orange', 'Red'];
-const planets = ['Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter', 'Saturn', 'Uranus', 'Neptune'];
-let key = 0;
-
-const createItem = () => {
-  key += 1;
-  return {
-    key,
-    content: `${colors[key % colors.length]} ${planets[key % planets.length]}`
-  };
-};
-
-const createArray = num => {
-  const res = [];
-
-  for (let i = 0; i < num; i += 1) {
-    res.push(createItem());
-  }
-
-  return res;
-};
-
-var script = {
-  data() {
-    return {
-      isLoading: false,
-      fetchedItems: createArray(INIT_ITEMS_COUNT),
-      loadTimer: null
-    };
-  },
-
-  methods: {
-    topReached() {
-      clearTimeout(this.loadTimer);
-      this.isLoading = true;
-      this.loadTimer = setTimeout(() => {
-        this.fetchedItems.unshift(...createArray(ITEMS_BATCH_SIZE));
-        this.isLoading = false;
-      }, 1000);
-    },
-
-    bottomReached() {
-      clearTimeout(this.loadTimer);
-      this.isLoading = true;
-      this.loadTimer = setTimeout(() => {
-        this.fetchedItems.push(...createArray(ITEMS_BATCH_SIZE));
-        this.isLoading = false;
-      }, 1000);
-    }
-
-  }
-};
-
-/* 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('gl-infinite-scroll',{attrs:{"max-list-height":285,"fetched-items":_vm.fetchedItems.length},on:{"topReached":_vm.topReached,"bottomReached":_vm.bottomReached},scopedSlots:_vm._u([{key:"items",fn:function(){return [_c('ul',{staticClass:"list-group list-group-flushed list-unstyled"},_vm._l((_vm.fetchedItems),function(item){return _c('li',{key:item.key,staticClass:"list-group-item"},[_vm._v("\n        "+_vm._s(item.content)+"\n      ")])}),0)]},proxy:true},{key:"default",fn:function(){return [_c('div',{staticClass:"gl-mt-3"},[(_vm.isLoading)?_c('gl-loading-icon'):_c('span',[_vm._v(_vm._s(_vm.fetchedItems.length)+" items loaded, scroll up or down for more")])],1)]},proxy:true}])})};
-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/infinite_scroll/infinite_scroll.documentation.js

@@ -1,8 +0,0 @@
-var description = "## Usage\n\nThe infinite scroll component wraps around a results list and emits a message\n(`bottomReached`) when the bottom of the viewport is reached, which should trigger\na re-fetching. The `gl-infinite-scroll` component expects its parent component to\nmanage the re-fetching.\n\nAdditionally it emits a `topReached` message when the top of the viewport is reached, which\ncan be useful to load items on top of the available data. If only `topReached` is present, the\nviewport will be scrolled to the bottom the first time this component is mounted.\n\n## Public methods\n\nUseful public methods you can call via `$refs`:\n\n- `.scrollUp()`: Scrolls to the top of the container.\n- `.scrollDown()`: Scrolls to the bottom of the container.\n- `.scrollTo({ top })`: Scrolls to a number of pixels along the Y axis of the container.\n\n## Implementation Example\n\nThis is how a full implementation would look like with paginated results from GitLab's\n`projects` API.\n\nIn the component's state, initialize a `pageInfo` object:\n\n```js\npageInfo: {\n  currentPage: 0,\n  nextPage: 0,\n  totalPages: 0,\n  totalResults: 0,\n}\n```\n\nWhen fetching for the first time, set the state with the header\ninformation in the mutations:\n\n```html\nVue.set(state.pageInfo, 'currentPage', parseInt(headers['X-Page'], 10));\nVue.set(state.pageInfo, 'nextPage', parseInt(headers['X-Next-Page'], 10));\nVue.set(state.pageInfo, 'totalPages', parseInt(headers['X-Total-Pages'], 10));\nVue.set(state.pageInfo, 'totalResults', parseInt(headers['X-Total'], 10));\n```\n\n_Note: There is a function you can use for parsing integers in headers in\nGitLab called `parseIntPagination` in `common/utils.js`_\n\nEvery time `bottomReached` happens, update the state in your mutations:\n\n```js\nstate.searchResults = state.searchResults.concat(results.data);\nVue.set(state.pageInfo, 'nextPage', parseInt(headers['X-Next-Page'],10));\nVue.set(state.pageInfo, 'totalPages', parseInt(headers['X-Total-Pages'],10));\n```\n\nUse the state to fetch the next page in the actions. In this case, the `Projects`\nAPI allows us to send in a `page` parameter to fetch a certain page from the\nlist of results.\n\n```js\nexport const fetchNextPage = ({ state, dispatch }) => {\n  if(state.pageInfo.currentPage < state.pageInfo.totalPages) {\n    Api.projects(searchQuery, { page: state.pageInfo.nextPage })\n      ...\n  }\n};\n```\n\n```html\n<script>\nexportDefault {\n  components: {\n    GlInfiniteScroll,\n  },\n  computed: {\n    ...mapState([\n      'pageInfo',\n      'searchResults',\n    ]),\n  },\n  methods: {\n    ...mapActions([\n      'fetchNextPage',\n    ]),\n    bottomReached() {\n      this.fetchNextPage();\n    },\n  },\n}\n</script>\n<template>\n  <gl-infinite-scroll\n    @bottomReached=\"bottomReached\"\n    :max-list-height=\"400\"\n    :fetched-items=\"searchResults.length\"\n    :total-items=\"totalResults\"\n  >\n    ...Results in a list, another component, etc ....\n  </gl-infinite-scroll>\n</template>\n```\n";
-
-var infinite_scroll_documentation = {
-  followsDesignSystem: true,
-  description
-};
-
-export default infinite_scroll_documentation;

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

@@ -1,13 +0,0 @@
-var keyset_pagination = "Pagination is used to help users parse a large number of items on a page,\nwhenever there are too many results to show at once. Pagination breaks up\nresults into several pages with controls for navigating forward and backward, or\nto a specific page.\n\n## Usage\n\nThe simplest way to use `GlKeysetPagination` with a paginated GraphQL response\nis to `v-bind` to the\n[`PageInfo`](https://docs.gitlab.com/ee/api/graphql/reference/#pageinfo) type\nreturned by the endpoint:\n\n```html\n<gl-keyset-pagination v-bind=\"pageInfo\" />\n```\n\nThis is possible because the default field names of the `PageInfo` type align\nwith the `props` of this component.\n\n## Dos and don'ts\n\n**✅ Do** provide the `prevText` and `nextText` props with translatable strings.\nThe default strings (\"Prev\" and \"Next\") are hardcoded in this component and\ncan't be translated.\n\nExample:\n\n```html\n<gl-keyset-pagination v-bind=\"pageInfo\" :prev-text=\"__('Prev')\" :next-text=\"__('Next')\" />\n```\n\n**✅ Do** use this component for paginating GraphQL requests<sup>1</sup> (or any\nendpoint that uses keyset pagination).\n\n**❌ Don't** use this component for paginating REST requests<sup>1</sup> (or any\nendpoint that uses offset pagination).\n\nFor offset pagination, use the [`GlPagination`\ncomponent](/?path=/story/base-pagination--default) instead.\n\nFor more information on the difference between offset and keyset pagination see\n[our documentation on GraphQL\npagination](https://docs.gitlab.com/ee/development/graphql_guide/pagination.html).\n\n<small><sup>1</sup>There's no intrinsic reason why GraphQL endpoints can't\nsupport offset pagination (in fact, [the official\ndocumentation](https://graphql.org/learn/pagination/#pagination-and-edges) shows\nan example offset pagination implementation) or why REST endpoints can't support\nkeyset pagination. This is simply how we've chosen to implement our REST and\nGraphQL endpoints at GitLab.</small>\n\n## Pajamas reference\n\n<https://design.gitlab.com/components/pagination>\n";
-
-var description = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': keyset_pagination
-});
-
-var keyset_pagination_documentation = {
-  description,
-  followsDesignSystem: true
-};
-
-export default keyset_pagination_documentation;

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

@@ -1,8 +0,0 @@
-import description from './label';
-
-var label_documentation = {
-  followsDesignSystem: true,
-  description
-};
-
-export default label_documentation;