feat(CheckboxGroup): new component #3862
Conversation
|
@benjamincanac you know I'm a super fan of this 😬 (#895) EDIT: oh man, fall 2023, time flies... |
commit: |
| {{ legend }} | ||
| </slot> | ||
| </legend> | ||
| <component :is="variant === 'list' ? 'div' : Label" v-for="item in normalizedItems" :key="item.value" :class="ui.item({ class: props.ui?.item })"> |
There was a problem hiding this comment.
Is there a reason to not use the UCheckbox component here instead of re-implementing everything? 🤔
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
benjamincanac
changed the title
Co-authored-by: Benjamin Canac <[email protected]>
|
|
||
| Use the `items` prop as an array of strings or numbers: | ||
|
|
||
| ::component-code |
There was a problem hiding this comment.
There's something wrong when you change the value by interacting with the example in the documentation:
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
This was caused by an invalid modelValue in the docs, I fixed it here: 7a7180c
Co-authored-by: Romain Hamel <[email protected]>
Co-authored-by: Romain Hamel <[email protected]>
🔗 Linked issue
Resolves #3050
❓ Type of 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&cardvariants and so these same variants have been implemented in the new UCheckboxGroup component too.📝 Checklist