@gitlab/ui/dist/components/base/token_selector/token_selector.documentation.js

GitLab UI Components

import examples from './examples';

var token_selector = "# GlTokenSelector\n\n<!-- STORY -->\n\n## Usage\n\nChoose 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,
  examples,
  propsInfo: {
    dropdownItems: {
      additionalInfo: 'Items to display in dropdown'
    },
    selectedTokens: {
      additionalInfo: 'Tokens that are selected. This prop will automatically be added when using `v-model`'
    },
    allowUserDefinedTokens: {
      additionalInfo: 'Should users be allowed to add tokens that are not in `dropdown-items`'
    },
    loading: {
      additionalInfo: 'Dropdown items are loading, can be used when requesting new dropdown items'
    },
    hideDropdownWithNoItems: {
      additionalInfo: 'Hide the dropdown if `dropdown-items` is empty. Will show `no-results-content` slot if this is `false`'
    },
    containerClass: {
      additionalInfo: 'CSS classes to add to the main token selector container (`.gl-token-selector`)'
    },
    menuClass: {
      additionalInfo: 'CSS classes to add to dropdown menu `ul` element'
    },
    textInputAttrs: {
      additionalInfo: 'HTML attributes to add to the text input. Helpful for adding `data-testid` and `data-qa-selector` attributes'
    },
    state: {
      additionalInfo: 'Controls the validation state appearance of the component. `true` for valid, `false` for invalid, or `null` for no validation state'
    }
  },
  slots: [{
    name: 'no-results-content',
    description: 'Content to display when `dropdown-items` is empty and `allow-user-defined-tokens` is `false`',
    default: 'No matches found',
    scopedProps: ''
  }, {
    name: 'user-defined-token-content',
    description: 'Content to display when adding a user defined token',
    default: 'Add "{{ inputText }}"',
    scopedProps: 'inputText (String)'
  }, {
    name: 'token-content',
    description: 'Content to pass to the token component slot. Can be used to add an avatar to the token',
    default: '{{ token.name }}',
    scopedProps: 'token (Object)'
  }, {
    name: 'dropdown-item-content',
    description: 'Dropdown item content',
    default: '{{ dropdownItem.name }}',
    scopedProps: 'dropdownItem (Object)'
  }, {
    name: 'dropdown-footer',
    description: 'Content to add to the bottom of the dropdown. Can be used in conjunction with `gl-intersection-observer` to load more items as the user scrolls'
  }, {
    name: 'loading-content',
    description: 'Content to display when `loading` prop is `true`',
    default: 'Searching...',
    scopedProps: ''
  }],
  events: [{
    event: 'text-input',
    args: [{
      arg: 'inputText',
      description: '(String)'
    }],
    description: 'Fired when user types in the token selector'
  }, {
    event: 'input',
    args: [{
      arg: 'selectedTokens',
      description: '(Array)'
    }],
    description: 'Fired when a token is added or removed'
  }, {
    event: 'focus',
    args: [{
      arg: 'event',
      description: '(FocusEvent)'
    }],
    description: 'Fired when the token selector is focused'
  }, {
    event: 'blur',
    args: [{
      arg: 'event',
      description: '(FocusEvent)'
    }],
    description: 'Fired when the token selector is blurred'
  }, {
    event: 'token-add',
    args: [{
      arg: 'token',
      description: '(Object)'
    }],
    description: 'Fired when a token is added'
  }, {
    event: 'token-remove',
    args: [{
      arg: 'token',
      description: '(Object)'
    }],
    description: 'Fired when a token is removed'
  }]
};

export default token_selector_documentation;