@gitlab/ui 39.2.1 → 39.3.2

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;

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

@@ -1,7 +0,0 @@
-var description = "## Security\n\nThis component implements a few security measures to make it as safe as possible by default.\nSee [SafeLinkDirective docs] for more details.\n\n### Linking to an unsafe URL\n\nIf you're trying to link to a location considered unsafe by the `SafeLink` directive (when rendering\na download link with a [Data URL] for example), you'll need to bypass the `href` attribute's\nsanitization. This component exposes the `is-unsafe-link` prop for that purpose.\n\n> **Warning:** Only disable URL sanitization when absolutely necessary.\n\n```html\n<gl-link\n  is-unsafe-link\n  download=\"file.txt\"\n  href=\"data:text/plain;charset=utf-8,GitLab%20is%20awesome\">Download</gl-link>\n```\n\n[SafeLinkDirective docs]: https://gitlab-org.gitlab.io/gitlab-ui/?path=/docs/directives-safe-link-directive--default\n[Data URL]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs\n";
-
-var link_documentation = {
-  description
-};
-
-export default link_documentation;

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

@@ -1,8 +0,0 @@
-var description = "## Under the hood\n\nLoading icon uses pure css to render a spinner.\n";
-
-var loading_icon_documentation = {
-  followsDesignSystem: true,
-  description
-};
-
-export default loading_icon_documentation;

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

@@ -1,12 +0,0 @@
-var markdown = "The `GlMarkdown` component styles markdown-generated HTML following the Pajamas Documentation Markdown\n[styling specifications](https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/Pajamas-UI-Kit---Beta?node-id=542%3A2).\n\n## Usage\n\nYou can use the `GlMarkdown` component in two ways.\n\n### Vue component\n\n```html\n<script>\nimport { GlMarkdown } from '@gitlab/ui';\n\nexport default {\n  components: {\n    GlMarkdown,\n  }\n}\n</script>\n<template>\n  <gl-markdown>\n    <!-- All the content inside gl-markdown will inherit the documentation markdown styles -->\n  </gl-markdown>\n</template>\n```\n\n### `gl-markdown` class selector\n\nFollow the [GitLab UI CSS guidelines](https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/doc/css.md)\nto include GitLab UI CSS in your application. Afterwards, you can apply the `gl-markdown` class\nselector to the root element that contains the markdown-generated HTML.\n\n```html\n<body class=\"gl-markdown\">\n  <!-- All the content inside body.gl-markdown will inherit the documentation markdown styles -->\n</body>\n```\n\n### Compact markdown\n\nSet the `compact` property to true in `GlMarkdown` to apply the compact markdown styles.\n\n```html\n<gl-markdown compact></gl-compact>\n```\n\nYou can also append the `gl-compact-markdown` class selector after `gl-markdown` in markdown-generated\nHTML.\n\n```html\n<body class=\"gl-markdown gl-compact-markdown\">\n</body>\n```\n\n<!--\n## Browser compatibility\n\nIf the component requires any polyfill or fallback on certain browsers, describe those requirements\nhere.\n-->\n\n<!--\n## Edge cases\n\nIf the component has some known limitations, describe them here.\n-->\n\n<!--\n## Deprecation warning\n\nIf and when this component introduced API changes that would require deprecating old APIs, describe\nthe changes here, and provide a migration paths to the new API.\n-->\n";
-
-var description = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': markdown
-});
-
-var markdown_documentation = {
-  description
-};
-
-export default markdown_documentation;

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

@@ -1,8 +0,0 @@
-var description = "Modals are used to reveal critical information, show information without losing context, or when the\nsystem requires a user response. Modals can also fragment a complex workflow into simpler steps and\nshould serve a single purpose dedicated to completing the user’s task.\n\n## VModel\n\nYou can use the `v-model` directive to control the modal’s visibility. The `v-model`\ndirective interfaces with the `visible` property and the `@change` event.\n\n## Deprecation Warning\n\nWe are deprecating the `modal-ok` and `modal-cancel` slots. We are also changing the way the\n`modal-footer` slot content is populated. This is in order to align this component with the design\nsystem.\n\nThe `modal-footer` slot should only be populated via props: `action-primary`, `action-secondary` and\n`action-cancel`. These props allow you to handle how a primary, secondary and cancel button will\nbehave in the modals footer. The props receive an object as such:\n\n```js\n{\n  text: 'Save Changes',\n  attributes: {\n    variant: 'confirm',\n    disabled: this.someState,\n    class: 'some-class',\n    ...\n  }\n}\n```\n";
-
-var modal_documentation = {
-  followsDesignSystem: true,
-  description
-};
-
-export default modal_documentation;

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

