@form-create/element-ui 2.5.12 → 3.0.0-alpha.2

package/dist/form-create.js

@@ -1,62 +1,56 @@
 /*!
- * @form-create/element-ui v2.5.12
+ * @form-create/element-ui v3.0.0-alpha.2
  * (c) 2018-2021 xaboy
  * Github https://github.com/xaboy/form-create
  * Released under the MIT License.
  */
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'vue'], factory) :
-  (global = global || self, factory(global.formCreate = {}, global.Vue));
-}(this, (function (exports, Vue) { 'use strict';
-
-  Vue = Vue && Object.prototype.hasOwnProperty.call(Vue, 'default') ? Vue['default'] : Vue;
-
-  function _extends() {
-    return _extends = Object.assign || function (a) {
-      for (var b, c = 1; c < arguments.length; c++) {
-        for (var d in b = arguments[c], b) {
-          Object.prototype.hasOwnProperty.call(b, d) && (a[d] = b[d]);
-        }
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('element-plus')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'element-plus'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.formCreate = {}, global.Vue, global.ElementPlus));
+})(this, (function (exports, vue, ElementPlus) { 'use strict';
+
+  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+  var ElementPlus__default = /*#__PURE__*/_interopDefaultLegacy(ElementPlus);
+
+  function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+
+    if (Object.getOwnPropertySymbols) {
+      var symbols = Object.getOwnPropertySymbols(object);
+
+      if (enumerableOnly) {
+        symbols = symbols.filter(function (sym) {
+          return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+        });
       }
 
-      return a;
-    }, _extends.apply(this, arguments);
+      keys.push.apply(keys, symbols);
+    }
+
+    return keys;
   }
 
-  var normalMerge = ["attrs", "props", "domProps"],
-      toArrayMerge = ["class", "style", "directives"],
-      functionalMerge = ["on", "nativeOn"],
-      mergeJsxProps = function mergeJsxProps(a) {
-    return a.reduce(function (c, a) {
-      for (var b in a) {
-        if (!c[b]) c[b] = a[b];else if (-1 !== normalMerge.indexOf(b)) c[b] = _extends({}, c[b], a[b]);else if (-1 !== toArrayMerge.indexOf(b)) {
-          var d = c[b] instanceof Array ? c[b] : [c[b]],
-              e = a[b] instanceof Array ? a[b] : [a[b]];
-          c[b] = d.concat(e);
-        } else if (-1 !== functionalMerge.indexOf(b)) {
-          for (var f in a[b]) {
-            if (c[b][f]) {
-              var g = c[b][f] instanceof Array ? c[b][f] : [c[b][f]],
-                  h = a[b][f] instanceof Array ? a[b][f] : [a[b][f]];
-              c[b][f] = g.concat(h);
-            } else c[b][f] = a[b][f];
-          }
-        } else if ("hook" == b) for (var i in a[b]) {
-          c[b][i] = c[b][i] ? mergeFn(c[b][i], a[b][i]) : a[b][i];
-        } else c[b] = a[b];
-      }
+  function _objectSpread2(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i] != null ? arguments[i] : {};
 
-      return c;
-    }, {});
-  },
-      mergeFn = function mergeFn(a, b) {
-    return function () {
-      a && a.apply(this, arguments), b && b.apply(this, arguments);
-    };
-  };
+      if (i % 2) {
+        ownKeys(Object(source), true).forEach(function (key) {
+          _defineProperty(target, key, source[key]);
+        });
+      } else if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+      } else {
+        ownKeys(Object(source)).forEach(function (key) {
+          Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+      }
+    }
 
-  var helper = mergeJsxProps;
+    return target;
+  }
 
   function _typeof(obj) {
     "@babel/helpers - typeof";
@@ -95,40 +89,6 @@
     return obj;
   }
 
-  function ownKeys(object, enumerableOnly) {
-    var keys = Object.keys(object);
-
-    if (Object.getOwnPropertySymbols) {
-      var symbols = Object.getOwnPropertySymbols(object);
-      if (enumerableOnly) symbols = symbols.filter(function (sym) {
-        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-      });
-      keys.push.apply(keys, symbols);
-    }
-
-    return keys;
-  }
-
-  function _objectSpread2(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i] != null ? arguments[i] : {};
-
-      if (i % 2) {
-        ownKeys(Object(source), true).forEach(function (key) {
-          _defineProperty(target, key, source[key]);
-        });
-      } else if (Object.getOwnPropertyDescriptors) {
-        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-      } else {
-        ownKeys(Object(source)).forEach(function (key) {
-          Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-        });
-      }
-    }
-
-    return target;
-  }
-
   function _inherits(subClass, superClass) {
     if (typeof superClass !== "function" && superClass !== null) {
       throw new TypeError("Super expression must either be null or a function");
@@ -184,6 +144,8 @@
   function _possibleConstructorReturn(self, call) {
     if (call && (typeof call === "object" || typeof call === "function")) {
       return call;
+    } else if (call !== void 0) {
+      throw new TypeError("Derived constructors may only return object or undefined");
     }
 
     return _assertThisInitialized(self);
@@ -217,7 +179,7 @@
   }
 
   function _iterableToArray(iter) {
-    if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
   }
 
   function _unsupportedIterableToArray(o, minLen) {
@@ -251,15 +213,12 @@
     }, []);
   }
 
