feat(tree-select): [tree-select] add tree-select component #1683
Conversation
WalkthroughThe new functionality introduces a tree-select feature within the UI, allowing users to interact with and filter tree nodes. Core functions like Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant VueComponent as TreeSelect Vue Component
participant API as Renderless API
participant TreeNode as Tree Node
User->>+VueComponent: Enters filter text
VueComponent->>API: Call filter function
API->>VueComponent: Return filtered nodes
User->>+TreeNode: Clicks on node (single selection)
TreeNode->>VueComponent: Trigger nodeClick
VueComponent->>API: Call nodeClick function
API->>VueComponent: Update selected node
User->>+TreeNode: Clicks on checkbox (multi-selection)
TreeNode->>VueComponent: Trigger check
VueComponent->>API: Call check function
API->>VueComponent: Update checked nodes
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
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 as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
kagol
changed the title
|
[e2e-test-warn] The title of the Pull request should look like "fix(vue-renderless): [action-menu, alert] fix xxx bug". Please make sure you've read our contributing guide |
![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
Files selected for processing (15)
- examples/sites/demos/apis/tree-select.js (1 hunks)
- examples/sites/demos/pc/app/tree-select/basic-usage-composition-api.vue (1 hunks)
- examples/sites/demos/pc/app/tree-select/basic-usage.spec.ts (1 hunks)
- examples/sites/demos/pc/app/tree-select/basic-usage.vue (1 hunks)
- examples/sites/demos/pc/app/tree-select/webdoc/tree-select.cn.md (1 hunks)
- examples/sites/demos/pc/app/tree-select/webdoc/tree-select.en.md (1 hunks)
- examples/sites/demos/pc/app/tree-select/webdoc/tree-select.js (1 hunks)
- examples/sites/demos/pc/menus.js (1 hunks)
- packages/modules.json (1 hunks)
- packages/renderless/src/tree-select/index.ts (1 hunks)
- packages/renderless/src/tree-select/vue.ts (1 hunks)
- packages/vue/package.json (1 hunks)
- packages/vue/src/tree-select/index.ts (1 hunks)
- packages/vue/src/tree-select/package.json (1 hunks)
- packages/vue/src/tree-select/src/pc.vue (1 hunks)
Files skipped from review due to trivial changes (3)
- examples/sites/demos/pc/app/tree-select/basic-usage.spec.ts
- packages/vue/package.json
- packages/vue/src/tree-select/package.json
Additional context used
Markdownlint
examples/sites/demos/pc/app/tree-select/webdoc/tree-select.cn.md
5-5: null (MD025, single-title, single-h1)
Multiple top-level headings in the same documentexamples/sites/demos/pc/app/tree-select/webdoc/tree-select.en.md
5-5: null (MD025, single-title, single-h1)
Multiple top-level headings in the same document
Biome
packages/vue/src/tree-select/index.ts
[error] 16-18: This function expression can be turned into an arrow function. (lint/complexity/useArrowFunction)
Function expressions that don't use this can be turned into arrow functions.
Safe fix: Use an arrow function instead.
Additional comments not posted (14)
examples/sites/demos/pc/app/tree-select/webdoc/tree-select.cn.md (1)
5-7: The documentation succinctly explains the purpose and functionality of the TreeSelect component.Tools
Markdownlint
5-5: null (MD025, single-title, single-h1)
Multiple top-level headings in the same documentexamples/sites/demos/pc/app/tree-select/webdoc/tree-select.en.md (1)
5-7: The documentation clearly describes the TreeSelect component, combining BaseSelect and Tree components effectively.Tools
Markdownlint
5-5: null (MD025, single-title, single-h1)
Multiple top-level headings in the same documentexamples/sites/demos/pc/app/tree-select/webdoc/tree-select.js (1)
1-18: The configuration for the TreeSelect component's demo is correctly set up, providing clear multilingual support and appropriate linkage to the demo code.packages/renderless/src/tree-select/vue.ts (1)
1-21: Therenderlessfunction is well-implemented, using Vue's composition API effectively to manage the state and behaviors of the TreeSelect component.packages/renderless/src/tree-select/index.ts (3)
1-5: Functionfiltercorrectly delegates tree node filtering to the tree component. Well implemented.
7-21: FunctionnodeClickhandles node click events effectively, updating selected data and conditionally hiding the panel based on themultipleprop.
24-38: Functioncheckeffectively manages the state for multiple node selections, ensuring that node data is correctly mapped and updated.examples/sites/demos/pc/app/tree-select/basic-usage-composition-api.vue (1)
1-49: The template and script setup inbasic-usage-composition-api.vuecorrectly utilize Vue's Composition API and component binding. Nicely done.examples/sites/demos/pc/app/tree-select/basic-usage.vue (1)
1-55: The template and script setup inbasic-usage.vuecorrectly utilize Vue's Options API and component binding. Well implemented.packages/vue/src/tree-select/src/pc.vue (2)
1-34: The template section is well-structured and correctly implements thetiny-base-selectandtiny-treecomponents with appropriate props and event handling.
36-71: The script section is well-implemented with correct imports, component registration, props definition, and setup function logic.examples/sites/demos/apis/tree-select.js (1)
1-118: The API configuration for thetree-selectcomponent is comprehensive, including detailed descriptions and default values for each property. It is well-prepared for both English and Chinese users.examples/sites/demos/pc/menus.js (1)
150-156: The addition of theTreeSelectcomponent to the menu is correctly implemented. The 'Beta' warning is a good practice for new features, helping to set the right expectations for users.packages/modules.json (1)
2981-2993: The new entries forTreeSelectandTreeSelectPcare correctly structured and follow the conventions used throughout the file. Theexcludeflag is set tofalse, which means these components are included in builds or deployments, and the mode is correctly set topc, indicating these components are intended for PC environments.
kagol
force-pushed
the
kagol/add-tree-select
branch
from
adab1b0 to
464a602
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
Outside diff range and nitpick comments (2)
examples/sites/demos/pc/app/tree-select/webdoc/tree-select.cn.md (1)
5-5: Consider consolidating the top-level headings to maintain Markdown best practices.Tools
Markdownlint
5-5: null (MD025, single-title, single-h1)
Multiple top-level headings in the same documentexamples/sites/demos/pc/app/tree-select/webdoc/tree-select.en.md (1)
5-5: Consider consolidating the top-level headings to maintain Markdown best practices.Tools
Markdownlint
5-5: null (MD025, single-title, single-h1)
Multiple top-level headings in the same document
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (15)
- examples/sites/demos/apis/tree-select.js (1 hunks)
- examples/sites/demos/pc/app/tree-select/basic-usage-composition-api.vue (1 hunks)
- examples/sites/demos/pc/app/tree-select/basic-usage.spec.ts (1 hunks)
- examples/sites/demos/pc/app/tree-select/basic-usage.vue (1 hunks)
- examples/sites/demos/pc/app/tree-select/webdoc/tree-select.cn.md (1 hunks)
- examples/sites/demos/pc/app/tree-select/webdoc/tree-select.en.md (1 hunks)
- examples/sites/demos/pc/app/tree-select/webdoc/tree-select.js (1 hunks)
- examples/sites/demos/pc/menus.js (1 hunks)
- packages/modules.json (1 hunks)
- packages/renderless/src/tree-select/index.ts (1 hunks)
- packages/renderless/src/tree-select/vue.ts (1 hunks)
- packages/vue/package.json (1 hunks)
- packages/vue/src/tree-select/index.ts (1 hunks)
- packages/vue/src/tree-select/package.json (1 hunks)
- packages/vue/src/tree-select/src/pc.vue (1 hunks)
Files skipped from review as they are similar to previous changes (12)
- examples/sites/demos/apis/tree-select.js
- examples/sites/demos/pc/app/tree-select/basic-usage-composition-api.vue
- examples/sites/demos/pc/app/tree-select/basic-usage.spec.ts
- examples/sites/demos/pc/app/tree-select/basic-usage.vue
- examples/sites/demos/pc/app/tree-select/webdoc/tree-select.js
- examples/sites/demos/pc/menus.js
- packages/modules.json
- packages/renderless/src/tree-select/index.ts
- packages/renderless/src/tree-select/vue.ts
- packages/vue/package.json
- packages/vue/src/tree-select/package.json
- packages/vue/src/tree-select/src/pc.vue
Additional context used
Markdownlint
examples/sites/demos/pc/app/tree-select/webdoc/tree-select.cn.md
5-5: null (MD025, single-title, single-h1)
Multiple top-level headings in the same documentexamples/sites/demos/pc/app/tree-select/webdoc/tree-select.en.md
5-5: null (MD025, single-title, single-h1)
Multiple top-level headings in the same document
Biome
packages/vue/src/tree-select/index.ts
[error] 16-18: This function expression can be turned into an arrow function. (lint/complexity/useArrowFunction)
Function expressions that don't use this can be turned into arrow functions.
Safe fix: Use an arrow function instead.
Additional comments not posted (1)
packages/vue/src/tree-select/index.ts (1)
16-18: Consider converting this function expression into an arrow function for better consistency with modern JavaScript practices.- TreeSelect.install = function (Vue) { - Vue.component(TreeSelect.name, TreeSelect) - } + TreeSelect.install = (Vue) => { + Vue.component(TreeSelect.name, TreeSelect) + }Tools
Biome
[error] 16-18: This function expression can be turned into an arrow function. (lint/complexity/useArrowFunction)
Function expressions that don't use this can be turned into arrow functions.
Safe fix: Use an arrow function instead.
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (3)
- packages/renderless/src/tree-select/index.ts (1 hunks)
- packages/renderless/src/tree-select/vue.ts (1 hunks)
- packages/vue/src/tree-select/src/pc.vue (1 hunks)
Files skipped from review as they are similar to previous changes (3)
- packages/renderless/src/tree-select/index.ts
- packages/renderless/src/tree-select/vue.ts
- packages/vue/src/tree-select/src/pc.vue
PR
基于 BaseSelect+Tree 封装 TreeSelect 组件，已完善：
效果如下：
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
New Features
Improvements
filterableandfilterMethod, allowing customized filtering of tree data.User Interface