@@ -1,12 +0,0 @@
-var nav = "The navigation component is built with flexbox and provides a strong foundation for building all\ntypes of navigation components.\n\n## `GlNavItem`\n\nUse `GlNavItem` to add actionable links (or router links) to your nav. `GlNavItem` wraps [`BNavItem`](https://bootstrap-vue.org/docs/components/navbar#b-nav-item).\n\n## `GlNavItemDropdown`\n\nUse `GlNavItemDropdown` to place dropdown items within your nav.\n`GlNavItemDropdown` wraps [`BNavItemDropdown`](https://bootstrap-vue.org/docs/components/navbar#b-nav-item-dropdown).\n";
-
-var description = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': nav
-});
-
-var nav_documentation = {
-  description
-};
-
-export default nav_documentation;

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

@@ -1,12 +0,0 @@
-var navbar = "### Navbar\n\nThe component <navbar> is a wrapper that positions branding, navigation, and other elements into a\nconcise header.\n";
-
-var description = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': navbar
-});
-
-var navbar_documentation = {
-  description
-};
-
-export default navbar_documentation;

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

@@ -1,7 +0,0 @@
-var description = "The paginated list component allows the easy creation of list with pagination and client side sorting.\n";
-
-var paginated_list_documentation = {
-  description
-};
-
-export default paginated_list_documentation;

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

@@ -1,8 +0,0 @@
-var description = "## Current page\n\nThe current page's value should be bound using `v-model`, e.g.:\n\n```html\n<script>\n  export default {\n    data: () => ({\n      page: 2,\n    }),\n  };\n</script>\n\n<template>\n  <gl-pagination v-model=\"page\" :per-page=\"10\" :total-items=\"100\" />\n</template>\n```\n\n## Compact pagination\n\nIn some cases, you might not be able to provide the total items count because your API doesn't\nsupport it or because of performance concerns. For such cases, the pagination component supports a\ncompact mode, where only the previous and next buttons are displayed.\n\nTo enable the compact mode, you'll need to provide the previous and/or next page numbers via the\n`prev-page` and `next-page` props respectively.\n\n> NOTE: If one of the props is omitted, the corresponding button will be disabled. If both\n> properties are omitted the pagination won't render at all.\n\n```html\n<template>\n  <gl-pagination :value=\"2\" :prev-page=\"1\" :next-page=\"3\" />\n</template>\n```\n\n## Limits\n\nThe `limits` prop is used to define pagination link limits based on Bootstrap's breakpoint sizes.\nIt is strongly recommended you provide a 'default' property, even if you have accounted for all\nbreakpoint sizes. While unlikely, it is possible breakpoints could change, thus, a default property\nensures a graceful fallback.\n\nHere is `limits` default value:\n\n```js\n{\n  xs: 0,\n  sm: 3,\n  md: 9,\n  default: 9,\n}\n```\n\n> Note: The component will not render any UI if the total items available for display is less than\n> the max items per page.\n\n## Internet Explorer 11\n\nThis component makes use of the\n[`Number.isInteger` method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isInteger),\nwhich is not supported in IE11, make sure it's being polyfilled when using the component.\n[`core-js`](https://github.com/zloirock/core-js) incudes the appropriate polyfill for this.\n";
-
-var pagination_documentation = {
-  followsDesignSystem: true,
-  description
-};
-
-export default pagination_documentation;

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

