Combobox-DEMO

---

Properties

---

Property	Type	Required	Default	Description
modelValue	object	No	{}	See the Combobox modelValue option.
options	array	No	[]	See the Combobox options option.
borderWidth	number	No	1
placeholder	string	No	'Combobox'
borderColor	string	No	''
borderRadius	number/string	No	6	Numbers use px; other strings are used as CSS values
background	string	No	''
choosenBackground	string	No	''
choosenSliderBackground	string	No	''
inputFontSize	number/string	No	''	Input font size; numbers use px, strings can use CSS units
inputFontWeight	number/string	No	''	Input font weight
dropDownFontSize	number/string	No	''	Option and header font size; numbers use px, strings can use CSS units
dropDownFontWeight	number/string	No	''	Option and header font weight
inputForeground	string	No	''
inputBackground	string	No	''
titleForeground	string	No	''
itemHeight	number	No	40	See the Combobox itemHeight option.
dropDownIcon	string	No	'ChevronDown'
dropDownIconForeground	string	No	''
revealBorderColor	boolean	No	false
revealBackgroundColor	boolean	No	false
isBoxShadow	boolean	No	false	Whether to apply the Combobox input shadow style
disabled	boolean	No	false
theme	string	No	'global'	Theme style. Supports global, light, dark, system, and custom.
lang	string	No	"global"	See the Combobox lang option.

Events

---

Event	Arguments	Description
choose-item	value/object	Combobox choose item

Slots

---

1. Default

<slot :item="item">
    {{valueTrigger(item.type) !== 'divider' ? valueTrigger(item.text) : ''}}
</slot>

<template v-slot:default="x">
  <i>{{x.item.text}}</i>
</template>

Data

---

1. options

options = [{key: '', text: '', type: '', disabled: ''}]

//e.g.//

options: [
    { key: "fruitsHeader", text: "Fruits", type: "header" },
    { key: "apple", text: "Apple" },
    { key: "banana", text: "Banana" },
    { key: "orange", text: "Orange", disabled: true },
    { key: "grape", text: "Grape" },
    { key: "divider_1", text: "-", type: "divider" },
    { key: "vegetablesHeader", text: "Vegetables", type: "header" },
    { key: "broccoli", text: "Broccoli" },
    { key: "carrot", text: "Carrot" },
    { key: "lettuce", text: "Lettuce" }
]