# tselect

> Dropdown menu for VueJs

Latest version **0.1.7** (published 2022-04-19) · GPL-3.0 license · 0 weekly downloads

## Install

```sh
npm install tselect
pnpm add tselect
yarn add tselect
bun add tselect
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.7 |
| Published | 2022-04-19 |
| First published | 2020-10-03 |
| Weekly downloads | 0 |
| License | GPL-3.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=12 |
| Dependencies | 1 |
| Unpacked size | 493.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Soroosh Tanzadeh |
| Maintainers | soroosh_tanzadeh |
| Keywords | dropdown, menu, select |

## Links

- npm: https://www.npmjs.com/package/tselect
- Repository: https://github.com/soroosh-tanzadeh/tselect
- Issues: https://github.com/soroosh-tanzadeh/tselect/issues
- npm.io page: https://npm.io/package/tselect

## Dependencies (1)

- [rollup-plugin-babel](https://npm.io/package/rollup-plugin-babel.md) ^4.4.0

## Recent versions

- 0.1.7 (latest) — 2022-04-19
- 0.1.65 — 2020-11-08
- 0.1.64 — 2020-11-08
- 0.1.63 — 2020-11-08
- 0.1.62 — 2020-10-12
- 0.1.61 — 2020-10-12
- 0.1.6 — 2020-10-12
- 0.1.5 — 2020-10-04
- 0.1.4 — 2020-10-04
- 0.1.3 — 2020-10-04
- 0.1.2 — 2020-10-03
- 0.1.1 — 2020-10-03
- 0.1.0 — 2020-10-03

## README

# 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.

```bash
npm install tselect
```

## Usage

```html
<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](https://www.gnu.org/licenses/gpl-3.0.en.html)

---
_Source: https://npm.io/package/tselect · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._