ElementAddonOptions
Used by elements to render options in an addon.
Options
Find below the list of options that can use to configure ElementAddonOptions component. Options can be passed to the component via props in inline templates, or in the element's object when using schema.
options
- Type:
array - Default:
[]
<ElementAddonOptions :options="[
{
label: 'Option 1',
value: 'option_1',
index: 0,
}
]" ... />List of options to display.
Each option must have at least label, value and index properties defined.
Optionally, you can add a display property, that can be either a Vue component or function.
<!-- Vue component -->
<ElementAddonOptions :options="[
{
// ...
display: {
props: ['el$', 'option', 'index', 'selected', 'pointed'],
render() {
return // ...
}
}
}
]" ... /><!-- Function -->
<ElementAddonOptions :options="[
{
// ...
display(option, index, selected, pointed, el$) {
return '<html>'
}
}
]" ... />relaxed
- Type:
boolean
position
- Type:
string - Default:
over
aria
- Type:
object - Default:
{}
placeholder
- Type:
string|number|object
The placeholder to display for the dropdown selector next to the caret.
It can be a string (HTML), a Vue component or a function.
<!-- Vue component -->
<ElementAddonOptions :placeholder="{
props: ['el$', 'option'],
render() {
return // ...
}
}" ... /><!-- Function -->
<ElementAddonOptions :placeholder="(option, el$) => {
return // ...
}" ... />Properties
Properties include data, computed and inject properties of the component. You can use them by reaching the element's Vue component instance via form$'s el$(path) method or directly via this in options API or el$ in Composition API.
isOpen
- Type:
boolean - Group:
data
Whether the dropdown list is open.
selector
- Type:
HTMLElement - Group:
data
The container div.
dropdown
- Type:
HTMLElement - Group:
data
The dropdown container div.
left
- Type:
number|undefined - Group:
data
The left position of the dropdown.
right
- Type:
number|undefined - Group:
data
The right position of the dropdown.
top
- Type:
number|undefined - Group:
data
The top position of the dropdown.
bottom
- Type:
number|undefined - Group:
data
The bottom position of the dropdown.
search
- Type:
string - Group:
data
The current search term.
searchTimeout
- Type:
object - Group:
data
Store for search timeout.
hoverDisabled
- Type:
boolean - Group:
data
Whether selection on hover is disabled.
selected
- Type:
object - Group:
data
The currently selected option.
pointed
- Type:
object - Group:
data
The currently pointed option.
style
- Type:
object - Group:
computed
Additional style attribute for the dropdown (position values).
focused
- Type:
array - Group:
computed
The option that should be focused according to current search term.
Size
- Type:
string - Group:
inject
The size of the component.
View
- Type:
string - Group:
computed
The name of the resolved view for the component. This one should be used to determine the component's view in class functions.
template
- Type:
object - Group:
computed
The component's template.
classes
- Type:
object - Group:
computed
The component's classes.
theme
- Type:
object - Group:
inject
The global theme object, which contains all the default templates and classes.
form$
- Type:
Vueform - Group:
inject
The root form's component.
el$
- Type:
VueformElement - Group:
inject
The parent element's component.
Methods
The methods of the component that you can use by reaching the element's Vue component instance via form$'s el$(path) method or directly via this in options API or el$ in Composition API.
close
- Returns:
void
Closes the dropdown.
scrollToOption
- Arguments:
{object} option*- an option object formoptions.
- Returns:
void
Scroll the dropdown to an option.
scrollToSelected
- Returns:
void
Scroll to the currently selected option (async).
selectOption
- Arguments:
{object} option*- an option object formoptions.
- Returns:
void
Select an option.
handleOptionPoint
- Arguments:
{object} option*- an option object formoptions.
- Returns:
void
Handles pointing an option (sets pointed).
handleOptionClick
- Arguments:
{object} option*- an option object formoptions.
- Returns:
void
Handle the click of an option.
handleSelectorClick
- Arguments:
{Event} event*- the Event
- Returns:
void
Handles the click of collapsed element.
handleSelectorKeydown
- Arguments:
{Event} event*- the Event
- Returns:
void
Handles the keydown even of the collapsed element when focused (async).
handleClickOutside
- Arguments:
{Event} event*- the Event
- Returns:
void
Handles clicking outside of the dropdown once opened (closes it).
handleKeydown
- Arguments:
{Event} event*- the Event
- Returns:
void
Handles the keydown event when the dropdown is open.
handleResize
- Returns:
void
Handles the window resize event (closes the dropdown if open).
reset
- Returns:
void
Removes the selected option.
on
- Arguments:
{string} event*- name of the event to listen for{function} callback*- callback to run when the event is triggered
- Returns:
void
Adds a listener for an event.
off
- Arguments:
{string} event*- name of the event to remove
- Returns:
void
Removes all listeners for an event.
fire
- Arguments:
{any} args- list of arguments to pass over to the event callback
- Returns:
void
Fires and emits an event.
Events
With events you can subscribe to different events broadcasted by the element. It can be used inline as regular Vue event listeners with @event format. In schema it can be used in PascalCase format prefixed with on (eg. onChange).
<template>
<Vueform>
<ElementAddonOptions @{eventName}="handler" ... />
</Vueform>
</template><script>
import { Vueform, useVueform } from '@vueform/vueform'
export default {
mixins: [Vueform],
setup: useVueform,
data: () => ({
vueform: {
schema: {
element: {
type: 'element-addon-options',
on{EventName}() {
// ...
}
}
}
}
})
}
</script>You can also use on(event, callback) method to subscribe to events.
select
- Params:
{object} option- the selected option{component} el$- the element's component
Triggered when an option is selected.
open
- Params:
{component} el$- the element's component
Triggered when the dropdown list is opened.
close
- Params:
{component} el$- the element's component
Triggered when the dropdown list is closed.
