Create "Token Selector" component
Objective
- Create a token selector that can be used for this feature: gitlab#33143 (closed) (Thread discussing design: gitlab#33143 (comment 333784563))
- Make it flexible enough to be able to replace the "Invite user dropdown" (used to add users to projects/groups) in the future
Examples
See !1460 (merged)
Proposed API
Props
Name |
Description |
Type |
Required? |
Default Value |
dropdown-items |
Items to display in dropdown |
Array |
false |
[] |
selected-tokens |
Tokens that are selected. This prop will automatically be added when using v-model . |
Array |
true |
[] |
allow-user-defined-tokens |
Should users be allowed to add tokens that are not in the dropdown-items
|
Function or Boolean
|
false |
true |
loading |
Dropdown options are loading, can be used when requesting new dropdown options |
Boolean |
false |
false |
hide-dropdown-with-no-items |
Hide the dropdown if dropdown-items is empty. Will show no-results-content slot if this is false
|
Boolean |
false |
false |
Slots
Name |
Description |
Default |
Scoped Props |
no-results-content |
Content to display when dropdown-items is empty and allow-user-defined-tokens is false
|
No matches found |
N/A |
user-defined-token-content |
Content to display when adding a user defined token |
Add "{{ inputText }}" |
inputText |
token-content |
Content to pass to the token component slot. Can be used to add an avatar to the token |
token.name |
token |
dropdown-item-content |
Dropdown item content |
dropdownItem.name |
dropdownItem |
loading-content |
Loading content |
Searching... |
N/A |
Events
Name |
Description |
Arguments |
text-input |
Fired when user types in the text input |
inputText |
input |
Fired when a token is add or removed |
selectedTokens |
focus |
Input focus event |
event |
blur |
Input blur event |
event |
token-add |
Fired when a token is added |
token |
token-remove |
Fired when a token is removed |
token |
v-model
will return array of selected tokens
Keyboard navigation
Based on Material Chips
Key |
Action |
enter |
Adds selected dropdown as token |
escape |
Closes dropdown and clears text input |
backspace |
Select last token. backspace again to delete |
left/right arrows |
Move between selected tokens |
up/down arrows |
Move between dropdown options |
home |
When token is selected, move focus to first token. When dropdown item is selected, move to first dropdown item |
end |
When token is selected, move focus to last token. When dropdown item is selected, move to last dropdown item |
A11y
References:
Token container attributes
Attribute |
role="listbox" |
aria-multiselectable="false" |
aria-orientation="horizontal" |
Token
Edited
by
Peter Hegman