Advanced Dropdown Component – vue-select

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.

  • @select: when an option is selected
  • @create: when a new option is created on attempt for tagging
  • @input: When updating model value
  • @focus: on focus
  • @blur: on blur

Download Details:

Author: desislavsd

Live Demo: https://jsfiddle.net/desislavsd/es2n6py0/

Download Link: https://github.com/desislavsd/vue-select/archive/master.zip

Official Website: https://github.com/desislavsd/vue-select

Last Update: November 1, 2019

Install:

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

You Might Be Interested In:

Add Comment