fix(InputMenu/Select/SelectMenu): improve types

[yassilah]

🔗 Linked issue

Resolves #2470

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ 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

To resolve the issue, I added a few type helpers common to all "select-like" components that allow for a better inference of the actual items. I've made sure it works with both Item[] and Item[][] to preserve the correct types when having multiple groups. I've also added a expectEmitPayloadType test helper to ensure the actual types that are being emitted based on the props are correct.

Before:

After:

It also handles mixed items array, default valueKey: "value" for USelect and full object item when valueKey isn't set on USelectMenu and UInputMenu.

<USelect :items="['foo']" /> // modelValue: string
<USelect :items="[{ value: 'foo' }]" /> // modelValue: string
<USelect :items="['foo', { value: 'foo' }]" /> // modelValue: string

<USelectMenu :items="[{ value: 'foo' }]" /> // modelValue: { value: string }
<USelectMenu :items="['foo', { value: 'foo' }]" /> // modelValue: string | { value: string }
<USelectMenu :items="['foo', { value: 'foo' }]" value-key="value" /> // modelValue: string
<USelectMenu :items="['foo', { value: 'foo' }]"  multiple /> // modelValue: (string | { value: string })[]
<USelectMenu :items="['foo', { value: 'foo' }]" value-key="value" multiple /> // modelValue: string[]

<UInputMenu :items="[{ value: 'foo' }]" /> // modelValue: { value: string }
<UInputMenu :items="['foo', { value: 'foo' }]" /> // modelValue: string | { value: string }
<UInputMenu :items="['foo', { value: 'foo' }]" value-key="value" /> // modelValue: string
<UInputMenu :items="['foo', { value: 'foo' }]"  multiple /> // modelValue: (string | { value: string })[]
<UInputMenu :items="['foo', { value: 'foo' }]" value-key="value" multiple /> // modelValue: string[]

📝 Checklist

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

[benjamincanac]

Thanks a lot for the work!! 😊

[pkg-pr-new]

pnpm add https://pkg.pr.new/@nuxt/ui@2471

commit: 311b61c

[benjamincanac]

Just tried it out and I don't get autocomplete inside value-key of Select component 🤔

[yassilah]

Sorry yeah I noticed the autocomplete wouldn't work because it's hard to infer the actual key while also defaulting to 'value' when none is set in USelect 😅 But it should now work properly.

Please also note when using USelect that if you try to pass a list of object items that doesn't match { value: any }[] without specifying another value-key prop, then the modelValue will of course be never

[benjamincanac]

That's awesome! Thanks a lot @yassilah 😊

[benjamincanac]

It seems there is an issue in the documentation typecheck about value-key for the SelectMenu.

But it might be because items are not typed correctly 😬