@@ -1,8 +0,0 @@
-var description = "## Usage\n\nPaths are horizontal process flows composed of a series of \"stages\".\nLike tabs, paths let users focus in on specific content at each stage\nwhilst still keeping all the other stages in view. Only one stage can\nbe active at a given time.\n\n### Implemetation\n\nThe component should be initialized with an array of data objects. By\ndefault, the first item in the array will be selected. This can be\noverridden by passing in an object with the selected property set to\ntrue.\n\n```js\nitems: [\n  {\n    title: 'First',\n  },\n  {\n    title: 'Second',\n    selected: true\n  },\n  ...\n```\n\nOnce an item has been selected the `selected` event will be emitted.\nThe emitted event will include the entire object at the selected index.\n\n#### Customization\n\nAdditional attributes can be configured via the `items` object. Currently\nsupport for `metric` and `icon` are provided. Please see the individual\nexamples for further information on these.\n\n### Additional information\n\nA `backgroundColor` property can be specified when using this component\non different colored backgrounds.\n\nThis component supports various themes and is mobile responsive.\n";
-
-var path_documentation = {
-  description,
-  followsDesignSystem: true
-};
-
-export default path_documentation;

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

@@ -1,5 +0,0 @@
-var popover_documentation = {
-  followsDesignSystem: true
-};
-
-export default popover_documentation;

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

@@ -1,8 +0,0 @@
-var description = "Provides a clearable text input with loading state to be used for [search](https://design.gitlab.com/components/search).\n";
-
-var search_box_by_click_documentation = {
-  followsDesignSystem: true,
-  description
-};
-
-export default search_box_by_click_documentation;

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

@@ -1,8 +0,0 @@
-var description = "Provides a clearable text input with loading state to be used for [search](https://design.gitlab.com/components/search).\n";
-
-var search_box_by_type_documentation = {
-  followsDesignSystem: true,
-  description
-};
-
-export default search_box_by_type_documentation;

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

@@ -1,8 +0,0 @@
-var description = "Button group of equal options where only one can be selected and active.\n";
-
-var segmented_control_documentation = {
-  followsDesignSystem: false,
-  description
-};
-
-export default segmented_control_documentation;

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

@@ -1,13 +0,0 @@
-var skeleton_loader = "Skeleton loaders are to be used when pages or sections can be progressively populated with content,\nsuch as text and images, as they become available. Generally speaking the first batch of content\nwill be the lightest to load and is followed by secondary and tertiary content batches. Each loading\nstep will add in more detail to the page until no skeleton loaders are present anymore. Content\nshould replace skeleton objects immediately when the data is available.\n\nThe skeleton loader component accepts shapes which in return will create a skeleton state with a\nloading animation. Any skeleton state components should be created with\n`<gl-skeleton-loader></gl-skeleton-loader>`. If no shape is passed via the slot the default skeleton\nwill be used. See \"Default\" and \"Default With Custom Props\" examples.\n\n## Progressive Loading\n\nDetermine if progressive loading is available, if it is break apart the skeleton to load data as it\nbecomes readily available. If progessive loading is not available, replace the entire skeleton when\nthe data is available.\n\n## Under the hood\n\nSkeleton Loader is a port of [vue-content-loader](https://github.com/egoist/vue-content-loader).\nSome changes have been made to the code to better suit our codebase, such as removing props and\nrefactoring into a SFC. Please take a look at their documentation and a useful [UI tool](http://danilowoz.com/create-vue-content-loader/)\nfor seeing the code output for `svg` shapes.\n";
-
-var description = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': skeleton_loader
-});
-
-var skeleton_loader_documentation = {
-  followsDesignSystem: true,
-  description
-};
-
-export default skeleton_loader_documentation;

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

@@ -1,7 +0,0 @@
-var description = "The Skeleton Loading component has been deprecated, please use [Skeleton Loader](https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-skeleton-loader--default).\n\nHow to replace this component with [Skeleton Loader](https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-skeleton-loader--default):\n\n1. Update imports\n   - `import { GlSkeletonLoading } from '@gitlab/ui'` -> `import { GlSkeletonLoader } from '@gitlab/ui'`\n2. Update component definitions\n   - `components: { GlSkeletonLoading }` -> `components: { GlSkeletonLoader }`\n3. Update template\n   - `<gl-skeleton-loading />` -> `<gl-skeleton-loader />`\n";
-
-var skeleton_loading_documentation = {
-  description
-};
-
-export default skeleton_loading_documentation;

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

