Merged
Conversation
Headless treeview with 9 sub-components: Root, List, Item, Activator, Content, Cue, Group, Checkbox, Indicator. Built on createNested for tree state management with selection, open/close, and activation. Exposes --v0-treeview-depth CSS custom property on each item for consumer-driven indentation. Cue self-hides on leaf nodes via hasContent signal from Content. Indicator follows existing CheckboxIndicator pattern with data-state visibility. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…gister Ticket select/unselect/toggle were pointing to createGroup's non-cascade versions. Override them after group.register() so TreeviewCheckbox clicks propagate to descendants and update ancestor mixed states.
Settings panel demonstrates activation, functional toggles/selects, disabled categories, depth indentation via CSS variable, and recursive rendering. Removes file-explorer and selection live examples.
…rops Also fix generate-api.ts to extract @example tags in the ts-morph fallback path used by components with external types files.
|
commit: |
johnleider
changed the title
Create reusable useRovingFocus composable for roving tabindex pattern with linear and grid navigation modes. Wire into Treeview for full WAI-ARIA tree keyboard nav: arrows, Home/End, Enter, Space, *. - useRovingFocus: manages focusedId, isTabbable, step with disabled skip, optional circular nav, orientation + grid (columns) support - createNested: add el to NestedTicket, add visibleItems() for depth-first traversal of open nodes - TreeviewList: creates roving focus, handles all tree keyboard mappings including ArrowRight/Left for expand/collapse/parent - TreeviewItem: captures el ref, consumes roving for tabindex - TreeviewActivator/Checkbox: remove independent tabindex (now -1), keyboard handling moved to tree container level
Add renderless Treeview.Checkbox with cascade selection to the basic example. Demonstrates keyboard Space to toggle selection alongside arrow key navigation and Enter to expand/collapse.
…sable - Enter key activates focused node (leaf nodes now keyboard-reachable) - Space key no-op in single-select mode per WAI-ARIA spec - SelectAll onClick/onKeydown in attrs for renderless mode support - revealOnOpen runs after open strategy to fix single+reveal combo - Remove String(ticket.id) coercion; use ID type throughout - unselectAll with mandatory recalculates ancestor mixed states - Move TreeviewRoot imports to regular script (dual-script convention) - disabled prop typed as MaybeRefOrGetter for consistency - siblings() uses rootIds set for root nodes - Fix duplicate describe names in createNested tests
johnleider
force-pushed
the
master
branch
5 times, most recently
from
a6133f0 to
eb8ed41
Compare
Resolve useRovingFocus conflict by taking master's RTL support.
ArrowRight/ArrowLeft tree semantics (open/close, focus parent/child) now swap in RTL layouts, matching the useRovingFocus RTL support added in master.
- Space key toggles selection in single-select mode per WAI-ARIA spec - Unwrap NestedContext.multiple with toValue to match boolean type - Use isNullOrUndefined type guard in TreeviewList keyboard handler - Fix orphaned JSDoc on NestedActiveMode (belongs on NestedOptions) - Remove stale comment headers in createNested
# Conflicts: # packages/0/src/composables/createNested/index.ts # playground/src/components.d.ts
Replace try/catch optional context injection with null defaults (matching Snackbar precedent). Add named context type exports (TreeviewRootContext, TreeviewListContext, TreeviewItemContext) matching Select/Button/Snackbar conventions. Move TreeviewItemContext from types.ts to TreeviewItem.vue where the createContext call lives.
Add non-null assertions on useTreeviewItem() in 5 sub-components after context type changed to | null. Add KeepAlive lifecycle hooks (onDeactivated/onActivated) to TreeviewContent for hasContent state.
Add 21 tests covering keyboard navigation (ArrowUp/Down/Left/Right, Home, End, *), selection modes (cascade, independent, leaf), open modes (single), 3-level nesting, expandAll/collapseAll, and Cue and Indicator component states.
RegistryTicket requires an unregister method. The mock ticket in TreeviewSelectAll was missing it, causing a CI typecheck failure.
Add 15 tests covering: SelectAll keyboard handling (Enter/Space/ disabled), mixed/indeterminate state (Checkbox aria-checked, Indicator data-state), Activator role attributes on non-button elements, Cue visibility on leaf nodes, Item active state (data-active), Indicator visibility toggle, Checkbox mixed data-mixed, and Item without List.
Add tests for ArrowUp navigation, ArrowRight→child focus on open parent, onFocusin sync handler, non-treeitem focusin guard, and Content unmount lifecycle. Closes remaining coverable line gaps.
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
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.
Summary
createNestedcomposable@examplesnippets for all propsgenerate-api.tsto extract props and examples from externaltypes.tsfiles via ts-morph fallbackSub-components
Treeview.RootTreeview.Listrole="tree"andaria-multiselectableTreeview.ItemTreeview.ActivatorTreeview.ContentTreeview.CueTreeview.CheckboxTreeview.IndicatorTreeview.Grouprole="group"wrapperTreeview.SelectAllTest plan
/components/disclosure/treeview