@form-create/element-ui 3.2.0 → 3.2.2

package/dist/form-create.js

@@ -1,5 +1,5 @@
 /*!
- * @form-create/element-ui v3.2.0
+ * @form-create/element-ui v3.2.2
  * (c) 2018-2024 xaboy
  * Github https://github.com/xaboy/form-create
  * Released under the MIT License.
@@ -2046,8 +2046,20 @@
 
   var components = [Checkbox, Frame, Radio, Select, Tree, Upload, Group, Sub, script];
 
-  function toString(val) {
-    return val == null ? '' : _typeof(val) === 'object' ? JSON.stringify(val, null, 2) : String(val);
+  function debounce(fn, wait) {
+    var timeout = null;
+    return function () {
+      var _this = this;
+
+      for (var _len = arguments.length, arg = new Array(_len), _key = 0; _key < _len; _key++) {
+        arg[_key] = arguments[_key];
+      }
+
+      if (timeout !== null) clearTimeout(timeout);
+      timeout = setTimeout(function () {
+        return fn.call.apply(fn, [_this].concat(arg));
+      }, wait);
+    };
   }
 
   function toLine(name) {
@@ -2059,129 +2071,6 @@
     return str.replace(str[0], str[0].toLocaleUpperCase());
   }
 
-  function format(type, msg, rule) {
-    return "[form-create ".concat(type, "]: ").concat(msg) + (rule ? '\n\nrule: ' + JSON.stringify(rule.getRule ? rule.getRule() : rule) : '');
-  }
-  function err(msg, rule) {
-    console.error(format('err', msg, rule));
-  }
-  function logError(e) {
-    err(e.toString());
-    console.error(e);
-  }
-
-  var PREFIX = '[[FORM-CREATE-PREFIX-';
-  var SUFFIX = '-FORM-CREATE-SUFFIX]]';
-  var $T = '$FN:';
-  var $TX = '$FNX:';
-  var $ON = '$GLOBAL:';
-  var FUNCTION = 'function';
-  function toJson(obj, space) {
-    return JSON.stringify(deepExtend(Array.isArray(obj) ? [] : {}, obj, true), function (key, val) {
-      if (val && val._isVue === true) return undefined;
-
-      if (_typeof(val) !== FUNCTION) {
-        return val;
-      }
-
-      if (val.__json) {
-        return val.__json;
-      }
-
-      if (val.__origin) val = val.__origin;
-      if (val.__emit) return undefined;
-      return PREFIX + val + SUFFIX;
-    }, space);
-  }
-
-  function makeFn(fn) {
-    return new Function('return ' + fn)();
-  }
-
-  function parseFn(fn, mode) {
-    if (fn && is.String(fn) && fn.length > 4) {
-      var v = fn.trim();
-      var flag = false;
-
-      try {
-        if (v.indexOf(SUFFIX) > 0 && v.indexOf(PREFIX) === 0) {
-          v = v.replace(SUFFIX, '').replace(PREFIX, '');
-          flag = true;
-        } else if (v.indexOf($T) === 0) {
-          v = v.replace($T, '');
-          flag = true;
-        } else if (v.indexOf($ON) === 0) {
-          var name = v.replace($ON, '');
-
-          v = function v() {
-            for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-              args[_key] = arguments[_key];
-            }
-
-            var callback = args[0].api.getGlobalEvent(name);
-
-            if (callback) {
-              return callback.call.apply(callback, [this].concat(args));
-            }
-
-            return undefined;
-          };
-
-          v.__json = fn;
-          v.__inject = true;
-          return v;
-        } else if (v.indexOf($TX) === 0) {
-          v = makeFn('function($inject){' + v.replace($TX, '') + '}');
-          v.__json = fn;
-          v.__inject = true;
-          return v;
-        } else if (!mode && v.indexOf(FUNCTION) === 0 && v !== FUNCTION) {
-          flag = true;
-        }
-
-        if (!flag) return fn;
-        var val = makeFn(v.indexOf(FUNCTION) === -1 && v.indexOf('(') !== 0 ? FUNCTION + ' ' + v : v);
-        val.__json = fn;
-        return val;
-      } catch (e) {
-        err("\u89E3\u6790\u5931\u8D25:".concat(v, "\n\nerr: ").concat(e));
-        return undefined;
-      }
-    }
-
-    return fn;
-  }
-  function parseJson(json, mode) {
-    return JSON.parse(json, function (k, v) {
-      if (is.Undef(v) || !v.indexOf) return v;
-      return parseFn(v, mode);
-    });
-  }
-
-  var id$2 = 0;
-  function uniqueId() {
-    var num = 370 + ++id$2;
-    return 'F' + Math.random().toString(36).substr(3, 3) + Number("".concat(Date.now())).toString(36) + num.toString(36) + 'c';
-  }
-
-  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;
-  }
-
   var getRuleInject = function getRuleInject(vm, parent) {
     if (!vm || vm === parent) {
       return;
@@ -2216,6 +2105,7 @@
           }
         },
         extendOption: Boolean,
+        driver: String,
         modelValue: Object,
         disabled: {
           type: Boolean,
@@ -2326,10 +2216,31 @@
             document.head.appendChild(styleEl);
           }
         });
+        var emit$topForm = debounce(function () {
+          fc.bus.$emit('$loadData.$topForm');
+        }, 100);
+        var emit$form = debounce(function () {
+          fc.bus.$emit('$loadData.$form');
+        }, 100);
+
+        var emit$change = function emit$change(field) {
+          fc.bus.$emit('change-$form.' + field);
+        };
+
         vue.onMounted(function () {
+          if (parent) {
+            fapi.top.bus.$on('$loadData.$form', emit$topForm);
+            fapi.top.bus.$on('change', emit$change);
+          }
+
           fc.mounted();
         });
         vue.onBeforeUnmount(function () {
+          if (parent) {
+            fapi.top.bus.$off('$loadData.$form', emit$topForm);
+            fapi.top.bus.$off('change', emit$change);
+          }
+
           styleEl && document.head.removeChild(styleEl);
           rmSubForm();
           data.destroyed = true;
@@ -2392,6 +2303,13 @@
 
             data.updateValue = json;
             vm.emit('update:modelValue', value);
+            vue.nextTick(function () {
+              emit$form();
+
+              if (!parent) {
+                emit$topForm();
+              }
+            });
           }
         });
       },
@@ -2479,6 +2397,105 @@
     return [].concat(keyAttrs, _toConsumableArray(normalMerge), _toConsumableArray(toArrayMerge), _toConsumableArray(functionalMerge), arrayAttrs, normalAttrs);
   }
 
+  function format(type, msg, rule) {
+    return "[form-create ".concat(type, "]: ").concat(msg) + (rule ? '\n\nrule: ' + JSON.stringify(rule.getRule ? rule.getRule() : rule) : '');
+  }
+  function err(msg, rule) {
+    console.error(format('err', msg, rule));
+  }
+  function logError(e) {
+    err(e.toString());
+    console.error(e);
+  }
+
+  var PREFIX = '[[FORM-CREATE-PREFIX-';
+  var SUFFIX = '-FORM-CREATE-SUFFIX]]';
+  var $T = '$FN:';
+  var $TX = '$FNX:';
+  var $ON = '$GLOBAL:';
+  var FUNCTION = 'function';
+  function toJson(obj, space) {
+    return JSON.stringify(deepExtend(Array.isArray(obj) ? [] : {}, obj, true), function (key, val) {
+      if (val && val._isVue === true) return undefined;
+
+      if (_typeof(val) !== FUNCTION) {
+        return val;
+      }
+
+      if (val.__json) {
+        return val.__json;
+      }
+
+      if (val.__origin) val = val.__origin;
+      if (val.__emit) return undefined;
+      return PREFIX + val + SUFFIX;
+    }, space);
+  }
+
+  function makeFn(fn) {
+    return new Function('return ' + fn)();
+  }
+
+  function parseFn(fn, mode) {
+    if (fn && is.String(fn) && fn.length > 4) {
+      var v = fn.trim();
+      var flag = false;
+
+      try {
+        if (v.indexOf(SUFFIX) > 0 && v.indexOf(PREFIX) === 0) {
+          v = v.replace(SUFFIX, '').replace(PREFIX, '');
+          flag = true;
+        } else if (v.indexOf($T) === 0) {
+          v = v.replace($T, '');
+          flag = true;
+        } else if (v.indexOf($ON) === 0) {
+          var name = v.replace($ON, '');
+
+          v = function v() {
+            for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+              args[_key] = arguments[_key];
+            }
+
+            var callback = args[0].api.getGlobalEvent(name);
+
+            if (callback) {
+              return callback.call.apply(callback, [this].concat(args));
+            }
+
+            return undefined;
+          };
+
+          v.__json = fn;
+          v.__inject = true;
+          return v;
+        } else if (v.indexOf($TX) === 0) {
+          v = makeFn('function($inject){' + v.replace($TX, '') + '}');
+          v.__json = fn;
+          v.__inject = true;
+          return v;
+        } else if (!mode && v.indexOf(FUNCTION) === 0 && v !== FUNCTION) {
+          flag = true;
+        }
+
+        if (!flag) return fn;
+        var val = makeFn(v.indexOf(FUNCTION) === -1 && v.indexOf('(') !== 0 ? FUNCTION + ' ' + v : v);
+        val.__json = fn;
+        return val;
+      } catch (e) {
+        err("\u89E3\u6790\u5931\u8D25:".concat(v, "\n\nerr: ").concat(e));
+        return undefined;
+      }
+    }
+
+    return fn;
+  }
+  function parseJson(json, mode) {
+    return JSON.parse(json, function (k, v) {
+      if (is.Undef(v) || !v.indexOf) return v;
+      return parseFn(v, mode);
+    });
+  }
+
   function enumerable(value, writable) {
     return {
       value: value,
@@ -2697,6 +2714,27 @@
       return new RegExp(b, 'g').test(a);
     }
   };
+  function deepGet(val, split) {
+    (Array.isArray(split) ? split : (split || '').split('.')).forEach(function (k) {
+      if (val != null) {
+        val = val[k];
+      }
+    });
+    return val;
+  }
+  function extractVar(str) {
+    var regex = /{{\s*(.*?)\s*}}/g;
+    var match;
+    var matches = {};
+
+    while ((match = regex.exec(str)) !== null) {
+      if (match[1]) {
+        matches[match[1]] = true;
+      }
+    }
+
+    return Object.keys(matches);
+  }
 
   function baseRule() {
     return {
@@ -2836,7 +2874,7 @@
 
     var headers = option.headers || {};
     Object.keys(headers).forEach(function (item) {
-      if (headers[item] !== null) {
+      if (headers[item] != null) {
         xhr.setRequestHeader(item, headers[item]);
       }
     });
@@ -2856,12 +2894,7 @@
             fn = parse;
           } else if (parse && is.String(parse)) {
             fn = function fn(v) {
-              parse.split('.').forEach(function (k) {
-                if (v) {
-                  v = v[k];
-                }
-              });
-              return v;
+              return deepGet(v, parse);
             };
           }
 
@@ -3326,6 +3359,18 @@
         findRules(ctx ? ctx.loadChildrenPending() : rule.children);
         return rules;
       },
+      getParentSubRule: function getParentSubRule(id) {
+        var flag = _typeof(id) === 'object';
+        var ctx = flag ? byCtx(id) : h.getCtx(id);
+
+        if (ctx) {
+          var group = ctx.getParentGroup();
+
+          if (group) {
+            return group.rule;
+          }
+        }
+      },
       getChildrenFormData: function getChildrenFormData(id) {
         var rules = api.getChildrenRuleList(id);
         return rules.reduce(function (formData, rule) {
@@ -3335,12 +3380,14 @@
       },
       setChildrenFormData: function setChildrenFormData(id, formData, cover) {
         var rules = api.getChildrenRuleList(id);
-        rules.forEach(function (rule) {
-          if (hasProperty(formData, rule.field)) {
-            rule.value = formData[rule.field];
-          } else if (cover) {
-            rule.value = undefined;
-          }
+        h.deferSyncValue(function () {
+          rules.forEach(function (rule) {
+            if (hasProperty(formData, rule.field)) {
+              rule.value = formData[rule.field];
+            } else if (cover) {
+              rule.value = undefined;
+            }
+          });
         });
       },
       getGlobalEvent: function getGlobalEvent(name) {
@@ -3402,11 +3449,14 @@
         });
       },
       getData: function getData(id, def) {
-        return h.fc.getData(id, def);
+        return h.fc.getLoadData(id, def);
       },
       setData: function setData(id, data) {
         return h.fc.setData(id, data);
       },
+      refreshData: function refreshData(id) {
+        return h.fc.refreshData(id);
+      },
       helper: {
         tidyFields: tidyFields,
         props: props
@@ -3485,6 +3535,34 @@
     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() {
+    var num = 370 + ++id$2;
+    return 'F' + Math.random().toString(36).substr(3, 3) + Number("".concat(Date.now())).toString(36) + num.toString(36) + 'c';
+  }
+
+  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() {
@@ -3740,7 +3818,7 @@
         return vn;
       },
       getModelField: function getModelField(ctx) {
-        return ctx.rule.modelField || ctx.parser.modelField || this.fc.modelFields[this.vNode.aliasMap[ctx.type]] || this.fc.modelFields[ctx.type] || this.fc.modelFields[ctx.originType] || 'modelValue';
+        return ctx.prop.modelField || ctx.parser.modelField || this.fc.modelFields[this.vNode.aliasMap[ctx.type]] || this.fc.modelFields[ctx.type] || this.fc.modelFields[ctx.originType] || 'modelValue';
       },
       isFragment: function isFragment(ctx) {
         return ctx.type === 'fragment' || ctx.type === 'template';
@@ -3796,6 +3874,9 @@
 
               _this7.onMounted(ctx, vn.el);
             },
+            'fc.updateValue': function fcUpdateValue(data) {
+              _this7.$handle.onUpdateValue(ctx, data);
+            },
             'fc.el': function fcEl(el) {
               ctx.exportEl = el;
 
@@ -3871,10 +3952,18 @@
       },
       defaultRender: function defaultRender(ctx, children) {
         var prop = ctx.prop;
-        if (prop.component) return this.vNode.makeComponent(prop.component, prop, children);
+
+        if (prop.component) {
+          if (typeof prop.component === 'string') {
+            return this.vNode.make(prop.component, prop, children);
+          } else {
+            return this.vNode.makeComponent(prop.component, prop, children);
+          }
+        }
+
         if (this.vNode[ctx.type]) return this.vNode[ctx.type](prop, children);
         if (this.vNode[ctx.originType]) return this.vNode[ctx.originType](prop, children);
-        return this.vNode.make(lower(ctx.originType), prop, children);
+        return this.vNode.make(lower(prop.type), prop, children);
       },
       renderRule: function renderRule(rule, children, origin) {
         var _this9 = this;
@@ -4049,23 +4138,76 @@
           _fn = _fn.__origin;
         }
 
-        var h = this;
+        var h = this;
+
+        var fn = function fn() {
+          var data = h.getInjectData(self, _inject2);
+
+          for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+            args[_key2] = arguments[_key2];
+          }
+
+          data.args = [].concat(args);
+          args.unshift(data);
+          return _fn.apply(this, args);
+        };
+
+        fn.__origin = _fn;
+        fn.__json = _fn.__json;
+        return fn;
+      },
+      loadStrVar: function loadStrVar(str, get) {
+        var _this3 = this;
+
+        if (str && typeof str === 'string' && str.indexOf('{{') > -1 && str.indexOf('}}') > -1) {
+          var tmp = str;
+          var vars = extractVar(str);
+          var lastVal;
+          vars.forEach(function (v) {
+            var split = v.split('||');
+            var field = split[0].trim();
+
+            if (field) {
+              var def = (split[1] || '').trim();
+              var val = get ? get(field, def) : _this3.fc.getLoadData(field, def);
+              lastVal = val;
+              str = str.replaceAll("{{".concat(v, "}}"), val == null ? '' : val);
+            }
+          });
+
+          if (vars.length === 1 && tmp === "{{".concat(vars[0], "}}")) {
+            return lastVal;
+          }
+        }
+
+        return str;
+      },
+      loadFetchVar: function loadFetchVar(options, get) {
+        var _this4 = this;
+
+        var loadVal = function loadVal(str) {
+          return _this4.loadStrVar(str, get);
+        };
 
-        var fn = function fn() {
-          var data = h.getInjectData(self, _inject2);
+        options.action = loadVal(options.action);
 
-          for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-            args[_key2] = arguments[_key2];
-          }
+        if (options.headers) {
+          var _headers = {};
+          Object.keys(options.headers).forEach(function (k) {
+            _headers[loadVal(k)] = loadVal(options.headers[k]);
+          });
+          options.headers = _headers;
+        }
 
-          data.args = [].concat(args);
-          args.unshift(data);
-          return _fn.apply(this, args);
-        };
+        if (options.data) {
+          var _data = {};
+          Object.keys(options.data).forEach(function (k) {
+            _data[loadVal(k)] = loadVal(options.data[k]);
+          });
+          options.data = _data;
+        }
 
-        fn.__origin = _fn;
-        fn.__json = _fn.__json;
-        return fn;
+        return options;
       }
     });
   }
@@ -4185,7 +4327,6 @@
       defaultValue: isInput ? deepCopy(defaultValue) : undefined,
       field: rule.field || undefined
     });
-    this.updateType();
     this.updateKey();
     bind(this);
     this.update(handle, true);
@@ -4321,6 +4462,7 @@
     updateType: function updateType() {
       this.originType = this.rule.type;
       this.type = toCase(this.rule.type);
+      this.trueType = this.$handle.getType(this.originType);
     },
     setParser: function setParser(parser) {
       this.parser = parser;
@@ -4409,7 +4551,6 @@
         computed: {},
         el: undef,
         $handle: undef,
-        $render: undef,
         $api: undef,
         vm: undef,
         vNode: undef,
@@ -4465,7 +4606,6 @@
         $render: handle.$render,
         $api: handle.api,
         vm: handle.vm,
-        trueType: handle.getType(this.originType),
         vNode: handle.$render.vNode,
         updated: false,
         cacheValue: this.rule.value
@@ -4473,6 +4613,7 @@
       !init && this.unwatch();
       this.watchTo();
       this.link();
+      this.updateType();
     }
   });
 
@@ -4944,6 +5085,28 @@
           this.setValue(ctx, val, value);
         }
       },
+      onUpdateValue: function onUpdateValue(ctx, data) {
+        var _this = this;
+
+        this.deferSyncValue(function () {
+          var group = ctx.getParentGroup();
+          var subForm = group ? _this.subRuleData[group.id] : null;
+          var subData = {};
+          Object.keys(data || {}).forEach(function (k) {
+            if (subForm && hasProperty(subForm, k)) {
+              subData[k] = data[k];
+            } else if (hasProperty(_this.api.form, k)) {
+              _this.api.form[k] = data[k];
+            } else if (_this.api.top !== _this.api && hasProperty(_this.api.top.form, k)) {
+              _this.api.top.form[k] = data[k];
+            }
+          });
+
+          if (Object.keys(subData).length) {
+            _this.api.setChildrenFormData(group.rule, subData);
+          }
+        });
+      },
       onBaseInput: function onBaseInput(ctx, value) {
         this.setFormData(ctx, value);
         ctx.modelValue = value;
@@ -4975,11 +5138,23 @@
         return this.formData[ctx.id];
       },
       syncForm: function syncForm() {
-        var _this = this;
+        var _this2 = this;
 
         var data = vue.reactive({});
-        this.fields().reduce(function (initial, field) {
-          var ctx = _this.getCtx(field);
+        var fields = this.fields();
+
+        if (this.options.appendValue !== false) {
+          Object.keys(this.appendData).reduce(function (initial, field) {
+            if (fields.indexOf(field) === -1) {
+              initial[field] = vue.toRef(_this2.appendData, field);
+            }
+
+            return initial;
+          }, data);
+        }
+
+        fields.reduce(function (initial, field) {
+          var ctx = _this2.getCtx(field);
 
           initial[field] = vue.toRef(ctx.rule, 'value');
           return initial;
@@ -5019,7 +5194,7 @@
           return this.deferSyncFn.sync = true;
         }
 
-        this.vm.setupState.updateValue(_objectSpread2(_objectSpread2({}, this.options.appendValue !== false ? this.appendData : {}), this.form));
+        this.vm.setupState.updateValue(_objectSpread2({}, this.form));
       },
       isChange: function isChange(ctx, value) {
         return JSON.stringify(this.getFormData(ctx), strFn) !== JSON.stringify(value, strFn);
@@ -5028,11 +5203,11 @@
         return (is.Object(value) || Array.isArray(value)) && value === ctx.rule.value;
       },
       refreshUpdate: function refreshUpdate(ctx, val, origin, field) {
-        var _this2 = this;
+        var _this3 = this;
 
         if (is.Function(ctx.rule.update)) {
           var state = invoke(function () {
-            return ctx.rule.update(val, ctx.origin, _this2.api, {
+            return ctx.rule.update(val, ctx.origin, _this3.api, {
               origin: origin || 'change',
               linkField: field
             });
@@ -5056,18 +5231,18 @@
         this.refreshUpdate(ctx, val, origin, field);
       },
       appendLink: function appendLink(ctx) {
-        var _this3 = this;
+        var _this4 = this;
 
         var link = ctx.rule.link;
         is.trueArray(link) && link.forEach(function (field) {
           var fn = function fn() {
-            return _this3.refreshRule(ctx, ctx.rule.value, 'link', field);
+            return _this4.refreshRule(ctx, ctx.rule.value, 'link', field);
           };
 
-          _this3.bus.$on('change-' + field, fn);
+          _this4.bus.$on('change-' + field, fn);
 
           ctx.linkOn.push(function () {
-            return _this3.bus.$off('change-' + field, fn);
+            return _this4.bus.$off('change-' + field, fn);
           });
         });
       },
@@ -5091,9 +5266,17 @@
     },
     mounted: function mounted(ctx) {},
     render: function render(children, ctx) {
+      if (ctx.$handle.fc.renderDriver && ctx.$handle.fc.renderDriver.defaultRender) {
+        return ctx.$handle.fc.renderDriver.defaultRender(ctx, children);
+      }
+
       return ctx.$render.defaultRender(ctx, children);
     },
     preview: function preview(children, ctx) {
+      if (ctx.$handle.fc.renderDriver && ctx.$handle.fc.renderDriver.defaultPreview) {
+        return ctx.$handle.fc.renderDriver.defaultPreview(ctx, children);
+      }
+
       return this.render(children, ctx);
     },
     mergeProp: function mergeProp(ctx) {}
@@ -5152,6 +5335,18 @@
       },
       getParser: function getParser(ctx) {
         var list = this.fc.parsers;
+        var renderDriver = this.fc.renderDriver;
+
+        if (renderDriver) {
+          var _list = renderDriver.parsers || {};
+
+          var parser = _list[ctx.originType] || _list[toCase(ctx.type)] || _list[ctx.trueType];
+
+          if (parser) {
+            return parser;
+          }
+        }
+
         return list[ctx.originType] || list[toCase(ctx.type)] || list[ctx.trueType] || BaseParser;
       },
       bindParser: function bindParser(ctx) {
@@ -5349,7 +5544,7 @@
 
         this.deferSyncValue(function () {
           o && o.forEach(function (child) {
-            if ((n || []).indexOf(child) === -1 && child && !is.String(child) && child.__fc__ && child.__fc__.parent === ctx && child.__fc__.root !== n) {
+            if ((n || []).indexOf(child) === -1 && child && !is.String(child) && child.__fc__ && child.__fc__.parent === ctx) {
               _this2.rmCtx(child.__fc__);
             }
           });
@@ -5900,6 +6095,17 @@
       }), opt, this.mergeOptionsRule);
     },
     updateOptions: function updateOptions(options) {
+      var _this3 = this;
+
+      if (this.$handle.fc.renderDriver && this.$handle.fc.renderDriver.updateOptions) {
+        invoke(function () {
+          _this3.$handle.fc.renderDriver.updateOptions(options, {
+            handle: _this3.$handle,
+            api: _this3.$handle.api
+          });
+        });
+      }
+
       this.options = this.mergeOptions([options], this.getDefaultOptions());
       this.update();
     },
@@ -5918,39 +6124,48 @@
     var loadData = {
       name: 'loadData',
       _fn: [],
-      created: function created(inject, rule, api) {
+      mounted: function mounted(inject, rule, api) {
         this.deleted(inject);
         var attrs = toArray(inject.getValue());
-        var events = [];
+        var unwatchs = [];
         attrs.forEach(function (attr) {
-          if (attr) {
-            var on = function on() {
-              if (attr.watch !== false) {
-                fc.bus.$off('p.loadData.' + attr.attr, on);
-                fc.bus.$once('p.loadData.' + attr.attr, on);
+          if (attr && (attr.attr || attr.template)) {
+            var unwatch = fc.watchLoadData(debounce(function (get) {
+              var value;
+
+              if (attr.template) {
+                value = fc.$handle.loadStrVar(attr.template, get);
+              } else {
+                value = get(attr.attr, attr["default"]);
               }
 
-              var value = undefined;
+              if (attr.copy !== false) {
+                value = deepCopy(value);
+              }
 
-              if (attr.attr) {
-                value = fc.loadData[attr.attr] || attr["default"];
+              var _rule = attr.modify ? rule : inject.getProp();
 
-                if (attr.copy !== false) {
-                  value = deepCopy(value);
+              if (attr.to === 'child') {
+                if (_rule.children) {
+                  _rule.children[0] = value;
+                } else {
+                  _rule.children = [value];
                 }
+              } else {
+                deepSet(_rule, attr.to || 'options', value);
               }
 
-              deepSet(inject.getProp(), attr.to || 'options', value);
               api.sync(rule);
-            };
+            }, attr.wait || 300));
 
-            events.push(function () {
-              return fc.bus.$off('p.loadData.' + attr.attr, on);
-            });
-            on();
+            if (attr.watch !== false) {
+              unwatchs.push(unwatch);
+            } else {
+              unwatch();
+            }
           }
         });
-        this._fn[inject.id] = events;
+        this._fn[inject.id] = unwatchs;
       },
       deleted: function deleted(inject) {
         if (this._fn[inject.id]) {
@@ -6013,6 +6228,7 @@
 
     function run(inject, rule, api) {
       var option = inject.value;
+      fetchAttr.deleted(inject);
 
       if (is.Function(option)) {
         option = option(rule, api);
@@ -6067,76 +6283,89 @@
         }
       };
 
-      var config = _objectSpread2(_objectSpread2({
-        headers: {}
-      }, option), {}, {
-        onSuccess: function onSuccess(body, flag) {
-          if (check()) return;
+      fetchAttr._fn[inject.id] = fc.watchLoadData(debounce(function (get, change) {
+        if (change && option.watch === false) {
+          return fetchAttr._fn[inject.id]();
+        }
 
-          var fn = function fn(v) {
-            return flag ? v : hasProperty(v, 'data') ? v.data : v;
-          };
+        var _option = fc.$handle.loadFetchVar(deepCopy(option), get);
 
-          var parse = parseFn(option.parse);
+        var config = _objectSpread2(_objectSpread2({
+          headers: {}
+        }, _option), {}, {
+          onSuccess: function onSuccess(body, flag) {
+            if (check()) return;
 
-          if (is.Function(parse)) {
-            fn = parse;
-          } else if (parse && is.String(parse)) {
-            fn = function fn(v) {
-              parse.split('.').forEach(function (k) {
-                if (v) {
-                  v = v[k];
-                }
-              });
-              return v;
+            var fn = function fn(v) {
+              return flag ? v : hasProperty(v, 'data') ? v.data : v;
             };
-          }
 
-          set(fn(body, rule, api));
-          api.sync(rule);
-        },
-        onError: function onError(e) {
-          set(undefined);
-          if (check()) return;
+            var parse = parseFn(_option.parse);
 
-          (_onError || function (e) {
-            return err(e.message || 'fetch fail ' + option.action);
-          })(e, rule, api);
-        }
-      });
+            if (is.Function(parse)) {
+              fn = parse;
+            } else if (parse && is.String(parse)) {
+              fn = function fn(v) {
+                return deepGet(v, parse);
+              };
+            }
 
-      fc.$handle.beforeFetch(config, {
-        rule: rule,
-        api: api
-      }).then(function () {
-        if (is.Function(option.action)) {
-          option.action(rule, api).then(function (val) {
-            config.onSuccess(val, true);
-          })["catch"](function (e) {
-            config.onError(e);
-          });
-          return;
-        }
+            set(fn(body, rule, api));
+            api.sync(rule);
+          },
+          onError: function onError(e) {
+            set(undefined);
+            if (check()) return;
 
-        invoke(function () {
-          return fc.create.fetch(config, {
-            inject: inject,
-            rule: rule,
-            api: api
+            (_onError || function (e) {
+              return err(e.message || 'fetch fail ' + _option.action);
+            })(e, rule, api);
+          }
+        });
+
+        fc.$handle.beforeFetch(config, {
+          rule: rule,
+          api: api
+        }).then(function () {
+          if (is.Function(_option.action)) {
+            _option.action(rule, api).then(function (val) {
+              config.onSuccess(val, true);
+            })["catch"](function (e) {
+              config.onError(e);
+            });
+
+            return;
+          }
+
+          invoke(function () {
+            return fc.create.fetch(config, {
+              inject: inject,
+              rule: rule,
+              api: api
+            });
           });
         });
-      });
+      }, option.wait || 600));
     }
 
-    return {
+    var fetchAttr = {
       name: 'fetch',
-      loaded: function loaded() {
+      _fn: [],
+      mounted: function mounted() {
         run.apply(void 0, arguments);
       },
       watch: function watch() {
         run.apply(void 0, arguments);
+      },
+      deleted: function deleted(inject) {
+        if (this._fn[inject.id]) {
+          this._fn[inject.id]();
+        }
+
+        inject.clearProp();
       }
     };
+    return fetchAttr;
   };
 
   var $provider = {
@@ -6164,6 +6393,71 @@
     }
   };
 
+  function getCookie(name) {
+    name = name + '=';
+    var decodedCookie = decodeURIComponent(document.cookie);
+    var cookieArray = decodedCookie.split(';');
+
+    for (var i = 0; i < cookieArray.length; i++) {
+      var cookie = cookieArray[i];
+
+      while (cookie.charAt(0) === ' ') {
+        cookie = cookie.substring(1);
+      }
+
+      if (cookie.indexOf(name) === 0) {
+        cookie = cookie.substring(name.length, cookie.length);
+
+        try {
+          return JSON.parse(cookie);
+        } catch (e) {
+          return cookie;
+        }
+      }
+    }
+
+    return null;
+  }
+
+  function getLocalStorage(name) {
+    var value = localStorage.getItem(name);
+
+    if (value) {
+      try {
+        return JSON.parse(value);
+      } catch (e) {
+        return value;
+      }
+    }
+
+    return null;
+  }
+
+  function baseDriver(driver, name) {
+    if (!name) {
+      return null;
+    }
+
+    var split = name.split('.');
+    var value = driver(split.shift());
+
+    if (!split.length) {
+      return value;
+    }
+
+    if (value == null) {
+      return null;
+    }
+
+    return deepGet(value, split);
+  }
+  function cookieDriver(name) {
+    return baseDriver(getCookie, name);
+  }
+  function localStorageDriver(name) {
+    return baseDriver(getLocalStorage, name);
+  }
+
   function parseProp(name, id) {
     var prop;
 
@@ -6203,6 +6497,7 @@
     var parsers = {};
     var directives = {};
     var modelFields = {};
+    var drivers = {};
     var useApps = [];
     var listener = [];
     var extendApiFn = [config.extendApi];
@@ -6361,23 +6656,66 @@
       formulas[name] = fn;
     }
 
-    function _emitData(id) {
-      Object.keys(instance).forEach(function (v) {
-        var apis = Array.isArray(instance[v]) ? instance[v] : [instance[v]];
-        apis.forEach(function (that) {
-          that.bus.$emit('p.loadData.' + id);
+    function setDriver(name, driver) {
+      if (driver.parsers) {
+        Object.keys(driver.parsers).forEach(function (k) {
+          driver.parsers[k] = setPrototypeOf(driver.parsers[k], BaseParser);
         });
-      });
+      }
+
+      driver.name = name;
+      drivers[name] = driver;
+    }
+
+    function refreshData(id) {
+      if (id) {
+        Object.keys(instance).forEach(function (v) {
+          var apis = Array.isArray(instance[v]) ? instance[v] : [instance[v]];
+          apis.forEach(function (that) {
+            that.bus.$emit('$loadData.' + id);
+          });
+        });
+      }
     }
 
     function setData(id, data) {
       loadData[id] = data;
+      refreshData(id);
+    }
 
-      _emitData(id);
+    function setDataDriver(id, data) {
+      var callback = function callback() {
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+
+        return invoke(function () {
+          return data.apply(void 0, args);
+        });
+      };
+
+      callback._driver = true;
+      setData(id, callback);
     }
 
     function getData(id, def) {
-      return hasProperty(loadData, id) ? loadData[id] : def;
+      var split = (id || '').split('.');
+      id = split.shift();
+      var field = split.join('.');
+
+      if (hasProperty(loadData, id)) {
+        var val = loadData[id];
+
+        if (val && val._driver) {
+          val = val(field);
+        } else if (split.length) {
+          val = deepGet(val, split);
+        }
+
+        return val == null || val === '' ? def : val;
+      } else {
+        return def;
+      }
     }
 
     function extendApi(fn) {
@@ -6386,8 +6724,7 @@
 
     function removeData(id) {
       delete loadData[id];
-
-      _emitData(id);
+      refreshData(id);
     }
 
     function on(name, callback) {
@@ -6417,14 +6754,18 @@
           components: components,
           directives: directives
         },
+        drivers: drivers,
+        renderDriver: null,
         setData: setData,
         getData: getData,
+        refreshData: refreshData,
         loadData: loadData,
         CreateNode: CreateNode,
         bus: new Mitt(),
-        unwatch: null,
+        unwatch: [],
         options: vue.ref({}),
-        extendApiFn: extendApiFn
+        extendApiFn: extendApiFn,
+        fetchCache: new WeakMap()
       });
       listener.forEach(function (item) {
         _this.bus.$on(item.name, item.callback);
@@ -6458,7 +6799,7 @@
         var _this2 = this;
 
         if (this.isSub()) {
-          this.unwatch = vue.watch(function () {
+          this.unwatch.push(vue.watch(function () {
             return _this2.vm.setupState.parent.setupState.fc.options.value;
           }, function () {
             _this2.initOptions();
@@ -6466,12 +6807,221 @@
             _this2.$handle.api.refresh();
           }, {
             deep: true
-          });
+          }));
         }
 
+        var driver = this.vm.setupState.parent ? this.vm.setupState.parent.setupState.fc.renderDriver : this.vm.props.driver;
+        this.renderDriver = this.drivers[driver];
         this.initOptions();
         this.$handle.init();
       },
+      globalDataDriver: function globalDataDriver(id) {
+        var _this3 = this;
+
+        var split = id.split('.');
+        var key = split.shift();
+        var option = this.options.value.globalData && this.options.value.globalData[key];
+
+        if (option) {
+          if (option.type === 'static') {
+            return deepGet(option.data, split);
+          } else {
+            var val;
+            var res = this.fetchCache.get(option);
+
+            if (res) {
+              if (res.status) {
+                val = deepGet(res.data, split);
+              }
+
+              if (!res.loading) {
+                return val;
+              }
+
+              res.loading = false;
+              this.fetchCache.set(option, res);
+            } else {
+              this.fetchCache.set(option, {
+                status: false
+              });
+            }
+
+            var reload = debounce(function () {
+              unwatch();
+
+              var res = _this3.fetchCache.get(option);
+
+              if (_this3.options.value.globalData && Object.values(_this3.options.value.globalData).indexOf(option) !== -1) {
+                if (res) {
+                  res.loading = true;
+
+                  _this3.fetchCache.set(option, res);
+                }
+
+                _this3.bus.$emit('$loadData.$globalData.' + key);
+              } else {
+                _this3.fetchCache["delete"](option);
+              }
+            }, option.wait || 600);
+
+            var _emit = function _emit(data) {
+              _this3.fetchCache.set(option, {
+                status: true,
+                data: data
+              });
+
+              _this3.bus.$emit('$loadData.$globalData.' + key);
+            };
+
+            var callback = function callback(get, change) {
+              if (change && option.watch === false) {
+                return unwatch();
+              }
+
+              if (change) {
+                reload();
+                return;
+              }
+
+              var options = _this3.$handle.loadFetchVar(copy$1(option), get);
+
+              _this3.$handle.api.fetch(options).then(function (res) {
+                _emit(res);
+              })["catch"](function (e) {
+                _emit(null);
+              });
+            };
+
+            var unwatch = this.watchLoadData(callback);
+            this.unwatch.push(unwatch);
+            return val;
+          }
+        }
+      },
+      globalVarDriver: function globalVarDriver(id) {
+        var _this4 = this;
+
+        var split = id.split('.');
+        var key = split.shift();
+        var option = this.options.value.globalVariable && this.options.value.globalVariable[key];
+
+        if (option) {
+          var handle = is.Function(option) ? option : option.handle;
+
+          if (handle) {
+            var val;
+            var unwatch = this.watchLoadData(function (get, change) {
+              if (change) {
+                unwatch();
+
+                _this4.bus.$emit('$loadData.$var.' + key);
+              }
+
+              val = invoke(function () {
+                return handle(get, _this4.$handle.api);
+              });
+            });
+            this.unwatch.push(unwatch);
+            return val;
+          }
+        }
+      },
+      getLoadData: function getLoadData(id, def) {
+        var val = null;
+
+        if (id != null) {
+          var split = id.split('.');
+          var key = split.shift();
+
+          if (key === '$form') {
+            val = this.$handle.api.top.formData();
+          } else if (key === '$subForm') {
+            val = this.$handle.api.formData();
+          } else if (key === '$options') {
+            val = this.options.value;
+          } else if (key === '$globalData') {
+            val = this.globalDataDriver(split.join('.'));
+            split = [];
+          } else if (key === '$var') {
+            val = this.globalVarDriver(split.join('.'));
+            split = [];
+          } else {
+            val = getData(id, def);
+            split = [];
+          }
+
+          if (split.length) {
+            val = deepGet(val, split);
+          }
+        }
+
+        return val == null || val === '' ? def : val;
+      },
+      watchLoadData: function watchLoadData(fn) {
+        var _this5 = this;
+
+        var unwatch = {};
+
+        var run = function run(flag) {
+          invoke(function () {
+            fn(get, flag);
+          });
+        };
+
+        var get = function get(id, def) {
+          if (unwatch[id]) {
+            return unwatch[id].val;
+          }
+
+          var val = _this5.getLoadData(id, def);
+
+          var split = id.split('.');
+          var key = split.shift();
+          var key2 = split.shift() || '';
+          var callback = debounce(function () {
+            if (key !== id) {
+              var temp = _this5.getLoadData(id, def);
+
+              if (JSON.stringify(temp) !== JSON.stringify(unwatch[id].val)) {
+                unwatch[id].val = temp;
+                run(true);
+              }
+            } else {
+              run(true);
+            }
+          }, 0);
+
+          _this5.bus.$on('$loadData.' + key, callback);
+
+          if (key2) {
+            _this5.bus.$on('$loadData.' + key + '.' + key2, callback);
+          }
+
+          unwatch[id] = {
+            fn: function fn() {
+              _this5.bus.$off('$loadData.' + key, callback);
+
+              if (key2) {
+                _this5.bus.$off('$loadData.' + key + '.' + key2, callback);
+              }
+            },
+            val: val
+          };
+          return val;
+        };
+
+        run(false);
+
+        var un = function un() {
+          Object.keys(unwatch).forEach(function (k) {
+            return unwatch[k].fn();
+          });
+          unwatch = {};
+        };
+
+        this.unwatch.push(un);
+        return un;
+      },
       isSub: function isSub() {
         return this.vm.setupState.parent && this.vm.props.extendOption;
       },
@@ -6510,6 +7060,7 @@
       updateOptions: function updateOptions(options) {
         this.options.value = this.mergeOptions(this.options.value, options);
         this.$handle.$manager.updateOptions(this.options.value);
+        this.bus.$emit('$loadData.$options');
       },
       api: function api() {
         return this.$handle.api;
@@ -6521,6 +7072,8 @@
         this.$handle.mounted();
       },
       unmount: function unmount() {
+        var _this6 = this;
+
         if (this.name) {
           if (this.inFor) {
             var idx = instance[this.name].indexOf(this);
@@ -6530,14 +7083,20 @@
           }
         }
 
-        this.unwatch && this.unwatch();
+        listener.forEach(function (item) {
+          _this6.bus.$off(item.name, item.callback);
+        });
+        this.unwatch.forEach(function (fn) {
+          return fn();
+        });
+        this.unwatch = [];
         this.$handle.reloadRule([]);
       },
       updated: function updated() {
-        var _this3 = this;
+        var _this7 = this;
 
         this.$handle.bindNextTick(function () {
-          return _this3.bus.$emit('next-tick', _this3.$handle.api);
+          return _this7.bus.$emit('next-tick', _this7.$handle.api);
         });
       }
     });
@@ -6548,13 +7107,16 @@
         ui: config.ui,
         extendApi: extendApi,
         getData: getData,
+        setDataDriver: setDataDriver,
         setData: setData,
         removeData: removeData,
+        refreshData: refreshData,
         maker: maker,
         component: component,
         directive: directive,
         setModelField: setModelField,
         setFormula: setFormula,
+        setDriver: setDriver,
         register: register,
         $vnode: $vnode,
         parser: parser,
@@ -6580,8 +7142,9 @@
         isMobile: isMobile,
         install: function install(app, options) {
           globalConfig = _objectSpread2(_objectSpread2({}, globalConfig), options || {});
-          if (app._installedFormCreate === true) return;
-          app._installedFormCreate = true;
+          var key = '_installedFormCreate_' + config.ui;
+          if (app[key] === true) return;
+          app[key] = true;
 
           var $formCreate = function $formCreate(rules) {
             var opt = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -6603,6 +7166,8 @@
 
     useAttr(create);
     useStatic(create);
+    setDataDriver('$cookie', cookieDriver);
+    setDataDriver('$localStorage', localStorageDriver);
     CreateNode.use({
       fragment: 'fcFragment'
     });
@@ -6627,7 +7192,10 @@
       inherit.formulas && extend(formulas, inherit.formulas);
     }
 
-    return create;
+    var FcComponent = $form();
+    setPrototypeOf(FcComponent, create);
+    FcComponent.util = create;
+    return FcComponent;
   }
 
   var DEFAULT_FORMATS = {
@@ -7257,7 +7825,7 @@
     return maker;
   }
 
-  var css_248z = ".form-create .form-create .el-form-item{margin-bottom:22px}.form-create{width:100%}.form-create .fc-none,.form-create.is-preview .el-form-item.is-required>.el-form-item__label-wrap>.el-form-item__label:before,.form-create.is-preview .el-form-item.is-required>.el-form-item__label:before,.form-create.is-preview .fc-clock{display:none!important}";
+  var css_248z = ".form-create .form-create .el-form-item{margin-bottom:22px}.form-create{width:100%}.form-create .fc-none,.form-create.is-preview .el-form-item.is-required>.el-form-item__label-wrap>.el-form-item__label:before,.form-create.is-preview .el-form-item.is-required>.el-form-item__label:before,.form-create.is-preview .fc-clock{display:none!important}.fc-wrap-left .el-form-item__label{justify-content:flex-start;justify-content:flex-end}.fc-wrap-top.el-form-item{display:block}.fc-wrap-top.el-form-item .el-form-item__label{display:block;height:auto;line-height:22px;margin-bottom:8px;text-align:left}.el-form--large .fc-wrap-top.el-form-item .el-form-item__label{line-height:22px;margin-bottom:12px}.el-form--default .fc-wrap-top.el-form-item .el-form-item__label{line-height:22px;margin-bottom:8px}.el-form--small .fc-wrap-top.el-form-item .el-form-item__label{line-height:20px;margin-bottom:4px}";
   styleInject(css_248z);
 
   function tidyBtnProp(btn, def) {
@@ -7510,7 +8078,7 @@
   function elmFormCreate() {
     return FormCreateFactory({
       ui: 'element-ui',
-      version: '3.2.0',
+      version: '3.2.2',
       manager: manager,
       extendApi: extendApi,
       install: install,