Limbo
dropdown 0.0.4
Install from the command line:
Learn more about npm packages
$ npm install @limbo-works/dropdown@0.0.4
Install via package.json:
"@limbo-works/dropdown": "0.0.4"
About this version
Vue Dropdown component is a replacement for the standard select element which allows you to style it, while also following the accessibility guidelines.
The DropdownOptionList should wrap the DropdownOptions and the DropdownButton should be outside of it:
<!-- As written in Vue -->
<template>
<div class="c-example">
<DropdownButton aria-owns="some-id">
Label Here
</DropdownButton>
<DropdownOptionList id="some-id">
<DropdownOption
v-for="option in options"
:id="option.id"
:key="option.id"
:value="option.value"
v-text="option.label"
/>
</DropdownOptionList>
</div>
</template>| Prop | Description | Default value | Data type |
|---|---|---|---|
| tag | Set which element type to use for the button. | "button" | String or Object |
| ariaOwns | Required, it is used to identify which DropdownOptionList should be opened on click, therefore it should match with the DropdownOptionList id. Functions like the normal aria-owns attribute, and multiple lists can be owned. |
"" | String |
| additionalClickQuery | A CSS query for elements outside of the lists, that should still be treated as part of it, but not necessarily included in aria-owns. | "" | String |
| multiple | Set whether the dropdown allows for selecting more than one value. When that's used, pressing enter will open/close the dropdown and only space (or click) will select. |
false | Boolean |
| closeOnSelect | (doesn't do anything if multiple is set to true) Pick whether or not the dropdown should close when something's selected or stay open. | true | Boolean |
| closeOnBlur | Whether the dropdown should close when focus leaves it. | true | Boolean |
| persistentButtonFocus | If set to true (default), focus stays on the button even when the list is open, which is usually what you want to happen. However, can be set to false if the list needs to contain tabable elements, for example. | true | Boolean |
| initiallyExpanded | Whether the dropdown list(s) should start in the expanded state. | false | Boolean |
Additionally "modelValue" is used to allow for v-modelling.
| Prop | Description | Default value | Data type |
|---|---|---|---|
| tag | Set which element type to use for the options list. | "ul" | String or Object |
| id | Identifier used for accessing the list from the DropdownButton. Functions like the normal id attribute. | "" | String |
| Prop | Description | Default value | Data type |
|---|---|---|---|
| tag | Set which element type to use for the list item. | "li" | String or Object |
| id | Required, distinguishes the options from each other and functions like the normal id attribute . | "" | String |
emits: ['state:toggle', 'state:show', 'state:hide'],
| Event | Description | Value |
|---|---|---|
| input | Called whenever an option is selected | id(s): String |
| change | Called when the list closes and changes has been made. | id(s): String |
| update:activedescendant | Called whenever the active descendant changes. | id: String |
| state:toggle | Whenever the dropdown is opened or closed. | state: Boolean |
| state:show | Whenever the dropdown is shown. | true |
| state:hide | Whenever the dropdown is hidden. | false |
And of course also "update:modelValue" for v-modelling - this happens in tandem with "change".
'state:toggle', 'state:show' and 'state:hide' also work on DropdownOptionList.
A default slot is present on DropdownButton which exposes following properties:
| Prop | Description | Data type |
|---|---|---|
| isExpanded | Is the dropdown currently expanded or not? | Boolean |
| selectedIds | An array of all the ids of the currently selected options | Array |
| selectedValues | An array of all the values of the currently selected options | Array |
| selectedTexts | An array of all the text content of the currently selected options | Array |
| activedescendant | The id of the currently active option (ie. "in focus") | String |
| isNavigatingByKeyboard | Allows us to differentiate between keyboard and mouse navigation in our stylings | Boolean |
A default slot is present on the DropdownOptionList which exposes the same props as on DropdownButton. The DropdownOption should get placed inside here. A default slot is present on the DropdownOption, but this has no slot props.
