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

package/dist/form-create.js

@@ -1,18 +1,14 @@
 /*!
- * @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.
  */
 (function (global, factory) {
-  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);
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.formCreate = {}, global.Vue));
+})(this, (function (exports, vue) { 'use strict';
 
   function ownKeys(object, enumerableOnly) {
     var keys = Object.keys(object);
@@ -213,11 +209,12 @@
     }, []);
   }
 
-  var NAME$a = 'fcCheckbox';
+  var NAME$9 = 'fcCheckbox';
   var Checkbox = vue.defineComponent({
-    name: NAME$a,
+    name: NAME$9,
     inheritAttrs: false,
     props: {
+      formCreateInject: Object,
       modelValue: {
         type: Array,
         "default": function _default() {
@@ -228,46 +225,21 @@
     },
     emits: ['update:modelValue'],
     setup: function setup(props, _) {
-      var _toRefs = vue.toRefs(vue.inject('formCreateInject')),
-          options = _toRefs.options;
-
-      var trueValue = vue.ref([]);
+      var options = vue.toRef(props.formCreateInject, 'options', []);
       var value = vue.toRef(props, 'modelValue');
 
-      var _options = vue.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,
@@ -276,17 +248,23 @@
       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,
+        "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 vue.createVNode(Type, vue.mergeProps(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'])));
@@ -368,16 +346,16 @@
     }
   }
 
-  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]' && !vue.isVNode(s);
   }
 
-  var NAME$9 = 'fcFrame';
+  var NAME$8 = 'fcFrame';
   var Frame = vue.defineComponent({
-    name: NAME$9,
+    name: NAME$8,
     props: {
       type: {
         type: String,
@@ -398,7 +376,7 @@
       },
       icon: {
         type: String,
-        "default": 'el-icon-upload2'
+        "default": 'upload'
       },
       width: {
         type: String,
@@ -421,7 +399,10 @@
         "default": '关闭'
       },
       modalTitle: String,
-      handleIcon: [String, Boolean],
+      handleIcon: {
+        type: [String, Boolean],
+        "default": undefined
+      },
       title: String,
       allowRemove: {
         type: Boolean,
@@ -476,9 +457,9 @@
       okBtn: {
         type: Boolean,
         "default": true
-      }
+      },
+      formCreateInject: Object
     },
-    inject: ['formCreateInject'],
     emits: ['update:modelValue', 'change'],
     data: function data() {
       return {
@@ -495,9 +476,6 @@
       }
     },
     methods: {
-      key: function key(unique) {
-        return unique;
-      },
       close: function close() {
         this.closeModel(true);
       },
@@ -537,7 +515,7 @@
           }).toString(),
           readonly: true
         }, {
-          "key": this.key('input')
+          "key": 1
         }), {
           append: function append() {
             return vue.createVNode(vue.resolveComponent("ElButton"), {
@@ -548,14 +526,18 @@
             }, null);
           },
           suffix: function suffix() {
-            return _this.fileList.length ? vue.createVNode("i", {
-              "class": "el-input__icon el-icon-circle-close",
+            return _this.fileList.length ? vue.createVNode(vue.resolveComponent("ElIcon"), {
+              "class": "el-input__icon",
               "onClick": function onClick() {
                 _this.fileList = [];
 
                 _this.input();
               }
-            }, null) : null;
+            }, {
+              "default": function _default() {
+                return [vue.createVNode(vue.resolveComponent("CircleClose"), null, null)];
+              }
+            }) : null;
           }
         });
       },
