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	No	6
background	string	No	''
choosenBackground	string	No	''
choosenSliderBackground	string	No	''
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
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" }
]