@gitlab/ui 39.2.0 → 39.3.1

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;

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

@@ -1,8 +0,0 @@
-var description = "### ECharts custom tooltip\n\nUses GitLab UI's `popover` component in lieu of echart's tooltip.\n";
-
-var tooltip_documentation = {
-  followsDesignSystem: false,
-  description
-};
-
-export default tooltip_documentation;

package/dist/components/editors/rich_text_editor/rich_text_editor.documentation.js

@@ -1,12 +0,0 @@
-var rich_text_editor = "<!--\nBriefly describe the component's purpose here.\nThis should correspond to the short description in Pajamas' website: https://design.gitlab.com/components/status/\n-->\n\nThe Rich Text Editor is a UI component that provides a WYSIWYG editing\nexperience for[GitLab Flavored Markdown](https://docs.gitlab.com/ee/user/markdown.md#gitlab-flavored-markdown-gfm)\n(GFM) in the GitLab application.\nIt also serves as the foundation for implementing Markdown-focused editors that target other engines,\nlike static site generators.\n\n<!-- Provide technical information on how to use the component, add code examples if relevant. -->\n\n<!--\n## Dos and don'ts\n\nIf relevant, describe how the component is expected to be used, and how it's not.\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': rich_text_editor
-});
-
-var rich_text_editor_documentation = {
-  description
-};
-
-export default rich_text_editor_documentation;

package/dist/components/regions/dashboard_skeleton/dashboard_skeleton.documentation.js

@@ -1,7 +0,0 @@
-var description = "## Dashboard Skeleton\n\nThis is a skeleton loading component for a dashboards page. Renders three cards, but can be adjusted\nbased on the `cards` prop.\n";
-
-var dashboard_skeleton_documentation = {
-  description
-};
-
-export default dashboard_skeleton_documentation;

package/dist/components/regions/empty_state/empty_state.documentation.js

@@ -1,7 +0,0 @@
-var description = "### Buttons\n\nYou can either have a primary button, a secondary button, or both.\nButtons require both text a link in order for the button to render.\n";
-
-var empty_state_documentation = {
-  description
-};
-
-export default empty_state_documentation;

package/dist/components/utilities/animated_number/animated_number.documentation.js

@@ -1,13 +0,0 @@
-var animated_number = "Animated numbers provide a signifier that values are being changed.\n\n## Usage\n\nThe animated number component can be used with or without decimal places. Decimal places will\nnot be rounded if chosen to be omitted.\n";
-
-var description = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': animated_number
-});
-
-var animated_number_documentation = {
-  description,
-  followsDesignSystem: false
-};
-
-export default animated_number_documentation;

package/dist/components/utilities/friendly_wrap/friendly_wrap.documentation.js

@@ -1,7 +0,0 @@
-var description = "The friendly-wrap component lets you wrap text in a predictable way by appending [`<wbr>`] elements\nto specific break-symbols.\n\n[`<wbr>`]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr\n\n## Internet Explorer 11\n\nIE11 doesn't support the `<wbr>` element: <https://caniuse.com/#search=wbr>\nTo use this component on IE11, you'll need some CSS to preserve its behaviour:\n\n```css\nwbr {\n  display: inline-block;\n}\n```\n\n## Usage\n\n### Default\n\nBy default, `GlFriendlyWrap` wraps text with slashes (`/`) as the break-symbol, which is especially\nuseful when displaying paths or URLs:\n\n```html\n<gl-friendly-wrap text=\"/some/file/path\" />\n```\n\nThe code above renders to the following HTML:\n\n```html\n<span class=\"text-break\">/<wbr>some/<wbr>file/<wbr>path</span>\n```\n\n### Custom symbols\n\nMultiple custom break-symbols can be defined via the `GlFriendlyWrap` prop:\n\n```html\n<gl-friendly-wrap\n  :symbols=\"[';', '-', '.']\"\n  text=\"some;text-that.needs;to-be.wrapped\"\n/>\n```\n\nWhich renders to:\n\n```html\n<span class=\"text-break\">some;<wbr>text-<wbr>that.<wbr>needs;<wbr>to-<wbr>be.<wbr>wrapped</span>\n```\n\n### Break words\n\nSymbols can be words too:\n\n```html\n<gl-friendly-wrap\n  :symbols=\"['and']\"\n  text=\"it goes on and on and on and on\"\n/>\n```\n\nWhich renders to:\n\n```html\n<span class=\"text-break\">it goes on and<wbr> on and<wbr> on and<wbr> on</span>\n```\n";
-
-var friendly_wrap_documentation = {
-  description
-};
-
-export default friendly_wrap_documentation;

