feat: form support reverse action buttons #5108
Conversation
mynetfan
requested review from
anncwb,
vince292007 and
a team
as code owners
|
|
Caution Review failedThe pull request is closed. 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
packages/@core/ui-kit/form-ui/src/components/form-actions.vueOops! Something went wrong! :( ESLint: 9.16.0 Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/node_modules/@vben/eslint-config/dist/index.mjs' imported from /eslint.config.mjs WalkthroughThe pull request introduces enhancements to the Vben Form component documentation and its associated functionality. A new property, Changes
Assessment against linked issues
Possibly related PRs
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
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 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: 0
🧹 Outside diff range and nitpick comments (2)
packages/@core/ui-kit/form-ui/src/components/form-actions.vue (1)
145-158: Consider refactoring duplicated submit button template.The submit button template is duplicated with only minor differences. Consider extracting it into a separate template or component to improve maintainability.
+ <!-- Extract to a separate template --> + <template #submit-button="{ class = '' }"> + <component + :is="COMPONENT_MAP.PrimaryButton" + v-if="submitButtonOptions.show" + :class="class" + type="button" + @click="handleSubmit" + v-bind="submitButtonOptions" + > + {{ submitButtonOptions.content }} + </component> + </template> <template v-if="rootProps.actionButtonsReverse"> <slot name="submit-before"></slot> - <component - :is="COMPONENT_MAP.PrimaryButton" - v-if="submitButtonOptions.show" - type="button" - @click="handleSubmit" - v-bind="submitButtonOptions" - > - {{ submitButtonOptions.content }} - </component> + <template v-slot:submit-button></template> </template> <!-- ... --> <template v-if="!rootProps.actionButtonsReverse"> <slot name="submit-before"></slot> - <component - :is="COMPONENT_MAP.PrimaryButton" - v-if="submitButtonOptions.show" - class="ml-3" - type="button" - @click="handleSubmit" - v-bind="submitButtonOptions" - > - {{ submitButtonOptions.content }} - </component> + <template v-slot:submit-button="{ class: 'ml-3' }"></template> </template>Also applies to: 174-188
docs/src/components/common-ui/vben-form.md (1)
310-310: Enhance the documentation foractionButtonsReverseproperty.While the property is well-documented with its basic attributes, consider adding:
- An example usage scenario
- Visual representation of button positions (before/after)
- Impact on form submission behavior
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (4)
docs/src/components/common-ui/vben-form.md(1 hunks)packages/@core/ui-kit/form-ui/src/components/form-actions.vue(1 hunks)packages/@core/ui-kit/form-ui/src/types.ts(1 hunks)playground/src/views/examples/form/api.vue(5 hunks)
🔇 Additional comments (7)
packages/@core/ui-kit/form-ui/src/types.ts (1)
310-313: LGTM! Clean type definition with good documentation.
The new actionButtonsReverse property is well-defined and documented, following the existing interface patterns.
packages/@core/ui-kit/form-ui/src/components/form-actions.vue (1)
166-166: LGTM! Correct margin adjustment for the new layout.
The margin class change from mr-3 to ml-3 is appropriate for maintaining consistent spacing in both normal and reversed button layouts.
playground/src/views/examples/form/api.vue (3)
10-14: LGTM! Clean state management implementation.
The reactive state management for actionButtonsReverse is well-implemented and properly initialized in the form configuration.
168-172: LGTM! Consistent handler implementation.
The new case for reverseActionButtons follows the existing pattern and properly updates both the local state and form configuration.
242-244: LGTM! Clear and consistent UI implementation.
The new button for reversing action buttons is well-integrated into the existing UI layout.
docs/src/components/common-ui/vben-form.md (2)
Line range hint 1-24: Documentation structure is well-organized and comprehensive.
The documentation follows best practices with:
- Clear section hierarchy
- Detailed API documentation
- Comprehensive type definitions
Line range hint 310-400: Verify the completeness of type definitions for new features.
Let's ensure all new properties are properly typed in the codebase.
✅ Verification successful
Type definitions and usage are properly implemented
The verification shows that:
- The
actionButtonsReverseproperty is properly typed as boolean in the interface definition (packages/@core/ui-kit/form-ui/src/types.ts) - The property is correctly used in the component implementation:
- Utilized in form-actions component logic (
packages/@core/ui-kit/form-ui/src/components/form-actions.vue) - Demonstrated in example usage (
playground/src/views/examples/form/api.vue)
- Utilized in form-actions component logic (
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify type definitions for actionButtonsReverse property
# Check if the property is properly typed in the component interface
ast-grep --pattern 'interface $interface {
$$$
actionButtonsReverse?: boolean;
$$$
}'
# Check if the property is used in component implementation
rg "actionButtonsReverse.*=.*" -t vue
Length of output: 161
Script:
#!/bin/bash
# Let's try a different approach to verify the type definitions and usage
# Search for actionButtonsReverse in all TypeScript files
rg "actionButtonsReverse" -t ts
# Search for interface or type definitions containing form props
ast-grep --pattern 'interface $interface {
$$$
submitButtonOptions?: $_
$$$
}'
# Also search for any .vue files (without file type filter)
rg "actionButtonsReverse" --type-add 'vue:*.vue' -t vue
Length of output: 702
Description
添加翻转表单操作按钮的属性，用于控制提交按钮和重置按钮的前后位置。
close #5103
Type of change
Please delete options that are not relevant.
pnpm-lock.yamlunless you introduce a new test example.Checklist
pnpm run docs:devcommand.pnpm test.feat:,fix:,perf:,docs:, orchore:.Summary by CodeRabbit
New Features
actionButtonsReverseto control the order of action buttons in the Vben Form component.Documentation
actionButtonsReverseproperty and dynamic field interactions.Bug Fixes