tselect

TSelect

Everything you wish the HTML <select> element could do, wrapped up into a lightweight, extensible Vue component with more beautiful interface.

Installation

You can use NPM to install TSelect.

npm install tselect

Usage

<script>
import {
    Tselect
} from 'tselect';

export default Vue.extend({
    created() {
        this.selected = this.items[0];
    },
    methods: {
        NItem(input) {
            this.items.push({
                name: input,
                icon: "public",
                value: input
            })
        }
    },
    data() {
        return {
            items: [{
                    name: "Phone",
                    value: "phone",
                    icon: "phone"
                },
                {
                    name: "Email",
                    value: "email",
                    icon: "email"
                }
            ],
            selected: undefined
        }
    },
    name: 'Index',
    components: {
        Tselect,
    }
});
</script>

<template>
 <tselect 
    direction="ltr"
    v-on:new-item="NItem"
    v-model="selected"
    :items="items"
    :showNewItem="true">
        Select an Item
 </tselect>
</template>

Props

Item Options

Events

new-item : event is triggered when user submit "New Item" input by clicking "+" button or press enter while focused on the input.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

GPL-3