fix(@vben-core/shadcn-ui): fix disabled functionality not working in VbenTree component #6205
Conversation
…VbenTree component
wyc001122
requested review from
anncwb,
jinmao88,
mynetfan and
vince292007
as code owners
|
|
""" WalkthroughThe update modifies the tree component to respect its disabled state by conditionally disabling user interactions. Event handlers for selection, toggling, checkbox clicks, and focus now check if the tree is disabled before executing. The root container applies a Changes
Poem
Note ⚡️ AI Code Reviews for VS Code, Cursor, WindsurfCodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback. Note ⚡️ Faster reviews with cachingCodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (7)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Cache: Disabled due to data retention organization setting
Knowledge Base: Disabled due to data retention organization setting
📒 Files selected for processing (1)
packages/@core/ui-kit/shadcn-ui/src/ui/tree/tree.vue(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: Check (windows-latest)
- GitHub Check: Check (ubuntu-latest)
- GitHub Check: Lint (ubuntu-latest)
- GitHub Check: Test (windows-latest)
- GitHub Check: Lint (windows-latest)
- GitHub Check: post-update (ubuntu-latest)
- GitHub Check: post-update (windows-latest)
🔇 Additional comments (5)
packages/@core/ui-kit/shadcn-ui/src/ui/tree/tree.vue (5)
239-240: LGTM: Selection disabled when component is disabledThis correctly prevents the
onSelectfunction from being called when the tree is disabled, preventing any state changes.
247-248: LGTM: Toggle disabled when component is disabledThis correctly prevents the
onTogglefunction from being called when the tree is disabled, preventing expansion state changes.
269-270: LGTM: Checkbox receives disabled stateThis correctly passes the disabled prop to the Checkbox component, visually indicating the disabled state.
272-275: LGTM: Checkbox click handler respects disabled stateThis correctly prevents the
handleSelectfunction from being called when clicking the checkbox in a disabled state.
280-287: LGTM: Node click handler respects disabled stateThis correctly prevents the
handleSelectfunction from being called when clicking the tree node in a disabled state.
|
AI 提示有问题 |
…bled and disable onfocus
…001122/vue-vben-admin into fix/vben-tree-disabled-functionality
…VbenTree component (#6205) * fix(@vben-core/shadcn-ui): fix disabled functionality not working in VbenTree component * fix(@vben-core/shadcn-ui): add cursor-not-allowed className when disabled and disable onfocus --------- Co-authored-by: wyc001122 <[email protected]> Co-authored-by: Jin Mao <[email protected]>
* commit 'd0b8349a2d9913080dbe5256bdff23ab80bb72e6': perf: stub unbuild params (vbenjs#6210) fix: in mixed layout mode, the sidebar does not display when the first child node is an external link (vbenjs#6219) perf: perf the control logic of Tab (vbenjs#6220) fix(@vben-core/shadcn-ui): fix disabled functionality not working in VbenTree component (vbenjs#6205) fix: css style (vbenjs#6176) fix: the mobile terminal can wrap lines and expand slot attributes (vbenjs#6165) feat(tabs): 支持计算属性作为标签标题，解决 vbenjs#6170 的问题 (vbenjs#6163) types: 导出authentication组件的type，自定义toolbarList时类型使用ToolbarType (vbenjs#6158) # Conflicts: # docs/src/guide/essentials/route.md
3 participants
Description
修复
VbenTree组件的disabled属性无法正常工作的问题当组件
VbenTree接收的disabled为true时：CheckboxTreeItem所触发的回调函数，会导致父节点状态修改为半选中TreeItem的tabindex设置为-1，否则仍然能通过点击TreeItem节点或者Tab键的方式聚焦，聚焦后就能通过Space空格或者Enter回车的方式对Checkbox状态进行修改Type of change
Please delete options that are not relevant.
Checklist
pnpm run docs:devcommand.pnpm test.feat:,fix:,perf:,docs:, orchore:.Summary by CodeRabbit