@form-create/element-ui 3.0.1 → 3.1.2

package/dist/form-create.esm.js

@@ -1,19 +1,24 @@
 /*!
- * @form-create/element-ui v3.0.1
+ * @form-create/element-ui v3.1.2
  * (c) 2018-2022 xaboy
  * Github https://github.com/xaboy/form-create
  * Released under the MIT License.
  */
-import { defineComponent, toRefs, inject, ref, toRef, watch, resolveComponent, createVNode, mergeProps as mergeProps$1, isVNode, nextTick, markRaw, reactive, getCurrentInstance, provide, onMounted, onBeforeUnmount, onUpdated, computed, customRef, withDirectives, resolveDirective, createApp, h } from 'vue';
+import { defineComponent, toRef, resolveComponent, createVNode, mergeProps as mergeProps$1, openBlock, createElementBlock, createElementVNode, 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);
 
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
+
+    if (enumerableOnly) {
+      symbols = symbols.filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      });
+    }
+
+    keys.push.apply(keys, symbols);
   }
 
   return keys;
@@ -21,12 +26,19 @@ function ownKeys(object, enumerableOnly) {
 
 function _objectSpread2(target) {
   for (var i = 1; i < arguments.length; i++) {
-    var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
-      _defineProperty(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-    });
+    var source = arguments[i] != null ? arguments[i] : {};
+
+    if (i % 2) {
+      ownKeys(Object(source), true).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
   }
 
   return target;
@@ -35,11 +47,17 @@ function _objectSpread2(target) {
 function _typeof(obj) {
   "@babel/helpers - typeof";
 
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
-    return typeof obj;
-  } : function (obj) {
-    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-  }, _typeof(obj);
+  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+    _typeof = function (obj) {
+      return typeof obj;
+    };
+  } else {
+    _typeof = function (obj) {
+      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+    };
+  }
+
+  return _typeof(obj);
 }
 
 function _classCallCheck(instance, Constructor) {
@@ -48,25 +66,6 @@ function _classCallCheck(instance, Constructor) {
   }
 }
 
-function _defineProperties(target, props) {
-  for (var i = 0; i < props.length; i++) {
-    var descriptor = props[i];
-    descriptor.enumerable = descriptor.enumerable || false;
-    descriptor.configurable = true;
-    if ("value" in descriptor) descriptor.writable = true;
-    Object.defineProperty(target, descriptor.key, descriptor);
-  }
-}
-
-function _createClass(Constructor, protoProps, staticProps) {
-  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-  if (staticProps) _defineProperties(Constructor, staticProps);
-  Object.defineProperty(Constructor, "prototype", {
-    writable: false
-  });
-  return Constructor;
-}
-
 function _defineProperty(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
@@ -94,9 +93,6 @@ function _inherits(subClass, superClass) {
       configurable: true
     }
   });
-  Object.defineProperty(subClass, "prototype", {
-    writable: false
-  });
   if (superClass) _setPrototypeOf(subClass, superClass);
 }
 
