vue-single-select-component


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:

$3

##### Single select
``html



``

##### Select with automatic submit
``html



``

$3

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