@@ -1,7 +0,0 @@
-var description = "## Usage\n\nThe sorting component allows the user to select the field on which they would like to sort a list\nand whether to sort in ascending or descending order.\n\nThe dropdown part of the sorting component is a standard `gl-dropdown` component, with the items\nexposed as a slot. Inside the `gl-sorting` component, you should add a list of `gl-sorting-item`\ncomponents to construct your sorting options. The check icon will be displayed when a\n`gl-sorting-item` has its `active` prop set to `true`.\n\nThe `gl-sorting` component expects its parent component to manage the `text` and `is-ascending`\nprops. It does not track these using internal state.\n\nA sort update should be triggered by clicking a `gl-sorting-item` component (and therefore should\nhave a `@click` event bound or a `href` prop in the case of navigation) or by clicking the direction\nbutton. You should bind a function to the `sortDirectionChange` event to receive the new\n`is-ascending` value and re-order your data appropriately.\n\nA complete implementation example might look like:\n\n```html\n<template>\n  <gl-sorting\n    :text=\"dropdownText\"\n    :is-ascending=\"isAscending\"\n    @sortDirectionChange=\"onDirectionChange\"\n  >\n    <gl-sorting-item @click=\"onSortItemClick('Item 1')\">Item 1</gl-sorting-item>\n    <gl-sorting-item @click=\"onSortItemClick('Item 2')\">Item 2</gl-sorting-item>\n    <gl-sorting-item @click=\"onSortItemClick('Item 3')\">Item 3</gl-sorting-item>\n  </gl-sorting>\n</template>\n\n<script>\nimport { GlSorting, GlSortingItem } from '@gitlab/ui';\n\nexport default {\n  components: {\n    GlSorting,\n    GlSortingItem,\n  },\n  data() {\n    return {\n      isAscending: false,\n      dropdownText: 'Sort...'\n    }\n  },\n  methods: {\n    onSortItemClick(sortByItem) {\n      this.dropdownText = sortByItem;\n      this.sortMyData(sortByItem, this.isAscending);\n    },\n    onDirectionChange(isAscending) {\n      this.isAscending = isAscending;\n      this.sortMyData(this.dropdownText, this.isAscending);\n    },\n    sortMyData(sortBy, isAscending) {\n      // Use sortBy and direction to sort your data\n    },\n  }\n}\n</script>\n```\n";
-
-var sorting_documentation = {
-  description
-};
-
-export default sorting_documentation;

package/dist/components/base/sorting/sorting_item.documentation.js

@@ -1,8 +0,0 @@
-var description = "## Usage\n\nThe sorting item component is meant to be used for clickable entries inside a `gl-sorting` component.\nThis is a wrapper around the `gl-dropdown-item` component and includes a check icon when active,\nand an empty space for alignment when not.\n";
-
-var sorting_item_documentation = {
-  description,
-  bootstrapComponent: 'b-dropdown-item'
-};
-
-export default sorting_item_documentation;

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

@@ -1,8 +0,0 @@
-var description = "## Usage\n\nThe `gl-table` component wraps BootstrapVue `b-table` component. `b-table` provides a variety of\nslots for custom data rendering. You can learn more about them in the\n[component documentation](https://bootstrap-vue.org/docs/components/table).\nWhen using the component, pass in the `fields` prop as part of the `$options`, and give each table\ndata and table head its own styles if necessary.\n\n## Internationalization\n\nTo ensure we internationalize field labels, always pass an array of objects for the `fields` prop,\nlike mentioned in the implementation example.\n\n_Full documentation for the\n`field` prop [here.](https://bootstrap-vue.org/docs/components/table#fields-column-definitions)_\n\n## Use `GlTableLite` when possible\n\nIf you don't need all the features of `GlTable`, like filtering, sorting, or\npagination, use `GlTableLite` which offers a subset of `GlTable` features.\n\n## Implementation Example\n\n```html\n<script>\n  export default {\n    fields: [\n      {\n        key: 'column_one',\n        label: __('Column One'),\n        thClass: 'w-60p',\n        tdClass: 'table-col d-flex'\n      },\n      {\n        key: 'col_2',\n        label: __('Column 2'),\n        thClass: 'w-15p',\n        tdClass: 'table-col d-flex'\n      },\n    ];\n  }\n</script>\n<template>\n  <gl-table :items=\"items\" :fields=\"$options.fields\">\n    <template #head(column_one)>\n      <div>Column One</div>\n      <!-- This is the column head for the first object in `fields` -->\n    </template>\n\n    <template #cell(column_one)>\n      This is the template for column data belonging to the first object\n    </template>\n  </gl-table>\n</template>\n```\n";
-
-var table_documentation = {
-  followsDesignSystem: false,
-  description
-};
-
-export default table_documentation;

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

