feat(RadioGroup): add card and table variants

[romhml]

🔗 Linked issue

Resolves #2932

❓ 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

Introduces two new card and table variants on the RadioGroup component.

📝 Checklist

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

[cloudflare-workers-and-pages]

Deploying ui3 with    Cloudflare Pages

Latest commit:	8798fdb
Status:	✅  Deploy successful!
Preview URL:	https://91e35ff4.ui-6q2.pages.dev
Branch Preview URL:	https://feat-radio-card.ui-6q2.pages.dev

View logs

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@3178

commit: a4e6dd9

[Deeyuude]

Any updates on this one please ?
Thank you

[Deeyuude]

Really needed please ☺

[romhml]

@Deeyuude I'll try to get back into it soon!

[simonmaass]

yeah this would be great

[joris-paqt]

This would be awesome!

[romhml]

@benjamincanac this is ready for review.

[nuxthub-admin]

✅ Deployed ui3

Deployed ui3 a4e6dd9 to preview

🔗	feat-radio-card.ui-6q2.pages.dev
📌	2e7bdeb6.ui-6q2.pages.dev
📱	View QR Code

📋 View deployment logs

[Deeyuude]

Thank you for your great work @romhml just a quick question ! Don't you think that the card variant could have an icon beside the label & description ? Like the image in linked issue i mean

[simonmaass]

Thank you for your great work @romhml just a quick question ! Don't you think that the card variant could have an icon beside the label & description ? Like the image in linked issue i mean

that would be great!

[romhml]

@Deeyuude you'll be able to do something similar using the label slot:

<URadioGroup :variant="variant" :items="items">
  <template #label="{ item }">
    <UIcon :name="item.icon" />
    <span>
      {{ item.label }}
    </span>
  </template>
</URadioGroup>

I don't know if it is a good idea to add something like this by default since it is not generalizable to all variants.

[simonmaass]

I don't know if it is a good idea to add something like this by default since it is not generalizable to all variants.

Thats a good point!

[Kiansa]

Great work @romhml ! it looks and feels very nice!
It’d be awesome to add a card-style variant to the USelect component (or create a standalone USelectCard) for multi-selection use cases.