Tselect NPM | npm.io

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