@@ -565,13 +547,13 @@
         }
 
         return vue.createVNode("div", {
-          "key": this.key('group')
+          "key": 2
         }, [children]);
       },
       makeItem: function makeItem(index, children) {
         return vue.createVNode("div", {
-          "class": "fc-files",
-          "key": this.key('file' + index)
+          "class": "_fc-files",
+          "key": '3' + index
         }, [children]);
       },
       valid: function valid(f) {
@@ -594,43 +576,53 @@
           }
 
           return vue.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 vue.createVNode("i", {
-          "class": this.handleIcon === true || this.handleIcon === undefined ? 'el-icon-view' : this.handleIcon,
+        var Type = vue.resolveComponent(this.handleIcon === true || this.handleIcon === undefined ? 'view' : this.handleIcon);
+        return vue.createVNode(vue.resolveComponent("ElIcon"), {
           "onClick": function onClick() {
             return _this2.handleClick(val);
           },
-          "key": this.key('hi' + index)
-        }, null);
+          "key": '5' + index
+        }, {
+          "default": function _default() {
+            return [vue.createVNode(Type, null, null)];
+          }
+        });
       },
       makeRemoveIcon: function makeRemoveIcon(val, index) {
         var _this3 = this;
 
-        return vue.createVNode("i", {
-          "class": "el-icon-delete",
+        return vue.createVNode(vue.resolveComponent("ElIcon"), {
           "onClick": function onClick() {
             return _this3.handleRemove(val);
           },
-          "key": this.key('ri' + index)
-        }, null);
+          "key": '6' + index
+        }, {
+          "default": function _default() {
+            return [vue.createVNode(vue.resolveComponent("delete"), null, null)];
+          }
+        });
       },
       makeFiles: function makeFiles() {
         var _this4 = this;
 
         return this.makeGroup(this.fileList.map(function (src, index) {
-          return _this4.makeItem(index, [vue.createVNode("i", {
-            "class": "el-icon-tickets",
+          return _this4.makeItem(index, [vue.createVNode(vue.resolveComponent("ElIcon"), {
             "onClick": function onClick() {
               return _this4.handleClick(src);
             }
-          }, null), _this4.makeIcons(src, index)]);
+          }, {
+            "default": function _default() {
+              return [vue.createVNode(vue.resolveComponent("document"), null, null)];
+            }
+          }), _this4.makeIcons(src, index)]);
         }));
       },
       makeImages: function makeImages() {
@@ -645,15 +637,18 @@
       makeBtn: function makeBtn() {
         var _this6 = this;
 
+        var Type = vue.resolveComponent(this.icon);
         return vue.createVNode("div", {
-          "class": "fc-upload-btn",
+          "class": "_fc-upload-btn",
           "onClick": function onClick() {
             return _this6.showModel();
           },
-          "key": this.key('btn')
-        }, [vue.createVNode("i", {
-          "class": this.icon
-        }, null)]);
+          "key": 7
+        }, [vue.createVNode(vue.resolveComponent("ElIcon"), null, {
+          "default": function _default() {
+            return [vue.createVNode(Type, null, null)];
+          }
+        })]);
       },
       handleClick: function handleClick(src) {
         if (this.onHandle) {
@@ -783,7 +778,6 @@
       }, {
         "default": function _default() {
           return [vue.createVNode("img", {
-            "alt": "example",
             "style": "width: 100%",
             "src": _this9.previewImage
           }, null)];
@@ -805,7 +799,7 @@
             "src": src,
             "frameBorder": "0",
             "style": {
-              'height': height,
+              height: height,
               'border': '0 none',
               'width': '100%'
             }
@@ -834,59 +828,35 @@
     }
   });
 
-  var NAME$8 = 'fcRadio';
+  var NAME$7 = 'fcRadio';
   var Radio = vue.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 = vue.toRefs(vue.inject('formCreateInject')),
-          options = _toRefs.options;
-
-      var trueValue = vue.ref([]);
+      var options = vue.toRef(props.formCreateInject, 'options', []);
       var value = vue.toRef(props, 'modelValue');
 
-      var _options = vue.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,
@@ -895,46 +865,49 @@
       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,
+        "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 vue.createVNode(Type, vue.mergeProps(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 = vue.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 = vue.toRefs(vue.inject('formCreateInject')),
-          options = _toRefs.options;
-
+      var options = vue.toRef(props.formCreateInject, 'options', []);
       var value = vue.toRef(props, 'modelValue');
 
