🌏 Translated with the assistance of DeepSeek and ChatGPT
Auto Complete
A text input field with suggestions.
Basic Usage
Pass options as the list of choices. Provide modelValue for controlled mode.
Omit it or set it to undefined for uncontrolled mode; in this case you can supply a defaultValue as the initial value.
<template>
<px-space direction="vertical">
<px-auto-complete
placeholder="Please input"
v-model="input"
:options="options"
></px-auto-complete>
<px-auto-complete
placeholder="Please input"
:options="options"
default-value="test"
></px-auto-complete>
</px-space>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const input = ref('')
const options = ref<string[]>([
'pear',
'plum',
'cherry',
'blueberry',
'raspberry',
'blackberry',
'lemon',
'lime',
'pomegranate',
'apricot'
])
</script>
<style lang="css" scoped>
.px-auto-complete {
width: 320px;
}
</style>Disabled Options
Inside options, set disabled: true on any choice to disable it.
<template>
<px-auto-complete
placeholder="Please input"
v-model="input"
:options="options"
></px-auto-complete>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const input = ref('')
const options = ref(
[
'apple',
'banana',
'orange',
'grape',
'strawberry',
'kiwi',
'mango',
'pineapple',
'watermelon',
'peach'
].map((item, index) => {
return {
label: item,
value: item,
disabled: (index & 1) === 1
}
})
)
</script>
<style lang="css" scoped>
.px-auto-complete {
width: 320px;
}
</style>Grouping
options also accepts option groups.
<template>
<px-auto-complete
placeholder="Please input"
v-model="input"
:options="options"
></px-auto-complete>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const input = ref('')
const options = ref([
{
type: 'group',
label: 'tropical fruits',
children: [
{ label: 'mango', value: 'mango' },
{ label: 'pineapple', value: 'pineapple' },
{ label: 'papaya', value: 'papaya' },
{ label: 'dragon fruit', value: 'dragon fruit' },
{ label: 'durian', value: 'durian' },
{ label: 'lychee', value: 'lychee' },
{ label: 'longan', value: 'longan' }
]
},
{
type: 'group',
label: 'citrus fruits',
children: [
{ label: 'orange', value: 'orange' },
{ label: 'lemon', value: 'lemon' },
{ label: 'lime', value: 'lime' },
{ label: 'grapefruit', value: 'grapefruit' },
{ label: 'tangerine', value: 'tangerine' }
]
}
])
</script>
<style lang="css" scoped>
.px-auto-complete {
width: 320px;
}
</style>Remote Loading
Set the loading and showPopoverEmpty props and listen to the input event to reflect remote-loading UI states.
<template>
<px-auto-complete
placeholder="Please input"
v-model="input"
:options="options"
:loading="loading"
show-popover-empty
@input="inputHandler"
></px-auto-complete>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const input = ref('')
const loading = ref(false)
const options = ref<string[]>([])
const data = [
'pear',
'plum',
'cherry',
'blueberry',
'raspberry',
'blackberry',
'lemon',
'lime',
'pomegranate',
'apricot'
]
const inputHandler = () => {
options.value = []
loading.value = true
setTimeout(() => {
options.value = data
loading.value = false
}, 6000)
}
</script>
<style lang="css" scoped>
.px-auto-complete {
width: 320px;
}
</style>Append Mode
After selecting an option, append it to the existing input instead of replacing the content by enabling the append prop.
Use the filter and shouldShowPopover functions to control which options appear and when the popover is shown.
<template>
<px-auto-complete
placeholder="Please input"
v-model="input"
:options="options"
:filter="filter"
:shouldShowPopover="shouldShowPopover"
append
></px-auto-complete>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const input = ref('')
const options = ref<string[]>(['gmail.com', '163.com', 'qq.com'])
const filter = (_: string, options: string[]) => {
return options
}
const shouldShowPopover = (value: string) => {
return value.endsWith('@')
}
</script>
<style lang="css" scoped>
.px-auto-complete {
width: 320px;
}
</style>Virtual List
Enabling the virtualScroll property activates the virtual list, which can be turned on to improve performance when there is a large amount of option data.
<template>
<px-auto-complete
placeholder="Please input"
v-model="input"
:options="options"
virtual-scroll
></px-auto-complete>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const input = ref('')
const data = [
'pear',
'plum',
'cherry',
'blueberry',
'raspberry',
'blackberry',
'lemon',
'lime',
'pomegranate',
'apricot',
'apple',
'banana',
'orange',
'grape',
'strawberry',
'mango',
'pineapple',
'peach',
'kiwi',
'watermelon',
'grapefruit',
'tangerine',
'mandarin',
'nectarine',
'fig',
'date',
'olive',
'coconut',
'avocado',
'papaya',
'guava',
'passion fruit',
'lychee',
'longan',
'dragon fruit',
'durian',
'rambutan',
'star fruit',
'persimmon',
'cantaloupe',
'honeydew',
'mulberry',
'gooseberry',
'currant',
'elderberry',
'cranberry',
'boysenberry',
'loganberry',
'cloudberry',
'salmonberry',
'lingonberry',
'bilberry',
'huckleberry',
'acai berry',
'goji berry',
'maqui berry',
'camu camu',
'cupuacu',
'mamey',
'sapodilla',
'soursop',
'guanabana',
'jackfruit',
'pulasan',
'mangosteen',
'star apple',
'rose apple',
'wax apple',
'java plum',
'black plum',
'white sapote',
'black sapote',
'marmalade plum',
'pepino',
'tamarillo',
'cape gooseberry',
'ground cherry',
'physalis',
'naranjilla',
'lulo',
'tomato',
'potato',
'carrot',
'onion',
'garlic',
'cucumber',
'bell pepper',
'spinach',
'lettuce',
'broccoli',
'cauliflower',
'green bean',
'pea',
'zucchini',
'eggplant',
'celery',
'asparagus',
'brussels sprout',
'kale',
'chard',
'radish',
'turnip',
'parsnip',
'yam',
'pumpkin',
'squash',
'artichoke',
'leek',
'shallot',
'chive',
'scallion',
'beet',
'swiss chard',
'collard green',
'mustard green',
'dandelion green',
'endive',
'escarole',
'fennel',
'bok choy',
'napa cabbage',
'green cabbage',
'red cabbage',
'purple cabbage',
'watercress',
'mushroom',
'okra',
'sweet corn',
'corn',
'rhubarb',
'kohlrabi',
'rutabaga',
'celtuce',
'bamboo shoot',
'heart of palm',
'jerusalem artichoke',
'sunchoke',
'chayote',
'pattypan squash',
'butternut squash',
'acorn squash',
'spaghetti squash',
'yellow squash',
'crookneck squash',
'aubergine',
'cherry tomato',
'plum tomato',
'beefsteak tomato',
'roma tomato',
'grape tomato',
'heirloom tomato',
'red bell pepper',
'green bell pepper',
'yellow bell pepper',
'orange bell pepper',
'jalapeno',
'habanero',
'serrano',
'cayenne pepper',
'tabasco pepper',
'poblano',
'ancho',
'chipotle',
'fresno pepper',
'banana pepper',
'pepperoncini',
'shishito pepper',
'string bean',
'snap bean',
'haricot vert',
'lima bean',
'butter bean',
'fava bean',
'broad bean',
'black bean',
'kidney bean',
'pinto bean',
'navy bean',
'cannellini bean',
'great northern bean',
'adzuki bean',
'mung bean',
'soybean',
'lentil',
'red lentil',
'green lentil',
'brown lentil',
'black lentil',
'chickpea',
'garbanzo bean',
'green pea',
'snow pea',
'sugar snap pea',
'split pea',
'black-eyed pea',
'cowpea',
'okra pod',
'baby spinach',
'flat-leaf spinach',
'malabar spinach',
'water spinach',
'curly kale',
'tuscan kale',
'lacinato kale',
'red kale',
'kale rabe',
'rapini',
'collard greens',
'mustard greens',
'turnip greens',
'dandelion greens',
'rainbow chard',
'beet greens',
'spinach beet',
'curly endive',
'frisée',
'radicchio',
'arugula',
'rocket',
'land cress',
'nasturtium',
'sorrel',
'iceberg lettuce',
'romaine lettuce',
'butterhead lettuce',
'boston lettuce',
'bibb lettuce',
'leaf lettuce',
'green leaf lettuce',
'red leaf lettuce',
'mixed greens',
'mesclun',
'microgreens',
'alfalfa sprouts',
'bean sprouts',
'mung bean sprouts',
'radish sprouts',
'broccoli sprouts',
'sunflower sprouts',
'yellow onion',
'red onion',
'white onion',
'sweet onion',
'vidalia onion',
'walla walla onion',
'green onion',
'garlic clove',
' elephant garlic',
'ramp',
'wild leek',
'garlic chive',
'chives',
'green asparagus',
'white asparagus',
'purple asparagus',
'celery stalk',
'celery root',
'celeriac',
'fennel bulb',
'fennel frond',
'orange carrot',
'purple carrot',
'yellow carrot',
'white carrot',
'baby carrot',
'swede',
'red radish',
'daikon radish',
'black radish',
'watermelon radish',
'horseradish',
'wasabi',
'red beet',
'golden beet',
'chioggia beet',
'sugar beet',
'orange sweet potato',
'purple sweet potato',
'white sweet potato',
'true yam',
'russet potato',
'yukon gold potato',
'red potato',
'white potato',
'fingerling potato',
'sweet potato',
'taro',
'eddoe',
'malanga',
'yucca',
'cassava',
'manioc',
'jicama',
' Jerusalem artichoke',
'ginger',
'fresh ginger',
'galangal',
'turmeric',
'fresh bamboo shoot',
'canned bamboo shoot',
'globe artichoke',
'broccoli crown',
'broccoli floret',
'broccoli stem',
'white cauliflower',
'purple cauliflower',
'green cauliflower',
'romanesco broccoli',
'baby brussels sprout',
'cabbage',
'savoy cabbage',
'chinese cabbage',
'pak choi',
'baby bok choy',
'tatsoi',
'mizuna',
'komatsuna',
'white button mushroom',
'cremini mushroom',
'portobello mushroom',
'shiitake mushroom',
'oyster mushroom',
'enoki mushroom',
'beech mushroom',
'shimeji mushroom',
'maitake mushroom',
'reishi mushroom',
'cordyceps',
'truffle',
'black truffle',
'white truffle',
'morel',
'chanterelle',
'ceps',
'porcini',
'pie pumpkin',
'sugar pumpkin',
'jack-o-lantern pumpkin',
'hubbard squash',
'kabocha squash',
'delicata squash',
'summer squash',
'winter squash',
'mirliton',
'tomatillo',
'chinese eggplant',
'Japanese eggplant',
'white eggplant',
'grape eggplant',
'ladyfinger',
'baby corn',
'corn on the cob',
'popcorn',
'water chestnut',
'lotus root',
'elephant garlic',
'Jerusalem artichoke',
'starfruit',
'carambola',
'kiwifruit',
'kiwi berry',
'golden kiwi',
'green kiwi',
'fuyu persimmon',
'hachiya persimmon',
'medjool date',
'deglet noor date',
'black fig',
'green fig',
'mission fig',
'kadota fig',
'green olive',
'black olive',
'kalamata olive',
'gaeta olive',
'young coconut',
'mature coconut',
'coconut water',
'coconut meat',
'hass avocado',
' fuerte avocado',
'zutano avocado',
'pinkerton avocado',
'solo papaya',
'maradol papaya',
'strawberry guava',
'common guava',
'purple passion fruit',
'yellow passion fruit',
'litchi',
'dragon eye',
'red dragon fruit',
'yellow dragon fruit',
'caimito',
'jambu',
'jamun',
'chocolate pudding fruit',
'melon pear',
'tree tomato',
'uchuva',
'aguaymanto',
'breadfruit',
'chempedak',
'cempedak',
'graviola',
'custard apple',
'cherimoya',
'atemoya',
'sweetsop',
'annon',
'mamey sapote',
'chico',
'naseberry',
'sapote',
'yellow sapote',
'canistel',
'eggfruit',
'lucuma',
'pawpaw',
'asimina',
'pommegranate',
'quince',
'loquat',
'Japanese plum',
'date plum',
'sloe',
'blackthorn',
'serviceberry',
'juneberry',
'hawthorn berry',
'rowan berry',
'mountain ash',
'black elderberry',
'red elderberry',
'aronia berry',
'chokeberry',
'highbush blueberry',
'lowbush blueberry',
'rabbiteye blueberry',
'whortleberry',
'black huckleberry',
'blue huckleberry',
'cowberry',
'partridgeberry',
'American cranberry',
'European cranberry',
'bearberry',
'kinnikinnick',
'garden strawberry',
'alpine strawberry',
'wild strawberry',
'red raspberry',
'black raspberry',
'purple raspberry',
'golden raspberry',
'dewberry',
'tayberry',
'marionberry',
'olallieberry',
'youngberry',
'bakeapple',
'thimbleberry',
'wineberry',
'black mulberry',
'red mulberry',
'white mulberry',
'green gooseberry',
'red gooseberry',
'golden gooseberry',
'red currant',
'black currant',
'white currant',
'pink currant',
'wolfberry',
'goji',
'acai',
'copuacu',
'bacuri',
'buriti',
'pupunha',
'jaca',
'mangaba',
'murici',
'pitanga',
'surinam cherry',
'pitaya',
'prickly pear',
'cactus fruit',
'tuna',
'sabra',
'green grape',
'red grape',
'purple grape',
'black grape',
'seedless grape',
'concord grape',
'thompson seedless',
'crimson seedless',
'muscat grape',
'champagne grape',
'raisin',
'sultana',
'dried currant',
'dried apricot',
'prune',
'dried plum',
'sweet cherry',
'sour cherry',
'tart cherry',
'bing cherry',
'rainier cherry',
'cherry plum',
'myrobalan',
'bartlett pear',
'bosc pear',
'anjou pear',
'comice pear',
'seckel pear',
'red apple',
'green apple',
'yellow apple',
'honeycrisp apple',
'fuji apple',
'gala apple',
'pink lady apple',
'granny smith apple',
'golden delicious apple',
'red delicious apple',
'mcintosh apple',
'braeburn apple',
'jazz apple',
'envy apple',
'cosmic crisp apple',
'navel orange',
'valencia orange',
'blood orange',
'clementine',
'satsuma',
'tangelo',
'minneola',
'ugli fruit',
'white grapefruit',
'pink grapefruit',
'red grapefruit',
'pomelo',
'shaddock',
'meyer lemon',
'eureka lemon',
'lisbon lemon',
'key lime',
'persian lime',
'kaffir lime',
'bergamot',
'yuzu',
'kumquat',
'calamondin',
'finger lime',
'lemonade fruit',
'rangpur',
'mandarin lime',
'smooth cayenne pineapple',
'golden pineapple',
'sugarloaf pineapple',
'baby pineapple',
'alphonso mango',
'tommy atkins mango',
'haden mango',
'kent mango',
'keitt mango',
'ataulfo mango',
'manila mango',
'seedless watermelon',
'yellow watermelon',
'mini watermelon',
'muskmelon',
'charentais melon',
'green honeydew',
'orange honeydew',
'crenshaw melon',
'casaba melon',
'canary melon',
'galia melon',
'melon',
'winter melon',
'wax gourd',
'ash gourd',
'bitter melon',
'bitter gourd',
' karela',
'sponge gourd',
'luffa',
'ridge gourd',
'snake gourd',
'bottle gourd',
'calabash'
]
const options = ref(data)
</script>
<style lang="css" scoped>
.px-auto-complete {
width: 320px;
}
</style>Custom Rendering
option slot customizes option rendering, group-label slot customizes group label rendering.
<template>
<px-auto-complete placeholder="Please input" v-model="input" :options="options">
<template #group-label="{ option }">
{{ option.label }}
<div
style="margin-left: 12px; color: red; font-size: 16px"
v-if="option.label === 'citrus fruits'"
>
HOT!
</div>
</template>
<template #option="{ option }">
{{ option.label }}
<px-tag style="margin-left: 12px" v-if="option.value === 'orange'">NEW!</px-tag>
</template>
</px-auto-complete>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const input = ref('')
const options = ref([
{
type: 'group',
label: 'citrus fruits',
children: [
{ label: 'orange', value: 'orange' },
{ label: 'lemon', value: 'lemon' },
{ label: 'lime', value: 'lime' },
{ label: 'grapefruit', value: 'grapefruit' },
{ label: 'tangerine', value: 'tangerine' }
]
},
{
type: 'group',
label: 'tropical fruits',
children: [
{ label: 'mango', value: 'mango' },
{ label: 'pineapple', value: 'pineapple' },
{ label: 'papaya', value: 'papaya' },
{ label: 'dragon fruit', value: 'dragon fruit' },
{ label: 'durian', value: 'durian' },
{ label: 'lychee', value: 'lychee' },
{ label: 'longan', value: 'longan' }
]
}
])
</script>
<style lang="css" scoped>
.px-auto-complete {
width: 320px;
}
</style>More Options
This AutoComplete has most of Input component's features.
Disabled, Readonly, Loading & Clearable
Shape
Size
Slot
prefix
suffix
Composite
Status
Expose
<template>
<px-space direction="vertical">
<h4>Disabled, Readonly, Loading & Clearable</h4>
<px-space>
<px-auto-complete
placeholder="Please input"
disabled
:options="options"
></px-auto-complete>
<px-auto-complete
placeholder="Please input"
readonly
:options="options"
></px-auto-complete>
<px-auto-complete
placeholder="Please input"
loading
:options="options"
></px-auto-complete>
<px-auto-complete
placeholder="Please input"
clearable
:options="options"
></px-auto-complete>
</px-space>
<h4>Shape</h4>
<px-space>
<px-auto-complete
placeholder="Please input"
shape="round"
:options="options"
></px-auto-complete>
<px-auto-complete placeholder="Please input" :options="options"></px-auto-complete>
</px-space>
<h4>Size</h4>
<px-space>
<px-auto-complete
placeholder="Please input"
size="small"
:options="options"
></px-auto-complete>
<px-auto-complete placeholder="Please input" :options="options"></px-auto-complete>
<px-auto-complete
placeholder="Please input"
size="large"
:options="options"
></px-auto-complete>
</px-space>
<h4>Slot</h4>
<px-space>
<px-auto-complete placeholder="Please input" :options="options">
<template #prefix>prefix</template>
<template #suffix>suffix</template>
</px-auto-complete>
</px-space>
<h4>Composite</h4>
<px-space>
<px-input-group>
<px-input-group-label>
<IconBolt></IconBolt>
</px-input-group-label>
<px-auto-complete placeholder="Please input" :options="options"> </px-auto-complete>
<px-button>Confirm</px-button>
</px-input-group>
</px-space>
<h4>Status</h4>
<px-space>
<px-auto-complete placeholder="Please input" :options="options"> </px-auto-complete>
<px-auto-complete placeholder="Please input" :options="options" status="success">
</px-auto-complete>
<px-auto-complete placeholder="Please input" :options="options" status="warning">
</px-auto-complete>
<px-auto-complete placeholder="Please input" :options="options" status="error">
</px-auto-complete>
</px-space>
<h4>Expose</h4>
<px-space direction="vertical">
<px-space>
<px-button theme="info" @click="focusHandler">Focus</px-button>
<px-button theme="info" @click="blurHandler">Blur</px-button>
<px-button theme="info" @click="selectHandler">Select</px-button>
<px-button theme="warning" @click="clearHandler">Clear</px-button>
</px-space>
<px-auto-complete
placeholder="Please input"
:options="options"
ref="autoCompleteRef"
></px-auto-complete>
</px-space>
</px-space>
</template>
<script setup lang="ts">
import { IconBolt } from '@pixelium/web-vue/icon-hn/es'
import { ref } from 'vue'
import { AutoComplete } from '@pixelium/web-vue'
// If on-demand import
// import { AutoComplete } from '@pixelium/web-vue/es'
const autoCompleteRef = ref<InstanceType<typeof AutoComplete>>(null)
const focusHandler = () => {
autoCompleteRef.value?.focus()
}
const blurHandler = () => {
autoCompleteRef.value?.blur()
}
const clearHandler = () => {
autoCompleteRef.value?.clear()
}
const selectHandler = () => {
autoCompleteRef.value?.select()
}
const options = ref<string[]>([
'pear',
'plum',
'cherry',
'blueberry',
'raspberry',
'blackberry',
'lemon',
'lime',
'pomegranate',
'apricot'
])
</script>
<style lang="css" scoped>
.px-auto-complete {
width: 320px;
}
</style>API
AutoCompleteProps
| Attribute | Type | Optional | Default | Description | Version |
|---|---|---|---|---|---|
| modelValue | string | null | True | | Value of the auto complete input (controlled mode), supports v-model. | 0.0.2 |
| defaultValue | string | null | True | | Default value of the auto complete input (uncontrolled mode). | 0.0.2 |
| options | string | True | | List of options. | 0.0.2 |
| placeholder | string | True | | Placeholder text. | 0.0.2 |
| disabled | boolean | True | false | Whether the input is disabled. | 0.0.2 |
| readonly | boolean | True | false | Whether the input is read-only. | 0.0.2 |
| clearable | boolean | True | false | Whether to show a clear button. | 0.0.2 |
| loading | boolean | True | false | Whether to show a loading state. | 0.0.2 |
| size | 'medium' | 'large' | 'small' | True | 'medium' | Size of the auto complete input. | 0.0.2 |
| shape | 'rect' | 'round' | True | 'rect' | Shape of the auto complete input. | 0.0.3 |
| showPopoverEmpty | boolean | True | false | Whether to display the popover when the options list is empty. | 0.0.2 |
| shouldShowPopover | (value: string, optionsFiltered: (string | AutoCompleteOption | AutoCompleteGroupOption)[]) => boolean | True | | Function to determine whether to show the popover while inputting. | 0.0.2 |
| filter | (keyword: string, options: (string | AutoCompleteOption | AutoCompleteGroupOption)[]) => (string | AutoCompleteOption | AutoCompleteGroupOption)[] | True | | Function to filter the options. | 0.0.2 |
| append | boolean | True | false | Append mode. | 0.0.2 |
| virtualScroll | boolean | True | false | Whether render options with virtual list. | 0.0.3 |
| virtualListProps | Omit<VirtualListProps, 'list' | 'fixedHeight'> | True | | Properties of virtual list. | 0.0.3 |
| borderRadius | NumberOrPercentage | NumberOrPercentage[] | True | | 0.0.2 | |
| status | 'success' | 'warning' | 'error' | 'normal' | True | 'normal' | Form validation status. | 0.0.2 |
| autofocus | boolean | True | false | Native <input> autofocus attribute. | 0.0.2 |
| optionsDestroyOnHide | boolean | True | false | Whether the dropdown options will be destroyed when hidden. | 0.0.3 |
AutoCompleteEvents
| Event | Parameter | Description | Version |
|---|---|---|---|
| input | value: string, e: Event | Callback fired when the input value changes. | 0.0.2 |
| update:modelValue | value: string | Callback fired when modelValue is updated. | 0.0.2 |
| change | value: string, e: Event | undefined | Callback fired when the input content changes. | 0.0.2 |
| clear | value: string | Callback fired when the clear button is clicked. | 0.0.2 |
| blur | e: FocusEvent | Callback fired when the input loses focus. | 0.0.2 |
| focus | e: FocusEvent | Callback fired when the input receives focus. | 0.0.2 |
| select | value: string, option: string | AutoCompleteOption, e: MouseEvent | Callback fired when an option is selected. | 0.0.2 |
AutoCompleteSlots
| Slot | Parameter | Description | Version |
|---|---|---|---|
| prefix | | Prefix content. | 0.0.2 |
| suffix | | Suffix content. | 0.0.2 |
| option | option: string | AutoCompleteOption | Custom option content. | 0.0.2 |
| group-label | option: AutoCompleteGroupOption | Label for option groups. | 0.0.2 |
AutoCompleteExpose
| Attribute | Type | Optional | Default | Description | Version |
|---|---|---|---|---|---|
| focus | () => void | False | | Focus the control. | 0.0.2 |
| blur | () => void | False | | Blur the control. | 0.0.2 |
| clear | () => void | False | | Clear the current input. | 0.0.2 |
| select | () => void | False | | Select all text in the input. | 0.0.2 |
AutoCompleteOption, AutoCompleteGroupOption
ts
export interface Option<T = any> {
value: T
label: string
}
export interface GroupOption<T = any> {
children: (Option<T> | string)[]
type: typeof GROUP_OPTION_TYPE
}
export interface OptionListOption<T = any> extends Option<T> {
disabled?: boolean
key?: string | number | symbol
}
export interface OptionListGroupOption extends GroupOption {
label: string
key: string | number | symbol
children: (OptionListOption | string)[]
}
export interface AutoCompleteOption extends OptionListOption<string> {
}
export interface AutoCompleteGroupOption extends OptionListGroupOption {
children: (AutoCompleteOption | string)[]
}