@gitlab/ui 39.3.0 → 39.3.1

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>

package/documentation/components/example_display.vue

@@ -1,231 +0,0 @@
-<script>
-/* eslint-disable vue/no-v-html */
-
-import * as Babel from '@babel/standalone';
-import BootstrapVue from 'bootstrap-vue';
-import copyToClipboard from 'copy-to-clipboard';
-import hljs from 'highlight.js';
-import { html } from 'js-beautify';
-import Vue from 'vue';
-import { parseComponent } from 'vue-template-compiler';
-import 'highlight.js/styles/monokai.css';
-import { gitlabComponents } from '../all_components';
-import * as Documentation from '../components_documentation';
-
-// We need to register globally all components as we don't know the components that are used in the dynamically compiled .example.vue files
-// This is only for design.gitlab.com and shouldn't be done in our actual application
-Vue.use(BootstrapVue);
-Object.keys(gitlabComponents).forEach((comp) => {
-  if (!comp.includes('Directive')) {
-    Vue.component(comp, gitlabComponents[comp]);
-  }
-});
-
-// We need to do Directives for now manually
-Vue.directive('gl-tooltip', gitlabComponents.GlTooltipDirective);
-Vue.directive('gl-modal-directive', gitlabComponents.GlModalDirective);
-Vue.directive('gl-resize-observer-directive', gitlabComponents.GlResizeObserverDirective);
-Vue.directive('gl-safe-html-directive', gitlabComponents.GlSafeHtmlDirective);
-Vue.directive('gl-collapse-toggle', gitlabComponents.GlCollapseToggleDirective);
-Vue.directive('gl-outside', gitlabComponents.GlOutsideDirective);
-Vue.directive('gl-hover-load', gitlabComponents.GlHoverLoadDirective);
-
-function findComponentExample(exampleName) {
-  /* eslint-disable no-restricted-syntax */
-  // Doing it with a for loop to have an early return/break during iteration
-  for (const component of Object.values(Documentation)) {
-    if (component.examples) {
-      // Looking for an example in the component documentation definition that matches the exampleName
-      for (const exampleGroup of component.examples) {
-        const foundExample = exampleGroup.items.find((example) => example.id === exampleName);
-        if (foundExample) {
-          return foundExample;
-        }
-      }
-    }
-  }
-  /* eslint-enable no-restricted-syntax */
-  return null;
-}
-
-const animationTimeout = 2000;
-
-export default {
-  props: {
-    exampleName: {
-      type: String,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      source: '',
-      renderedHtml: '',
-      copiedSource: false,
-      copiedOutput: false,
-    };
-  },
-  computed: {
-    // Based on the set exampleName we try to look it up in the currently loaded Documentation Examples and then read it-> parse and compile it
-    currentExampleComponent() {
-      // Going through all documentation objects of all components
-      const foundExample = findComponentExample(this.exampleName);
-
-      // Live loading of .example.vue files
-      // Examples are included with webpack through raw-loader -> Results in a string
-      if (foundExample && foundExample !== undefined) {
-        const base = {
-          name: '',
-          template: '<div></div>',
-        };
-        try {
-          // At Runtime we parse it with `parseComponent` from `vue-template-compiler` (Line 64)
-          const parsed = parseComponent(foundExample.component);
-
-          let compiled = {};
-          if (parsed.script) {
-            // We parse the script part with Babel.transform (Line 68 in example_display)
-            const { code } = Babel.transform(parsed.script.content, {
-              presets: ['es2015', ['stage-2', { decoratorsBeforeExport: false }]],
-            });
-            compiled = eval(`const exports = {};${code}`); // eslint-disable-line no-eval
-          }
-
-          // Results in the original source of the template and the compiled and working Vue component
-          compiled.template = parsed.template.content;
-          // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-          this.source = compiled.template;
-
-          return { ...base, ...compiled };
-        } catch (e) {
-          // eslint-disable-next-line no-console
-          console.log('ERR : ', e);
-          return base;
-        }
-      }
-      return null;
-    },
-    exampleHTMLOutput() {
-      return this.$refs.exampleComponent || '';
-    },
-    sourceFormatted() {
-      if (this.source) {
-        return hljs.fixMarkup(hljs.highlight('html', this.source).value);
-      }
-      return '';
-    },
-    renderedHtmlFormatted() {
-      if (this.renderedHtml) {
-        return hljs.fixMarkup(hljs.highlight('html', this.renderedHtml).value);
-      }
-      return '';
-    },
-  },
-  watch: {
-    currentExampleComponent() {
-      Vue.nextTick(() => {
-        this.setHtml();
-      });
-    },
-  },
-  created() {
-    // Converting Tabs to spaces to make display look indented
-    hljs.configure({ tabReplace: '    ', useBR: true });
-  },
-  mounted() {
-    this.setHtml();
-  },
-  methods: {
-    setHtml() {
-      if (this.$refs.compiled) {
-        const markup = this.$refs.compiled.$el.outerHTML;
-        if (markup) {
-          // Splitting lines for easier readability on the rendered output
-          const preFormattedHTML = markup.replace(/><(?!\/i|\/label|\/span|option)/g, '>\n<');
-          this.renderedHtml = html(preFormattedHTML, {
-            indent_size: 2,
-            indent_char: ' ',
-            wrap_attributes: 'auto',
-            wrap_attributes_indent_size: 2,
-            end_with_newline: false,
-          });
-        }
-      }
-    },
-    copySource() {
-      copyToClipboard(this.source);
-      this.copiedSource = true;
-      setTimeout(() => {
-        this.copiedSource = false;
-      }, animationTimeout);
-    },
-    copyHtml() {
-      copyToClipboard(this.renderedHtml);
-      this.copiedOutput = true;
-      setTimeout(() => {
-        this.copiedOutput = false;
-      }, animationTimeout);
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <div v-if="currentExampleComponent">
-      <b-card no-body>
-        <template #header>
-          <div>
-            <b-row>
-              <b-col>
-                <strong>{{ exampleName }}</strong>
-              </b-col>
-              <b-col class="text-right">
-                <b-button-group size="sm" class="mx-1">
-                  <b-btn v-b-toggle.collapseSource>Source</b-btn>
-                  <b-btn v-b-toggle.collapseHTML>HTML</b-btn>
-                </b-button-group>
-              </b-col>
-            </b-row>
-          </div>
-        </template>
-        <b-card-body>
-          <component :is="currentExampleComponent" ref="compiled" />
-        </b-card-body>
-        <b-list-group flush>
-          <b-collapse id="collapseSource" class="mt-2">
-            <b-list-group-item>
-              <b-row>
-                <b-col cols="8"><h6>Source</h6></b-col>
-                <b-col class="text-right">
-                  <template v-if="copiedSource">Copied!</template>
-                  <b-button-group size="sm">
-                    <b-button :disabled="copiedSource" @click="copySource">Copy</b-button>
-                  </b-button-group>
-                </b-col>
-              </b-row>
-              <code class="hljs html" v-html="sourceFormatted"></code>
-            </b-list-group-item>
-          </b-collapse>
-          <b-collapse id="collapseHTML" class="mt-2">
-            <b-list-group-item>
-              <b-row>
-                <b-col cols="8"><h6>HTML Output</h6></b-col>
-                <b-col class="text-right">
-                  <template v-if="copiedOutput">Copied!</template>
-                  <b-button-group size="sm">
-                    <b-button :disabled="copiedOutput" @click="copyHtml">Copy</b-button>
-                  </b-button-group>
-                </b-col>
-              </b-row>
-              <code class="hljs html" v-html="renderedHtmlFormatted"></code>
-            </b-list-group-item>
-          </b-collapse>
-        </b-list-group>
-      </b-card>
-    </div>
-    <b-alert v-else-if="exampleName" show variant="warning"
-      >No Example found with the name "{{ exampleName }}"</b-alert
-    >
-  </div>
-</template>

package/documentation/components/example_explorer.vue

@@ -1,63 +0,0 @@
-<script>
-import GlFormSelect from '../../src/components/base/form/form_select/form_select.vue';
-import { getDocumentationFor } from '../components_documentation';
-import GlExampleDisplay from './example_display.vue';
-
-export default {
-  components: {
-    GlExampleDisplay,
-    GlFormSelect,
-  },
-  props: {
-    componentName: {
-      type: String,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      selectedExampleId: '',
-    };
-  },
-  computed: {
-    exampleGroups() {
-      return getDocumentationFor(this.componentName).examples || [];
-    },
-    firstExampleId() {
-      if (
-        this.exampleGroups &&
-        this.exampleGroups.length > 0 &&
-        this.exampleGroups[0].items &&
-        this.exampleGroups[0].items.length > 0
-      ) {
-        return this.exampleGroups[0].items[0].id;
-      }
-      return null;
-    },
-  },
-  mounted() {
-    if (this.firstExampleId) {
-      this.selectedExampleId = this.firstExampleId;
-    }
-  },
-};
-</script>
-
-<template>
-  <div>
-    <h3>Examples</h3>
-    <gl-form-select
-      v-if="exampleGroups && exampleGroups.length > 0"
-      v-model="selectedExampleId"
-      class="mb-3"
-    >
-      <template v-for="exampleGroup in exampleGroups">
-        <optgroup :key="exampleGroup.title" :label="exampleGroup.name"></optgroup>
-        <template v-for="example in exampleGroup.items">
-          <option :key="example.id" :value="example.id">{{ example.name }}</option>
-        </template>
-      </template>
-    </gl-form-select>
-    <gl-example-display v-if="selectedExampleId" :example-name="selectedExampleId" />
-  </div>
-</template>