@@ -1,13 +0,0 @@
-var table_lite = "## Usage\n\nThe `GlTableLite` component wraps BootstrapVue `BTableLite` component.\n`BTableLite` provides a variety of slots for custom data rendering. You can learn\nmore about them in the\n[component documentation](https://bootstrap-vue.org/docs/components/table#light-weight-tables).\n\n## `GlTable` vs. `GlTableLite`\n\n`GlTableLite` adds less payload to the pagebundle than `GlTable`.\nWhen possible `GlTableLite` should be preferred over `GlTable`.\n\nThe `GlTableLite` component provides all of the styling and formatting features of\n`GlTable` (including row details and stacked support), while excluding the following features:\n\n- Filtering\n- Sorting\n- Pagination\n- Items provider support\n- Selectable rows\n- Busy table state and styling\n- Fixed top and bottom rows\n- Empty row support\n\n## Internationalization\n\nTo ensure we internationalize field labels, always pass an array of objects for the `fields` prop,\nlike mentioned in the implementation example.\n\n_Full documentation for the `field` prop [here.](https://bootstrap-vue.org/docs/components/table#fields-column-definitions)_\n\n## Implementation example\n\n```html\n<script>\nexport default {\n  fields: [\n    {\n      key: 'column_one',\n      label: __('Column One'),\n      thClass: 'w-60p',\n      tdClass: 'table-col d-flex'\n    },\n    {\n      key: 'col_2',\n      label: __('Column 2'),\n      thClass: 'w-15p',\n      tdClass: 'table-col d-flex'\n    },\n  ];\n}\n</script>\n<template>\n  <gl-table-lite\n    :items=\"items\"\n    :fields=\"$options.fields\"\n  >\n    <template #head(column_one)>\n      <div>Column One</div><!-- This is the column head for the first object in `fields` -->\n    </template>\n\n    <template #cell(column_one)>\n      This is the template for column data belonging to the first object\n    </template>\n\n  </gl-table-lite>\n</template>\n```\n";
-
-var description = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': table_lite
-});
-
-var table_lite_documentation = {
-  description,
-  bootstrapComponent: 'b-table-lite'
-};
-
-export default table_lite_documentation;

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