@@ -209,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() {
@@ -224,51 +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 = function _options() {
       return Array.isArray(options.value) ? options.value : [];
     };
 
-    var update = function update() {
-      trueValue.value = value.value ? _options().filter(function (opt) {
-        return value.value.indexOf(opt.value) !== -1;
-      }).map(function (option) {
-        return option.label;
-      }) : [];
-    };
-
-    watch(options, function () {
-      update();
-    }, {
-      deep: true,
-      immediate: true
-    });
     return {
       options: _options,
-      trueValue: trueValue,
       value: value,
       onInput: function onInput(n) {
-        _.emit('update:modelValue', _options().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,
@@ -277,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) {
           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'])));
@@ -369,16 +342,131 @@ 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;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-icon{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);
 
+var script$8 = {
+  name: 'IconCircleClose'
+};
+
+var _hoisted_1$8 = {
+  "class": "icon",
+  viewBox: "0 0 1024 1024",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+
+var _hoisted_2$8 = /*#__PURE__*/createElementVNode("path", {
+  fill: "currentColor",
+  d: "M466.752 512l-90.496-90.496a32 32 0 0145.248-45.248L512 466.752l90.496-90.496a32 32 0 1145.248 45.248L557.248 512l90.496 90.496a32 32 0 11-45.248 45.248L512 557.248l-90.496 90.496a32 32 0 01-45.248-45.248L466.752 512z"
+}, null, -1);
+
+var _hoisted_3$8 = /*#__PURE__*/createElementVNode("path", {
+  fill: "currentColor",
+  d: "M512 896a384 384 0 100-768 384 384 0 000 768zm0 64a448 448 0 110-896 448 448 0 010 896z"
+}, null, -1);
+
+var _hoisted_4$2 = [_hoisted_2$8, _hoisted_3$8];
+function render$8(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$8, _hoisted_4$2);
+}
+
+script$8.render = render$8;
+
+var script$7 = {
+  name: 'IconDocument'
+};
+
+var _hoisted_1$7 = {
+  "class": "icon",
+  viewBox: "0 0 1024 1024",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+
+var _hoisted_2$7 = /*#__PURE__*/createElementVNode("path", {
+  fill: "currentColor",
+  d: "M832 384H576V128H192v768h640V384zm-26.496-64L640 154.496V320h165.504zM160 64h480l256 256v608a32 32 0 01-32 32H160a32 32 0 01-32-32V96a32 32 0 0132-32zm160 448h384v64H320v-64zm0-192h160v64H320v-64zm0 384h384v64H320v-64z"
+}, null, -1);
+
+var _hoisted_3$7 = [_hoisted_2$7];
+function render$7(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$7, _hoisted_3$7);
+}
+
+script$7.render = render$7;
+
+var script$6 = {
+  name: 'IconDelete'
+};
+
+var _hoisted_1$6 = {
+  "class": "icon",
+  viewBox: "0 0 1024 1024",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+
+var _hoisted_2$6 = /*#__PURE__*/createElementVNode("path", {
+  fill: "currentColor",
+  d: "M160 256H96a32 32 0 010-64h256V95.936a32 32 0 0132-32h256a32 32 0 0132 32V192h256a32 32 0 110 64h-64v672a32 32 0 01-32 32H192a32 32 0 01-32-32V256zm448-64v-64H416v64h192zM224 896h576V256H224v640zm192-128a32 32 0 01-32-32V416a32 32 0 0164 0v320a32 32 0 01-32 32zm192 0a32 32 0 01-32-32V416a32 32 0 0164 0v320a32 32 0 01-32 32z"
+}, null, -1);
+
+var _hoisted_3$6 = [_hoisted_2$6];
+function render$6(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$6, _hoisted_3$6);
+}
+
+script$6.render = render$6;
+
+var script$5 = {
+  name: 'IconView'
+};
+
+var _hoisted_1$5 = {
+  "class": "icon",
+  viewBox: "0 0 1024 1024",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+
+var _hoisted_2$5 = /*#__PURE__*/createElementVNode("path", {
+  fill: "currentColor",
+  d: "M512 160c320 0 512 352 512 352S832 864 512 864 0 512 0 512s192-352 512-352zm0 64c-225.28 0-384.128 208.064-436.8 288 52.608 79.872 211.456 288 436.8 288 225.28 0 384.128-208.064 436.8-288-52.608-79.872-211.456-288-436.8-288zm0 64a224 224 0 110 448 224 224 0 010-448zm0 64a160.192 160.192 0 00-160 160c0 88.192 71.744 160 160 160s160-71.808 160-160-71.744-160-160-160z"
+}, null, -1);
+
+var _hoisted_3$5 = [_hoisted_2$5];
+function render$5(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$5, _hoisted_3$5);
+}
+
+script$5.render = render$5;
+
+var script$4 = {
+  name: 'IconFolderOpened'
+};
+
+var _hoisted_1$4 = {
+  "class": "icon",
+  viewBox: "0 0 1024 1024",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+
+var _hoisted_2$4 = /*#__PURE__*/createElementVNode("path", {
+  fill: "currentColor",
+  d: "M878.08 448H241.92l-96 384h636.16l96-384zM832 384v-64H485.76L357.504 192H128v448l57.92-231.744A32 32 0 01216.96 384H832zm-24.96 512H96a32 32 0 01-32-32V160a32 32 0 0132-32h287.872l128.384 128H864a32 32 0 0132 32v96h23.04a32 32 0 0131.04 39.744l-112 448A32 32 0 01807.04 896z"
+}, null, -1);
+
+var _hoisted_3$4 = [_hoisted_2$4];
+function render$4(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$4, _hoisted_3$4);
+}
+
+script$4.render = render$4;
+
 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,
@@ -399,7 +487,7 @@ var Frame = defineComponent({
     },
     icon: {
       type: String,
-      "default": 'el-icon-upload2'
+      "default": 'IconFolderOpened'
     },
     width: {
       type: String,
@@ -422,7 +510,10 @@ var Frame = defineComponent({
       "default": '关闭'
     },
     modalTitle: String,
-    handleIcon: [String, Boolean],
+    handleIcon: {
+      type: [String, Boolean],
+      "default": undefined
+    },
     title: String,
     allowRemove: {
       type: Boolean,
@@ -477,10 +568,14 @@ var Frame = defineComponent({
     okBtn: {
       type: Boolean,
       "default": true
-    }
+    },
+    formCreateInject: Object
   },
-  inject: ['formCreateInject'],
   emits: ['update:modelValue', 'change'],
+  components: {
+    IconFolderOpened: script$4,
+    IconView: script$5
+  },
   data: function data() {
     return {
       fileList: toArray(this.modelValue),
@@ -496,9 +591,6 @@ var Frame = defineComponent({
     }
   },
   methods: {
-    key: function key(unique) {
-      return unique;
-    },
     close: function close() {
       this.closeModel(true);
     },
@@ -538,25 +630,29 @@ var Frame = defineComponent({
         }).toString(),
         readonly: true
       }, {
-        "key": this.key('input')
+        "key": 1
       }), {
         append: function append() {
           return createVNode(resolveComponent("ElButton"), {
-            "icon": _this.icon,
+            "icon": resolveComponent(_this.icon),
             "onClick": function onClick() {
               return _this.showModel();
             }
           }, 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 _fc-upload-icon",
             "onClick": function onClick() {
               _this.fileList = [];
 
               _this.input();
             }
-          }, null) : null;
+          }, {
+            "default": function _default() {
+              return [createVNode(script$8, null, null)];
+            }
+          }) : null;
         }
       });
     },
@@ -566,13 +662,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) {
@@ -595,43 +691,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 ? 'icon-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(script$6, 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(script$7, null, null)];
+          }
+        }), _this4.makeIcons(src, index)]);
       }));
     },
     makeImages: function makeImages() {
@@ -646,15 +752,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) {
@@ -805,7 +914,7 @@ var Frame = defineComponent({
           "src": src,
           "frameBorder": "0",
           "style": {
-            'height': height,
+            height: height,
             'border': '0 none',
             'width': '100%'
           }
@@ -834,11 +943,12 @@ 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, Boolean],
       "default": ''
@@ -847,49 +957,21 @@ var Radio = 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 = function _options() {
       return Array.isArray(options.value) ? options.value : [];
     };
 
-    var update = function update() {
-      trueValue.value = _options().filter(function (opt) {
-        return opt.value === value.value;
-      }).reduce(function (initial, opt) {
-        return opt.label;
-      }, '');
-    };
-
-    watch(options, function () {
-      update();
-    }, {
-      deep: true,
-      immediate: true
-    });
     return {
       options: _options,
-      trueValue: trueValue,
       value: value,
       onInput: function onInput(n) {
-        _.emit('update:modelValue', _options().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,
@@ -898,28 +980,35 @@ 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) {
           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, String, Number, Boolean, Object],
       "default": undefined
@@ -928,9 +1017,7 @@ var Select = defineComponent({
   },
   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 = function _options() {
@@ -964,9 +1051,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) {
@@ -1028,9 +1115,31 @@ 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);
 
+var script$3 = {
+  name: 'IconUpload'
+};
+
+var _hoisted_1$3 = {
+  "class": "icon",
+  viewBox: "0 0 1024 1024",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+
+var _hoisted_2$3 = /*#__PURE__*/createElementVNode("path", {
+  fill: "currentColor",
+  d: "M160 832h704a32 32 0 110 64H160a32 32 0 110-64zm384-578.304V704h-64V247.296L237.248 490.048 192 444.8 508.8 128l316.8 316.8-45.312 45.248L544 253.696z"
+}, null, -1);
+
+var _hoisted_3$3 = [_hoisted_2$3];
+function render$3(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$3, _hoisted_3$3);
+}
+
+script$3.render = render$3;
+
 function parseFile(file, i) {
   return {
     url: file,
@@ -1043,37 +1152,21 @@ 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: [],
-      cacheFiles: []
+      fileList: []
     };
   },
   created: function created() {
@@ -1081,13 +1174,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) {
@@ -1097,141 +1183,62 @@ 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;
       });
-
-      if (this.cacheFiles.length !== files.length) {
-        this.cacheFiles = _toConsumableArray(files);
-        this.$emit('update:modelValue', this.limit === 1 ? files[0] || '' : files);
-      }
+      this.$emit('update:modelValue', this.limit === 1 ? files[0] || '' : files);
     },
     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(script$3, null, null)];
+          }
+        })];
+      }
+    }, getSlot(this.$slots, ['default']))), createVNode(resolveComponent("ElDialog"), {
       "appendToBody": true,
       "modal": this.previewMask,
       "title": this.modalTitle,
@@ -1240,24 +1247,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
-    });
   }
 });
 
