Vue stf select: Flexible and customized selection plugin

stf-vue-select

Time to check out a simple and flexible selecting solution for Vue.js projects, stf vue select. It features a dropdown in which you can pass your own list of choices, and it can be searchable, allowing users to type and select.

If you want to play around with it, check the Demo page. The author has disabled Vue-devtools usage on this page but you can try it in your own environment.

Example

To make use of the vue-select plugin, start by installing it in your project.

Install

yarn add stf-vue-select --save

Import it into your project along with its styles

import {StfSelect, StfSelectOption} from 'stf-vue-select'
import 'stf-vue-select/dist/lib/stf-vue-select.min.css'

Vue.component('stf-select-option', StfSelectOption)
Vue.component('stf-select', StfSelect)

The usage example provided is quite big in terms of code because the plugin tends to be more flexible, so you can customize it with ease.

In the template, the markup of the stf-select & stf-select-option components are used in combination with other elements.

<!--select via list -->
<label>Select without input</label>
<stf-select v-model="value">
    <div slot="label">Input address</div>
    <div slot="value">
            <div v-if="value">
                 <span>{{value.address}} (<small>{{value.text}}</small>)</span>
            </div>
    </div>
    <section class="options delivery_order__options">
                    <stf-select-option  
                     v-for="item of list" :key="item.id"
                     :value="item"
                     :class="{'stf-select-option_selected': item.id === (value && value.id)}" 
                     >
                        <span>{{item.text}} (<small>{{item.address}}</small>)</span>
                    </stf-select-option>
    </section>
</stf-select>

<!-- user can search & select -->
<label>Select with input</label>
<stf-select v-model="value">
    <div slot="label">Input address</div>
    <div slot="value">
            <div v-if="value">
             <span>{{value.address}} (<small>{{value.text}}</small>)</span>
            </div>
    </div>
    <div slot="search-input">
                <input @input="onsearch">
    </div>
    <section class="options delivery_order__options">
            <stf-select-option  
             v-for="item of listFinded" :key="item.id"
             :value="item"
             :class="{'stf-select-option_selected': item.id === (value && value.id)}" 
             >
                <span>{{item.text}} (<small>{{item.address}}</small>)</span>
            </stf-select-option>
    </section>
</stf-select>

Data is passed through the data function and searching is triggered on the input event and executed with the onsearch method.

created() {
    this.listFinded = this.list;
},
data () {
    return {
        value: null,
        list: [
            {
                                ...
            },
           ...
        ],
        listFinded: [
        ]
    }
},
methods: {
    onsearch(e) {
        if (e.target.value) {
            this.listFinded = this.list.filter(el => el.text.indexOf(e.target.value) !== -1 || el.address.indexOf(e.target.value) !== -1);
        } else {
            this.listFinded = this.list;
        }
    }
}

The options available are listed below.

props: {
    value: [Object, Number, String, Array, Boolean],
    more: Boolean,
    pending: Boolean,
    optionsWrapClass: String,
    needFocusInpOnTab: {
            type: Boolean,
            default: false
    },
},

If you want to check out the source code of this plugin or submit a request, head to its repository available here.