<a href="https://codecov.io/gh/iliyaZelenko/vue-cool-select">
  <img src="https://img.shields.io/codecov/c/github/iliyaZelenko/vue-cool-select.svg" alt="Coverage">
</a>
<a href="https://www.npmjs.com/package/vue-cool-select">
  <img src="https://img.shields.io/npm/dm/vue-cool-select.svg" alt="Downloads">
</a>
<a href="https://www.npmjs.com/package/vue-cool-select">
  <img src="https://img.shields.io/npm/v/vue-cool-select.svg" alt="Version">
</a>
<a href="https://www.npmjs.com/package/vue-cool-select">
  <img src="https://img.shields.io/npm/l/vue-cool-select.svg" alt="License">
</a>
<a href="https://circleci.com/gh/iliyaZelenko/vue-cool-select">
  <img src="https://circleci.com/gh/iliyaZelenko/vue-cool-select.svg?style=shield" alt="CircleCI Build Status">
</a>
<a href="https://lgtm.com/projects/g/iliyaZelenko/vue-cool-select/context:javascript">
  <img alt="Language grade: JavaScript" src="https://img.shields.io/lgtm/grade/javascript/g/iliyaZelenko/vue-cool-select.svg?logo=lgtm&logoWidth=18" />
</a>
<a href="https://codebeat.co/projects/github-com-iliyazelenko-vue-cool-select-master">
  <img alt="codebeat badge" src="https://codebeat.co/badges/a6d9cfc8-529e-48c7-ae04-7d69fe6b1239" />
</a>
<a href="https://standardjs.com/">
  <img alt="codebeat badge" src="https://badgen.net/badge/code%20style/standard/f2a" />
</a>

Flexible select

Features

• 2 themes: Bootstrap 4 (equal styles), Material Design
• autocomplete (you can use custom search)
• keyboard controls (not only through the arrows)
• slots (13) allow content to be changed anywhere
• events (7) will let you know about everything
• props (24) allow you to customize a component in a variety of ways
• loading indicator (helpful for REST requests)
• validation, state of error and success
• support on mobile devices
• disabled and readonly
• smile and large sizes (as in bootstrap)
• ability to set styles for a component
• TypeScript support

Write your suggestions, glad to add.

Installation

yarn add vue-cool-select@^2.0.0 or npm install --save vue-cool-select@^2.0.0

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 another component:

import { CoolSelect } from 'vue-cool-select'

export default {
  components: { CoolSelect },
  data () {
    return {
      // simple example of items
      items: ['Item 1', 'Item 2', 'Item 3'],
      // there will be a selected item
      selected: null
    }
  }
}

1. Add to <template>:

<cool-select
  v-model="selected"
  :items="items"
/>

Documentation and examples here.