feat: Add support for multiple options in Select

[tqwewe]

Adds support for selecting multiple options in the Select component using closable tags.

This should close #101

Screen.Recording.2024-04-15.at.5.53.47.PM.mov

Issues:

• Since this changes the type of value in the Select component, it means this PR is a breaking change.
• The popup menu doesn't update it's position when the multiselect gets too long and goes onto two lines. (Fixed with d0e96eb)

[luoxiaozero]

Looks very cool. Maybe we can split it into a separate component (Multiselect).

[tqwewe]

I was considering that, it would also mean it's no longer a breaking change. Though I'm not sure how this could be done without duplicating so much of the code?

[tqwewe]

I wonder if it's worth having a prop to override the entire view rendering of the label? For example, you might want to have custom behaviour where the label is just text with a number of items selected: eg "Categories (2 selected)"

[luoxiaozero]

like https://www.naiveui.com/en-US/os-theme/components/select#max-tag-count.vue ?

[tqwewe]

Hmm not really limiting, I mean more like custom render function for the label itself.
https://ant.design/components/select#select-demo-custom-label-render

For users who want to render anything they want. In my personal use case, I want a filter called "Bookmakers", and I don't want to render all the bookmakers selected, instead I only want to show the number of bookmakers selected.

[ Bookmakers (3) ]
- [x] Betfair
- [x] Sportsbet
- [x] Tab
- [ ] Pinnacle

This could be done with something like:

view! {
    <MultiSelect
        label=|values| view! { {format!("Bookmakers ({})", values.len()) }
        values
        options
    />
}

[luoxiaozero]

We can do this by adding a label slot.

view! {
    <Multiselect
        values
        options
    >
         <MultiselectLabel slot>
              {format!("Bookmakers ({})", values.len())
        <MultiselectLabel>
   </Multiselect>
}

[tqwewe]

@luoxiaozero I've separated them into separate components. I also renamed it from MultiSelect into SelectMulti so it would be found in the docs beside Select (alphabetical).

I also implemented the SelectLabel slot for the selects.

We should also probably include a dropdown arrow in the select component. But maybe that can be a separate PR?

[luoxiaozero]

I've separated them into separate components. I also renamed it from MultiSelect into SelectMulti so it would be found in the docs beside Select (alphabetical).

I think the name MultiSelect is better, we can put the MultiSelect documentation and code into Select to solve this problem.

We should also probably include a dropdown arrow in the select component. But maybe that can be a separate PR?

Agree.

[tqwewe]

Great I've pushed another commit with these changes

[tqwewe]

Actually I've just gone ahead and added the dropdown arrow to the select component. Was quite a simple task so thought I'd add it here.

[tqwewe]

I'm just trying to debug why it's looking a little different in my personal project when using this fork. The alignment isn't correct.

I've been digging through the styles but not sure what's different.

Edit

I've fixed this by setting the font-size of the select component to 14px.

[tqwewe]

I've just implemented a clear button, when you hover over a multi select, it shows a little x button where the arrow is allowing you to clear all items.

Additionally, clicking on the select input box itself will toggle the menu, where previously clicking the input wouldn't hide it.

[luoxiaozero]

What is the purpose of these two lines of code?

[tqwewe]

Oops, MinTarget should've been min-width instead of Target.
I added MinTarget and used it in the Select now to make sure the select dropdow menu doesn't get cut off if the select input is too short. I think this would be fine to have the dropdown menu be longer in case the options are longer, but its up to you to keep this or not. Personally as a user of Thaw, I'd prefer the text in the dropdown not to be cut off

[luoxiaozero]

Here's a breaking change.

[tqwewe]

Okay I've remove this in 68928ad in order to keep the PR non-breaking, but are you happy to include this in the next version? If so, I can open an issue to track this.

I often refer to Ant Design and other UI libraries for these decisions and see they use inline-block, and it also makes sense for the UI's I'm building with Thaw.

[luoxiaozero]

I need to think about it. I opened #176 .

[tqwewe]

I'd also like to share this screenshot of what I've implemented in my project where I'm using this fork and the <SelectLabel slot> slot to customize the label.

It's an alternative version of the multi select, where it has a label, and shows a <Tag> beside it with the number of items selected. Perhaps something like this might be of interest to people in the future?

[luoxiaozero]

No more problems, now merge.