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: []
vue
<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
<!-- Vue component -->

<ElementAddonOptions :options="[
  { 
    // ...
    display: {
      props: ['el$', 'option', 'index', 'selected', 'pointed'],
      render() {
        return // ...
      }
    }
  }
]" ... />

vue
<!-- Function -->

<ElementAddonOptions :options="[
  { 
    // ...
    display(option, index, selected, pointed, el$) {
      return '<html>'
    }
  }
]" ... />

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
<!-- Vue component -->

<ElementAddonOptions :placeholder="{
  props: ['el$', 'option'],
  render() {
    return // ...
  }
}" ... />

vue
<!-- 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.

  • 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 form options.
  • 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 form options.
  • Returns: void

Select an option.

handleOptionPoint

  • Arguments:
    • {object} option* - an option object form options.
  • Returns: void

Handles pointing an option (sets pointed).

handleOptionClick

  • Arguments:
    • {object} option* - an option object form options.
  • 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).

vue
<template>
  <Vueform>
    <ElementAddonOptions @{eventName}="handler" ... />
  </Vueform>
</template>
vue
<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.

👋 Hire Vueform team for form customizations and developmentLearn more