From fbd23701dec0a3d9c6cfd618d37f1125178e3531 Mon Sep 17 00:00:00 2001
From: LinaBell <15891557205@163.com>
Date: Fri, 20 Sep 2024 09:46:03 +0800
Subject: [PATCH] feat: default form validation rules applicable to selector
 components (#4442)

* fix: hover border style same as antd style when validate error

* fix: hover border style same as antd style when validate error

* 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 06e8cf13..ba811917 100644
--- a/apps/web-antd/src/adapter/form.ts
+++ b/apps/web-antd/src/adapter/form.ts
@@ -103,6 +103,12 @@ setupVbenForm<FormComponentType>({
       }
       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 5336768e..f5aa854e 100644
--- a/apps/web-ele/src/adapter/form.ts
+++ b/apps/web-ele/src/adapter/form.ts
@@ -78,6 +78,12 @@ setupVbenForm<FormComponentType>({
       }
       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 73adb916..30a86a4a 100644
--- a/apps/web-naive/src/adapter/form.ts
+++ b/apps/web-naive/src/adapter/form.ts
@@ -87,6 +87,12 @@ setupVbenForm<FormComponentType>({
       }
       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 35456c62..4f081c3e 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<never, never> & string)
   | ZodTypeAny;
@@ -323,5 +324,10 @@ export interface VbenFormAdapterOptions<
       params: any,
       ctx: Record<string, any>,
     ) => boolean | string;
+    selectRequired?: (
+      value: any,
+      params: any,
+      ctx: Record<string, any>,
+    ) => boolean | string;
   };
 }
diff --git a/packages/locales/src/langs/en-US.json b/packages/locales/src/langs/en-US.json
index 4f2d3c48..338a6a81 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 88c5cac1..816170cd 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 06e8cf13..ba811917 100644
--- a/playground/src/adapter/form.ts
+++ b/playground/src/adapter/form.ts
@@ -103,6 +103,12 @@ setupVbenForm<FormComponentType>({
       }
       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 d27f57c9..5915c2c5 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个