@form-create/element-ui 3.1.35 → 3.2.1

package/dist/form-create.esm.js

@@ -1,5 +1,5 @@
 /*!
- * @form-create/element-ui v3.1.35
+ * @form-create/element-ui v3.2.1
  * (c) 2018-2024 xaboy
  * Github https://github.com/xaboy/form-create
  * Released under the MIT License.
@@ -209,9 +209,9 @@ function toArray(value) {
   return Array.isArray(value) ? value : [null, undefined, ''].indexOf(value) > -1 ? [] : [value];
 }
 
-var NAME$9 = 'fcCheckbox';
+var NAME$8 = 'fcCheckbox';
 var Checkbox = defineComponent({
-  name: NAME$9,
+  name: NAME$8,
   inheritAttrs: false,
   props: {
     formCreateInject: Object,
@@ -521,9 +521,9 @@ function _isSlot(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
-var NAME$8 = 'fcFrame';
+var NAME$7 = 'fcFrame';
 var Frame = defineComponent({
-  name: NAME$8,
+  name: NAME$7,
   props: {
     type: {
       type: String,
@@ -1004,9 +1004,9 @@ var Frame = defineComponent({
   }
 });
 
-var NAME$7 = 'fcRadio';
+var NAME$6 = 'fcRadio';
 var Radio = defineComponent({
-  name: NAME$7,
+  name: NAME$6,
   inheritAttrs: false,
   props: {
     formCreateInject: Object,
@@ -1157,9 +1157,9 @@ function hasProperty(rule, k) {
   return {}.hasOwnProperty.call(rule, k);
 }
 
-var NAME$6 = 'fcSelect';
+var NAME$5 = 'fcSelect';
 var Select = defineComponent({
-  name: NAME$6,
+  name: NAME$5,
   inheritAttrs: false,
   props: {
     formCreateInject: Object,
@@ -1227,9 +1227,9 @@ var Select = defineComponent({
   }
 });
 
-var NAME$5 = 'fcTree';
+var NAME$4 = 'fcTree';
 var Tree = defineComponent({
-  name: NAME$5,
+  name: NAME$4,
   inheritAttrs: false,
   formCreateParser: {
     mergeProp: function mergeProp(ctx) {
@@ -1329,9 +1329,9 @@ function getFileName(file) {
   return ('' + file).split('/').pop();
 }
 
-var NAME$4 = 'fcUpload';
+var NAME$3 = 'fcUpload';
 var Upload = defineComponent({
-  name: NAME$4,
+  name: NAME$3,
   inheritAttrs: false,
   formCreateParser: {
     toFormValue: function toFormValue(value) {
@@ -1523,9 +1523,9 @@ function copy$1(obj) {
 var css_248z$1 = "._fc-group{display:flex;flex-direction:column;justify-content:center;min-height:38px;width:100%}._fc-group-disabled ._fc-group-add,._fc-group-disabled ._fc-group-btn{cursor:not-allowed}._fc-group-handle{background-color:#fff;border:1px dashed #d9d9d9;border-radius:15px;bottom:-15px;display:flex;flex-direction:row;padding:3px 8px;position:absolute;right:30px}._fc-group-btn{cursor:pointer}._fc-group-idx{align-items:center;background:#eee;border-radius:15px;bottom:-15px;display:flex;font-weight:700;height:30px;justify-content:center;left:10px;position:absolute;width:30px}._fc-group-handle ._fc-group-btn+._fc-group-btn{margin-left:7px}._fc-group-container{border:1px dashed #d9d9d9;border-radius:5px;display:flex;flex-direction:column;margin:5px 5px 25px;padding:20px 20px 25px;position:relative}._fc-group-arrow{height:20px;position:relative;width:20px}._fc-group-arrow:before{border-left:2px solid #999;border-top:2px solid #999;content:\"\";height:9px;left:5px;position:absolute;top:8px;transform:rotate(45deg);width:9px}._fc-group-arrow._fc-group-down{transform:rotate(180deg)}._fc-group-plus-minus{cursor:pointer;height:20px;position:relative;width:20px}._fc-group-plus-minus:after,._fc-group-plus-minus:before{background-color:#409eff;content:\"\";height:2px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:60%}._fc-group-plus-minus:before{transform:translate(-50%,-50%) rotate(90deg)}._fc-group-plus-minus._fc-group-minus:before{display:none}._fc-group-plus-minus._fc-group-minus:after{background-color:#f56c6c}._fc-group-add{border:1px solid rgba(64,158,255,.5);border-radius:15px;cursor:pointer;height:25px;width:25px}._fc-group-add._fc-group-plus-minus:after,._fc-group-add._fc-group-plus-minus:before{width:50%}";
 styleInject(css_248z$1);
 
-var NAME$3 = 'fcGroup';
+var NAME$2 = 'fcGroup';
 var Group = defineComponent({
-  name: NAME$3,
+  name: NAME$2,
   props: {
     field: String,
     rule: Array,
@@ -1935,9 +1935,9 @@ var Group = defineComponent({
   }
 });
 
-var NAME$2 = 'fcSubForm';
+var NAME$1 = 'fcSubForm';
 var Sub = defineComponent({
-  name: NAME$2,
+  name: NAME$1,
   props: {
     rule: Array,
     options: {
@@ -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,131 +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 NAME$1 = 'FormCreate';
-
 var getRuleInject = function getRuleInject(vm, parent) {
   if (!vm || vm === parent) {
     return;
@@ -2196,7 +2083,7 @@ var getRuleInject = function getRuleInject(vm, parent) {
 
 function $FormCreate(FormCreate, components, directives) {
   return defineComponent({
-    name: NAME$1,
+    name: 'FormCreate' + (FormCreate.isMobile ? 'Mobile' : ''),
     components: components,
     directives: directives,
     props: {
@@ -2324,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;
@@ -2390,6 +2291,13 @@ function $FormCreate(FormCreate, components, directives) {
 
           data.updateValue = json;
           vm.emit('update:modelValue', value);
+          nextTick(function () {
+            emit$form();
+
+            if (!parent) {
+              emit$topForm();
+            }
+          });
         }
       });
     },
@@ -2477,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,
@@ -2694,7 +2701,28 @@ var condition = {
   pattern: function pattern(a, b) {
     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 {
@@ -2834,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]);
     }
   });
@@ -2854,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);
           };
         }
 
@@ -3324,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) {
@@ -3333,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) {
@@ -3400,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);
@@ -3483,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() {
@@ -3794,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;
 
@@ -4064,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;
     }
   });
 }
@@ -4183,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);
@@ -4319,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;
@@ -4407,7 +4521,6 @@ extend(RuleContext.prototype, {
       computed: {},
       el: undef,
       $handle: undef,
-      $render: undef,
       $api: undef,
       vm: undef,
       vNode: undef,
@@ -4463,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
@@ -4471,6 +4583,7 @@ extend(RuleContext.prototype, {
     !init && this.unwatch();
     this.watchTo();
     this.link();
+    this.updateType();
   }
 });
 
@@ -4942,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;
@@ -4973,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;
@@ -5026,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
           });
@@ -5054,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);
         });
       });
     },
@@ -5916,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]) {
@@ -6011,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);
@@ -6065,76 +6199,85 @@ var fetch = function fetch(fc) {
       }
     };
 
-    var config = _objectSpread2(_objectSpread2({
-      headers: {}
-    }, option), {}, {
-      onSuccess: function onSuccess(body, flag) {
-        if (check()) return;
-
-        var fn = function fn(v) {
-          return flag ? v : hasProperty(v, 'data') ? v.data : v;
-        };
+    fetchAttr._fn[inject.id] = fc.watchLoadData(debounce(function (get) {
+      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 || 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 = {
@@ -6162,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;
 
@@ -6202,6 +6410,7 @@ function FormCreateFactory(config) {
   var directives = {};
   var modelFields = {};
   var useApps = [];
+  var listener = [];
   var extendApiFn = [config.extendApi];
 
   var providers = _objectSpread2({}, $provider);
@@ -6213,6 +6422,7 @@ function FormCreateFactory(config) {
   var loadData = reactive({});
   var CreateNode = CreateNodeFactory();
   var formulas = {};
+  var isMobile = config.isMobile === true;
   exportAttrs(config.attrs || {});
 
   function getApi(name) {
@@ -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,14 @@ function FormCreateFactory(config) {
 
   function removeData(id) {
     delete loadData[id];
+    emitData(id);
+  }
 
-    _emitData(id);
+  function on(name, callback) {
+    listener.push({
+      name: name,
+      callback: callback
+    });
   }
 
   function FormCreate(vm) {
@@ -6398,6 +6644,7 @@ function FormCreateFactory(config) {
       providers: providers,
       modelFields: modelFields,
       formulas: formulas,
+      isMobile: isMobile,
       rules: vm.props.rule,
       name: vm.props.name || uniqueId(),
       inFor: vm.props.inFor,
@@ -6407,12 +6654,17 @@ 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);
     });
     nextTick(function () {
       watch(_this.options, function () {
@@ -6437,6 +6689,7 @@ function FormCreateFactory(config) {
     }
   }
 
+  FormCreate.isMobile = isMobile;
   extend(FormCreate.prototype, {
     init: function init() {
       var _this2 = this;
@@ -6456,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;
     },
@@ -6494,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;
@@ -6505,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);
@@ -6514,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);
       });
     }
   });
@@ -6532,6 +6944,7 @@ function FormCreateFactory(config) {
       ui: config.ui,
       extendApi: extendApi,
       getData: getData,
+      setDataDriver: setDataDriver,
       setData: setData,
       removeData: removeData,
       maker: maker,
@@ -6553,17 +6966,20 @@ function FormCreateFactory(config) {
       parseJson: parseJson,
       toJson: toJson,
       useApp: useApp,
-      getApi: getApi
+      getApi: getApi,
+      on: on
     });
   }
 
   function useStatic(formCreate) {
     extend(formCreate, {
       create: create,
+      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] : {};
@@ -6572,7 +6988,8 @@ function FormCreateFactory(config) {
 
         useAttr($formCreate);
         app.config.globalProperties.$formCreate = $formCreate;
-        app.component('FormCreate', $form());
+        var $component = $form();
+        app.component($component.name, $component);
         useApps.forEach(function (v) {
           invoke(function () {
             return v(formCreate, app);
@@ -6584,6 +7001,8 @@ function FormCreateFactory(config) {
 
   useAttr(create);
   useStatic(create);
+  setDataDriver('$cookie', cookieDriver);
+  setDataDriver('$localStorage', localStorageDriver);
   CreateNode.use({
     fragment: 'fcFragment'
   });
@@ -6608,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 = {
@@ -7115,6 +7537,7 @@ var manager = {
     return this.$r({
       type: 'button',
       props: resetBtn,
+      "class": '_fc-reset-btn',
       style: {
         width: resetBtn.width
       },
@@ -7140,6 +7563,7 @@ var manager = {
     return this.$r({
       type: 'button',
       props: submitBtn,
+      "class": '_fc-submit-btn',
       style: {
         width: submitBtn.width
       },
@@ -7236,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 .fc-clock{display:none!important}.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{content:\"\"!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) {
@@ -7489,7 +7913,7 @@ function install(FormCreate) {
 function elmFormCreate() {
   return FormCreateFactory({
     ui: 'element-ui',
-    version: '3.1.35',
+    version: '3.2.1',
     manager: manager,
     extendApi: extendApi,
     install: install,