@@ -1284,13 +1278,72 @@ function hasProperty(rule, k) {
   return {}.hasOwnProperty.call(rule, k);
 }
 
+var script$2 = {
+  name: 'IconCirclePlus'
+};
+
+var _hoisted_1$2 = {
+  "class": "icon",
+  viewBox: "0 0 1024 1024",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+
+var _hoisted_2$2 = /*#__PURE__*/createElementVNode("path", {
+  fill: "currentColor",
+  d: "M352 480h320a32 32 0 110 64H352a32 32 0 010-64z"
+}, null, -1);
+
+var _hoisted_3$2 = /*#__PURE__*/createElementVNode("path", {
+  fill: "currentColor",
+  d: "M480 672V352a32 32 0 1164 0v320a32 32 0 01-64 0z"
+}, null, -1);
+
+var _hoisted_4$1 = /*#__PURE__*/createElementVNode("path", {
+  fill: "currentColor",
+  d: "M512 896a384 384 0 100-768 384 384 0 000 768zm0 64a448 448 0 110-896 448 448 0 010 896z"
+}, null, -1);
+
+var _hoisted_5 = [_hoisted_2$2, _hoisted_3$2, _hoisted_4$1];
+function render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$2, _hoisted_5);
+}
+
+script$2.render = render$2;
+
+var script$1 = {
+  name: 'IconRemove'
+};
+
+var _hoisted_1$1 = {
+  "class": "icon",
+  viewBox: "0 0 1024 1024",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+
+var _hoisted_2$1 = /*#__PURE__*/createElementVNode("path", {
+  fill: "currentColor",
+  d: "M352 480h320a32 32 0 110 64H352a32 32 0 010-64z"
+}, null, -1);
+
+var _hoisted_3$1 = /*#__PURE__*/createElementVNode("path", {
+  fill: "currentColor",
+  d: "M512 896a384 384 0 100-768 384 384 0 000 768zm0 64a448 448 0 110-896 448 448 0 010 896z"
+}, null, -1);
+
+var _hoisted_4 = [_hoisted_2$1, _hoisted_3$1];
+function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$1, _hoisted_4);
+}
+
+script$1.render = render$1;
+
 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,
