Vue-opti-select-light NPM

vue-opti-select-light

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build-bundle

Lints and fixes files

npm run lint

Description

Hight performance dropdown. Tested with 1,000,000 items with lazyRender.

Props

Name	Description
value	Key or Array of keys
selectFirst	Boolean default => FALSE
options	Array of object or Function (Server Side)
uniqueKey	String OR Function(option) => "String", Default "value"
labelKey	String OR Function(option) => "String", Default "content"
searchable	Boolean default => FALSE
searchFields	Array or Function, Default labelKey
searchPlaceholder	String default "Search..."
searchNoResultsPlaceholder	String default "No results found..."
debounce	Boolean default => FALSE (Search debounce)
debounceValue	Number default 250ms
groups	Array of object
groupBoundary	Boolean default => TRUE, Radio button case
groupCollapse	Boolean default => FALSE, Activate collapse group
collapsed	Boolean default => FALSE, Default collapsed state
buttonType	String default "placeholder", options => "filter", "static", "tag"
tagLimit	Number default => 50 ( Used when buttonType is "tag" )
buttonNoCaret	Boolean default => FALSE
buttonBlock	Boolean default => FALSE
buttonSize	String default => "sm"
optionType	String default "text", options => "radio", "checkbox"
buttonPlaceholder	String default "Select Option"
buttonPlaceholderAllSelected	String default ""
buttonPlaceholderMultiple	Function({ count, suffix }) => `${count} item${suffix} selected`
single	Boolean default => FALSE
lazy	Boolean default => FALSE
lazyRender	Boolean default => FALSE
emitOnClick	Boolean default => FALSE
disabled	Boolean default => FALSE
prevent	Boolean default => FALSE (Prevent from selecting)

Slots

Name	Description
BUTTON_PLACEHOLDER	slot-scope="{ options, option }"
TAG	slot-scope="{ option, remove }"
TAG_LABEL	slot-scope="{ option }"
HEADER
HEADER_2	Slot after search
FOOTER
GROUP_BEFORE	slot-scope="{ group }"
GROUPBEFOREname	slot-scope="{ group }"
GROUP	slot-scope="{ group, selectAllFiltered, unselectAllFiltered }"
GROUP_name	slot-scope="{ group, selectAllFiltered, unselectAllFiltered }"
GROUP_AFTER	slot-scope="{ group }"
GROUPAFTERname	slot-scope="{ group }"
ITEM	slot-scope="{ option }"
ITEM_name	slot-scope="{ option }"
ITEMBEFOREname	slot-scope="{ option }"
ITEMAFTERname	slot-scope="{ option }"
SEARCH_NO_RESULTS

Events

Name	Description
@input	Function(Array)
@update	Function(Array), Exec when updated from v-model
@click	Function({Object}, Boolean)
@change	Function(Array), Exec when hidden
@shown	Dropdown shown
@hidden	Dropdown hidden

Methods

Name	Description
add()	Function(String or Array of keys)
remove()	Function(String or Array of keys)
selectAll()	Select All
clear()	UnSelect All
show()	Open dropdown
hide()	Hide dropdown
resetOptions()	Reset Server-Side options

vee-validate 2.*

Prop	Description
data-vv-value-path	"$c_model" (optional)
data-vv-validate-on	"input\|update"

// Example vee-validate 2.*
<vue-opti-select-light
  :class="[{ 'has-error': $_hasError('field3') === false }, 'w-100']"
  data-vv-as="Campaign Type"
  v-validate="'required'"
  data-vv-validate-on="input|update"
  data-vv-value-path="$c_model"
  name="field3"
  :value="row.field3 && row.field3.to && row.field3.to.value ? row.field3.to.value.key : null"
  @change="(option) => { row.field3.to = option; $_changeFieldTo(row, item); }"
  :options="$c_fieldsToOptions"
  :groups="optionsData.fieldsGroup"
  :unique-key="option => option.value.key"
  label-key="text"
  single
  searchable
  button-block
/>