-      var _options = vue.computed(function () {
-        return Array.isArray(options) ? options : [];
-      });
+      var _options = function _options() {
+        return Array.isArray(options.value) ? options.value : [];
+      };
 
       return {
         options: _options,
@@ -953,7 +926,7 @@
         }
       }), _objectSpread2({
         "default": function _default() {
-          return [_this.options.map(function (props, index) {
+          return [_this.options().map(function (props, index) {
             return vue.createVNode(vue.resolveComponent("ElOption"), vue.mergeProps(props, {
               "key": '' + index + props.value
             }), null);
@@ -963,9 +936,9 @@
     }
   });
 
-  var NAME$6 = 'fcTree';
+  var NAME$5 = 'fcTree';
   var Tree = vue.defineComponent({
-    name: NAME$6,
+    name: NAME$5,
     inheritAttrs: false,
     formCreateParser: {
       mergeProp: function mergeProp(ctx) {
@@ -1027,7 +1000,7 @@
     }
   });
 
-  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) {
@@ -1042,33 +1015,18 @@
     return ('' + file).split('/').pop();
   }
 
-  var NAME$5 = 'fcUpload';
+  var NAME$4 = 'fcUpload';
   var Upload = vue.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: []
@@ -1079,13 +1037,6 @@
     },
     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) {
@@ -1095,121 +1046,16 @@
       }
     },
     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' ? vue.createVNode("img", {
-          "src": file.url,
-          "key": this.key('img' + index)
-        }, null) : vue.createVNode("i", {
-          "class": "el-icon-document",
-          "key": this.key('i' + index)
-        }, null);
-      },
-      makeRemoveIcon: function makeRemoveIcon(file, index) {
-        var _this = this;
-
-        return vue.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 vue.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 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 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 vue.createVNode("div", {
-            "class": 'fc-upload-cover'
-          }, [icons]);
-        }
-      },
-      makeFiles: function makeFiles() {
-        var _this3 = this;
-
-        return this.uploadList.map(function (file, index) {
-          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 _this$$slots$default,
-            _this$$slots,
-            _this4 = this;
-
-        var isShow = !this.limit || this.limit > this.uploadList.length;
-        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')
-        }), _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) {
+      update: function update(fileList) {
+        var files = fileList.map(function (file) {
           return file.url;
         }).filter(function (url) {
           return url !== undefined;
@@ -1218,14 +1064,44 @@
       },
       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 vue.createVNode("div", {
-        "class": '_fc-upload'
-      }, [[this.$attrs.showFileList ? [] : this.makeFiles(), this.makeUpload()], vue.createVNode(vue.resolveComponent("ElDialog"), {
+      return vue.createVNode(vue.Fragment, null, [vue.createVNode(vue.resolveComponent("ElUpload"), vue.mergeProps({
+        "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)) || vue.createVNode(vue.resolveComponent("ElIcon"), null, {
+            "default": function _default() {
+              return [vue.createVNode(vue.resolveComponent("upload"), null, null)];
+            }
+          })];
+        }
+      }, getSlot(this.$slots, ['default']))), vue.createVNode(vue.resolveComponent("ElDialog"), {
         "appendToBody": true,
         "modal": this.previewMask,
         "title": this.modalTitle,
@@ -1234,24 +1110,11 @@
       }, {
         "default": function _default() {
           return [vue.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
-      });
     }
   });
 
@@ -1282,9 +1145,9 @@
     return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
   }
 
-  var NAME$4 = 'fcGroup';
+  var NAME$3 = 'fcGroup';
   var Group = vue.defineComponent({
-    name: NAME$4,
+    name: NAME$3,
     props: {
       field: String,
       rule: Array,
@@ -1327,9 +1190,9 @@
       onBeforeAdd: {
         type: Function,
         "default": function _default() {}
-      }
+      },
+      formCreateInject: Object
     },
-    inject: ['formCreateInject'],
     data: function data() {
       return {
         len: 0,
@@ -1386,7 +1249,8 @@
             });
           }
         },
-        deep: true
+        deep: true,
+        flush: 'post'
       }
     },
     methods: {
@@ -1506,24 +1370,31 @@
         this.input(this.modelValue);
       },
       addIcon: function addIcon(key) {
-        return vue.createVNode("i", {
+        return vue.createVNode(vue.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 [vue.createVNode(vue.resolveComponent("circle-plus"), null, null)];
+          }
+        });
       },
       delIcon: function delIcon(index, key) {
         var _this7 = this;
 
-        return vue.createVNode("i", {
+        return vue.createVNode(vue.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 [vue.createVNode(vue.resolveComponent("remove"), null, null)];
+          }
+        });
       },
       makeIcon: function makeIcon(total, index, key) {
         var _this8 = this;
@@ -1561,13 +1432,13 @@
     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;
@@ -1579,12 +1450,12 @@
         vm: this,
         add: this.add
       }) : vue.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) : vue.createVNode("div", {
-        "key": 'con'
+        "key": 2
       }, [keys.map(function (key, index) {
         var _slot;
 
@@ -1642,9 +1513,9 @@
     }
   });
 
-  var NAME$3 = 'fcSubForm';
+  var NAME$2 = 'fcSubForm';
   var Sub = vue.defineComponent({
-    name: NAME$3,
+    name: NAME$2,
     props: {
       rule: Array,
       options: {
@@ -1669,9 +1540,9 @@
       syncDisabled: {
         type: Boolean,
         "default": true
-      }
+      },
+      formCreateInject: Object
     },
-    inject: ['formCreateInject'],
     data: function data() {
       return {
         cacheValue: {},
@@ -1732,10 +1603,10 @@
 
   var components = [Checkbox, Frame, Radio, Select, Tree, Upload, Group, Sub];
 
-  var NAME$2 = 'FormCreate';
+  var NAME$1 = 'FormCreate';
   function $FormCreate(FormCreate) {
     return vue.defineComponent({
-      name: NAME$2,
+      name: NAME$1,
       props: {
         rule: {
           type: Array,
@@ -1752,22 +1623,24 @@
         },
         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 = vue.getCurrentInstance();
         vue.provide('parentFC', vm);
-        var parent = vue.inject('parentFC');
+        var parent = vue.inject('parentFC', null);
 
         var _toRefs = vue.toRefs(props),
             rule = _toRefs.rule,
             modelValue = _toRefs.modelValue;
 
         var data = vue.reactive({
+          ctxInject: {},
           destroyed: false,
           isShow: true,
           unique: 1,
@@ -1956,14 +1829,18 @@
           }
 
           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;
+            }
+          }
         }
       }
     }
@@ -2011,7 +1888,7 @@
         return val;
       }
 
-      if (hasProperty(val, '__json')) {
+      if (val.__json) {
         return val.__json;
       }
 
@@ -2212,33 +2089,6 @@
     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: {},
@@ -2344,11 +2194,6 @@
     }
 
     var api = {
-      helper: {
-        tidyFields: tidyFields,
-        props: props
-      },
-
       get config() {
         return h.options;
       },
@@ -2444,7 +2289,8 @@
 
         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);
@@ -2461,7 +2307,8 @@
 
         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;
@@ -2496,6 +2343,12 @@
         });
         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];
@@ -2681,6 +2534,19 @@
       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) {
@@ -2742,11 +2608,55 @@
     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;
 
@@ -2767,7 +2677,7 @@
           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();
@@ -2794,8 +2704,15 @@
         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) {
@@ -2824,49 +2741,54 @@
       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);
