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