The current version is 3.x, if you are looking for 2.x, you can find it here (also, see breaking changes).

Flexible select

Demo + Documentation

Features

no dependencies
props (30) allow you to customize a component in a various ways
slots (13) allow content to be changed anywhere
events (8) will let you know about everything
autocomplete (you can use custom search, you can also disable the search input)
keyboard controls (not only through the arrows)
support on mobile devices
validation, state of error and success
disabled and readonly
small and large sizes (as in bootstrap)
the ability to set your styles, you can write theme from scratch. 2 themes: Bootstrap 4 (equal styles), Material Design
TypeScript support
tab navigation
SSR (Server-Side Rendering)
auto determine the suitable position for the menu if it goes beyond the viewport

Write your suggestions, glad to add.

Installation

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

Get started

NPM

Import this plugin, css (theme) and add plugin via Vue.use:

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

// paste the line below only if you need "bootstrap" theme
import 'vue-cool-select/dist/themes/bootstrap.css'
// paste the line below only if you need "material-design" theme
import 'vue-cool-select/dist/themes/material-design.css'
// you can also import your theme

Vue.use(CoolSelectPlugin)

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
    }
  }
}

Add to <template>:

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

Browser (CDN)

Include vue-cool-select in the page.

<script src="https://unpkg.com/vue-cool-select"></script>

<!-- paste the line below only if you need "bootstrap" theme -->
<link rel="stylesheet" href="https://unpkg.com/vue-cool-select/dist/themes/bootstrap.css">
<!-- paste the line below only if you need "material-design" theme -->
<link rel="stylesheet" href="https://unpkg.com/vue-cool-select/dist/themes/material-design.css">

If Vue is detected in the Page, the plugin is installed automatically.

Documentation and examples here.

TODO

multi-select
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, thanks! 😄

iliyaZelenko/vue-cool-select