From b6b6e38c45b8181c217b26eaedc451dc26e6482f Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Wed, 19 Aug 2020 17:50:34 +0800
Subject: [PATCH] feat: migrate Form component

---
 components.js                             |  1 +
 src/checkbox/index.js                     |  2 ++
 src/field/index.js                        |  3 ++-
 src/form/demo/FieldTypeArea.vue           |  4 ++--
 src/form/demo/FieldTypeCalendar.vue       |  4 ++--
 src/form/demo/FieldTypeDatetimePicker.vue |  4 ++--
 src/form/demo/FieldTypePicker.vue         |  4 ++--
 src/form/index.js                         |  9 ++++++---
 src/mixins/checkbox.js                    |  3 +--
 src/mixins/field.js                       |  1 +
 src/mixins/relation.js                    |  2 ++
 vant.config.js                            | 16 ++++++++--------
 12 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/components.js b/components.js
index b2ebf7b8d..55da3420b 100644
--- a/components.js
+++ b/components.js
@@ -81,4 +81,5 @@ module.exports = [
   'goods-action-icon',
   'goods-action-button',
   'address-edit',
+  'form',
 ];
diff --git a/src/checkbox/index.js b/src/checkbox/index.js
index 4ad225a3a..880e1e286 100644
--- a/src/checkbox/index.js
+++ b/src/checkbox/index.js
@@ -1,10 +1,12 @@
 import { createNamespace } from '../utils';
