iliyaZelenko
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:`js 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)
2. Use inside another component:
```js
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! :smile: