@form-create/element-ui 3.2.0 → 3.2.2

package/dist/form-create.esm.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.
@@ -2042,8 +2042,20 @@ script.render = render;
 
 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) {
@@ -2055,129 +2067,6 @@ function upper(str) {
   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;
@@ -2212,6 +2101,7 @@ function $FormCreate(FormCreate, components, directives) {
         }
       },
       extendOption: Boolean,
+      driver: String,
       modelValue: Object,
       disabled: {
         type: Boolean,
@@ -2322,10 +2212,31 @@ function $FormCreate(FormCreate, components, directives) {
           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);
+      };
+
       onMounted(function () {
+        if (parent) {
+          fapi.top.bus.$on('$loadData.$form', emit$topForm);
+          fapi.top.bus.$on('change', emit$change);
+        }
+
         fc.mounted();
       });
       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;
@@ -2388,6 +2299,13 @@ function $FormCreate(FormCreate, components, directives) {
 
           data.updateValue = json;
           vm.emit('update:modelValue', value);
+          nextTick(function () {
+            emit$form();
+
+            if (!parent) {
+              emit$topForm();
+            }
+          });
         }
       });
     },
@@ -2475,6 +2393,105 @@ function attrs() {
   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,
@@ -2693,6 +2710,27 @@ var condition = {
     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 {
@@ -2832,7 +2870,7 @@ function fetch$1(option) {
 
   var headers = option.headers || {};
   Object.keys(headers).forEach(function (item) {
-    if (headers[item] !== null) {
+    if (headers[item] != null) {
       xhr.setRequestHeader(item, headers[item]);
     }
   });
@@ -2852,12 +2890,7 @@ function asyncFetch(config) {
           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);
           };
         }
 
@@ -3322,6 +3355,18 @@ function Api(h) {
       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) {
@@ -3331,12 +3376,14 @@ function Api(h) {
     },
     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) {
@@ -3398,11 +3445,14 @@ function Api(h) {
       });
     },
     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
@@ -3481,6 +3531,34 @@ function lower(str) {
   return str.replace(str[0], str[0].toLowerCase());
 }
 
+function toString(val) {
+  return val == null ? '' : _typeof(val) === 'object' ? JSON.stringify(val, null, 2) : String(val);
+}
+
+var id$2 = 0;
+function uniqueId() {
+  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() {
@@ -3736,7 +3814,7 @@ function useRender$1(Render) {
       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';
@@ -3792,6 +3870,9 @@ function useRender$1(Render) {
 
             _this7.onMounted(ctx, vn.el);
           },
+          'fc.updateValue': function fcUpdateValue(data) {
+            _this7.$handle.onUpdateValue(ctx, data);
+          },
           'fc.el': function fcEl(el) {
             ctx.exportEl = el;
 
@@ -3867,10 +3948,18 @@ function useRender$1(Render) {
     },
     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;
@@ -4045,23 +4134,76 @@ function useInject(Handler) {
         _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;
     }
   });
 }
@@ -4181,7 +4323,6 @@ function RuleContext(handle, rule, defaultValue) {
     defaultValue: isInput ? deepCopy(defaultValue) : undefined,
     field: rule.field || undefined
   });
-  this.updateType();
   this.updateKey();
   bind(this);
   this.update(handle, true);
@@ -4317,6 +4458,7 @@ extend(RuleContext.prototype, {
   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;
@@ -4405,7 +4547,6 @@ extend(RuleContext.prototype, {
       computed: {},
       el: undef,
       $handle: undef,
-      $render: undef,
       $api: undef,
       vm: undef,
       vNode: undef,
@@ -4461,7 +4602,6 @@ extend(RuleContext.prototype, {
       $render: handle.$render,
       $api: handle.api,
       vm: handle.vm,
-      trueType: handle.getType(this.originType),
       vNode: handle.$render.vNode,
       updated: false,
       cacheValue: this.rule.value
@@ -4469,6 +4609,7 @@ extend(RuleContext.prototype, {
     !init && this.unwatch();
     this.watchTo();
     this.link();
+    this.updateType();
   }
 });
 
@@ -4940,6 +5081,28 @@ function useInput(Handler) {
         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;
@@ -4971,11 +5134,23 @@ function useInput(Handler) {
       return this.formData[ctx.id];
     },
     syncForm: function syncForm() {
-      var _this = this;
+      var _this2 = this;
 
       var data = 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] = toRef(_this2.appendData, field);
+          }
+
+          return initial;
+        }, data);
+      }
+
+      fields.reduce(function (initial, field) {
+        var ctx = _this2.getCtx(field);
 
         initial[field] = toRef(ctx.rule, 'value');
         return initial;
@@ -5015,7 +5190,7 @@ function useInput(Handler) {
         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);
@@ -5024,11 +5199,11 @@ function useInput(Handler) {
       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
           });
@@ -5052,18 +5227,18 @@ function useInput(Handler) {
       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);
         });
       });
     },
