feat(transfer): [transfer] adds the ability to customize the panel width for the transfer component #3285
Conversation
WalkthroughThis pull request introduces three new properties for the transfer component, enabling enhanced customization of panel styles and dimensions. New Vue components and demos have been added to showcase these features with list, tree, and grid configurations. Updates have been made to CSS files to incorporate dynamic styles using flexbox and CSS variables. Additionally, corresponding props have been integrated into both transfer and transfer panel components to propagate the new styling options throughout the system. Changes
Sequence Diagram(s)sequenceDiagram
participant Demo as DemoComponent
participant Transfer as TransferComponent
participant Panel as TransferPanel
participant Theme as ThemeStyles
Demo->>Transfer: Pass props (panelStyle, panelBodyStyle, panelTableHeight)
Transfer->>Panel: Forward style customization props
Panel->>Theme: Apply dynamic styles via CSS variables/flexbox
Theme-->>Panel: Return computed style adjustments
Panel-->>Transfer: Render component with custom styles
Possibly related PRs
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
examples/sites/demos/pc/app/transfer/custom-size-composition-api.vueOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-vue". (The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. examples/sites/demos/pc/app/transfer/custom-size.vueOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-vue". (The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. examples/sites/demos/apis/transfer.jsOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-vue". (The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.
Tip ⚡💬 Agentic Chat (Pro Plan, General Availability)
✨ Finishing Touches
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:
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 (
|
Walkthrough此PR为穿梭框组件添加了自定义面板宽度的功能，并使宽度自适应父容器空间。通过增加三个属性，用户可以指定面板的样式和嵌套表格的高度。当面板宽度超过外部容器的50%时，面板会自动调整以适应容器宽度。 Changes
|
![petercat-assistant[bot]](https://avatars.githubusercontent.com/in/875736?s=60&v=4){kind=small}
| }, | ||
| treeOp: Object, | ||
| beforeTransfer: Function | ||
| beforeTransfer: Function, |
There was a problem hiding this comment.
Ensure that the new properties panelStyle, panelBodyStyle, and panelTableHeight are validated and handled properly to avoid potential runtime errors if incorrect data types are passed.
|
[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 |
WalkthroughThis PR adds the ability to customize panel width to the shuttle box component and makes the width adaptable to the parent container space. By adding three properties, users can specify the style of the panel and the height of the nested table. When the panel width exceeds 50% of the external container, the panel will automatically adjust to suit the container width. Changes
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
examples/sites/demos/pc/app/transfer/custom-size.vue (1)
78-84: Well-defined panel style configuration.The panel customization properties are clearly defined with appropriate values. Consider adding a comment explaining the height unit (px) and what happens when the width exceeds container width (as mentioned in PR objectives).
// 自定义面板样式 panelStyle: { width: '650px' + // Panel width will be capped at 50% of container width if it exceeds that limit }, panelBodyStyle: { height: '200px' }, panelTableHeight: '700px', // Height for the table in grid mode
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (10)
examples/sites/demos/apis/transfer.js(1 hunks)examples/sites/demos/pc/app/transfer/custom-size-composition-api.vue(1 hunks)examples/sites/demos/pc/app/transfer/custom-size.vue(1 hunks)examples/sites/demos/pc/app/transfer/webdoc/transfer.js(1 hunks)packages/theme-saas/src/transfer/index.less(2 hunks)packages/theme/src/transfer/index.less(6 hunks)packages/theme/src/transfer/vars.less(1 hunks)packages/vue/src/transfer-panel/src/pc.vue(3 hunks)packages/vue/src/transfer/src/index.ts(1 hunks)packages/vue/src/transfer/src/pc.vue(2 hunks)
🔇 Additional comments (23)
packages/theme/src/transfer/vars.less (1)
143-143: Panel body tree filter height has been increased by 4pxThe CSS variable for panel body tree filter height has been updated from
calc(100% - 46px)tocalc(100% - 50px), increasing the spacing by 4px.This change affects the layout of tree components within the transfer panel and likely improves the visual appearance with the new customizable panel width feature.
packages/vue/src/transfer-panel/src/pc.vue (3)
17-17: Added support for custom panel stylingThe main transfer panel container now supports dynamic styling through the new
panelStyleprop, enabling customization of the panel's appearance.
33-37: Added support for custom panel body stylingThe transfer panel body now supports dynamic styling through the new
panelBodyStyleprop. This, combined with the panel container styling, provides comprehensive customization capabilities.
145-146: New style customization props added to transferPanelPropsAdded two new props to the component:
panelStyle: For customizing the outer containerpanelBodyStyle: For customizing the panel bodyThese props are correctly defined as Object types, allowing for flexible styling options.
examples/sites/demos/pc/app/transfer/webdoc/transfer.js (1)
104-123: Added new demo for panel size customizationA comprehensive demo entry has been added to showcase the new panel customization features. The documentation clearly explains:
- How
panelStyleallows customizing the left and right panel containers- How the panel auto-adapts when width exceeds 50% of container width
- How
panelBodyStyleallows styling the content area- How
panelTableHeightcan be used for nested tablesThe documentation is thorough and includes both Chinese and English translations.
packages/vue/src/transfer/src/index.ts (1)
94-97: Added panel customization props to transferPropsThree new properties have been added to the
transferPropsobject:
panelStyle: For customizing the panel containerpanelBodyStyle: For customizing the panel bodypanelTableHeight: For setting the height of nested tablesThese properties are properly typed (Object for style props, String for height) and align with the implementation in other files.
packages/theme-saas/src/transfer/index.less (2)
136-137: Good update to flexbox layout for better panel structure.Using flexbox for the panel body allows for better content organization and responsiveness. This change enables proper vertical stretching of child elements when the panel is resized.
392-392: Great implementation of dynamic table height.Using CSS variables (
--tv-Transfer-table-dyn-height) enables the component to accept externally configured table heights. This approach maintains separation of concerns while allowing for customization.examples/sites/demos/pc/app/transfer/custom-size.vue (3)
6-8: LGTM: Good demonstration of the new panel customization properties.The implementation correctly showcases how to use the new
panelStyleandpanelBodyStyleproperties for the list transfer component.
19-20: LGTM: Consistent use of properties across component instances.The tree transfer implementation correctly applies the same panel customization properties as the list example.
35-37: Good demonstration of all customization properties.This example appropriately showcases all three new properties, including the grid-specific
panelTableHeightproperty.packages/vue/src/transfer/src/pc.vue (2)
14-14: Good implementation of dynamic CSS variable binding.The implementation correctly applies the CSS variable
--tv-Transfer-table-dyn-heightbased on thepanelTableHeightprop, which enables dynamic styling of the table height.
161-163:❓ Verification inconclusive
Well-defined new props for panel customization.
The new props
panelStyle,panelBodyStyle, andpanelTableHeighthave been correctly added to the component's props array, enabling the customization features described in the PR objectives.
🏁 Script executed:
#!/bin/bash # Check if these props are also defined in the TransferPanel component echo "Checking if the props are passed to TransferPanel component..." rg -A 5 "panelStyle|panelBodyStyle|panelTableHeight" --type vueLength of output: 228
Review Update: Manual Verification Required
The new props (
panelStyle,panelBodyStyle, andpanelTableHeight) are correctly added to the component’s props array inpackages/vue/src/transfer/src/pc.vue(lines 161-163), which supports the intended panel customization features. However, our initial automated check for these props in the TransferPanel component encountered an error due to unrecognized file type "vue." This means we couldn’t conclusively verify via our script that these props are also passed to or used within the TransferPanel.• Please re-run the verification using a command that correctly targets Vue files (for example, using the
--glob '*.vue'option) to ensure that the TransferPanel integration is in place.
• In the meantime, a manual review of the TransferPanel component to confirm that these new props are forwarded or utilized as expected is recommended.examples/sites/demos/pc/app/transfer/custom-size-composition-api.vue (2)
73-75: Good implementation with Composition API.The panel customization properties are correctly defined as reactive references, which is appropriate for the Composition API approach.
1-40: Consistent implementation across API styles.The template structure and property usage match the Options API example, which ensures consistency across different API styles. This is good practice for documentation and developer experience.
packages/theme/src/transfer/index.less (5)
29-29: Adding code section comments improves maintainability.The addition of clear section comments helps separate different styling sections of the transfer component, making the code more organized and easier to navigate.
99-99: LGTM: Improved CSS formatting consistency.Adding consistent spacing after colons in CSS property declarations enhances code readability.
Also applies to: 119-119
142-142: Good structure enhancement with section comments and flexbox alignment.Adding the section comment for transfer-panel styles and setting
align-items: stretchensures panels will expand to fill their container vertically, which is necessary for the panel width customization feature.Also applies to: 153-153
157-157: Excellent implementation of flexible layout.The addition of flexbox layout to the panel body with
display: flexandflex-direction: columnenables proper expansion of content, while the variable-based height enables custom height configurations through props.Also applies to: 162-163
394-394: Good use of CSS variables for dynamic height.Replacing the fixed
400pxheight withvar(--tv-Transfer-table-dyn-height, 400px)allows the table height to be dynamically set through the newpanel-table-heightproperty while maintaining backward compatibility with a default value.examples/sites/demos/apis/transfer.js (3)
292-305: Well-documented panel-style property implementation.The
panel-styleproperty implementation is well-documented with clear descriptions in both Chinese and English. The property allows users to customize the panel container styles, supporting the PR's main objective of customizing panel width.The documentation correctly notes that when panel width exceeds 50% of the container width, it will automatically adapt, which aligns with the PR objectives.
307-319: Clear documentation for the panel-body-style property.The
panel-body-styleproperty is well-defined with appropriate type information and descriptions. This property complements the panel-style property by allowing customization of the content area within the panel, providing more granular styling control.
321-334: Thorough documentation for panel-table-height property.The
panel-table-heightproperty documentation clearly explains its purpose and relationship with the default table height (400px). The explanation of how this property can be used to match customized panel heights with table heights is particularly helpful for users implementing responsive designs.
shenjunjian
changed the title
PR
feat(transfer): 为穿梭框组件添加自定义面板宽度的功能，以及宽度自适应父空间
1、 增加3个属性， 不传入时面板的尺寸就是原来的宽度。 传入后，绑定用户的样式到style上， 优先级高于theme中的值。
2、panel面板的宽度大于外部容器的50%的时候， 面板会自适应容器的尺寸。
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