feat(SelectMenu): add selected value to label slot data

[cernymatej]

🔗 Linked issue

❓ Type of change

• [ ] 📖 Documentation (updates to the documentation or readme)
• [ ] 🐞 Bug fix (a non-breaking change that fixes an issue)
• [x] 👌 Enhancement (improving an existing functionality)
• [x] ✨ New feature (a non-breaking change that adds functionality)
• [ ] 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• [ ] ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Currently, it is not possible to access the selected value in the label slot. This PR adds it to the slot data of the label slot.

📝 Checklist

• [ ] I have linked an issue or discussion.
• [ ] I have updated the documentation accordingly.

[benjamincanac]

Not sure to understand the point of exposing the modelValue. If you do a v-model="selected", you already have access to the selected variable.

[cernymatej]

The purpose of this change was to allow access to the original object (value) when the value-attribute prop is set. However, after reading your comment, I realized that the initial implementation was pointless. 🙈 I have made the following updates:

1. Fixed a bug where the HListbox component would throw an error upon being clicked if the multiple prop was set and modelValue was not an array type. (added a fallback & logged a warning to the console because it wasn't obvious what the problem was from the error message at first glance)
2. Corrected an issue where the label displayed an incorrect number of selected items (when the multiple prop was set) if the modelValue array contained an item not present in the options.
3. Added the actual selected value to the label slot.

However, there are a few points for discussion. The :selected attribute in the label slot has a different meaning than in other slots (indicating an active option versus whether the option is selected). Should we consider renaming it in the label slot to avoid confusion?

Also, when the multiple prop is set, the modelValue array will reflect the items in the order they were clicked by the user. However, in the label slot, the selected values will appear in the same order as in the options prop.

(I'll add documentation after we resolve the points above)

[lammerfalcon]

is there a solution to show selected.name in label slot, when i override value-attribute?

[cernymatej]

@lammerfalcon this is exactly what this PR is meant to solve

[benjamincanac]

Thanks @CernyMatej and sorry for the delay!

[benjamincanac]

@CernyMatej It seems this PR fixed the valueAttribute but broken usage with objects and the by key: https://github.com/nuxt/ui/issues/2028

Would you have an idea?

[cernymatej]

It seems to be only an issue on mount. When I select the items manually, the count is correct.