/vue-cool-select

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

Primary LanguageJavaScriptMIT LicenseMIT

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

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

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

  1. 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)
  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"
/>

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! 😄