@@ -1333,9 +1386,9 @@ var Group = defineComponent({
     onBeforeAdd: {
       type: Function,
       "default": function _default() {}
-    }
+    },
+    formCreateInject: Object
   },
-  inject: ['formCreateInject'],
   data: function data() {
     return {
       len: 0,
@@ -1513,24 +1566,31 @@ var Group = defineComponent({
       this.input(this.modelValue);
     },
     addIcon: function addIcon(key) {
-      return createVNode("i", {
+      return createVNode(resolveComponent("ElIcon"), {
         "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(script$2, 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(script$1, null, null)];
+        }
+      });
     },
     makeIcon: function makeIcon(total, index, key) {
       var _this8 = this;
@@ -1585,13 +1645,16 @@ var Group = defineComponent({
     return keys.length === 0 ? this.$slots["default"] ? this.$slots["default"]({
       vm: this,
       add: this.add
-    }) : createVNode("i", {
-      "key": 'a_def',
-      "class": "el-icon-circle-plus-outline",
+    }) : createVNode(resolveComponent("ElIcon"), {
+      "key": 1,
       "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'
+    }, {
+      "default": function _default() {
+        return [createVNode(script$2, null, null)];
+      }
+    }) : createVNode("div", {
+      "key": 2
     }, [keys.map(function (key, index) {
       var _slot;
 
@@ -1649,9 +1712,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: {
@@ -1676,9 +1739,9 @@ var Sub = defineComponent({
     syncDisabled: {
       type: Boolean,
       "default": true
-    }
+    },
+    formCreateInject: Object
   },
-  inject: ['formCreateInject'],
   data: function data() {
     return {
       cacheValue: {},
@@ -1737,12 +1800,34 @@ var Sub = defineComponent({
   }
 });
 
-var components = [Checkbox, Frame, Radio, Select, Tree, Upload, Group, Sub];
+var script = {
+  name: 'IconWarning'
+};
+
+var _hoisted_1 = {
+  "class": "icon",
+  viewBox: "0 0 1024 1024",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+
+var _hoisted_2 = /*#__PURE__*/createElementVNode("path", {
+  fill: "currentColor",
+  d: "M512 64a448 448 0 110 896 448 448 0 010-896zm0 832a384 384 0 000-768 384 384 0 000 768zm48-176a48 48 0 11-96 0 48 48 0 0196 0zm-48-464a32 32 0 0132 32v288a32 32 0 01-64 0V288a32 32 0 0132-32z"
+}, null, -1);
+
+var _hoisted_3 = [_hoisted_2];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
+}
+
+script.render = render;
+
+var components = [Checkbox, Frame, Radio, Select, Tree, Upload, Group, Sub, script];
 
-var NAME$2 = 'FormCreate';
+var NAME$1 = 'FormCreate';
 function $FormCreate(FormCreate) {
   return defineComponent({
-    name: NAME$2,
+    name: NAME$1,
     props: {
       rule: {
         type: Array,
@@ -1759,7 +1844,8 @@ 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', 'reload', 'repeat-field', 'update'],
     render: function render() {
@@ -1775,6 +1861,7 @@ function $FormCreate(FormCreate) {
           modelValue = _toRefs.modelValue;
 
       var data = reactive({
+        ctxInject: {},
         destroyed: false,
         isShow: true,
         unique: 1,
@@ -2423,7 +2510,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);
@@ -2440,7 +2528,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;
@@ -2744,9 +2833,9 @@ function toString(val) {
   return val == null ? '' : _typeof(val) === 'object' ? JSON.stringify(val, null, 2) : String(val);
 }
 
-var id$1 = 0;
+var id$2 = 0;
 function uniqueId() {
-  return Math.random().toString(36).substr(3, 3) + Number("".concat(Date.now()).concat(++id$1)).toString(36);
+  return Math.random().toString(36).substr(3, 3) + Number("".concat(Date.now()).concat(++id$2)).toString(36);
 }
 
 function deepSet(data, idx, val) {
@@ -2809,7 +2898,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();
@@ -2836,8 +2925,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) {
@@ -2866,34 +2962,37 @@ function useRender$1(Render) {
     renderCtx: function renderCtx(ctx, parent) {
       var _this4 = this;
 
-      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;
-
-        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 = _this4.getTypeSlot(ctx.type);
@@ -2923,15 +3022,22 @@ function useRender$1(Render) {
               _vn = _this4.display(_vn);
             }
 
+            _this4.setCache(ctx, function () {
+              return _vn;
+            }, parent);
+
             return _vn;
-          });
-        };
+          };
 
-        this.setCache(ctx, vn, parent);
-        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';
@@ -2965,30 +3071,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 {
+      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,
-        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
-      };
+        options: ctx.prop.options,
+        children: ctx.loadChildrenPending()
+      });
+      return inject;
     },
     ctxProp: function ctxProp(ctx, custom) {
       var _this7 = this;
@@ -3032,10 +3144,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) {
@@ -3101,7 +3212,7 @@ function useRender$1(Render) {
   });
 }
 
-var id = 1;
+var id$1 = 1;
 function Render(handle) {
   extend(this, {
     $handle: handle,
@@ -3109,7 +3220,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() {
@@ -3357,6 +3468,7 @@ function RuleContext(handle, rule) {
     rule: rule,
     origin: rule.__origin__ || rule,
     name: rule.name,
+    pending: {},
     none: false,
     watch: [],
     linkOn: [],
@@ -3379,6 +3491,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] = {};
@@ -3402,13 +3610,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() {
@@ -3435,10 +3643,10 @@ extend(RuleContext.prototype, {
     this.$handle.appendLink(this);
   },
   watchTo: function watchTo() {
-    var _this2 = this;
+    var _this4 = this;
 
     nextTick(function () {
-      _this2.$handle && _this2.$handle.watchCtx(_this2);
+      _this4.$handle && _this4.$handle.watchCtx(_this4);
     });
   },
   "delete": function _delete() {
@@ -3468,15 +3676,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();
       }
     };
 
@@ -3487,17 +3695,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) {
@@ -3536,7 +3744,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;
@@ -3656,7 +3863,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__;
         }
 
@@ -3727,7 +3934,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);
@@ -3823,7 +4033,7 @@ function useLoader(Handler) {
           if (valid) {
             flag = true;
             var ruleCon = {
-              type: 'template',
+              type: 'fragment',
               "native": true,
               __ctrl: true,
               children: rule
@@ -3935,7 +4145,7 @@ function useInput(Handler) {
       }
     },
     setFormData: function setFormData(ctx, value) {
-      $set(this.formData, ctx.id, value === undefined ? null : value);
+      $set(this.formData, ctx.id, value === null ? undefined : value);
     },
     getFormData: function getFormData(ctx) {
       return this.formData[ctx.id];
@@ -4163,7 +4373,7 @@ function useContext(Handler) {
         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) {
@@ -4193,20 +4403,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__);
-                }
-              });
+          } else if (flag) {
+            if (is.Function(o)) {
+              o = ctx.getPending('children', []);
+            }
 
-              if (is.trueArray(n)) {
-                _this.loadChildren(n, ctx);
+            if (is.Function(n)) {
+              n = ctx.loadChildrenPending();
+            }
 
-                _this.bus.$emit('update', _this.api);
-              }
-            });
+            _this.updateChildren(ctx, n, o);
           }
 
           _this.$render.clearCache(ctx);
@@ -4233,15 +4439,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,
@@ -4251,20 +4474,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);
@@ -4383,7 +4609,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];
@@ -4580,26 +4806,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'],
@@ -4642,8 +4850,14 @@ function CreateNodeFactory() {
       return makeDirective(data, this.h(tag, toProps(data), children));
     },
     h: function h(tag, data, children) {
+      var isNativeTag = getCurrentInstance().appContext.config.isNativeTag(tag);
+
+      if (isNativeTag) {
+        delete data.formCreateInject;
+      }
+
       try {
-        return createVNode(getCurrentInstance().appContext.config.isNativeTag(tag) ? tag : resolveComponent(tag), data, children);
+        return createVNode(isNativeTag ? tag : resolveComponent(tag), data, children);
       } catch (e) {
         console.error(e);
         return createVNode('');
@@ -4686,7 +4900,7 @@ function createManager(proto) {
       return _super.apply(this, arguments);
     }
 
-    return _createClass(CustomManager);
+    return CustomManager;
   }(Manager);
 
   Object.assign(CustomManager.prototype, proto);
@@ -4831,6 +5045,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;
 
@@ -4859,8 +5092,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);
@@ -4868,6 +5103,7 @@ function FormCreateFactory(config) {
   var parsers = {};
   var directives = {};
   var modelFields = {};
+  var useApps = [];
   var providers = {
     fetch: $fetch
   };
@@ -4879,6 +5115,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;
@@ -4916,7 +5160,7 @@ function FormCreateFactory(config) {
         return components[name];
       }
     } else {
-      name = toCase(id.name);
+      name = toCase(id.displayName || id.name);
       component = id;
     }
 
@@ -4947,7 +5191,7 @@ function FormCreateFactory(config) {
   }
 
   function $vnode() {
-    return vnode;
+    return fragment;
   } //todo 检查回调函数作用域
 
 
@@ -4958,7 +5202,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);
@@ -4977,6 +5225,7 @@ function FormCreateFactory(config) {
     var _this = this;
 
     extend(this, {
+      id: id++,
       create: create,
       vm: vm,
       manager: createManager(config.manager),
@@ -4984,6 +5233,7 @@ function FormCreateFactory(config) {
       providers: providers,
       modelFields: modelFields,
       rules: vm.props.rule,
+      name: vm.props.name,
       prop: {
         components: components,
         directives: directives
@@ -5008,6 +5258,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, {
@@ -5073,6 +5327,10 @@ function FormCreateFactory(config) {
       this.$handle.mounted();
     },
     unmount: function unmount() {
+      if (this.name) {
+        delete instance[this.name];
+      }
+
       this.unwatch && this.unwatch();
       this.$handle.reloadRule([]);
     },
@@ -5106,17 +5364,19 @@ function FormCreateFactory(config) {
       $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] : {};
@@ -5124,9 +5384,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);
+          });
+        });
       }
     });
   }
@@ -5136,7 +5400,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;
 }
 
@@ -5281,7 +5551,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',
@@ -5338,7 +5608,6 @@ function getConfig() {
       type: 'default',
       loading: false,
       disabled: false,
-      icon: 'el-icon-refresh',
       innerText: '重置',
       show: false,
       col: undefined,
@@ -5428,7 +5697,7 @@ var manager = {
       info: {
         trigger: 'hover',
         placement: 'top-start',
-        icon: 'el-icon-warning'
+        icon: true
       },
       title: {},
       col: {
@@ -5544,10 +5813,16 @@ var manager = {
 
       children[infoProp.align !== 'left' ? 'unshift' : 'push'](this.$r(mergeProps([infoProp, prop]), _defineProperty({}, titleProp.slot || (isTip ? 'default' : 'reference'), function () {
         return _this4.$r({
-          type: 'i',
-          "class": infoProp.icon === true ? 'el-icon-warning' : infoProp.icon,
+          type: 'ElIcon',
+          style: 'top:2px',
           key: "".concat(uni, "i")
-        }, {}, true);
+        }, {
+          "default": function _default() {
+            return _this4.$r({
+              type: infoProp.icon === true ? 'icon-warning' : infoProp.icon
+            });
+          }
+        }, true);
       })));
     }
 
@@ -5904,12 +6179,18 @@ function install(FormCreate) {
   Object.keys(maker$1).forEach(function (name) {
     FormCreate.maker[name] = maker$1[name];
   });
+
+  if (typeof window !== 'undefined' && window.ElementPlus) {
+    FormCreate.useApp(function (_, app) {
+      app.use(window.ElementPlus);
+    });
+  }
 }
 
 function elmFormCreate() {
   return FormCreateFactory({
     ui: 'element-ui',
-    version: '3.0.1',
+    version: '3.1.2',
     manager: manager,
     extendApi: extendApi,
     install: install,