-
Notifications
You must be signed in to change notification settings - Fork 8k
fix: form item overflow fixed and layout improved #5572
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
|
WalkthroughThis change updates core form-render components to support more dynamic and flexible content rendering. In the field and label components, string properties (like label, help, description, and suffix) have been replaced with a custom render type and are now rendered using the Changes
Possibly related PRs
Suggested labels
Suggested reviewers
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 using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
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.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/@core/ui-kit/form-ui/src/form-render/form-field.vue (1)
196-196
: Remove commented code.The commented-out
label
property is no longer needed as it's now handled throughVbenRenderContent
.- // label,
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
packages/@core/ui-kit/form-ui/src/form-render/form-field.vue
(3 hunks)packages/@core/ui-kit/form-ui/src/form-render/form-label.vue
(2 hunks)packages/@core/ui-kit/form-ui/src/types.ts
(1 hunks)playground/src/views/examples/form/basic.vue
(6 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (5)
- GitHub Check: Check (windows-latest)
- GitHub Check: Lint (windows-latest)
- GitHub Check: Test (windows-latest)
- GitHub Check: post-update (windows-latest)
- GitHub Check: post-update (ubuntu-latest)
🔇 Additional comments (8)
packages/@core/ui-kit/form-ui/src/form-render/form-label.vue (1)
2-8
: LGTM! Enhanced help content rendering.The changes improve the flexibility of help content rendering by supporting both string and function-based content through the
CustomRenderType
type andVbenRenderContent
component.Also applies to: 13-13, 25-25
packages/@core/ui-kit/form-ui/src/types.ts (1)
247-247
: LGTM! Enhanced form field attributes.The changes improve form field attributes by supporting custom rendering functions through
CustomRenderType
, enabling better handling of lengthy prompt messages and complex scenarios.Also applies to: 251-251, 253-253, 259-259
packages/@core/ui-kit/form-ui/src/form-render/form-field.vue (2)
288-288
: LGTM! Improved form field layout.The changes enhance the form field layout by:
- Adding
relative
positioning for proper message placement.- Using nested divs with
overflow-hidden
to prevent content overflow while keeping validation messages visible.- Improving content alignment with flex layout.
Also applies to: 312-357
360-360
: LGTM! Fixed validation message positioning.The change from
-bottom-[22px]
tobottom-1
ensures validation messages remain visible while maintaining proper spacing.playground/src/views/examples/form/basic.vue (4)
122-122
: LGTM! Added validation rule.The
selectRequired
rule ensures proper validation for the remote search field.
163-163
: LGTM! Enhanced label rendering.The changes demonstrate the new custom rendering capabilities by:
- Disabling the colon suffix.
- Using the
Tag
component with an emoji for a more engaging label.Also applies to: 182-182
238-238
: LGTM! Added custom validation.The
refine
rule with a custom message improves user experience by providing clear feedback.
269-269
: LGTM! Added multi-line help text.The help text demonstrates the new rendering capabilities by displaying multiple paragraphs.
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.
Actionable comments posted: 0
🧹 Nitpick comments (4)
packages/@core/ui-kit/form-ui/src/form-render/form-field.vue (1)
196-196
: Consider adding a warning for non-string labels.While coercing non-string labels to empty strings prevents runtime errors, it might silently hide potential issues. Consider logging a warning when a non-string label is provided to help developers identify and fix incorrect usage.
- label: isString(label) ? label : '', + label: isString(label) ? label : (() => { + if (label !== undefined && label !== null) { + console.warn(`Label should be a string, received ${typeof label}`); + } + return ''; + })(),docs/src/components/common-ui/vben-form.md (2)
448-449
: Update thehelp
property type toCustomRenderType
This change enhances the flexibility of the
help
property by allowing not only static strings but also custom rendering functions for dynamic content. Please ensure that the documentation includes a brief explanation or example of what constitutes a validCustomRenderType
, so users have clear guidance on how to leverage this new capability.
450-451
: Update thelabel
property type toCustomRenderType
Modifying the
label
property to useCustomRenderType
improves its versatility by supporting custom rendering options beyond plain strings. Verify that all code examples and API documentation reflect this update, and consider adding a note on supported formats (e.g., strings, functions) to avoid any potential confusion for users.docs/src/guide/essentials/settings.md (1)
541-543
: Clarify the Cache-Clearing Warning MessageThe warning section now includes a bullet point:
- 更改配置后请清空缓存,否则可能不生效。
Please verify that this addition is intentional and not a duplicate. Ensuring consistency in tone and punctuation with the other bullet points in the warning (e.g. using full-width punctuation as needed) would improve readability. If this line repeats an existing reminder, consider consolidating or rephrasing for clarity.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
docs/src/components/common-ui/vben-form.md
(1 hunks)docs/src/guide/essentials/settings.md
(1 hunks)packages/@core/ui-kit/form-ui/src/form-render/form-field.vue
(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (5)
- GitHub Check: Test (windows-latest)
- GitHub Check: Lint (windows-latest)
- GitHub Check: post-update (windows-latest)
- GitHub Check: Check (windows-latest)
- GitHub Check: post-update (ubuntu-latest)
🔇 Additional comments (4)
packages/@core/ui-kit/form-ui/src/form-render/form-field.vue (4)
288-288
: LGTM! Position handling improved.The addition of 'relative' class enables proper absolute positioning of child elements like FormMessage, which is a good practice for layout control.
308-310
: LGTM! Dynamic label rendering implemented.The use of VbenRenderContent component for label rendering improves flexibility by supporting both string and custom render content.
312-357
: LGTM! Layout structure improved.The new nested div structure with proper overflow control effectively addresses the form item overflow issue mentioned in the PR objectives. The layout improvements include:
- Proper overflow handling
- Flexible width control
- Support for suffix and description elements
360-360
: LGTM! Form message positioning refined.The adjustment of FormMessage positioning to 'bottom-1' provides better alignment and visibility of validation messages.
Description
close #5570
close #5447
close #5301
Type of change
Summary by CodeRabbit
New Features
Style
Documentation
FormSchema
interface, emphasizing the new flexible rendering options for help and label properties.