extendedProperties.md

Properties

Back to documentation index

List of all properties

Selectic supports common properties which are related to <select> element (read dom properties document), but they are some more which are more related to the nature of selectic.

• groups
• noCache
• open
• options
• selectionIsExcluded
• texts
• params
  • allowClearSelection
  • allowRevert
  • autoDisabled
  • autoSelect
  • emptyValue
  • fetchCallback
  • forceSelectAll
  • formatOption
  • formatSelection
  • getItemsCallback
  • hideFilter
  • keepOpenWithOtherSelectic
  • listPosition
  • optionBehavior
  • pageSize
  • selectionOverflow
  • strictValue

groups

Type: Option[]

Default: []

This property list options which should contains other options.

It is required to fill this property only in dynamic mode in order to know to which group their property group refers.

<selectic
    :groups="[{
        id: 'g1',
        text: 'The first group',
    }, {
        id: 'g2',
        text: 'The second group',
    }]"
/>

noCache

Type: Boolean

Default: false

If noCache is set to true, the dynamic cache is cleared each time the list is opening. This means that selectic has to re-fetch options every time.

This is useful when we want up to date options from backend.

This attribute has effects only in (dynamic mode).

<selectic
    :params="{
        fetchCallback: fetchData,
    }"
    noCache
/>

open

Type: boolean

Default: false

If open is set to true, the selectic component will open (if closed). If open is set to false, the selectic component will close (if opened).

This allows to force the selectic to a given state. The state may be changed due to other user actions (like selecting a value which close the component). Then to re-open the component this attribute should be reset to false and then to true.

It also allows to start in an open state.

This attribute purpose is to change the state programmatically. To keep state unchanged there are several other attributes (disabled, keepOpenWithOtherSelectic, ...). The current state can be updated with the open and close events.

It is also possible to change the "open" state with the method toggleOpen.

<selectic
    :options="optionList"
    open
/>

options

Type: Option[]

Default: []

This property is to list all options available (read how to build a list).

This property can be omitted in dynamic mode (read how to build dynamic list).

selectionIsExcluded

Type: boolean

Default: false

It should be only used in multiple mode.

If it is set to true, it means that current value are options which are not selected.

It is useful with dynamic mode where it is not possible to fetch all options.

This value can be changed automatically by selectic if all options are fetched.

<selectic
    :options="['item1', 'item2']"
    value="item2"
    selectionIsExcluded
/>

texts

Type: Object

Default: {}

The texts property is to change texts in the component.

It is possible to change all texts or only some.

It changes the texts only for this component. To change texts for all selectic components, you should use the static method changeTexts().

Read the documentation about changing text.

<selectic
    :options="['Goldfish', 'Salmon', 'Trout', 'Tuna']"
    value="Tuna"
    :texts="{
        searchPlaceholder: 'Search for fish',
        noResult: 'No fish matched your search',
    }"
/>

params

Type: Object

This is a property for advanced configuration. Properties set in params should not change during the life time of a selectic component.

Read the advanced configuration documentation to know more about the params property.