Browse Source

fix: form required style adjustment (#4668)

pull/4670/head
Vben 1 year ago
committed by GitHub
parent
commit
f89f4f32c7
No known key found for this signature in database GPG Key ID: B5690EEEBB952194
  1. 2
      packages/@core/ui-kit/form-ui/src/form-render/form-field.vue
  2. 10
      packages/@core/ui-kit/form-ui/src/form-render/form-label.vue
  3. 6
      packages/effects/layouts/src/authentication/authentication.vue

2
packages/@core/ui-kit/form-ui/src/form-render/form-field.vue

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

10
packages/@core/ui-kit/form-ui/src/form-render/form-label.vue

@ -1,20 +1,22 @@
<script setup lang="ts">
import { FormLabel, VbenHelpTooltip } from '@vben-core/shadcn-ui';
import { cn } from '@vben-core/shared/utils';
interface Props {
class?: string;
help?: string;
required?: boolean;
}
defineProps<Props>();
const props = defineProps<Props>();
</script>
<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">
{{ help }}
</VbenHelpTooltip>
<slot></slot>
<span v-if="required" class="text-destructive mr-[2px]">*</span>
</FormLabel>
</template>

6
packages/effects/layouts/src/authentication/authentication.vue

@ -61,12 +61,12 @@ const { authPanelCenter, authPanelLeft, authPanelRight, isDark } =
</AuthenticationFormView>
<!-- 头部 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
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" />
<p class="text-xl font-medium">
<img v-if="logo" :alt="appName" :src="logo" class="mr-2" width="42" />
<p v-if="appName" class="text-xl font-medium">
{{ appName }}
</p>
</div>

Loading…
Cancel
Save