@gitlab/ui 39.3.0 → 39.4.0

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;

package/dist/directives/hover_load/hover_load.documentation.js

@@ -1,13 +0,0 @@
-var hover_load = "A Vue Directive to help with preloading resources when hovering over an element.\n\n## Usage\n\n```html\n<script>\nimport { GlHoverLoadDirective } from '@gitlab/ui';\n\nexport default {\n  directives: { GlHoverLoadDirective },\n  methods: {\n    handlePreload() {\n      fetch('some/endpoint');\n    },\n  },\n};\n</script>\n\n<template>\n  <div v-gl-hover-load=\"handlePreload\">Hover me to preload</div>\n</template>\n```\n";
-
-var description = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': hover_load
-});
-
-var hover_load_documentation = {
-  description,
-  followsDesignSystem: false
-};
-
-export default hover_load_documentation;

package/dist/directives/outside/outside.documentation.js

@@ -1,13 +0,0 @@
-var outside = "A Vue Directive to call a callback when a click occurs *outside* of the element\nthe directive is bound to. Any clicks on the element or any descendant elements are ignored.\n\n## Usage\n\n```html\n<script>\nimport { GlOutsideDirective as Outside } from '@gitlab/ui';\n\nexport default {\n  directives: { Outside },\n  methods: {\n    onClick(event) {\n      console.log('User clicked somewhere outside of this component', event);\n    },\n  },\n};\n</script>\n\n<template>\n  <div v-outside=\"onClick\">Click anywhere but here</div>\n</template>\n```\n\n## Caveats\n\n- If a click event is stopped (e.g., via `event.stopPropagation()`) before it\n  bubbles up to the `document`, it cannot be detected by `GlOutsideDirective`.\n- Clicks cannot be detected across document boundaries (e.g., across an\n  `iframe` boundary), in either direction.\n";
-
-var description = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': outside
-});
-
-var outside_documentation = {
-  description,
-  followsDesignSystem: false
-};
-
-export default outside_documentation;

package/dist/directives/resize_observer/resize_observer.documentation.js

@@ -1,8 +0,0 @@
-var description = "This directive can be used to get notified whenever a given element's size (width or height) changes\nand to retrieve the updated dimensions.\n\nUnder the hood, it leverages the [Resize Observer API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).\nIf you use GitLab UI in an older browser which doesn't support the Resize Observer API,\nyou can use a [polyfill](https://github.com/que-etc/resize-observer-polyfill).\n\nThe directive accepts a callback as a value and passes on the received\n[contentRect](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry/contentRect)\nand the target element whenever a resize event gets triggered.\n\n```html\n<script>\nexport default {\n  data() {\n    return {\n      width: 0,\n      height: 0,\n    };\n  },\n  methods: {\n    handleResize({ contentRect: { width, height } }) {\n      this.width = width;\n      this.height = height;\n    },\n  },\n};\n</script>\n<template>\n  <div v-gl-resize-observer-directive=\"handleResize\">\n    <p>{{ width }} x {{ height }}</p>\n  </div>\n</template>\n```\n\nThe observer can be toggled on or off by passing a boolean argument to the directive:\n\n```html\n<script>\nexport default {\n  data() {\n    return {\n      shouldObserve: true,\n    };\n  },\n  methods: {\n    handleResize() {},\n  },\n};\n</script>\n<template>\n  <div v-gl-resize-observer-directive[shouldObserve]=\"handleResize\"></div>\n</template>\n```\n";
-
-var resize_observer_documentation = {
-  followsDesignSystem: false,
-  description
-};
-
-export default resize_observer_documentation;

package/dist/directives/safe_html/safe_html.documentation.js

