Skip to content

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

Merged
merged 4 commits into from
Feb 20, 2025

Conversation

mynetfan
Copy link
Collaborator

@mynetfan mynetfan commented Feb 20, 2025

Description

  1. 修改FormItem布局,使得overflow-hidden不至于影响到校验信息的显示
  2. 改进表单字段的help、label属性,支持自定义渲染函数(以解决提示信息过长或者适应其它更复杂场景)

close #5570
close #5447
close #5301

Type of change

  • Bug fix (non-breaking change which fixes an issue)

Summary by CodeRabbit

  • New Features

    • Form components now support dynamic rendering for labels, help messages, and descriptions for a richer interactive experience.
    • New validation rules and custom error messaging improve user guidance during form interactions.
  • Style

    • Layout refinements enhance element alignment and positioning, ensuring a cleaner and more cohesive display of form fields and feedback.
  • Documentation

    • Updated documentation reflects changes in the FormSchema interface, emphasizing the new flexible rendering options for help and label properties.
    • Added new configuration options and guidelines for environment variables in the application settings documentation.

Copy link

changeset-bot bot commented Feb 20, 2025

⚠️ No Changeset found

Latest commit: 46a480b

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Copy link
Contributor

coderabbitai bot commented Feb 20, 2025

Walkthrough

This 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 VbenRenderContent component. Layout adjustments include modified CSS classes and additional wrapper elements to better manage positioning and overflow. The playground example has been updated to include new validation rules and dynamic label rendering using the Tag component. No public API declarations were changed.

Changes

File(s) Change Summary
packages/@core/ui-kit/form-ui/src/form-render/form-field.vue Updated rendering logic: using VbenRenderContent for labels, changing CSS classes from "flex" to "relative flex", adding extra div wrappers for layout, updating disabled state and FormMessage positioning, and conditionally rendering the FormDescription.
packages/@core/ui-kit/form-ui/src/form-render/form-label.vue Modified imports and Props interface: imported CustomRenderType and VbenRenderContent, changed the type of help from string to CustomRenderType, and updated template to use VbenRenderContent for dynamic rendering.
packages/@core/ui-kit/form-ui/src/types.ts Updated the FormSchema interface by changing property types (description, help, label, suffix) from string to CustomRenderType to allow dynamic content rendering.
playground/src/views/examples/form/basic.vue Enhanced the form schema: added the Tag component for dynamic label rendering, imported z for extended validation, added a validation rule (rules: 'selectRequired' and a refined checkbox rule), introduced a multi-line help message for the switch component, and changed the colon property to false.
docs/src/components/common-ui/vben-form.md Updated documentation for FormSchema interface: changed help and label properties from string to CustomRenderType.
docs/src/guide/essentials/settings.md Added new configuration options and clarified usage of environment variables, including the introduction of VITE_GLOB_OTHER_API_URL.

Possibly related PRs

Suggested labels

bug, enhancement

Suggested reviewers

  • anncwb
  • vince292007

Poem

Hop along the code, my friend,
Where labels and helps now blend.
With VbenRenderContent lighting the way,
Form fields sprout fresh by day.
I, the rabbit, cheer each line—
Code so lively, purely divine!
(✿◠‿◠)


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?

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

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)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link
Contributor

@coderabbitai coderabbitai bot left a 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 through VbenRenderContent.

-    // label,
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ccd99eb and 6737541.

📒 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 and VbenRenderContent 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] to bottom-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.

@mynetfan mynetfan requested a review from a team as a code owner February 20, 2025 14:56
Copy link
Contributor

@coderabbitai coderabbitai bot left a 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 the help property type to CustomRenderType

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 valid CustomRenderType, so users have clear guidance on how to leverage this new capability.


450-451: Update the label property type to CustomRenderType

Modifying the label property to use CustomRenderType 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 Message

The 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

📥 Commits

Reviewing files that changed from the base of the PR and between 6737541 and 46a480b.

📒 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.

@mynetfan mynetfan merged commit a221d2b into vbenjs:main Feb 20, 2025
14 checks passed
@mynetfan mynetfan deleted the form/fixed-layout branch February 20, 2025 15:05
@github-actions github-actions bot locked and limited conversation to collaborators Mar 23, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
1 participant