package/dist/components/utilities/intersection_observer/intersection_observer.documentation.js

@@ -1,12 +0,0 @@
-var intersection_observer = "This intersection observer component is an invisible watcher that emits events when it appears and\ndissapears from view.\n\nIt acts a a vue-friendly wrapper around the [intersection observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).\n\nBecause of it's simplicity you can use it for a lot of different things.\nIt's especially helpful for the lazy loading of images, and infinite scrolling of lists.\n\nAnything slotted inside this component will become the element that is being observed.\n\nThis slot can also be used as a fallback for the browsers that don't support the intersection\nobserver, or in the case that the observer fails to work.\nFor example, adding a \"Fetch more posts\" button inside an observer that should fetch more posts\nautomatically when visible. If the observer fails to work for any reason, the button will still be\nclickable, and the experience preserved. Please use a fallback wherever possible as\n**the intersection observer API is not supported in IE11**.\n";
-
-var description = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': intersection_observer
-});
-
-var intersection_observer_documentation = {
-  description
-};
-
-export default intersection_observer_documentation;

package/dist/components/utilities/intersperse/intersperse.documentation.js

@@ -1,8 +0,0 @@
-var description = "The intersperse component separates a list of elements\nby a given character (the default is `, `).\n\nIt takes all direct descendants of its default slot and inserts\nthe given separator between each item:\n\n`item 1, item 2, item 3`\n\nOptionally the character used for separating each item and the last separator can be set\nindependently:\n\n* `separator=\"/\"`  renders `item 1/item 2/item 3`\n* `lastSeparator=\" and \"` will render `item 1, item 2, and item 3`\n* `lastSeparator=\" and \"` and given two items will render `item 1 and item 2`\n\n**Note**:\n\nThe component provides an inline context since the result is wrapped in a `span`.\n\nAlso, whitespace elements that are direct children of the default-slot get removed to ensure\nconsistent formatting.\n\n## Usage\n\n### Default\n\n```html\n<gl-intersperse>\n    <span>Item 1</span>\n    <span>Item 2</span>\n    <span>Item 3</span>\n</gl-intersperse>\n```\n\nThis renders to the following HTML:\n\n```html\n<span><span>Item 1</span>, <span>Item 2</span>, <span>Item 3</span></span>\n```\n\n### Custom Separator\n\nA custom separator can be defined via the `separator` prop:\n\n```html\n<gl-intersperse separator=\"/\">\n    <span>Item 1</span>\n    <span>Item 2</span>\n    <span>Item 3</span>\n</gl-intersperse>\n```\n\nThis renders to the following HTML:\n\n```html\n<span><span>Item 1</span>/<span>Item 2</span>/<span>Item 3</span></span>\n```\n\n### Custom Last Separator\n\nA custom last separator can be defined via the `lastSeparator` prop:\n\n```html\n<gl-intersperse last-separator=\" and \">\n    <span>Item 1</span>\n    <span>Item 2</span>\n    <span>Item 3</span>\n</gl-intersperse>\n```\n\nThis renders to the following HTML:\n\n```html\n<span><span>Item 1</span>, <span>Item 2</span>, and <span>Item 3</span></span>\n```\n\nA custom last separator used on two items will only place `lastSeparator` between them:\n\n```html\n<gl-intersperse last-separator=\" and \">\n    <span>Item 1</span>\n    <span>Item 2</span>\n</gl-intersperse>\n```\n\nThis renders to the following HTML:\n\n```html\n<span><span>Item 1</span> and <span>Item 2</span></span>\n```\n";
-
-var intersperse_documentation = {
-  followsDesignSystem: false,
-  description
-};
-
-export default intersperse_documentation;

package/dist/components/utilities/sprintf/sprintf.documentation.js

