Cool Flexible Select Component For Vue

Cool Flexible Select Component For Vue

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

Coverage Downloads Version License CircleCI Build Status

Flexible select Tweet

Demos + Documentation

Features

  • 2 themes: Bootstrap 4, Material Design
  • autocomplete (you can use custom search)
  • control through arrows
  • slots (9)
  • 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

Tags: #Vue.js