fix: form required style adjustment (#4668)

vbenjs · Oct 17, 2024 · f89f4f3 · f89f4f3
1 parent c432e0a
commit f89f4f3
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 8 deletions.
diff --git a/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue b/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,

diff --git a/packages/@core/ui-kit/form-ui/src/form-render/form-label.vue b/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>
diff --git a/packages/effects/layouts/src/authentication/authentication.vue b/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>