From d5b8715b4276a7977c1b14b110ac5a09f94aedbd Mon Sep 17 00:00:00 2001
From: Marvin Gui <63292605+yi-boide@users.noreply.github.com>
Date: Fri, 17 Nov 2023 17:07:58 +0800
Subject: [PATCH] =?UTF-8?q?feat(form-item):=20required=20=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E6=94=AF=E6=8C=81=E7=94=B1=20rules=20=E6=8E=A7?=
 =?UTF-8?q?=E5=88=B6=20(#2637)=20(#2640)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/dentry/pages/form/index.vue              |  3 ++-
 src/packages/__VUE/form/__tests__/index.spec.ts  |  6 ++++--
 src/packages/__VUE/form/demo.vue                 |  8 ++------
 src/packages/__VUE/form/doc.en-US.md             |  3 ++-
 src/packages/__VUE/form/doc.md                   |  3 ++-
 src/packages/__VUE/form/doc.taro.md              |  3 ++-
 src/packages/__VUE/formitem/index.taro.vue       | 16 +++++++++++++---
 src/packages/__VUE/formitem/index.vue            | 16 +++++++++++++---
 8 files changed, 40 insertions(+), 18 deletions(-)

diff --git a/packages/nutui-taro-demo/src/dentry/pages/form/index.vue b/packages/nutui-taro-demo/src/dentry/pages/form/index.vue
index e709a55d91..f11c15f9d5 100644
--- a/packages/nutui-taro-demo/src/dentry/pages/form/index.vue
+++ b/packages/nutui-taro-demo/src/dentry/pages/form/index.vue
@@ -48,6 +48,7 @@
       :model-value="formData"
       :rules="{
         name: [
+          { required: true, message: '请填写姓名' },
           {
             message: 'Name should be at least two characters',
             validator: nameLengthValidator
@@ -55,7 +56,7 @@
         ]
       }"
     >
-      <nut-form-item label="姓名" prop="name" required :rules="[{ required: true, message: '请填写姓名' }]">
+      <nut-form-item label="姓名" prop="name">
         <nut-input
           v-model="formData.name"
           class="nut-input-text"
diff --git a/src/packages/__VUE/form/__tests__/index.spec.ts b/src/packages/__VUE/form/__tests__/index.spec.ts
index fa7ebdb607..8c7a1331de 100644
--- a/src/packages/__VUE/form/__tests__/index.spec.ts
+++ b/src/packages/__VUE/form/__tests__/index.spec.ts
@@ -190,8 +190,8 @@ describe('Form', () => {
         'nut-form-item': FormItem
       },
       template: `
-      <nut-form :model-value="formData" ref="ruleForm">
-        <nut-form-item label="姓名" prop="name" required :rules="[{ required: true, message: '请填写姓名' }]">
+      <nut-form :model-value="formData" ref="ruleForm" :rules="{name:[{ required: true, message: '请填写姓名' }]}">
+        <nut-form-item label="姓名" prop="name">
           <input
             class="nut-input-text"
             v-model="formData.name"
@@ -231,6 +231,8 @@ describe('Form', () => {
       }
     });
 
+    const form1 = wrapper.find('.nut-cell__title');
+    expect(form1.classes()).toContain('required');
     // .nut-input-text
     const formitem: DOMWrapper<Element> = wrapper.find('.nut-input-text');
     expect(formitem.exists()).toBe(true);
diff --git a/src/packages/__VUE/form/demo.vue b/src/packages/__VUE/form/demo.vue
index 71f347c8ed..133009c515 100644
--- a/src/packages/__VUE/form/demo.vue
+++ b/src/packages/__VUE/form/demo.vue
@@ -67,6 +67,7 @@
       :model-value="formData"
       :rules="{
         name: [
+          { required: true, message: translate('nameTip') },
           {
             message: '名称两个字以上',
             validator: nameLengthValidator
@@ -74,12 +75,7 @@
         ]
       }"
     >
-      <nut-form-item
-        :label="translate('name')"
-        prop="name"
-        required
-        :rules="[{ required: true, message: translate('nameTip') }]"
-      >
+      <nut-form-item :label="translate('name')" prop="name">
         <nut-input
           v-model="formData.name"
           class="nut-input-text"
diff --git a/src/packages/__VUE/form/doc.en-US.md b/src/packages/__VUE/form/doc.en-US.md
index b411cf118f..c1e471b035 100644
--- a/src/packages/__VUE/form/doc.en-US.md
+++ b/src/packages/__VUE/form/doc.en-US.md
@@ -144,6 +144,7 @@ const dynamicForm = {
     :model-value="formData"
     :rules="{
       name: [
+        { required: true, message: 'Please enter your name' },
         {
           message: 'Name should be at least two characters',
           validator: nameLengthValidator
@@ -152,7 +153,7 @@ const dynamicForm = {
     }"
     ref="ruleForm"
   >
-    <nut-form-item label="Name" prop="name" required :rules="[{ required: true, message: 'Please enter your name' }]">
+    <nut-form-item label="Name" prop="name">
       <nut-input
         class="nut-input-text"
         @blur="customBlurValidate('name')"
diff --git a/src/packages/__VUE/form/doc.md b/src/packages/__VUE/form/doc.md
index 14e7e6f57a..1c5fca35dc 100644
--- a/src/packages/__VUE/form/doc.md
+++ b/src/packages/__VUE/form/doc.md
@@ -139,6 +139,7 @@ const dynamicForm = {
     :model-value="formData"
     :rules="{
       name: [
+        { required: true, message: '请填写姓名' },
         {
           message: 'name 至少两个字符',
           validator: nameLengthValidator
@@ -147,7 +148,7 @@ const dynamicForm = {
     }"
     ref="ruleForm"
   >
-    <nut-form-item label="姓名" prop="name" required :rules="[{ required: true, message: '请填写姓名' }]">
+    <nut-form-item label="姓名" prop="name">
       <nut-input
         class="nut-input-text"
         @blur="customBlurValidate('name')"
diff --git a/src/packages/__VUE/form/doc.taro.md b/src/packages/__VUE/form/doc.taro.md
index 4066d5452b..d32318e5e6 100644
--- a/src/packages/__VUE/form/doc.taro.md
+++ b/src/packages/__VUE/form/doc.taro.md
@@ -139,6 +139,7 @@ const dynamicForm = {
     :model-value="formData"
     :rules="{
       name: [
+        { required: true, message: '请填写姓名' },
         {
           message: 'name 至少两个字符',
           validator: nameLengthValidator
@@ -147,7 +148,7 @@ const dynamicForm = {
     }"
     ref="ruleForm"
   >
-    <nut-form-item label="姓名" prop="name" required :rules="[{ required: true, message: '请填写姓名' }]">
+    <nut-form-item label="姓名" prop="name">
       <nut-input
         class="nut-input-text"
         @blur="customBlurValidate('name')"
diff --git a/src/packages/__VUE/formitem/index.taro.vue b/src/packages/__VUE/formitem/index.taro.vue
index 2fbc231b2b..30bc495b68 100644
--- a/src/packages/__VUE/formitem/index.taro.vue
+++ b/src/packages/__VUE/formitem/index.taro.vue
@@ -8,7 +8,7 @@
       v-if="label || getSlots('label')"
       class="nut-cell__title nut-form-item__label"
       :style="labelStyle"
-      :class="{ required: required }"
+      :class="{ required: isRequired }"
     >
       <slot name="label">{{ label }}</slot>
     </view>
@@ -92,7 +92,17 @@ export default create({
         return { parent };
       }
     };
-    useParent();
+    const { parent: parentObj } = useParent();
+    const isRequired = computed(() => {
+      const rules = parentObj.props?.rules;
+      let formRequired = false;
+      for (const key in rules) {
+        if (Object.prototype.hasOwnProperty.call(rules, key) && key === props.prop && Array.isArray(rules[key])) {
+          formRequired = rules[key].some((rule: FormItemRule) => rule.required);
+        }
+      }
+      return props.required || props.rules.some((rule) => rule.required) || formRequired;
+    });
 
     const parent = inject('formErrorTip') as any;
     provide('form', {
@@ -116,7 +126,7 @@ export default create({
       } as CSSProperties;
     });
     const getSlots = (name: string) => slots[name];
-    return { parent, labelStyle, bodyStyle, errorMessageStyle, getSlots };
+    return { parent, labelStyle, bodyStyle, errorMessageStyle, getSlots, isRequired };
   }
 });
 </script>
diff --git a/src/packages/__VUE/formitem/index.vue b/src/packages/__VUE/formitem/index.vue
index 408b7fb1c3..396cf90602 100644
--- a/src/packages/__VUE/formitem/index.vue
+++ b/src/packages/__VUE/formitem/index.vue
@@ -8,7 +8,7 @@
       v-if="label || getSlots('label')"
       class="nut-cell__title nut-form-item__label"
       :style="labelStyle"
-      :class="{ required: required }"
+      :class="{ required: isRequired }"
     >
       <slot name="label">{{ label }}</slot>
     </view>
@@ -92,7 +92,17 @@ export default create({
         return { parent };
       }
     };
-    useParent();
+    const { parent: parentObj } = useParent();
+    const isRequired = computed(() => {
+      const rules = parentObj.props?.rules;
+      let formRequired = false;
+      for (const key in rules) {
+        if (Object.prototype.hasOwnProperty.call(rules, key) && key === props.prop && Array.isArray(rules[key])) {
+          formRequired = rules[key].some((rule: FormItemRule) => rule.required);
+        }
+      }
+      return props.required || props.rules.some((rule) => rule.required) || formRequired;
+    });
 
     const parent = inject('formErrorTip') as any;
     provide('form', {
@@ -116,7 +126,7 @@ export default create({
       } as CSSProperties;
     });
     const getSlots = (name: string) => slots[name];
-    return { parent, labelStyle, bodyStyle, errorMessageStyle, getSlots };
+    return { parent, labelStyle, bodyStyle, errorMessageStyle, getSlots, isRequired };
   }
 });
 </script>