ChūshōSelect
Implements the combobox design pattern, allowing the user to select an option from a collection of predefined values.
Usage
See using components for detailed instructions.
import {
CSelect,
CSelectBtn,
CSelectGroup,
CSelectGroupLabel,
CSelectOption,
CSelectOptions,
} from 'chusho';
Config
The options below are to be set in the global configuration at the following location:
{
components: {
select: {
class: ({ open, modelValue, name, input, itemValue, disabled, variant }) => {},
},
selectBtn: {
class: ({ active, disabled, variant }) => {},
},
selectGroup: {
class: ({ variant }) => {},
},
selectGroupLabel: {
class: ({ variant }) => {},
},
selectOption: {
class: ({ selected, value, disabled, variant }) => {},
},
selectOptions: {
class: ({ transition, variant }) => {},
transition: {},
},
},
}
class
Classes applied to the component root element, except when the prop bare is set to true. See styling components.
- type:
Array<String | Object> | Object | String | (props: Object) => {} - default:
null
transition
Apply a common transition to all CSelectOptions. The object can contain any Vue built-in transition component props.
- type:
object - default:
null
Example
Using the CSelect component:
class({ open }) {
return ['select', {
'select--open': open,
}]
}
API
| Name | Type | Default | Description | |||||||
|---|---|---|---|---|---|---|---|---|---|---|
| Props | ||||||||||
| variant | string|array|object | undefined | Useful when used in the component config | |||||||
| bare | boolean | false | Disable class inheritance from the component config. See styling components. | |||||||
| modelValue | any | null | Bind the Select value with the parent component. | |||||||
| open | boolean | false | Bind the SelectOptions opening state with the parent component. | |||||||
| name | string | null | Forwarded to the underlying | |||||||
| input | object | null | Additional attributes to be applied to the hidden input holding the select value.
For example: | |||||||
| itemValue | func | (item: unknown) => {
if (isPrimitive(item)) {
return item;
} else if (isObject(item) && item.value) {
return item.value;
}
return null;
} | Method to resolve the currently selected item value.
For example: | |||||||
| disabled | boolean | null | Prevent opening the SelectOptions and therefor changing the Select value. | |||||||
| Events | ||||||||||
| update:modelValue | When the selected value changes.
| |||||||||
| update:open | When the popup opens or closes.
| |||||||||
| Slots | ||||||||||
| default |
| |||||||||
Examples
Simplest
<template>
<CSelect v-model="value">
<CSelectBtn>
{{ value.label }}
</CSelectBtn>
<CSelectOptions>
<CSelectOption v-for="item in items" :value="item">
{{ item.label }}
</CSelectOption>
</CSelectOptions>
</CSelect>
</template>
<script>
export default {
data() {
return {
value: null,
items: [
{
label: 'AliceBlue',
value: '#F0F8FF',
},
{
label: 'AntiqueWhite',
value: '#FAEBD7',
},
{
label: 'Aqua',
value: '#00FFFF',
},
],
};
},
};
</script>