@@ -1,8 +0,0 @@
-var description = "A Vue Directive to sanitize HTML to avoid any XSS vulnerabilities.\n\n## Usage\n\nThis directive can be used to sanitize HTML code which may contain user input, to prevent cross-site\nscripting (XSS) vulnerabilities.\n\nUnder the hood, it uses [DOMPurify](https://github.com/cure53/DOMPurify) to sanitize the provided HTML.\n\nDOMPurify will strip out dangerous HTML and will keep the safe HTML. You can refer complete list of\n[tags][1] and [attributes][2] allowed by DOMPurify.\n\n[1]: https://github.com/cure53/DOMPurify/blob/main/src/tags.js\n[2]: https://github.com/cure53/DOMPurify/blob/main/src/attrs.js\n\n## Example\n\n```html\n<script>\nimport { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';\n\nexport default {\n  directives: {\n    SafeHtml,\n  },\n  data() {\n    return {\n      rawHtml: \"Hello! <script>alert('XSS')</script>\",\n    };\n  },\n};\n</script>\n\n<template>\n  <div v-safe-html=\"rawHtml\"></div>\n</template>\n```\n\n## Advanced configuration\n\n```js\n// It allows only <b> tags\nconst config = { ALLOWED_TAGS: ['b'] };\n\n// It doesn't allow any html tags\nconst config = { ALLOWED_TAGS: [] };\n```\n\n```html\n<div v-safe-html:[config]=\"rawHtml\"></div>\n```\n\nFor advanced configuration options, please refer to [DOMPurify's documentation](https://github.com/cure53/DOMPurify#can-i-configure-dompurify).\n\n### Notes\n\n1. `target` attribute is not allowed by default - See <https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1427>.\n1. To know more about other tips & caveats - See <https://gitlab.com/groups/gitlab-org/-/epics/4273#caveats>.\n";
-
-var safe_html_documentation = {
-  followsDesignSystem: false,
-  description
-};
-
-export default safe_html_documentation;

package/dist/directives/safe_link/safe_link.documentation.js

@@ -1,8 +0,0 @@
-var description = "A Vue directive to make the hyperlinks secure by default.\n\n## Security measures\n\n### rel\n\nWhen setting target to `_blank`, the rel attribute gets set automatically to `noopener noreferrer`,\nthis is done to avoid the `window.opener` [API exploit]. If you set the `rel` attribute manually,\nthis will overwrite the aforementioned logic.\n\n### href\n\nThis directive enforces \"safe\" URLs. What this means is that, if the provided `href`\ndoesn't point to a safe protocol (one of `http:`, `https:`, `mailto:` or `ftp:`), then it is\nreplaced with `about:blank` to prevent [URL injections].\n\n```html\n<script>\nimport { GlSafeLinkDirective as SafeLink } from '@gitlab/ui';\n\nexport default {\n  data() {\n    return {\n      url: 'javascript:alert(1)',\n    };\n  },\n  directives: { SafeLink },\n};\n</script>\n<template>\n  <a v-safe-link href=\"url\" target=\"_blank\">Click</a>\n  <!-- Renders to: <a href=\"about:blank\" target=\"_blank\">Click</a> -->\n</template>\n```\n\n[API exploit]: https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/\n[URL injections]: https://vuejs.org/v2/guide/security.html#Injecting-URLs\n";
-
-var safe_link_documentation = {
-  followsDesignSystem: false,
-  description
-};
-
-export default safe_link_documentation;

package/documentation/all_components.js

@@ -1,8 +0,0 @@
-import * as chartComponents from '../src/charts';
-import * as components from '../src';
-
-export const gitlabComponents = { ...components, ...chartComponents };
-export const gitlabChartComponents = { ...chartComponents };
-
-export const componentValidator = (componentName) =>
-  Object.keys(gitlabComponents).includes(componentName);

package/documentation/components/component_documentation_generator.vue

