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

Name	type	default	description
value	-	-	active value
placeholder	String	-	is shown, when no value is set
disabled	Boolean	false	disables the select
multiple	Boolean	false	allows to select multiple options
small-screen-size	Number	600	below this size the dialog opens as a modal
always-dropdown	Boolean	false	always opens as a dropdown
always-modal	Boolean	false	always opens as a modal
is-opened	Boolean	false	(two-way) set to open / close
unsafe	Boolean	false	used in conjuction with coerce function. Allows you to use html output. (see unsafe / coerce usage)
dropdown-transition	String	-	name of vue transition used for dropdown
modal-transition	String	-	name of vue transition used for modal
match	Function(str:String, child:OptionComponent)	Search in the textContent of $el of child	used for matching, when letters are pressed
coerce	Function(value:Obj/[Obj])	joining Arrays	used for converting value to displayed string. Argument is an array of values for multiple and a single value vor !multiple
overlay	Boolean	false	dropdown prop (see vue-comps-dropdown )
onBody	Boolean	false	dropdown prop (see vue-comps-dropdown )

Events

Name	description
before-enter	will be called before open animation
after-enter	will be called when opened
before-leave	will be called before close animation
after-leave	will be called when closed
toggled(isOpened:Boolean)	emitted when gets opened or closed. Alternative to use two-way is-opened prop
input(value)	emitted when value changes

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.