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

package/dist/form-create.esm.js

@@ -1,11 +1,10 @@
 /*!
- * @form-create/element-ui v3.0.0-alpha.2
- * (c) 2018-2021 xaboy
+ * @form-create/element-ui v3.1.0
+ * (c) 2018-2022 xaboy
  * Github https://github.com/xaboy/form-create
  * Released under the MIT License.
  */
-import { defineComponent, toRefs, inject, ref, toRef, computed, resolveComponent, createVNode, mergeProps as mergeProps$1, isVNode, nextTick, markRaw, reactive, getCurrentInstance, provide, onMounted, onBeforeUnmount, onUpdated, watch, customRef, withDirectives, resolveDirective, createApp, h } from 'vue';
-import ElementPlus from 'element-plus';
+import { defineComponent, toRef, resolveComponent, createVNode, mergeProps as mergeProps$1, isVNode, nextTick, Fragment, markRaw, reactive, getCurrentInstance, provide, inject, toRefs, onMounted, onBeforeUnmount, onUpdated, watch, computed, customRef, withDirectives, resolveDirective, createApp, h, ref } from 'vue';
 
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
@@ -206,11 +205,12 @@ function getSlot(slots, exclude) {
   }, []);
 }
 
-var NAME$a = 'fcCheckbox';
+var NAME$9 = 'fcCheckbox';
 var Checkbox = defineComponent({
-  name: NAME$a,
+  name: NAME$9,
   inheritAttrs: false,
   props: {
+    formCreateInject: Object,
     modelValue: {
       type: Array,
       "default": function _default() {
@@ -221,46 +221,21 @@ var Checkbox = defineComponent({
   },
   emits: ['update:modelValue'],
   setup: function setup(props, _) {
-    var _toRefs = toRefs(inject('formCreateInject')),
-        options = _toRefs.options;
-
-    var trueValue = ref([]);
+    var options = toRef(props.formCreateInject, 'options', []);
     var value = toRef(props, 'modelValue');
 
-    var _options = computed(function () {
-      return Array.isArray(options) ? options : [];
-    });
-
-    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;
-      }) : [];
+    var _options = function _options() {
+      return Array.isArray(options.value) ? options.value : [];
     };
 
-    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
+        _.emit('update:modelValue', n);
+      }
     };
   },
-  watch: {
-    modelValue: function modelValue() {
-      this.update();
-    }
-  },
   render: function render() {
     var _this$$slots$default,
         _this$$slots,
@@ -269,17 +244,23 @@ var Checkbox = defineComponent({
     var name = this.type === 'button' ? 'ElCheckboxButton' : 'ElCheckbox';
     var Type = resolveComponent(name);
     return createVNode(resolveComponent("ElCheckboxGroup"), mergeProps$1(this.$attrs, {
-      "modelValue": this.trueValue,
+      "modelValue": this.value,
       "onUpdate:modelValue": this.onInput
     }), _objectSpread2({
       "default": function _default() {
-        return [_this.options.map(function (opt, index) {
+        return [_this.options().map(function (opt, index) {
           var props = _objectSpread2({}, opt);
 
+          var value = props.value;
           delete props.value;
           return createVNode(Type, mergeProps$1(props, {
+            "label": value,
             "key": name + index + opt.value
-          }), null);
+          }), {
+            "default": function _default() {
+              return [props.label || props.value || ''];
+            }
+          });
         }), (_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'])));
@@ -361,16 +342,16 @@ function styleInject(css, ref) {
   }
 }
 
-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}";
+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}._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{cursor:pointer}._fc-files,._fc-frame ._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$2);
 
 function _isSlot$1(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
-var NAME$9 = 'fcFrame';
+var NAME$8 = 'fcFrame';
 var Frame = defineComponent({
-  name: NAME$9,
+  name: NAME$8,
   props: {
     type: {
       type: String,
@@ -391,7 +372,7 @@ var Frame = defineComponent({
     },
     icon: {
       type: String,
-      "default": 'el-icon-upload2'
+      "default": 'upload'
     },
     width: {
       type: String,
@@ -414,7 +395,10 @@ var Frame = defineComponent({
       "default": '关闭'
     },
     modalTitle: String,
-    handleIcon: [String, Boolean],
+    handleIcon: {
+      type: [String, Boolean],
+      "default": undefined
+    },
     title: String,
     allowRemove: {
       type: Boolean,
@@ -469,9 +453,9 @@ var Frame = defineComponent({
     okBtn: {
       type: Boolean,
       "default": true
-    }
+    },
+    formCreateInject: Object
   },
-  inject: ['formCreateInject'],
   emits: ['update:modelValue', 'change'],
   data: function data() {
     return {
@@ -488,9 +472,6 @@ var Frame = defineComponent({
     }
   },
   methods: {
-    key: function key(unique) {
-      return unique;
-    },
     close: function close() {
       this.closeModel(true);
     },
@@ -530,7 +511,7 @@ var Frame = defineComponent({
         }).toString(),
         readonly: true
       }, {
-        "key": this.key('input')
+        "key": 1
       }), {
         append: function append() {
           return createVNode(resolveComponent("ElButton"), {
@@ -541,14 +522,18 @@ var Frame = defineComponent({
           }, null);
         },
         suffix: function suffix() {
-          return _this.fileList.length ? createVNode("i", {
-            "class": "el-input__icon el-icon-circle-close",
+          return _this.fileList.length ? createVNode(resolveComponent("ElIcon"), {
+            "class": "el-input__icon",
             "onClick": function onClick() {
               _this.fileList = [];
 
               _this.input();
             }
-          }, null) : null;
+          }, {
+            "default": function _default() {
+              return [createVNode(resolveComponent("CircleClose"), null, null)];
+            }
+          }) : null;
         }
       });
     },
@@ -558,13 +543,13 @@ var Frame = defineComponent({
       }
 
       return createVNode("div", {
-        "key": this.key('group')
+        "key": 2
       }, [children]);
     },
     makeItem: function makeItem(index, children) {
       return createVNode("div", {
-        "class": "fc-files",
-        "key": this.key('file' + index)
+        "class": "_fc-files",
+        "key": '3' + index
       }, [children]);
     },
     valid: function valid(f) {
@@ -587,43 +572,53 @@ var Frame = defineComponent({
         }
 
         return createVNode("div", {
-          "class": "fc-upload-cover",
-          "key": this.key('uc')
+          "class": "_fc-upload-cover",
+          "key": 4
         }, [icons]);
       }
     },
     makeHandleIcon: function makeHandleIcon(val, index) {
       var _this2 = this;
 
-      return createVNode("i", {
-        "class": this.handleIcon === true || this.handleIcon === undefined ? 'el-icon-view' : this.handleIcon,
+      var Type = resolveComponent(this.handleIcon === true || this.handleIcon === undefined ? 'view' : this.handleIcon);
+      return createVNode(resolveComponent("ElIcon"), {
         "onClick": function onClick() {
           return _this2.handleClick(val);
         },
-        "key": this.key('hi' + index)
-      }, null);
+        "key": '5' + index
+      }, {
+        "default": function _default() {
+          return [createVNode(Type, null, null)];
+        }
+      });
     },
     makeRemoveIcon: function makeRemoveIcon(val, index) {
       var _this3 = this;
 
-      return createVNode("i", {
-        "class": "el-icon-delete",
+      return createVNode(resolveComponent("ElIcon"), {
         "onClick": function onClick() {
           return _this3.handleRemove(val);
         },
-        "key": this.key('ri' + index)
-      }, null);
+        "key": '6' + index
+      }, {
+        "default": function _default() {
+          return [createVNode(resolveComponent("delete"), null, null)];
+        }
+      });
     },
     makeFiles: function makeFiles() {
       var _this4 = this;
 
       return this.makeGroup(this.fileList.map(function (src, index) {
-        return _this4.makeItem(index, [createVNode("i", {
-          "class": "el-icon-tickets",
+        return _this4.makeItem(index, [createVNode(resolveComponent("ElIcon"), {
           "onClick": function onClick() {
             return _this4.handleClick(src);
           }
-        }, null), _this4.makeIcons(src, index)]);
+        }, {
+          "default": function _default() {
+            return [createVNode(resolveComponent("document"), null, null)];
+          }
+        }), _this4.makeIcons(src, index)]);
       }));
     },
     makeImages: function makeImages() {
@@ -638,15 +633,18 @@ var Frame = defineComponent({
     makeBtn: function makeBtn() {
       var _this6 = this;
 
+      var Type = resolveComponent(this.icon);
       return createVNode("div", {
-        "class": "fc-upload-btn",
+        "class": "_fc-upload-btn",
         "onClick": function onClick() {
           return _this6.showModel();
         },
-        "key": this.key('btn')
-      }, [createVNode("i", {
-        "class": this.icon
-      }, null)]);
+        "key": 7
+      }, [createVNode(resolveComponent("ElIcon"), null, {
+        "default": function _default() {
+          return [createVNode(Type, null, null)];
+        }
+      })]);
     },
     handleClick: function handleClick(src) {
       if (this.onHandle) {
@@ -776,7 +774,6 @@ var Frame = defineComponent({
     }, {
       "default": function _default() {
         return [createVNode("img", {
-          "alt": "example",
           "style": "width: 100%",
           "src": _this9.previewImage
         }, null)];
@@ -798,7 +795,7 @@ var Frame = defineComponent({
           "src": src,
           "frameBorder": "0",
           "style": {
-            'height': height,
+            height: height,
             'border': '0 none',
             'width': '100%'
           }
@@ -827,59 +824,35 @@ var Frame = defineComponent({
   }
 });
 
-var NAME$8 = 'fcRadio';
+var NAME$7 = 'fcRadio';
 var Radio = defineComponent({
-  name: NAME$8,
+  name: NAME$7,
   inheritAttrs: false,
   props: {
+    formCreateInject: Object,
     modelValue: {
-      type: [String, Number],
-      "default": function _default() {
-        return [];
-      }
+      type: [String, Number, Boolean],
+      "default": ''
     },
     type: String
   },
   emits: ['update:modelValue'],
   setup: function setup(props, _) {
-    var _toRefs = toRefs(inject('formCreateInject')),
-        options = _toRefs.options;
-
-    var trueValue = ref([]);
+    var options = toRef(props.formCreateInject, 'options', []);
     var value = toRef(props, 'modelValue');
 
-    var _options = computed(function () {
-      return Array.isArray(options) ? options : [];
-    });
-
-    var update = function update() {
-      trueValue.value = _options.value.filter(function (opt) {
-        return opt.value === value.value;
-      }).reduce(function (initial, opt) {
-        return opt.label;
-      }, '');
+    var _options = function _options() {
+      return Array.isArray(options.value) ? options.value : [];
     };
 
-    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;
-        }, ''));
-      },
-      update: update
+        _.emit('update:modelValue', n);
+      }
     };
   },
-  watch: {
-    modelValue: function modelValue() {
-      this.update();
-    }
-  },
   render: function render() {
     var _this$$slots$default,
         _this$$slots,
@@ -888,46 +861,49 @@ var Radio = defineComponent({
     var name = this.type === 'button' ? 'ElRadioButton' : 'ElRadio';
     var Type = resolveComponent(name);
     return createVNode(resolveComponent("ElRadioGroup"), mergeProps$1(this.$attrs, {
-      "modelValue": this.trueValue,
+      "modelValue": this.value,
       "onUpdate:modelValue": this.onInput
     }), _objectSpread2({
       "default": function _default() {
-        return [_this.options.map(function (opt, index) {
+        return [_this.options().map(function (opt, index) {
           var props = _objectSpread2({}, opt);
 
+          var value = props.value;
           delete props.value;
           return createVNode(Type, mergeProps$1(props, {
+            "label": value,
             "key": name + index + opt.value
-          }), null);
+          }), {
+            "default": function _default() {
+              return [props.label || props.value || ''];
+            }
+          });
         }), (_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$7 = 'fcSelect';
+var NAME$6 = 'fcSelect';
 var Select = defineComponent({
-  name: NAME$7,
+  name: NAME$6,
   inheritAttrs: false,
   props: {
+    formCreateInject: Object,
     modelValue: {
-      type: Array,
-      "default": function _default() {
-        return [];
-      }
+      type: [Array, String, Number, Boolean, Object],
+      "default": undefined
     },
     type: String
   },
   emits: ['update:modelValue'],
   setup: function setup(props) {
-    var _toRefs = toRefs(inject('formCreateInject')),
-        options = _toRefs.options;
-
+    var options = toRef(props.formCreateInject, 'options', []);
     var value = toRef(props, 'modelValue');
 
-    var _options = computed(function () {
-      return Array.isArray(options) ? options : [];
-    });
+    var _options = function _options() {
+      return Array.isArray(options.value) ? options.value : [];
+    };
 
     return {
       options: _options,
@@ -946,7 +922,7 @@ var Select = defineComponent({
       }
     }), _objectSpread2({
       "default": function _default() {
-        return [_this.options.map(function (props, index) {
+        return [_this.options().map(function (props, index) {
           return createVNode(resolveComponent("ElOption"), mergeProps$1(props, {
             "key": '' + index + props.value
           }), null);
@@ -956,9 +932,9 @@ var Select = defineComponent({
   }
 });
 
-var NAME$6 = 'fcTree';
+var NAME$5 = 'fcTree';
 var Tree = defineComponent({
-  name: NAME$6,
+  name: NAME$5,
   inheritAttrs: false,
   formCreateParser: {
     mergeProp: function mergeProp(ctx) {
@@ -1020,7 +996,7 @@ var Tree = defineComponent({
   }
 });
 
-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}";
+var css_248z$1 = "._fc-exceed .el-upload{display:none}";
 styleInject(css_248z$1);
 
 function parseFile(file, i) {
@@ -1035,33 +1011,18 @@ function getFileName(file) {
   return ('' + file).split('/').pop();
 }
 
-var NAME$5 = 'fcUpload';
+var NAME$4 = 'fcUpload';
 var Upload = defineComponent({
-  name: NAME$5,
+  name: NAME$4,
   inheritAttrs: false,
   props: {
-    onHandle: Function,
-    uploadType: {
-      type: String,
-      "default": 'file'
-    },
-    limit: {
-      type: Number,
-      "default": 0
-    },
-    allowRemove: {
-      type: Boolean,
-      "default": true
-    },
     previewMask: undefined,
     modalTitle: String,
-    handleIcon: [String, Boolean],
     modelValue: [Array, String]
   },
-  emits: ['update:modelValue'],
+  emits: ['update:modelValue', 'change', 'remove'],
   data: function data() {
     return {
-      uploadList: [],
       previewVisible: false,
       previewImage: '',
       fileList: []
@@ -1072,13 +1033,6 @@ var Upload = defineComponent({
   },
   watch: {
     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) {
@@ -1088,121 +1042,16 @@ var Upload = defineComponent({
     }
   },
   methods: {
-    key: function key(unique) {
-      return unique;
-    },
-    isDisabled: function isDisabled() {
-      return this.$attrs.disabled === true;
-    },
-    onRemove: function onRemove(file) {
-      if (this.isDisabled()) {
-        return;
-      }
-
-      this.$refs.upload.handleRemove(file);
-    },
-    handleClick: function handleClick(file) {
-      if (this.onHandle) {
-        return this.onHandle(file);
+    handlePreview: function handlePreview(file) {
+      if (this.onPreview) {
+        this.onPreview.apply(this, arguments);
       } else {
         this.previewImage = file.url;
         this.previewVisible = true;
       }
     },
-    makeItem: function makeItem(file, index) {
-      return this.uploadType === 'image' ? createVNode("img", {
-        "src": file.url,
-        "key": this.key('img' + index)
-      }, null) : createVNode("i", {
-        "class": "el-icon-document",
-        "key": this.key('i' + index)
-      }, null);
-    },
-    makeRemoveIcon: function makeRemoveIcon(file, index) {
-      var _this = this;
-
-      return createVNode("i", {
-        "class": "el-icon-delete",
-        "onClick": function onClick() {
-          return _this.onRemove(file);
-        },
-        "key": this.key('ri' + index)
-      }, null);
-    },
-    makeHandleIcon: function makeHandleIcon(file, index) {
-      var _this2 = this;
-
-      return createVNode("i", {
-        "class": this.handleIcon === true || this.handleIcon === undefined ? 'el-icon-view' : this.handleIcon,
-        "onClick": function onClick() {
-          return _this2.handleClick(file);
-        },
-        "key": this.key('hi' + index)
-      }, null);
-    },
-    makeProgress: function makeProgress(file, index) {
-      return createVNode(resolveComponent("ElProgress"), mergeProps$1({
-        percentage: file.percentage,
-        type: 'circle',
-        width: 52
-      }, {
-        "style": "margin-top:2px;",
-        "key": this.key('pg' + index)
-      }), null);
-    },
-    makeIcons: function makeIcons(file, index) {
-      var icons = [];
-
-      if (this.allowRemove || this.handleIcon !== false) {
-        if (this.uploadType !== 'file' && this.handleIcon !== false || this.uploadType === 'file' && this.handleIcon) {
-          icons.push(this.makeHandleIcon(file, index));
-        }
-
-        if (this.allowRemove) {
-          icons.push(this.makeRemoveIcon(file, index));
-        }
-
-        return createVNode("div", {
-          "class": 'fc-upload-cover'
-        }, [icons]);
-      }
-    },
-    makeFiles: function makeFiles() {
-      var _this3 = this;
-
-      return this.uploadList.map(function (file, index) {
-        return 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 _this$$slots$default,
-          _this$$slots,
-          _this4 = this;
-
-      var isShow = !this.limit || this.limit > this.uploadList.length;
-      return createVNode(resolveComponent("ElUpload"), mergeProps$1(this.$attrs, {
-        "showFileList": false,
-        "fileList": this.fileList,
-        "ref": "upload",
-        "style": {
-          display: 'inline-block'
-        },
-        "key": this.key('upload')
-      }), _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)) || createVNode("div", {
-            "class": 'fc-upload-btn'
-          }, [createVNode("i", {
-            "class": "el-icon-upload2"
-          }, null)]) : undefined];
-        }
-      }, getSlot(this.$slots, ['default'])));
-    },
-    update: function update() {
-      var files = this.$refs.upload.uploadFiles.map(function (file) {
+    update: function update(fileList) {
+      var files = fileList.map(function (file) {
         return file.url;
       }).filter(function (url) {
         return url !== undefined;
@@ -1211,14 +1060,44 @@ var Upload = defineComponent({
     },
     handleCancel: function handleCancel() {
       this.previewVisible = false;
+    },
+    handleChange: function handleChange(file, fileList) {
+      this.$emit.apply(this, ['change'].concat(Array.prototype.slice.call(arguments)));
+
+      if (file.status === 'success') {
+        this.update(fileList);
+      }
+    },
+    handleRemove: function handleRemove(file, fileList) {
+      this.$emit.apply(this, ['remove'].concat(Array.prototype.slice.call(arguments)));
+      this.update(fileList);
     }
   },
   render: function render() {
-    var _this5 = this;
+    var _this$$slots$default,
+        _this$$slots,
+        _this = this;
 
-    return createVNode("div", {
-      "class": '_fc-upload'
-    }, [[this.$attrs.showFileList ? [] : this.makeFiles(), this.makeUpload()], createVNode(resolveComponent("ElDialog"), {
+    return createVNode(Fragment, null, [createVNode(resolveComponent("ElUpload"), mergeProps$1({
+      "key": this.modelValue.length,
+      "list-type": "picture-card"
+    }, this.$attrs, {
+      "class": {
+        '_fc-exceed': this.$attrs.limit ? this.$attrs.limit <= this.modelValue.length : false
+      },
+      "onPreview": this.handlePreview,
+      "onChange": this.handleChange,
+      "onRemove": this.handleRemove,
+      "fileList": this.fileList
+    }), _objectSpread2({
+      "default": function _default() {
+        return [((_this$$slots$default = (_this$$slots = _this.$slots)["default"]) === null || _this$$slots$default === void 0 ? void 0 : _this$$slots$default.call(_this$$slots)) || createVNode(resolveComponent("ElIcon"), null, {
+          "default": function _default() {
+            return [createVNode(resolveComponent("upload"), null, null)];
+          }
+        })];
+      }
+    }, getSlot(this.$slots, ['default']))), createVNode(resolveComponent("ElDialog"), {
       "appendToBody": true,
       "modal": this.previewMask,
       "title": this.modalTitle,
@@ -1227,24 +1106,11 @@ var Upload = defineComponent({
     }, {
       "default": function _default() {
         return [createVNode("img", {
-          "alt": "example",
           "style": "width: 100%",
-          "src": _this5.previewImage
+          "src": _this.previewImage
         }, null)];
       }
     })]);
-  },
-  mounted: function mounted() {
-    var _this6 = this;
-
-    this.uploadList = this.$refs.upload.uploadFiles;
-    this.$watch(function () {
-      return _this6.$refs.upload.uploadFiles;
-    }, function () {
-      _this6.update();
-    }, {
-      deep: true
-    });
   }
 });
 
@@ -1275,9 +1141,9 @@ function _isSlot(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
-var NAME$4 = 'fcGroup';
+var NAME$3 = 'fcGroup';
 var Group = defineComponent({
-  name: NAME$4,
+  name: NAME$3,
   props: {
     field: String,
     rule: Array,
@@ -1320,9 +1186,9 @@ var Group = defineComponent({
     onBeforeAdd: {
       type: Function,
       "default": function _default() {}
-    }
+    },
+    formCreateInject: Object
   },
-  inject: ['formCreateInject'],
   data: function data() {
     return {
       len: 0,
@@ -1379,7 +1245,8 @@ var Group = defineComponent({
           });
         }
       },
-      deep: true
+      deep: true,
+      flush: 'post'
     }
   },
   methods: {
@@ -1499,24 +1366,31 @@ var Group = defineComponent({
       this.input(this.modelValue);
     },
     addIcon: function addIcon(key) {
-      return createVNode("i", {
+      return createVNode(resolveComponent("el-icon"), {
         "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', ";"),
         "onClick": this.add
-      }, null);
+      }, {
+        "default": function _default() {
+          return [createVNode(resolveComponent("circle-plus"), null, null)];
+        }
+      });
     },
     delIcon: function delIcon(index, key) {
       var _this7 = this;
 
-      return createVNode("i", {
+      return createVNode(resolveComponent("ElIcon"), {
         "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', ";"),
         "onClick": function onClick() {
           return _this7.del(index, key);
         }
-      }, null);
+      }, {
+        "default": function _default() {
+          return [createVNode(resolveComponent("remove"), null, null)];
+        }
+      });
     },
     makeIcon: function makeIcon(total, index, key) {
       var _this8 = this;
@@ -1554,13 +1428,13 @@ var Group = defineComponent({
   created: function created() {
     var d = (this.expand || 0) - this.modelValue.length;
 
-    if (d > 0) {
-      this.expandRule(d);
-    }
-
     for (var i = 0; i < this.modelValue.length; i++) {
       this.addRule(i);
     }
+
+    if (d > 0) {
+      this.expandRule(d);
+    }
   },
   render: function render() {
     var _this9 = this;
@@ -1572,12 +1446,12 @@ var Group = defineComponent({
       vm: this,
       add: this.add
     }) : createVNode("i", {
-      "key": 'a_def',
+      "key": 1,
       "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', ";"),
       "onClick": this.add
     }, null) : createVNode("div", {
-      "key": 'con'
+      "key": 2
     }, [keys.map(function (key, index) {
       var _slot;
 
@@ -1635,9 +1509,9 @@ var Group = defineComponent({
   }
 });
 
-var NAME$3 = 'fcSubForm';
+var NAME$2 = 'fcSubForm';
 var Sub = defineComponent({
-  name: NAME$3,
+  name: NAME$2,
   props: {
     rule: Array,
     options: {
@@ -1662,9 +1536,9 @@ var Sub = defineComponent({
     syncDisabled: {
       type: Boolean,
       "default": true
-    }
+    },
+    formCreateInject: Object
   },
-  inject: ['formCreateInject'],
   data: function data() {
     return {
       cacheValue: {},
@@ -1725,10 +1599,10 @@ var Sub = defineComponent({
 
 var components = [Checkbox, Frame, Radio, Select, Tree, Upload, Group, Sub];
 
-var NAME$2 = 'FormCreate';
+var NAME$1 = 'FormCreate';
 function $FormCreate(FormCreate) {
   return defineComponent({
-    name: NAME$2,
+    name: NAME$1,
     props: {
       rule: {
         type: Array,
@@ -1745,22 +1619,24 @@ function $FormCreate(FormCreate) {
       },
       extendOption: Boolean,
       modelValue: Object,
-      api: Object
+      api: Object,
+      name: String
     },
-    emits: ['update:api', 'update:modelValue', 'mounted', 'submit', 'change', 'emit-event', 'control', 'remove-rule', 'remove-field', 'sync'],
+    emits: ['update:api', 'update:modelValue', 'mounted', 'submit', 'change', 'emit-event', 'control', 'remove-rule', 'remove-field', 'sync', 'reload', 'repeat-field', 'update'],
     render: function render() {
       return this.fc.render();
     },
     setup: function setup(props) {
       var vm = getCurrentInstance();
       provide('parentFC', vm);
-      var parent = inject('parentFC');
+      var parent = inject('parentFC', null);
 
       var _toRefs = toRefs(props),
           rule = _toRefs.rule,
           modelValue = _toRefs.modelValue;
 
       var data = reactive({
+        ctxInject: {},
         destroyed: false,
         isShow: true,
         unique: 1,
@@ -1949,14 +1825,18 @@ function deepExtend(origin) {
         }
 
         origin[key] = deepExtend(origin[key], clone, mode);
-      } else if (is.Undef(clone)) {
-        $set(origin, key, clone);
-      } else if (clone.__json !== undefined) {
-        $set(origin, key, clone.__json);
-      } else if (clone.__origin !== undefined) {
-        $set(origin, key, clone.__origin);
       } else {
         $set(origin, key, clone);
+
+        if (!is.Undef(clone)) {
+          if (!is.Undef(clone.__json)) {
+            origin[key].__json = clone.__json;
+          }
+
+          if (!is.Undef(clone.__origin)) {
+            origin[key].__origin = clone.__origin;
+          }
+        }
       }
     }
   }
@@ -2004,7 +1884,7 @@ function toJson(obj, space) {
       return val;
     }
 
-    if (hasProperty(val, '__json')) {
+    if (val.__json) {
       return val.__json;
     }
 
@@ -2205,33 +2085,6 @@ function toProps(rule) {
   return prop;
 }
 
-function toString(val) {
-  return val == null ? '' : _typeof(val) === 'object' ? JSON.stringify(val, null, 2) : String(val);
-}
-
-var id$1 = 0;
-function uniqueId() {
-  return Math.random().toString(36).substr(3, 3) + Number("".concat(Date.now()).concat(++id$1)).toString(36);
-}
-
-function deepSet(data, idx, val) {
-  var _data = data,
-      to;
-  (idx || '').split('.').forEach(function (v) {
-    if (to) {
-      if (!_data[to] || _typeof(_data[to]) != 'object') {
-        _data[to] = {};
-      }
-
-      _data = _data[to];
-    }
-
-    to = v;
-  });
-  _data[to] = val;
-  return _data;
-}
-
 function baseRule() {
   return {
     props: {},
@@ -2337,11 +2190,6 @@ function Api(h) {
   }
 
   var api = {
-    helper: {
-      tidyFields: tidyFields,
-      props: props
-    },
-
     get config() {
       return h.options;
     },
@@ -2437,7 +2285,8 @@ function Api(h) {
 
       if (ctx) {
         if (child) {
-          rules = ctx.rule.children;
+          rules = ctx.getPending('children', ctx.rule.children);
+          if (!Array.isArray(rules)) return;
           index = ctx.rule.children.length - 1;
         } else {
           index = ctx.root.indexOf(ctx.origin);
@@ -2454,7 +2303,8 @@ function Api(h) {
 
       if (ctx) {
         if (child) {
-          rules = ctx.rule.children;
+          rules = ctx.getPending('children', ctx.rule.children);
+          if (!Array.isArray(rules)) return;
         } else {
           index = ctx.root.indexOf(ctx.origin);
           rules = ctx.root;
@@ -2489,6 +2339,12 @@ function Api(h) {
       });
       h.refresh();
     },
+    all: function all(origin) {
+      return Object.keys(h.ctxs).map(function (k) {
+        var ctx = h.ctxs[k];
+        return origin ? ctx.origin : ctx.rule;
+      });
+    },
     model: function model(origin) {
       return h.fields().reduce(function (initial, key) {
         var ctx = h.fieldCtx[key][0];
@@ -2674,6 +2530,19 @@ function Api(h) {
     nextRefresh: function nextRefresh(fn) {
       h.nextRefresh();
       fn && invoke(fn);
+    },
+    emit: function emit(name) {
+      var _h$vm;
+
+      for (var _len3 = arguments.length, args = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
+        args[_key3 - 1] = arguments[_key3];
+      }
+
+      (_h$vm = h.vm).emit.apply(_h$vm, [name].concat(args));
+    },
+    helper: {
+      tidyFields: tidyFields,
+      props: props
     }
   };
   ['on', 'once', 'off', 'set'].forEach(function (n) {
@@ -2735,11 +2604,55 @@ function lower(str) {
   return str.replace(str[0], str[0].toLowerCase());
 }
 
+function toString(val) {
+  return val == null ? '' : _typeof(val) === 'object' ? JSON.stringify(val, null, 2) : String(val);
+}
+
+var id$2 = 0;
+function uniqueId() {
+  return Math.random().toString(36).substr(3, 3) + Number("".concat(Date.now()).concat(++id$2)).toString(36);
+}
+
+function deepSet(data, idx, val) {
+  var _data = data,
+      to;
+  (idx || '').split('.').forEach(function (v) {
+    if (to) {
+      if (!_data[to] || _typeof(_data[to]) != 'object') {
+        _data[to] = {};
+      }
+
+      _data = _data[to];
+    }
+
+    to = v;
+  });
+  _data[to] = val;
+  return _data;
+}
+
 function useRender$1(Render) {
   extend(Render.prototype, {
     initRender: function initRender() {
       this.cacheConfig = {};
     },
+    getTypeSlot: function getTypeSlot(type) {
+      var name = 'type-' + toLine(type);
+
+      var _fn = function _fn(vm) {
+        if (vm) {
+          var slot = vm.slots[name] || vm.slots['type-' + type];
+
+          if (slot) {
+            return slot;
+          }
+
+          return _fn(vm.setupState.parent);
+        }
+      };
+
+      return _fn(this.vm);
+    },
     render: function render() {
       var _this = this;
 
@@ -2760,7 +2673,7 @@ function useRender$1(Render) {
         ctx.initProp();
         this.mergeGlobal(ctx);
         ctx.initNone();
-        var slots = this.renderChildren(ctx);
+        var slots = this.renderChildren(ctx.loadChildrenPending(), ctx);
         var def = slots["default"];
         def && slotBag.setSlot(ctx.rule.slot, function () {
           return def();
@@ -2787,8 +2700,15 @@ function useRender$1(Render) {
       ctx.prop = mergeRule({}, [this.cacheConfig[ctx.trueType].value, ctx.prop]);
     },
     setOptions: function setOptions(ctx) {
-      if (ctx.prop.optionsTo && ctx.prop.options) {
-        deepSet(ctx.prop, ctx.prop.optionsTo, ctx.prop.options);
+      var opt = ctx.loadPending({
+        key: 'options',
+        origin: ctx.prop.options,
+        def: []
+      });
+      ctx.prop.options = opt;
+
+      if (ctx.prop.optionsTo && opt) {
+        deepSet(ctx.prop, ctx.prop.optionsTo, opt);
       }
     },
     deepSet: function deepSet$1(ctx) {
@@ -2817,49 +2737,54 @@ function useRender$1(Render) {
     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;
-        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;
-        }
+      try {
+        if (ctx.type === 'hidden') return;
+        var rule = ctx.rule;
+        var preview = this.options.preview || false;
+
+        if (!this.cache[ctx.id] || this.cache[ctx.id].slot !== rule.slot) {
+          var vn;
+          ctx.initProp();
+          this.mergeGlobal(ctx);
+          ctx.initNone();
+          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;
+          }
 
-        vn = function vn() {
-          return _this4.item(ctx, function () {
+          vn = function vn() {
             var children = {};
 
+            var _load = ctx.loadChildrenPending();
+
             if (ctx.parser.renderChildren) {
-              children = ctx.parser.renderChildren(ctx);
+              children = ctx.parser.renderChildren(_load, ctx);
             } else if (ctx.parser.loadChildren !== false) {
-              children = _this4.renderChildren(ctx);
+              children = _this4.renderChildren(_load, ctx);
             }
 
-            var slot = 'type-' + toLine(ctx.type);
+            var slot = _this4.getTypeSlot(ctx.type);
 
             var _vn;
 
-            if (_this4.vm.slots[slot]) {
-              _vn = _this4.vm.slots[slot]({
+            if (slot) {
+              _vn = slot({
                 rule: rule,
                 prop: prop,
+                preview: preview,
                 children: children,
                 api: _this4.$handle.api,
                 model: prop.model || {}
               });
             } else {
-              _vn = ctx.parser.render(_this4.renderChildren(ctx), ctx);
+              _vn = preview ? ctx.parser.preview(children, ctx) : ctx.parser.render(children, ctx);
             }
 
             _vn = _this4.renderSides(_vn, ctx);
@@ -2872,16 +2797,22 @@ function useRender$1(Render) {
               _vn = _this4.display(_vn);
             }
 
+            _this4.setCache(ctx, function () {
+              return _vn;
+            }, parent);
+
             return _vn;
-          });
-        };
+          };
 
-        this.setCache(ctx, vn, parent);
-        ctx._vnode = vn;
-        return vn;
-      }
+          this.setCache(ctx, vn, parent);
+          return vn;
+        }
 
-      return this.getCache(ctx);
+        return this.getCache(ctx);
+      } catch (e) {
+        console.error(e);
+        return;
+      }
     },
     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';
@@ -2915,29 +2846,36 @@ function useRender$1(Render) {
         return vn;
       }
     },
-    item: function item(ctx, 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 _this6 = this;
 
-      return {
-        api: this.$handle.api,
-        form: this.fc.create,
-        subForm: function subForm(_subForm) {
-          _this6.$handle.addSubForm(ctx, _subForm);
-        },
-        field: ctx.field,
-        options: ctx.prop.options || [],
-        children: ctx.rule.children,
-        rule: ctx.rule
-      };
+      var state = this.vm.setupState;
+
+      if (!state.ctxInject[ctx.id]) {
+        state.ctxInject[ctx.id] = {
+          api: this.$handle.api,
+          form: this.fc.create,
+          subForm: function subForm(_subForm) {
+            _this6.$handle.addSubForm(ctx, _subForm);
+          },
+          options: [],
+          children: [],
+          preview: false,
+          field: ctx.field,
+          rule: ctx.rule
+        };
+      }
+
+      var inject = state.ctxInject[ctx.id];
+      extend(inject, {
+        preview: this.options.preview || false,
+        options: ctx.prop.options,
+        children: ctx.loadChildrenPending()
+      });
+      return inject;
     },
     ctxProp: function ctxProp(ctx, custom) {
       var _this7 = this;
@@ -2981,10 +2919,9 @@ function useRender$1(Render) {
     onInput: function onInput(ctx, value) {
       this.$handle.onInput(ctx, value);
     },
-    renderChildren: function renderChildren(ctx) {
+    renderChildren: function renderChildren(children, ctx) {
       var _this8 = this;
 
-      var children = ctx.rule.children;
       if (!is.trueArray(children)) return {};
       var slotBag = makeSlotBag();
       children.map(function (child) {
@@ -3041,12 +2978,16 @@ function useRender$1(Render) {
         });
       }
 
-      return this.vNode.make(type, rule, slotBag.mergeBag(children).getSlots());
+      var props = _objectSpread2({}, rule);
+
+      delete props.type;
+      delete props.is;
+      return this.vNode.make(type, props, slotBag.mergeBag(children).getSlots());
     }
   });
 }
 
-var id = 1;
+var id$1 = 1;
 function Render(handle) {
   extend(this, {
     $handle: handle,
@@ -3054,7 +2995,7 @@ function Render(handle) {
     vm: handle.vm,
     $manager: handle.$manager,
     vNode: new handle.fc.CreateNode(handle.vm),
-    id: id++
+    id: id$1++
   });
   funcProxy(this, {
     options: function options() {
@@ -3302,6 +3243,7 @@ function RuleContext(handle, rule) {
     rule: rule,
     origin: rule.__origin__ || rule,
     name: rule.name,
+    pending: {},
     none: false,
     watch: [],
     linkOn: [],
@@ -3324,6 +3266,102 @@ function RuleContext(handle, rule) {
   this.update(handle, true);
 }
 extend(RuleContext.prototype, {
+  loadChildrenPending: function loadChildrenPending() {
+    var _this = this;
+
+    var children = this.rule.children || [];
+    if (Array.isArray(children)) return children;
+    return this.loadPending({
+      key: 'children',
+      origin: children,
+      def: [],
+      onLoad: function onLoad(data) {
+        _this.$handle && _this.$handle.loadChildren(data, _this);
+      },
+      onUpdate: function onUpdate(value, oldValue) {
+        if (_this.$handle) {
+          value === oldValue ? _this.$handle.loadChildren(value, _this) : _this.$handle.updateChildren(_this, value, oldValue);
+        }
+      },
+      onReload: function onReload(value) {
+        if (_this.$handle) {
+          _this.$handle.updateChildren(_this, [], value);
+        } else {
+          delete _this.pending.children;
+        }
+      }
+    });
+  },
+  loadPending: function loadPending(config) {
+    var _this2 = this;
+
+    var key = config.key,
+        origin = config.origin,
+        def = config.def,
+        onLoad = config.onLoad,
+        onReload = config.onReload,
+        onUpdate = config.onUpdate;
+
+    if (this.pending[key] && this.pending[key].origin === origin) {
+      return this.getPending(key, def);
+    }
+
+    delete this.pending[key];
+    var value = origin;
+
+    if (is.Function(origin)) {
+      var source = invoke(function () {
+        return origin({
+          rule: _this2.rule,
+          api: _this2.$api,
+          update: function update(data) {
+            var value = data || def;
+
+            var oldValue = _this2.getPending(key, def);
+
+            _this2.setPending(key, origin, value);
+
+            onUpdate && onUpdate(value, oldValue);
+          },
+          reload: function reload() {
+            var oldValue = _this2.getPending(key, def);
+
+            delete _this2.pending[key];
+            onReload && onReload(oldValue);
+            _this2.$api && _this2.$api.sync(_this2.rule);
+          }
+        });
+      });
+
+      if (source && is.Function(source.then)) {
+        source.then(function (data) {
+          var value = data || def;
+
+          _this2.setPending(key, origin, value);
+
+          onLoad && onLoad(value);
+          _this2.$api && _this2.$api.sync(_this2.rule);
+        });
+        value = def;
+        this.setPending(key, origin, value);
+      } else {
+        value = source || def;
+        this.setPending(key, origin, value);
+        onLoad && onLoad(value);
+      }
+    }
+
+    return value;
+  },
+  getPending: function getPending(key, def) {
+    return this.pending[key] && this.pending[key].value || def;
+  },
+  setPending: function setPending(key, origin, value) {
+    this.pending[key] = {
+      origin: origin,
+      value: reactive(value)
+    };
+  },
   effectData: function effectData(name) {
     if (!this.payload[name]) {
       this.payload[name] = {};
@@ -3347,13 +3385,13 @@ extend(RuleContext.prototype, {
     parser.init(this);
   },
   initProp: function initProp() {
-    var _this = this;
+    var _this3 = this;
 
     var rule = _objectSpread2({}, this.rule);
 
     delete rule.children;
     this.prop = mergeProps([rule].concat(_toConsumableArray(Object.keys(this.payload).map(function (k) {
-      return _this.payload[k];
+      return _this3.payload[k];
     })), [this.computed]));
   },
   initNone: function initNone() {
@@ -3380,10 +3418,10 @@ extend(RuleContext.prototype, {
     this.$handle.appendLink(this);
   },
   watchTo: function watchTo() {
-    var _this2 = this;
+    var _this4 = this;
 
     nextTick(function () {
-      _this2.$handle.watchCtx(_this2);
+      _this4.$handle && _this4.$handle.watchCtx(_this4);
     });
   },
   "delete": function _delete() {
@@ -3413,15 +3451,15 @@ extend(RuleContext.prototype, {
     this.ctrlRule = [];
   },
   rm: function rm() {
-    var _this3 = this;
+    var _this5 = this;
 
     var _rm = function _rm() {
-      var index = _this3.root.indexOf(_this3.origin);
+      var index = _this5.root.indexOf(_this5.origin);
 
       if (index > -1) {
-        _this3.root.splice(index, 1);
+        _this5.root.splice(index, 1);
 
-        _this3.$handle && _this3.$handle.refresh();
+        _this5.$handle && _this5.$handle.refresh();
       }
     };
 
@@ -3432,17 +3470,17 @@ extend(RuleContext.prototype, {
     }
 
     this.$handle.noWatch(function () {
-      _this3.$handle.deferSyncValue(function () {
-        _this3.rmCtrl();
+      _this5.$handle.deferSyncValue(function () {
+        _this5.rmCtrl();
 
         _rm();
 
-        _this3.$handle.rmCtx(_this3);
+        _this5.$handle.rmCtx(_this5);
 
-        extend(_this3, {
+        extend(_this5, {
           root: []
         });
-      }, _this3.input);
+      }, _this5.input);
     });
   },
   update: function update(handle, init) {
@@ -3481,7 +3519,6 @@ function useLoader(Handler) {
       });
       fullRule(rule);
       this.appendValue(rule);
-      rule.options = Array.isArray(rule.options) ? rule.options : [];
       [rule, rule['prefix'], rule['suffix']].forEach(function (item) {
         if (!item) {
           return;
@@ -3601,7 +3638,7 @@ function useLoader(Handler) {
         if (!is.Object(_rule) || !getRule(_rule).type) return err('未定义生成规则的 type 字段', _rule);
 
         if (_rule.__fc__ && _rule.__fc__.root === rules && _this6.ctxs[_rule.__fc__.id]) {
-          loadChildren(_rule.__fc__.rule.children, _rule.__fc__);
+          loadChildren(_rule.__fc__.loadChildrenPending(), _rule.__fc__);
           return _rule.__fc__;
         }
 
@@ -3672,7 +3709,10 @@ function useLoader(Handler) {
         _this6.setCtx(ctx);
 
         !isCopy && !isInit && _this6.effect(ctx, 'load');
-        ctx.parser.loadChildren === false || loadChildren(ctx.rule.children, ctx);
+
+        var _load = ctx.loadChildrenPending();
+
+        ctx.parser.loadChildren === false || loadChildren(_load, ctx);
 
         if (!parent) {
           var _preIndex = preIndex(index);
@@ -3768,7 +3808,7 @@ function useLoader(Handler) {
           if (valid) {
             flag = true;
             var ruleCon = {
-              type: 'template',
+              type: 'fragment',
               "native": true,
               __ctrl: true,
               children: rule
@@ -3825,6 +3865,7 @@ function useLoader(Handler) {
       this.refresh();
       this.bus.$off('next-tick', this.nextReload);
       this.bus.$once('next-tick', this.nextReload);
+      this.bus.$emit('update', this.api);
     },
     //todo 组件生成全部通过 alias
     refresh: function refresh() {
@@ -3868,7 +3909,7 @@ function useInput(Handler) {
       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 || false);
       this.effect(ctx, 'value');
     },
     onInput: function onInput(ctx, value) {
@@ -3879,7 +3920,7 @@ function useInput(Handler) {
       }
     },
     setFormData: function setFormData(ctx, value) {
-      $set(this.formData, ctx.id, value);
+      $set(this.formData, ctx.id, value === undefined ? null : value);
     },
     getFormData: function getFormData(ctx) {
       return this.formData[ctx.id];
@@ -3948,7 +3989,7 @@ function useInput(Handler) {
       this.vm.setupState.updateValue(_objectSpread2({}, this.form));
     },
     isChange: function isChange(ctx, value) {
-      return JSON.stringify(this.getFormData(ctx)) !== JSON.stringify(value);
+      return JSON.stringify(this.getFormData(ctx), strFn) !== JSON.stringify(value, strFn);
     },
     isQuote: function isQuote(ctx, value) {
       return (is.Object(value) || Array.isArray(value)) && value === ctx.rule.value;
@@ -3972,6 +4013,7 @@ function useInput(Handler) {
       if (this.refreshControl(ctx)) {
         this.$render.clearCacheAll();
         this.loadRule();
+        this.bus.$emit('update', this.api);
         this.refresh();
       }
 
@@ -3999,6 +4041,10 @@ function useInput(Handler) {
   });
 }
 
+function strFn(key, val) {
+  return typeof val === 'function' ? '' + val : val;
+}
+
 var BaseParser = {
   init: function init(ctx) {},
   toFormValue: function toFormValue(value, ctx) {
@@ -4011,6 +4057,9 @@ var BaseParser = {
   render: function render(children, ctx) {
     return ctx.$render.defaultRender(ctx, children);
   },
+  preview: function preview(children, ctx) {
+    return ctx.$render.defaultRender(ctx, children);
+  },
   mergeProp: function mergeProp(ctx) {}
 };
 
@@ -4093,13 +4142,13 @@ function useContext(Handler) {
       var none = ['field', 'value', 'vm', 'template', 'name', 'config', 'control', 'inject', 'sync', 'payload', 'optionsTo', 'update'];
       var all = attrs();
       all.filter(function (k) {
-        return none.indexOf(k) === -1;
+        return k[0] !== '_' && none.indexOf(k) === -1;
       }).forEach(function (key) {
         var ref = toRef(ctx.rule, key);
         var flag = key === 'children';
         ctx.refRule[key] = ref;
         ctx.watch.push(watch(flag ? function () {
-          return _toConsumableArray(ref.value || []);
+          return is.Function(ref.value) ? ref.value : _toConsumableArray(ref.value || []);
         } : function () {
           return ref.value;
         }, function (_, o) {
@@ -4129,15 +4178,16 @@ function useContext(Handler) {
             ctx.updateType();
 
             _this.bindParser(ctx);
-          } else if (key === 'children') {
-            _this.deferSyncValue(function () {
-              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);
-            });
+          } else if (flag) {
+            if (is.Function(o)) {
+              o = ctx.getPending('children', []);
+            }
+
+            if (is.Function(n)) {
+              n = ctx.loadChildrenPending();
+            }
+
+            _this.updateChildren(ctx, n, o);
           }
 
           _this.$render.clearCache(ctx);
@@ -4164,15 +4214,32 @@ function useContext(Handler) {
 
       this.watchEffect(ctx);
     },
-    rmSub: function rmSub(sub) {
+    updateChildren: function updateChildren(ctx, n, o) {
       var _this2 = this;
 
+      this.deferSyncValue(function () {
+        o && o.forEach(function (child) {
+          if ((n || []).indexOf(child) === -1 && child && !is.String(child) && child.__fc__) {
+            _this2.rmCtx(child.__fc__);
+          }
+        });
+
+        if (is.trueArray(n)) {
+          _this2.loadChildren(n, ctx);
+
+          _this2.bus.$emit('update', _this2.api);
+        }
+      });
+    },
+    rmSub: function rmSub(sub) {
+      var _this3 = this;
+
       is.trueArray(sub) && sub.forEach(function (r) {
-        r && r.__fc__ && _this2.rmCtx(r.__fc__);
+        r && r.__fc__ && _this3.rmCtx(r.__fc__);
       });
     },
     rmCtx: function rmCtx(ctx) {
-      var _this3 = this;
+      var _this4 = this;
 
       if (ctx.deleted) return;
       var id = ctx.id,
@@ -4182,20 +4249,23 @@ function useContext(Handler) {
       $del(this.ctxs, id);
       $del(this.formData, id);
       $del(this.subForm, id);
+      $del(this.vm.setupState.ctxInject, id);
       input && this.rmIdCtx(ctx, field, 'field');
       name && this.rmIdCtx(ctx, name, 'name');
       this.deferSyncValue(function () {
-        if (!_this3.reloading) {
+        if (!_this4.reloading) {
           if (ctx.parser.loadChildren !== false) {
-            if (is.trueArray(ctx.rule.children)) {
-              ctx.rule.children.forEach(function (h) {
-                return h.__fc__ && _this3.rmCtx(h.__fc__);
+            var children = ctx.getPending('children', ctx.rule.children);
+
+            if (is.trueArray(children)) {
+              children.forEach(function (h) {
+                return h.__fc__ && _this4.rmCtx(h.__fc__);
               });
             }
           }
 
-          if (ctx.root === _this3.rules) {
-            _this3.vm.setupState.renderRule();
+          if (ctx.root === _this4.rules) {
+            _this4.vm.setupState.renderRule();
           }
         }
       }, input);
@@ -4208,8 +4278,8 @@ function useContext(Handler) {
       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('remove-field', field, ctx.rule, this.api);
+      ctx.rule.__ctrl || this.vm.emit('remove-rule', ctx.rule, this.api);
       return ctx;
     }
   });
@@ -4277,7 +4347,6 @@ function useEffect(Handler) {
     watchEffect: function watchEffect(ctx) {
       var _this3 = this;
 
-      this.vm;
       Object.keys(ctx.rule.effect || {}).forEach(function (k) {
         ctx.watch.push(watch(function () {
           return ctx.rule.effect[k];
@@ -4315,7 +4384,7 @@ function useEffect(Handler) {
           input = _ref.input,
           type = _ref.type,
           custom = _ref.custom;
-      if (!type || type === 'fcFragment') return;
+      if (!type || ['fcFragment', 'fragment'].indexOf(type) > -1) return;
       var effect = custom ? custom : rule.effect || {};
       Object.keys(effect).forEach(function (attr) {
         var p = _this4.providers[attr];
@@ -4512,26 +4581,8 @@ function fetch(option) {
   xhr.send(formData);
 }
 
-var NAME$1 = 'FcFragment';
+var NAME = 'fcFragment';
 var fragment = defineComponent({
-  name: NAME$1,
-  inheritAttrs: false,
-  props: ['formCreateInject'],
-  setup: function setup(props) {
-    var data = toRef(props, 'formCreateInject');
-    var $inject = reactive(_objectSpread2({}, data.value));
-    watch(data, function () {
-      extend($inject, data.value);
-    });
-    provide('formCreateInject', $inject);
-  },
-  render: function render() {
-    return this.$slots["default"]();
-  }
-});
-
-var NAME = 'FcVnode';
-var vnode = defineComponent({
   name: NAME,
   inheritAttrs: false,
   props: ['vnode'],
@@ -4542,8 +4593,12 @@ var vnode = defineComponent({
 
 function tidyDirectives(directives) {
   return Object.keys(directives).map(function (n) {
-    var directive = directives[n];
-    return [resolveDirective(n), directive.arg, directive.value, directive.modifiers];
+    var data = directives[n];
+    var directive = resolveDirective(n);
+    if (!directive) return;
+    return [directive, data.value, data.arg, data.modifiers];
+  }).filter(function (v) {
+    return !!v;
   });
 }
 
@@ -4570,7 +4625,18 @@ function CreateNodeFactory() {
       return makeDirective(data, this.h(tag, toProps(data), children));
     },
     h: function h(tag, data, children) {
-      return createVNode(getCurrentInstance().appContext.config.isNativeTag(tag) ? tag : resolveComponent(tag), data, children);
+      var isNativeTag = getCurrentInstance().appContext.config.isNativeTag(tag);
+
+      if (isNativeTag) {
+        delete data.formCreateInject;
+      }
+
+      try {
+        return createVNode(isNativeTag ? tag : resolveComponent(tag), data, children);
+      } catch (e) {
+        console.error(e);
+        return createVNode('');
+      }
     },
     aliasMap: aliasMap
   });
@@ -4698,6 +4764,11 @@ function parseOpt(option) {
 
 function run(inject, rule, api) {
   var option = inject.value;
+
+  if (is.Function(option)) {
+    option = option(rule, api);
+  }
+
   option = parseOpt(option);
 
   if (!option || !option.action) {
@@ -4749,6 +4820,25 @@ function run(inject, rule, api) {
   return true;
 }
 
+var name$6 = 'html';
+var html = {
+  name: name$6,
+  loadChildren: false,
+  render: function render(children, ctx) {
+    ctx.prop.props.innerHTML = children["default"]();
+    return ctx.vNode.make(ctx.prop.props.tag || 'div', ctx.prop);
+  },
+  renderChildren: function renderChildren(children) {
+    return {
+      "default": function _default() {
+        return children.filter(function (v) {
+          return is.String(v);
+        }).join('');
+      }
+    };
+  }
+};
+
 function parseProp(name, id) {
   var prop;
 
@@ -4777,8 +4867,10 @@ function exportAttrs(attrs) {
   arrayAttrs.push.apply(arrayAttrs, _toConsumableArray(array));
   normalAttrs.push.apply(normalAttrs, _toConsumableArray(normal));
   appendProto([].concat(_toConsumableArray(key), _toConsumableArray(array), _toConsumableArray(normal)));
-} //todo 表单嵌套
+}
 
+var id = 1;
+var instance = {}; //todo 表单嵌套
 
 function FormCreateFactory(config) {
   var components = _defineProperty({}, fragment.name, fragment);
@@ -4786,6 +4878,7 @@ function FormCreateFactory(config) {
   var parsers = {};
   var directives = {};
   var modelFields = {};
+  var useApps = [];
   var providers = {
     fetch: $fetch
   };
@@ -4797,6 +4890,14 @@ function FormCreateFactory(config) {
   var CreateNode = CreateNodeFactory();
   exportAttrs(config.attrs || {});
 
+  function getApi(name) {
+    return instance[name];
+  }
+
+  function useApp(fn) {
+    useApps.push(fn);
+  }
+
   function directive() {
     var data = nameProp.apply(void 0, arguments);
     if (data.id && data.prop) directives[data.id] = data.prop;
@@ -4865,7 +4966,7 @@ function FormCreateFactory(config) {
   }
 
   function $vnode() {
-    return vnode;
+    return fragment;
   } //todo 检查回调函数作用域
 
 
@@ -4876,7 +4977,11 @@ function FormCreateFactory(config) {
 
   function create(rules, option) {
     var app = createFormApp(rules, option || {});
-    config.appUse && config.appUse(app);
+    useApps.forEach(function (v) {
+      invoke(function () {
+        return v(create, app);
+      });
+    });
     var div = document.createElement('div');
     ((option === null || option === void 0 ? void 0 : option.el) || document.body).appendChild(div);
     var vm = app.mount(div);
@@ -4895,6 +5000,7 @@ function FormCreateFactory(config) {
     var _this = this;
 
     extend(this, {
+      id: id++,
       create: create,
       vm: vm,
       manager: createManager(config.manager),
@@ -4902,6 +5008,7 @@ function FormCreateFactory(config) {
       providers: providers,
       modelFields: modelFields,
       rules: vm.props.rule,
+      name: vm.props.name,
       prop: {
         components: components,
         directives: directives
@@ -4926,6 +5033,10 @@ function FormCreateFactory(config) {
     extend(vm.appContext.components, components);
     extend(vm.appContext.directives, directives);
     this.$handle = new Handler(this);
+
+    if (this.name) {
+      instance[this.name] = this.api();
+    }
   }
 
   extend(FormCreate.prototype, {
@@ -4991,6 +5102,10 @@ function FormCreateFactory(config) {
       this.$handle.mounted();
     },
     unmount: function unmount() {
+      if (this.name) {
+        delete instance[this.name];
+      }
+
       this.unwatch && this.unwatch();
       this.$handle.reloadRule([]);
     },
@@ -5022,18 +5137,21 @@ function FormCreateFactory(config) {
       copyRules: copyRules,
       fetch: fetch,
       $form: $form,
+      parseFn: parseFn,
       parseJson: parseJson,
-      toJson: toJson
+      toJson: toJson,
+      useApp: useApp,
+      getApi: getApi
     });
   }
 
   function useStatic(formCreate) {
     extend(formCreate, {
       create: create,
-      install: function install(Vue, options) {
+      install: function install(app, options) {
         globalConfig = _objectSpread2(_objectSpread2({}, globalConfig), options || {});
-        if (Vue._installedFormCreate === true) return;
-        Vue._installedFormCreate = true;
+        if (app._installedFormCreate === true) return;
+        app._installedFormCreate = true;
 
         var $formCreate = function $formCreate(rules) {
           var opt = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -5041,9 +5159,13 @@ function FormCreateFactory(config) {
         };
 
         useAttr($formCreate);
-        Vue.config.globalProperties.$formCreate = $formCreate;
-        Vue.component('FormCreate', $form());
-        Vue.component('fc-vnode', vnode);
+        app.config.globalProperties.$formCreate = $formCreate;
+        app.component('FormCreate', $form());
+        useApps.forEach(function (v) {
+          invoke(function () {
+            return v(formCreate, app);
+          });
+        });
       }
     });
   }
@@ -5053,7 +5175,13 @@ function FormCreateFactory(config) {
   CreateNode.use({
     fragment: 'fcFragment'
   });
-  if (config.install) create.use(config);
+  config.install && create.use(config);
+  useApp(function (_, app) {
+    app.mixin({
+      props: ['formCreateInject']
+    });
+  });
+  parser(html);
   return create;
 }
 
@@ -5198,7 +5326,7 @@ var parsers = [datePicker, hidden, input, slider, timePicker, row, select];
 var PRE = 'el';
 var alias = {
   button: PRE + '-button',
-  icon: 'i',
+  icon: PRE + '-icon',
   slider: PRE + '-slider',
   rate: PRE + '-rate',
   upload: 'fc-upload',
@@ -5255,7 +5383,6 @@ function getConfig() {
       type: 'default',
       loading: false,
       disabled: false,
-      icon: 'el-icon-refresh',
       innerText: '重置',
       show: false,
       col: undefined,
@@ -5292,15 +5419,29 @@ function tidyBool(opt, name) {
 
 var manager = {
   validate: function validate() {
-    return this.form().validate();
+    var form = this.form();
+
+    if (form) {
+      return form.validate();
+    } else {
+      return new Promise(function (v) {
+        return v();
+      });
+    }
   },
   validateField: function validateField(field) {
     var _this = this;
 
     return new Promise(function (resolve, reject) {
-      _this.form().validateField(field, function (res) {
-        res ? reject(res) : resolve(null);
-      });
+      var form = _this.form();
+
+      if (form) {
+        form.validateField(field, function (res) {
+          res ? reject(res) : resolve(null);
+        });
+      } else {
+        resolve();
+      }
     });
   },
   clearValidateState: function clearValidateState(ctx) {
@@ -5331,7 +5472,7 @@ var manager = {
       info: {
         trigger: 'hover',
         placement: 'top-start',
-        icon: 'el-icon-warning'
+        icon: true
       },
       title: {},
       col: {
@@ -5430,40 +5571,41 @@ var manager = {
     var form = this.options.form;
     var children = [(titleProp.title || '') + (form.labelSuffix || form['label-suffix'] || '')];
 
-    var titleFn = function titleFn() {
-      return _this4.$r(mergeProps([titleProp, {
-        props: titleProp,
-        key: "".concat(uni, "tit"),
-        type: titleProp.type || 'span'
-      }]), children);
-    };
-
-    if (!isFalse(infoProp.show) && (infoProp.info || infoProp["native"])) {
-      if (infoProp.icon !== false) {
-        children[infoProp.align !== 'left' ? 'unshift' : 'push'](this.$r({
-          type: 'i',
-          "class": infoProp.icon === true ? 'el-icon-warning' : infoProp.icon,
-          key: "".concat(uni, "i")
-        }, {}, true));
-      }
-
+    if (!isFalse(infoProp.show) && (infoProp.info || infoProp["native"]) && !isFalse(infoProp.icon)) {
       var prop = {
         type: infoProp.type || 'popover',
         props: _objectSpread2({}, infoProp),
         key: "".concat(uni, "pop")
       };
+      delete prop.props.icon;
+      delete prop.props.show;
+      delete prop.props.info;
       var field = 'content';
 
       if (infoProp.info && !hasProperty(prop.props, field)) {
         prop.props[field] = infoProp.info;
       }
 
-      return this.$r(mergeProps([infoProp, prop]), _defineProperty({}, titleProp.slot || (isTip ? 'default' : 'reference'), function () {
-        return titleFn();
-      }));
+      children[infoProp.align !== 'left' ? 'unshift' : 'push'](this.$r(mergeProps([infoProp, prop]), _defineProperty({}, titleProp.slot || (isTip ? 'default' : 'reference'), function () {
+        return _this4.$r({
+          type: 'ElIcon',
+          style: 'top:2px',
+          key: "".concat(uni, "i")
+        }, {
+          "default": function _default() {
+            return _this4.$r({
+              type: infoProp.icon === true ? 'warning' : infoProp.icon
+            });
+          }
+        }, true);
+      })));
     }
 
-    return titleFn();
+    return this.$r(mergeProps([titleProp, {
+      props: titleProp,
+      key: "".concat(uni, "tit"),
+      type: titleProp.type || 'span'
+    }]), children);
   },
   makeCol: function makeCol(rule, uni, children) {
     var col = rule.col;
@@ -5517,7 +5659,7 @@ var manager = {
 
     var resetBtn = _objectSpread2({}, this.options.resetBtn);
 
-    var text = resetBtn.innerText;
+    var innerText = resetBtn.innerText;
     delete resetBtn.innerText;
     return this.$r({
       type: 'button',
@@ -5532,14 +5674,14 @@ var manager = {
         }
       },
       key: "".concat(this.key, "b2")
-    }, [text]);
+    }, [innerText]);
   },
   makeSubmitBtn: function makeSubmitBtn() {
     var _this6 = this;
 
     var submitBtn = _objectSpread2({}, this.options.submitBtn);
 
-    var text = submitBtn.innerText;
+    var innerText = submitBtn.innerText;
     delete submitBtn.innerText;
     return this.$r({
       type: 'button',
@@ -5554,7 +5696,7 @@ var manager = {
         }
       },
       key: "".concat(this.key, "b1")
-    }, [text]);
+    }, [innerText]);
   }
 };
 
@@ -5640,7 +5782,7 @@ function useFrame(maker) {
   return maker;
 }
 
-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)}";
+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{width:100%}";
 styleInject(css_248z);
 
 function tidyBtnProp(btn, def) {
@@ -5812,18 +5954,19 @@ function install(FormCreate) {
   Object.keys(maker$1).forEach(function (name) {
     FormCreate.maker[name] = maker$1[name];
   });
-}
 
-function appUse(app) {
-  app.use(ElementPlus);
+  if (typeof window !== 'undefined' && window.ElementPlus) {
+    FormCreate.useApp(function (_, app) {
+      app.use(window.ElementPlus);
+    });
+  }
 }
 
 function elmFormCreate() {
   return FormCreateFactory({
     ui: 'element-ui',
-    version: '3.0.0-alpha.2',
+    version: '3.1.0',
     manager: manager,
-    appUse: appUse,
     extendApi: extendApi,
     install: install,
     attrs: {