@@ -1,8 +0,0 @@
-var description = "Tabs are used to divide content into meaningful, related sections. Tabs allow users to focus on one\nspecific view at a time while maintaining sight of all the relevant content options available. Each\ntab, when active, will reveal it’s own unique content.\n\n## Using the component Vue\n\n~~~html\n<gl-tabs>\n  <gl-tab title=\"Tab 1\">\n    Tab panel 1\n  </gl-tab>\n  <gl-tab title=\"Tab 2\">\n    Tab panel 2\n  </gl-tab>\n</gl-tabs>\n~~~\n\n## Using the component HTML\n\n~~~html\n<div class=\"tabs gl-tabs\">\n  <ul role=\"tablist\" class=\"nav gl-tabs-nav\">\n    <li role=\"presentation\" class=\"nav-item\">\n      <a\n        role=\"tab\"\n        target=\"_self\"\n        href=\"#\"\n        class=\"nav-link gl-tab-nav-item gl-tab-nav-item-active gl-tab-nav-item-active-indigo\"\n      >Tab 1</a>\n    </li>\n    <li role=\"presentation\" class=\"nav-item\">\n      <a role=\"tab\" target=\"_self\" href=\"#\" class=\"nav-link gl-tab-nav-item\">Tab 2</a>\n    </li>\n  </ul>\n  <div class=\"tab-content gl-tab-content\">\n    <div role=\"tabpanel\" class=\"tab-pane gl-tab-content active\">Tab panel 1</div>\n    <div role=\"tabpanel\" class=\"tab-pane gl-tab-content\">Tab panel 2</div>\n  </div>\n</div>\n~~~\n\n## Adding Action Buttons to the Tabs\n\nTabs start and end slot can be populated via props: `action-primary`, `action-secondary` and\n`action-tertiary`. These props allow you to handle how a primary, secondary and tertiary button will\nbehave and look. The props receive an object as such:\n\n~~~js\n{\n  text: 'Save Changes',\n  attributes: {\n    variant: 'info',\n    disabled: this.someState,\n    class: 'some-class',\n    ...\n  }\n}\n~~~\n\n## Scrollable tab buttons\n\nBy default, `GlTab` will wrap tab buttons when they overflow the container. To\nenable horizontally scrolling for the tab buttons, use the `GlScrollableTabs`\ncomponent. This is a separate Vue component because of some limitations:\n\n- The action props (e.g., `action-primary`) are not respected in `GlScrollableTabs`. At the\n  moment, BootstrapVue does not provide a reliable way for us to achieve this desired combination.\n\n`GlScrollableTabs` composes `GlTabs` and passes through every listener, slot, or prop (with the above\nexceptions).\n\n~~~html\n<gl-scrollable-tabs>\n  <gl-tab v-for=\"tab in tabs\" :key=\"tab.key\" :title=\"tab.title\"> {{ tab.content }} </gl-tab>\n</gl-scrollable-tabs>\n~~~\n";
-
-var tabs_documentation = {
-  description,
-  followsDesignSystem: true
-};
-
-export default tabs_documentation;

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

@@ -1,8 +0,0 @@
-var description = "\nToasts are used to display system messages. The messages are short and straightforward. It may\ncontain a dismiss button, and an action button depending on the situation.\n\n## Using the plugin\n\nIn order to use the plugin, it needs to be included in your application with `Vue.use`.\n\n```js\n// myApp.js\n\nimport { GlToast } from '@gitlab/ui';\n\n// Note, this has to be done before `Vue.new()`\nVue.use(GlToast);\n```\n\nOnce included in your application, the toast plugin is globally available.\n\n```js\n// myComponent.vue\n\nthis.$toast.show('Hello GitLab!');\n```\n\nBelow is an example with options\n\n```js\n// myComponent.vue\n\nthis.$toast.show('This is a toast with an option.', {\n  action: {\n    text: 'Undo',\n    onClick: () => { ... },\n  },\n});\n```\n\n### Options\n\nBelow are the options you can pass to create a toast\n\n| **Option**    | **Type**      | **Default** | **Description**                          |\n| ------------- | ------------- | ----------- | ---------------------------------------- |\n| autoHideDelay | Number        | 5000        | Display time of the toast in millisecond |\n| action        | Object        | close       | Add single actions to toast              |\n| toastClass    | String, Array | 'gl-toast'  | Custom css class name of the toast       |\n| onComplete    | Function      | null        | Trigger when toast is completed          |\n";
-
-var toast_documentation = {
-  followsDesignSystem: true,
-  description
-};
-
-export default toast_documentation;

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

@@ -1,13 +0,0 @@
-var toggle = "# Toggle\n\n## Usage\n\nThe toggle component must have a `label` prop to give the toggle button an accessible name.\nTo visually hide the label, provide it with `label-position=\"hidden\"`.\n";
-
-var description = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': toggle
-});
-
-var toggle_documentation = {
-  description,
-  followsDesignSystem: true
-};
-
-export default toggle_documentation;

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

@@ -1,5 +0,0 @@
-var token_documentation = {
-  followsDesignSystem: true
-};
-
-export default token_documentation;

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

@@ -1,12 +0,0 @@
-var token_selector = "Choose from a provided list of tokens or add a user defined token.\n\n```html\n<script>\nexport default {\n  data() {\n    return {\n      selectedTokens: [\n        {\n          id: 1,\n          name: 'Vue.js',\n        },\n      ],\n    };\n  },\n};\n</script>\n\n<template>\n  <div>\n    <gl-token-selector\n      v-model=\"selectedTokens\"\n      :dropdown-items=\"[\n        {\n          id: 1,\n          name: 'Vue.js',\n        },\n        {\n          id: 2,\n          name: 'Ruby On Rails',\n        },\n        {\n          id: 3,\n          name: 'GraphQL',\n        },\n        {\n          id: 4,\n          name: 'Redis',\n        },\n      ]\"\n    />\n    {{ selectedTokens }}\n  </div>\n</template>\n```\n";
-
-var description = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': token_selector
-});
-
-var token_selector_documentation = {
-  description
-};
-
-export default token_selector_documentation;

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

