feat(comp:cascader): add IxCascaderPanel component
#1481
There are no files selected for viewing
This file contains 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
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| --- | ||
| order: 80 | ||
| title: | ||
| zh: 级联选择面板 | ||
| en: Cascader Panel | ||
| --- | ||
|
|
||
| ## zh | ||
|
|
||
| 单独使用级联选择面板。 | ||
|
|
||
| ## en | ||
|
|
||
| use `IxCascaderPanel` only. | ||
|
There was a problem hiding this comment. . This code patch is written in YAML language and it is probably used for a documentation. It has the following components: order, title (with zh and en version), zh and en documentations. From a code review perspective, it seems there are no bugs or risks. However, it could be improved by adding more details to the description of the components and documentations to make them more clear. Also, consider using other languages if needed to better explain the components and documentations. |
||
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,150 @@ | ||
| <template> | ||
| <IxSpace vertical> | ||
| <IxDropdown trigger="click"> | ||
| <IxButton>{{ selectedText }}</IxButton> | ||
| <template #overlay> | ||
| <IxCascaderPanel v-model:selectedKeys="fullPathValue" :dataSource="dataSource" @select="onSelect" /> | ||
| </template> | ||
| </IxDropdown> | ||
| <IxDropdown trigger="click"> | ||
| <IxButton>{{ singlePathValue }}</IxButton> | ||
| <template #overlay> | ||
| <IxCascaderPanel | ||
| v-model:selectedKeys="singlePathValue" | ||
| :dataSource="dataSource" | ||
| :fullPath="false" | ||
| @select="onSelect" | ||
| /> | ||
| </template> | ||
| </IxDropdown> | ||
| </IxSpace> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { computed, ref } from 'vue' | ||
|
|
||
| import { CascaderData } from '@idux/components/cascader' | ||
|
|
||
| const fullPathValue = ref(['components', 'general', 'button']) | ||
| const selectedText = computed(() => fullPathValue.value.join('/')) | ||
| const singlePathValue = ref('button') | ||
|
|
||
| const onSelect = (option: CascaderData, isSelected: boolean) => { | ||
| console.log(option, isSelected) | ||
| } | ||
|
|
||
| const dataSource: CascaderData[] = [ | ||
| { | ||
| key: 'components', | ||
| label: 'Components', | ||
| children: [ | ||
| { | ||
| key: 'general', | ||
| label: 'General', | ||
| children: [ | ||
| { | ||
| key: 'button', | ||
| label: 'Button', | ||
| }, | ||
| { | ||
| key: 'header', | ||
| label: 'Header', | ||
| }, | ||
| { | ||
| key: 'icon', | ||
| label: 'Icon', | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| key: 'layout', | ||
| label: 'Layout', | ||
| children: [ | ||
| { | ||
| key: 'divider', | ||
| label: 'Divider', | ||
| }, | ||
| { | ||
| key: 'grid', | ||
| label: 'Grid', | ||
| }, | ||
| { | ||
| key: 'space', | ||
| label: 'Space', | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| key: 'navigation', | ||
| label: 'Navigation', | ||
| children: [ | ||
| { | ||
| key: 'breadcrumb', | ||
| label: 'Breadcrumb', | ||
| }, | ||
| { | ||
| key: 'dropdown', | ||
| label: 'Dropdown', | ||
| }, | ||
| { | ||
| key: 'menu', | ||
| label: 'Menu', | ||
| }, | ||
| { | ||
| key: 'pagination', | ||
| label: 'Pagination', | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| key: 'pro', | ||
| label: 'Pro', | ||
| children: [ | ||
| { | ||
| key: 'pro-layout', | ||
| label: 'Layout', | ||
| }, | ||
| { | ||
| key: 'pro-table', | ||
| label: 'Table', | ||
| disabled: true, | ||
| }, | ||
| { | ||
| key: 'pro-transfer', | ||
| label: 'Transfer', | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| key: 'cdk', | ||
| label: 'CDK', | ||
| disabled: true, | ||
| children: [ | ||
| { | ||
| key: 'a11y', | ||
| label: 'Accessibility', | ||
| }, | ||
| { | ||
| key: 'breakpoint', | ||
| label: 'Breakpoint', | ||
| }, | ||
| { | ||
| key: 'click-outside', | ||
| label: 'ClickOutside', | ||
| }, | ||
| { | ||
| key: 'clipboard', | ||
| label: 'Clipboard', | ||
| }, | ||
| { | ||
| key: 'forms', | ||
| label: 'Forms', | ||
| }, | ||
| ], | ||
| }, | ||
| ] | ||
| </script> | ||
|
|
||
| <style scoped lang="less"></style> | ||
|
There was a problem hiding this comment. the code review:
|
||
This file contains 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
This file contains 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
Oops, something went wrong.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
with a brief overview:
The code patch above includes modifications to the imports, functions, and tests for a Cascader component. The changes include importing Panel instead of OverlayContent, changing the getAllOptionGroup function to use Panel instead of OverlayContent, and modifying a test to use Panel instead of OverlayContent.
Overall, the code looks good and there do not appear to be any bug risks or issues with the modifications. However, it would be beneficial to add more comments explaining the purpose and details of the modifications, as well as why they were made. This will help other developers better understand the code. Additionally, if possible, it would also be beneficial to add unit tests to ensure the changes work as expected.