@@ -5087,9 +5262,17 @@ var BaseParser = {
   },
   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) {}
@@ -5148,6 +5331,18 @@ function useContext(Handler) {
     },
     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) {
@@ -5345,7 +5540,7 @@ function useContext(Handler) {
 
       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__);
           }
         });
@@ -5896,6 +6091,17 @@ extend(Manager.prototype, {
     }), 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();
   },
@@ -5914,39 +6120,48 @@ var loadData = function loadData(fc) {
   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]) {
@@ -6009,6 +6224,7 @@ var fetch = function fetch(fc) {
 
   function run(inject, rule, api) {
     var option = inject.value;
+    fetchAttr.deleted(inject);
 
     if (is.Function(option)) {
       option = option(rule, api);
@@ -6063,76 +6279,89 @@ var fetch = function fetch(fc) {
       }
     };
 
-    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 = {
@@ -6160,6 +6389,71 @@ var html = {
   }
 };
 
+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;
 
@@ -6199,6 +6493,7 @@ function FormCreateFactory(config) {
   var parsers = {};
   var directives = {};
   var modelFields = {};
+  var drivers = {};
   var useApps = [];
   var listener = [];
   var extendApiFn = [config.extendApi];
@@ -6357,23 +6652,66 @@ function FormCreateFactory(config) {
     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) {
@@ -6382,8 +6720,7 @@ function FormCreateFactory(config) {
 
   function removeData(id) {
     delete loadData[id];
-
-    _emitData(id);
+    refreshData(id);
   }
 
   function on(name, callback) {
@@ -6413,14 +6750,18 @@ function FormCreateFactory(config) {
         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: ref({}),
-      extendApiFn: extendApiFn
+      extendApiFn: extendApiFn,
+      fetchCache: new WeakMap()
     });
     listener.forEach(function (item) {
       _this.bus.$on(item.name, item.callback);
@@ -6454,7 +6795,7 @@ function FormCreateFactory(config) {
       var _this2 = this;
 
       if (this.isSub()) {
-        this.unwatch = watch(function () {
+        this.unwatch.push(watch(function () {
           return _this2.vm.setupState.parent.setupState.fc.options.value;
         }, function () {
           _this2.initOptions();
@@ -6462,12 +6803,221 @@ function FormCreateFactory(config) {
           _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;
     },
@@ -6506,6 +7056,7 @@ function FormCreateFactory(config) {
     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;
@@ -6517,6 +7068,8 @@ function FormCreateFactory(config) {
       this.$handle.mounted();
     },
     unmount: function unmount() {
+      var _this6 = this;
+
       if (this.name) {
         if (this.inFor) {
           var idx = instance[this.name].indexOf(this);
@@ -6526,14 +7079,20 @@ function FormCreateFactory(config) {
         }
       }
 
-      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);
       });
     }
   });
@@ -6544,13 +7103,16 @@ function FormCreateFactory(config) {
       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,
@@ -6576,8 +7138,9 @@ function FormCreateFactory(config) {
       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] : {};
@@ -6599,6 +7162,8 @@ function FormCreateFactory(config) {
 
   useAttr(create);
   useStatic(create);
+  setDataDriver('$cookie', cookieDriver);
+  setDataDriver('$localStorage', localStorageDriver);
   CreateNode.use({
     fragment: 'fcFragment'
   });
@@ -6623,7 +7188,10 @@ function FormCreateFactory(config) {
     inherit.formulas && extend(formulas, inherit.formulas);
   }
 
-  return create;
+  var FcComponent = $form();
+  setPrototypeOf(FcComponent, create);
+  FcComponent.util = create;
+  return FcComponent;
 }
 
 var DEFAULT_FORMATS = {
@@ -7253,7 +7821,7 @@ function useFrame(maker) {
   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) {
@@ -7506,7 +8074,7 @@ function install(FormCreate) {
 function elmFormCreate() {
   return FormCreateFactory({
     ui: 'element-ui',
-    version: '3.2.0',
+    version: '3.2.2',
     manager: manager,
     extendApi: extendApi,
     install: install,