Components

ExAutocomplete

<ExAutocomplete
    v-model="initialValue"
    v-model:state="dropdownState"
    v-slot="{ isOpen }"
    matchKey="value"
>
    <div>
        <ExAutocompleteInput
            :displayValue="displayValues"
            @change="fnSearch"
        />
        <span>&#8963;</span>
    </div>
    <ExAutocompleteList>
        <template v-for="(item) in filteredList" :key="list.value">
            <ExAutocompleteListItem
                :value="item"
                v-slot="{ active, isSelected }"
            >
                <div>
                    <span>{{ item.text }}</span>
                    <span v-if="isSelected" class="text-base text-green-400">&#10003;</span>
                </div>
            </ExAutocompleteListItem>
        </template>
    </ExAutocompleteList>
</ExAutocomplete>

Interact

Props: ExAutocomplete

as

Type	Default	Required
string component	template	false

Description: Sets the element type of ex-autocomplete. Any custom vue component can also be passed.

---

v-model

Type	Default	Required
array string object	undefined	false

Description: Takes an initial value to be displayed in the input

---

v-model:state

Type	Default	Required
boolean	false	false

Description: Determines state of the dropdown list. Pass on boolean value to control the visibility.

---

multiple

Type	Default	Required
boolean	false	false

Description: If true, it allows multiple values to be selected from the dropdown list.

---

clearable

Type	Default	Required
boolean	false	false

Description: If true, selected value will be cleared once the input field is cleared. If false, selected value will be re-applied when the input is focused out even if the input was cleared earlier.

---

disabled

Type	Default	Required
boolean	false	false

Description: Enable/Disable ex-autocomplete

---

closeOnClick

Type	Default	Required
boolean	true	false

Description: Choose whether dropdown should be closed on content click

---

matchKey

Type	Default	Required
string function	undefined	true, if list item is an object, else false

Description: A match key which represents a unique key of the list item. This helps in filtering and setting up active and isSelected states.

---

right

Type	Default	Required
boolean	false	false

Description: Positions dropdown list to the right of the input

---

left

Type	Default	Required
boolean	false	false

Description: Positions dropdown list to the left of the input

---

Emits

Name	Description
update:modelValue	This v-model update gets emitted when any value is selected from the list <div v-model="initialValue" ...> ... </div>
update:state	This v-model update is emits when any value is selected from the list <div v-model:state="visibility" ...> ... </div>

---

Slots

Name	Description
default	The default Vue slot. { open: Function, // opens dropdown close: Function, // closes dropdown isOpen: boolean, labelAttrs: { id: string, // element ID will be set automatically for: string // refers to autocomplete-input-id } }

Props: ExAutocompleteInput

as

Type	Default	Required
string component	input	false

Description: Sets the element type of ex-autocomplete-input. Any custom vue component can also be passed.

---

displayValue

Type	Default	Required
Function	undefined	true

Description: This accepts a function. Selected value is passed as the single argument.

Example:

<ExAutocompleteInput
    class="w-full px-3 outline-none"
    :displayValue="(item) => item.text"
>
</ExAutocompleteInput>

---

Slots

Name	Description
default	The default Vue slot

Props: ExAutocompleteList

as

Type	Default	Required
string component	template	false

Description: Sets the element type of ex-dropdown-trigger. Any custom vue component can also be passed.

---

disabled

Type	Default	Required
boolean	false	false

Description: Enables / Disables dropdown trigger.

---

minWidth

Type	Default	Required
string number	Width of the trigger	false

Description: Sets the min-width of ex-dropdown-list. Values can also be percentages.

---

maxWidth

Type	Default	Required
string number	undefined	false

Description: Sets the max-width of ex-dropdown-list. Values can also be percentages.

---

maxHeight

Type	Default	Required
string number	undefined	false

Description: Sets the max-height of ex-dropdown-list. Values can also be percentages.

---

Slots

Name	Description
default	The default Vue slot. { isOpen: boolean }

Props: ExAutocompleteListItem

as

Type	Default	Required
string component	div	false

Description: Sets the element type of ex-dropdown-list-item. Any custom vue component can also be passed.

---

disabled

Type	Default	Required
boolean	false	false

Description: Enables / Disables dropdown list item.

---

Slots

Name	Description
default	The default Vue slot. { active: boolean disabled: boolean }