fix: dynamic slots autocomplete

[plushdohn]

🔗 Linked issue

Fixes #5

❓ Type of change

• [ ] 📖 Documentation (updates to the documentation or readme)
• [x] 🐞 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

This PR adds type-safe autocomplete to the Tabs and Accordion dynamic slots. Like some other components, this requires the user to add as const in front of the slot's name when declaring the items.

I tried to make the simplest type I could, but it's still more convoluted than I'd like. Unfortunately using the single generic T and its T['slots'] in the conditional type loses type-safety for some reason, so I had to add a second generic with the default value set to T['slots'].

Let me know if we want to extract this DynamicSlots type somewhere to be re-used and if I should make two separate PRs for each component instead of a single one.

I'm also not sure whether or not I should update the docs to include as const or if the docs for v3 are still the ones from v2.

Cheers!

📝 Checklist

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

[plushdohn]

Thanks for looking into this! Could we externalize the DynamicSlots type into types/utils.d.ts and do the same thing for Breadcrumb, DropdownMenu and NavigationMenu too? (They all have a slot?: string field in their items/links).

@benjamincanac I've applied the type to all components, but some casting was required to make the mapped proxySlots work in DropdownMenu. I tried redoing the type a few times but the compiler still wasn't happy.

Also now DynamicSlots takes care of mapping the arbitrary type (previously [key: string]: SlotProps<T>), I thought it makes the name more appropriate and makes it easier to reuse the type for all future components

[benjamincanac]

I've made a few changes inside your PR to improve slots examples but I don't get the autocomplete working 🤔

[plushdohn]

I've made a few changes inside your PR to improve slots examples but I don't get the autocomplete working 🤔

@benjamincanac did you add as const to the slot name?

[benjamincanac]

Oh no sorry, I've removed it I thought it was useless. There is no way to make it work without it?

[benjamincanac]

And also, don't worry about the docs its the old one from v2. We won't be able to run it until most of the @nuxt/ui-pro components are migrated as well.

[plushdohn]

Oh no sorry, I've removed it I thought it was useless. There is no way to make it work without it?

I don't think there is, as soon as you declare items without a const somewhere, Typescript decides that'll be a string forever 🙄

But as const can also be put on the whole "item" object if one prefers:

Apparently it doesn't work for the whole array as the components can't accept readonly props

[benjamincanac]

Thanks a lot!! 😊