Table of contents

* General
* Setup
* Usage
* Object options
* Props
* Slots
* Patch notes

General

Simple select vue component, that allows you to control selected options from array

component is created with:
* Vue 2.6.10

Setup

install module locally with npm or yarn

npm i @pbartkowicz/vueselect

or

yarn add @pbartkowicz/vueselect

Usage

Import

``
import vueselect from '@pbartkowicz/vueselect'
`

Register in components section

`
components:{
vueselect,
},
`

Define array with select options

`
data(){

return{

yourArrayWithOptions:[
'option1',
'option2',
'option3'
],

output: '',

}

}
`
Use component in your code

`

`

You can always define array with objects

`
data(){

return{

yourArrayWithOptions:[
{id: 1, name: 'option1'},
{id: 2, name: 'option2'},
{id: 3, name: 'option3'}
],

output: '',

}

}
`

And then use label prop for displayed value in select, and reduce prop for key in object for select output

`

`

For option named 'option2' output will be '2'

Object options

When you will define array with objects, you can pass in to objects two options:

| Option | Type | Default | Required | Description |
| ----------- | ------ | ------- | -------- | ------------------------------------------------------------------------------------------- |
| class | String | | No | Name of class for option. |
| hide | Boolean| | No | Option to hide item. |

`
data(){

return{

yourArrayWithOptions:[
{id: 1, name: 'option1', class: 'your-class-for-option'},
{id: 2, name: 'option2', hide: true},
{id: 3, name: 'option3'}
],

output: '',

}

}
`

In this case 'option1' will have class "your-class-for-option" and 'option2' will not be displayed

Props

| Prop | Type | Default | Required | Description |
| ------------ | ------ | ------- | -------- | -------------------------------------------------------------------------------------------------------------------------------- |
| options | Array | | No | Array with select options. |
| label | String | | No | Displayed value in select for array with objects. |
| reduce | String | | No | Select key in object for vueselect component output. |
| searchable | Boolean| false | No | Enable search in options |
| clearable | Boolean| false | No | Enable clear possibility |
| multiselect | Boolean| false | No | Enable multiselect - output changes to array |
| customClasses| Object | | No | Allows to add custom classes to elements. Use as keys in object: selected, search, clearIcon, dropdownIcon, dropdown, checkbox |

Slots

| Slot | Description |
| ----------------- | ------------------------------------------------------------------------------------------- |
| noOptions | Default value "no options". |
| icon | Slot for icon. |
| clear-icon | Slot for clear icon. |

Example:

`



``

Patch notes

$3

* Changed keywords for npm

$3

* Added multiselect
* Added clear button
* Added custom classes for elements
* Added slot for clear icon

$3

* Added search possibility
* Dynamic position of dropdown depending on the avaible space
* Dynamic tooltip
* Added slot for icon