fix: form required style adjustment (#4668)
parent
c432e0ac33
commit
f89f4f32c7
|
@ -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,
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue