https://github.com/soroosh-tanzadeh/tselect

Everything you wish the HTML <select> element could do, wrapped up into a lightweight, extensible Vue component with more beautiful interface.
https://github.com/soroosh-tanzadeh/tselect

dropdown dropdown-input js vuejs-components vuejs2

Last synced: 6 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/soroosh-tanzadeh/tselect
• Owner: soroosh-tanzadeh
• Archived: true
• Created: 2020-10-03T12:55:17.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2022-04-19T17:54:14.000Z (over 2 years ago)
• Last Synced: 2024-09-23T14:02:09.271Z (10 days ago)
• Topics: dropdown, dropdown-input, js, vuejs-components, vuejs2
• Language: SCSS
• Homepage:
• Size: 481 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# TSelect

Everything you wish the HTML `````` 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

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,

    }

});

 

        Select an Item

 

```

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