Refactor VTreeview on top of v0's Treeview
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 41k
- Forks
- 7.1k
- Avg merge
- 1d 21h
- Merged PRs (30d)
- 11
Description
Replace VList's nested.ts and keyboard navigation control with v0's createNested + useRovingFocus, while keeping VTreeview's data-driven, styled public API.
v0 gaps to close first
Genuine blockers v0 must address (or we shim) before migrating:
- Selection strategies. v0's
selectionis a closed enum'cascade' | 'independent' | 'leaf'with no custom hook. It coversclassic(≈cascade),independent,leaf— but notsingle-leaf/single-independent, nottrunk/branch(these areclassicwith a different out-transform:trunkcollapses fully-selected subtrees to the ancestor id,branchemits parents + leaves), and not customSelectStrategyobjects/factories. v3 takes a fullselect/in/outstrategy; v0 has no equivalent injection point. - Active strategies. v0
active: 'single' | 'multiple'vs VTreeview'ssingle-leaf/leaf/independent/single-independent. - Focusable content inside a tree item. v0's roving model makes only the row tabbable; nested interactive controls (buttons/links/inputs within a node) can't be reached by keyboard (reproducible on a v0 demo). Needs a secondary-navigation story before parity.
What stays in the Vuetify (by design)
- Data-driven rendering —
items[]recursion + normalization (itemTitle/itemValue/itemChildren/itemProps,returnObject). v0 is compositional (<Treeview.Item>self-registers). - Feature surface —
search/filter, lazyloadChildren,no-data,openOnClick,separateRoots,hideActions, loading icons. - Styling & slots — theming, density, variants, lines, slim, indent-lines (+ color/opacity), and the full slot API (
prepend/append/title/subtitle/header/footer/divider/subheader/item/toggle).
What v0 gives us
Cleaner state primitives: reveal, enroll, mandatory, expandAll/collapseAll, selectAll, mixed/indeterminate, and ready-made TreeviewCheckbox / TreeviewSelectAll / TreeviewIndicator / TreeviewCue to replace ad-hoc selection plumbing. Roving focus driven directly (no VList container-tabindex conflict).
Work breakdown
- Swap nested state to v0
createNestedbehind the existing renderer; keep VList styling. - Build the data →
createNestedregistration in the recursive renderer. - Drive
useRovingFocusfrom registered visible nodes; drop VList's keyboard/focus path. - Map selection/active strategies (compat shim or documented break).
- Wire the styles & slots (
prepend/append/title/subtitle/header/footer/divider/subheader/item/toggle).
Open question
Performance:
- VTreeview introduced
items-registration="props"to avoid waiting for individual items mount/unmount lifecycle hooks and update the internal registry. It also makes it easier for VTreeview to potentially adopt virtual rendering in the future. We have to make sure it does not conflict with v0's implementation so we don't have to fight against it.
Is detaching VTreeview from VList viable in v5.0? Two targets:
- Engine-only (recommended short-term): v0
createNested+useRovingFocusunderneath, VList kept as the visual shell. Far less disruptive. Preserves theming/slots for free. - Full detachment: drop VList entirely, render/restyle v0's
Atomoutput. Cleaner long-term and aligns with the framework-wide v0 rebuild, but re-implements all styling and the slot API — high parity risk.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reading VList's nested.ts and its current keyboard navigation control, then compare them with v0's createNested and useRovingFocus. Trace the recursive renderer and existing selection and active-strategy handling before deciding how the listed v0 gaps are addressed. Done means VTreeview uses the new primitives while preserving its data-driven API, feature surface, styling, and slots.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Refactor
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100