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 https://github.com/thaw-ui/thaw/issues/101

https://github.com/thaw-ui/thaw/assets/16362377/a9e98c60-31a9-4c7c-8281-ec6dd6548b67

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 https://github.com/thaw-ui/thaw/pull/166/commits/d0e96ebe7f8318861d4177134ac6be6c7dffbe60)

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

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