vue-simple-select v1.0.1

vue-simple-select

a simple, responsive select - crazily extendable.

Demo

for a styled / animated version see vue-materialize

Install

npm install --save-dev vue-simple-select

or include build/bundle.js.

Usage

# in your component
components:
  "simple-select": require("vue-simple-select")
  "simple-option": require("vue-simple-select/option")
# or, when using bundle.js
components:
  "simple-select": window.vueComps.select
  "simple-option": window.vueComps.selectOption

<simple-select :value="value" @input="onInput">
  <simple-option value="1">option 1/<simple-option>
  <simple-option value="2">option 2</simple-option>
</simple-select>

see dev/ for examples.

Props

Events

Transition

see vue-comps-dropdown and vue-comps-modal

Static / Dynamic values

The select is lazily evaluated on first click - this means it doesn't know about its dialog. This has the advantage, that you can use many selects simultaneously even with expensive dialogs with for example search bars. The drawback is that the displayed value of the select has to be calculated somehow. The default for static options is basically this:

this._slotContents.default.querySelector('[value="'+val+'"]').innerText

For the example

<simple-select>
  <simple-option value="1">option 1/<simple-option>
  <simple-option value="2">option 2</simple-option>
</simple-select>

this would yield option 1 for val=1.

If you however want to use dynamic values - this doesn't work

<simple-select :value="someKey">
  <simple-option v-for="(key,val) in possibleValues" :value="key">{{val}}<simple-option>
</simple-select>

It would make it necessary to evaluate the content of the slot on first display. To avoid this you can provide a coerce function to convert a value to a string:

<simple-select :value="someKey" :coerce="keyToVal">
  <simple-option v-for="(key,val) in possibleValues" :value="key">{{val}}<simple-option>
</simple-select>

methods: {
  keyToVal: function(someKey) {
    return this.possibleValues[someKey]
  }
}

unsafe / coerce usage

If you want to create something like select2 you need your selection as tags. You can create html code within your coerce function.

<simple-select multiple unsafe :coerce="valToTags">
  <simple-option v-for="tag in possibleTags" :value="tag"><simple-option>
</simple-select>

methods: {
  valToTags: function(selectedTags) {
    str = ""
    for (i = 0,len = selectedTags.length; i < len; i++) {
      str += "<span class='tag'>"+selectedTags[i]+"</span>"
    }
    return str
  }
}

Basic example with a searchbar:

You can freely create the select dialog you need. For example with a simple searchbar:

<simple-select @before-enter="reset" v-ref:select>
  <li>
    <input type="search" v-bind:value.sync="search" @keyup="onKeyup" @input="onInput"></input>
  </li>
  <simple-option :value="opt" v-for="opt in foundData" track-by="$index"><simple-option>
</simple-select>

computed:{
  foundData: function() {
    return @searchData unless @search
    for d in @searchData
      if @search == d
        return [d]
    return []
  }
},
data: {
  search: ""
  searchData: ["a","b","c","d","e"]
},
methods: {
  reset: function() {
    this.search = ""
    this.$refs.search.focus()
  },
  onKeyup: function(e) {
    // overwrite custom behavior of the select on certain keys like space and side arrows
    keys = [9,13,27,38,40]
    e.preventDefault() if keys.indexOf(e.which) == -1
  },
  onInput: function() {
    this.$refs.select.selectFirst()
  }
}

Changelog

• 1.0.1
  added unsafe prop
  added innerText evaluation for static content

Development

Clone repository.

npm install
npm run dev

Browse to http://localhost:8080/.

License

Copyright (c) 2016 Paul Pflugradt Licensed under the MIT license.