Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/iliyazelenko/vue-cool-select

Select with autocomplete, slots, bootstrap and material design themes.
https://github.com/iliyazelenko/vue-cool-select

autocomplete bootstrap input material-design search searching select vue

Last synced: 5 days ago
JSON representation

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

Awesome Lists containing this project

README

        



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](README_2VERSION.md) (also, see [breaking changes](https://github.com/iliyaZelenko/vue-cool-select/blob/master/CHANGELOG.md#300-2019-09-18)).

# [Flexible select](https://iliyazelenko.github.io/vue-cool-select) [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Vue%20select%20component%20with%20autocomplete,%20slots,%20bootstrap%20and%20material%20design%20themes.&url=https://github.com/iliyaZelenko/vue-cool-select&via=IlyaZelenko&hashtags=vue,bootstrap,developers,github,html,js,web,npm,material-design)






## [Demo + Documentation](https://iliyazelenko.github.io/vue-cool-select)

[![](https://i.imgur.com/b7wxLPT.png)](https://iliyazelenko.github.io/vue-cool-select)

## 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`:
```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
}
}
}
```

3. Add to ``:

```vue

```

### Browser (CDN)

Include vue-cool-select in the page.

```html

```

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

---

Documentation and examples [here](https://iliyazelenko.github.io/vue-cool-select).

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