@form-create/element-ui 3.2.0 → 3.2.1

package/dist/form-create.esm.js

@@ -1,5 +1,5 @@
 /*!
- * @form-create/element-ui v3.2.0
+ * @form-create/element-ui v3.2.1
  * (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;
@@ -2322,10 +2211,24 @@ 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);
       onMounted(function () {
+        if (parent) {
+          fapi.top.bus.$on('$loadData.$form', emit$topForm);
+        }
+
         fc.mounted();
       });
       onBeforeUnmount(function () {
+        if (parent) {
+          fapi.top.bus.$off('$loadData.$form', emit$topForm);
+        }
+
         styleEl && document.head.removeChild(styleEl);
         rmSubForm();
         data.destroyed = true;
@@ -2388,6 +2291,13 @@ function $FormCreate(FormCreate, components, directives) {
 
           data.updateValue = json;
           vm.emit('update:modelValue', value);
+          nextTick(function () {
+            emit$form();
+
+            if (!parent) {
+              emit$topForm();
+            }
+          });
         }
       });
     },
@@ -2475,6 +2385,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 +2702,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 +2862,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 +2882,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 +3347,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 +3368,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,7 +3437,7 @@ 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);
@@ -3481,6 +3520,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() {
@@ -3792,6 +3859,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;
 
@@ -4062,6 +4132,52 @@ function useInject(Handler) {
       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 vars = extractVar(str);
+        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);
+            str = str.replaceAll("{{".concat(v, "}}"), val == null ? '' : val);
+          }
+        });
+      }
+
+      return str;
+    },
+    loadFetchVar: function loadFetchVar(options, get) {
+      var _this4 = this;
+
+      var loadVal = function loadVal(str) {
+        return _this4.loadStrVar(str, get);
+      };
+
+      options.action = loadVal(options.action);
+
+      if (options.headers) {
+        var _headers = {};
+        Object.keys(options.headers).forEach(function (k) {
+          _headers[loadVal(k)] = loadVal(options.headers[k]);
+        });
+        options.headers = _headers;
+      }
+
+      if (options.data) {
+        var _data = {};
+        Object.keys(options.data).forEach(function (k) {
+          _data[loadVal(k)] = loadVal(options.data[k]);
+        });
+        options.data = _data;
+      }
+
+      return options;
     }
   });
 }
@@ -4181,7 +4297,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 +4432,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 +4521,6 @@ extend(RuleContext.prototype, {
       computed: {},
       el: undef,
       $handle: undef,
-      $render: undef,
       $api: undef,
       vm: undef,
       vNode: undef,
@@ -4461,7 +4576,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 +4583,7 @@ extend(RuleContext.prototype, {
     !init && this.unwatch();
     this.watchTo();
     this.link();
+    this.updateType();
   }
 });
 
@@ -4940,6 +5055,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 +5108,11 @@ 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 ctx = _this2.getCtx(field);
 
         initial[field] = toRef(ctx.rule, 'value');
         return initial;
@@ -5024,11 +5161,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 +5189,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);
         });
       });
     },
@@ -5914,39 +6051,37 @@ 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;
 
-            var value = undefined;
-
-            if (attr.attr) {
-              value = fc.loadData[attr.attr] || attr["default"];
+            if (attr.template) {
+              value = fc.$handle.loadStrVar(attr.template, get);
+            } else {
+              value = get(attr.attr, attr["default"]);
+            }
 
-              if (attr.copy !== false) {
-                value = deepCopy(value);
-              }
+            if (attr.copy !== false) {
+              value = deepCopy(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 +6144,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 +6199,85 @@ 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) {
+      var _option = fc.$handle.loadFetchVar(deepCopy(option), get);
 
-        var fn = function fn(v) {
-          return flag ? v : hasProperty(v, 'data') ? v.data : v;
-        };
+      var config = _objectSpread2(_objectSpread2({
+        headers: {}
+      }, _option), {}, {
+        onSuccess: function onSuccess(body, flag) {
+          if (check()) return;
 
-        var parse = parseFn(option.parse);
-
-        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 || 1000));
   }
 
-  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 +6305,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;
 
@@ -6357,23 +6567,53 @@ function FormCreateFactory(config) {
     formulas[name] = fn;
   }
 
-  function _emitData(id) {
+  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);
+        that.bus.$emit('$loadData.' + id);
       });
     });
   }
 
   function setData(id, data) {
     loadData[id] = data;
+    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);
+      });
+    };
 
-    _emitData(id);
+    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 +6622,7 @@ function FormCreateFactory(config) {
 
   function removeData(id) {
     delete loadData[id];
-
-    _emitData(id);
+    emitData(id);
   }
 
   function on(name, callback) {
@@ -6415,12 +6654,14 @@ function FormCreateFactory(config) {
       },
       setData: setData,
       getData: getData,
+      emitData: emitData,
       loadData: loadData,
       CreateNode: CreateNode,
       bus: new Mitt(),
       unwatch: null,
       options: ref({}),
-      extendApiFn: extendApiFn
+      extendApiFn: extendApiFn,
+      fetchCache: new WeakMap()
     });
     listener.forEach(function (item) {
       _this.bus.$on(item.name, item.callback);
@@ -6468,6 +6709,159 @@ function FormCreateFactory(config) {
       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');
+            } else {
+              _this3.fetchCache["delete"](option);
+            }
+          }, option.wait || 1000);
+
+          var callback = function callback(get, change) {
+            if (change) {
+              reload();
+              return;
+            }
+
+            var options = _this3.$handle.loadFetchVar(copy$1(option), get);
+
+            _this3.$handle.api.fetch(options).then(function (res) {
+              _this3.fetchCache.set(option, {
+                status: true,
+                data: res
+              });
+
+              _this3.bus.$emit('$loadData.$globalData');
+            });
+          };
+
+          var unwatch = this.watchLoadData(callback);
+          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 {
+          val = getData(id, def);
+          split = [];
+        }
+
+        if (split.length) {
+          val = deepGet(val, split);
+        }
+      }
+
+      console.log(id, val);
+      return val == null || val === '' ? def : val;
+    },
+    watchLoadData: function watchLoadData(fn) {
+      var _this4 = 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 = _this4.getLoadData(id, def);
+
+        var key = id.split('.').shift();
+
+        var callback = function callback() {
+          if (key !== id) {
+            var temp = _this4.getLoadData(id, def);
+
+            if (JSON.stringify(temp) !== JSON.stringify(unwatch[id].val)) {
+              unwatch[id].val = temp;
+              run(true);
+            }
+          } else {
+            run(true);
+          }
+        };
+
+        _this4.bus.$on('$loadData.' + key, callback);
+
+        unwatch[id] = {
+          fn: function fn() {
+            _this4.bus.$off('$loadData.' + key, callback);
+          },
+          val: val
+        };
+        return val;
+      };
+
+      run(false);
+      return function () {
+        Object.keys(unwatch).forEach(function (k) {
+          return unwatch[k].fn();
+        });
+        unwatch = {};
+      };
+    },
     isSub: function isSub() {
       return this.vm.setupState.parent && this.vm.props.extendOption;
     },
@@ -6506,6 +6900,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 +6912,8 @@ function FormCreateFactory(config) {
       this.$handle.mounted();
     },
     unmount: function unmount() {
+      var _this5 = this;
+
       if (this.name) {
         if (this.inFor) {
           var idx = instance[this.name].indexOf(this);
@@ -6526,14 +6923,17 @@ function FormCreateFactory(config) {
         }
       }
 
+      listener.forEach(function (item) {
+        _this5.bus.$off(item.name, item.callback);
+      });
       this.unwatch && this.unwatch();
       this.$handle.reloadRule([]);
     },
     updated: function updated() {
-      var _this3 = this;
+      var _this6 = this;
 
       this.$handle.bindNextTick(function () {
-        return _this3.bus.$emit('next-tick', _this3.$handle.api);
+        return _this6.bus.$emit('next-tick', _this6.$handle.api);
       });
     }
   });
@@ -6544,6 +6944,7 @@ function FormCreateFactory(config) {
       ui: config.ui,
       extendApi: extendApi,
       getData: getData,
+      setDataDriver: setDataDriver,
       setData: setData,
       removeData: removeData,
       maker: maker,
@@ -6576,8 +6977,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 +7001,8 @@ function FormCreateFactory(config) {
 
   useAttr(create);
   useStatic(create);
+  setDataDriver('$cookie', cookieDriver);
+  setDataDriver('$localStorage', localStorageDriver);
   CreateNode.use({
     fragment: 'fcFragment'
   });
@@ -6623,7 +7027,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 +7660,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 +7913,7 @@ function install(FormCreate) {
 function elmFormCreate() {
   return FormCreateFactory({
     ui: 'element-ui',
-    version: '3.2.0',
+    version: '3.2.1',
     manager: manager,
     extendApi: extendApi,
     install: install,