vue-opti-select-light

VueJS Optimized Select
1,197
vue vuejs select multiselect vue-opti-select
Install
npm install vue-opti-select-light
Latest Version:0.6.7
Vue:2
License:MIT
Last Updated:Apr 29, 2024
Links: GitHub  ·  npm
Maintainer: fabiopapajani

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 }"
GROUP_BEFORE_[name] slot-scope="{ group }"
GROUP slot-scope="{ group, selectAllFiltered, unselectAllFiltered }"
GROUP_[name] slot-scope="{ group, selectAllFiltered, unselectAllFiltered }"
GROUP_AFTER slot-scope="{ group }"
GROUP_AFTER_[name] slot-scope="{ group }"
ITEM slot-scope="{ option }"
ITEM_[name] slot-scope="{ option }"
ITEM_BEFORE_[name] slot-scope="{ option }"
ITEM_AFTER_[name] 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
/>
Todo!
  • Lazy Render groups support

Related Packages

vue-bootstrap-multiselect

Multiselect packages for Vue.js 2 by bootstrap 4 without jQuery

5,254
multiselect select vue vue.js
vue-multiselect-component

A multiselect component with support for Vue 2

38,220 4
multiselect select vue js vue2
@politico/vue-accessible-selects
4,052 12
multiselect select vue a11y accessible
slim-select_2

Slim advanced select dropdown

2,800 1,332
multiselect select dropdown search vanilla
vue-multiselect-cmp

A multiselect component with support for Vue

1,675
multiselect select vue js vue2

Version History

Version Released Vue License
0.6.7 ^2.6.11 MIT
0.6.6 ^2.6.11 MIT
0.6.5 ^2.6.11 MIT
0.6.4 ^2.6.11 MIT
0.6.3 ^2.6.11 MIT