GitHub - 777genius/vue-cool-select: Select with autocomplete, slots, bootstrap and material design themes. (original) (raw)

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

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

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

Browser (CDN)

Include vue-cool-select in the page.

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