perf: perf the validation message for VbenForm in compact mode
#6665
Conversation
ming4762
requested review from
anncwb,
vince292007,
mynetfan and
jinmao88
as code owners
|
WalkthroughRemoves tooltip-based validation UI in form-field, adds a compact rendering path for validation messages via a new Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant U as User
participant P as Playground (rules.vue)
participant F as FormField (form-field.vue)
participant M as FormMessage.vue
U->>P: Click "切换Compact" (toggle)
P->>F: Render Form with compact = true/false
F->>M: Render FormMessage with :compact="compact"
alt compact = true
Note over F,M: Compact flow — absolute, inline div under input
else compact = false
Note over F,M: Default flow — block p with destructive text
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. 📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 💡 Knowledge Base configuration:
You can enable these sources in your CodeRabbit configuration. 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (7)
✨ Finishing Touches🧪 Generate unit tests
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:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type 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: 2
🧹 Nitpick comments (4)
packages/@core/ui-kit/shadcn-ui/src/ui/form/FormMessage.vue (2)
25-31: Avoid leaking absolute positioning via parent classes; also consider minimal a11y attributes.The
:as="props.compact ? 'div' : 'p'"and conditional classes are correct. However, since the consumer can pass classes, ensure we don't rely on parent-provided positioning. If the parent providesclass="absolute"unconditionally, it will affect the non-compact path too (see form-field.vue review). Additionally, consider addingaria-live="polite"androle="alert"so screen readers announce validation changes without extra focus shifts.Apply:
<ErrorMessage :id="formMessageId" :name="toValue(name)" :as="props.compact ? 'div' : 'p'" - :class=" + role="alert" + aria-live="polite" + :class=" cn( 'text-[0.8rem]', props.compact ? 'vben-form-message-compact' : 'text-destructive', ) " />
35-50: Compact CSS: verify spacing, theming, and pointer behavior.
- Spacing:
.vben-form-message-compacthasmin-height: 1.5rem, but the field container padding (see form-field.vue) ispb-2(~0.5rem) in compact mode. This is likely to cause overlap with the next row in a grid. Consider increasing bottom padding when an error is present or reduce the bubble’s min-height.- Theming: hard-coded
color: whitecan clash with themes. Prefercolor: hsl(var(--destructive-foreground)).- Pointer behavior: to avoid interfering with pointer interactions on elements below, add
pointer-events: none..vben-form-message-compact { position: absolute; top: 100%; left: 1rem; z-index: 1; width: calc(100% - 1rem); height: auto; min-height: 1.5rem; padding: 2px 8px; - color: white; + color: hsl(var(--destructive-foreground)); background: hsl(var(--destructive)); border-radius: var(--radius); opacity: 1; + pointer-events: none; }packages/@core/ui-kit/form-ui/src/form-render/form-field.vue (1)
291-299: Consider dynamic bottom padding to avoid overlapping the next row in compact+error state.Compact mode sets
pb-2(~0.5rem) on theFormItem, while the compact error bubble’smin-heightis ~1.5rem. This mismatch can cause the bubble to overlap content below in grid layouts.:class="{ 'form-valid-error': isInValid, 'form-is-required': shouldRequired, 'flex-col': isVertical, 'flex-row items-center': !isVertical, - 'pb-4': !compact, - 'pb-2': compact, + 'pb-4': !compact, + // Increase bottom padding only when compact and invalid to reserve space for the bubble + 'pb-2': compact && !isInValid, + 'pb-6': compact && isInValid, }"This keeps compact spacing tight in normal cases, and ensures enough room when errors are shown.
playground/src/views/examples/form/rules.vue (1)
241-248: Playground wiring LGTM; small UX suggestion.The toggle and passing
:compact="isCompact"demonstrate the feature well. For clarity, consider reflecting the state in the button text (e.g., “关闭 Compact” when active).- <Button @click="isCompact = !isCompact">切换Compact</Button> + <Button @click="isCompact = !isCompact"> + {{ isCompact ? '关闭Compact' : '开启Compact' }} + </Button>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (3)
packages/@core/ui-kit/form-ui/src/form-render/form-field.vue(3 hunks)packages/@core/ui-kit/shadcn-ui/src/ui/form/FormMessage.vue(1 hunks)playground/src/views/examples/form/rules.vue(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (7)
- GitHub Check: Check (windows-latest)
- GitHub Check: Lint (windows-latest)
- GitHub Check: Check (ubuntu-latest)
- GitHub Check: Test (windows-latest)
- GitHub Check: Lint (ubuntu-latest)
- GitHub Check: post-update (ubuntu-latest)
- GitHub Check: post-update (windows-latest)
🔇 Additional comments (4)
packages/@core/ui-kit/shadcn-ui/src/ui/form/FormMessage.vue (1)
10-17: Publiccompactprop addition looks good; API surface is clean.Using
withDefaults(defineProps<Props>(), { compact: false })is straightforward and non-breaking. No concerns with the typing or defaulting.packages/@core/ui-kit/form-ui/src/form-render/form-field.vue (1)
324-324: Wrapper nowrelative: good anchor for absolute message.Changing to
class="relative flex-auto p-[1px]"correctly establishes the positioning context for the compact error bubble. Nice.playground/src/views/examples/form/rules.vue (2)
10-10: DefaultisCompact = trueis fine for demo; confirm intended default.If the goal is to showcase the optimized mode by default, this is good. Otherwise, consider defaulting to
falseand letting users toggle it on to compare.
24-24: Commenting outlayout: 'horizontal'is OK in the playground; ensure docs are consistent.If docs/screenshots reference horizontal layout for this example, update them to avoid confusion.
| <Transition name="slide-up"> | ||
| <FormMessage :compact="compact" class="absolute" /> | ||
| </Transition> |
There was a problem hiding this comment.
Bug: class="absolute" forces non-compact messages to be absolutely positioned.
FormMessage already applies absolute positioning internally in compact mode. Passing class="absolute" here unconditionally makes the non-compact version also absolute, breaking the default layout and likely causing layout shifts.
Apply this diff to let FormMessage control positioning:
- <Transition name="slide-up">
- <FormMessage :compact="compact" class="absolute" />
- </Transition>
+ <Transition name="slide-up">
+ <FormMessage :compact="compact" />
+ </Transition>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <Transition name="slide-up"> | |
| <FormMessage :compact="compact" class="absolute" /> | |
| </Transition> | |
| <Transition name="slide-up"> | |
| <FormMessage :compact="compact" /> | |
| </Transition> |
🤖 Prompt for AI Agents
In packages/@core/ui-kit/form-ui/src/form-render/form-field.vue around lines 369
to 371, the FormMessage is being forced to absolute positioning by passing
class="absolute" unconditionally; remove that hardcoded class (or change it to
only apply when compact is true) so FormMessage can control its own positioning
internally — e.g. delete the class="absolute" attribute or replace it with a
conditional class bound to the compact prop so only compact messages become
absolute.
原compact模式的校验信息
优化后的校验信息
Summary by CodeRabbit
New Features
Style