@@ -1,8 +0,0 @@
-var description = "Using the tooltip component is recommended if you have HTML content.\nIt is also currently required if the tooltip content needs to change while it's visible\n(see [this upstream issue][this upstream issue]). In all other cases, please use the directive.\n\n[this upstream issue]: https://github.com/bootstrap-vue/bootstrap-vue/issues/2142\n\n## Using the component\n\n~~~html\n<gl-button ref=\"someButton\">\n  ...\n</gl-button>\n\n<gl-tooltip :target=\"() => $refs.someButton\">\n  some <em>tooltip<em/> text\n</gl-tooltip>\n~~~\n\n## Using the directive\n\nYou will need to import and register `GlTooltipDirective` before you can use it.\n\n~~~html\n<script>\nimport { GlTooltipDirective } from '@gitlab/ui';\n\nexport default {\n  directives: {\n    GlTooltip: GlTooltipDirective,\n  },\n};\n</script>\n\n<element\n  v-gl-tooltip.${modifier}\n  title=\"some tooltip text\"\n>\n  ...\n</element>\n~~~\n\n## Directive attributes\n\n`v-gl-tooltip` directive uses the same attributes as [`v-b-tooltip`][`v-b-tooltip`].\n\n## Under the hood\n\nTooltip uses [`<b-tooltip>`][`<b-tooltip>`] and [`v-b-tooltip`][`v-b-tooltip`] internally.\n\n[`<b-tooltip>`]: https://bootstrap-vue.org/docs/components/tooltip\n\n[`v-b-tooltip`]: https://bootstrap-vue.org/docs/directives/tooltip\n";
-
-var tooltip_documentation = {
-  followsDesignSystem: true,
-  description
-};
-
-export default tooltip_documentation;

package/dist/components/charts/area/area.documentation.js

@@ -1,5 +0,0 @@
-var area_documentation = {
-  followsDesignSystem: false
-};
-
-export default area_documentation;

package/dist/components/charts/bar/bar.documentation.js

@@ -1,8 +0,0 @@
-var description = "A bar chart is similar to a column chart where the the length of bars represents the data value.\nAlthough alike, they are cannot be interchangeably used. Bar charts are good for displaying large\nnumber of categories on the y-axis.\n";
-
-var bar_documentation = {
-  followsDesignSystem: true,
-  description
-};
-
-export default bar_documentation;

package/dist/components/charts/chart/chart.documentation.js

@@ -1,7 +0,0 @@
-var description = "### ECharts Wrapper\n\nThe chart component is a Vue component wrapper around [ECharts]. The chart component accepts width\nand height props in order to allow the user to make it responsive, but it is not responsive by\ndefault.\n\n> Note: In every case there should be a specific component for each type of chart\n(i.e. Line, Area, Bar, etc.). This component should only need to be used by chart type components\nwithin GitLab UI as opposed to being used directly within any other codebase.\n\n### EChart Lifecycle\n\nThis component emits the following events during the ECharts lifecycle:\n\n- `created`: emitted after calling `echarts.init`\n- `updated`: emitted after calling `echarts.setOption`\n\nIn all cases, the event payload is the echart instance.\n\n[echarts]: https://echarts.apache.org\n";
-
-var chart_documentation = {
-  description
-};
-
-export default chart_documentation;

package/dist/components/charts/column/column.documentation.js

@@ -1,5 +0,0 @@
-var column_documentation = {
-  followsDesignSystem: true
-};
-
-export default column_documentation;

package/dist/components/charts/discrete_scatter/discrete_scatter.documentation.js

@@ -1,5 +0,0 @@
-var discrete_scatter_documentation = {
-  followsDesignSystem: true
-};
-
-export default discrete_scatter_documentation;

package/dist/components/charts/gauge/gauge.documentation.js

