fix: form label and control style (#5580)

* fix: form label and control style

* fix: empty label mark with required rules
This commit is contained in:
Netfan 2025-02-21 11:14:59 +08:00 committed by GitHub
parent 5aff8bac10
commit c9ccd2bbab
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 11 additions and 4 deletions

View File

@ -301,17 +301,18 @@ function autofocus() {
)
"
:help="help"
:colon="colon"
:label="label"
:required="shouldRequired && !hideRequiredMark"
:style="labelStyle"
>
<template v-if="label">
<VbenRenderContent :content="label" />
<span v-if="colon" class="ml-[2px]">:</span>
</template>
</FormLabel>
<div class="w-full overflow-hidden">
<div :class="cn('relative flex w-full items-center', wrapperClass)">
<div class="flex-auto overflow-hidden">
<div class="flex-auto overflow-hidden p-[2px]">
<FormControl :class="cn(controlClass)">
<slot
v-bind="{

View File

@ -10,7 +10,9 @@ import { cn } from '@vben-core/shared/utils';
interface Props {
class?: string;
colon?: boolean;
help?: CustomRenderType;
label?: CustomRenderType;
required?: boolean;
}
@ -24,5 +26,6 @@ const props = defineProps<Props>();
<VbenHelpTooltip v-if="help" trigger-class="size-3.5 ml-1">
<VbenRenderContent :content="help" />
</VbenHelpTooltip>
<span v-if="colon && label" class="ml-[2px]">:</span>
</FormLabel>
</template>

View File

@ -235,7 +235,9 @@ const [BaseForm, baseFormApi] = useVbenForm({
default: () => ['我已阅读并同意'],
};
},
rules: z.any().refine((v) => v, { message: '为什么不同意?勾上它!' }),
rules: z
.boolean()
.refine((v) => v, { message: '为什么不同意?勾上它!' }),
},
{
component: 'Mentions',
@ -266,7 +268,8 @@ const [BaseForm, baseFormApi] = useVbenForm({
class: 'w-auto',
},
fieldName: 'switch',
help: () => ['这是一个帮助信息', '第二行'].map((v) => h('p', () => v)),
help: () =>
['这是一个多行帮助信息', '第二行', '第三行'].map((v) => h('p', v)),
label: '开关',
},
{