A Vue Cool Select with autocomplete and material design

A Vue Cool Select with autocomplete and material design

Select with autocomplete, slots, bootstrap and material design themes.

Coverage Downloads Version License CircleCI Build Status Language grade: JavaScript codebeat badge codebeat badge

Flexible select Tweet

Demo + Documentation

Features

  • 2 themes: Bootstrap 4, Material Design
  • autocomplete (you can use custom search)
  • control through arrows
  • slots (13)
  • events (7)
  • props (24)
  • loading indicator (helpful for REST requests)
  • validation
  • support on mobile devices
  • disabled and readonly

Write your suggestions, glad to add.

Installation

yarn add vue-cool-select or npm install --save vue-cool-select

Get started

  1. Import and select a theme:
import VueSelect from 'vue-cool-select'

Vue.use(VueSelect, {
  theme: 'bootstrap' // or 'material-design'
})
  1. Use inside inside another component:
import { CoolSelect } from 'vue-cool-select'

export default {
  components: { CoolSelect },
  data () {
    return {
      items: [...],
      selected: null
    }
  }
}
  1. Add to <template>:
<cool-select
  v-model="selected"
  :items="items"
/>

Documentation and examples here.

TODO

  • multi-select
  • rebuild build system (rollup)
  • 100% tests coverage

I am happy to add something or improve, you can write what you want to see. I also have more motivation to work if you give a star.

Github Repository