Advanced Dropdown Component - vue-select

Install & Download:

# NPM
$ npm install @desislavsd/vue-select --save

Description:

vue-select is a Vue.js component to create dynamic, customizable, advanced dropdown select just like the select2 and chosen libraries.

Main features:

Supports both single and multiple selections.
AJAX data fetching.
Data filtering.

How to use it:

1. Install & import.

import '@desislavsd/vue-select/dist/vue-select.css'
import VueSelect from '@desislavsd/vue-select'

2. Register the component.

Vue.use(VueSelect, { 
  /* options */
})
// or
export default {
  components: { vSelect }
}

3. Create a vue-select component and define the option data as follows:

<v-select v-model="name" :from="['vue', 'script']" />
<v-select v-model="name" as="name" :from="[{name: 'vue', id: 1}, {name: 'script', id: 2}]" tagging :tag-keys="[9, 32, 188]" />
<v-select v-model="name" as="name:id" from="/data?q=%s" />

4. All available props.

/**
* Make use of v-model
*/
value: { },
query: String,
/**
* Options for the dropdown. Sould be one of:
* 
* Array:     Array of select options
* Function:  Function that returns an array of options or promise that resolves to an array of options
* String:    Url that will be passed to the fetch function
* Object:    Config object to be passed to the fetch function.
*/
from: {
  type: [ Array, Function, String, Object ], 
  default(){ return [] } 
},
/**
* Option descriptor in the format 'label:value:index'
* 
* label: Path to option property that will be the label. It is used for filtering as well.
*        If options are objects this field is required.
* 
* value: Path to option proprty that will be used as value of the option.
*        If ommited the whole option is used.
* 
* index: Path to unique property of the option used for comparison.
*        If ommited falls back to value.
*/
as: [String, Array],
/**
* Parses the response from the server.
* Should return the array of options.
*/
parse: {
  type: [Function, String],
  default: me
},
fetch: {
  type: Function,
  default: async function(q, cfg){
      let url = cfg.url || cfg;
      
      return await fetchAdapter(url.replace('%s', encodeURIComponent(q)))
  },
},
filter: {
  type: [Boolean, Function],
  default: undefined
},
filterBy: {
  type: Function, 
  default( { label }, q ){
      return ~(label + '').toLowerCase().indexOf(q.toLowerCase())
  }
},
/**
* Debounce in ms for the search function 
*/
debounce: { type: Number, default: 250 },
tagging: { type: [Boolean, Function] },
multiple: { type: Boolean, default: undefined },

dynamic: { type: Boolean, default: undefined },
tags: {}, /* readonly */
tagKeys: {type: Array, default: () => [] },
validate: {
  type: Function,
  default(q){
      let { $attrs } = this;
      return  ( q || !$attrs.hasOwnProperty('minlength') ) && elMatches(this.$refs.inp, ':valid')
  }
},
watchAttrs: {default(){ return ['required', 'disabled', 'readonly']}},

5. Event handlers.