-  var NAME = 'fcCheckbox';
-  var Checkbox = {
-    name: NAME,
+  var NAME$a = 'fcCheckbox';
+  var Checkbox = vue.defineComponent({
+    name: NAME$a,
+    inheritAttrs: false,
     props: {
-      formCreateInject: {
-        type: Object,
-        required: true
-      },
-      value: {
+      modelValue: {
         type: Array,
         "default": function _default() {
           return [];
@@ -267,80 +226,126 @@
       },
       type: String
     },
-    watch: {
-      value: function value() {
-        this.update();
-      }
-    },
-    data: function data() {
-      return {
-        trueValue: []
-      };
-    },
-    computed: {
-      options: function options() {
-        var opt = this.formCreateInject.options;
-        return Array.isArray(opt) ? opt : [];
-      }
-    },
-    methods: {
-      onInput: function onInput(n) {
-        this.$emit('input', this.options.filter(function (opt) {
-          return n.indexOf(opt.label) !== -1;
-        }).map(function (opt) {
-          return opt.value;
-        }).filter(function (v) {
-          return v !== undefined;
-        }));
-      },
-      update: function update() {
-        var _this = this;
+    emits: ['update:modelValue'],
+    setup: function setup(props, _) {
+      var _toRefs = vue.toRefs(vue.inject('formCreateInject')),
+          options = _toRefs.options;
+
+      var trueValue = vue.ref([]);
+      var value = vue.toRef(props, 'modelValue');
+
+      var _options = vue.computed(function () {
+        return Array.isArray(options) ? options : [];
+      });
 
-        this.trueValue = this.value ? this.options.filter(function (opt) {
-          return _this.value.indexOf(opt.value) !== -1;
+      var update = function update() {
+        trueValue.value = value.value ? _options.value.filter(function (opt) {
+          return value.value.indexOf(opt.value) !== -1;
         }).map(function (option) {
           return option.label;
         }) : [];
-      }
+      };
+
+      update();
+      return {
+        options: _options,
+        trueValue: trueValue,
+        value: value,
+        onInput: function onInput(n) {
+          _.emit('update:modelValue', _options.value.filter(function (opt) {
+            return n.indexOf(opt.label) !== -1;
+          }).map(function (opt) {
+            return opt.value;
+          }).filter(function (v) {
+            return v !== undefined;
+          }));
+        },
+        update: update
+      };
     },
-    created: function created() {
-      this.update();
+    watch: {
+      modelValue: function modelValue() {
+        this.update();
+      }
     },
     render: function render() {
-      var _this2 = this;
-
-      var h = arguments[0];
-      return h("ElCheckboxGroup", helper([{}, this.formCreateInject.prop, {
-        "attrs": {
-          "value": this.trueValue
-        },
-        "on": {
-          "input": this.onInput
+      var _this$$slots$default,
+          _this$$slots,
+          _this = this;
+
+      var name = this.type === 'button' ? 'ElCheckboxButton' : 'ElCheckbox';
+      var Type = vue.resolveComponent(name);
+      return vue.createVNode(vue.resolveComponent("ElCheckboxGroup"), vue.mergeProps(this.$attrs, {
+        "modelValue": this.trueValue,
+        "onUpdate:modelValue": this.onInput
+      }), _objectSpread2({
+        "default": function _default() {
+          return [_this.options.map(function (opt, index) {
+            var props = _objectSpread2({}, opt);
+
+            delete props.value;
+            return vue.createVNode(Type, vue.mergeProps(props, {
+              "key": name + index + opt.value
+            }), null);
+          }), (_this$$slots$default = (_this$$slots = _this.$slots)["default"]) === null || _this$$slots$default === void 0 ? void 0 : _this$$slots$default.call(_this$$slots)];
         }
-      }]), [this.options.map(function (opt, index) {
-        var props = _objectSpread2({}, opt);
-
-        var Type = _this2.type === 'button' ? 'ElCheckboxButton' : 'ElCheckbox';
-        delete props.value;
-        return h(Type, {
-          "props": _objectSpread2({}, props),
-          "key": Type + index + opt.value
-        });
-      }), getSlot(this.$slots)]);
+      }, getSlot(this.$slots, ['default'])));
     }
-  };
+  });
 
   function toArray(value) {
     return Array.isArray(value) ? value : [null, undefined, ''].indexOf(value) > -1 ? [] : [value];
   }
 
+  // https://github.com/developit/mitt
+  function Mitt(all) {
+    all = all || new Map();
+    var mitt = {
+      $on: function $on(type, handler) {
+        var handlers = all.get(type);
+        var added = handlers && handlers.push(handler);
+
+        if (!added) {
+          all.set(type, [handler]);
+        }
+      },
+      $once: function $once(type, handler) {
+        handler._once = true;
+        mitt.$on(type, handler);
+      },
+      $off: function $off(type, handler) {
+        var handlers = all.get(type);
+
+        if (handlers) {
+          handlers.splice(handlers.indexOf(handler) >>> 0, 1);
+        }
+      },
+      $emit: function $emit(type) {
+        for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+          args[_key - 1] = arguments[_key];
+        }
+
+        (all.get(type) || []).slice().map(function (handler) {
+          if (handler._once) {
+            mitt.$off(type, handler);
+            delete handler._once;
+          }
+
+          handler.apply(void 0, args);
+        });
+        (all.get('*') || []).slice().map(function (handler) {
+          handler(type, args);
+        });
+      }
+    };
+    return mitt;
+  }
+
   function styleInject(css, ref) {
-    if (ref === void 0) ref = {};
+    if ( ref === void 0 ) ref = {};
     var insertAt = ref.insertAt;
 
-    if (!css || typeof document === 'undefined') {
-      return;
-    }
+    if (!css || typeof document === 'undefined') { return; }
 
     var head = document.head || document.getElementsByTagName('head')[0];
     var style = document.createElement('style');
@@ -363,17 +368,17 @@
     }
   }
 
-  var css_248z = "._fc-frame .fc-files img {\n    width: 100%;\n    height: 100%;\n    display: inline-block;\n    vertical-align: top;\n}\n\n._fc-frame .fc-upload-btn {\n    border: 1px dashed #c0ccda;\n    cursor: pointer;\n}\n\n._fc-frame .fc-upload-cover {\n    opacity: 0;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background: rgba(0, 0, 0, .6);\n    -webkit-transition: opacity .3s;\n    -o-transition: opacity .3s;\n    transition: opacity .3s;\n}\n\n._fc-frame .fc-upload-cover i {\n    color: #fff;\n    font-size: 20px;\n    cursor: pointer;\n    margin: 0 2px;\n}\n\n._fc-frame .fc-files:hover .fc-upload-cover {\n    opacity: 1;\n}\n\n._fc-frame .el-upload {\n    display: block;\n}\n\n._fc-frame .fc-upload-btn, .fc-files {\n    display: inline-block;\n    width: 58px;\n    height: 58px;\n    text-align: center;\n    line-height: 58px;\n    border: 1px solid #c0ccda;\n    border-radius: 4px;\n    overflow: hidden;\n    background: #fff;\n    position: relative;\n    -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, .1);\n    box-shadow: 2px 2px 5px rgba(0, 0, 0, .1);\n    margin-right: 4px;\n    -webkit-box-sizing: border-box;\n    box-sizing: border-box;\n}\n";
-  styleInject(css_248z);
+  var css_248z$2 = "._fc-frame .fc-files img{display:inline-block;height:100%;vertical-align:top;width:100%}._fc-frame .fc-upload-btn{border:1px dashed #c0ccda;cursor:pointer}._fc-frame .fc-upload-cover{background:rgba(0,0,0,.6);bottom:0;left:0;opacity:0;position:absolute;right:0;top:0;-webkit-transition:opacity .3s;-o-transition:opacity .3s;transition:opacity .3s}._fc-frame .fc-upload-cover i{color:#fff;cursor:pointer;font-size:20px;margin:0 2px}._fc-frame .fc-files:hover .fc-upload-cover{opacity:1}._fc-frame .el-upload{display:block}._fc-frame .fc-upload-btn,.fc-files{background:#fff;border:1px solid #c0ccda;border-radius:4px;-webkit-box-shadow:2px 2px 5px rgba(0,0,0,.1);box-shadow:2px 2px 5px rgba(0,0,0,.1);-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;height:58px;line-height:58px;margin-right:4px;overflow:hidden;position:relative;text-align:center;width:58px}";
+  styleInject(css_248z$2);
 
-  var NAME$1 = 'fcFrame';
-  var Frame = {
-    name: NAME$1,
+  function _isSlot$1(s) {
+    return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
+  }
+
+  var NAME$9 = 'fcFrame';
+  var Frame = vue.defineComponent({
+    name: NAME$9,
     props: {
-      formCreateInject: {
-        type: Object,
-        required: true
-      },
       type: {
         type: String,
         "default": 'input'
@@ -416,10 +421,7 @@
         "default": '关闭'
       },
       modalTitle: String,
-      handleIcon: {
-        type: [String, Boolean],
-        "default": undefined
-      },
+      handleIcon: [String, Boolean],
       title: String,
       allowRemove: {
         type: Boolean,
@@ -449,23 +451,15 @@
         type: Function,
         "default": function _default() {}
       },
-      onHandle: {
-        type: Function,
-        "default": function _default(src) {
-          this.previewImage = this.getSrc(src);
-          this.previewVisible = true;
-        }
-      },
+      onHandle: Function,
       modal: {
         type: Object,
         "default": function _default() {
           return {};
         }
       },
-      srcKey: {
-        type: [String, Number]
-      },
-      value: [Array, String, Number, Object],
+      srcKey: [String, Number],
+      modelValue: [Array, String, Number, Object],
       previewMask: undefined,
       footer: {
         type: Boolean,
@@ -484,37 +478,35 @@
         "default": true
       }
     },
+    inject: ['formCreateInject'],
+    emits: ['update:modelValue', 'change'],
     data: function data() {
       return {
-        fileList: toArray(this.value),
+        fileList: toArray(this.modelValue),
         previewVisible: false,
         frameVisible: false,
-        previewImage: ''
+        previewImage: '',
+        bus: new Mitt()
       };
     },
     watch: {
-      value: function value(n) {
+      modelValue: function modelValue(n) {
         this.fileList = toArray(n);
-      },
-      fileList: function fileList(n) {
-        var val = this.maxLength === 1 ? n[0] || '' : n;
-        this.$emit('input', val);
-        this.$emit('change', val);
-      },
-      src: function src(n) {
-        this.modalVm && (this.modalVm.src = n);
       }
     },
     methods: {
       key: function key(unique) {
         return unique;
       },
+      close: function close() {
+        this.closeModel(true);
+      },
       closeModel: function closeModel(close) {
-        this.$emit(close ? '$close' : '$ok');
+        this.bus.$emit(close ? '$close' : '$ok');
 
         if (this.reload) {
-          this.$off('$ok');
-          this.$off('$close');
+          this.bus.$off('$ok');
+          this.bus.$off('$close');
         }
 
         this.frameVisible = false;
@@ -529,60 +521,58 @@
 
         this.frameVisible = true;
       },
+      input: function input() {
+        var n = this.fileList;
+        var val = this.maxLength === 1 ? n[0] || '' : n;
+        this.$emit('update:modelValue', val);
+        this.$emit('change', val);
+      },
       makeInput: function makeInput() {
         var _this = this;
 
-        var h = this.$createElement;
-        var props = {
+        return vue.createVNode(vue.resolveComponent("ElInput"), vue.mergeProps({
           type: 'text',
-          value: this.fileList.map(function (v) {
+          modelValue: this.fileList.map(function (v) {
             return _this.getSrc(v);
           }).toString(),
           readonly: true
-        };
-        return h("ElInput", helper([{}, {
-          "props": props
         }, {
           "key": this.key('input')
-        }]), [this.fileList.length ? h("i", {
-          "slot": "suffix",
-          "class": "el-input__icon el-icon-circle-close",
-          "on": {
-            "click": function click() {
-              return _this.fileList = [];
-            }
-          }
-        }) : null, h("ElButton", helper([{
-          "attrs": {
-            "icon": this.icon
-          }
-        }, {
-          "on": {
-            'click': function click() {
-              return _this.showModel();
-            }
+        }), {
+          append: function append() {
+            return vue.createVNode(vue.resolveComponent("ElButton"), {
+              "icon": _this.icon,
+              "onClick": function onClick() {
+                return _this.showModel();
+              }
+            }, null);
+          },
+          suffix: function suffix() {
+            return _this.fileList.length ? vue.createVNode("i", {
+              "class": "el-input__icon el-icon-circle-close",
+              "onClick": function onClick() {
+                _this.fileList = [];
+
+                _this.input();
+              }
+            }, null) : null;
           }
-        }, {
-          "slot": "append"
-        }]))]);
+        });
       },
       makeGroup: function makeGroup(children) {
-        var h = this.$createElement;
-
         if (!this.maxLength || this.fileList.length < this.maxLength) {
           children.push(this.makeBtn());
         }
 
-        return h("div", {
+        return vue.createVNode("div", {
           "key": this.key('group')
-        }, _toConsumableArray(children));
+        }, [children]);
       },
       makeItem: function makeItem(index, children) {
-        var h = this.$createElement;
-        return h("div", {
-          "class": 'fc-files',
+        return vue.createVNode("div", {
+          "class": "fc-files",
           "key": this.key('file' + index)
-        }, _toConsumableArray(children));
+        }, [children]);
       },
       valid: function valid(f) {
         var field = this.formCreateInject.field || this.field;
@@ -592,8 +582,6 @@
         }
       },
       makeIcons: function makeIcons(val, index) {
-        var h = this.$createElement;
-
         if (this.handleIcon !== false || this.allowRemove === true) {
           var icons = [];
 
@@ -605,8 +593,8 @@
             icons.push(this.makeRemoveIcon(val, index));
           }
 
-          return h("div", {
-            "class": 'fc-upload-cover',
+          return vue.createVNode("div", {
+            "class": "fc-upload-cover",
             "key": this.key('uc')
           }, [icons]);
         }
@@ -614,76 +602,66 @@
       makeHandleIcon: function makeHandleIcon(val, index) {
         var _this2 = this;
 
-        var h = this.$createElement;
-        return h("i", {
+        return vue.createVNode("i", {
           "class": this.handleIcon === true || this.handleIcon === undefined ? 'el-icon-view' : this.handleIcon,
-          "on": {
-            "click": function click() {
-              return _this2.handleClick(val);
-            }
+          "onClick": function onClick() {
+            return _this2.handleClick(val);
           },
           "key": this.key('hi' + index)
-        });
+        }, null);
       },
       makeRemoveIcon: function makeRemoveIcon(val, index) {
         var _this3 = this;
 
-        var h = this.$createElement;
-        return h("i", {
+        return vue.createVNode("i", {
           "class": "el-icon-delete",
-          "on": {
-            "click": function click() {
-              return _this3.handleRemove(val);
-            }
+          "onClick": function onClick() {
+            return _this3.handleRemove(val);
           },
           "key": this.key('ri' + index)
-        });
+        }, null);
       },
       makeFiles: function makeFiles() {
         var _this4 = this;
 
-        var h = this.$createElement;
         return this.makeGroup(this.fileList.map(function (src, index) {
-          return _this4.makeItem(index, [h("i", {
+          return _this4.makeItem(index, [vue.createVNode("i", {
             "class": "el-icon-tickets",
-            "on": {
-              "click": function click() {
-                return _this4.handleClick(src);
-              }
+            "onClick": function onClick() {
+              return _this4.handleClick(src);
             }
-          }), _this4.makeIcons(src, index)]);
+          }, null), _this4.makeIcons(src, index)]);
         }));
       },
       makeImages: function makeImages() {
         var _this5 = this;
 
-        var h = this.$createElement;
         return this.makeGroup(this.fileList.map(function (src, index) {
-          return _this5.makeItem(index, [h("img", {
-            "attrs": {
-              "src": _this5.getSrc(src)
-            }
-          }), _this5.makeIcons(src, index)]);
+          return _this5.makeItem(index, [vue.createVNode("img", {
+            "src": _this5.getSrc(src)
+          }, null), _this5.makeIcons(src, index)]);
         }));
       },
       makeBtn: function makeBtn() {
         var _this6 = this;
 
-        var h = this.$createElement;
-        return h("div", {
-          "class": 'fc-upload-btn',
-          "on": {
-            "click": function click() {
-              return _this6.showModel();
-            }
+        return vue.createVNode("div", {
+          "class": "fc-upload-btn",
+          "onClick": function onClick() {
+            return _this6.showModel();
           },
           "key": this.key('btn')
-        }, [h("i", {
+        }, [vue.createVNode("i", {
           "class": this.icon
-        })]);
+        }, null)]);
       },
       handleClick: function handleClick(src) {
-        return this.onHandle(src);
+        if (this.onHandle) {
+          return this.onHandle(src);
+        } else {
+          this.previewImage = this.getSrc(src);
+          this.previewVisible = true;
+        }
       },
       handleRemove: function handleRemove(src) {
         if (this.disabled) {
@@ -692,6 +670,7 @@
 
         if (false !== this.onBeforeRemove(src)) {
           this.fileList.splice(this.fileList.indexOf(src), 1);
+          this.input();
           this.onRemove(src);
         }
       },
@@ -714,29 +693,28 @@
               set: function set(field, value) {
                 _this7.valid(field);
 
-                if (!_this7.disabled) _this7.$emit('input', value);
+                !_this7.disabled && _this7.$emit('update:modelValue', value);
               },
               get: function get(field) {
                 _this7.valid(field);
 
-                return _this7.value;
+                return _this7.modelValue;
               },
               onOk: function onOk(fn) {
-                return _this7.$on('$ok', fn);
+                return _this7.bus.$on('$ok', fn);
               },
               onClose: function onClose(fn) {
-                return _this7.$on('$close', fn);
+                return _this7.bus.$on('$close', fn);
               }
             };
           }
         } catch (e) {
-          console.log(e);
+          console.error(e);
         }
       },
       makeFooter: function makeFooter() {
         var _this8 = this;
 
-        var h = this.$createElement;
         var _this$$props = this.$props,
             okBtnText = _this$$props.okBtnText,
             closeBtnText = _this$$props.closeBtnText,
@@ -748,30 +726,29 @@
           return;
         }
 
-        return h("div", {
-          "slot": "footer"
-        }, [closeBtn ? h("ElButton", {
-          "on": {
-            "click": function click() {
-              return _this8.onCancel() !== false && (_this8.frameVisible = false);
-            }
+        return vue.createVNode("div", null, [closeBtn ? vue.createVNode(vue.resolveComponent("ElButton"), {
+          "onClick": function onClick() {
+            return _this8.onCancel() !== false && (_this8.frameVisible = false);
           }
-        }, [closeBtnText]) : null, okBtn ? h("ElButton", {
-          "attrs": {
-            "type": "primary"
-          },
-          "on": {
-            "click": function click() {
-              return _this8.onOk() !== false && _this8.closeModel();
-            }
+        }, _isSlot$1(closeBtnText) ? closeBtnText : {
+          "default": function _default() {
+            return [closeBtnText];
           }
-        }, [okBtnText]) : null]);
+        }) : null, okBtn ? vue.createVNode(vue.resolveComponent("ElButton"), {
+          "type": "primary",
+          "onClick": function onClick() {
+            return _this8.onOk() !== false && _this8.closeModel();
+          }
+        }, _isSlot$1(okBtnText) ? okBtnText : {
+          "default": function _default() {
+            return [okBtnText];
+          }
+        }) : null]);
       }
     },
     render: function render() {
       var _this9 = this;
 
-      var h = arguments[0];
       var type = this.type;
       var node;
 
@@ -790,187 +767,206 @@
           src = _this$$props2.src,
           title = _this$$props2.title,
           modalTitle = _this$$props2.modalTitle;
-      this.$nextTick(function () {
+      vue.nextTick(function () {
         if (_this9.$refs.frame) {
           _this9.frameLoad(_this9.$refs.frame.contentWindow || {});
         }
       });
-      return h("div", {
+      return vue.createVNode("div", {
         "class": "_fc-frame"
-      }, [node, h("el-dialog", {
-        "attrs": {
-          "appendToBody": true,
-          "modal": this.previewMask,
-          "title": modalTitle,
-          "visible": this.previewVisible
-        },
-        "on": {
-          "close": this.handleCancel
-        }
-      }, [h("img", {
-        "attrs": {
-          "alt": "example",
-          "src": this.previewImage
-        },
-        "style": "width: 100%"
-      })]), h("el-dialog", helper([{
-        "attrs": {
-          "appendToBody": true
-        }
+      }, [node, vue.createVNode(vue.resolveComponent("ElDialog"), {
+        "appendToBody": true,
+        "modal": this.previewMask,
+        "title": modalTitle,
+        "modelValue": this.previewVisible,
+        "onClose": this.handleCancel
       }, {
-        "props": _objectSpread2({
-          width: width,
-          title: title
-        }, this.modal)
-      }, {
-        "attrs": {
-          "visible": this.frameVisible
-        },
-        "on": {
-          "close": function close() {
-            return _this9.closeModel(true);
-          }
+        "default": function _default() {
+          return [vue.createVNode("img", {
+            "alt": "example",
+            "style": "width: 100%",
+            "src": _this9.previewImage
+          }, null)];
         }
-      }]), [this.frameVisible || !this.reload ? h("iframe", {
-        "ref": "frame",
-        "attrs": {
-          "src": src,
-          "frameBorder": "0"
+      }), vue.createVNode(vue.resolveComponent("ElDialog"), vue.mergeProps({
+        "appendToBody": true
+      }, _objectSpread2({
+        width: width,
+        title: title
+      }, this.modal), {
+        "modelValue": this.frameVisible,
+        "onClose": function onClose() {
+          return _this9.closeModel(true);
+        }
+      }), {
+        "default": function _default() {
+          return [_this9.frameVisible || !_this9.reload ? vue.createVNode("iframe", {
+            "ref": "frame",
+            "src": src,
+            "frameBorder": "0",
+            "style": {
+              'height': height,
+              'border': '0 none',
+              'width': '100%'
+            }
+          }, null) : null];
         },
-        "style": {
-          'height': height,
-          'border': '0 none',
-          'width': '100%'
+        footer: function footer() {
+          return _this9.makeFooter();
         }
-      }) : null, this.makeFooter()])]);
+      })]);
     },
-    mounted: function mounted() {
-      this.$on('fc.closeModal', this.closeModal);
+    beforeMount: function beforeMount() {
+      var _this$formCreateInjec = this.formCreateInject,
+          name = _this$formCreateInjec.name,
+          field = _this$formCreateInjec.field,
+          api = _this$formCreateInjec.api;
+      name && api.on('fc:closeModal:' + name, this.close);
+      field && api.on('fc:closeModal:' + field, this.close);
+    },
+    beforeUnmount: function beforeUnmount() {
+      var _this$formCreateInjec2 = this.formCreateInject,
+          name = _this$formCreateInjec2.name,
+          field = _this$formCreateInjec2.field,
+          api = _this$formCreateInjec2.api;
+      name && api.off('fc:closeModal:' + name, this.close);
+      field && api.off('fc:closeModal:' + field, this.close);
     }
-  };
+  });
 
-  var NAME$2 = 'fcRadio';
-  var Radio = {
-    name: NAME$2,
+  var NAME$8 = 'fcRadio';
+  var Radio = vue.defineComponent({
+    name: NAME$8,
+    inheritAttrs: false,
     props: {
-      formCreateInject: {
-        type: Object,
-        required: true
+      modelValue: {
+        type: [String, Number],
+        "default": function _default() {
+          return [];
+        }
       },
-      value: {},
       type: String
     },
-    watch: {
-      value: function value() {
-        this.update();
-      }
-    },
-    data: function data() {
-      return {
-        trueValue: []
-      };
-    },
-    computed: {
-      options: function options() {
-        var opt = this.formCreateInject.options;
-        return Array.isArray(opt) ? opt : [];
-      }
-    },
-    methods: {
-      onInput: function onInput(n) {
-        this.$emit('input', this.options.filter(function (opt) {
-          return opt.label === n;
-        }).reduce(function (initial, opt) {
-          return opt.value;
-        }, ''));
-      },
-      update: function update() {
-        var _this = this;
+    emits: ['update:modelValue'],
+    setup: function setup(props, _) {
+      var _toRefs = vue.toRefs(vue.inject('formCreateInject')),
+          options = _toRefs.options;
+
+      var trueValue = vue.ref([]);
+      var value = vue.toRef(props, 'modelValue');
+
+      var _options = vue.computed(function () {
+        return Array.isArray(options) ? options : [];
+      });
 
-        this.trueValue = this.options.filter(function (opt) {
-          return opt.value === _this.value;
+      var update = function update() {
+        trueValue.value = _options.value.filter(function (opt) {
+          return opt.value === value.value;
         }).reduce(function (initial, opt) {
           return opt.label;
         }, '');
-      }
-    },
-    created: function created() {
-      this.update();
-    },
-    render: function render() {
-      var _this2 = this;
+      };
 
-      var h = arguments[0];
-      return h("ElRadioGroup", helper([{}, this.formCreateInject.prop, {
-        "attrs": {
-          "value": this.trueValue
+      update();
+      return {
+        options: _options,
+        trueValue: trueValue,
+        value: value,
+        onInput: function onInput(n) {
+          _.emit('update:modelValue', _options.value.filter(function (opt) {
+            return opt.label === n;
+          }).reduce(function (initial, opt) {
+            return opt.value;
+          }, ''));
         },
-        "on": {
-          "input": this.onInput
-        }
-      }]), [this.options.map(function (opt, index) {
-        var props = _objectSpread2({}, opt);
-
-        var Type = _this2.type === 'button' ? 'ElRadioButton' : 'ElRadio';
-        delete props.value;
-        return h(Type, {
-          "props": _objectSpread2({}, props),
-          "key": Type + index + opt.value
-        });
-      }), getSlot(this.$slots)]);
-    }
-  };
-
-  var is = {
-    type: function type(arg, _type) {
-      return Object.prototype.toString.call(arg) === '[object ' + _type + ']';
-    },
-    Undef: function Undef(v) {
-      return v === undefined || v === null;
+        update: update
+      };
     },
-    Element: function Element(arg) {
-      return _typeof(arg) === 'object' && arg !== null && arg.nodeType === 1 && !is.Object(arg);
+    watch: {
+      modelValue: function modelValue() {
+        this.update();
+      }
     },
-    trueArray: function trueArray(data) {
-      return Array.isArray(data) && data.length > 0;
+    render: function render() {
+      var _this$$slots$default,
+          _this$$slots,
+          _this = this;
+
+      var name = this.type === 'button' ? 'ElRadioButton' : 'ElRadio';
+      var Type = vue.resolveComponent(name);
+      return vue.createVNode(vue.resolveComponent("ElRadioGroup"), vue.mergeProps(this.$attrs, {
+        "modelValue": this.trueValue,
+        "onUpdate:modelValue": this.onInput
+      }), _objectSpread2({
+        "default": function _default() {
+          return [_this.options.map(function (opt, index) {
+            var props = _objectSpread2({}, opt);
+
+            delete props.value;
+            return vue.createVNode(Type, vue.mergeProps(props, {
+              "key": name + index + opt.value
+            }), null);
+          }), (_this$$slots$default = (_this$$slots = _this.$slots)["default"]) === null || _this$$slots$default === void 0 ? void 0 : _this$$slots$default.call(_this$$slots)];
+        }
+      }, getSlot(this.$slots, ['default'])));
     }
-  };
-  ['Date', 'Object', 'Function', 'String', 'Boolean', 'Array', 'Number'].forEach(function (t) {
-    is[t] = function (arg) {
-      return is.type(arg, t);
-    };
   });
-  function hasProperty(rule, k) {
-    return {}.hasOwnProperty.call(rule, k);
-  }
 
-  var NAME$3 = 'fcSelect';
-  var Select = {
-    name: NAME$3,
-    functional: true,
+  var NAME$7 = 'fcSelect';
+  var Select = vue.defineComponent({
+    name: NAME$7,
+    inheritAttrs: false,
     props: {
-      formCreateInject: {
-        type: Object,
-        required: true
-      }
+      modelValue: {
+        type: Array,
+        "default": function _default() {
+          return [];
+        }
+      },
+      type: String
     },
-    render: function render(h, ctx) {
-      var options = ctx.props.formCreateInject.options;
-      return h("ElSelect", helper([{}, ctx.data]), [(Array.isArray(options) ? options : []).map(function (props, index) {
-        var slot = props.slot;
-        return h("ElOption", {
-          "props": _objectSpread2({}, props),
-          "key": '' + index + props.value
-        }, [slot ? h("template", {
-          "slot": props.slotName || 'default'
-        }, [is.Function(slot) ? props.slot(h) : slot]) : null]);
-      }), ctx.children]);
+    emits: ['update:modelValue'],
+    setup: function setup(props) {
+      var _toRefs = vue.toRefs(vue.inject('formCreateInject')),
+          options = _toRefs.options;
+
+      var value = vue.toRef(props, 'modelValue');
+
+      var _options = vue.computed(function () {
+        return Array.isArray(options) ? options : [];
+      });
+
+      return {
+        options: _options,
+        value: value
+      };
+    },
+    render: function render() {
+      var _this = this,
+          _this$$slots$default,
+          _this$$slots;
+
+      return vue.createVNode(vue.resolveComponent("ElSelect"), vue.mergeProps(this.$attrs, {
+        "modelValue": this.value,
+        "onUpdate:modelValue": function onUpdateModelValue(v) {
+          return _this.$emit('update:modelValue', v);
+        }
+      }), _objectSpread2({
+        "default": function _default() {
+          return [_this.options.map(function (props, index) {
+            return vue.createVNode(vue.resolveComponent("ElOption"), vue.mergeProps(props, {
+              "key": '' + index + props.value
+            }), null);
+          }), (_this$$slots$default = (_this$$slots = _this.$slots)["default"]) === null || _this$$slots$default === void 0 ? void 0 : _this$$slots$default.call(_this$$slots)];
+        }
+      }, getSlot(this.$slots, ['default'])));
     }
-  };
+  });
 
-  var NAME$4 = 'fcTree';
-  var Tree = {
-    name: NAME$4,
+  var NAME$6 = 'fcTree';
+  var Tree = vue.defineComponent({
+    name: NAME$6,
+    inheritAttrs: false,
     formCreateParser: {
       mergeProp: function mergeProp(ctx) {
         var props = ctx.prop.props;
@@ -981,75 +977,57 @@
       }
     },
     props: {
-      formCreateInject: {
-        type: Object,
-        required: true
-      },
-      type: {
-        type: String,
-        "default": 'checked'
-      },
-      value: {
+      type: String,
+      modelValue: {
         type: [Array, String, Number],
         "default": function _default() {
           return [];
         }
       }
     },
+    emits: ['update:modelValue'],
     watch: {
-      value: function value() {
+      modelValue: function modelValue() {
         this.setValue();
       }
     },
     methods: {
-      onChange: function onChange() {
-        this.updateValue();
-      },
       updateValue: function updateValue() {
         if (!this.$refs.tree) return;
-        var type = this.type.toLocaleLowerCase();
         var value;
 
-        if (type === 'selected') {
+        if (this.type === 'selected') {
           value = this.$refs.tree.getCurrentKey();
         } else {
           value = this.$refs.tree.getCheckedKeys();
         }
 
-        this.$emit('input', value);
+        this.$emit('update:modelValue', value);
       },
       setValue: function setValue() {
-        var type = this.type.toLocaleLowerCase();
+        if (!this.$refs.tree) return;
+        var type = this.type;
 
         if (type === 'selected') {
-          this.$refs.tree.setCurrentKey(this.value);
+          this.$refs.tree.setCurrentKey(this.modelValue);
         } else {
-          this.$refs.tree.setCheckedKeys(toArray(this.value));
+          this.$refs.tree.setCheckedKeys(toArray(this.modelValue));
         }
       }
     },
     render: function render() {
-      var _this = this;
-
-      var h = arguments[0];
-      return h("ElTree", helper([{}, this.formCreateInject.prop, {
+      return vue.createVNode(vue.resolveComponent("ElTree"), vue.mergeProps(this.$attrs, {
         "ref": "tree",
-        "on": {
-          "check": function check() {
-            return _this.updateValue();
-          },
-          "node-click": function nodeClick() {
-            return _this.updateValue();
-          }
-        }
-      }]), [getSlot(this.$slots)]);
+        "onCheck": this.updateValue,
+        "onNode-click": this.updateValue
+      }), this.$slots);
     },
     mounted: function mounted() {
       this.setValue();
     }
-  };
+  });
 
-  var css_248z$1 = "._fc-upload .fc-files img {\n    width: 100%;\n    height: 100%;\n    display: inline-block;\n    vertical-align: top;\n}\n\n._fc-upload .fc-upload-btn {\n    border: 1px dashed #c0ccda;\n    cursor: pointer;\n}\n\n._fc-upload .fc-upload-cover {\n    opacity: 0;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background: rgba(0, 0, 0, .6);\n    -webkit-transition: opacity .3s;\n    -o-transition: opacity .3s;\n    transition: opacity .3s;\n}\n\n._fc-upload .fc-upload-cover i {\n    color: #fff;\n    font-size: 20px;\n    cursor: pointer;\n    margin: 0 2px;\n}\n\n._fc-upload .fc-files:hover .fc-upload-cover {\n    opacity: 1;\n}\n\n._fc-upload .el-upload {\n    display: block;\n}\n\n._fc-upload .fc-upload-btn, ._fc-upload .fc-files {\n    display: inline-block;\n    width: 58px;\n    height: 58px;\n    text-align: center;\n    line-height: 58px;\n    border: 1px solid #c0ccda;\n    border-radius: 4px;\n    overflow: hidden;\n    background: #fff;\n    position: relative;\n    -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, .1);\n    box-shadow: 2px 2px 5px rgba(0, 0, 0, .1);\n    margin-right: 4px;\n    -webkit-box-sizing: border-box;\n    box-sizing: border-box;\n}\n";
+  var css_248z$1 = "._fc-upload .fc-files img{display:inline-block;height:100%;vertical-align:top;width:100%}._fc-upload .fc-upload-btn{border:1px dashed #c0ccda;cursor:pointer}._fc-upload .fc-upload-cover{background:rgba(0,0,0,.6);bottom:0;left:0;opacity:0;position:absolute;right:0;top:0;-webkit-transition:opacity .3s;-o-transition:opacity .3s;transition:opacity .3s}._fc-upload .fc-upload-cover i{color:#fff;cursor:pointer;font-size:20px;margin:0 2px}._fc-upload .fc-files:hover .fc-upload-cover{opacity:1}._fc-upload .el-upload{display:block}._fc-upload .fc-files,._fc-upload .fc-upload-btn{background:#fff;border:1px solid #c0ccda;border-radius:4px;-webkit-box-shadow:2px 2px 5px rgba(0,0,0,.1);box-shadow:2px 2px 5px rgba(0,0,0,.1);-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;height:58px;line-height:58px;margin-right:4px;overflow:hidden;position:relative;text-align:center;width:58px}";
   styleInject(css_248z$1);
 
   function parseFile(file, i) {
@@ -1065,20 +1043,11 @@
   }
 
   var NAME$5 = 'fcUpload';
-  var Upload = {
+  var Upload = vue.defineComponent({
     name: NAME$5,
+    inheritAttrs: false,
     props: {
-      formCreateInject: {
-        type: Object,
-        required: true
-      },
-      onHandle: {
-        type: Function,
-        "default": function _default(file) {
-          this.previewImage = file.url;
-          this.previewVisible = true;
-        }
-      },
+      onHandle: Function,
       uploadType: {
         type: String,
         "default": 'file'
@@ -1093,36 +1062,31 @@
       },
       previewMask: undefined,
       modalTitle: String,
-      handleIcon: {
-        type: [String, Boolean],
-        "default": function _default() {
-          return undefined;
-        }
-      },
-      value: [Array, String]
+      handleIcon: [String, Boolean],
+      modelValue: [Array, String]
     },
+    emits: ['update:modelValue'],
     data: function data() {
       return {
         uploadList: [],
         previewVisible: false,
-        previewImage: ''
+        previewImage: '',
+        fileList: []
       };
     },
     created: function created() {
-      if (this.formCreateInject.prop.props.showFileList === undefined) {
-        this.formCreateInject.prop.props.showFileList = false;
-      }
-
-      this.formCreateInject.prop.props.fileList = toArray(this.value).map(parseFile);
+      this.fileList = toArray(this.modelValue).map(parseFile);
     },
     watch: {
-      value: function value(n) {
+      modelValue: function modelValue(n) {
         if (this.$refs.upload.uploadFiles.every(function (file) {
           return !file.status || file.status === 'success';
         })) {
           this.$refs.upload.uploadFiles = toArray(n).map(parseFile);
           this.uploadList = this.$refs.upload.uploadFiles;
         }
+
+        this.fileList = toArray(n).map(parseFile);
       },
       limit: function limit(n, o) {
         if (o === 1 || n === 1) {
@@ -1135,7 +1099,7 @@
         return unique;
       },
       isDisabled: function isDisabled() {
-        return this.formCreateInject.prop.props.disabled === true;
+        return this.$attrs.disabled === true;
       },
       onRemove: function onRemove(file) {
         if (this.isDisabled()) {
@@ -1145,63 +1109,55 @@
         this.$refs.upload.handleRemove(file);
       },
       handleClick: function handleClick(file) {
-        this.onHandle(file);
+        if (this.onHandle) {
+          return this.onHandle(file);
+        } else {
+          this.previewImage = file.url;
+          this.previewVisible = true;
+        }
       },
       makeItem: function makeItem(file, index) {
-        var h = this.$createElement;
-        return this.uploadType === 'image' ? h("img", {
-          "attrs": {
-            "src": file.url
-          },
+        return this.uploadType === 'image' ? vue.createVNode("img", {
+          "src": file.url,
           "key": this.key('img' + index)
-        }) : h("i", {
-          "class": "el-icon-tickets",
+        }, null) : vue.createVNode("i", {
+          "class": "el-icon-document",
           "key": this.key('i' + index)
-        });
+        }, null);
       },
       makeRemoveIcon: function makeRemoveIcon(file, index) {
         var _this = this;
 
-        var h = this.$createElement;
-        return h("i", {
+        return vue.createVNode("i", {
           "class": "el-icon-delete",
-          "on": {
-            "click": function click() {
-              return _this.onRemove(file);
-            }
+          "onClick": function onClick() {
+            return _this.onRemove(file);
           },
           "key": this.key('ri' + index)
-        });
+        }, null);
       },
       makeHandleIcon: function makeHandleIcon(file, index) {
         var _this2 = this;
 
-        var h = this.$createElement;
-        return h("i", {
+        return vue.createVNode("i", {
           "class": this.handleIcon === true || this.handleIcon === undefined ? 'el-icon-view' : this.handleIcon,
-          "on": {
-            "click": function click() {
-              return _this2.handleClick(file);
-            }
+          "onClick": function onClick() {
+            return _this2.handleClick(file);
           },
           "key": this.key('hi' + index)
-        });
+        }, null);
       },
       makeProgress: function makeProgress(file, index) {
-        var h = this.$createElement;
-        return h("ElProgress", helper([{}, {
-          "props": {
-            percentage: file.percentage,
-            type: 'circle',
-            width: 52
-          }
+        return vue.createVNode(vue.resolveComponent("ElProgress"), vue.mergeProps({
+          percentage: file.percentage,
+          type: 'circle',
+          width: 52
         }, {
           "style": "margin-top:2px;",
           "key": this.key('pg' + index)
-        }]));
+        }), null);
       },
       makeIcons: function makeIcons(file, index) {
-        var h = this.$createElement;
         var icons = [];
 
         if (this.allowRemove || this.handleIcon !== false) {
@@ -1213,7 +1169,7 @@
             icons.push(this.makeRemoveIcon(file, index));
           }
 
-          return h("div", {
+          return vue.createVNode("div", {
             "class": 'fc-upload-cover'
           }, [icons]);
         }
@@ -1221,34 +1177,36 @@
       makeFiles: function makeFiles() {
         var _this3 = this;
 
-        var h = this.$createElement;
         return this.uploadList.map(function (file, index) {
-          return _this3.$scopedSlots.fileList ? _this3.$scopedSlots.fileList({
-            file: file,
-            index: index,
-            vm: _this3
-          }) : h("div", {
+          return vue.createVNode("div", {
             "key": _this3.key(index),
             "class": 'fc-files'
           }, [file.percentage !== undefined && file.status !== 'success' ? _this3.makeProgress(file, index) : [_this3.makeItem(file, index), _this3.makeIcons(file, index)]]);
         });
       },
       makeUpload: function makeUpload() {
-        var h = this.$createElement;
+        var _this$$slots$default,
+            _this$$slots,
+            _this4 = this;
+
         var isShow = !this.limit || this.limit > this.uploadList.length;
-        return h("ElUpload", helper([{}, this.formCreateInject.prop, {
+        return vue.createVNode(vue.resolveComponent("ElUpload"), vue.mergeProps(this.$attrs, {
+          "showFileList": false,
+          "fileList": this.fileList,
           "ref": "upload",
           "style": {
             display: 'inline-block'
           },
           "key": this.key('upload')
-        }]), [isShow ? h("template", {
-          "slot": "default"
-        }, [this.$slots["default"] || h("div", {
-          "class": 'fc-upload-btn'
-        }, [h("i", {
-          "class": "el-icon-upload2"
-        })])]) : null, getSlot(this.$slots, ['default'])]);
+        }), _objectSpread2({
+          "default": function _default() {
+            return [isShow ? ((_this$$slots$default = (_this$$slots = _this4.$slots)["default"]) === null || _this$$slots$default === void 0 ? void 0 : _this$$slots$default.call(_this$$slots)) || vue.createVNode("div", {
+              "class": 'fc-upload-btn'
+            }, [vue.createVNode("i", {
+              "class": "el-icon-upload2"
+            }, null)]) : undefined];
+          }
+        }, getSlot(this.$slots, ['default'])));
       },
       update: function update() {
         var files = this.$refs.upload.uploadFiles.map(function (file) {
@@ -1256,70 +1214,82 @@
         }).filter(function (url) {
           return url !== undefined;
         });
-        this.$emit('input', this.limit === 1 ? files[0] || '' : files);
+        this.$emit('update:modelValue', this.limit === 1 ? files[0] || '' : files);
       },
       handleCancel: function handleCancel() {
         this.previewVisible = false;
       }
     },
     render: function render() {
-      var h = arguments[0];
-
-      if (this.$refs.upload) {
-        if (this.formCreateInject.prop.props.showFileList === undefined) {
-          this.formCreateInject.prop.props.showFileList = this.$refs.upload.showFileList;
-        }
+      var _this5 = this;
 
-        this.formCreateInject.prop.props.fileList = this.$refs.upload.fileList;
-      }
-
-      return h("div", {
+      return vue.createVNode("div", {
         "class": '_fc-upload'
-      }, [[this.formCreateInject.prop.props.showFileList ? [] : this.makeFiles(), this.makeUpload()], h("el-dialog", {
-        "attrs": {
-          "appendToBody": true,
-          "modal": this.previewMask,
-          "title": this.modalTitle,
-          "visible": this.previewVisible
-        },
-        "on": {
-          "close": this.handleCancel
+      }, [[this.$attrs.showFileList ? [] : this.makeFiles(), this.makeUpload()], vue.createVNode(vue.resolveComponent("ElDialog"), {
+        "appendToBody": true,
+        "modal": this.previewMask,
+        "title": this.modalTitle,
+        "modelValue": this.previewVisible,
+        "onClose": this.handleCancel
+      }, {
+        "default": function _default() {
+          return [vue.createVNode("img", {
+            "alt": "example",
+            "style": "width: 100%",
+            "src": _this5.previewImage
+          }, null)];
         }
-      }, [h("img", {
-        "attrs": {
-          "alt": "example",
-          "src": this.previewImage
-        },
-        "style": "width: 100%"
-      })])]);
+      })]);
     },
     mounted: function mounted() {
-      var _this4 = this;
+      var _this6 = this;
 
       this.uploadList = this.$refs.upload.uploadFiles;
       this.$watch(function () {
-        return _this4.$refs.upload.uploadFiles;
+        return _this6.$refs.upload.uploadFiles;
       }, function () {
-        _this4.update();
+        _this6.update();
       }, {
         deep: true
       });
     }
+  });
+
+  var is = {
+    type: function type(arg, _type) {
+      return Object.prototype.toString.call(arg) === '[object ' + _type + ']';
+    },
+    Undef: function Undef(v) {
+      return v === undefined || v === null;
+    },
+    Element: function Element(arg) {
+      return _typeof(arg) === 'object' && arg !== null && arg.nodeType === 1 && !is.Object(arg);
+    },
+    trueArray: function trueArray(data) {
+      return Array.isArray(data) && data.length > 0;
+    }
   };
+  ['Date', 'Object', 'Function', 'String', 'Boolean', 'Array', 'Number'].forEach(function (t) {
+    is[t] = function (arg) {
+      return is.type(arg, t);
+    };
+  });
+  function hasProperty(rule, k) {
+    return {}.hasOwnProperty.call(rule, k);
+  }
 
-  var NAME$6 = 'fcGroup';
-  var Group = {
-    name: NAME$6,
+  function _isSlot(s) {
+    return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
+  }
+
+  var NAME$4 = 'fcGroup';
+  var Group = vue.defineComponent({
+    name: NAME$4,
     props: {
       field: String,
-      rule: [Array, Object],
-      rules: Array,
+      rule: Array,
       expand: Number,
       options: Object,
-      formCreateInject: {
-        type: Object,
-        required: true
-      },
       button: {
         type: Boolean,
         "default": true
@@ -1332,7 +1302,7 @@
         type: Number,
         "default": 0
       },
-      value: {
+      modelValue: {
         type: Array,
         "default": function _default() {
           return [];
@@ -1359,27 +1329,16 @@
         "default": function _default() {}
       }
     },
+    inject: ['formCreateInject'],
     data: function data() {
       return {
         len: 0,
         cacheRule: {},
         cacheValue: {},
-        type: undefined
+        form: vue.markRaw(this.formCreateInject.form.$form())
       };
     },
-    computed: {
-      formRule: function formRule() {
-        if (this.rule) {
-          return Array.isArray(this.rule) ? this.rule : [this.rule];
-        }
-
-        if (this.rules) {
-          return this.rules;
-        }
-
-        return [];
-      }
-    },
+    emits: ['update:modelValue', 'change', 'itemMounted', 'remove'],
     watch: {
       disabled: function disabled(n) {
         if (this.syncDisabled) {
@@ -1390,41 +1349,44 @@
         }
       },
       expand: function expand(n) {
-        var d = n - this.value.length;
+        var d = n - this.modelValue.length;
 
         if (d > 0) {
           this.expandRule(d);
         }
       },
-      value: function value(n) {
-        var _this = this;
+      modelValue: {
+        handler: function handler(n) {
+          var _this = this;
 
-        n = n || [];
-        var keys = Object.keys(this.cacheRule),
-            total = keys.length,
-            len = total - n.length;
+          n = n || [];
+          var keys = Object.keys(this.cacheRule),
+              total = keys.length,
+              len = total - n.length;
 
-        if (len < 0) {
-          for (var i = len; i < 0; i++) {
-            this.addRule(n.length + i);
-          }
+          if (len < 0) {
+            for (var i = len; i < 0; i++) {
+              this.addRule(n.length + i);
+            }
 
-          for (var _i = 0; _i < total; _i++) {
-            this.setValue(keys[_i], n[_i]);
-          }
-        } else {
-          if (len > 0) {
-            for (var _i2 = 0; _i2 < len; _i2++) {
-              this.removeRule(keys[total - _i2 - 1]);
+            for (var _i = 0; _i < total; _i++) {
+              this.setValue(keys[_i], n[_i]);
             }
+          } else {
+            if (len > 0) {
+              for (var _i2 = 0; _i2 < len; _i2++) {
+                this.removeRule(keys[total - _i2 - 1]);
+              }
 
-            this.subForm();
-          }
+              this.subForm();
+            }
 
-          n.forEach(function (val, i) {
-            _this.setValue(keys[i], n[i]);
-          });
-        }
+            n.forEach(function (val, i) {
+              _this.setValue(keys[i], n[i]);
+            });
+          }
+        },
+        deep: true
       }
     },
     methods: {
@@ -1435,7 +1397,7 @@
         this.cacheValue[k] = JSON.stringify(val);
       },
       input: function input(value) {
-        this.$emit('input', value);
+        this.$emit('update:modelValue', value);
         this.$emit('change', value);
       },
       formData: function formData(key, _formData) {
@@ -1461,8 +1423,7 @@
         this.input(value);
       },
       setValue: function setValue(key, value) {
-        var field = this.field,
-            $f = this.cacheRule[key].$f;
+        var field = this.field;
 
         if (field) {
           value = _defineProperty({}, field, this._value(value));
@@ -1473,24 +1434,22 @@
         }
 
         this.cache(key, value);
-        $f.coverValue(value || {});
       },
       addRule: function addRule(i, emit) {
         var _this3 = this;
 
-        var rule = this.formCreateInject.form.copyRules(this.formRule);
+        var rule = this.formCreateInject.form.copyRules(this.rule || []);
         var options = this.options ? _objectSpread2({}, this.options) : {
           submitBtn: false,
           resetBtn: false
         };
-        options.formData = this.field ? _defineProperty({}, this.field, this._value(this.value[i])) : this.value[i] || {};
-        this.$set(this.cacheRule, ++this.len, {
+        this.cacheRule[++this.len] = {
           rule: rule,
           options: options
-        });
+        };
 
         if (emit) {
-          this.$nextTick(function () {
+          vue.nextTick(function () {
             return _this3.$emit('add', rule, Object.keys(_this3.cacheRule).length - 1);
           });
         }
@@ -1500,7 +1459,7 @@
 
         this.cacheRule[key].$f = $f;
         this.subForm();
-        this.$nextTick(function () {
+        vue.nextTick(function () {
           if (_this4.syncDisabled) {
             $f.disabled(_this4.disabled);
           }
@@ -1519,63 +1478,58 @@
         var _this6 = this;
 
         var index = Object.keys(this.cacheRule).indexOf(key);
-        this.$delete(this.cacheRule, key);
-        this.$delete(this.cacheValue, key);
+        delete this.cacheRule[key];
+        delete this.cacheValue[key];
 
         if (emit) {
-          this.$nextTick(function () {
+          vue.nextTick(function () {
             return _this6.$emit('remove', index);
           });
         }
       },
-      add: function add(i) {
-        if (this.disabled || false === this.onBeforeAdd(this.value)) {
+      add: function add() {
+        if (this.disabled || false === this.onBeforeAdd(this.modelValue)) {
           return;
         }
 
-        this.addRule(i, true);
+        this.modelValue.push(this.field ? null : {});
+        this.$emit('update:modelValue', this.modelValue);
       },
       del: function del(index, key) {
-        if (this.disabled || false === this.onBeforeRemove(this.value, index)) {
+        if (this.disabled || false === this.onBeforeRemove(this.modelValue, index)) {
           return;
         }
 
         this.removeRule(key, true);
         this.subForm();
-        this.value.splice(index, 1);
-        this.input(this.value);
+        this.modelValue.splice(index, 1);
+        this.input(this.modelValue);
       },
       addIcon: function addIcon(key) {
-        var h = this.$createElement;
-        return h("i", {
+        return vue.createVNode("i", {
           "key": "a".concat(key),
           "class": "el-icon-circle-plus-outline",
           "style": "font-size:".concat(this.fontSize, "px;cursor:").concat(this.disabled ? 'not-allowed;color:#c9cdd4' : 'pointer', ";"),
-          "on": {
-            "click": this.add
-          }
-        });
+          "onClick": this.add
+        }, null);
       },
       delIcon: function delIcon(index, key) {
         var _this7 = this;
 
-        var h = this.$createElement;
-        return h("i", {
+        return vue.createVNode("i", {
           "key": "d".concat(key),
           "class": "el-icon-remove-outline",
           "style": "font-size:".concat(this.fontSize, "px;cursor:").concat(this.disabled ? 'not-allowed;color:#c9cdd4' : 'pointer;color:#606266', ";"),
-          "on": {
-            "click": function click() {
-              return _this7.del(index, key);
-            }
+          "onClick": function onClick() {
+            return _this7.del(index, key);
           }
-        });
+        }, null);
       },
       makeIcon: function makeIcon(total, index, key) {
         var _this8 = this;
 
-        if (this.$scopedSlots.button) {
-          return this.$scopedSlots.button({
+        if (this.$slots.button) {
+          return this.$slots.button({
             total: total,
             index: index,
             vm: this,
@@ -1600,102 +1554,109 @@
       },
       expandRule: function expandRule(n) {
         for (var i = 0; i < n; i++) {
-          this.value.push(this.field ? null : {});
+          this.modelValue.push(this.field ? null : {});
         }
       }
     },
     created: function created() {
-      this.type = this.formCreateInject.form.$form();
-      var d = (this.expand || 0) - this.value.length;
+      var d = (this.expand || 0) - this.modelValue.length;
 
       if (d > 0) {
         this.expandRule(d);
       }
 
-      for (var i = 0; i < this.value.length; i++) {
+      for (var i = 0; i < this.modelValue.length; i++) {
         this.addRule(i);
       }
     },
     render: function render() {
       var _this9 = this;
 
-      var h = arguments[0];
       var keys = Object.keys(this.cacheRule);
       var button = this.button;
-      var Type = this.type;
-      return keys.length === 0 ? this.$scopedSlots["default"] ? this.$scopedSlots["default"]({
+      var Type = this.form;
+      return keys.length === 0 ? this.$slots["default"] ? this.$slots["default"]({
         vm: this,
         add: this.add
-      }) : h("i", {
+      }) : vue.createVNode("i", {
         "key": 'a_def',
         "class": "el-icon-circle-plus-outline",
         "style": "font-size:".concat(this.fontSize, "px;vertical-align:middle;color:").concat(this.disabled ? '#c9cdd4;cursor: not-allowed' : '#606266;cursor:pointer', ";"),
-        "on": {
-          "click": this.add
-        }
-      }) : h("div", {
+        "onClick": this.add
+      }, null) : vue.createVNode("div", {
         "key": 'con'
       }, [keys.map(function (key, index) {
+        var _slot;
+
         var _this9$cacheRule$key = _this9.cacheRule[key],
             rule = _this9$cacheRule$key.rule,
             options = _this9$cacheRule$key.options;
-        return h("ElRow", {
-          "attrs": {
-            "align": "middle",
-            "type": "flex"
-          },
+        return vue.createVNode(vue.resolveComponent("ElRow"), {
+          "align": "middle",
+          "type": "flex",
           "key": key,
           "style": "border-bottom:1px dashed #DCDFE6;margin-bottom:10px;"
-        }, [h("ElCol", {
-          "attrs": {
-            "span": button ? 20 : 24
-          }
-        }, [h("ElFormItem", [h(Type, helper([{
-          "key": key
         }, {
-          "on": {
-            'update:value': function updateValue(formData) {
-              return _this9.formData(key, formData);
-            },
-            'emit-event': function emitEvent(name) {
-              for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-                args[_key - 1] = arguments[_key];
+          "default": function _default() {
+            return [vue.createVNode(vue.resolveComponent("ElCol"), {
+              "span": button ? 20 : 24
+            }, {
+              "default": function _default() {
+                return [vue.createVNode(vue.resolveComponent("ElFormItem"), null, {
+                  "default": function _default() {
+                    return [vue.createVNode(Type, {
+                      "key": key,
+                      "onUpdate:modelValue": function onUpdateModelValue(formData) {
+                        return _this9.formData(key, formData);
+                      },
+                      "modelValue": _this9.field ? _defineProperty({}, _this9.field, _this9._value(_this9.modelValue[index])) : _this9.modelValue[index],
+                      "onEmit-event": function onEmitEvent(name) {
+                        for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+                          args[_key - 1] = arguments[_key];
+                        }
+
+                        return _this9.emitEvent(name, args, index, key);
+                      },
+                      "onUpdate:api": function onUpdateApi($f) {
+                        return _this9.add$f(index, key, $f);
+                      },
+                      "rule": rule,
+                      "option": options,
+                      "extendOption": true
+                    }, null)];
+                  }
+                })];
               }
-
-              return _this9.emitEvent(name, args, index, key);
-            },
-            input: function input($f) {
-              return _this9.add$f(index, key, $f);
-            }
-          }
-        }, {
-          "attrs": {
-            "rule": rule,
-            "option": options,
-            "extendOption": true
-          }
-        }]))])]), button ? h("ElCol", {
-          "attrs": {
-            "span": 2,
-            "pull": 1,
-            "push": 1
+            }), button ? vue.createVNode(vue.resolveComponent("ElCol"), {
+              "span": 2,
+              "pull": 1,
+              "push": 1
+            }, _isSlot(_slot = _this9.makeIcon(keys.length, index, key)) ? _slot : {
+              "default": function _default() {
+                return [_slot];
+              }
+            }) : null];
           }
-        }, [_this9.makeIcon(keys.length, index, key)]) : null]);
+        });
       })]);
     }
-  };
+  });
 
-  var NAME$7 = 'fcSubForm';
-  var Sub = {
-    name: NAME$7,
+  var NAME$3 = 'fcSubForm';
+  var Sub = vue.defineComponent({
+    name: NAME$3,
     props: {
       rule: Array,
-      options: Object,
-      formCreateInject: {
+      options: {
         type: Object,
-        required: true
+        "default": function _default() {
+          return vue.reactive({
+            submitBtn: false,
+            resetBtn: false
+          });
+        }
       },
-      value: {
+      modelValue: {
         type: Object,
         "default": function _default() {
           return {};
@@ -1710,25 +1671,27 @@
         "default": true
       }
     },
+    inject: ['formCreateInject'],
     data: function data() {
       return {
-        cacheRule: {},
         cacheValue: {},
-        type: undefined
+        subApi: {},
+        form: vue.markRaw(this.formCreateInject.form.$form())
       };
     },
+    emits: ['fc:subform', 'update:modelValue', 'change', 'itemMounted'],
     watch: {
       disabled: function disabled(n) {
-        this.syncDisabled && this.cacheRule.$f.disabled(n);
+        this.syncDisabled && this.subApi.disabled(n);
       },
-      value: function value(n) {
+      modelValue: function modelValue(n) {
         this.setValue(n);
       }
     },
     methods: {
       formData: function formData(value) {
         this.cacheValue = JSON.stringify(value);
-        this.$emit('input', value);
+        this.$emit('update:modelValue', value);
         this.$emit('change', value);
       },
       setValue: function setValue(value) {
@@ -1739,112 +1702,47 @@
         }
 
         this.cacheValue = str;
-        this.cacheRule.$f.coverValue(value || {});
+        this.subApi.coverValue(value || {});
       },
-      addRule: function addRule() {
-        var options = this.options ? this.options : {
-          submitBtn: false,
-          resetBtn: false
-        };
-        options.formData = _objectSpread2({}, this.value || {});
-        this.cacheRule = {
-          rule: this.rule,
-          options: options
-        };
-      },
-      add$f: function add$f($f) {
+      add$f: function add$f(api) {
         var _this = this;
 
-        this.cacheRule.$f = $f;
-        this.subForm();
-        this.$nextTick(function () {
-          _this.syncDisabled && $f.disabled(_this.disabled);
+        this.subApi = api;
+        this.formCreateInject.subForm(api);
+        vue.nextTick(function () {
+          _this.syncDisabled && api.disabled(_this.disabled);
 
-          _this.$emit('itemMounted', $f);
+          _this.$emit('itemMounted', api);
         });
-      },
-      subForm: function subForm() {
-        this.formCreateInject.subForm(this.cacheRule.$f);
-      },
-      emitEvent: function emitEvent(name) {
-        for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-          args[_key - 1] = arguments[_key];
-        }
-
-        this.$emit.apply(this, [name].concat(args));
       }
     },
-    created: function created() {
-      this.addRule();
-      this.type = this.formCreateInject.form.$form();
-    },
     render: function render() {
-      var h = arguments[0];
-      var _this$cacheRule = this.cacheRule,
-          rule = _this$cacheRule.rule,
-          options = _this$cacheRule.options;
-      var Type = this.type;
-      return h(Type, helper([{}, {
-        "on": {
-          'update:value': this.formData,
-          'emit-event': this.emitEvent,
-          input: this.add$f
-        }
-      }, {
-        "attrs": {
-          "rule": rule,
-          "option": options,
-          "extendOption": true
-        }
-      }]));
-    }
-  };
-
-  var components = [Checkbox, Frame, Radio, Select, Tree, Upload, Group, Sub];
-
-  function $set(target, field, value) {
-    Vue.set(target, field, value);
-  }
-  function $del(target, field) {
-    Vue["delete"](target, field);
-  }
-
-  var _extends$1 = Object.assign || function (a) {
-    for (var b, c = 1; c < arguments.length; c++) {
-      for (var d in b = arguments[c], b) {
-        Object.prototype.hasOwnProperty.call(b, d) && $set(a, d, b[d]);
-      }
-    }
-
-    return a;
-  };
+      var Type = this.form;
+      return vue.createVNode(Type, {
+        "onUpdate:modelValue": this.formData,
+        "modelValue": this.modelValue,
+        "onEmit-event": this.$emit,
+        "onUpdate:api": this.add$f,
+        "rule": this.rule,
+        "option": this.options,
+        "extendOption": true
+      }, null);
+    }
+  });
 
-  function extend() {
-    return _extends$1.apply(this, arguments);
-  }
+  var components = [Checkbox, Frame, Radio, Select, Tree, Upload, Group, Sub];
 
-  var NAME$8 = 'FormCreate';
+  var NAME$2 = 'FormCreate';
   function $FormCreate(FormCreate) {
-    return {
-      name: NAME$8,
-      componentName: NAME$8,
-      model: {
-        prop: 'api'
-      },
-      provide: function provide() {
-        return {
-          $pfc: this
-        };
-      },
-      inject: {
-        $pfc: {
-          "default": null
-        }
-      },
+    return vue.defineComponent({
+      name: NAME$2,
       props: {
         rule: {
           type: Array,
-          required: true
+          required: true,
+          "default": function _default() {
+            return [];
+          }
         },
         option: {
           type: Object,
@@ -1853,91 +1751,120 @@
           }
         },
         extendOption: Boolean,
-        value: Object,
+        modelValue: Object,
         api: Object
       },
-      data: function data() {
-        return {
-          formData: undefined,
+      emits: ['update:api', 'update:modelValue', 'mounted', 'submit', 'change', 'emit-event', 'control', 'remove-rule', 'remove-field', 'sync'],
+      render: function render() {
+        return this.fc.render();
+      },
+      setup: function setup(props) {
+        var vm = vue.getCurrentInstance();
+        vue.provide('parentFC', vm);
+        var parent = vue.inject('parentFC');
+
+        var _toRefs = vue.toRefs(props),
+            rule = _toRefs.rule,
+            modelValue = _toRefs.modelValue;
+
+        var data = vue.reactive({
           destroyed: false,
-          validate: {},
-          $f: undefined,
           isShow: true,
           unique: 1,
-          renderRule: _toConsumableArray(this.rule || []),
-          ctxInject: {},
-          updateValue: ''
-        };
-      },
-      render: function render() {
-        return this.formCreate.render();
-      },
-      methods: {
-        _refresh: function _refresh() {
-          ++this.unique;
-        },
-        _renderRule: function _renderRule() {
-          this.renderRule = _toConsumableArray(this.rule || []);
-        },
-        _updateValue: function _updateValue(value) {
-          if (this.destroyed) return;
-          this.updateValue = JSON.stringify(value);
-          this.$emit('update:value', value);
-        }
-      },
-      watch: {
-        value: {
-          handler: function handler(n) {
-            if (JSON.stringify(n) === this.updateValue) return;
-            this.$f.setValue(n);
-          },
+          renderRule: _toConsumableArray(rule.value || []),
+          updateValue: JSON.stringify(modelValue)
+        });
+        var fc = new FormCreate(vm);
+        var fapi = fc.api();
+        vue.onMounted(function () {
+          fc.mounted();
+        });
+        vue.onBeforeUnmount(function () {
+          data.destroyed = true;
+          fc.unmount();
+        });
+        vue.onUpdated(function () {
+          fc.updated();
+        });
+        vue.watch(function () {
+          return _toConsumableArray(rule.value);
+        }, function (n) {
+          if (fc.$handle.isBreakWatch() || n.length === data.renderRule.length && n.every(function (v) {
+            return data.renderRule.indexOf(v) > -1;
+          })) return;
+          fc.$handle.reloadRule(rule.value);
+          vm.setupState.renderRule();
+        });
+        vue.watch(props.option, function (n) {
+          fc.initOptions(n);
+          fapi.refresh();
+        });
+        vue.watch(modelValue, function (n) {
+          if (JSON.stringify(n) === data.updateValue) return;
+          fapi.setValue(n);
+        }, {
           deep: true
-        },
-        option: {
-          handler: function handler(n) {
-            this.formCreate.initOptions(n);
-            this.$f.refresh();
+        });
+        return _objectSpread2(_objectSpread2({
+          fc: vue.markRaw(fc),
+          parent: parent ? vue.markRaw(parent) : parent,
+          fapi: vue.markRaw(fapi)
+        }, vue.toRefs(data)), {}, {
+          refresh: function refresh() {
+            ++data.unique;
           },
-          deep: true
-        },
-        rule: function rule(n) {
-          var _this = this;
-
-          if (n.length === this.renderRule.length && n.every(function (v) {
-            return _this.renderRule.indexOf(v) > -1;
-          })) return;
-          this.formCreate.$handle.reloadRule(n);
-
-          this._renderRule();
-        }
+          renderRule: function renderRule() {
+            data.renderRule = _toConsumableArray(rule.value || []);
+          },
+          updateValue: function updateValue(value) {
+            if (data.destroyed) return;
+            data.updateValue = JSON.stringify(value);
+            vm.emit('update:modelValue', value);
+          }
+        });
       },
-      beforeCreate: function beforeCreate() {
-        var _this2 = this;
+      created: function created() {
+        var vm = vue.getCurrentInstance();
+        vm.setupState.fc.init();
+        vm.emit('update:api', vm.setupState.fapi);
+      }
+    });
+  }
 
-        var _this$$options$propsD = this.$options.propsData,
-            rule = _this$$options$propsD.rule,
-            option = _this$$options$propsD.option;
-        this.formCreate = new FormCreate(this, rule, option);
-        Object.keys(this.formCreate.prop).forEach(function (k) {
-          extend(_this2.$options[k], _this2.formCreate.prop[k]);
-        });
+  function $set(target, field, value) {
+    target[field] = value;
+  }
+  function $del(target, field) {
+    delete target[field];
+  }
+
+  var _extends = Object.assign || function (a) {
+    for (var b, c = 1; c < arguments.length; c++) {
+      for (var d in b = arguments[c], b) {
+        Object.prototype.hasOwnProperty.call(b, d) && $set(a, d, b[d]);
       }
-    };
+    }
+
+    return a;
+  };
+
+  function extend() {
+    return _extends.apply(this, arguments);
   }
 
-  var normalMerge$1 = ['attrs', 'props', 'domProps', 'scopedSlots'];
-  var toArrayMerge$1 = ['class', 'style', 'directives'];
-  var functionalMerge$1 = ['on', 'nativeOn'];
+  var normalMerge = ['props'];
+  var toArrayMerge = ['class', 'style', 'directives'];
+  var functionalMerge = ['on'];
 
   var mergeProps = function mergeProps(objects) {
     var initial = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     var opt = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
 
-    var _normalMerge = [].concat(normalMerge$1, _toConsumableArray(opt['normal'] || []));
+    var _normalMerge = [].concat(normalMerge, _toConsumableArray(opt['normal'] || []));
 
-    var _toArrayMerge = [].concat(toArrayMerge$1, _toConsumableArray(opt['array'] || []));
+    var _toArrayMerge = [].concat(toArrayMerge, _toConsumableArray(opt['array'] || []));
 
-    var _functionalMerge = [].concat(functionalMerge$1, _toConsumableArray(opt['functional'] || []));
+    var _functionalMerge = [].concat(functionalMerge, _toConsumableArray(opt['functional'] || []));
 
     var propsMerge = opt['props'] || [];
     return objects.reduce(function (a, b) {
@@ -1966,7 +1893,7 @@
           } else if (key === 'hook') {
             for (var hook in b[key]) {
               if (a[key][hook]) {
-                a[key][hook] = mergeFn$1(a[key][hook], b[key][hook]);
+                a[key][hook] = mergeFn(a[key][hook], b[key][hook]);
               } else {
                 a[key][hook] = b[key][hook];
               }
@@ -1987,18 +1914,18 @@
     }, initial);
   };
 
-  var mergeFn$1 = function mergeFn(fn1, fn2) {
+  var mergeFn = function mergeFn(fn1, fn2) {
     return function () {
       fn1 && fn1.apply(this, arguments);
       fn2 && fn2.apply(this, arguments);
     };
   };
 
-  var keyAttrs = ['type', 'slot', 'emitPrefix', 'value', 'name', 'native', 'hidden', 'display', 'inject', 'options', 'emit', 'nativeEmit', 'link', 'prefix', 'suffix', 'update', 'sync', 'optionsTo', 'key'];
+  var keyAttrs = ['type', 'slot', 'emitPrefix', 'value', 'name', 'native', 'hidden', 'display', 'inject', 'options', 'emit', 'link', 'prefix', 'suffix', 'update', 'sync', 'optionsTo', 'key'];
   var arrayAttrs = ['validate', 'children', 'control'];
-  var normalAttrs = ['effect', 'deep'];
+  var normalAttrs = ['effect'];
   function attrs() {
-    return [].concat(keyAttrs, _toConsumableArray(normalMerge$1), _toConsumableArray(toArrayMerge$1), _toConsumableArray(functionalMerge$1), arrayAttrs, normalAttrs);
+    return [].concat(keyAttrs, _toConsumableArray(normalMerge), _toConsumableArray(toArrayMerge), _toConsumableArray(functionalMerge), arrayAttrs, normalAttrs);
   }
 
   function deepExtend(origin) {
@@ -2054,9 +1981,6 @@
   function format(type, msg, rule) {
     return "[form-create ".concat(type, "]: ").concat(msg) + (rule ? '\n\nrule: ' + JSON.stringify(rule.getRule ? rule.getRule() : rule) : '');
   }
-  function tip(msg, rule) {
-    console.warn(format('tip', msg, rule));
-  }
   function err(msg, rule) {
     console.error(format('err', msg, rule));
   }
@@ -2065,6 +1989,15 @@
     console.error(e);
   }
 
+  function toLine(name) {
+    var line = name.replace(/([A-Z])/g, '-$1').toLocaleLowerCase();
+    if (line.indexOf('-') === 0) line = line.substr(1);
+    return line;
+  }
+  function upper(str) {
+    return str.replace(str[0], str[0].toLocaleUpperCase());
+  }
+
   var PREFIX = '[[FORM-CREATE-PREFIX-';
   var SUFFIX = '-FORM-CREATE-SUFFIX]]';
   var $T = '$FN:';
@@ -2188,20 +2121,104 @@
 
     return def;
   }
+  function makeSlotBag() {
+    var slotBag = {};
 
-  function toString(val) {
-    return val == null ? '' : _typeof(val) === 'object' ? JSON.stringify(val, null, 2) : String(val);
+    var slotName = function slotName(n) {
+      return n || 'default';
+    };
+
+    return {
+      setSlot: function setSlot(slot, vnFn) {
+        slot = slotName(slot);
+        if (!vnFn || Array.isArray(vnFn) && vnFn.length) return;
+        if (!slotBag[slot]) slotBag[slot] = [];
+        slotBag[slot].push(vnFn);
+      },
+      getSlot: function getSlot(slot) {
+        slot = slotName(slot);
+        var children = [];
+        (slotBag[slot] || []).forEach(function (fn) {
+          if (Array.isArray(fn)) {
+            children.push.apply(children, _toConsumableArray(fn));
+          } else if (is.Function(fn)) {
+            var res = fn();
+
+            if (Array.isArray(res)) {
+              children.push.apply(children, _toConsumableArray(res));
+            } else {
+              children.push(res);
+            }
+          } else if (!is.Undef(fn)) {
+            children.push(fn);
+          }
+        });
+        return children;
+      },
+      getSlots: function getSlots() {
+        var _this = this;
+
+        var slots = {};
+        Object.keys(slotBag).forEach(function (k) {
+          slots[k] = function () {
+            return _this.getSlot(k);
+          };
+        });
+        return slots;
+      },
+      slotLen: function slotLen(slot) {
+        slot = slotName(slot);
+        return slotBag[slot] ? slotBag[slot].length : 0;
+      },
+      mergeBag: function mergeBag(bag) {
+        var _this2 = this;
+
+        if (!bag) return this;
+        var slots = is.Function(bag.getSlots) ? bag.getSlots() : bag;
+
+        if (Array.isArray(bag) || vue.isVNode(bag)) {
+          this.setSlot(undefined, function () {
+            return bag;
+          });
+        } else {
+          Object.keys(slots).forEach(function (k) {
+            _this2.setSlot(k, slots[k]);
+          });
+        }
+
+        return this;
+      }
+    };
   }
+  function toProps(rule) {
+    var prop = _objectSpread2({}, rule.props || {});
 
-  function toLine(name) {
-    var line = name.replace(/([A-Z])/g, '-$1').toLocaleLowerCase();
-    if (line.indexOf('-') === 0) line = line.substr(1);
-    return line;
+    Object.keys(rule.on || {}).forEach(function (k) {
+      var name = "on".concat(upper(k));
+
+      if (Array.isArray(prop[name])) {
+        prop[name] = [].concat(_toConsumableArray(prop[name]), [rule.on[k]]);
+      } else if (prop[name]) {
+        prop[name] = [prop[name], rule.on[k]];
+      } else {
+        prop[name] = rule.on[k];
+      }
+    });
+    prop.key = rule.key;
+    prop.ref = rule.ref;
+    prop["class"] = rule["class"];
+    prop.style = rule.style;
+    if (prop.slot) delete prop.slot;
+    return prop;
+  }
+
+  function toString(val) {
+    return val == null ? '' : _typeof(val) === 'object' ? JSON.stringify(val, null, 2) : String(val);
   }
 
-  var id = 0;
+  var id$1 = 0;
   function uniqueId() {
-    return Math.random().toString(36).substr(3, 3) + Number("".concat(Date.now()).concat(++id)).toString(36);
+    return Math.random().toString(36).substr(3, 3) + Number("".concat(Date.now()).concat(++id$1)).toString(36);
   }
 
   function deepSet(data, idx, val) {
@@ -2263,6 +2280,10 @@
       $set(this._data, key, value);
       return this;
     },
+    modelField: function modelField(field) {
+      this._data.modelField = field;
+      return this;
+    },
     _clone: function _clone() {
       var clone = new this.constructor();
       clone._data = copyRule(this._data);
@@ -2286,19 +2307,9 @@
     make._data.title = title;
     return make;
   }
-  function createTmp(template, vm, field, title) {
-    var make = commonMaker('', field);
-    make._data.type = 'template';
-    make._data.template = template;
-    make._data.title = title;
-    make._data.vm = vm;
-    return make;
-  }
   function makerFactory() {
     return {
       create: create,
-      createTmp: createTmp,
-      template: createTmp,
       factory: creatorFactory
     };
   }
@@ -2342,10 +2353,18 @@
         return h.options;
       },
 
+      set config(val) {
+        h.fc.options.value = val;
+      },
+
       get options() {
         return h.options;
       },
 
+      set options(val) {
+        h.fc.options.value = val;
+      },
+
       get form() {
         return h.form;
       },
@@ -2355,7 +2374,7 @@
       },
 
       get parent() {
-        return h.vm.$pfc && h.vm.$pfc.$f;
+        return h.vm.parent && h.vm.parent.setupState.fapi;
       },
 
       get children() {
@@ -2415,10 +2434,6 @@
         ctx.rm();
         return ctx.origin;
       },
-      destroy: function destroy() {
-        h.vm.$el.parentNode && h.vm.$el.parentNode.removeChild(h.vm.$el);
-        h.vm.$destroy();
-      },
       fields: function fields() {
         return h.fields();
       },
@@ -2559,7 +2574,7 @@
         api.refresh();
       },
       hideForm: function hideForm(hide) {
-        $set(h.vm, 'isShow', !hide);
+        h.vm.setupState.isShow = !hide;
       },
       changeStatus: function changeStatus() {
         return h.changeStatus;
@@ -2609,7 +2624,6 @@
         });
       },
       refreshValidate: function refreshValidate() {
-        h.vm.validate = {};
         api.refresh();
       },
       resetFields: function resetFields(fields) {
@@ -2651,11 +2665,10 @@
       },
       el: function el(id) {
         var ctx = h.getCtx(id);
-        if (ctx) return ctx.el || h.vm.$refs[ctx.ref];
+        if (ctx) return ctx.el || h.vm.refs[ctx.ref];
       },
       closeModal: function closeModal(id) {
-        var el = api.el(id);
-        el && el.$emit && el.$emit('close-modal');
+        h.bus.$emit('fc:closeModal:' + id);
       },
       getSubForm: function getSubForm(field) {
         var ctx = h.getCtx(field);
@@ -2672,9 +2685,9 @@
     };
     ['on', 'once', 'off', 'set'].forEach(function (n) {
       api[n] = function () {
-        var _h$vm;
+        var _h$bus;
 
-        (_h$vm = h.vm)["$".concat(n)].apply(_h$vm, arguments);
+        (_h$bus = h.bus)["$".concat(n)].apply(_h$bus, arguments);
       };
     });
     api.changeValue = api.changeField = api.setValue;
@@ -2729,85 +2742,56 @@
     return str.replace(str[0], str[0].toLowerCase());
   }
 
-  function useRender(Render) {
+  function useRender$1(Render) {
     extend(Render.prototype, {
       initRender: function initRender() {
-        this.tempList = {};
-        this.clearOrgChildren();
-      },
-      initOrgChildren: function initOrgChildren() {
-        var ctxs = this.$handle.ctxs;
-        this.orgChildren = Object.keys(ctxs).reduce(function (initial, id) {
-          if (ctxs[id].parser.loadChildren !== false) {
-            var children = ctxs[id].rule.children;
-            initial[id] = is.trueArray(children) ? _toConsumableArray(children) : [];
-          }
-
-          return initial;
-        }, {});
-      },
-      clearOrgChildren: function clearOrgChildren() {
-        this.orgChildren = {};
+        this.cacheConfig = {};
       },
       render: function render() {
         var _this = this;
 
-        if (!this.vm.isShow) {
+        // console.warn('renderrrrr', this.id);
+        if (!this.vm.setupState.isShow) {
           return;
         }
 
-        this.$h = this.vm.$createElement;
         this.$manager.beforeRender();
-        var vn;
-
-        var make = function make() {
-          return _this.renderList();
-        };
-
-        make.renderSlot = function (slot) {
-          return _this.renderList(slot);
-        };
-
-        make.renderName = function (name) {
-          return _this.renderId(name);
-        };
-
-        make.renderField = function (field) {
-          return _this.renderId(field, 'field');
-        };
-
-        if (this.vm.$scopedSlots.container) {
-          vn = [this.vm.$scopedSlots.container(make)];
+        var slotBag = makeSlotBag();
+        this.sort.forEach(function (k) {
+          _this.renderSlot(slotBag, _this.$handle.ctxs[k]);
+        });
+        return this.$manager.render(slotBag);
+      },
+      renderSlot: function renderSlot(slotBag, ctx, parent) {
+        if (this.isFragment(ctx)) {
+          ctx.initProp();
+          this.mergeGlobal(ctx);
+          ctx.initNone();
+          var slots = this.renderChildren(ctx);
+          var def = slots["default"];
+          def && slotBag.setSlot(ctx.rule.slot, function () {
+            return def();
+          });
+          delete slots["default"];
+          slotBag.mergeBag(slots);
         } else {
-          vn = make();
+          slotBag.setSlot(ctx.rule.slot, this.renderCtx(ctx, parent));
         }
-
-        return this.$manager.render(vn);
       },
-      renderList: function renderList(slot) {
+      mergeGlobal: function mergeGlobal(ctx) {
         var _this2 = this;
 
-        return this.sort.map(function (id) {
-          return slot ? _this2.renderSlot(_this2.$handle.ctxs[id], slot) : _this2.renderCtx(_this2.$handle.ctxs[id]);
-        }).filter(function (val) {
-          return val !== undefined;
-        });
-      },
-      makeVm: function makeVm(rule) {
-        var _this3 = this;
-
-        var vm = rule.vm;
-        if (!vm) return new _vue();else if (is.Function(vm)) return invoke(function () {
-          return rule.vm(_this3.$handle.getInjectData(rule));
-        });else if (!vm._isVue) return new _vue(vm);
-        return vm;
-      },
-      mergeGlobal: function mergeGlobal(ctx) {
         var g = this.$handle.options.global;
-        if (!g) return; //todo 缓存配置,更新 option 更新
+        if (!g) return;
+
+        if (!this.cacheConfig[ctx.trueType]) {
+          this.cacheConfig[ctx.trueType] = vue.computed(function () {
+            var g = _this2.$handle.options.global;
+            return mergeRule({}, [g['*'], g[ctx.originType] || g[ctx.type] || g[ctx.type] || {}]);
+          });
+        }
 
-        if (!ctx.cacheConfig) ctx.cacheConfig = g[ctx.originType] || g[ctx.type] || g[ctx.trueType] || {};
-        ctx.prop = mergeRule({}, [g['*'], ctx.cacheConfig, ctx.prop]);
+        ctx.prop = mergeRule({}, [this.cacheConfig[ctx.trueType].value, ctx.prop]);
       },
       setOptions: function setOptions(ctx) {
         if (ctx.prop.optionsTo && ctx.prop.options) {
@@ -2822,62 +2806,6 @@
           deepSet(ctx.prop, str, deep[str]);
         });
       },
-      setTempProps: function setTempProps(vm, ctx) {
-        if (!vm.$props) return;
-        var prop = ctx.prop;
-        var keys = Object.keys(vm.$props);
-        var inject = this.injectProp(ctx);
-        var injectKeys = Object.keys(inject);
-        keys.forEach(function (key) {
-          if (hasProperty(prop.props, key)) vm.$props[key] = prop.props[key];else if (injectKeys.indexOf(key) > -1) vm.$props[key] = inject[key];
-        });
-        var key = vm.$options.model && vm.$options.model.prop || 'value';
-
-        if (keys.indexOf(key) > -1) {
-          vm.$props[key] = prop.value;
-        }
-      },
-      renderTemp: function renderTemp(ctx) {
-        var _this4 = this;
-
-        if (!_vue.compile) {
-          tip('当前使用的Vue构建版本不支持compile,无法使用template功能');
-          return [];
-        }
-
-        var rule = ctx.prop;
-        var id = ctx.id,
-            key = ctx.key;
-
-        if (!this.tempList[id]) {
-          if (!ctx.el) {
-            ctx.el = this.makeVm(rule);
-            this.vm.$nextTick(function () {
-              return ctx.parser.mounted(ctx);
-            });
-          }
-
-          var _vm = ctx.el;
-          if (ctx.input) _vm.$on(_vm.$options.model && _vm.$options.model.event || 'input', function (value) {
-            _this4.onInput(ctx, value);
-          });
-          this.tempList[id] = {
-            vm: _vm,
-            template: _vue.compile(rule.template)
-          };
-        }
-
-        var _this$tempList$id = this.tempList[id],
-            vm = _this$tempList$id.vm,
-            template = _this$tempList$id.template;
-        this.setTempProps(vm, ctx);
-        var vn = template.render.call(vm);
-        if (is.Undef(vn.data)) vn.data = {};
-        vn.key = key;
-        vn.data.ref = ctx.ref;
-        vn.data.key = key;
-        return vn;
-      },
       parseSide: function parseSide(side) {
         return is.Object(side) ? mergeRule({}, side) : side;
       },
@@ -2885,109 +2813,94 @@
         var prop = ctx[temp ? 'rule' : 'prop'];
         return [this.renderRule(this.parseSide(prop.prefix)), vn, this.renderRule(this.parseSide(prop.suffix))];
       },
-      renderSlot: function renderSlot(ctx, slot) {
-        return ctx.rule.slot === slot ? this.renderCtx(ctx) : undefined;
-      },
       renderId: function renderId(name, type) {
-        var _this5 = this;
+        var _this3 = this;
 
         var ctxs = this.$handle[type === 'field' ? 'fieldCtx' : 'nameCtx'][name];
         return ctxs ? ctxs.map(function (ctx) {
-          return _this5.renderCtx(ctx, ctx.parent);
+          return _this3.renderCtx(ctx, ctx.parent);
         }) : undefined;
       },
       renderCtx: function renderCtx(ctx, parent) {
+        var _this4 = this;
+
         if (ctx.type === 'hidden') return;
         var rule = ctx.rule;
 
         if (!this.cache[ctx.id] || this.cache[ctx.id].slot !== rule.slot) {
           var vn;
-          var cacheFlag = true;
-          var _type = ctx.trueType;
-          var none = !(is.Undef(rule.display) || !!rule.display);
-
-          if (_type === 'template' && !rule.template) {
-            vn = this.renderSides(this.renderChildren(ctx), ctx, true);
-
-            if (none) {
-              this.display(vn);
-            }
-
-            vn = this.item(ctx, vn);
-          } else if (_type === 'fcFragment') {
-            vn = this.renderChildren(ctx);
-          } else {
-            ctx.initProp();
-            this.mergeGlobal(ctx);
-            this.$manager.tidyRule(ctx);
-            this.deepSet(ctx);
-            this.setOptions(ctx);
-            this.ctxProp(ctx);
-            var prop = ctx.prop;
-            prop.props.formCreateInject = this.injectProp(ctx);
-
-            if (prop.hidden) {
-              this.setCache(ctx, undefined, parent);
-              return;
-            }
+          ctx.initProp();
+          this.mergeGlobal(ctx);
+          ctx.initNone();
+          this.$manager.tidyRule(ctx);
+          this.deepSet(ctx);
+          this.setOptions(ctx);
+          this.ctxProp(ctx);
+          var prop = ctx.prop;
+
+          if (prop.hidden) {
+            this.setCache(ctx, undefined, parent);
+            return;
+          }
 
-            if (_type === 'template' && prop.template) {
-              vn = this.renderTemp(ctx);
-              cacheFlag = false;
-            } else {
-              var children = [];
+          vn = function vn() {
+            return _this4.item(ctx, function () {
+              var children = {};
 
               if (ctx.parser.renderChildren) {
                 children = ctx.parser.renderChildren(ctx);
               } else if (ctx.parser.loadChildren !== false) {
-                children = this.renderChildren(ctx);
+                children = _this4.renderChildren(ctx);
               }
 
               var slot = 'type-' + toLine(ctx.type);
 
-              if (this.vm.$scopedSlots[slot]) {
-                vn = this.vm.$scopedSlots[slot]({
+              var _vn;
+
+              if (_this4.vm.slots[slot]) {
+                _vn = _this4.vm.slots[slot]({
                   rule: rule,
                   prop: prop,
                   children: children,
-                  api: this.$handle.api,
+                  api: _this4.$handle.api,
                   model: prop.model || {}
                 });
               } else {
-                vn = ctx.parser.render(children, ctx);
+                _vn = ctx.parser.render(_this4.renderChildren(ctx), ctx);
               }
-            }
 
-            vn = this.renderSides(vn, ctx);
-
-            if (!(!ctx.input && is.Undef(prop["native"])) && prop["native"] !== true) {
-              vn = this.$manager.makeWrap(ctx, vn);
-            }
+              _vn = _this4.renderSides(_vn, ctx);
 
-            if (none) {
-              vn = this.display(vn);
-            }
+              if (!(!ctx.input && is.Undef(prop["native"])) && prop["native"] !== true) {
+                _vn = _this4.$manager.makeWrap(ctx, _vn);
+              }
 
-            vn = this.item(ctx, vn);
-          }
+              if (ctx.none) {
+                _vn = _this4.display(_vn);
+              }
 
-          if (cacheFlag) {
-            this.setCache(ctx, vn, parent);
-          }
+              return _vn;
+            });
+          };
 
+          this.setCache(ctx, vn, parent);
+          ctx._vnode = vn;
           return vn;
         }
 
         return this.getCache(ctx);
       },
+      getModelField: function getModelField(ctx) {
+        return ctx.rule.modelField || ctx.parser.modelField || this.fc.modelFields[this.vNode.aliasMap[ctx.field]] || this.fc.modelFields[ctx.field] || this.fc.modelFields[ctx.originType] || 'modelValue';
+      },
       display: function display(vn) {
-        var _this6 = this;
+        var _this5 = this;
 
         if (Array.isArray(vn)) {
           var data = [];
           vn.forEach(function (v) {
-            if (Array.isArray(v)) return _this6.display(v);
-            if (_this6.none(v)) data.push(v);
+            if (Array.isArray(v)) return _this5.display(v);
+            if (_this5.none(v)) data.push(v);
           });
           return data;
         } else {
@@ -2995,13 +2908,13 @@
         }
       },
       none: function none(vn) {
-        if (vn && vn.data) {
-          if (Array.isArray(vn.data.style)) {
-            vn.data.style.push({
+        if (vn) {
+          if (Array.isArray(vn.props.style)) {
+            vn.props.style.push({
               display: 'none'
             });
           } else {
-            vn.data.style = [vn.data.style, {
+            vn.props.style = [vn.props.style, {
               display: 'none'
             }];
           }
@@ -3010,41 +2923,31 @@
         }
       },
       item: function item(ctx, vn) {
-        return this.$h('fcFragment', {
-          slot: ctx.rule.slot,
-          key: ctx.key
-        }, [vn]);
+        return this.vNode.h('FcFragment', {
+          key: ctx.prop.key,
+          formCreateInject: this.injectProp(ctx)
+        }, vn);
+      },
+      isFragment: function isFragment(ctx) {
+        return ctx.type === 'fragment' || ctx.type === 'template';
       },
       injectProp: function injectProp(ctx) {
-        var _this7 = this;
-
-        if (!this.vm.ctxInject[ctx.id]) {
-          $set(this.vm.ctxInject, ctx.id, {});
-        }
+        var _this6 = this;
 
-        var inject = this.vm.ctxInject[ctx.id];
-        extend(inject, {
+        return {
           api: this.$handle.api,
           form: this.fc.create,
           subForm: function subForm(_subForm) {
-            _this7.$handle.addSubForm(ctx, _subForm);
+            _this6.$handle.addSubForm(ctx, _subForm);
           },
           field: ctx.field,
-          options: ctx.prop.options,
+          options: ctx.prop.options || [],
           children: ctx.rule.children,
-          rule: ctx.rule,
-          prop: function () {
-            var temp = _objectSpread2({}, ctx.prop);
-
-            temp.on = temp.on ? _objectSpread2({}, temp.on) : {};
-            delete temp.model;
-            return temp;
-          }()
-        });
-        return inject;
+          rule: ctx.rule
+        };
       },
       ctxProp: function ctxProp(ctx, custom) {
-        var _this8 = this;
+        var _this7 = this;
 
         var ref = ctx.ref,
             key = ctx.key,
@@ -3056,37 +2959,29 @@
           key: rule.key || "".concat(key, "fc"),
           slot: undefined,
           on: {
-            'hook:mounted': function hookMounted() {
-              _this8.onMounted(ctx);
-            },
-            'fc.sub-form': function fcSubForm(subForm) {
-              _this8.$handle.addSubForm(ctx, subForm);
+            vnodeMounted: function vnodeMounted(vn) {
+              vn.el.__rule__ = ctx.rule;
+
+              _this7.onMounted(ctx, vn.el);
             }
           }
         }];
 
         if (!custom && ctx.input) {
+          var field = this.getModelField(ctx);
           props.push({
-            model: {
-              value: this.$handle.getFormData(ctx),
-              callback: function callback(value) {
-                _this8.onInput(ctx, value);
-              },
-              expression: "formData.".concat(ctx.id)
-            }
+            on: _defineProperty({}, "update:".concat(field), function update(value) {
+              _this7.onInput(ctx, value);
+            }),
+            props: _defineProperty({}, field, this.$handle.getFormData(ctx))
           });
         }
 
         mergeProps(props, ctx.prop);
         return ctx.prop;
       },
-      onMounted: function onMounted(ctx) {
-        ctx.el = this.vm.$refs[ctx.ref];
-
-        if (ctx.el) {
-          (ctx.el.$el || ctx.el).__rule__ = ctx.rule;
-        }
-
+      onMounted: function onMounted(ctx, el) {
+        ctx.el = this.vm.refs[ctx.ref] || el;
         ctx.parser.mounted(ctx);
         this.$handle.effect(ctx, 'mounted');
       },
@@ -3094,54 +2989,28 @@
         this.$handle.onInput(ctx, value);
       },
       renderChildren: function renderChildren(ctx) {
-        var _this9 = this;
-
-        var children = ctx.rule.children,
-            orgChildren = this.orgChildren[ctx.id];
-
-        var isRm = function isRm(child) {
-          return !is.String(child) && child.__fc__ && !_this9.$handle.ctxs[child.__fc__.id];
-        };
-
-        if (!is.trueArray(children) && orgChildren) {
-          this.$handle.deferSyncValue(function () {
-            orgChildren.forEach(function (child) {
-              if (!child) return;
-
-              if (isRm(child)) {
-                _this9.$handle.rmCtx(child.__fc__);
-              }
-            });
-          });
-          this.orgChildren[ctx.id] = [];
-          return [];
-        }
-
-        orgChildren && this.$handle.deferSyncValue(function () {
-          orgChildren.forEach(function (child) {
-            if (!child) return;
+        var _this8 = this;
 
-            if (children.indexOf(child) === -1 && isRm(child)) {
-              _this9.$handle.rmCtx(child.__fc__);
-            }
-          });
-        });
-        return children.map(function (child) {
+        var children = ctx.rule.children;
+        if (!is.trueArray(children)) return {};
+        var slotBag = makeSlotBag();
+        children.map(function (child) {
           if (!child) return;
-          if (is.String(child)) return child;
+          if (is.String(child)) return slotBag.setSlot(null, child);
 
           if (child.__fc__) {
-            return _this9.renderCtx(child.__fc__, ctx);
+            return _this8.renderSlot(slotBag, child.__fc__, ctx);
           }
 
           if (child.type) {
-            _this9.vm.$nextTick(function () {
-              _this9.$handle.loadChildren(children, ctx);
+            vue.nextTick(function () {
+              _this8.$handle.loadChildren(children, ctx);
 
-              _this9.$handle.refresh();
+              _this8.$handle.refresh();
             });
           }
         });
+        return slotBag.getSlots();
       },
       defaultRender: function defaultRender(ctx, children) {
         var prop = ctx.prop;
@@ -3150,7 +3019,7 @@
         return this.vNode.make(lower(ctx.originType), prop, children);
       },
       renderRule: function renderRule(rule, children, origin) {
-        var _this10 = this;
+        var _this9 = this;
 
         if (!rule) return undefined;
         if (is.String(rule)) return rule;
@@ -3169,26 +3038,30 @@
         }
 
         if (!type) return undefined;
-        var data = [[children]];
+        var slotBag = makeSlotBag();
 
         if (is.trueArray(rule.children)) {
-          data.push(rule.children.map(function (v) {
-            return _this10.renderRule(v);
-          }));
+          rule.children.forEach(function (v) {
+            v && slotBag.setSlot(v === null || v === void 0 ? void 0 : v.slot, function () {
+              return _this9.renderRule(v);
+            });
+          });
         }
 
-        return this.$h(type, _objectSpread2({}, rule), data);
+        return this.vNode.make(type, rule, slotBag.mergeBag(children).getSlots());
       }
     });
   }
 
+  var id = 1;
   function Render(handle) {
     extend(this, {
       $handle: handle,
       fc: handle.fc,
       vm: handle.vm,
       $manager: handle.$manager,
-      vNode: new handle.fc.CreateNode(handle.vm)
+      vNode: new handle.fc.CreateNode(handle.vm),
+      id: id++
     });
     funcProxy(this, {
       options: function options() {
@@ -3202,7 +3075,7 @@
     this.initRender();
   }
   useCache(Render);
-  useRender(Render);
+  useRender$1(Render);
 
   function useInject(Handler) {
     extend(Handler.prototype, {
@@ -3235,7 +3108,7 @@
           }
         }
       },
-      parseEmit: function parseEmit(ctx, on) {
+      parseEmit: function parseEmit(ctx) {
         var _this2 = this;
 
         var event = {},
@@ -3244,13 +3117,12 @@
             field = rule.field,
             name = rule.name,
             inject = rule.inject;
-        var emit = rule[on ? 'emit' : 'nativeEmit'] || [];
+        var emit = rule.emit || [];
 
         if (is.trueArray(emit)) {
           var emitKey = emitPrefix || field || name;
 
           if (emitKey) {
-            if (!on) emitKey = "native-".concat(emitKey);
             emit.forEach(function (eventName) {
               if (!eventName) return;
               var eventInject;
@@ -3263,15 +3135,17 @@
               var fieldKey = toLine("".concat(emitKey, "-").concat(eventName));
 
               var fn = function fn() {
-                var _this2$vm, _this2$vm2;
+                var _this2$vm, _this2$vm2, _this2$bus;
 
                 for (var _len = arguments.length, arg = new Array(_len), _key = 0; _key < _len; _key++) {
                   arg[_key] = arguments[_key];
                 }
 
-                (_this2$vm = _this2.vm).$emit.apply(_this2$vm, [fieldKey].concat(arg));
+                (_this2$vm = _this2.vm).emit.apply(_this2$vm, [fieldKey].concat(arg));
 
-                (_this2$vm2 = _this2.vm).$emit.apply(_this2$vm2, ['emit-event', fieldKey].concat(arg));
+                (_this2$vm2 = _this2.vm).emit.apply(_this2$vm2, ['emit-event', fieldKey].concat(arg));
+
+                (_this2$bus = _this2.bus).$emit.apply(_this2$bus, [fieldKey].concat(arg));
               };
 
               fn.__emit = true;
@@ -3287,16 +3161,16 @@
           }
         }
 
-        ctx.computed[on ? 'on' : 'nativeOn'] = event;
+        ctx.computed.on = event;
         return event;
       },
       getInjectData: function getInjectData(self, inject) {
-        var _this$vm$$options$pro = this.vm.$options.propsData,
-            option = _this$vm$$options$pro.option,
-            rule = _this$vm$$options$pro.rule;
+        var _this$vm = this.vm,
+            option = _this$vm.option,
+            rule = _this$vm.rule;
         return {
-          api: this.api,
           $f: this.api,
+          api: this.api,
           rule: rule,
           self: self.__origin__,
           option: option,
@@ -3352,7 +3226,7 @@
           pageEnd: this.rules.length <= first
         });
         this.bus.$on('page-end', function () {
-          return _this.vm.$emit('page-end', _this.api);
+          return _this.vm.emit('page-end', _this.api);
         });
         this.pageLoad();
       },
@@ -3361,7 +3235,7 @@
 
         var pageFn = function pageFn() {
           if (_this2.pageEnd) {
-            _this2.vm.$off(EVENT, pageFn);
+            _this2.bus.$off(EVENT, pageFn);
 
             _this2.bus.$emit('page-end');
           } else {
@@ -3374,7 +3248,7 @@
           }
         };
 
-        this.vm.$on(EVENT, pageFn);
+        this.bus.$on(EVENT, pageFn);
       }
     });
   }
@@ -3383,7 +3257,7 @@
     return rules.length < 31 ? 31 : Math.ceil(rules.length / 3);
   }
 
-  function useRender$1(Handler) {
+  function useRender(Handler) {
     extend(Handler.prototype, {
       clearNextTick: function clearNextTick() {
         this.nextTick && clearTimeout(this.nextTick);
@@ -3401,22 +3275,33 @@
       render: function render() {
         // console.warn('%c render', 'color:green');
         ++this.loadedId;
-        if (this.vm.unique > 0) return this.$render.render();else {
-          this.vm.unique = 1;
+        if (this.vm.setupState.unique > 0) return this.$render.render();else {
+          this.vm.setupState.unique = 1;
           return [];
         }
       }
     });
   }
 
+  function isNone(ctx) {
+    var none = !(is.Undef(ctx.prop.display) || !!ctx.prop.display);
+
+    if (ctx.parent) {
+      return ctx.parent.none || none;
+    } else {
+      return none;
+    }
+  }
+
   function bind(ctx) {
     Object.defineProperties(ctx.origin, {
-      __fc__: enumerable(ctx, true)
+      __fc__: enumerable(vue.markRaw(ctx), true)
     });
   }
 
   function RuleContext(handle, rule) {
     var id = uniqueId();
+    var isInput = !!rule.field;
     extend(this, {
       id: id,
       ref: id,
@@ -3424,6 +3309,7 @@
       rule: rule,
       origin: rule.__origin__ || rule,
       name: rule.name,
+      none: false,
       watch: [],
       linkOn: [],
       root: [],
@@ -3433,9 +3319,10 @@
       prop: _objectSpread2({}, rule),
       computed: {},
       payload: {},
-      input: !!rule.field,
+      refRule: {},
+      input: isInput,
       el: undefined,
-      defaultValue: rule.field ? deepCopy(rule.value) : undefined,
+      defaultValue: isInput ? deepCopy(rule.value) : undefined,
       field: rule.field || undefined
     });
     this.updateType();
@@ -3476,6 +3363,9 @@
         return _this.payload[k];
       })), [this.computed]));
     },
+    initNone: function initNone() {
+      this.none = isNone(this);
+    },
     check: function check(handle) {
       return this.vm === handle.vm;
     },
@@ -3484,6 +3374,7 @@
         return un();
       });
       this.watch = [];
+      this.refRule = {};
     },
     unlink: function unlink() {
       this.linkOn.forEach(function (un) {
@@ -3496,7 +3387,11 @@
       this.$handle.appendLink(this);
     },
     watchTo: function watchTo() {
-      this.$handle.watchCtx(this);
+      var _this2 = this;
+
+      vue.nextTick(function () {
+        _this2.$handle.watchCtx(_this2);
+      });
     },
     "delete": function _delete() {
       var undef = void 0;
@@ -3514,7 +3409,8 @@
         vm: undef,
         vNode: undef,
         parent: null,
-        cacheConfig: null
+        cacheConfig: null,
+        none: false
       });
     },
     rmCtrl: function rmCtrl() {
@@ -3524,15 +3420,15 @@
       this.ctrlRule = [];
     },
     rm: function rm() {
-      var _this2 = this;
+      var _this3 = this;
 
       var _rm = function _rm() {
-        var index = _this2.root.indexOf(_this2.origin);
+        var index = _this3.root.indexOf(_this3.origin);
 
         if (index > -1) {
-          _this2.root.splice(index, 1);
+          _this3.root.splice(index, 1);
 
-          _this2.$handle && _this2.$handle.refresh();
+          _this3.$handle && _this3.$handle.refresh();
         }
       };
 
@@ -3543,17 +3439,17 @@
       }
 
       this.$handle.noWatch(function () {
-        _this2.$handle.deferSyncValue(function () {
-          _this2.rmCtrl();
+        _this3.$handle.deferSyncValue(function () {
+          _this3.rmCtrl();
 
           _rm();
 
-          _this2.$handle.rmCtx(_this2);
+          _this3.$handle.rmCtx(_this3);
 
-          extend(_this2, {
+          extend(_this3, {
             root: []
           });
-        }, _this2.input);
+        }, _this3.input);
       });
     },
     update: function update(handle, init) {
@@ -3579,7 +3475,7 @@
         var _this = this;
 
         var id = this.loadedId;
-        this.vm.$nextTick(function () {
+        vue.nextTick(function () {
           id === _this.loadedId && (fn ? fn() : _this.refresh());
         });
       },
@@ -3611,7 +3507,7 @@
       loadFn: function loadFn(item, rule) {
         var _this3 = this;
 
-        ['on', 'props', 'nativeOn', 'deep'].forEach(function (k) {
+        ['on', 'props', 'deep'].forEach(function (k) {
           item[k] && _this3.parseInjectEvent(rule, item[k]);
         });
       },
@@ -3631,7 +3527,7 @@
             pre["update:".concat(prop)] = function (val) {
               rule.props[prop] = val;
 
-              _this4.vm.$emit('sync', prop, val, rule, _this4.fapi);
+              _this4.vm.emit('sync', prop, val, rule, _this4.fapi);
             };
 
             return pre;
@@ -3662,9 +3558,7 @@
             _this5.bus.$emit('load-end');
           }
 
-          _this5.vm._renderRule();
-
-          _this5.$render.initOrgChildren();
+          _this5.vm.setupState.renderRule();
 
           _this5.syncForm();
         });
@@ -3729,7 +3623,7 @@
           });
 
           if (isRepeat()) {
-            _this6.vm.$emit('repeat-field', _rule, _this6.api);
+            _this6.vm.emit('repeat-field', _rule, _this6.api);
           }
 
           var ctx;
@@ -3775,9 +3669,7 @@
             _this6.appendValue(ctx.rule);
           }
 
-          [false, true].forEach(function (b) {
-            return _this6.parseEmit(ctx, b);
-          });
+          _this6.parseEmit(ctx);
 
           _this6.syncProp(ctx);
 
@@ -3811,9 +3703,10 @@
             }
 
             _this6.effect(ctx, 'loaded');
-          }
+          } // if (ctx.input)
+          //     Object.defineProperty(r, 'value', this.valueHandle(ctx));
+
 
-          if (ctx.input) Object.defineProperty(r, 'value', _this6.valueHandle(ctx));
           if (_this6.refreshControl(ctx)) _this6.cycleLoad = true;
           return ctx;
         });
@@ -3873,18 +3766,16 @@
                 children: rule,
                 valid: valid
               }) : ctx.ctrlRule.splice(ctx.ctrlRule.indexOf(ctrl), 1);
-
-              _this7.vm.$nextTick(function () {
+              vue.nextTick(function () {
                 _this7.api.hidden(!valid, rule);
               });
-
               return;
             }
 
             if (valid) {
               flag = true;
               var ruleCon = {
-                type: 'fcFragment',
+                type: 'template',
                 "native": true,
                 __ctrl: true,
                 children: rule
@@ -3908,7 +3799,7 @@
             }
           });
         });
-        this.vm.$emit('control', ctx.origin, this.api);
+        this.vm.emit('control', ctx.origin, this.api);
         this.effect(ctx, 'control');
         return flag;
       },
@@ -3924,7 +3815,6 @@
         var ctxs = _objectSpread2({}, this.ctxs);
 
         this.clearNextTick();
-        this.$render.clearOrgChildren();
         this.initData(rules);
         this.fc.rules = rules;
         this.bus.$once('load-end', function () {
@@ -3945,7 +3835,7 @@
       },
       //todo 组件生成全部通过 alias
       refresh: function refresh() {
-        this.vm._refresh();
+        this.vm.setupState.refresh();
       }
     });
   }
@@ -3976,29 +3866,22 @@
 
   function useInput(Handler) {
     extend(Handler.prototype, {
-      getValue: function getValue(ctx) {
-        if (!hasProperty(ctx, 'cacheValue')) {
-          ctx.cacheValue = ctx.parser.toValue(this.getFormData(ctx), ctx);
-        }
-
-        return ctx.cacheValue;
-      },
       setValue: function setValue(ctx, value, formValue, setFlag) {
         if (ctx.deleted) return;
-        ctx.cacheValue = value;
+        ctx.rule.value = value;
         this.changeStatus = true;
         this.nextRefresh();
         this.$render.clearCache(ctx);
         this.setFormData(ctx, formValue);
         this.syncValue();
         this.valueChange(ctx, value);
-        this.vm.$emit('change', ctx.field, value, ctx.origin, this.api, setFlag);
+        this.vm.emit('change', ctx.field, value, ctx.origin, this.api, setFlag);
         this.effect(ctx, 'value');
       },
       onInput: function onInput(ctx, value) {
         var val;
 
-        if (ctx.input && (this.isQuote(ctx, val = ctx.parser.toValue(value, ctx)) || this.isChange(ctx, val))) {
+        if (ctx.input && (this.isQuote(ctx, val = ctx.parser.toValue(value, ctx)) || this.isChange(ctx, value))) {
           this.setValue(ctx, val, value);
         }
       },
@@ -4008,59 +3891,33 @@
       getFormData: function getFormData(ctx) {
         return this.formData[ctx.id];
       },
-      validate: function validate() {
-        var _this = this;
-
-        toEmpty(this.vm.validate);
-        this.fields().forEach(function (id) {
-          _this.fieldCtx[id].forEach(function (ctx) {
-            _this.vm.validate[ctx.id] = toArray(ctx.rule.validate);
-          });
-        });
-        return this.vm.validate;
-      },
       syncForm: function syncForm() {
-        var _this2 = this;
-
-        toEmpty(this.form);
-        Object.defineProperties(this.form, this.fields().reduce(function (initial, field) {
-          var ctx = _this2.getFieldCtx(field);
+        var _this = this;
 
-          var handle = _this2.valueHandle(ctx);
+        this.fields().reduce(function (initial, field) {
+          var ctx = _this.getCtx(field);
 
-          handle.configurable = true;
-          initial[field] = handle;
+          initial[field] = vue.toRef(ctx.rule, 'value');
           return initial;
         }, Object.keys(this.appendData).reduce(function (initial, field) {
-          initial[field] = {
-            enumerable: true,
-            configurable: true,
-            get: function get() {
-              return _this2.appendData[field];
-            },
-            set: function set(val) {
-              _this2.appendData[field] = val;
-            }
-          };
+          initial[field] = vue.customRef(function (track, trigger) {
+            return {
+              get: function get() {
+                track();
+                return _this.appendData[field];
+              },
+              set: function set(val) {
+                trigger();
+                _this.appendData[field] = val;
+
+                _this.syncValue();
+              }
+            };
+          });
           return initial;
-        }, {})));
+        }, this.form));
         this.syncValue();
       },
-      valueHandle: function valueHandle(ctx) {
-        var _this3 = this;
-
-        return {
-          enumerable: true,
-          get: function get() {
-            return _this3.getValue(ctx);
-          },
-          set: function set(value) {
-            if (_this3.isChange(ctx, value)) {
-              _this3.setValue(ctx, value, ctx.parser.toFormValue(value, ctx), true);
-            }
-          }
-        };
-      },
       appendValue: function appendValue(rule) {
         if (!rule.field || !hasProperty(this.appendData, rule.field)) return;
         rule.value = this.appendData[rule.field];
@@ -4095,20 +3952,20 @@
           return this.deferSyncFn.sync = true;
         }
 
-        this.vm._updateValue(_objectSpread2({}, this.form));
+        this.vm.setupState.updateValue(_objectSpread2({}, this.form));
       },
       isChange: function isChange(ctx, value) {
-        return JSON.stringify(ctx.rule.value) !== JSON.stringify(value);
+        return JSON.stringify(this.getFormData(ctx)) !== JSON.stringify(value);
       },
       isQuote: function isQuote(ctx, value) {
         return (is.Object(value) || Array.isArray(value)) && value === ctx.rule.value;
       },
       refreshUpdate: function refreshUpdate(ctx, val) {
-        var _this4 = this;
+        var _this2 = this;
 
         if (is.Function(ctx.rule.update)) {
           var state = invoke(function () {
-            return ctx.rule.update(val, ctx.origin, _this4.api);
+            return ctx.rule.update(val, ctx.origin, _this2.api);
           });
           if (state === undefined) return;
           ctx.rule.hidden = state === true;
@@ -4128,18 +3985,18 @@
         this.refreshUpdate(ctx, val);
       },
       appendLink: function appendLink(ctx) {
-        var _this5 = this;
+        var _this3 = this;
 
         var link = ctx.rule.link;
         is.trueArray(link) && link.forEach(function (field) {
           var fn = function fn() {
-            return _this5.refreshRule(ctx, ctx.rule.value);
+            return _this3.refreshRule(ctx, ctx.rule.value);
           };
 
-          _this5.bus.$on('change-' + field, fn);
+          _this3.bus.$on('change-' + field, fn);
 
           ctx.linkOn.push(function () {
-            return _this5.bus.$off('change-' + field, fn);
+            return _this3.bus.$off('change-' + field, fn);
           });
         });
       },
@@ -4149,12 +4006,6 @@
     });
   }
 
-  function toEmpty(obj) {
-    Object.keys(obj).forEach(function (k) {
-      return delete obj[k];
-    });
-  }
-
   var BaseParser = {
     init: function init(ctx) {},
     toFormValue: function toFormValue(value, ctx) {
@@ -4217,7 +4068,7 @@
         this.setFormData(ctx, ctx.parser.toFormValue(rule.value, ctx));
 
         if (this.isMounted && !this.reloading) {
-          this.vm.$emit('change', ctx.field, rule.value, ctx.origin, this.api);
+          this.vm.emit('change', ctx.field, rule.value, ctx.origin, this.api);
         }
       },
       getParser: function getParser(ctx) {
@@ -4246,16 +4097,21 @@
       watchCtx: function watchCtx(ctx) {
         var _this = this;
 
-        var vm = this.vm;
         var none = ['field', 'value', 'vm', 'template', 'name', 'config', 'control', 'inject', 'sync', 'payload', 'optionsTo', 'update'];
-        Object.keys(ctx.rule).filter(function (k) {
+        var all = attrs();
+        all.filter(function (k) {
           return none.indexOf(k) === -1;
         }).forEach(function (key) {
+          var ref = vue.toRef(ctx.rule, key);
           var flag = key === 'children';
-          ctx.watch.push(vm.$watch(function () {
-            return ctx.rule[key];
-          }, function (n, o) {
-            if (_this.loading || _this.noWatchFn || _this.reloading) return;
+          ctx.refRule[key] = ref;
+          ctx.watch.push(vue.watch(flag ? function () {
+            return _toConsumableArray(ref.value || []);
+          } : function () {
+            return ref.value;
+          }, function (_, o) {
+            var n = ref.value;
+            if (_this.isBreakWatch()) return;
 
             if (flag && ctx.parser.loadChildren === false) {
               _this.$render.clearCache(ctx);
@@ -4265,34 +4121,29 @@
               return;
             }
 
-            _this.watching = true; // if (key === 'hidden')
-            //     ctx.updateKey(true);
-            // else
+            _this.watching = true;
 
             if (key === 'link') {
               ctx.link();
               return;
-            } else if (['props', 'on', 'nativeOn', 'deep'].indexOf(key) > -1) {
+            } else if (['props', 'on', 'deep'].indexOf(key) > -1) {
               _this.parseInjectEvent(ctx.rule, n || {});
 
               if (key === 'props' && ctx.input) {
                 _this.setFormData(ctx, ctx.parser.toFormValue(ctx.rule.value, ctx));
               }
-            } else if (['emit', 'nativeEmit'].indexOf(key) > -1) _this.parseEmit(ctx, key === 'emit');else if (['prefix', 'suffix'].indexOf(key) > -1) n && _this.loadFn(n, ctx.rule);else if (key === 'type') {
+            } else if (key === 'emit') _this.parseEmit(ctx);else if (['prefix', 'suffix'].indexOf(key) > -1) n && _this.loadFn(n, ctx.rule);else if (key === 'type') {
               ctx.updateType();
 
               _this.bindParser(ctx);
             } else if (key === 'children') {
-              var _flag = is.trueArray(n);
-
               _this.deferSyncValue(function () {
-                if (n !== o) {
-                  _this.rmSub(o);
-
-                  _this.$render.initOrgChildren();
-                }
-
-                _flag && _this.loadChildren(n, ctx);
+                o && o.forEach(function (child) {
+                  if ((n || []).indexOf(child) === -1 && child && !is.String(child) && child.__fc__ && !_this.ctxs[child.__fc__.id]) {
+                    _this.rmCtx(child.__fc__);
+                  }
+                });
+                is.trueArray(n) && _this.loadChildren(n, ctx);
               });
             }
 
@@ -4304,6 +4155,20 @@
             sync: flag
           }));
         });
+
+        if (ctx.input) {
+          var val = vue.toRef(ctx.rule, 'value');
+          ctx.watch.push(vue.watch(function () {
+            return val.value;
+          }, function () {
+            var formValue = ctx.parser.toFormValue(val.value, ctx);
+
+            if (_this.isChange(ctx, formValue)) {
+              _this.setValue(ctx, val.value, formValue, true);
+            }
+          }));
+        }
+
         this.watchEffect(ctx);
       },
       rmSub: function rmSub(sub) {
@@ -4321,21 +4186,9 @@
             field = ctx.field,
             input = ctx.input,
             name = ctx.name;
-
-        if (ctx.input) {
-          Object.defineProperty(ctx.rule, 'value', {
-            value: ctx.rule.value,
-            writable: true
-          });
-        }
-
         $del(this.ctxs, id);
-        $del(this.$render.tempList, id);
-        $del(this.$render.orgChildren, id);
-        $del(this.vm.ctxInject, id);
         $del(this.formData, id);
         $del(this.subForm, id);
-        $del(ctx, 'cacheValue');
         input && this.rmIdCtx(ctx, field, 'field');
         name && this.rmIdCtx(ctx, name, 'name');
         this.deferSyncValue(function () {
@@ -4349,7 +4202,7 @@
             }
 
             if (ctx.root === _this3.rules) {
-              _this3.vm._renderRule();
+              _this3.vm.setupState.renderRule();
             }
           }
         }, input);
@@ -4362,8 +4215,8 @@
         this.$render.clearCache(ctx);
         ctx["delete"]();
         this.effect(ctx, 'deleted');
-        input && !this.fieldCtx[field] && this.vm.$emit('removeField', field, ctx.rule, this.api);
-        ctx.rule.__ctrl || this.vm.$emit('removeRule', ctx.rule, this.api);
+        input && !this.fieldCtx[field] && this.vm.emit('removeField', field, ctx.rule, this.api);
+        ctx.rule.__ctrl || this.vm.emit('removeRule', ctx.rule, this.api);
         return ctx;
       }
     });
@@ -4393,7 +4246,7 @@
         is.Function(fn) && invoke(function () {
           return fn(_this2.api);
         });
-        this.vm.$emit(name, this.api);
+        this.vm.emit(name, this.api);
       }
     });
   }
@@ -4431,9 +4284,9 @@
       watchEffect: function watchEffect(ctx) {
         var _this3 = this;
 
-        var vm = this.vm;
+        this.vm;
         Object.keys(ctx.rule.effect || {}).forEach(function (k) {
-          ctx.watch.push(vm.$watch(function () {
+          ctx.watch.push(vue.watch(function () {
             return ctx.rule.effect[k];
           }, function (n) {
             _this3.effect(ctx, 'watch', _defineProperty({}, k, n));
@@ -4528,6 +4381,14 @@
   function Handler(fc) {
     var _this = this;
 
+    funcProxy(this, {
+      options: function options() {
+        return fc.options.value || {};
+      },
+      bus: function bus() {
+        return fc.bus;
+      }
+    });
     extend(this, {
       fc: fc,
       vm: fc.vm,
@@ -4537,9 +4398,9 @@
       noWatchFn: null,
       deferSyncFn: null,
       isMounted: false,
-      formData: {},
+      formData: vue.reactive({}),
       subForm: {},
-      form: {},
+      form: vue.reactive({}),
       appendData: {},
       providers: {},
       cycleLoad: null,
@@ -4551,14 +4412,6 @@
         _this.lifecycle('reload');
       }
     });
-    funcProxy(this, {
-      options: function options() {
-        return fc.options;
-      },
-      bus: function bus() {
-        return fc.bus;
-      }
-    });
     this.initData(fc.rules);
     this.$manager = new fc.manager(this);
     this.$render = new Render(this);
@@ -4575,19 +4428,20 @@
       });
     },
     init: function init() {
-      this.appendData = _objectSpread2(_objectSpread2(_objectSpread2({}, this.fc.options.formData || {}), this.vm.value || {}), this.appendData);
+      this.appendData = _objectSpread2(_objectSpread2(_objectSpread2({}, this.options.formData || {}), this.fc.vm.props.modelValue || {}), this.appendData);
       this.useProvider();
       this.usePage();
       this.loadRule();
 
       this.$manager.__init();
-
-      this.vm.$set(this.vm, 'formData', this.formData);
+    },
+    isBreakWatch: function isBreakWatch() {
+      return this.loading || this.noWatchFn || this.reloading;
     }
   });
   useInject(Handler);
   usePage(Handler);
-  useRender$1(Handler);
+  useRender(Handler);
   useLoader(Handler);
   useInput(Handler);
   useContext(Handler);
@@ -4665,42 +4519,65 @@
     xhr.send(formData);
   }
 
-  var NAME$9 = 'fcFragment';
-  var fragment = {
-    name: NAME$9,
-    functional: true,
+  var NAME$1 = 'FcFragment';
+  var fragment = vue.defineComponent({
+    name: NAME$1,
+    inheritAttrs: false,
+    props: ['formCreateInject'],
+    setup: function setup(props) {
+      var data = vue.toRef(props, 'formCreateInject');
+      var $inject = vue.reactive(_objectSpread2({}, data.value));
+      vue.watch(data, function () {
+        extend($inject, data.value);
+      });
+      vue.provide('formCreateInject', $inject);
+    },
+    render: function render() {
+      return this.$slots["default"]();
+    }
+  });
+
+  var NAME = 'FcVnode';
+  var vnode = vue.defineComponent({
+    name: NAME,
+    inheritAttrs: false,
     props: ['vnode'],
-    render: function render(h, ctx) {
-      return ctx.props.vnode ? ctx.props.vnode : ctx.children;
+    render: function render() {
+      return this.vnode;
     }
-  };
+  });
 
-  function parseProp(prop) {
-    if (is.String(prop)) return {
-      domProps: {
-        innerHTML: prop
-      }
-    };
-    return prop;
+  function tidyDirectives(directives) {
+    return Object.keys(directives).map(function (n) {
+      var directive = directives[n];
+      return [vue.resolveDirective(n), directive.arg, directive.value, directive.modifiers];
+    });
+  }
+
+  function makeDirective(data, vn) {
+    var directives = data.directives;
+    if (!directives) return vn;
+
+    if (!Array.isArray(directives)) {
+      directives = [directives];
+    }
+
+    return vue.withDirectives(vn, directives.reduce(function (lst, v) {
+      return lst.concat(tidyDirectives(v));
+    }, []));
   }
 
   function CreateNodeFactory() {
     var aliasMap = {};
 
-    function CreateNode(vm) {
-      vm && this.setVm(vm);
-    }
+    function CreateNode() {}
 
     extend(CreateNode.prototype, {
-      setVm: function setVm(vm) {
-        this.vm = vm;
-        this.$h = vm.$createElement;
-      },
       make: function make(tag, data, children) {
-        if (Vue.config.isReservedTag(tag) && data.nativeOn) delete data.nativeOn;
-        var Node = this.$h(tag, parseProp(data), children || []);
-        Node.context = this.vm;
-        return Node;
+        return makeDirective(data, this.h(tag, toProps(data), children));
+      },
+      h: function h(tag, data, children) {
+        return vue.createVNode(vue.getCurrentInstance().appContext.config.isNativeTag(tag) ? tag : vue.resolveComponent(tag), data, children);
       },
       aliasMap: aliasMap
     });
@@ -4778,7 +4655,7 @@
     update: function update() {},
     beforeRender: function beforeRender() {},
     form: function form() {
-      return this.vm.$refs[this.ref];
+      return this.vm.refs[this.ref];
     },
     mergeOptions: function mergeOptions(args, opt) {
       var _this2 = this;
@@ -4879,9 +4756,7 @@
     return true;
   }
 
-  var _vue = typeof window !== 'undefined' && window.Vue ? window.Vue : Vue;
-
-  function _parseProp(name, id) {
+  function parseProp(name, id) {
     var prop;
 
     if (arguments.length === 2) {
@@ -4898,32 +4773,7 @@
   }
 
   function nameProp() {
-    return _parseProp.apply(void 0, ['name'].concat(Array.prototype.slice.call(arguments)));
-  }
-
-  function _getEl(options) {
-    if (!options || !options.el) return window.document.body;
-    return is.Element(options.el) ? options.el : document.querySelector(options.el);
-  }
-
-  function mountForm(rules, option) {
-    var $vm = new _vue({
-      data: function data() {
-        //todo 外部无法修改
-        return {
-          rule: rules,
-          option: option || {}
-        };
-      },
-      render: function render(h) {
-        return h('FormCreate', {
-          ref: 'fc',
-          props: this.$data
-        });
-      }
-    });
-    $vm.$mount();
-    return $vm;
+    return parseProp.apply(void 0, ['name'].concat(Array.prototype.slice.call(arguments)));
   }
 
   function exportAttrs(attrs) {
@@ -4942,6 +4792,7 @@
 
     var parsers = {};
     var directives = {};
+    var modelFields = {};
     var providers = {
       fetch: $fetch
     };
@@ -4986,9 +4837,7 @@
       if (is.String(id)) {
         name = toCase(id);
 
-        if (['form-create', 'formcreate'].indexOf(name) > -1) {
-          return $form();
-        } else if (component === undefined) {
+        if (component === undefined) {
           return components[name];
         }
       } else {
@@ -5002,11 +4851,28 @@
     }
 
     function $form() {
-      return _vue.extend($FormCreate(FormCreate));
+      return $FormCreate(FormCreate);
+    }
+
+    function createFormApp(rule, option) {
+      var Type = $form();
+      return vue.createApp({
+        data: function data() {
+          return vue.reactive({
+            rule: rule,
+            option: option
+          });
+        },
+        render: function render() {
+          return vue.h(Type, _objectSpread2({
+            ref: 'fc'
+          }, this.$data));
+        }
+      });
     }
 
     function $vnode() {
-      return _vue.extend(fragment);
+      return vnode;
     } //todo 检查回调函数作用域
 
 
@@ -5015,95 +4881,91 @@
       return this;
     }
 
-    function create(rules, _opt, parent) {
-      var $vm = mountForm(rules, _opt || {});
-      var _this = $vm.$refs.fc.formCreate;
-      _this.$parent = parent;
-
-      _getEl(_this.options).appendChild($vm.$el);
-
-      return _this.api();
+    function create(rules, option) {
+      var app = createFormApp(rules, option || {});
+      config.appUse && config.appUse(app);
+      var div = document.createElement('div');
+      ((option === null || option === void 0 ? void 0 : option.el) || document.body).appendChild(div);
+      var vm = app.mount(div);
+      return vm.$refs.fc.fapi;
     }
 
     function factory() {
       return FormCreateFactory(config);
     }
 
-    function FormCreate(vm, rules, options) {
+    function setModelField(name, field) {
+      modelFields[name] = field;
+    }
+
+    function FormCreate(vm) {
+      var _this = this;
+
       extend(this, {
-        vm: vm,
         create: create,
+        vm: vm,
         manager: createManager(config.manager),
         parsers: parsers,
         providers: providers,
-        rules: Array.isArray(rules) ? rules : [],
+        modelFields: modelFields,
+        rules: vm.props.rule,
         prop: {
           components: components,
           directives: directives
         },
         CreateNode: CreateNode,
-        bus: new _vue(),
+        bus: new Mitt(),
         unwatch: null,
+        options: vue.ref({}),
         extendApi: config.extendApi || function (api) {
           return api;
         }
       });
-      this.init();
-      this.initOptions(options || {});
+      vue.nextTick(function () {
+        vue.watch(_this.options, function () {
+          _this.$handle.$manager.updateOptions(_this.options.value);
+
+          _this.api().refresh();
+        }, {
+          deep: true
+        });
+      });
+      extend(vm.appContext.components, components);
+      extend(vm.appContext.directives, directives);
+      this.$handle = new Handler(this);
     }
 
     extend(FormCreate.prototype, {
       init: function init() {
         var _this2 = this;
 
-        var vm = this.vm;
-        var h = new Handler(this);
-        this.$handle = h;
-        vm.$f = h.api;
-        vm.$emit('input', h.api);
-        vm.$on('hook:created', function () {
-          if (_this2.isSub()) {
-            _this2.unwatch = vm.$watch(function () {
-              return vm.$pfc.option;
-            }, function () {
-              _this2.initOptions(_this2.options);
-
-              vm.$f.refresh();
-            }, {
-              deep: true
-            });
-
-            _this2.initOptions(_this2.options);
-          }
+        if (this.isSub()) {
+          this.unwatch = vue.watch(function () {
+            return _this2.vm.parent.option;
+          }, function () {
+            _this2.initOptions(_this2.options.value);
 
-          _this2.created();
-        });
-        vm.$on('hook:mounted', function () {
-          _this2.mounted();
-        });
-        vm.$on('hook:beforeDestroy', function () {
-          vm.destroyed = true;
-          _this2.unwatch && _this2.unwatch();
-          h.reloadRule([]);
-        });
-        vm.$on('hook:updated', function () {
-          h.bindNextTick(function () {
-            return _this2.bus.$emit('next-tick', h.api);
+            _this2.$handle.api.refresh();
+          }, {
+            deep: true
           });
-        });
+        }
+
+        this.initOptions(this.vm.props.option || {});
+        this.$handle.init();
       },
       isSub: function isSub() {
-        return this.vm.$pfc && this.vm.extendOption;
+        return this.vm.setupState.parent && this.vm.setupState.extendOption;
       },
       initOptions: function initOptions(options) {
-        this.options = _objectSpread2({
+        this.options.value = _objectSpread2({
           formData: {},
           submitBtn: {},
           resetBtn: {}
         }, deepCopy(globalConfig));
 
         if (this.isSub()) {
-          this.mergeOptions(this.options, this.vm.$pfc.$f.config || {}, true);
+          this.options.value = this.mergeOptions(this.options.value, this.vm.setupState.parent.setupState.fapi.config || {}, true);
         }
 
         this.updateOptions(options);
@@ -5123,11 +4985,8 @@
         return target;
       },
       updateOptions: function updateOptions(options) {
-        this.mergeOptions(this.options, options);
-        this.$handle.$manager.updateOptions(this.options);
-      },
-      created: function created() {
-        this.$handle.init();
+        this.options.value = this.mergeOptions(this.options.value, options);
+        this.$handle.$manager.updateOptions(this.options.value);
       },
       api: function api() {
         return this.$handle.api;
@@ -5137,6 +4996,17 @@
       },
       mounted: function mounted() {
         this.$handle.mounted();
+      },
+      unmount: function unmount() {
+        this.unwatch && this.unwatch();
+        this.$handle.reloadRule([]);
+      },
+      updated: function updated() {
+        var _this3 = this;
+
+        this.$handle.bindNextTick(function () {
+          return _this3.bus.$emit('next-tick', _this3.$handle.api);
+        });
       }
     });
 
@@ -5148,6 +5018,7 @@
         maker: maker,
         component: component,
         directive: directive,
+        setModelField: setModelField,
         register: register,
         $vnode: $vnode,
         parser: parser,
@@ -5159,30 +5030,7 @@
         fetch: fetch,
         $form: $form,
         parseJson: parseJson,
-        toJson: toJson,
-        init: function init(rules) {
-          var _opt = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
-          var $vm = mountForm(rules, _opt),
-              _this = $vm.$refs.fc.formCreate;
-          return {
-            mount: function mount($el) {
-              if ($el && is.Element($el)) _this.options.el = $el;
-
-              _getEl(_this.options).appendChild($vm.$el);
-
-              return _this.api();
-            },
-            remove: function remove() {
-              $vm.$el.parentNode && $vm.$el.parentNode.removeChild($vm.$el);
-            },
-            destroy: function destroy() {
-              this.remove();
-              $vm.$destroy();
-            },
-            $f: _this.api()
-          };
-        }
+        toJson: toJson
       });
     }
 
@@ -5193,17 +5041,16 @@
           globalConfig = _objectSpread2(_objectSpread2({}, globalConfig), options || {});
           if (Vue._installedFormCreate === true) return;
           Vue._installedFormCreate = true;
-          _vue = Vue;
 
           var $formCreate = function $formCreate(rules) {
             var opt = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-            return create(rules, opt, this);
+            return create(rules, opt);
           };
 
           useAttr($formCreate);
-          Vue.prototype.$formCreate = $formCreate;
+          Vue.config.globalProperties.$formCreate = $formCreate;
           Vue.component('FormCreate', $form());
-          Vue.component('FcFragment', $vnode());
+          Vue.component('fc-vnode', vnode);
         }
       });
     }
@@ -5218,22 +5065,21 @@
   }
 
   var DEFAULT_FORMATS = {
-    date: 'yyyy-MM-dd',
-    month: 'yyyy-MM',
-    datetime: 'yyyy-MM-dd HH:mm:ss',
-    week: 'yyyywWW',
+    date: 'YYYY-MM-DD',
+    month: 'YYYY-MM',
+    datetime: 'YYYY-MM-DD HH:mm:ss',
     timerange: 'HH:mm:ss',
-    daterange: 'yyyy-MM-dd',
-    monthrange: 'yyyy-MM',
-    datetimerange: 'yyyy-MM-dd HH:mm:ss',
-    year: 'yyyy'
+    daterange: 'YYYY-MM-DD',
+    monthrange: 'YYYY-MM',
+    datetimerange: 'YYYY-MM-DD HH:mm:ss',
+    year: 'YYYY'
   };
-  var name = 'datePicker';
+  var name$5 = 'datePicker';
   var datePicker = {
-    name: name,
+    name: name$5,
     maker: function () {
       return ['year', 'month', 'date', 'dates', 'week', 'datetime', 'datetimeRange', 'dateRange', 'monthRange'].reduce(function (initial, type) {
-        initial[type] = creatorFactory(name, {
+        initial[type] = creatorFactory(name$5, {
           type: type.toLowerCase()
         });
         return initial;
@@ -5248,28 +5094,28 @@
     }
   };
 
-  var name$1 = 'hidden';
+  var name$4 = 'hidden';
   var hidden = {
-    name: name$1,
-    maker: _defineProperty({}, name$1, function (field, value) {
-      return creatorFactory(name$1)('', field, value);
+    name: name$4,
+    maker: _defineProperty({}, name$4, function (field, value) {
+      return creatorFactory(name$4)('', field, value);
     }),
     render: function render() {
       return [];
     }
   };
 
-  var name$2 = 'input';
+  var name$3 = 'input';
   var input = {
-    name: name$2,
+    name: name$3,
     maker: function () {
       var maker = ['password', 'url', 'email', 'text', 'textarea'].reduce(function (maker, type) {
-        maker[type] = creatorFactory(name$2, {
+        maker[type] = creatorFactory(name$3, {
           type: type
         });
         return maker;
       }, {});
-      maker.idate = creatorFactory(name$2, {
+      maker.idate = creatorFactory(name$3, {
         type: 'date'
       });
       return maker;
@@ -5283,11 +5129,11 @@
     }
   };
 
-  var name$3 = 'slider';
+  var name$2 = 'slider';
   var slider = {
-    name: name$3,
+    name: name$2,
     maker: {
-      sliderRange: creatorFactory(name$3, {
+      sliderRange: creatorFactory(name$2, {
         range: true
       })
     },
@@ -5307,14 +5153,14 @@
     }
   };
 
-  var name$4 = 'timePicker';
+  var name$1 = 'timePicker';
   var timePicker = {
-    name: name$4,
+    name: name$1,
     maker: {
-      time: creatorFactory(name$4, function (m) {
+      time: creatorFactory(name$1, function (m) {
         return m.props.isRange = false;
       }),
-      timeRange: creatorFactory(name$4, function (m) {
+      timeRange: creatorFactory(name$1, function (m) {
         return m.props.isRange = true;
       })
     },
@@ -5334,13 +5180,17 @@
         props: {
           span: 24
         }
-      }, [ctx.vNode.row(ctx.prop, _)]);
+      }, {
+        "default": function _default() {
+          return [ctx.vNode.row(ctx.prop, _)];
+        }
+      });
     }
   };
 
-  var name$5 = 'select';
+  var name = 'select';
   var select = {
-    name: name$5,
+    name: name,
     toFormValue: function toFormValue(value, ctx) {
       if (ctx.prop.props.multiple && !Array.isArray(value)) {
         return toArray(value);
@@ -5354,36 +5204,36 @@
 
   var PRE = 'el';
   var alias = {
-    button: PRE + 'Button',
+    button: PRE + '-button',
     icon: 'i',
-    slider: PRE + 'Slider',
-    rate: PRE + 'Rate',
-    upload: 'fcUpload',
-    cascader: PRE + 'Cascader',
-    popover: PRE + 'Popover',
-    tooltip: PRE + 'Tooltip',
-    colorPicker: PRE + 'ColorPicker',
-    timePicker: PRE + 'TimePicker',
-    timeSelect: PRE + 'TimeSelect',
-    datePicker: PRE + 'DatePicker',
-    'switch': PRE + 'Switch',
-    select: 'fcSelect',
-    checkbox: 'fcCheckbox',
-    radio: 'fcRadio',
-    inputNumber: PRE + 'InputNumber',
-    number: PRE + 'InputNumber',
-    input: PRE + 'Input',
-    formItem: PRE + 'FormItem',
-    form: PRE + 'Form',
-    frame: 'fcFrame',
-    col: PRE + 'Col',
-    row: PRE + 'Row',
-    tree: 'fcTree',
-    autoComplete: PRE + 'Autocomplete',
-    auto: PRE + 'Autocomplete',
-    group: 'fcGroup',
-    object: 'fcSubForm',
-    subForm: 'fcSubForm'
+    slider: PRE + '-slider',
+    rate: PRE + '-rate',
+    upload: 'fc-upload',
+    cascader: PRE + '-cascader',
+    popover: PRE + '-popover',
+    tooltip: PRE + '-tooltip',
+    colorPicker: PRE + '-colorPicker',
+    timePicker: PRE + '-time-picker',
+    timeSelect: PRE + '-time-select',
+    datePicker: PRE + '-date-picker',
+    'switch': PRE + '-switch',
+    select: 'fc-select',
+    checkbox: 'fc-checkbox',
+    radio: 'fc-radio',
+    inputNumber: PRE + '-input-number',
+    number: PRE + '-input-number',
+    input: PRE + '-input',
+    formItem: PRE + '-form-item',
+    form: PRE + '-form',
+    frame: 'fc-frame',
+    col: PRE + '-col',
+    row: PRE + '-row',
+    tree: 'fc-tree',
+    autoComplete: PRE + '-autocomplete',
+    auto: PRE + '-autocomplete',
+    group: 'fc-group',
+    object: 'fc-sub-form',
+    subForm: 'fc-sub-form'
   };
 
   function getConfig() {
@@ -5425,11 +5275,6 @@
     return info.type === 'tooltip';
   }
 
-  var upperCaseReg = /[A-Z]/;
-  function isAttr(name, value) {
-    return !upperCaseReg.test(name) && (is.String(value) || is.Number(value));
-  }
-
   function tidy(props, name) {
     if (!hasProperty(props, name)) return;
 
@@ -5453,18 +5298,23 @@
   }
 
   var manager = {
-    validate: function validate(call) {
-      this.form().validate(call);
+    validate: function validate() {
+      return this.form().validate();
     },
-    validateField: function validateField(field, call) {
-      this.form().validateField(field, call);
+    validateField: function validateField(field) {
+      var _this = this;
+
+      return new Promise(function (resolve, reject) {
+        _this.form().validateField(field, function (res) {
+          res ? reject(res) : resolve(null);
+        });
+      });
     },
     clearValidateState: function clearValidateState(ctx) {
-      var fItem = this.vm.$refs[ctx.wrapRef];
+      var fItem = this.vm.refs[ctx.wrapRef];
 
       if (fItem) {
-        fItem.validateMessage = '';
-        fItem.validateState = '';
+        fItem.clearValidate();
       }
     },
     tidyOptions: function tidyOptions(options) {
@@ -5480,12 +5330,7 @@
       return prop;
     },
     mergeProp: function mergeProp(ctx) {
-      var props = ctx.prop.props;
       ctx.prop = mergeProps([{
-        attrs: Object.keys(props).reduce(function (initial, val) {
-          if (isAttr(val, props[val])) initial[val] = props[val];
-          return initial;
-        }, {}),
         info: this.options.info || {},
         wrap: this.options.wrap || {},
         col: this.options.col || {}
@@ -5511,7 +5356,7 @@
       var form = this.options.form;
       this.rule = {
         props: _objectSpread2({}, form),
-        nativeOn: {
+        on: {
           submit: function submit(e) {
             e.preventDefault();
           }
@@ -5530,18 +5375,23 @@
         ref: ref
       });
       extend(this.rule.props, {
-        model: $handle.formData,
-        rules: $handle.validate()
+        model: $handle.formData
       });
     },
     render: function render(children) {
-      if (children.length) {
-        children.push(this.makeFormBtn());
+      var _this2 = this;
+
+      if (children.slotLen()) {
+        children.setSlot(undefined, function () {
+          return _this2.makeFormBtn();
+        });
       }
 
-      return this.$r(this.rule, isFalse(this.options.row.show) ? children : [this.makeRow(children)]);
+      return this.$r(this.rule, isFalse(this.options.row.show) ? children.getSlots() : [this.makeRow(children)]);
     },
     makeWrap: function makeWrap(ctx, children) {
+      var _this3 = this;
+
       var rule = ctx.prop;
       var uni = "".concat(this.key).concat(ctx.key);
       var col = rule.col;
@@ -5562,7 +5412,15 @@
         key: "".concat(uni, "fi"),
         ref: ctx.wrapRef,
         type: 'formItem'
-      }]), [children, isTitle ? this.makeInfo(rule, uni) : null]);
+      }]), _objectSpread2({
+        "default": function _default() {
+          return children;
+        }
+      }, isTitle ? {
+        label: function label() {
+          return _this3.makeInfo(rule, uni);
+        }
+      } : {}));
       return inline === true || isFalse(_col) || isFalse(col.show) ? item : this.makeCol(rule, uni, [item]);
     },
     isTitle: function isTitle(rule) {
@@ -5571,7 +5429,7 @@
       return !(!title.title && !title["native"] || isFalse(title.show));
     },
     makeInfo: function makeInfo(rule, uni) {
-      var _this = this;
+      var _this4 = this;
 
       var titleProp = rule.title;
       var infoProp = rule.info;
@@ -5579,10 +5437,9 @@
       var form = this.options.form;
       var children = [(titleProp.title || '') + (form.labelSuffix || form['label-suffix'] || '')];
 
-      var titleFn = function titleFn(pop) {
-        return _this.$r(mergeProps([titleProp, {
+      var titleFn = function titleFn() {
+        return _this4.$r(mergeProps([titleProp, {
           props: titleProp,
-          slot: titleProp.slot || (pop ? isTip ? 'default' : 'reference' : 'label'),
           key: "".concat(uni, "tit"),
           type: titleProp.type || 'span'
         }]), children);
@@ -5594,14 +5451,13 @@
             type: 'i',
             "class": infoProp.icon === true ? 'el-icon-warning' : infoProp.icon,
             key: "".concat(uni, "i")
-          }));
+          }, {}, true));
         }
 
         var prop = {
           type: infoProp.type || 'popover',
           props: _objectSpread2({}, infoProp),
-          key: "".concat(uni, "pop"),
-          slot: 'label'
+          key: "".concat(uni, "pop")
         };
         var field = 'content';
 
@@ -5609,7 +5465,9 @@
           prop.props[field] = infoProp.info;
         }
 
-        return this.$r(mergeProps([infoProp, prop]), [titleFn(true)]);
+        return this.$r(mergeProps([infoProp, prop]), _defineProperty({}, titleProp.slot || (isTip ? 'default' : 'reference'), function () {
+          return titleFn();
+        }));
       }
 
       return titleFn();
@@ -5662,9 +5520,12 @@
       }, [item]);
     },
     makeResetBtn: function makeResetBtn() {
-      var _this2 = this;
+      var _this5 = this;
 
-      var resetBtn = this.options.resetBtn;
+      var resetBtn = _objectSpread2({}, this.options.resetBtn);
+
+      var text = resetBtn.innerText;
+      delete resetBtn.innerText;
       return this.$r({
         type: 'button',
         props: resetBtn,
@@ -5673,17 +5534,20 @@
         },
         on: {
           click: function click() {
-            var fApi = _this2.$handle.api;
+            var fApi = _this5.$handle.api;
             resetBtn.click ? resetBtn.click(fApi) : fApi.resetFields();
           }
         },
         key: "".concat(this.key, "b2")
-      }, [resetBtn.innerText]);
+      }, [text]);
     },
     makeSubmitBtn: function makeSubmitBtn() {
-      var _this3 = this;
+      var _this6 = this;
 
-      var submitBtn = this.options.submitBtn;
+      var submitBtn = _objectSpread2({}, this.options.submitBtn);
+
+      var text = submitBtn.innerText;
+      delete submitBtn.innerText;
       return this.$r({
         type: 'button',
         props: submitBtn,
@@ -5692,21 +5556,21 @@
         },
         on: {
           click: function click() {
-            var fApi = _this3.$handle.api;
+            var fApi = _this6.$handle.api;
             submitBtn.click ? submitBtn.click(fApi) : fApi.submit();
           }
         },
         key: "".concat(this.key, "b1")
-      }, [submitBtn.innerText]);
+      }, [text]);
     }
   };
 
-  var maker = {};
-  useAlias(maker);
-  useSelect(maker);
-  useTree(maker);
-  useUpload(maker);
-  useFrame(maker);
+  var maker$1 = {};
+  useAlias(maker$1);
+  useSelect(maker$1);
+  useTree(maker$1);
+  useUpload(maker$1);
+  useFrame(maker$1);
 
   function useAlias(maker) {
     ['group', 'tree', 'switch', 'upload', 'autoComplete', 'checkbox', 'cascader', 'colorPicker', 'datePicker', 'frame', 'inputNumber', 'radio', 'rate'].forEach(function (name) {
@@ -5783,8 +5647,8 @@
     return maker;
   }
 
-  var css_248z$2 = ".form-create .form-create .el-form-item {\n    margin-bottom: 22px;\n}\n\n.form-create .form-create .el-form-item .el-form-item {\n    margin-bottom: 0px;\n}\n\n.form-create{\n    transform: rotateZ(0);\n}\n";
-  styleInject(css_248z$2);
+  var css_248z = ".form-create .form-create .el-form-item{margin-bottom:22px}.form-create .form-create .el-form-item .el-form-item{margin-bottom:0}.form-create{transform:rotate(0)}";
+  styleInject(css_248z);
 
   function tidyBtnProp(btn, def) {
     if (is.Boolean(btn)) btn = {
@@ -5798,103 +5662,38 @@
   function extendApi(api, h) {
     extend(api, {
       validate: function validate(callback) {
-        var flag;
-        var forms = api.children;
-        var len = forms.length;
-
-        var validate = function validate() {
-          h.$manager.validate(function () {
-            for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-              args[_key] = arguments[_key];
-            }
-
-            if (!args[0] || !flag) {
-              flag = args;
-            }
-
-            callback && callback.apply(void 0, _toConsumableArray(flag));
-          });
-        };
-
-        var validFn = function validFn(args) {
-          setTimeout(function () {
-            if (!args[0]) {
-              if (!flag) {
-                flag = args;
-              }
-            }
-
-            if (! --len) {
-              validate();
-            }
+        return new Promise(function (resolve, reject) {
+          var forms = api.children;
+          var all = [h.$manager.validate()];
+          forms.forEach(function (v) {
+            all.push(v.validate());
           });
-        };
-
-        forms.forEach(function (form) {
-          form.validate(function () {
-            for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-              args[_key2] = arguments[_key2];
-            }
-
-            return validFn(args);
+          Promise.all(all).then(function () {
+            resolve(true);
+            callback && callback(true);
+          })["catch"](function (e) {
+            reject(e);
+            callback && callback(e);
           });
         });
-
-        if (!len) {
-          validate();
-        }
       },
       validateField: function validateField(field, callback) {
-        var ctx = h.getFieldCtx(field);
-        if (!ctx) return;
-        var sub = h.subForm[ctx.id];
-        var len = 0;
-        var flag;
-
-        var validate = function validate() {
-          h.$manager.validateField(ctx.id, function () {
-            for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-              args[_key3] = arguments[_key3];
-            }
-
-            if (args[0]) {
-              flag = args;
-            } else if (flag) {
-              return callback && callback('子表单验证未通过', flag[1]);
-            }
-
-            callback && callback.apply(void 0, _toConsumableArray(flag || args));
-          });
-        };
-
-        var validFn = function validFn(args) {
-          setTimeout(function () {
-            if (!args[0]) {
-              if (!flag) {
-                flag = args;
-              }
-            }
-
-            if (! --len) {
-              validate();
-            }
+        return new Promise(function (resolve, reject) {
+          var ctx = h.getFieldCtx(field);
+          if (!ctx) return;
+          var sub = h.subForm[ctx.id];
+          var all = [h.$manager.validateField(ctx.id)];
+          toArray(sub).forEach(function (v) {
+            all.push(v.validate());
           });
-        };
-
-        sub && toArray(sub).forEach(function (form) {
-          len++;
-          form.validate(function () {
-            for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-              args[_key4] = arguments[_key4];
-            }
-
-            return validFn(args);
+          Promise.all(all).then(function () {
+            resolve(null);
+            callback && callback(null);
+          })["catch"](function (e) {
+            reject(e);
+            callback && callback(e);
           });
         });
-
-        if (!len) {
-          validate();
-        }
       },
       clearValidateState: function clearValidateState(fields) {
         var _this = this;
@@ -5982,25 +5781,27 @@
         api.refreshOptions();
       },
       submit: function submit(successFn, failFn) {
-        var _arguments = arguments,
-            _this2 = this;
-
-        api.validate(function (valid) {
-          if (valid) {
+        return new Promise(function (resolve, reject) {
+          api.validate().then(function () {
             var formData = api.formData();
-            if (is.Function(successFn)) invoke(function () {
-              return successFn(formData, _this2);
-            });else {
-              is.Function(h.options.onSubmit) && invoke(function () {
-                return h.options.onSubmit(formData, _this2);
-              });
-              h.vm.$emit('submit', formData, _this2);
+            is.Function(successFn) && invoke(function () {
+              return successFn(formData, api);
+            });
+            is.Function(h.options.onSubmit) && invoke(function () {
+              return h.options.onSubmit(formData, api);
+            });
+            h.vm.emit('submit', formData, api);
+            resolve(formData);
+          })["catch"](function () {
+            for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+              args[_key] = arguments[_key];
             }
-          } else {
+
             is.Function(failFn) && invoke(function () {
-              return failFn.apply(void 0, [_this2].concat(_toConsumableArray(_arguments)));
+              return failFn.apply(void 0, [api].concat(args));
             });
-          }
+            reject.apply(void 0, args);
+          });
         });
       }
     });
@@ -6015,16 +5816,21 @@
     parsers.forEach(function (parser) {
       FormCreate.parser(parser);
     });
-    Object.keys(maker).forEach(function (name) {
-      FormCreate.maker[name] = maker[name];
+    Object.keys(maker$1).forEach(function (name) {
+      FormCreate.maker[name] = maker$1[name];
     });
   }
 
+  function appUse(app) {
+    app.use(ElementPlus__default["default"]);
+  }
+
   function elmFormCreate() {
     return FormCreateFactory({
-      ui: "".concat("element-ui"),
-      version: "".concat("2.5.12"),
+      ui: 'element-ui',
+      version: '3.0.0-alpha.2',
       manager: manager,
+      appUse: appUse,
       extendApi: extendApi,
       install: install,
       attrs: {
@@ -6039,17 +5845,13 @@
 
   if (typeof window !== 'undefined') {
     window.formCreate = FormCreate;
-
-    if (window.Vue) {
-      FormCreate.install(window.Vue);
-    }
   }
 
-  var maker$1 = FormCreate.maker;
+  var maker = FormCreate.maker;
 
-  exports.default = FormCreate;
-  exports.maker = maker$1;
+  exports["default"] = FormCreate;
+  exports.maker = maker;
 
   Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));