From 7581fb381f89d8683063e46c830f632c64fc3b31 Mon Sep 17 00:00:00 2001 From: Netfan Date: Sun, 15 Dec 2024 14:26:42 +0800 Subject: [PATCH] fix: pinInput value synchronous update (#5142) --- apps/web-antd/src/views/_core/authentication/code-login.vue | 6 +++++- apps/web-ele/src/views/_core/authentication/code-login.vue | 6 +++++- .../web-naive/src/views/_core/authentication/code-login.vue | 6 +++++- .../ui-kit/shadcn-ui/src/components/pin-input/input.vue | 4 ++++ packages/locales/src/langs/en-US/authentication.json | 2 +- packages/locales/src/langs/zh-CN/authentication.json | 2 +- playground/src/views/_core/authentication/code-login.vue | 6 +++++- 7 files changed, 26 insertions(+), 6 deletions(-) diff --git a/apps/web-antd/src/views/_core/authentication/code-login.vue b/apps/web-antd/src/views/_core/authentication/code-login.vue index 556b273af..acfd1fd78 100644 --- a/apps/web-antd/src/views/_core/authentication/code-login.vue +++ b/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]), + }), }, ]; }); diff --git a/apps/web-ele/src/views/_core/authentication/code-login.vue b/apps/web-ele/src/views/_core/authentication/code-login.vue index 556b273af..acfd1fd78 100644 --- a/apps/web-ele/src/views/_core/authentication/code-login.vue +++ b/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]), + }), }, ]; }); diff --git a/apps/web-naive/src/views/_core/authentication/code-login.vue b/apps/web-naive/src/views/_core/authentication/code-login.vue index 556b273af..acfd1fd78 100644 --- a/apps/web-naive/src/views/_core/authentication/code-login.vue +++ b/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]), + }), }, ]; }); diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/input.vue b/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/input.vue index 7ba5cfbbc..941198d15 100644 --- a/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/input.vue +++ b/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'); diff --git a/packages/locales/src/langs/en-US/authentication.json b/packages/locales/src/langs/en-US/authentication.json index 4155f871b..f294cdd82 100644 --- a/packages/locales/src/langs/en-US/authentication.json +++ b/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", diff --git a/packages/locales/src/langs/zh-CN/authentication.json b/packages/locales/src/langs/zh-CN/authentication.json index 4533db874..147da6322 100644 --- a/packages/locales/src/langs/zh-CN/authentication.json +++ b/packages/locales/src/langs/zh-CN/authentication.json @@ -38,7 +38,7 @@ "qrcodeLogin": "扫码登录", "codeSubtitle": "请输入您的手机号码以开始管理您的项目", "code": "验证码", - "codeTip": "请输入验证码", + "codeTip": "请输入{0}位验证码", "mobile": "手机号码", "mobileTip": "请输入手机号", "mobileErrortip": "手机号码格式错误", diff --git a/playground/src/views/_core/authentication/code-login.vue b/playground/src/views/_core/authentication/code-login.vue index 556b273af..acfd1fd78 100644 --- a/playground/src/views/_core/authentication/code-login.vue +++ b/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]), + }), }, ]; });