feat(Checkbox): add new component #77
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
commit: |
- CheckboxRoot: group context provider with tri-state support - CheckboxIndicator: works standalone (v-model) or in group context - Renders as button by default, supports renderless mode - Full a11y: role, aria-checked (true/false/mixed), aria-disabled, tabindex - 35 tests covering standalone, group, SSR modes
- Rename CheckboxRoot → CheckboxGroup (group context provider) - New CheckboxRoot handles registration + item context - CheckboxIndicator now purely presentational - Export as Checkbox.Group, Checkbox.Root, Checkbox.Indicator
- Add keyboard interaction (Space to toggle) and click handler - Add aria-label from label prop for accessible name - Add role="group" to CheckboxGroup attrs - Fix slot return type: any → unknown - Fix context mode: use static key 'v0:checkbox:root' - Fix data-disabled: '' → true for consistency
- Use Readonly<Ref<boolean>> for context types - Add defineEmits alongside defineModel - Change slot return types to match Root/Item convention - Add keyboard interaction tests (Space, Enter, disabled) - Add component docs with basic, group, and select-all examples
Reorganize checkbox documentation from providers to new forms category.
johnleider
force-pushed
the
feat/checkbox
branch
from
492f81e to
f112f78
Compare
Import was referencing non-existent #v0/composables/useGroup path, causing typecheck to fail. Also adds test for Indicator context error. Fixes knip config to ignore tsx binary used by generate:web-types script.
…ers element Root now renders as button via Atom with ARIA attrs and click/keydown handlers. Indicator simplified to visual span with visibility toggle (no layout shift). Group now renders div with role="group" and aria-multiselectable.
- Simplify basic.vue and group.vue to use data-state CSS selectors - Remove select-all.vue example (removed from docs) - Add Checkbox to shiki-api-transformer whitelist for hover popovers - Reorder component nav: primitives, providers, disclosure, forms, semantic - Update accessibility section to reflect Root handles ARIA
johnleider
changed the title
- Add CheckboxHiddenInput component for native form submission - Auto-render hidden input when `name` prop is provided on Root - Add `name` and `form` props to CheckboxRoot context - Fix class pass-through by using inheritAttrs: false with useAttrs() - Add 12 tests covering auto-render, explicit usage, and group mode
- Make CheckboxRootProps generic for value type propagation - Add aria-labelledby, aria-describedby, aria-invalid to Root - Add aria-label, aria-labelledby, aria-describedby to Group - Change disabled prop to MaybeRef<boolean> for consistency - Use ID type from #v0/types instead of string - Export CheckboxState type for data-state attributes - Normalize slot return types to any (matches Atom convention) - Add tests for mandatory, enroll, hydration, FormData, batch ops
- Fix emit naming: update:modelValue → update:model-value - Fix reactive disabled prop using props.disabled directly - Normalize ARIA prop names to camelCase for TypeScript - Correct docs: Space key toggles (Enter via native button) - Add 17 new tests covering: ARIA attrs, keyboard interaction, disabled transitions, renderless mode, visibility, and more
- Add Form Integration and Indeterminate State sections to docs - Fix script tag order to match convention (setup before lang) - Add @example JSDoc blocks to barrel export sub-components - Add tests for selectAll with all disabled items - Add tests for indeterminate prop initialization and mix/unmix
# Conflicts: # apps/docs/build/generate-nav.ts # apps/docs/src/typed-router.d.ts
- Add level: 2 to checkbox documentation frontmatter - Regenerate benchmarks and metrics after master merge
- Change CheckboxIndicatorProps from interface to type alias - Props `as` and `renderless` are inherited from AtomProps - Add Props Inheritance section to components.md rules - Add Checkbox to component list in rules
- Add Checkbox to packages/0/README.md component table - Add Forms category to components index and guide - Move Checkbox from Providers to Forms with correct link - Add missing Dialog to Disclosure reference list
Replace static code fence with live DocsExample showing select-all pattern with parent checkbox in mixed state.
- Add Checkbox.SelectAll that binds to parent group's aggregate state - Automatically reflects isAllSelected/isMixed and calls toggleAll on click - Does NOT register as a group item - Provides context to child Checkbox.Indicator - Fix: CheckboxRoot standalone mode now honors indeterminate prop - Update docs with anatomy and simplified indeterminate example
49 new tests covering rendering, a11y, state reflection, interactions, disabled state, keyboard support, Indicator integration, SSR, and error conditions.
- Remove invalid aria-multiselectable from CheckboxGroup (not valid for role="group") - Add inert attribute to hidden input for better AT isolation - Make CheckboxRootContext generic to preserve type information - Remove unnecessary preventDefault from click handlers - Remove redundant type assertion in slotProps - Add tests for SelectAll mix/unmix no-ops and dynamic group membership BREAKING CHANGE: CheckboxGroupSlotProps.attrs no longer includes aria-multiselectable
The inert attribute already removes elements from the accessibility tree per HTML spec, making aria-hidden="true" redundant.
- Rename `namespace` to `groupNamespace` on Root/SelectAll for connecting to parent Group - Add `namespace` prop to Root/SelectAll for providing context to children - Add `namespace` prop to Indicator/HiddenInput for injecting from parent Root - Update test to check `inert` instead of removed `aria-hidden`
- Serialize complex values in HiddenInput for form submission - Add readonly modifiers to immutable CheckboxRootContext fields - Change SelectAll context type from never to void
- Create mountCheckbox, mountGroup, mountSelectAll helper functions - Use it.each for repetitive attribute and state tests - Reduce test file from ~3200 lines to ~1100 lines (65% reduction) - Maintain same 94 test cases and coverage
- Rename check/uncheck slot props to select/unselect for consistency - Update tests to match renamed slot props
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
In development