@@ -2879,16 +2801,22 @@
                 _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';
@@ -2922,29 +2850,36 @@
           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;
@@ -2988,10 +2923,9 @@
       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) {
@@ -3048,12 +2982,16 @@
           });
         }
 
-        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,
@@ -3061,7 +2999,7 @@
       vm: handle.vm,
       $manager: handle.$manager,
       vNode: new handle.fc.CreateNode(handle.vm),
-      id: id++
+      id: id$1++
     });
     funcProxy(this, {
       options: function options() {
@@ -3309,6 +3247,7 @@
       rule: rule,
       origin: rule.__origin__ || rule,
       name: rule.name,
+      pending: {},
       none: false,
       watch: [],
       linkOn: [],
@@ -3331,6 +3270,102 @@
     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: vue.reactive(value)
+      };
+    },
     effectData: function effectData(name) {
       if (!this.payload[name]) {
         this.payload[name] = {};
@@ -3354,13 +3389,13 @@
       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() {
@@ -3387,10 +3422,10 @@
       this.$handle.appendLink(this);
     },
     watchTo: function watchTo() {
-      var _this2 = this;
+      var _this4 = this;
 
       vue.nextTick(function () {
-        _this2.$handle.watchCtx(_this2);
+        _this4.$handle && _this4.$handle.watchCtx(_this4);
       });
     },
     "delete": function _delete() {
@@ -3420,15 +3455,15 @@
       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();
         }
       };
 
@@ -3439,17 +3474,17 @@
       }
 
       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) {
@@ -3488,7 +3523,6 @@
         });
         fullRule(rule);
         this.appendValue(rule);
