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

Prop	Description	Defualt	Required
newItemPlaceholder	New Item Input Place Holder	New Item - String	false
items	Dropdown Items	undefined - Array	true
showNewItem	if you want to enable add new item Feature	true - Boolean	false
direction	Right to left or Left to right	rtl - String	false

Item Options

Prop	Description	Required
name	Item Label	yes
value	Item Value	yes
icon	Label Icon	no

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