From d7fc56e3f1f9ecaabffbf880f6d3008b77b591fa Mon Sep 17 00:00:00 2001
From: morance <morance79@163.com>
Date: Sat, 21 Oct 2023 19:44:54 +0800
Subject: [PATCH] feat(Field): required label css will active when rules
 contain required (#12376)

* chore: required label css will active when rules contain required

* chore: update snapshot
---
 .../test/__snapshots__/demo-ssr.spec.ts.snap         |  2 +-
 .../test/__snapshots__/demo.spec.ts.snap             |  2 +-
 packages/vant/src/field/Field.tsx                    |  9 ++++++++-
 packages/vant/src/field/test/index.spec.js           | 12 ++++++++++++
 .../form/test/__snapshots__/demo-ssr.spec.ts.snap    |  4 ++--
 .../src/form/test/__snapshots__/demo.spec.ts.snap    |  4 ++--
 6 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/packages/vant/src/contact-edit/test/__snapshots__/demo-ssr.spec.ts.snap b/packages/vant/src/contact-edit/test/__snapshots__/demo-ssr.spec.ts.snap
index df9992547..33ec0b423 100644
--- a/packages/vant/src/contact-edit/test/__snapshots__/demo-ssr.spec.ts.snap
+++ b/packages/vant/src/contact-edit/test/__snapshots__/demo-ssr.spec.ts.snap
@@ -8,7 +8,7 @@ exports[`should render demo and match snapshot 1`] = `
     <div class="van-contact-edit__fields">
       <div class="van-cell van-field">
         <div
-          class="van-cell__title van-field__label"
+          class="van-cell__title van-field__label van-field__label--required"
           style
         >
           <!--[-->
diff --git a/packages/vant/src/contact-edit/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/contact-edit/test/__snapshots__/demo.spec.ts.snap
index 8200abbb9..ef89c1148 100644
--- a/packages/vant/src/contact-edit/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/contact-edit/test/__snapshots__/demo.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`should render demo and match snapshot 1`] = `
   <form class="van-form van-contact-edit">
     <div class="van-contact-edit__fields">
       <div class="van-cell van-field">
-        <div class="van-cell__title van-field__label">
+        <div class="van-cell__title van-field__label van-field__label--required">
           <label
             id="van-field-label"
             for="van-field-input"
diff --git a/packages/vant/src/field/Field.tsx b/packages/vant/src/field/Field.tsx
index 792636db9..9dd5443e7 100644
--- a/packages/vant/src/field/Field.tsx
+++ b/packages/vant/src/field/Field.tsx
@@ -193,6 +193,10 @@ export default defineComponent({
       return props.modelValue;
     });
 
+    const isRequired = computed(() => {
+      return props.rules?.some((rule: FieldRule) => rule.required);
+    });
+
     const runRules = (rules: FieldRule[]) =>
       rules.reduce(
         (promise, rule) =>
@@ -696,7 +700,10 @@ export default defineComponent({
           titleStyle={labelStyle.value}
           valueClass={bem('value')}
           titleClass={[
-            bem('label', [labelAlign, { required: props.required }]),
+            bem('label', [
+              labelAlign,
+              { required: isRequired.value || props.required },
+            ]),
             props.labelClass,
           ]}
           arrowDirection={props.arrowDirection}
diff --git a/packages/vant/src/field/test/index.spec.js b/packages/vant/src/field/test/index.spec.js
index 59b47d024..a3b9aedf9 100644
--- a/packages/vant/src/field/test/index.spec.js
+++ b/packages/vant/src/field/test/index.spec.js
@@ -106,7 +106,19 @@ test('should render textarea when type is textarea', async () => {
   await later();
   expect(wrapper.html()).toMatchSnapshot();
 });
+test('should show required icon when using rules which contian required', async () => {
+  const wrapper = mount(Field, {
+    props: {
+      modelValue: '123',
+      label: '123',
+      rules: [{ required: false }],
+    },
+  });
 
+  expect(wrapper.find('.van-field__label--required').exists()).toBeFalsy();
+  await wrapper.setProps({ rules: [{ required: true }] });
+  expect(wrapper.find('.van-field__label--required').exists()).toBeTruthy();
+});
 test('should autosize textarea field', async () => {
   const wrapper = mount(Field, {
     props: {
diff --git a/packages/vant/src/form/test/__snapshots__/demo-ssr.spec.ts.snap b/packages/vant/src/form/test/__snapshots__/demo-ssr.spec.ts.snap
index a5fdf7b29..7429e8cce 100644
--- a/packages/vant/src/form/test/__snapshots__/demo-ssr.spec.ts.snap
+++ b/packages/vant/src/form/test/__snapshots__/demo-ssr.spec.ts.snap
@@ -10,7 +10,7 @@ exports[`should render demo and match snapshot 1`] = `
       <!--[-->
       <div class="van-cell van-field">
         <div
-          class="van-cell__title van-field__label"
+          class="van-cell__title van-field__label van-field__label--required"
           style
         >
           <!--[-->
@@ -38,7 +38,7 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div class="van-cell van-field">
         <div
-          class="van-cell__title van-field__label"
+          class="van-cell__title van-field__label van-field__label--required"
           style
         >
           <!--[-->
diff --git a/packages/vant/src/form/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/form/test/__snapshots__/demo.spec.ts.snap
index 34fe5e168..90c8b1586 100644
--- a/packages/vant/src/form/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/form/test/__snapshots__/demo.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`should render demo and match snapshot 1`] = `
   <form class="van-form">
     <div class="van-cell-group van-cell-group--inset">
       <div class="van-cell van-field">
-        <div class="van-cell__title van-field__label">
+        <div class="van-cell__title van-field__label van-field__label--required">
           <label
             id="van-field-label"
             for="van-field-input"
@@ -27,7 +27,7 @@ exports[`should render demo and match snapshot 1`] = `
         </div>
       </div>
       <div class="van-cell van-field">
-        <div class="van-cell__title van-field__label">
+        <div class="van-cell__title van-field__label van-field__label--required">
           <label
             id="van-field-label"
             for="van-field-input"