iashraful / awesome-select

A vuejs wrapper for select

Hi there 👋

I'm a Full-Stack Software Developer working in Dhaka, Bangladesh.

NOW

• ✨ Writing at Ashraful's Blog;
• 🐛 Fixing bugs... 😄
• 🍑 What about this?

BIO

• 🏢 I'm currently working at bKash Limited. as Assistant Lead Engineer
• ⚙️ I use daily: Python, FastAPI, Django, Javascript, VueJS
• 🌍 I'm mostly active within the Python Community
• 🌱 Learning Rust
• 💬 Ping me about Python, Rust, System Designing, API Development,
• 📫 Reach me: twitter.com/_ashraful
• ⚡️ I am a motorbike lover, traveler

awesome-select's Issues

Make the app as vuejs package or plugin

Packaging

We must add the feature that anyone from anywhere can download/install and use as a traditional package. For example, we use various libraries with minimal configuration.

Example

import AwesomeSelect from 'awesome-select'

...
components: { AwesomeSelect }
...

Enabling control to add own cross and dropdown icon.

Developer should have control to use own cross and dropdown icon.

closable directive doesn't work in production build

The closable directive doesn't work in the production build.

Enabling option text and value customization

Option JSON can be key-value pair. We need to map value and label on <option value="some_value"> Display text </option> in dropdown.

The idea is user has control over which values go on option value and which value goes on option label.

See the following example:

[
    {
        'id': 123,
        'display': 'Option 1'
    },
    {
        'id': 456,
        'display': 'Option 2'
    }
]

If a user has this JSON array then the user can choose is id goes to as option value or label.

A proposed solution.

<AwesomeSelect
     option-value="id"
     option-text="display"
/>

It's like html select

<select>
    <option value="123"> Option 1</option>
    <option value="456"> Option 2</option>
</select>

Enabling user control to change placeholder

We should give use developer control to write his own placeholder. The default placeholder can be
Select.

A developer can enable/ disable placeholders also change placeholder text.

Update readme.md

Need to update readme.md.

The installation process and use.
List of usable properties etc

Render data from server.

For huge number of the dataset we should have an option to load data chunk by chunk. For example,
We have one million users in an API. We have to show all of them on the dropdown. But everyone know that not easy task. So, we are thinking to search from API and call api chunk by chunk. @shafikshaon Please add your thoughts on comment.

Enable control to enable or disable search feature in dropdown

Some of the dropdowns is small. Like gender. It only few options.
Sometimes the developer feels there is not to add a search feature in dropdown.
We should give control to developer as they can enable/ disable search features in the dropdown.

Enable arrow(up-down) to select item.

Currently, we don't have support to browse data with arrow keys. This is a very important and basic feature.

Highlight match text when search in dropdown.

We can highlight match text when user types in dropdown.