feat: migrate Form component

components.js

@@ -81,4 +81,5 @@ module.exports = [
   'goods-action-icon',
   'goods-action-button',
   'address-edit',
+  'form',
 ];

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',

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;
     },

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"

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"

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"

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"

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>
     );
   },

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,

src/mixins/field.js

@@ -1,6 +1,7 @@
 export const FieldMixin = {
   inject: {
     vanField: {
+      from: 'vanField',
       default: null,
     },
   },

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;
       },
     },

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',