@@ -1,8 +0,0 @@
-var description = "## Overview\n\nThe `GlSprintf` component lets you do `sprintf`-style string interpolation with\nchild components. Each placeholder in the translated string, provided via the\n`message` prop, becomes a slot that you can use to insert any components or\nmarkup in the rendered output.\n\n> NOTE: `gl-sprintf` does not translate the message for you; you must provide\n> it already translated. In the following examples, it is assumed that\n> a `gettext`-style `__` translation function is available in your Vue\n> templates.\n\n## Displaying messages with text between placeholders (e.g., links, buttons)\n\nSentences should not be split up into different messages, otherwise they may\nnot be translatable into certain languages. To help with this, `GlSprintf`\ninterprets placeholders suffixed with `Start` and `End` to indicate the\nboundaries of a component to display within the message. Any text between\nthem is passed, via the `content` scoped slot property, to the slot name common\nto the placeholders.\n\nFor example, using `linkStart` and `linkEnd` placeholders in a message defines\na `link` scoped slot:\n\n```html\n<div>\n  <gl-sprintf :message=\"__('Learn more about %{linkStart}zones%{linkEnd}')\">\n    <template #link=\"{ content }\">\n      <gl-link\n        href=\"https://cloud.google.com/compute/docs/regions-zones/regions-zones\"\n        target=\"_blank\"\n      >{{ content }}</gl-link>\n    </template>\n  </gl-sprintf>\n</div>\n```\n\nwill render as:\n\n```html\n<div>\n  Learn more about\n  <a\n    href=\"https://cloud.google.com/compute/docs/regions-zones/regions-zones\"\n    target=\"_blank\"\n    rel=\"noopener noreferrer\"\n  >zones</a>\n</div>\n```\n\nNote that _any_ arbitrary HTML tags or Vue component(s) can be used within\na scoped slot, and that the content passed to it can be used in any way at all;\nfor instance, as regular text, or in component attributes or slots.\n\nHere's a more complex example, which `<gl-sprintf>` lets you do in a breeze:\n\n```html\n<div>\n  <gl-sprintf :message=\"__('Written by %{authorStart}someone%{authorEnd}')\">\n    <template #author=\"{ content }\">\n      <my-vue-component v-gl-tooltip=\"content\" @event=\"handleEvent(content)\">\n        {{ content }}\n      </my-vue-component>\n      <p>\n          {{ content }}\n          <div>{{ content }}</div>\n      </p>\n    </template>\n  </gl-sprintf>\n</div>\n```\n\nThis is not feasible in a JS-only solution, since arbitrary Vue components\ncannot easily be used. In addition, a JS-only solution is more likely to be\nprone to XSS attacks, as the Vue compiler isn't available to help protect\nagainst them.\n\n### Customizing start/end placeholders\n\nYou can customize the start and end placeholders that `GlSprintf` looks for\nusing the `placeholders` prop. For instance:\n\n```html\n<div>\n  <gl-sprintf\n    :message=\"__('Learn more about %{my_custom_start}zones%{my_custom_end}')\"\n    :placeholders=\"{ link: ['my_custom_start', 'my_custom_end'] }\"\n  >\n    <template #link=\"{ content }\">\n      <gl-link\n        href=\"https://cloud.google.com/compute/docs/regions-zones/regions-zones\"\n        target=\"_blank\"\n      >{{ content }}</gl-link>\n    </template>\n  </gl-sprintf>\n</div>\n```\n\nThis can be useful if you are migrating an existing string to `GlSprintf` that\nuses different placeholder naming conventions, and don't want invalidate\nexisting translations.\n\n## Displaying components within a message\n\nUse slots to replace placeholders in the message with the slots' contents.\nThere is a slot for every placeholder in the message. For example, the `author`\nslot name can be used when there is an `%{author}` placeholder in the message:\n\n```html\n<script>\nexport default {\n  data() {\n    return {\n      authorName: 'Some author',\n    };\n  },\n};\n</script>\n\n<template>\n  <div>\n    <gl-sprintf :message=\"__('Written by %{author}')\">\n      <template #author>\n        <span>{{ authorName }}</span>\n      </template>\n    </gl-sprintf>\n  </div>\n</template>\n```\n\nThe example above renders to this HTML:\n\n```html\n<div>Written by <span>Some author</span></div>\n```\n\n## Usage caveats\n\n### White space\n\n`GlSprintf` does not handle white space in scoped slots specially; it is passed\nthrough and rendered just like regular text. This means that white space in the\nscoped slot templates *themselves*, including newlines and indentation, are\npassed through untouched (assuming the template compiler you're using doesn't\ntrim text nodes at compile time; `vue-template-compiler` preserves white space\nby default, for instance).\n\nMost of the time you don't need to worry about this, since\n[browsers normalize white space][1] automatically, but here's an example, using\npunctuation, where you might want to be conscious of the white space in the\ntemplate:\n\n```html\n<div>\n  <gl-sprintf :message=\"__('Foo %{boldStart}bar%{boldEnd}!')\">\n    <template #bold=\"{ content }\">\n      <b>\n        {{ content }}\n      </b>\n    </template>\n  </gl-sprintf>\n</div>\n```\n\nAs written, the literal markup rendered would be:\n\n```html\n<div>  Foo <b>\n        bar\n      </b>!\n</div>\n```\n\nwhere the white space (including newlines) before and after `bar` is exactly\nthe newlines and indentation in the source template. The browser will render\nthis as:\n\n<div>  Foo <b>\n        bar\n      </b>!\n</div>\n\nNote the single space between `bar` and `!`. To avoid that, remove the\nwhite space in the template, or use `v-text`:\n\n```html\n<div>\n  <gl-sprintf :message=\"__('Foo %{boldStart}bar%{boldEnd}!')\">\n    <template #bold=\"{ content }\">\n      <b>{{ content }}</b>\n      <!-- OR -->\n      <b v-text=\"content\" />\n    </template>\n  </gl-sprintf>\n</div>\n```\n\n### Miscellaneous\n\nWhile there are a lot of caveats here, you don't need to worry about reading\nthem _unless_ you find `GlSprintf` isn't rendering what you'd expect.\n\n- Since `GlSprintf` typically renders multiple elements, it can't be used as\n  a component's root, it must be wrapped with at least one other root element,\n  otherwise Vue will throw a `Multiple root nodes returned from render\n  function` error.\n- If a slot for a given placeholder _isn't_ provided, the placeholder\n  will be rendered as-is, e.g., literally `Written by %{author}` if the\n  `author` slot _isn't_ provided, or literally `%{linkStart}foo%{linkEnd}` if\n  the `link` slot isn't provided.\n- Content between `Start` and `End` placeholders is effectively thrown away if\n  the scoped slot of the correct name doesn't consume the `content` property in\n  some way, though the slot's components should still be rendered.\n- If there's no placeholder in the message for a provided named slot, the\n  content of that slot is silently thrown away.\n- If only one of the `Start` or `End` placeholders is in the message, or they\n  are in the wrong order, they are treated as plain slots, i.e., it is assumed\n  there is no text to extract and pass to the scoped slot. This allows you to\n  use plain slots whose names end in `Start` or `End`, e.g., `backEnd`, or\n  `fromStart` in isolation, without their `Start`/`End` counterparts.\n- Text extraction between `Start` and `End` placeholders is only done one level\n  deep. This is intentional, so as to avoid building complex sprintf messages\n  that would better be implemented in components. As an example,\n  `${linkStart}test%{icon}%{linkEnd}`, if provided both the `link` and `icon`\n  slots, would pass `test%{icon}` as a literal string as content to the `link`\n  scoped slot.\n- For more examples and edge cases, please see the test suite for `GlSprintf`.\n- To be successfully used in `GlSprintf`, slot names should:\n  - start with a letter (`[A-Za-z]`)\n  - only contain alpha-numeric characters (`[A-Za-z0-9]`), underscore (`_`) and\n    dash (`-`),\n  - should not end with underscore (`_`) or dash (`-`) So for example:\n    `%{author}`, `%{author_name}`, `%{authorName}` or `%{author-name-100}` are\n    all valid placeholders.\n\n## Internet Explorer 11\n\nThis component uses [`String.prototype.startsWith()`] and [`String.prototype.endsWith()`] under the\nhood. Make sure those methods are polyfilled if you plan on using the component on IE11.\n\n[1]: https://www.w3.org/TR/css-text-3/#white-space-phase-1\n[`String.prototype.startsWith()`]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith\n[`String.prototype.endsWith()`]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith\n";
-
-var sprintf_documentation = {
-  description,
-  followsDesignSystem: false
-};
-
-export default sprintf_documentation;

package/dist/components/utilities/truncate/truncate.documentation.js

@@ -1,7 +0,0 @@
-var description = "The `GlTruncate` component lets you truncate the long texts with ellipsis.\n\n> **Tip:** Try resizing the side panel for truncation.\n\n## Usage\n\n```html\n<gl-truncate :text=\"text\" :position=\"position\" />\n```\n\nBy default, the ellipsis position is at the `end`.\n\nPro Tip: Truncating long filepaths from the `middle` / `start` can help preventing the important\ninformation in the end, i.e. filenames.\n";
-
-var truncate_documentation = {
-  description
-};
-
-export default truncate_documentation;