Simple single select component in Vue 2, check this DEMO
## Install
#### NPM
Install the package:
```
npm install @profesia/vue-single-select-component --save-dev
```
Then import it in your project
```js
import Vue from 'vue'
import Vuex from 'vuex';
import store from './store';
import { singleSelect } from '@profesia/vue-single-select-component'
Vue.use(Vuex);
new Vue({
el: '#app',
store,
components: {
singleSelect,
},
});
```
##### example of empty store
```js
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex)
export default new Vuex.Store({})
```
#### Browser global
You can't just include the script, because the script needs VUEX, so you have to add it in your scripts and run NPM build (or webpack, gulp, ...).
## Usage
Simply use it like so:
```html
```
## Options
##### inputName
Mandatory. A string, which is ised for commits and state listening.
##### listOptions
Mandatory. An array of objects to create select options.
```js
data: {
exampleOptions: [
{
'value': 1,
'name': 'Number value',
},
{
'value': 'text-value',
'name': 'Text value',
}
]
}
```
If you need to set "Select option" text with empty value, set value to `null`, see bellow the code:
```js
data: {
exampleOptions: [
{
'value': null,
'name': 'Select option',
},
{
'value': 1,
'name': 'Number value',
},
{
'value': 'text-value',
'name': 'Text value',
}
]
}
```
If you need to add custom class to option item, add object key `class`, see bellow the code:
```js
data: {
exampleOptions: [
{
'value': 1,
'name': 'Number value',
'class': 'your-custom-class'
},
{
'value': 'text-value',
'name': 'Text value',
}
]
}
```
##### selectors
Optional. Object of selector names. Defaults to `{ name: 'name', value: 'value', class: 'class' }`.
##### autoSubmitUrl
Optional. A string for url, where page will be redirected after selected option. Defaults to `''`.
##### animateOnClick
Optional. Boolean parameter. If `true`, select is hidden with animation and height set to 0. If `false`, select is hidden by `display: none`. This is useful, if you have many options in select, and you want to have scrolled options (set `max-height` for `.module-single-select-list` in CSS) instead of long option list. Defaults to `true`.
## Settings - VUEX store mutations
##### Select option
There is possibility to set (select) option in select.
You need to commit a mutation with name based on your `inputName`.
Structure of mutation name is `singleSelect + your inputName +/selectOption`, so if inputName is Example, I will call mutation with name singleSelectExample/selectOption.
```js
store.commit('singleSelectExample/selectOption', 'text value');
```
##### Listening for selected option
If you have only one single select on page, you can listen for general name `singleSelect/selectedOption`.
If you have two or more selects on page, you need to listen for state with different names based on your inputName: `singleSelect + your inputName +/selectedOption`.
```js
'One select on page - general name'
store.state.singleSelect/selectedOption
'Two and more selects on page'
store.state.singleSelectInputName/selectedOption
```
## Structure
Once the select has been rendered, it'll create the following structure:
### HTML
##### Single select
````html
Select option
Select option
number value
...
````
##### Select with automatic submit
````html
Select option
Select option
number value
...
````
### CSS
All CSS is based uppon this structure.
```css
.module-single-select {
...
}
.module-single-select-box {
...
}
.module-single-select-box-btn {
...
}
.module-single-select-list {
...
}
.module-single-select-list li {
...
}
```
##### Scrolled option list
With option `animateOnClick` set to `false` you can scroll your option list, set `max-height` for `.module-single-select-list`.
```css
.module-single-select-list {
max-height: value
}
```
## FAQ
- __Where can I see, how it works?__ - Go to DEMO and enjoy ;)
- __How can I provide feedback?__ - Send an email to vrtich@profesia.sk; any feedback is appreciated.
## Release History
- 1.3.6 Wrap boxValue in span element with own class attribute
- 1.3.5 Added possibility to add custom class to option item
- 1.3.4 Add class `selected-value` to main `div` when some value is selected
- 1.3.3 Add data-value attribute with item value in list items
- 1.3.2 Remove forgotten console log
- 1.3.1 Change es2015 presets to env
- 1.3.0 Add prop for setting selectors in item array.
- 1.2.6 Fix List Container height - missing bottom border.
- 1.2.5 Fix addEventListener.
- 1.2.4 Fix bug for animateOnClick property - select didn't hide himself after click.
- 1.2.3 Fix bug (mainly for IE) - detect options support for addEventListener.
- 1.2.2 Edit `EventListener` for click.
- 1.2.1 Fix bug - change `listOptions` type from Object to Array.
- 1.2.0 Major change - `listOptions` are changed from object to array of objects. It's a fix of bug, when javascript automatically order numbered keys.
- 1.1.1 Fix bug - select with prop `:animateOnClick="false"` did not open on first click.
- 1.1.0 Added new option `animateOnClick`, which you can use to scroll your option list.
- 1.0.0 Official release with docs
- 0.0.1 Initial release
