fix: pinInput value synchronous update (#5142)

apps/web-antd/src/views/_core/authentication/code-login.vue

@@ -10,6 +10,7 @@ import { $t } from '@vben/locales';
 defineOptions({ name: 'CodeLogin' });
 
 const loading = ref(false);
+const CODE_LENGTH = 6;
 
 const formSchema = computed((): VbenFormSchema[] => {
   return [
@@ -30,6 +31,7 @@ const formSchema = computed((): VbenFormSchema[] => {
     {
       component: 'VbenPinInput',
       componentProps: {
+        codeLength: CODE_LENGTH,
         createText: (countdown: number) => {
           const text =
             countdown > 0
@@ -41,7 +43,9 @@ const formSchema = computed((): VbenFormSchema[] => {
       },
       fieldName: 'code',
       label: $t('authentication.code'),
-      rules: z.string().min(1, { message: $t('authentication.codeTip') }),
+      rules: z.string().length(CODE_LENGTH, {
+        message: $t('authentication.codeTip', [CODE_LENGTH]),
+      }),
     },
   ];
 });

apps/web-ele/src/views/_core/authentication/code-login.vue

@@ -10,6 +10,7 @@ import { $t } from '@vben/locales';
 defineOptions({ name: 'CodeLogin' });
 
 const loading = ref(false);
+const CODE_LENGTH = 6;
 
 const formSchema = computed((): VbenFormSchema[] => {
   return [
@@ -30,6 +31,7 @@ const formSchema = computed((): VbenFormSchema[] => {
     {
       component: 'VbenPinInput',
       componentProps: {
+        codeLength: CODE_LENGTH,
         createText: (countdown: number) => {
           const text =
             countdown > 0
@@ -41,7 +43,9 @@ const formSchema = computed((): VbenFormSchema[] => {
       },
       fieldName: 'code',
       label: $t('authentication.code'),
-      rules: z.string().min(1, { message: $t('authentication.codeTip') }),
+      rules: z.string().length(CODE_LENGTH, {
+        message: $t('authentication.codeTip', [CODE_LENGTH]),
+      }),
     },
   ];
 });

apps/web-naive/src/views/_core/authentication/code-login.vue

@@ -10,6 +10,7 @@ import { $t } from '@vben/locales';
 defineOptions({ name: 'CodeLogin' });
 
 const loading = ref(false);
+const CODE_LENGTH = 6;
 
 const formSchema = computed((): VbenFormSchema[] => {
   return [
@@ -30,6 +31,7 @@ const formSchema = computed((): VbenFormSchema[] => {
     {
       component: 'VbenPinInput',
       componentProps: {
+        codeLength: CODE_LENGTH,
         createText: (countdown: number) => {
           const text =
             countdown > 0
@@ -41,7 +43,9 @@ const formSchema = computed((): VbenFormSchema[] => {
       },
       fieldName: 'code',
       label: $t('authentication.code'),
-      rules: z.string().min(1, { message: $t('authentication.codeTip') }),
+      rules: z.string().length(CODE_LENGTH, {
+        message: $t('authentication.codeTip', [CODE_LENGTH]),
+      }),
     },
   ];
 });

packages/@core/ui-kit/shadcn-ui/src/components/pin-input/input.vue

@@ -47,6 +47,10 @@ watch(
   },
 );
 
+watch(inputValue, (val) => {
+  modelValue.value = val.join('');
+});
+
 function handleComplete(e: string[]) {
   modelValue.value = e.join('');
   emit('complete');

packages/locales/src/langs/en-US/authentication.json

@@ -38,7 +38,7 @@
   "qrcodeLogin": "QR Code Login",
   "codeSubtitle": "Enter your phone number to start managing your project",
   "code": "Security code",
-  "codeTip": "Security code is required",
+  "codeTip": "Security code required {0} characters",
   "mobile": "Mobile",
   "mobileLogin": "Mobile Login",
   "mobileTip": "Please enter mobile number",

packages/locales/src/langs/zh-CN/authentication.json

@@ -38,7 +38,7 @@
   "qrcodeLogin": "扫码登录",
   "codeSubtitle": "请输入您的手机号码以开始管理您的项目",
   "code": "验证码",
-  "codeTip": "请输入验证码",
+  "codeTip": "请输入{0}位验证码",
   "mobile": "手机号码",
   "mobileTip": "请输入手机号",
   "mobileErrortip": "手机号码格式错误",

playground/src/views/_core/authentication/code-login.vue

@@ -10,6 +10,7 @@ import { $t } from '@vben/locales';
 defineOptions({ name: 'CodeLogin' });
 
 const loading = ref(false);
+const CODE_LENGTH = 6;
 
 const formSchema = computed((): VbenFormSchema[] => {
   return [
@@ -30,6 +31,7 @@ const formSchema = computed((): VbenFormSchema[] => {
     {
       component: 'VbenPinInput',
       componentProps: {
+        codeLength: CODE_LENGTH,
         createText: (countdown: number) => {
           const text =
             countdown > 0
@@ -41,7 +43,9 @@ const formSchema = computed((): VbenFormSchema[] => {
       },
       fieldName: 'code',
       label: $t('authentication.code'),
-      rules: z.string().min(1, { message: $t('authentication.codeTip') }),
+      rules: z.string().length(CODE_LENGTH, {
+        message: $t('authentication.codeTip', [CODE_LENGTH]),
+      }),
     },
   ];
 });