From 371e0be93327b726f378e000873d2fee5adfbe39 Mon Sep 17 00:00:00 2001 From: dap <15891557205@163.com> Date: Sun, 15 Sep 2024 10:20:11 +0800 Subject: [PATCH 1/4] fix: hover border style same as antd style when validate error --- packages/@core/ui-kit/form-ui/src/form-render/form-field.vue | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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 index 6c0ecbdfe62..1d1166abb09 100644 --- 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 @@ -258,7 +258,8 @@ function createComponentProps(slotProps: Record) { Date: Thu, 19 Sep 2024 10:22:30 +0800 Subject: [PATCH 2/4] fix: hover border style same as antd style when validate error --- packages/@core/ui-kit/form-ui/src/form-render/form-field.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index 1d1166abb09..70ec62e7524 100644 --- 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 @@ -258,7 +258,7 @@ function createComponentProps(slotProps: Record) { Date: Fri, 20 Sep 2024 09:18:56 +0800 Subject: [PATCH 3/4] feat(@vben-core/form-ui): Default form validation rules applicable to selector components --- apps/web-antd/src/adapter/form.ts | 6 ++++++ apps/web-ele/src/adapter/form.ts | 6 ++++++ apps/web-naive/src/adapter/form.ts | 6 ++++++ packages/@core/ui-kit/form-ui/src/types.ts | 6 ++++++ packages/locales/src/langs/en-US.json | 3 ++- packages/locales/src/langs/zh-CN.json | 3 ++- playground/src/adapter/form.ts | 6 ++++++ playground/src/views/examples/form/rules.vue | 17 ++++++++++++----- 8 files changed, 46 insertions(+), 7 deletions(-) diff --git a/apps/web-antd/src/adapter/form.ts b/apps/web-antd/src/adapter/form.ts index 06e8cf1348b..ba811917353 100644 --- a/apps/web-antd/src/adapter/form.ts +++ b/apps/web-antd/src/adapter/form.ts @@ -103,6 +103,12 @@ setupVbenForm({ } return true; }, + selectRequired: (value, _params, ctx) => { + if (value === undefined || value === null) { + return $t('formRules.selectRequired', [ctx.label]); + } + return true; + }, }, }); diff --git a/apps/web-ele/src/adapter/form.ts b/apps/web-ele/src/adapter/form.ts index 5336768ec97..f5aa854eecc 100644 --- a/apps/web-ele/src/adapter/form.ts +++ b/apps/web-ele/src/adapter/form.ts @@ -78,6 +78,12 @@ setupVbenForm({ } return true; }, + selectRequired: (value, _params, ctx) => { + if (value === undefined || value === null) { + return $t('formRules.selectRequired', [ctx.label]); + } + return true; + }, }, }); diff --git a/apps/web-naive/src/adapter/form.ts b/apps/web-naive/src/adapter/form.ts index 73adb916f7b..30a86a4a8e2 100644 --- a/apps/web-naive/src/adapter/form.ts +++ b/apps/web-naive/src/adapter/form.ts @@ -87,6 +87,12 @@ setupVbenForm({ } return true; }, + selectRequired: (value, _params, ctx) => { + if (value === undefined || value === null) { + return $t('formRules.selectRequired', [ctx.label]); + } + return true; + }, }, }); diff --git a/packages/@core/ui-kit/form-ui/src/types.ts b/packages/@core/ui-kit/form-ui/src/types.ts index 35456c621a2..4f081c3e216 100644 --- a/packages/@core/ui-kit/form-ui/src/types.ts +++ b/packages/@core/ui-kit/form-ui/src/types.ts @@ -58,6 +58,7 @@ export type CustomRenderType = (() => Component | string) | string; export type FormSchemaRuleType = | 'required' + | 'selectRequired' | null | (Record & string) | ZodTypeAny; @@ -323,5 +324,10 @@ export interface VbenFormAdapterOptions< params: any, ctx: Record, ) => boolean | string; + selectRequired?: ( + value: any, + params: any, + ctx: Record, + ) => boolean | string; }; } diff --git a/packages/locales/src/langs/en-US.json b/packages/locales/src/langs/en-US.json index 4f2d3c48c7e..338a6a81fcb 100644 --- a/packages/locales/src/langs/en-US.json +++ b/packages/locales/src/langs/en-US.json @@ -55,7 +55,8 @@ } }, "formRules": { - "required": "Please enter {0}" + "required": "Please enter {0}", + "selectRequired": "Please select {0}" }, "widgets": { "document": "Document", diff --git a/packages/locales/src/langs/zh-CN.json b/packages/locales/src/langs/zh-CN.json index 88c5cac1e25..816170cdf82 100644 --- a/packages/locales/src/langs/zh-CN.json +++ b/packages/locales/src/langs/zh-CN.json @@ -55,7 +55,8 @@ } }, "formRules": { - "required": "请输入{0}" + "required": "请输入{0}", + "selectRequired": "请选择{0}" }, "widgets": { "document": "文档", diff --git a/playground/src/adapter/form.ts b/playground/src/adapter/form.ts index 06e8cf1348b..ba811917353 100644 --- a/playground/src/adapter/form.ts +++ b/playground/src/adapter/form.ts @@ -103,6 +103,12 @@ setupVbenForm({ } return true; }, + selectRequired: (value, _params, ctx) => { + if (value === undefined || value === null) { + return $t('formRules.selectRequired', [ctx.label]); + } + return true; + }, }, }); diff --git a/playground/src/views/examples/form/rules.vue b/playground/src/views/examples/form/rules.vue index d27f57c9aa1..5915c2c5083 100644 --- a/playground/src/views/examples/form/rules.vue +++ b/playground/src/views/examples/form/rules.vue @@ -102,7 +102,7 @@ const [Form, formApi] = useVbenForm({ defaultValue: undefined, fieldName: 'options', label: '下拉选', - rules: 'required', + rules: 'selectRequired', }, { component: 'RadioGroup', @@ -120,7 +120,7 @@ const [Form, formApi] = useVbenForm({ }, fieldName: 'radioGroup', label: '单选组', - rules: 'required', + rules: 'selectRequired', }, { component: 'CheckboxGroup', @@ -139,7 +139,7 @@ const [Form, formApi] = useVbenForm({ }, fieldName: 'checkboxGroup', label: '多选组', - rules: 'required', + rules: 'selectRequired', }, { component: 'Checkbox', @@ -150,14 +150,21 @@ const [Form, formApi] = useVbenForm({ default: () => ['我已阅读并同意'], }; }, - rules: 'required', + rules: 'selectRequired', }, { component: 'DatePicker', defaultValue: undefined, fieldName: 'datePicker', label: '日期选择框', - rules: 'required', + rules: 'selectRequired', + }, + { + component: 'RangePicker', + defaultValue: undefined, + fieldName: 'rangePicker', + label: '区间选择框', + rules: 'selectRequired', }, ], // 大屏一行显示3个，中屏一行显示2个，小屏一行显示1个 From 471fea21a952dc4478c0974b1c90fa0572030e70 Mon Sep 17 00:00:00 2001 From: dap <15891557205@163.com> Date: Fri, 20 Sep 2024 10:47:35 +0800 Subject: [PATCH 4/4] fix: Missing the default required label style for components such as select --- packages/@core/ui-kit/form-ui/src/form-render/form-field.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index bcc926416b3..dd3663876a8 100644 --- 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 @@ -95,7 +95,7 @@ const shouldRequired = computed(() => { } if (isString(currentRules.value)) { - return currentRules.value === 'required'; + return ['required', 'selectRequired'].includes(currentRules.value); } let isOptional = currentRules?.value?.isOptional?.();