nice-select

```
<template>
    <select :class="getClasses()" v-nice-select="{value: value, onChange: changeCallback}">
        <option v-if="defaultValue" :value="defaultValue.value">{{ defaultValue.label }}</option>
        <option :value="getValue(item)" v-for="item in values">{{ getLabel(item) }}</option>
    </select>
</template>

<script type="text/babel">
    const niceSelect = {
        inserted(el, binding, vnode) {
            if (binding.value.value) {
                $(el).val(binding.value.value);
            }

            $(el).niceSelect().on('change', function (e) {
                binding.value.onChange(this.value)
            });
        },
        update(el, binding) {
            setTimeout(() => {
                $(el).val(binding.value.value);
                $(el).niceSelect('update');
            }, 150);
        },
        unbind(el) {
            $(el).niceSelect('destroy');
        }
    };

    export default {
        name: 'nice-select',
        props: {
            value: {
                type: [String, Number, Boolean, Symbol]
            },
            defaultValue: {
                type: Object
            },
            changeCallback: {
                type: Function
            },
            values: {
                type: Array
            },
            valuesKeyValue: {
                type: String
            },
            valuesKeyLabel: {
                type: String
            },
            type: {
                type: String
            },
            valuesKeyValueCallback: {
                type: Function
            },
            valuesKeyLabelCallback: {
                type: Function
            },
        },
        directives: {
            'nice-select': niceSelect
        },
        mounted() {
        },
        methods: {
            getClasses() {
                if (this.type === 'small') {
                    return ['select-small'];
                }

                return ['select-default'];
            },
            getValue(item) {
                if (this.valuesKeyValueCallback) {
                    return this.valuesKeyValueCallback(item);
                }

                return item[this.valuesKeyValue || 'value'];
            },
            getLabel(item) {
                if (this.valuesKeyLabelCallback) {
                    return this.valuesKeyLabelCallback(item);
                }

                return item[this.valuesKeyLabel || 'label'];
            }
        }
    }
</script>

<style lang="stylus">
    @import './nice-select.css'
</style>

```