@optix/vue-select v0.0.7

Vue Select

Enhanced select component for Vue.js, unlike other select components Vue Select will not manipulate the options you provide to it, instead we emit events allowing you to perform all the filtering, loading or whatever else you might want to do yourself.

Features

• No dependencies
• v-model support
• Single select
• Multiple select
• Infinite loading on scroll with throttling
• Searchable with debounce
• Configurable
• Themeable

Install

yarn add @optix/vue-select

Setup

import Vue from 'vue';
import VueSelect from '@optix/vue-select';

import '@optix/vue-select/dist/vue-select.min.css';

Vue.use(VueSelect, /* { options } */);

Basic usage

<template>
    <vue-select
        v-model="value"
        :options="options"
    />
</template>

<script>
export default {
    data() {
        return {
            value: null,

            options: [
                {
                    value: 1,
                    label: 'Option One',
                },
                {
                    value: 2,
                    label: 'Option Two',
                    disabled: true,
                }
                // ...
            ],
        };
    };
};
</script>

Options

Props

Events

Slots

Dropdown Option

Name: dropdown-option Description: Custom option template

Slot-scope:

• option - Object of the current option
• classes - Object containing 3 classes

{
    focused: false,
    selected: false,
    disabled: false,
}

<template #dropdown-option="{ option, classes }">
    <div class="vs-dropdown-option" :class="classes">
        {{ option.label }}
    </div>
</template>

Dropdown Loader

Name: dropdown-loader Description: Shows when no options are passed into the select

Default: Loading...

<template #dropdown-loader>
    <div class="vs-dropdown-loader">
        Loading...
    </div>
</template>

TODOs

• Write tests
• Working examples
• Example on styling
• Ability to add new options via component

License

The MIT License (MIT). Please see License File for more information.