feat: udpate formmodel

Author: undefined

components/_util/vnode.js

@@ -1,10 +1,10 @@
 import { filterEmpty } from './props-util';
 import { cloneVNode } from 'vue';
 
-export function cloneElement(n, nodeProps = {}, override = true) {
-  let ele = n;
-  if (Array.isArray(n)) {
-    ele = filterEmpty(n)[0];
+export function cloneElement(vnode, nodeProps = {}, override = true) {
+  let ele = vnode;
+  if (Array.isArray(vnode)) {
+    ele = filterEmpty(vnode)[0];
   }
   if (!ele) {
     return null;
@@ -15,3 +15,7 @@ export function cloneElement(n, nodeProps = {}, override = true) {
   node.props = override ? { ...node.props, ...nodeProps } : node.props;
   return node;
 }
+
+export function cloneVNodes(vnodes, nodeProps = {}, override = true) {
+  return vnodes.map(vnode => cloneElement(vnode, nodeProps, override));
+}

components/form-model/Form.jsx

@@ -1,10 +1,11 @@
+import { inject, provide } from 'vue';
 import PropTypes from '../_util/vue-types';
 import classNames from 'classnames';
 import { ColProps } from '../grid/Col';
 import isRegExp from 'lodash/isRegExp';
 import warning from '../_util/warning';
 import FormItem from './FormItem';
-import { initDefaultProps, getListeners } from '../_util/props-util';
+import { initDefaultProps, getListeners, getSlot } from '../_util/props-util';
 import { ConfigConsumerProps } from '../config-provider';
 
 export const FormProps = {
@@ -48,6 +49,7 @@ export const ValidationRule = {
 
 const Form = {
   name: 'AFormModel',
+  inheritAttrs: false,
   props: initDefaultProps(FormProps, {
     layout: 'horizontal',
     hideRequiredMark: false,
@@ -56,15 +58,14 @@ const Form = {
   Item: FormItem,
   created() {
     this.fields = [];
+    this.form = undefined;
+    provide('FormContext', this);
   },
-  provide() {
+  setup() {
     return {
-      FormContext: this,
+      configProvider: inject('configProvider', ConfigConsumerProps),
     };
   },
-  inject: {
-    configProvider: { default: () => ConfigConsumerProps },
-  },
   watch: {
     rules() {
       if (this.validateOnRuleChange) {
@@ -164,19 +165,20 @@ const Form = {
   },
 
   render() {
-    const { prefixCls: customizePrefixCls, hideRequiredMark, layout, onSubmit, $slots } = this;
+    const { prefixCls: customizePrefixCls, hideRequiredMark, layout, onSubmit } = this;
     const getPrefixCls = this.configProvider.getPrefixCls;
     const prefixCls = getPrefixCls('form', customizePrefixCls);
+    const { class: className, onSubmit: originSubmit, ...restProps } = this.$attrs;
 
-    const formClassName = classNames(prefixCls, {
+    const formClassName = classNames(prefixCls, className, {
       [`${prefixCls}-horizontal`]: layout === 'horizontal',
       [`${prefixCls}-vertical`]: layout === 'vertical',
       [`${prefixCls}-inline`]: layout === 'inline',
       [`${prefixCls}-hide-required-mark`]: hideRequiredMark,
     });
     return (
-      <form onSubmit={onSubmit} class={formClassName}>
-        {$slots.default}
+      <form onSubmit={onSubmit} class={formClassName} {...restProps}>
+        {getSlot(this)}
       </form>
     );
   },

components/form-model/FormItem.jsx

@@ -1,14 +1,15 @@
+import { inject } from 'vue';
 import AsyncValidator from 'async-validator';
 import cloneDeep from 'lodash/cloneDeep';
 import PropTypes from '../_util/vue-types';
 import { ColProps } from '../grid/Col';
 import {
   initDefaultProps,
-  getComponentFromProp,
+  getComponent,
   getOptionProps,
   getEvents,
-  filterEmpty,
   isValidElement,
+  getSlot,
 } from '../_util/props-util';
 import BaseMixin from '../_util/BaseMixin';
 import { ConfigConsumerProps } from '../config-provider';
@@ -63,15 +64,18 @@ export const FormItemProps = {
 
 export default {
   name: 'AFormModelItem',
-  __ANT_NEW_FORM_ITEM: true,
   mixins: [BaseMixin],
+  inheritAttrs: false,
+  __ANT_NEW_FORM_ITEM: true,
   props: initDefaultProps(FormItemProps, {
     hasFeedback: false,
     autoLink: true,
   }),
-  inject: {
-    configProvider: { default: () => ConfigConsumerProps },
-    FormContext: { default: () => ({}) },
+  setup() {
+    return {
+      configProvider: inject('configProvider', ConfigConsumerProps),
+      FormContext: inject('FormContext', {}),
+    };
   },
   data() {
     return {
@@ -216,43 +220,39 @@ export default {
     },
   },
   render() {
-    const { $slots, $scopedSlots } = this;
-    const props = getOptionProps(this);
-    const label = getComponentFromProp(this, 'label');
-    const extra = getComponentFromProp(this, 'extra');
-    const help = getComponentFromProp(this, 'help');
+    const { autoLink, ...props } = getOptionProps(this);
+    const label = getComponent(this, 'label');
+    const extra = getComponent(this, 'extra');
+    const help = getComponent(this, 'help');
     const formProps = {
-      props: {
-        ...props,
-        label,
-        extra,
-        validateStatus: this.validateState,
-        help: this.validateMessage || help,
-        required: this.isRequired || props.required,
-      },
+      ...this.$attrs,
+      ...props,
+      label,
+      extra,
+      validateStatus: this.validateState,
+      help: this.validateMessage || help,
+      required: this.isRequired || props.required,
     };
-    const children = filterEmpty($scopedSlots.default ? $scopedSlots.default() : $slots.default);
+    const children = getSlot(this);
     let firstChildren = children[0];
-    if (this.prop && this.autoLink && isValidElement(firstChildren)) {
+    if (this.prop && autoLink && isValidElement(firstChildren)) {
       const originalEvents = getEvents(firstChildren);
-      const originalBlur = originalEvents.blur;
-      const originalChange = originalEvents.change;
+      const originalBlur = originalEvents.onBlur;
+      const originalChange = originalEvents.onChange;
       firstChildren = cloneElement(firstChildren, {
-        on: {
-          blur: (...args) => {
-            originalBlur && originalBlur(...args);
-            this.onFieldBlur();
-          },
-          change: (...args) => {
-            if (Array.isArray(originalChange)) {
-              for (let i = 0, l = originalChange.length; i < l; i++) {
-                originalChange[i](...args);
-              }
-            } else if (originalChange) {
-              originalChange(...args);
+        onBlur: (...args) => {
+          originalBlur && originalBlur(...args);
+          this.onFieldBlur();
+        },
+        onChange: (...args) => {
+          if (Array.isArray(originalChange)) {
+            for (let i = 0, l = originalChange.length; i < l; i++) {
+              originalChange[i](...args);
             }
-            this.onFieldChange();
-          },
+          } else if (originalChange) {
+            originalChange(...args);
+          }
+          this.onFieldChange();
         },
       });
     }

components/form-model/index.jsx

@@ -1,20 +1,12 @@
-import Vue from 'vue';
 import Form from './Form';
-import ref from 'vue-ref';
-import FormDecoratorDirective from '../_util/FormDecoratorDirective';
-import Base from '../base';
-
-Vue.use(ref, { name: 'ant-ref' });
-Vue.use(FormDecoratorDirective);
 
 export { FormProps, ValidationRule } from './Form';
 export { FormItemProps } from './FormItem';
 
 /* istanbul ignore next */
-Form.install = function(Vue) {
-  Vue.use(Base);
-  Vue.component(Form.name, Form);
-  Vue.component(Form.Item.name, Form.Item);
+Form.install = function(app) {
+  app.component(Form.name, Form);
+  app.component(Form.Item.name, Form.Item);
 };
 
 export default Form;