feat(CheckboxGroup): new component

[TribeWeb]

🔗 Linked issue

Resolves #3050

❓ 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

The UCheckbox component currently handles single instances of a checkbox only, returning a string. Being able to put several checkboxes together and returning an array is a common user requirement that has already been implemented in reka-ui but not yet in Nuxt UI. The new component builds on the reka example and adheres to the same patterns found in the existing URadioGroup component.

#3178 has added some beautiful and very useful styling for the URadioGroup component via the new table & card variants and so these same variants have been implemented in the new UCheckboxGroup component too.

📝 Checklist

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

[sandros94]

@benjamincanac you know I'm a super fan of this 😬 (#895)

EDIT: oh man, fall 2023, time flies...

[pkg-pr-new]

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

commit: 4980a65

[benjamincanac]

Is there a reason to not use the UCheckbox component here instead of re-implementing everything? 🤔

[TribeWeb]

Good question! I started off with the intention of using the UCheckbox component. I felt that making the component as close to URadioGroup in structure was important to ensure consistency in behaviour in the new variants and how they applied to each component. As I proceeded, I became more confident I could achieve that aim by re-implementing instead. I'm willing to defer to your experience and refactor as suggested - this is my first pull request in any codebase so I'm more than happy to be guided.

[benjamincanac]

We can left it like that I guess but I would share the theme between checkbox and checkbox-group though. The new variants should also be available on Checkbox.

You can check how textarea imports input theme for example.

[romhml]

There's something wrong when you change the value by interacting with the example in the documentation:

[TribeWeb]

Hi @romhml. I have not been able to get pnpm run docs to work at any stage of working on this (JS heap out of memory). Is there another way I can review the page so I can see the behaviour you've seen?

[romhml]

This was caused by an invalid modelValue in the docs, I fixed it here: 7a7180c

[TribeWeb]

Hi @romhml. I'm pretty happy with what I've just committed with a couple of caveats.

Good things:

1. The theme is now shared between UCheckbox and UCheckboxGroup as suggested feat(CheckboxGroup): new component #3862 (comment)
2. UCheckbox now has the table & card variants & I remembered to update the docs (although I still can't run them to check there's no mistakes)
3. UCheckboxGroup uses the same strategy as useButtonGroup to share values that should be automatically passed without being exposed as props on UCheckbox.
4. It all seems to work and hasn't changed the baseline UCheckbox API :)

Unresolved things:

• 1. There is a huge <template v-if="..."> <template v-else> in UCheckbox but I don't know how to improve it without introducing a 3rd component. Any ideas?
  Resolved using vueUse - createReusableTemplate
• 2. I don't know how to resolve the merge conflicts (below)
  I know how now...
• 3. There are 4 tests in CheckboxGroup.spec.ts that are failing because the test needs tweaking and no matter what I try, I can't resolve them (I'm pretty sure the component is doing what it should). E.g. In a form, the label should have no for id value. I can see in the inspector that it doesn't have one (and have logged useFormField to see that bind: false is working as designed)

[romhml]

Thanks for all your work @TribeWeb! I'll try to check this out and fix the failing tests soon!