@@ -1,12 +0,0 @@
-var gauge = "Some layout problems can be encountered with this component. Specifically, when the gauge chart's\naxis labels or detail text have larger widths, they can overlap with the chart elements.\n\nAlso, when the containing element of the gauge chart has either of a small calculated `width` and\n`height`, its axis width could become bulkier in relation to other chart elements. This is because\nat this time [eCharts only allows for setting the axis line width in absolute units](https://echarts.apache.org/en/option.html#series-gauge.axisLine.lineStyle.width).\n\nThis issue is to be addressed by [https://gitlab.com/gitlab-org/gitlab-ui/-/issues/916](https://gitlab.com/gitlab-org/gitlab-ui/-/issues/916).\n";
-
-var description = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': gauge
-});
-
-var gauge_documentation = {
-  description
-};
-
-export default gauge_documentation;

package/dist/components/charts/heatmap/heatmap.documentation.js

@@ -1,8 +0,0 @@
-var description = "## Heatmaps\n\n**Note** This component uses `<gl-legend>`, which should allow a user to click on any data point(s)\nin the legend and make the corresponding data point(s) on the chart rendered disappear.\n_See [area chart](https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/charts-area-chart--default)\nfor an example_ For this particular chart, there is a [known issue](https://gitlab.com/gitlab-org/gitlab-ui/issues/352)\nwith the functionality of the legend, where clicking on it does nothing.\n";
-
-var heatmap_documentation = {
-  description,
-  followsDesignSystem: true
-};
-
-export default heatmap_documentation;

package/dist/components/charts/line/line.documentation.js

@@ -1,8 +0,0 @@
-var description = "This is a basic line chart.\n\n### Implementation Details\n\nThis component wraps the Gitlab UI `chart` component, which in turn wraps the ECharts component.\n\nSee the [chart](./?path=/story/charts-chart--default) component for more info.\n";
-
-var line_documentation = {
-  followsDesignSystem: false,
-  description
-};
-
-export default line_documentation;

package/dist/components/charts/series_label/series_label.documentation.js

@@ -1,7 +0,0 @@
-var description = "Displays chart data series name as a label for chart legend, tooltip, etc.\n";
-
-var series_label_documentation = {
-  description
-};
-
-export default series_label_documentation;

package/dist/components/charts/single_stat/single_stat.documentation.js

@@ -1,7 +0,0 @@
-var description = "The single stat component is used to show a single value. The color of the meta icon / badge is\ndetermined by the **variant** prop, which can be one of \"success\", \"warning\", \"danger\", \"info\",\n\"neutral\" or \"muted\" (default).\n\n#### Hover state\n\nYou can make the component focusable by adding a `tabindex=0` attribute to it. This will also apply\na hover state to the component.\n";
-
-var single_stat_documentation = {
-  description
-};
-
-export default single_stat_documentation;

package/dist/components/charts/sparkline/sparkline.documentation.js

@@ -1,8 +0,0 @@
-var description = "\nThis is a basic sparkline chart.\n\n### Implementation Details\n\nThis component wraps the Gitlab UI `chart` component, which in turn wraps the ECharts component.\n\nSee the [chart](./?path=/story/charts-chart--default) component for more info.\n";
-
-var sparkline_documentation = {
-  followsDesignSystem: false,
-  description
-};
-
-export default sparkline_documentation;

package/dist/components/charts/stacked_column/stacked_column.documentation.js

@@ -1,8 +0,0 @@
-var description = "The `presentation` property allows you to change between a stacked and tiled presentation style. It\nis only setup to accept `stacked` or `tiled` as values, the default value is `tiled`.\n\nThe `stacked` presentation allows to view multiple series of the same stack as a single column,\nwhile `tiled` presents the information in multiple columns for each series of a stack.\n\n`groupBy` is a property that defines how the data is going to be grouped by for each of the series\nthat the `data` property provides. For example if the `data` property has a total of 3 series, with\n7 elements each, `groupBy` could use a 7 element array to show 7 stacked bars or 7 groups of bars\ndepending on the preference set by the `presentation` property.\n";
-
-var stacked_column_documentation = {
-  followsDesignSystem: false,
-  description
-};
-
-export default stacked_column_documentation;