@@ -1,321 +0,0 @@
-<script>
-import BootstrapVue from 'bootstrap-vue';
-import * as vueComponents from 'bootstrap-vue/src/components/index';
-import { isString, isUndefined } from 'lodash';
-import camelCase from 'lodash/camelCase';
-import isArray from 'lodash/isArray';
-import isFunction from 'lodash/isFunction';
-import kebabCase from 'lodash/kebabCase';
-import merge from 'lodash/merge';
-import Vue from 'vue';
-
-import GlBadge from '../../src/components/base/badge/badge.vue';
-import GlTable from '../../src/components/base/table/table.vue';
-import * as enumConstants from '../../src/utils/constants';
-import { getValidationInfoText } from '../../src/utils/validation_utils';
-
-import { gitlabComponents, gitlabChartComponents, componentValidator } from '../all_components';
-
-import { getDocumentationFor } from '../components_documentation';
-
-Vue.use(BootstrapVue);
-
-function getPropDefaultValue(defaultValue) {
-  let returnValue = '';
-  if (isString(defaultValue)) {
-    returnValue = defaultValue;
-  }
-  if (isFunction(defaultValue) && !isArray(defaultValue)) {
-    returnValue = defaultValue();
-  }
-  if (!isString(defaultValue) && !isUndefined(defaultValue)) {
-    returnValue = JSON.stringify(defaultValue);
-  }
-
-  if (defaultValue === null || defaultValue === undefined) {
-    returnValue = String(defaultValue);
-  }
-
-  if (isString(returnValue)) returnValue = returnValue.replace(/"/g, "'");
-  return returnValue;
-}
-
-export default {
-  components: {
-    GlTable,
-    GlBadge,
-  },
-  props: {
-    componentName: {
-      type: String,
-      required: false,
-      default: 'Link',
-      validator: componentValidator,
-    },
-  },
-  computed: {
-    actualComponent() {
-      if (gitlabComponents[this.componentName]) {
-        return Vue.options.components[this.componentName] || {};
-      }
-      return {};
-    },
-    importSubDir() {
-      if (gitlabChartComponents[this.componentName]) {
-        return '/dist/charts';
-      }
-      return '';
-    },
-    actualComponentOptions() {
-      return this.actualComponent.options || {};
-    },
-    componentVModel() {
-      const { model } = this.actualComponentOptions;
-
-      if (!model) {
-        return null;
-      }
-
-      return {
-        prop: 'value',
-        event: 'input',
-        ...model,
-      };
-    },
-    documentationInfo() {
-      return getDocumentationFor(this.componentName);
-    },
-    bootstrapComponentName() {
-      return this.documentationInfo.bootstrapComponent || '';
-    },
-    bootstrapComponentLink() {
-      return this.bootstrapComponentName.replace('b-', '').toLowerCase();
-    },
-    bootstrapComponentOptions() {
-      const bootstrapRegisterName = this.bootstrapComponentName
-        ? this.bootstrapComponentName[0].toUpperCase() +
-          camelCase(this.bootstrapComponentName).substr(1)
-        : '';
-      const bootstrapComponent = vueComponents[bootstrapRegisterName];
-      return bootstrapComponent && bootstrapComponent.options ? bootstrapComponent.options : {};
-    },
-    componentPropertiesFields() {
-      return [
-        { key: 'prop', label: 'Property' },
-        { key: 'type', label: 'Type' },
-        { key: 'required', label: 'Required' },
-        { key: 'val', label: 'Value' },
-      ];
-    },
-    eventsFields() {
-      return [
-        { key: 'event', label: 'Event' },
-        { key: 'args', label: 'Arguments' },
-        { key: 'description', label: 'Description' },
-      ];
-    },
-    componentProperties() {
-      const { props } = this.actualComponentOptions;
-      if (!props) return [];
-      if (this.documentationInfo.propsInfo) {
-        merge(props, this.documentationInfo.propsInfo);
-      }
-      return this.getPropsMap(props);
-    },
-    bootstrapComponentProperties() {
-      const { props } = this.bootstrapComponentOptions;
-      if (!props) return [];
-      if (this.documentationInfo.bootstrapPropsInfo) {
-        merge(props, this.documentationInfo.bootstrapPropsInfo);
-      }
-      return this.getPropsMap(props);
-    },
-    displayComponentProperties() {
-      let returnProps = Object.assign([], this.componentProperties);
-      const bootstrapProps = this.bootstrapComponentProperties;
-
-      if (bootstrapProps && bootstrapProps.length > 0) {
-        const applyableBootstrapProps = bootstrapProps.reduce((actualProps, prop) => {
-          const checkComp = returnProps.find((checkProp) => checkProp.prop === prop.prop);
-          if (!checkComp) {
-            // eslint-disable-next-line no-param-reassign, no-underscore-dangle
-            prop._cellVariants = { prop: 'info' };
-            actualProps.push(prop);
-          }
-          return actualProps;
-        }, []);
-        returnProps = returnProps.concat(applyableBootstrapProps);
-      }
-
-      return returnProps;
-    },
-    displayEvents() {
-      const events = this.documentationInfo.events || [];
-      if (this.componentVModel) {
-        const vModelEventIndex = events.findIndex(
-          ({ event }) => event === this.componentVModel.event
-        );
-        if (vModelEventIndex === -1) {
-          events.push({
-            event: this.componentVModel.event,
-            args: [
-              {
-                arg: this.componentVModel.prop,
-              },
-            ],
-          });
-        }
-      }
-      return events;
-    },
-    displaySlots() {
-      return this.documentationInfo.slots || [];
-    },
-  },
-  methods: {
-    getPropsMap: (props) =>
-      Object.keys(props).map((prop) => {
-        const selProp = props[prop];
-
-        // Copying over values if available from documentation definition
-        const propsInfo = {
-          prop: kebabCase(prop),
-          required: selProp.required,
-          additionalInfo: selProp.additionalInfo,
-          validationInfo: getValidationInfoText(selProp.validation),
-        };
-
-        // Figuring out the actual type of this property
-        const baseType = selProp.type || Object;
-        if (Array.isArray(baseType)) {
-          propsInfo.type = baseType.map((t) => t.name).join(' or ');
-        } else {
-          propsInfo.type = baseType.name;
-        }
-
-        // Getting the defaultValue and setting it then also the value
-        if (propsInfo.type === 'Function' && isFunction(selProp.default)) {
-          propsInfo.val = selProp.default.toString();
-        } else if ('default' in selProp) {
-          propsInfo.val = getPropDefaultValue(selProp.default);
-        } else {
-          propsInfo.val = '';
-        }
-
-        // If we have an enum on this property we assign it and look up its values in the constant file
-        if (selProp.enum) {
-          propsInfo.enum = selProp.enum;
-          propsInfo.enumValues = Object.values(enumConstants[selProp.enum]);
-        }
-
-        return propsInfo;
-      }),
-  },
-};
-</script>
-
-<template>
-  <div v-if="actualComponent.options">
-    <div v-if="displayComponentProperties.length > 0">
-      <h3>Props</h3>
-      <gl-table
-        :items="displayComponentProperties"
-        :fields="componentPropertiesFields"
-        small
-        head-variant="default"
-        striped
-      >
-        <template #cell(prop)="field">
-          <div>
-            <span :title="field.item._cellVariants ? 'Inherited from Vue Bootstrap' : ''">
-              {{ field.value }}
-              <gl-badge
-                v-if="componentVModel && field.value === componentVModel.prop"
-                variant="info"
-              >
-                v-model
-              </gl-badge>
-            </span>
-          </div>
-        </template>
-        <template #cell(required)="data">
-          <span v-if="data.value === true">✅</span>
-        </template>
-        <template #cell(val)="data">
-          <code v-if="data.value">
-            {{ data.value }}
-          </code>
-          <template v-if="data.item.validationInfo">({{ data.item.validationInfo }})</template>
-          <div v-if="data.item.additionalInfo">
-            <i>{{ data.item.additionalInfo }}</i>
-          </div>
-          <template v-if="data.item.enum">
-            <div>
-              {{ data.item.enum }}: <i>{{ data.item.enumValues.join(', ') }}</i>
-            </div>
-          </template>
-        </template>
-      </gl-table>
-    </div>
-
-    <div v-if="displaySlots.length > 0">
-      <h4>Slots</h4>
-      <gl-table :items="displaySlots" small head-variant="default" striped />
-    </div>
-
-    <div v-if="displayEvents.length > 0">
-      <h4>Events</h4>
-      <gl-table :items="displayEvents" :fields="eventsFields" small head-variant="default" striped>
-        <template #cell(event)="field">
-          {{ field.value }}
-          <gl-badge v-if="componentVModel && field.value === componentVModel.event" variant="info">
-            v-model
-          </gl-badge>
-        </template>
-        <template #cell(args)="field">
-          <div
-            v-for="argument in field.value"
-            :key="`event-${field.item.event}-${argument.arg ? argument.arg : 'none'}`"
-          >
-            <code v-if="argument.arg">{{ argument.arg }}</code>
-            <span>{{ argument.description }}</span>
-          </div>
-        </template>
-      </gl-table>
-    </div>
-
-    <div v-if="componentVModel">
-      <h4>v-model</h4>
-      <gl-table
-        :items="[componentVModel]"
-        :fields="['prop', 'event']"
-        small
-        head-variant="default"
-        striped
-      />
-    </div>
-
-    <h3>Import</h3>
-
-    <p>
-      <code>import { {{ componentName }} } from '@gitlab/ui{{ importSubDir }}';</code>
-    </p>
-
-    <template v-if="bootstrapComponentName">
-      <h3 id="under-the-hood">vue-bootstrap component</h3>
-      <p>
-        This component uses
-        <a
-          :href="`https://bootstrap-vue.org/docs/components/${bootstrapComponentLink}`"
-          target="blank"
-          ><code>&lt;{{ bootstrapComponentName }}&gt;</code></a
-        >
-        from vue-bootstrap internally. So please take a look also there at their extensive
-        documentation.
-      </p>
-    </template>
-  </div>
-  <b-alert v-else show variant="warning">
-    No GitLab UI component found with the name {{ componentName }}
-  </b-alert>
-</template>