vue-single-select-component

Install

NPM

Install the package:

npm install @profesia/vue-single-select-component --save-dev

Then import it in your project

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

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:

<single-select inputName="Example" :listOptions="exampleOptions"></single-select>

Options

inputName

Mandatory. A string, which is ised for commits and state listening.

listOptions

Mandatory. An array of objects to create select options.

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:

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:

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.

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.

'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

<div class="module-single-select" id="module-single-select-Example">
    <input value="0" name="Example" type="hidden">
    <div class="module-single-select-box">
        Select option
        <div class="module-single-select-box-btn"></div>
    </div>
    <div class="module-single-select-list-container">
        <!-- Your option list -->
        <ul class="module-single-select-list">
            <li class="module-single-select-list-selected">Select option</li>
            <li>number value</li>
            ...
        </ul>
    </div>
</div>

Select with automatic submit

<div class="module-single-select" id="module-single-select-Example">
    <form action="autoSubmitUrl" method="post">
        <input value="0" name="Example" type="hidden">
    </form>
    <div class="module-single-select-box">
        Select option
        <div class="module-single-select-box-btn"></div>
    </div>
    <div class="module-single-select-list-container">
        <!-- Your option list -->
        <ul class="module-single-select-list">
            <li class="module-single-select-list-selected">Select option</li>
            <li>number value</li>
            ...
        </ul>
    </div>
</div>

CSS

All CSS is based uppon this structure.

.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.

.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 [email protected]; 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