-        rule.options = Array.isArray(rule.options) ? rule.options : [];
         [rule, rule['prefix'], rule['suffix']].forEach(function (item) {
           if (!item) {
             return;
@@ -3608,7 +3642,7 @@
           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__;
           }
 
@@ -3679,7 +3713,10 @@
           _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);
@@ -3775,7 +3812,7 @@
             if (valid) {
               flag = true;
               var ruleCon = {
-                type: 'template',
+                type: 'fragment',
                 "native": true,
                 __ctrl: true,
                 children: rule
@@ -3832,6 +3869,7 @@
         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() {
@@ -3875,7 +3913,7 @@
         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) {
@@ -3886,7 +3924,7 @@
         }
       },
       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];
@@ -3955,7 +3993,7 @@
         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;
@@ -3979,6 +4017,7 @@
         if (this.refreshControl(ctx)) {
           this.$render.clearCacheAll();
           this.loadRule();
+          this.bus.$emit('update', this.api);
           this.refresh();
         }
 
@@ -4006,6 +4045,10 @@
     });
   }
 
+  function strFn(key, val) {
+    return typeof val === 'function' ? '' + val : val;
+  }
+
   var BaseParser = {
     init: function init(ctx) {},
     toFormValue: function toFormValue(value, ctx) {
@@ -4018,6 +4061,9 @@
     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) {}
   };
 
@@ -4100,13 +4146,13 @@
         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 = vue.toRef(ctx.rule, key);
           var flag = key === 'children';
           ctx.refRule[key] = ref;
           ctx.watch.push(vue.watch(flag ? function () {
-            return _toConsumableArray(ref.value || []);
+            return is.Function(ref.value) ? ref.value : _toConsumableArray(ref.value || []);
           } : function () {
             return ref.value;
           }, function (_, o) {
@@ -4136,15 +4182,16 @@
               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);
@@ -4171,15 +4218,32 @@
 
         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,
@@ -4189,20 +4253,23 @@
         $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);
@@ -4215,8 +4282,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('remove-field', field, ctx.rule, this.api);
+        ctx.rule.__ctrl || this.vm.emit('remove-rule', ctx.rule, this.api);
         return ctx;
       }
     });
@@ -4284,7 +4351,6 @@
       watchEffect: function watchEffect(ctx) {
         var _this3 = this;
 
-        this.vm;
         Object.keys(ctx.rule.effect || {}).forEach(function (k) {
           ctx.watch.push(vue.watch(function () {
             return ctx.rule.effect[k];
@@ -4322,7 +4388,7 @@
             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];
@@ -4519,26 +4585,8 @@
     xhr.send(formData);
   }
 
-  var NAME$1 = 'FcFragment';
+  var NAME = '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'],
@@ -4549,8 +4597,12 @@
 
   function tidyDirectives(directives) {
     return Object.keys(directives).map(function (n) {
-      var directive = directives[n];
-      return [vue.resolveDirective(n), directive.arg, directive.value, directive.modifiers];
+      var data = directives[n];
+      var directive = vue.resolveDirective(n);
+      if (!directive) return;
+      return [directive, data.value, data.arg, data.modifiers];
+    }).filter(function (v) {
+      return !!v;
     });
   }
 
@@ -4577,7 +4629,18 @@
         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);
+        var isNativeTag = vue.getCurrentInstance().appContext.config.isNativeTag(tag);
+
+        if (isNativeTag) {
+          delete data.formCreateInject;
+        }
+
+        try {
+          return vue.createVNode(isNativeTag ? tag : vue.resolveComponent(tag), data, children);
+        } catch (e) {
+          console.error(e);
+          return vue.createVNode('');
+        }
       },
       aliasMap: aliasMap
     });
