@gitlab/ui 39.3.0 → 39.4.0

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

@@ -1,8 +0,0 @@
-var description = "Form checkbox groups for general use inside forms.\n\n## Stacked\n\nBy default, the GitLab Design guide mandates the `<gl-form-checkbox-group>` be `stacked` and is\nnon-changeable at this time.\n";
-
-var form_checkbox_documentation = {
-  description,
-  followsDesignSystem: true
-};
-
-export default form_checkbox_documentation;

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

@@ -1,12 +0,0 @@
-var form_checkbox_tree = "`GlFormCheckboxTree` lets you display an options structure where any option can have n-level of\nchildren. It can be useful for creating a search filter that has nested facets.\n\n## Usage\n\n`GlFormCheckboxTree` accepts an `options` prop representing the available options in the form of\nan n-level deep tree. Each option should have a `value` and can have optional\n`label` and `children`. If `label` is omitted, `value` is used as the checkbox's label.\nHere's a simple `options` tree for example:\n\n```js\n[\n  {\n    label: 'Option #1',\n    value: 1,\n    children: [\n      {\n        label: 'Option #2',\n        value: 2,\n      },\n    ],\n  },\n  {\n    label: 'Option #3',\n    value: 3,\n  },\n]\n```\n\n`GlFormCheckboxTree` exposes the selected options via a `v-model` which is being kept in sync with\nthe `change` event.\n\n## Dos and don'ts\n\n### Don't\n\nWhen rendering a `GlFormCheckboxTree` with pre-selected options, all the selected values should be\npassed to the component via the `v-model`/`value` property. For example, with the options tree\nabove, if you wanted options `1` and `2` to be pre-selected, make sure that they are both included\nin the initial value, don't rely on the component to infer initially checked boxes by only passing\n`1` or `2`.\n\n```html\n<!-- Good -->\n<gl-form-checkbox-tree\n  :value=\"[1, 2]\"\n  :options=\"[\n    {\n      value: 1,\n      children: [\n        {\n          value: 2,\n        },\n      ],\n    },\n  ]\"\n/>\n\n<!-- Bad -->\n<gl-form-checkbox-tree\n  :value=\"[1]\"\n  :options=\"[\n    {\n      value: 1,\n      children: [\n        {\n          value: 2,\n        },\n      ],\n    },\n  ]\"\n/>\n```\n";
-
-var description = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': form_checkbox_tree
-});
-
-var form_checkbox_tree_documentation = {
-  description
-};
-
-export default form_checkbox_tree_documentation;

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

@@ -1,13 +0,0 @@
-var form_combobox = "Use this component to add a [`FormInput`](/?path=/story/base-form-form-input--default) component\nwith synchronous autocomplete dropdown. It behaves as follows:\n\n- Typing matches tokens; dropdown disappears when there is no match  \n- Up and down arrows navigate the dropdown  \n- Enter selects keyboard-highlighted item; clicking overrides this  \n- Esc closes dropdown when it is open, clears field when it is not  \n- Browser/native autocomplete dropdown hidden when ours is open, shows when it is not  \n- Tab selects current entered text and moves to next field  \n\nThis behavior based on\n[this w3c pattern](https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html)\nand [this accessible combobox example](https://alligator.io/vuejs/vue-a11y-autocomplete/).\n\n## Usage\n\nThe combobox accepts an array of string tokens, a `v-model`, and label text. Internally, it generates\nunique element IDs so multiple can be used on one page without clashing.\n\nOn selection it sets the input value to the selected string and emits a `value-selected` event for\nconsumption by parent components.\n\n```html\n<gl-form-combobox\n  v-model=\"inputVal\"\n  :token-list=\"tokens\"\n  label-text=\"Combobox Label\"\n/>\n```\n\nIt does not have a loading state nor does it accept tokens other than strings. It allows for one\nselected value.\n\n### What if I need to load the options asynchronously?\n\nYou may want to look at [`GlSearchBoxByType`] or [`GlSearchBoxByClick`].\n\n### What if I need multiple options?\n\nThe [`GlTokenSelector`] may be what you need. Alternately, [`GlFilteredSearch`] will let you search\nand include tokens.\n\n## Edge cases\n\nThe algorithm to match tokens with the input is very naive. If you need to use the component with a\nvery large list of matches, you may want to update the implementation or use one of the search\ninputs, like [`GlSearchBoxByType`], [`GlSearchBoxByClick`], or [`GlFilteredSearch`].\n\n[`GlSearchBoxByType`]: https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-search-box-by-type--default\n[`GlSearchBoxByClick`]: https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-search-box-by-click--default\n[`GlTokenSelector`]: https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-token-selector--default\n[`GlFilteredSearch`]: https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-filtered-search--default\n";
-
-var description = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': form_combobox
-});
-
-var form_combobox_documentation = {
-  followsDesignSystem: true,
-  description
-};
-
-export default form_combobox_documentation;

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

@@ -1,7 +0,0 @@
-var description = "Form group adds structure to forms.\n";
-
-var form_group_documentation = {
-  description
-};
-
-export default form_group_documentation;

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

@@ -1,8 +0,0 @@
-var description = "General user input to be used in forms.\n";
-
-var form_input_documentation = {
-  description,
-  followsDesignSystem: true
-};
-
-export default form_input_documentation;

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__;