@vuesimple/vs-select
Version:
A simple vue select. Perfect for all your select scenarios.
199 lines (153 loc) • 5.8 kB
Markdown
# Vue Simple Select
#### 🗃 A simple vue select. Perfect for all your select scenarios.
A light weight vue plugin built groundup.
[](https://www.npmjs.com/package/@vuesimple/vs-select)
[](https://img.shields.io/npm/dt/@vuesimple/vs-select.svg)
<br />
<br />
### 📺 Live Demo
Demo: [Link](https://vuesimple.netlify.app)
<br />
### 🛠 Install
```bash
npm i @vuesimple/vs-select
```
<br />
### 🚀 Usage
```html
<template>
<vs-select :options="options1"></vs-select>
<vs-multiselect :options="options1"></vs-multiselect>
</template>
<script>
import { VsSelect, VsMultiselect } from '@vuesimple/vs-select';
export default {
components: {
VsSelect,
VsMultiselect,
},
data() {
return {
options1: ['Derek', 'Ryan', 'BB', 'Chris'],
options2: [
{ label: 'Derek', value: 'D' },
{ label: 'Ryan', value: 'R' },
{ label: 'BB', value: 'BB' },
{ label: 'Chris', value: 'C' },
],
};
},
};
</script>
```
<br />
### 🌎 CDN
```html
<script src="https://unpkg.com/@vuesimple/vs-select@<version>/dist/vs-select.min.js"></script>
```
```javascript
// Main/Entry file
app.use(VsSelect.plugin);
```
```html
<template>
<vs-select :options="options1"></vs-select>
<vs-multiselect :options="options1"></vs-multiselect>
</template>
```
<br />
<h3>
<img src="https://i.imgur.com/MWynQNa.png" width="20px"> Nuxt.js
</h3>
Nuxt Code Snippet
After installation,
- Create a file `/plugins/vs-select.js`
```javascript
import Vue from 'vue';
import { VsSelect, VsMultiselect } from '@vuesimple/vs-select';
Vue.component('vs-select', VsSelect);
Vue.component('vs-multiselect', VsMultiselect);
```
- Update `nuxt.config.js`
```javascript
module.exports = {
...
plugins: [
{ src: '~plugins/vs-select', mode: 'client' }
...
]
}
```
- In the page/ component
```html
<template>
<vs-select :options="options1"></vs-select>
<vs-multiselect :options="options1"></vs-multiselect>
</template>
```
<br />
### ⚙ Props
| Name | Type | Default | Description |
| -------------- | ------- | ------------------- | ------------------------------------------------------------------------------------------------- |
| options | Array | - | This can be array or array of objects. `['Tony', 'Bruce']` or `[{ label: 'Derek', value: 'D' }]`, |
| isSearch | Boolean | false | Searchable select |
| label | String | - | Label text |
| placeholder | String | 'Select' | Placeholder text |
| preselected | Array | - | Preselected items. For array of objects, pass `value` as array items ex: `['D', 'BB']` |
| disabled | Boolean | false | To disable select box |
| isError | Boolean | false | To show error in select box |
| isMenu | Boolean | false | To display like menu dropdown. Available only on `vs-select` |
| isCompact | Boolean | false | Applies compact style to vs-select |
| emptyItemsText | String | `No Data Available` | Empty text |
**Note**
You can also pass `disable: true` in array of objects to disable particular item.
```html
// Example
<template>
<vs-select :options="options"></vs-select>
</template>
<script>
import { VsSelect } from 'vs-select';
export default {
data() {
return {
options: [
{ label: 'Iron Man', value: 'Tony' },
{ label: 'Thor', value: 'thor', disabled: true },
{ label: 'Captain America', value: 'Steve Roger' },
],
};
},
};
</script>
```
<br />
### 🔥 Events
| Name | Description |
| ------- | ------------------------------------------------------------------------- |
| v-model | Emitted when the item is selected. |
| @change | Emitted when the item is selected.<br />(arg1: value, arg2: object/value) |
<br />
**Note**
Colors/ radius can be modified for the select box using css variables.
Default colors used:
```css
<style>
.vs-select,
.vs-multiselect {
--vs-select-bg: #ffffff;
--vs-select-border: #d8dcde;
--vs-select-border-hover: #5293c7;
--vs-select-hover: #edf7ff;
--vs-select-error: #cc3340;
--vs-select-icon: #68737d;
--vs-select-border-radius: 4px;
}
</style>
```