feat(pinia): add expand/collapse functionality for store data structures #973
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
- Add expand/collapse all buttons for both tree and state panels - Implement hover actions for tree nodes with expand/collapse shortcuts - Auto-expand tree nodes and state when searching (up to 6 levels) - Support deep nested state expansion for complex objects and arrays - Make depth and withTag props optional in TreeViewer component - Add comprehensive Pinia demo stores with deeply nested structures - Improve placeholder text for search inputs - Optimize initial tree expansion to 6 levels for better developer experience
✅ Deploy Preview for vue-devtools-docs canceled.
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
🚀 Feature Overview
This PR implements the requested expand/collapse
functionality for Pinia Store data structures as requested
in issue #467.
✨ What's Implemented
1. One-Click Operations for All Stores
state properties
a clean view
panel headers
2. Node-Level Hover Interactions
with children, quick action buttons appear
expanded/collapsed independently
guidance
3. Enhanced Search & Auto-Expansion
when searching to reveal matching content
auto-expansion
expansion context
4. Deep Nesting Support
data structures
state objects
references and edge cases
🎯 Addresses Issue Requirements
✅ Support for expanding/collapsing Pinia Store data
structures with a single click
✅ One-click operation for all Stores
✅ Expand/collapse operations for specific Store nodes (with
hover interaction)
✅ Pinia Store key-value pair retrieval (at the top of Store
panel)
✅ Enhanced UX compared to Components Tree management
🔧 Technical Implementation
Core Files Modified:
packages/applet/src/modules/pinia/components/store/Index. vue- Main store panel logicpackages/applet/src/components/tree/TreeViewer.vue-Tree hover interactions
packages/applet/src/components/state/ChildStateViewer.vueKey Features:
contexts for tree and state
search functionality
state management
support
🧪 Testing
The implementation has been thoroughly tested with:
📸 Visual Demo
The functionality can be tested by:
🎉 Result
This implementation provides the exact functionality
requested in issue #467, offering users intuitive and
efficient ways to navigate complex Pinia store structures,
significantly improving the development experience when
working with large state trees.
Closes #467