fix: fix known issues with the form (#4696)

* fix: fix known issues with the form

* chore: typo

* chore: typo

.github/release-drafter.yml

@@ -16,7 +16,7 @@ categories:
   - title: '🐞 Bug Fixes'
     labels:
       - 'bug'
-  - title: '📈 Performance'
+  - title: '📈 Performance & Enhancement'
     labels:
       - 'perf'
       - 'enhancement'

apps/web-antd/src/views/_core/authentication/register.vue

@@ -46,7 +46,7 @@ const formSchema = computed((): VbenFormSchema[] => {
         rules(values) {
           const { password } = values;
           return z
-            .string()
+            .string({ required_error: $t('authentication.passwordTip') })
             .min(1, { message: $t('authentication.passwordTip') })
             .refine((value) => value === password, {
               message: $t('authentication.confirmPasswordTip'),
@@ -56,7 +56,6 @@ const formSchema = computed((): VbenFormSchema[] => {
       },
       fieldName: 'confirmPassword',
       label: $t('authentication.confirmPassword'),
-      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
     },
     {
       component: 'VbenCheckbox',
@@ -68,15 +67,10 @@ const formSchema = computed((): VbenFormSchema[] => {
             h(
               'a',
               {
-                class:
-                  'cursor-pointer text-primary ml-1 hover:text-primary-hover',
+                class: 'vben-link ml-1 ',
                 href: '',
               },
-              [
-                $t('authentication.privacyPolicy'),
-                '&',
-                $t('authentication.terms'),
-              ],
+              `${$t('authentication.privacyPolicy')} & ${$t('authentication.terms')}`,
             ),
           ]),
       }),

apps/web-ele/src/views/_core/authentication/register.vue

@@ -46,7 +46,7 @@ const formSchema = computed((): VbenFormSchema[] => {
         rules(values) {
           const { password } = values;
           return z
-            .string()
+            .string({ required_error: $t('authentication.passwordTip') })
             .min(1, { message: $t('authentication.passwordTip') })
             .refine((value) => value === password, {
               message: $t('authentication.confirmPasswordTip'),
@@ -56,7 +56,6 @@ const formSchema = computed((): VbenFormSchema[] => {
       },
       fieldName: 'confirmPassword',
       label: $t('authentication.confirmPassword'),
-      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
     },
     {
       component: 'VbenCheckbox',
@@ -68,15 +67,10 @@ const formSchema = computed((): VbenFormSchema[] => {
             h(
               'a',
               {
-                class:
-                  'cursor-pointer text-primary ml-1 hover:text-primary-hover',
+                class: 'vben-link ml-1 ',
                 href: '',
               },
-              [
-                $t('authentication.privacyPolicy'),
-                '&',
-                $t('authentication.terms'),
-              ],
+              `${$t('authentication.privacyPolicy')} & ${$t('authentication.terms')}`,
             ),
           ]),
       }),

apps/web-naive/src/views/_core/authentication/register.vue

@@ -46,7 +46,7 @@ const formSchema = computed((): VbenFormSchema[] => {
         rules(values) {
           const { password } = values;
           return z
-            .string()
+            .string({ required_error: $t('authentication.passwordTip') })
             .min(1, { message: $t('authentication.passwordTip') })
             .refine((value) => value === password, {
               message: $t('authentication.confirmPasswordTip'),
@@ -56,7 +56,6 @@ const formSchema = computed((): VbenFormSchema[] => {
       },
       fieldName: 'confirmPassword',
       label: $t('authentication.confirmPassword'),
-      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
     },
     {
       component: 'VbenCheckbox',
@@ -68,15 +67,10 @@ const formSchema = computed((): VbenFormSchema[] => {
             h(
               'a',
               {
-                class:
-                  'cursor-pointer text-primary ml-1 hover:text-primary-hover',
+                class: 'vben-link ml-1',
                 href: '',
               },
-              [
-                $t('authentication.privacyPolicy'),
-                '&',
-                $t('authentication.terms'),
-              ],
+              `${$t('authentication.privacyPolicy')} & ${$t('authentication.terms')}`,
             ),
           ]),
       }),

packages/@core/base/design/src/css/global.css

@@ -142,6 +142,10 @@
     @apply outline-primary left-0 top-0 h-full w-full p-1 opacity-100;
   }
 
+  .vben-link {
+    @apply text-primary hover:text-primary-hover active:text-primary-active cursor-pointer;
+  }
+
   .card-box {
     @apply bg-card text-card-foreground border-border rounded-xl border;
   }

packages/@core/ui-kit/form-ui/src/form-render/expandable.ts

@@ -22,6 +22,7 @@ export function useExpandable(props: FormRenderProps) {
     for (let index = 1; index <= rows; index++) {
       maxItem += mapping?.[index] ?? 0;
     }
+    // 保持一行
     return maxItem - 1 || 1;
   });
 
@@ -35,6 +36,7 @@ export function useExpandable(props: FormRenderProps) {
       if (val) {
         await nextTick();
         rowMapping.value = {};
+        isCalculated.value = false;
         await calculateRowMapping();
       }
     },

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

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

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

@@ -12,7 +12,7 @@ const props = defineProps<Props>();
 </script>
 
 <template>
-  <FormLabel :class="cn('mb-1 flex items-center', props.class)">
+  <FormLabel :class="cn('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">

packages/@core/ui-kit/shadcn-ui/src/components/expandable-arrow/expandable-arrow.vue

@@ -12,12 +12,7 @@ const collapsed = defineModel({ default: false });
 
 <template>
   <div
-    :class="
-      cn(
-        'text-primary hover:text-primary-hover inline-flex cursor-pointer items-center',
-        props.class,
-      )
-    "
+    :class="cn('vben-link inline-flex items-center', props.class)"
     @click="collapsed = !collapsed"
   >
     <slot :is-expanded="collapsed">

packages/effects/common-ui/src/ui/about/about.vue

@@ -44,7 +44,7 @@ declare global {
 const renderLink = (href: string, text: string) =>
   h(
     'a',
-    { href, target: '_blank', class: 'text-primary hover:text-primary-hover' },
+    { href, target: '_blank', class: 'vben-link' },
     { default: () => text },
   );
 
@@ -114,11 +114,7 @@ const devDependenciesItems = Object.keys(devDependencies).map((key) => ({
   <Page :title="title">
     <template #description>
       <p class="text-foreground mt-3 text-sm leading-6">
-        <a
-          :href="VBEN_GITHUB_URL"
-          class="text-primary hover:text-primary-hover"
-          target="_blank"
-        >
+        <a :href="VBEN_GITHUB_URL" class="vben-link" target="_blank">
           {{ name }}
         </a>
         {{ description }}

packages/effects/common-ui/src/ui/authentication/login.vue

@@ -120,7 +120,7 @@ onMounted(() => {
 
       <span
         v-if="showForgetPassword"
-        class="text-primary hover:text-primary-hover active:text-primary-active cursor-pointer text-sm font-normal"
+        class="vben-link text-sm font-normal"
         @click="handleGo(forgetPasswordPath)"
       >
         {{ $t('authentication.forgetPassword') }}
@@ -169,7 +169,7 @@ onMounted(() => {
       <div v-if="showRegister" class="mt-3 text-center text-sm">
         {{ $t('authentication.accountTip') }}
         <span
-          class="text-primary hover:text-primary-hover active:text-primary-active cursor-pointer text-sm font-normal"
+          class="vben-link text-sm font-normal"
           @click="handleGo(registerPath)"
         >
           {{ $t('authentication.createAccount') }}

packages/effects/common-ui/src/ui/authentication/register.vue

@@ -107,10 +107,7 @@ function goToLogin() {
     </VbenButton>
     <div class="mt-4 text-center text-sm">
       {{ $t('authentication.alreadyHaveAccount') }}
-      <span
-        class="text-primary hover:text-primary-hover cursor-pointer text-sm font-normal"
-        @click="goToLogin()"
-      >
+      <span class="vben-link text-sm font-normal" @click="goToLogin()">
         {{ $t('authentication.goToLogin') }}
       </span>
     </div>

playground/src/router/routes/modules/examples.ts

@@ -15,33 +15,6 @@ const routes: RouteRecordRaw[] = [
     name: 'Examples',
     path: '/examples',
     children: [
-      {
-        name: 'ModalExample',
-        path: '/examples/modal',
-        component: () => import('#/views/examples/modal/index.vue'),
-        meta: {
-          icon: 'system-uicons:window-content',
-          title: $t('examples.modal.title'),
-        },
-      },
-      {
-        name: 'DrawerExample',
-        path: '/examples/drawer',
-        component: () => import('#/views/examples/drawer/index.vue'),
-        meta: {
-          icon: 'iconoir:drawer',
-          title: $t('examples.drawer.title'),
-        },
-      },
-      {
-        name: 'EllipsisExample',
-        path: '/examples/ellipsis',
-        component: () => import('#/views/examples/ellipsis/index.vue'),
-        meta: {
-          icon: 'ion:ellipsis-horizontal',
-          title: $t('examples.ellipsis.title'),
-        },
-      },
       {
         name: 'FormExample',
         path: '/examples/form',
@@ -228,6 +201,33 @@ const routes: RouteRecordRaw[] = [
           },
         ],
       },
+      {
+        name: 'ModalExample',
+        path: '/examples/modal',
+        component: () => import('#/views/examples/modal/index.vue'),
+        meta: {
+          icon: 'system-uicons:window-content',
+          title: $t('examples.modal.title'),
+        },
+      },
+      {
+        name: 'DrawerExample',
+        path: '/examples/drawer',
+        component: () => import('#/views/examples/drawer/index.vue'),
+        meta: {
+          icon: 'iconoir:drawer',
+          title: $t('examples.drawer.title'),
+        },
+      },
+      {
+        name: 'EllipsisExample',
+        path: '/examples/ellipsis',
+        component: () => import('#/views/examples/ellipsis/index.vue'),
+        meta: {
+          icon: 'ion:ellipsis-horizontal',
+          title: $t('examples.ellipsis.title'),
+        },
+      },
     ],
   },
 ];

playground/src/views/_core/authentication/register.vue

@@ -46,7 +46,7 @@ const formSchema = computed((): VbenFormSchema[] => {
         rules(values) {
           const { password } = values;
           return z
-            .string()
+            .string({ required_error: $t('authentication.passwordTip') })
             .min(1, { message: $t('authentication.passwordTip') })
             .refine((value) => value === password, {
               message: $t('authentication.confirmPasswordTip'),
@@ -56,7 +56,6 @@ const formSchema = computed((): VbenFormSchema[] => {
       },
       fieldName: 'confirmPassword',
       label: $t('authentication.confirmPassword'),
-      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
     },
     {
       component: 'VbenCheckbox',
@@ -68,15 +67,10 @@ const formSchema = computed((): VbenFormSchema[] => {
             h(
               'a',
               {
-                class:
-                  'cursor-pointer text-primary ml-1 hover:text-primary-hover',
+                class: 'vben-link ml-1 ',
                 href: '',
               },
-              [
-                $t('authentication.privacyPolicy'),
-                '&',
-                $t('authentication.terms'),
-              ],
+              `${$t('authentication.privacyPolicy')} & ${$t('authentication.terms')}`,
             ),
           ]),
       }),