fix: form required style adjustment (#4668)

pull/48/MERGE
Vben 2024-10-17 22:40:20 +08:00 committed by GitHub
parent c432e0ac33
commit f89f4f32c7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 10 additions and 8 deletions

View File

@ -278,7 +278,7 @@ function autofocus() {
cn( cn(
'flex leading-6', 'flex leading-6',
{ {
'mr-2 flex-shrink-0': !isVertical, 'mr-2 flex-shrink-0 justify-end': !isVertical,
'flex-row': isVertical, 'flex-row': isVertical,
}, },
!isVertical && labelClass, !isVertical && labelClass,

View File

@ -1,20 +1,22 @@
<script setup lang="ts"> <script setup lang="ts">
import { FormLabel, VbenHelpTooltip } from '@vben-core/shadcn-ui'; import { FormLabel, VbenHelpTooltip } from '@vben-core/shadcn-ui';
import { cn } from '@vben-core/shared/utils';
interface Props { interface Props {
class?: string;
help?: string; help?: string;
required?: boolean; required?: boolean;
} }
defineProps<Props>(); const props = defineProps<Props>();
</script> </script>
<template> <template>
<FormLabel class="flex flex-row-reverse items-center"> <FormLabel :class="cn('mb-1 flex items-center', props.class)">
<span v-if="required" class="text-destructive mr-[2px]">*</span>
<slot></slot>
<VbenHelpTooltip v-if="help" trigger-class="size-3.5 ml-1"> <VbenHelpTooltip v-if="help" trigger-class="size-3.5 ml-1">
{{ help }} {{ help }}
</VbenHelpTooltip> </VbenHelpTooltip>
<slot></slot>
<span v-if="required" class="text-destructive mr-[2px]">*</span>
</FormLabel> </FormLabel>
</template> </template>

View File

@ -61,12 +61,12 @@ const { authPanelCenter, authPanelLeft, authPanelRight, isDark } =
</AuthenticationFormView> </AuthenticationFormView>
<!-- 头部 Logo 和应用名称 --> <!-- 头部 Logo 和应用名称 -->
<div class="absolute left-0 top-0 z-10 flex flex-1"> <div v-if="logo || appName" class="absolute left-0 top-0 z-10 flex flex-1">
<div <div
class="text-foreground lg:text-foreground ml-4 mt-4 flex flex-1 items-center sm:left-6 sm:top-6" class="text-foreground lg:text-foreground ml-4 mt-4 flex flex-1 items-center sm:left-6 sm:top-6"
> >
<img :alt="appName" :src="logo" class="mr-2" width="42" /> <img v-if="logo" :alt="appName" :src="logo" class="mr-2" width="42" />
<p class="text-xl font-medium"> <p v-if="appName" class="text-xl font-medium">
{{ appName }} {{ appName }}
</p> </p>
</div> </div>