@@ -4705,6 +4768,11 @@
 
   function run(inject, rule, api) {
     var option = inject.value;
+
+    if (is.Function(option)) {
+      option = option(rule, api);
+    }
+
     option = parseOpt(option);
 
     if (!option || !option.action) {
@@ -4756,6 +4824,25 @@
     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;
 
@@ -4784,8 +4871,10 @@
     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);
@@ -4793,6 +4882,7 @@
     var parsers = {};
     var directives = {};
     var modelFields = {};
+    var useApps = [];
     var providers = {
       fetch: $fetch
     };
@@ -4804,6 +4894,14 @@
     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;
@@ -4872,7 +4970,7 @@
     }
 
     function $vnode() {
-      return vnode;
+      return fragment;
     } //todo 检查回调函数作用域
 
 
@@ -4883,7 +4981,11 @@
 
     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);
@@ -4902,6 +5004,7 @@
       var _this = this;
 
       extend(this, {
+        id: id++,
         create: create,
         vm: vm,
         manager: createManager(config.manager),
@@ -4909,6 +5012,7 @@
         providers: providers,
         modelFields: modelFields,
         rules: vm.props.rule,
+        name: vm.props.name,
         prop: {
           components: components,
           directives: directives
@@ -4933,6 +5037,10 @@
       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, {
@@ -4998,6 +5106,10 @@
         this.$handle.mounted();
       },
       unmount: function unmount() {
+        if (this.name) {
+          delete instance[this.name];
+        }
+
         this.unwatch && this.unwatch();
         this.$handle.reloadRule([]);
       },
@@ -5029,18 +5141,21 @@
         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] : {};
@@ -5048,9 +5163,13 @@
           };
 
           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);
+            });
+          });
         }
       });
     }
@@ -5060,7 +5179,13 @@
     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;
   }
 
@@ -5205,7 +5330,7 @@
   var PRE = 'el';
   var alias = {
     button: PRE + '-button',
-    icon: 'i',
+    icon: PRE + '-icon',
     slider: PRE + '-slider',
     rate: PRE + '-rate',
     upload: 'fc-upload',
@@ -5262,7 +5387,6 @@
         type: 'default',
         loading: false,
         disabled: false,
-        icon: 'el-icon-refresh',
         innerText: '重置',
         show: false,
         col: undefined,
@@ -5299,15 +5423,29 @@
 
   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) {
@@ -5338,7 +5476,7 @@
         info: {
           trigger: 'hover',
           placement: 'top-start',
-          icon: 'el-icon-warning'
+          icon: true
         },
         title: {},
         col: {
@@ -5437,40 +5575,41 @@
       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;
@@ -5524,7 +5663,7 @@
 
       var resetBtn = _objectSpread2({}, this.options.resetBtn);
 
-      var text = resetBtn.innerText;
+      var innerText = resetBtn.innerText;
       delete resetBtn.innerText;
       return this.$r({
         type: 'button',
@@ -5539,14 +5678,14 @@
           }
         },
         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',
@@ -5561,7 +5700,7 @@
           }
         },
         key: "".concat(this.key, "b1")
-      }, [text]);
+      }, [innerText]);
     }
   };
 
@@ -5647,7 +5786,7 @@
     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) {
@@ -5819,18 +5958,19 @@
     Object.keys(maker$1).forEach(function (name) {
       FormCreate.maker[name] = maker$1[name];
     });
-  }
 
-  function appUse(app) {
-    app.use(ElementPlus__default["default"]);
+    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: {