+import { FieldMixin } from '../mixins/field';
 import { CheckboxMixin } from '../mixins/checkbox';
 
 const [createComponent, bem] = createNamespace('checkbox');
 
 export default createComponent({
   mixins: [
+    FieldMixin,
     CheckboxMixin({
       bem,
       role: 'checkbox',
diff --git a/src/field/index.js b/src/field/index.js
index 72bf54d42..bae9f3289 100644
--- a/src/field/index.js
+++ b/src/field/index.js
@@ -27,6 +27,7 @@ export default createComponent({
 
   inject: {
     vanForm: {
+      from: 'vanForm',
       default: null,
     },
   },
@@ -152,7 +153,7 @@ export default createComponent({
 
     formValue() {
       if (this.children && this.$slots.input) {
-        return this.children.modelValue || this.children.value;
+        return this.children.modelValue;
       }
       return this.modelValue;
     },
diff --git a/src/form/demo/FieldTypeArea.vue b/src/form/demo/FieldTypeArea.vue
index 73e96d06e..f0e0901ed 100644
--- a/src/form/demo/FieldTypeArea.vue
+++ b/src/form/demo/FieldTypeArea.vue
@@ -3,14 +3,14 @@
     readonly
     clickable
     name="area"
-    :value="value"
     :label="t('picker')"
+    :model-value="value"
     :placeholder="t('placeholder')"
     @click="showArea = true"
   >
     <template #extra>
       <van-popup
-        v-model="showArea"
+        v-model:show="showArea"
         round
         position="bottom"
         get-container="body"
diff --git a/src/form/demo/FieldTypeCalendar.vue b/src/form/demo/FieldTypeCalendar.vue
index 01d4e5d72..9d7e15a3b 100644
--- a/src/form/demo/FieldTypeCalendar.vue
+++ b/src/form/demo/FieldTypeCalendar.vue
@@ -3,14 +3,14 @@
     readonly
     clickable
     name="calendar"
-    :value="value"
     :label="t('calendar')"
+    :model-value="value"
     :placeholder="t('placeholder')"
     @click="showCalendar = true"
   >
     <template #extra>
       <van-calendar
-        v-model="showCalendar"
+        v-model:show="showCalendar"
         round
         get-container="body"
         @confirm="onConfirm"
diff --git a/src/form/demo/FieldTypeDatetimePicker.vue b/src/form/demo/FieldTypeDatetimePicker.vue
index 72629cf65..c2f311c48 100644
--- a/src/form/demo/FieldTypeDatetimePicker.vue
+++ b/src/form/demo/FieldTypeDatetimePicker.vue
@@ -3,14 +3,14 @@
     readonly
     clickable
     name="datetimePicker"
-    :value="value"
     :label="t('label')"
+    :model-value="value"
     :placeholder="t('placeholder')"
     @click="showPicker = true"
   >
     <template #extra>
       <van-popup
-        v-model="showPicker"
+        v-model:show="showPicker"
         round
         position="bottom"
         get-container="body"
diff --git a/src/form/demo/FieldTypePicker.vue b/src/form/demo/FieldTypePicker.vue
index 779a4e89b..a0b7ccb87 100644
--- a/src/form/demo/FieldTypePicker.vue
+++ b/src/form/demo/FieldTypePicker.vue
@@ -3,14 +3,14 @@
     readonly
     clickable
     name="picker"
-    :value="value"
     :label="t('picker')"
+    :model-value="value"
     :placeholder="t('placeholder')"
     @click="showPicker = true"
   >
     <template #extra>
       <van-popup
-        v-model="showPicker"
+        v-model:show="showPicker"
         round
         position="bottom"
         get-container="body"
diff --git a/src/form/index.js b/src/form/index.js
index d36b5bd8e..247b5d577 100644
--- a/src/form/index.js
+++ b/src/form/index.js
@@ -1,5 +1,5 @@
 import { createNamespace } from '../utils';
-import { sortChildren } from '../utils/vnodes';
+// import { sortChildren } from '../utils/vnodes';
 
 const [createComponent, bem] = createNamespace('form');
 
@@ -30,6 +30,8 @@ export default createComponent({
     },
   },
 
+  emits: ['submit', 'failed'],
+
   provide() {
     return {
       vanForm: this,
@@ -133,7 +135,8 @@ export default createComponent({
 
     addField(field) {
       this.fields.push(field);
-      sortChildren(this.fields, this);
+      // TODO
+      // sortChildren(this.fields, this);
     },
 
     removeField(field) {
@@ -176,7 +179,7 @@ export default createComponent({
   render() {
     return (
       <form class={bem()} onSubmit={this.onSubmit}>
-        {this.slots()}
+        {this.$slots.default?.()}
       </form>
     );
   },
diff --git a/src/mixins/checkbox.js b/src/mixins/checkbox.js
index 548a10e93..1729cbf91 100644
--- a/src/mixins/checkbox.js
+++ b/src/mixins/checkbox.js
@@ -2,12 +2,11 @@
  * Common part of Checkbox & Radio
  */
 import Icon from '../icon';
-import { FieldMixin } from './field';
 import { ChildrenMixin } from './relation';
 import { addUnit } from '../utils';
 
 export const CheckboxMixin = ({ parent, bem, role }) => ({
-  mixins: [ChildrenMixin(parent), FieldMixin],
+  mixins: [ChildrenMixin(parent)],
 
   props: {
     name: null,
diff --git a/src/mixins/field.js b/src/mixins/field.js
index 603cff7da..176e7b575 100644
--- a/src/mixins/field.js
+++ b/src/mixins/field.js
@@ -1,6 +1,7 @@
 export const FieldMixin = {
   inject: {
     vanField: {
+      from: 'vanField',
       default: null,
     },
   },
diff --git a/src/mixins/relation.js b/src/mixins/relation.js
index a0bced13b..c0bae840c 100644
--- a/src/mixins/relation.js
+++ b/src/mixins/relation.js
@@ -42,6 +42,8 @@ export function ChildrenMixin(parent, options = {}) {
 
         const children = [...this.parent.children, this];
 
+        // TODO sortChildren
+
         this.parent.children = children;
       },
     },
diff --git a/vant.config.js b/vant.config.js
index e6bbaaed5..d2e0ba17d 100644
--- a/vant.config.js
+++ b/vant.config.js
@@ -131,10 +131,10 @@ module.exports = {
                 path: 'field',
                 title: 'Field 输入框',
               },
-              // {
-              //   path: 'form',
-              //   title: 'Form 表单',
-              // },
+              {
+                path: 'form',
+                title: 'Form 表单',
+              },
               {
                 path: 'number-keyboard',
                 title: 'NumberKeyboard 数字键盘',
@@ -465,10 +465,10 @@ module.exports = {
                 path: 'field',
                 title: 'Field',
               },
-              // {
-              //   path: 'form',
-              //   title: 'Form',
-              // },
+              {
+                path: 'form',
+                title: 'Form',
+              },
               {
                 path: 'number-keyboard',
                 title: 'NumberKeyboard',