@form-create/element-ui 3.1.27 → 3.1.29

package/dist/form-create.esm.js

@@ -1,5 +1,5 @@
 /*!
- * @form-create/element-ui v3.1.27
+ * @form-create/element-ui v3.1.29
  * (c) 2018-2024 xaboy
  * Github https://github.com/xaboy/form-create
  * Released under the MIT License.
@@ -253,13 +253,16 @@ var Checkbox = defineComponent({
           var props = _objectSpread2({}, opt);
 
           var value = props.value;
+          var label = props.label;
           delete props.value;
+          delete props.label;
           return createVNode(Type, mergeProps$1(props, {
             "label": value,
-            "key": name + index + '-' + opt.value
+            "value": value,
+            "key": name + index + '-' + value
           }), {
             "default": function _default() {
-              return [props.label || props.value || ''];
+              return [label || value || ''];
             }
           });
         }), (_this$$slots$default = (_this$$slots = _this.$slots)["default"]) === null || _this$$slots$default === void 0 ? void 0 : _this$$slots$default.call(_this$$slots)];
@@ -997,13 +1000,16 @@ var Radio = defineComponent({
           var props = _objectSpread2({}, opt);
 
           var value = props.value;
+          var label = props.label;
           delete props.value;
+          delete props.label;
           return createVNode(Type, mergeProps$1(props, {
             "label": value,
-            "key": name + index + '-' + opt.value
+            "value": value,
+            "key": name + index + '-' + value
           }), {
             "default": function _default() {
-              return [props.label || props.value || ''];
+              return [label || value || ''];
             }
           });
         }), (_this$$slots$default = (_this$$slots = _this.$slots)["default"]) === null || _this$$slots$default === void 0 ? void 0 : _this$$slots$default.call(_this$$slots)];
@@ -1415,6 +1421,10 @@ var _extends = Object.assign || function (a) {
 function extend() {
   return _extends.apply(this, arguments);
 }
+function copy$1(obj) {
+  if (_typeof(obj) !== 'object' || obj === null) return obj;
+  return obj instanceof Array ? _toConsumableArray(obj) : _objectSpread2({}, 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);
@@ -1798,7 +1808,7 @@ var Group = defineComponent({
       add: this.add
     }) : createVNode("div", {
       "key": 'a_def',
-      "class": "_fc-group-plus-minus _fc-group-add",
+      "class": "_fc-group-plus-minus _fc-group-add fc-clock",
       "onClick": this.add
     }, null) : keys.map(function (key, index) {
       var _this12$cacheRule$key = _this12.cacheRule[key],
@@ -1832,7 +1842,7 @@ var Group = defineComponent({
       }), null), createVNode("div", {
         "class": "_fc-group-idx"
       }, [index + 1]), btn.length ? createVNode("div", {
-        "class": "_fc-group-handle"
+        "class": "_fc-group-handle fc-clock"
       }, [btn]) : null]);
     });
     return createVNode("div", {
@@ -1990,6 +2000,7 @@ function $FormCreate(FormCreate, components, directives) {
       },
       extendOption: Boolean,
       modelValue: Object,
+      disabled: Boolean,
       api: Object,
       name: String,
       subForm: {
@@ -2019,7 +2030,7 @@ function $FormCreate(FormCreate, components, directives) {
         isShow: true,
         unique: 1,
         renderRule: _toConsumableArray(rule.value || []),
-        updateValue: JSON.stringify(modelValue || {})
+        updateValue: JSON.stringify(modelValue.value || {})
       });
       var fc = new FormCreate(vm);
       var fapi = fc.api();
@@ -2088,8 +2099,8 @@ function $FormCreate(FormCreate, components, directives) {
       });
       watch(function () {
         return props.option;
-      }, function (n) {
-        fc.initOptions(n);
+      }, function () {
+        fc.initOptions();
         fapi.refresh();
       }, {
         deep: true
@@ -2100,6 +2111,11 @@ function $FormCreate(FormCreate, components, directives) {
       }, {
         deep: true
       });
+      watch(function () {
+        return props.disabled;
+      }, function (n) {
+        fapi.disabled(!!n);
+      });
       return _objectSpread2(_objectSpread2({
         fc: markRaw(fc),
         parent: parent ? markRaw(parent) : parent,
@@ -2122,6 +2138,7 @@ function $FormCreate(FormCreate, components, directives) {
       var vm = getCurrentInstance();
       vm.setupState.fc.init();
       vm.emit('update:api', vm.setupState.fapi);
+      vm.props.disabled && vm.setupState.fapi.disabled(true);
     }
   });
 }
@@ -2195,7 +2212,7 @@ var mergeFn = function mergeFn(fn1, fn2) {
   };
 };
 
-var keyAttrs = ['type', 'slot', 'emitPrefix', 'value', 'name', 'native', 'hidden', 'display', 'inject', 'options', 'emit', 'link', 'prefix', 'suffix', 'update', 'sync', 'optionsTo', 'key', 'slotUpdate', 'computed', 'preview', 'component', 'cache'];
+var keyAttrs = ['type', 'slot', 'emitPrefix', 'value', 'name', 'native', 'hidden', 'display', 'inject', 'options', 'emit', 'link', 'prefix', 'suffix', 'update', 'sync', 'optionsTo', 'key', 'slotUpdate', 'computed', 'preview', 'component', 'cache', 'modelEmit'];
 var arrayAttrs = ['validate', 'children', 'control'];
 var normalAttrs = ['effect'];
 function attrs() {
@@ -2226,6 +2243,7 @@ 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([], obj, true), function (key, val) {
@@ -2261,6 +2279,26 @@ function parseFn(fn, mode) {
       } 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;
@@ -2445,6 +2483,10 @@ function toProps(rule) {
   if (prop.slot) delete prop.slot;
   return prop;
 }
+function setPrototypeOf(o, proto) {
+  Object.setPrototypeOf(o, proto);
+  return o;
+}
 
 function baseRule() {
   return {
@@ -2521,6 +2563,107 @@ function makerFactory() {
   };
 }
 
+function getError(action, option, xhr) {
+  var msg = "fail to ".concat(action, " ").concat(xhr.status, "'");
+  var err = new Error(msg);
+  err.status = xhr.status;
+  err.url = action;
+  return err;
+}
+
+function getBody(xhr) {
+  var text = xhr.responseText || xhr.response;
+
+  if (!text) {
+    return text;
+  }
+
+  try {
+    return JSON.parse(text);
+  } catch (e) {
+    return text;
+  }
+}
+
+function fetch$1(option) {
+  if (typeof XMLHttpRequest === 'undefined') {
+    return;
+  }
+
+  var xhr = new XMLHttpRequest();
+  var action = option.action;
+
+  xhr.onerror = function error(e) {
+    option.onError(e);
+  };
+
+  xhr.onload = function onload() {
+    if (xhr.status < 200 || xhr.status >= 300) {
+      return option.onError(getError(action, option, xhr), getBody(xhr));
+    }
+
+    option.onSuccess(getBody(xhr));
+  };
+
+  xhr.open(option.method || 'get', action, true);
+  var formData;
+
+  if (option.data) {
+    if ((option.dataType || '').toLowerCase() !== 'json') {
+      formData = new FormData();
+      Object.keys(option.data).map(function (key) {
+        formData.append(key, option.data[key]);
+      });
+    } else {
+      formData = JSON.stringify(option.data);
+      xhr.setRequestHeader('content-type', 'application/json');
+    }
+  }
+
+  if (option.withCredentials && 'withCredentials' in xhr) {
+    xhr.withCredentials = true;
+  }
+
+  var headers = option.headers || {};
+  Object.keys(headers).forEach(function (item) {
+    if (headers[item] !== null) {
+      xhr.setRequestHeader(item, headers[item]);
+    }
+  });
+  xhr.send(formData);
+}
+function asyncFetch(config) {
+  return new Promise(function (resolve, reject) {
+    fetch$1(_objectSpread2(_objectSpread2({}, config), {}, {
+      onSuccess: function onSuccess(res) {
+        var fn = function fn(v) {
+          return v;
+        };
+
+        var parse = parseFn(config.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;
+          };
+        }
+
+        resolve(fn(res));
+      },
+      onError: function onError(err) {
+        reject(err);
+      }
+    }));
+  });
+}
+
 function copy(value) {
   return deepCopy(value);
 }
@@ -2576,7 +2719,15 @@ function Api(h) {
     },
 
     get parent() {
-      return h.vm.parent && h.vm.parent.setupState.fapi;
+      return h.vm.setupState.parent && h.vm.setupState.parent.setupState.fapi;
+    },
+
+    get top() {
+      if (api.parent) {
+        return api.parent.top;
+      }
+
+      return api;
     },
 
     get children() {
@@ -2920,6 +3071,84 @@ function Api(h) {
       var ctx = h.getCtx(field);
       return ctx ? h.subForm[ctx.id] : undefined;
     },
+    getChildrenRuleList: function getChildrenRuleList(id) {
+      var flag = _typeof(id) === 'object';
+      var ctx = flag ? byCtx(id) : h.getCtx(id);
+      var rule = ctx ? ctx.rule : flag ? id : api.getRule(id);
+
+      if (!rule) {
+        return [];
+      }
+
+      var rules = [];
+
+      var findRules = function findRules(children) {
+        children && children.forEach(function (item) {
+          if (_typeof(item) !== 'object') {
+            return;
+          }
+
+          if (item.field) {
+            rules.push(item);
+          }
+
+          rules.push.apply(rules, _toConsumableArray(api.getChildrenRuleList(item)));
+        });
+      };
+
+      findRules(ctx ? ctx.loadChildrenPending() : rule.children);
+      return rules;
+    },
+    getChildrenFormData: function getChildrenFormData(id) {
+      var rules = api.getChildrenRuleList(id);
+      return rules.reduce(function (formData, rule) {
+        formData[rule.field] = copy(rule.value);
+        return formData;
+      }, {});
+    },
+    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;
+        }
+      });
+    },
+    getGlobalEvent: function getGlobalEvent(name) {
+      var event = api.options.globalEvent[name];
+
+      if (event) {
+        if (_typeof(event) === 'object') {
+          event = event.handle;
+        }
+
+        return parseFn(event);
+      }
+
+      return undefined;
+    },
+    getGlobalData: function getGlobalData(name) {
+      return new Promise(function (resolve, inject) {
+        var config = api.options.globalData[name];
+
+        if (!config) {
+          resolve(h.fc.loadData[name]);
+        }
+
+        if (config.type === 'fetch') {
+          asyncFetch(config).then(function (res) {
+            resolve({
+              res: res,
+              config: config
+            });
+          })["catch"](inject);
+        } else {
+          resolve(config.data);
+        }
+      });
+    },
     nextTick: function nextTick(fn) {
       h.bus.$once('next-tick', fn);
       h.refresh();
@@ -3016,7 +3245,8 @@ function toString(val) {
 
 var id$2 = 0;
 function uniqueId() {
-  return 'F' + Math.random().toString(36).substr(3, 3) + Number("".concat(Date.now()).concat(++id$2)).toString(36);
+  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) {
@@ -3215,7 +3445,7 @@ function useRender$1(Render) {
               inject.children = children;
               _vn = slot(inject);
             } else {
-              _vn = preview ? ctx.parser.preview(children, ctx) : ctx.parser.render(children, ctx);
+              _vn = preview ? ctx.parser.preview(copy$1(children), ctx) : ctx.parser.render(copy$1(children), ctx);
             }
 
             _vn = _this4.renderSides(_vn, ctx);
@@ -3225,7 +3455,17 @@ function useRender$1(Render) {
             }
 
             if (ctx.none) {
-              _vn = _this4.display(_vn);
+              if (Array.isArray(_vn)) {
+                _vn = _vn.map(function (v) {
+                  if (!v || !v.__v_isVNode) {
+                    return v;
+                  }
+
+                  return _this4.none(v);
+                });
+              } else {
+                _vn = _this4.none(_vn);
+              }
             }
 
             cacheFlag && !Object.keys(children).length && _this4.setCache(ctx, function () {
@@ -3257,43 +3497,25 @@ function useRender$1(Render) {
         return;
       }
     },
-    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';
-    },
-    display: function display(vn) {
-      var _this5 = this;
-
-      if (Array.isArray(vn)) {
-        var data = [];
-        vn.forEach(function (v) {
-          if (Array.isArray(v)) return _this5.display(v);
-          if (_this5.none(v)) data.push(v);
-        });
-        return data;
-      } else {
-        return this.none(vn);
-      }
-    },
     none: function none(vn) {
       if (vn) {
-        if (Array.isArray(vn.props.style)) {
-          vn.props.style.push({
-            display: 'none'
-          });
+        if (Array.isArray(vn.props["class"])) {
+          vn.props["class"].push('fc-none');
         } else {
-          vn.props.style = [vn.props.style, {
-            display: 'none'
-          }];
+          vn.props["class"] = [vn.props["class"], 'fc-none'];
         }
 
         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';
+    },
     isFragment: function isFragment(ctx) {
       return ctx.type === 'fragment' || ctx.type === 'template';
     },
     injectProp: function injectProp(ctx) {
-      var _this6 = this;
+      var _this5 = this;
 
       var state = this.vm.setupState;
 
@@ -3302,14 +3524,15 @@ function useRender$1(Render) {
           api: this.$handle.api,
           form: this.fc.create,
           subForm: function subForm(_subForm) {
-            _this6.$handle.addSubForm(ctx, _subForm);
+            _this5.$handle.addSubForm(ctx, _subForm);
           },
           getSubForm: function getSubForm() {
-            return _this6.$handle.subForm[ctx.id];
+            return _this5.$handle.subForm[ctx.id];
           },
           options: [],
           children: [],
           preview: false,
+          id: ctx.id,
           field: ctx.field,
           rule: ctx.rule,
           input: ctx.input
@@ -3325,7 +3548,7 @@ function useRender$1(Render) {
       return inject;
     },
     ctxProp: function ctxProp(ctx, custom) {
-      var _this7 = this;
+      var _this6 = this;
 
       var ref = ctx.ref,
           key = ctx.key,
@@ -3340,7 +3563,7 @@ function useRender$1(Render) {
           vnodeMounted: function vnodeMounted(vn) {
             vn.el.__rule__ = ctx.rule;
 
-            _this7.onMounted(ctx, vn.el);
+            _this6.onMounted(ctx, vn.el);
           },
           'fc.el': function fcEl(el) {
             ctx.exportEl = el;
@@ -3356,12 +3579,14 @@ function useRender$1(Render) {
         var field = this.getModelField(ctx);
         var model = {
           callback: function callback(value) {
-            _this7.onInput(ctx, value);
+            _this6.onInput(ctx, value);
           },
           value: this.$handle.getFormData(ctx)
         };
         props.push({
-          on: _defineProperty({}, "update:".concat(field), model.callback),
+          on: _objectSpread2(_defineProperty({}, "update:".concat(field), model.callback), ctx.prop.modelEmit ? _defineProperty({}, ctx.prop.modelEmit, function () {
+            return _this6.onEmitInput(ctx);
+          }) : {}),
           props: _defineProperty({}, field, model.value)
         });
         ctx.prop.model = model;
@@ -3376,10 +3601,18 @@ function useRender$1(Render) {
       this.$handle.effect(ctx, 'mounted');
     },
     onInput: function onInput(ctx, value) {
+      if (ctx.prop.modelEmit) {
+        this.$handle.onBaseInput(ctx, value);
+        return;
+      }
+
       this.$handle.onInput(ctx, value);
     },
+    onEmitInput: function onEmitInput(ctx) {
+      this.$handle.setValue(ctx, ctx.parser.toValue(ctx.modelValue, ctx), ctx.modelValue);
+    },
     renderChildren: function renderChildren(children, ctx) {
-      var _this8 = this;
+      var _this7 = this;
 
       if (!is.trueArray(children)) return {};
       var slotBag = makeSlotBag();
@@ -3388,14 +3621,14 @@ function useRender$1(Render) {
         if (is.String(child)) return slotBag.setSlot(null, child);
 
         if (child.__fc__) {
-          return _this8.renderSlot(slotBag, child.__fc__, ctx);
+          return _this7.renderSlot(slotBag, child.__fc__, ctx);
         }
 
         if (child.type) {
           nextTick(function () {
-            _this8.$handle.loadChildren(children, ctx);
+            _this7.$handle.loadChildren(children, ctx);
 
-            _this8.$handle.refresh();
+            _this7.$handle.refresh();
           });
         }
       });
@@ -3409,7 +3642,7 @@ function useRender$1(Render) {
       return this.vNode.make(lower(ctx.originType), prop, children);
     },
     renderRule: function renderRule(rule, children, origin) {
-      var _this9 = this;
+      var _this8 = this;
 
       if (!rule) return undefined;
       if (is.String(rule)) return rule;
@@ -3433,7 +3666,7 @@ function useRender$1(Render) {
       if (is.trueArray(rule.children)) {
         rule.children.forEach(function (v) {
           v && slotBag.setSlot(v === null || v === void 0 ? void 0 : v.slot, function () {
-            return _this9.renderRule(v);
+            return _this8.renderRule(v);
           });
         });
       }
@@ -3677,16 +3910,6 @@ function useRender(Handler) {
   });
 }
 
-function isNone(ctx) {
-  var none = !(is.Undef(ctx.prop.display) || !!ctx.prop.display);
-
-  if (ctx.parent) {
-    return ctx.parent.none || none;
-  } else {
-    return none;
-  }
-}
-
 function bind(ctx) {
   Object.defineProperties(ctx.origin, {
     __fc__: enumerable(markRaw(ctx), true)
@@ -3709,7 +3932,9 @@ function RuleContext(handle, rule, defaultValue) {
     linkOn: [],
     root: [],
     ctrlRule: [],
+    children: [],
     parent: null,
+    group: rule.subRule ? this : null,
     cacheConfig: null,
     prop: _objectSpread2({}, rule),
     computed: {},
@@ -3727,6 +3952,17 @@ function RuleContext(handle, rule, defaultValue) {
   this.update(handle, true);
 }
 extend(RuleContext.prototype, {
+  getParentGroup: function getParentGroup() {
+    var ctx = this.parent;
+
+    while (ctx) {
+      if (ctx.group) {
+        return ctx;
+      }
+
+      ctx = ctx.parent;
+    }
+  },
   loadChildrenPending: function loadChildrenPending() {
     var _this = this;
 
@@ -3862,7 +4098,7 @@ extend(RuleContext.prototype, {
     })), [this.computed]));
   },
   initNone: function initNone() {
-    this.none = isNone(this);
+    this.none = !(is.Undef(this.prop.display) || !!this.prop.display);
   },
   check: function check(handle) {
     return this.vm === handle.vm;
@@ -3892,6 +4128,11 @@ extend(RuleContext.prototype, {
     this.unwatch();
     this.unlink();
     this.rmCtrl();
+
+    if (this.parent) {
+      this.parent.children.splice(this.parent.children.indexOf(this) >>> 0, 1);
+    }
+
     extend(this, {
       deleted: true,
       prop: _objectSpread2({}, this.rule),
@@ -3903,6 +4144,7 @@ extend(RuleContext.prototype, {
       vm: undef,
       vNode: undef,
       parent: null,
+      children: [],
       cacheConfig: null,
       none: false
     });
@@ -4163,7 +4405,7 @@ function useLoader(Handler) {
         }
       };
 
-      rules.map(function (_rule, index) {
+      var ctxs = rules.map(function (_rule, index) {
         if (parent && !is.Object(_rule)) return;
         if (!_this6.pageEnd && !parent && index >= _this6.first) return;
 
@@ -4231,6 +4473,10 @@ function useLoader(Handler) {
           }
 
           _this6.appendValue(ctx.rule);
+
+          if (ctx.parent && ctx.parent !== parent) {
+            _this6.rmSubRuleData(ctx);
+          }
         }
 
         _this6.parseEmit(ctx);
@@ -4278,7 +4524,13 @@ function useLoader(Handler) {
 
         if (_this6.refreshControl(ctx)) _this6.cycleLoad = true;
         return ctx;
+      }).filter(function (v) {
+        return !!v;
       });
+
+      if (parent) {
+        parent.children = ctxs;
+      }
     },
     refreshControl: function refreshControl(ctx) {
       return ctx.input && ctx.rule.control && this.useCtrl(ctx);
@@ -4481,9 +4733,33 @@ function useInput(Handler) {
         this.setValue(ctx, val, value);
       }
     },
+    onBaseInput: function onBaseInput(ctx, value) {
+      this.setFormData(ctx, value);
+      ctx.modelValue = value;
+      this.nextRefresh();
+      this.$render.clearCache(ctx);
+    },
     setFormData: function setFormData(ctx, value) {
+      ctx.modelValue = value;
+      var group = ctx.getParentGroup();
+
+      if (group) {
+        if (!this.subRuleData[group.id]) {
+          this.subRuleData[group.id] = {};
+        }
+
+        this.subRuleData[group.id][ctx.field] = ctx.rule.value;
+      }
+
       $set(this.formData, ctx.id, value);
     },
+    rmSubRuleData: function rmSubRuleData(ctx) {
+      var group = ctx.getParentGroup();
+
+      if (group && this.subRuleData[group.id]) {
+        delete this.subRuleData[group.id][ctx.field];
+      }
+    },
     getFormData: function getFormData(ctx) {
       return this.formData[ctx.id];
     },
@@ -4611,40 +4887,6 @@ var BaseParser = {
   mergeProp: function mergeProp(ctx) {}
 };
 
-var _ = {
-  sum: function sum(arr) {
-    if (Array.isArray(arr)) {
-      var val = 0;
-      arr.map(function (v) {
-        return val += v || 0;
-      });
-      return val;
-    }
-  },
-  column: function column(arr, field) {
-    if (Array.isArray(arr)) {
-      return arr.map(function (v) {
-        return v[field];
-      });
-    }
-
-    return [];
-  },
-  get: function get(obj, field, def) {
-    var lst = field.split('.');
-    var val = obj;
-
-    for (var i = 0; i < lst.length; i++) {
-      if (hasProperty(val, lst[i])) {
-        val = val[lst[i]];
-      } else {
-        return def === undefined ? 0 : def;
-      }
-    }
-
-    return val;
-  }
-};
 var noneKey = ['field', 'value', 'vm', 'template', 'name', 'config', 'control', 'inject', 'sync', 'payload', 'optionsTo', 'update', 'slotUpdate', 'computed', 'component', 'cache'];
 function useContext(Handler) {
   extend(Handler.prototype, {
@@ -4795,28 +5037,43 @@ function useContext(Handler) {
           }
         }));
         this.bus.$once('load-end', function () {
-          var computedRef = toRef(ctx.rule, 'computed');
-          ctx.watch.push(watch(function () {
-            var computed = computedRef.value;
-            if (!computed) return undefined;
-            var fn;
-
-            if (is.Function(computed)) {
-              fn = function fn() {
-                return computed(_this.api.form, _this.api);
-              };
-            } else {
-              fn = function fn() {
-                return new Function('_', "with(this){ return ".concat(computed, " }")).call(_this.api.form, _);
-              };
-            }
+          var computed = ctx.rule.computed;
 
-            return invoke(fn, undefined);
-          }, function (n) {
-            val.value = n;
-          }, {
-            immediate: !!computedRef.value
-          }));
+          if (!computed) {
+            return;
+          }
+
+          if (_typeof(computed) !== 'object') {
+            computed = {
+              value: computed
+            };
+          }
+
+          Object.keys(computed).forEach(function (k) {
+            ctx.watch.push(watch(function () {
+              var item = computed[k];
+              if (!item) return undefined;
+              var fn;
+
+              if (is.Function(item)) {
+                fn = function fn() {
+                  return item(_this.api.form, _this.api);
+                };
+              } else {
+                var group = ctx.getParentGroup();
+
+                fn = function fn() {
+                  return new Function('formulas', 'top', 'group', "with(top){with(this){with(group){with(formulas){ return ".concat(item, " }}}}")).call(_this.api.form, _this.fc.formulas, _this.api.top.form, group ? _this.subRuleData[group.id] || {} : {});
+                };
+              }
+
+              return invoke(fn, undefined);
+            }, function (n) {
+              deepSet(ctx.rule, k, n);
+            }, {
+              immediate: true
+            }));
+          });
         });
       }
 
@@ -4827,7 +5084,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 === o) {
+          if ((n || []).indexOf(child) === -1 && child && !is.String(child) && child.__fc__ && child.__fc__.parent === ctx && child.__fc__.root !== n) {
             _this2.rmCtx(child.__fc__);
           }
         });
@@ -4858,6 +5115,16 @@ function useContext(Handler) {
       $del(this.formData, id);
       $del(this.subForm, id);
       $del(this.vm.setupState.ctxInject, id);
+      var group = ctx.getParentGroup();
+
+      if (group && this.subRuleData[group.id]) {
+        $del(this.subRuleData[group.id], field);
+      }
+
+      if (ctx.group) {
+        $del(this.subRuleData, id);
+      }
+
       input && this.rmIdCtx(ctx, field, 'field');
       name && this.rmIdCtx(ctx, name, 'name');
 
@@ -5113,6 +5380,7 @@ function Handler(fc) {
     deferSyncFn: null,
     isMounted: false,
     formData: reactive({}),
+    subRuleData: reactive({}),
     subForm: {},
     form: reactive({}),
     appendData: {},
@@ -5162,77 +5430,6 @@ useContext(Handler);
 useLifecycle(Handler);
 useEffect(Handler);
 
-// https://github.com/ElemeFE/element/blob/dev/packages/upload/src/ajax.js
-function getError(action, option, xhr) {
-  var msg = "fail to ".concat(action, " ").concat(xhr.status, "'");
-  var err = new Error(msg);
-  err.status = xhr.status;
-  err.url = action;
-  return err;
-}
-
-function getBody(xhr) {
-  var text = xhr.responseText || xhr.response;
-
-  if (!text) {
-    return text;
-  }
-
-  try {
-    return JSON.parse(text);
-  } catch (e) {
-    return text;
-  }
-}
-
-function fetch$1(option) {
-  if (typeof XMLHttpRequest === 'undefined') {
-    return;
-  }
-
-  var xhr = new XMLHttpRequest();
-  var action = option.action;
-
-  xhr.onerror = function error(e) {
-    option.onError(e);
-  };
-
-  xhr.onload = function onload() {
-    if (xhr.status < 200 || xhr.status >= 300) {
-      return option.onError(getError(action, option, xhr), getBody(xhr));
-    }
-
-    option.onSuccess(getBody(xhr));
-  };
-
-  xhr.open(option.method || 'get', action, true);
-  var formData;
-
-  if (option.data) {
-    if ((option.dataType || '').toLowerCase() !== 'json') {
-      formData = new FormData();
-      Object.keys(option.data).map(function (key) {
-        formData.append(key, option.data[key]);
-      });
-    } else {
-      formData = JSON.stringify(option.data);
-      xhr.setRequestHeader('content-type', 'application/json');
-    }
-  }
-
-  if (option.withCredentials && 'withCredentials' in xhr) {
-    xhr.withCredentials = true;
-  }
-
-  var headers = option.headers || {};
-  Object.keys(headers).forEach(function (item) {
-    if (headers[item] !== null) {
-      xhr.setRequestHeader(item, headers[item]);
-    }
-  });
-  xhr.send(formData);
-}
-
 var NAME = 'fcFragment';
 var fragment = defineComponent({
   name: NAME,
@@ -5376,6 +5573,23 @@ extend(Manager.prototype, {
   form: function form() {
     return this.vm.refs[this.ref];
   },
+  getSlot: function getSlot(name) {
+    var _fn = function _fn(vm) {
+      if (vm) {
+        var slot = vm.slots[name];
+
+        if (slot) {
+          return slot;
+        }
+
+        return _fn(vm.setupState.parent);
+      }
+
+      return undefined;
+    };
+
+    return _fn(this.vm);
+  },
   mergeOptions: function mergeOptions(args, opt) {
     var _this2 = this;
 
@@ -5498,22 +5712,23 @@ var fetch = function fetch(fc) {
   function run(inject, rule, api) {
     var option = inject.value;
 
+    if (is.Function(option)) {
+      option = option(rule, api);
+    }
+
+    option = parseOpt(option);
+
     var set = function set(val) {
       if (val === undefined) {
         inject.clearProp();
-        api.sync(rule);
       } else {
         deepSet(inject.getProp(), option.to || 'options', val);
       }
-    };
-
-    if (is.Function(option)) {
-      option = option(rule, api);
-    }
 
-    option = parseOpt(option);
+      api.sync(rule);
+    };
 
-    if (!option || !option.action) {
+    if (!option || !option.action && !option.key) {
       set(undefined);
       return;
     }
@@ -5522,6 +5737,22 @@ var fetch = function fetch(fc) {
       option.to = 'options';
     }
 
+    if (option.key) {
+      var item = fc.$handle.options.globalData[option.key];
+
+      if (!item) {
+        set(undefined);
+        return;
+      }
+
+      if (item.type === 'static') {
+        set(item.data);
+        return;
+      } else {
+        option = _objectSpread2(_objectSpread2({}, option), item);
+      }
+    }
+
     var _onError = option.onError;
 
     var check = function check() {
@@ -5542,11 +5773,13 @@ var fetch = function fetch(fc) {
           return flag ? v : v.data;
         };
 
-        if (is.Function(option.parse)) {
-          fn = option.parse;
-        } else if (option.parse && is.String(option.parse)) {
+        var parse = parseFn(option.parse);
+
+        if (is.Function(parse)) {
+          fn = parse;
+        } else if (parse && is.String(parse)) {
           fn = function fn(v) {
-            option.parse.split('.').forEach(function (k) {
+            parse.split('.').forEach(function (k) {
               if (v) {
                 v = v[k];
               }
@@ -5568,8 +5801,8 @@ var fetch = function fetch(fc) {
       }
     });
 
-    fc.options.beforeFetch && invoke(function () {
-      return fc.options.beforeFetch(config, {
+    fc.$handle.options.beforeFetch && invoke(function () {
+      return fc.$handle.options.beforeFetch(config, {
         rule: rule,
         api: api
       });
@@ -5678,6 +5911,7 @@ function FormCreateFactory(config) {
   };
   var loadData = {};
   var CreateNode = CreateNodeFactory();
+  var formulas = {};
   exportAttrs(config.attrs || {});
 
   function getApi(name) {
@@ -5714,11 +5948,11 @@ function FormCreateFactory(config) {
 
   function parser() {
     var data = nameProp.apply(void 0, arguments);
-    if (!data.id || !data.prop) return;
+    if (!data.id || !data.prop) return BaseParser;
     var name = toCase(data.id);
     var parser = data.prop;
     var base = parser.merge === true ? parsers[name] : undefined;
-    parsers[name] = _objectSpread2(_objectSpread2({}, base || BaseParser), parser);
+    parsers[name] = setPrototypeOf(parser, base || BaseParser);
     maker[name] = creatorFactory(name);
     parser.maker && extend(maker, parser.maker);
   }
@@ -5738,8 +5972,13 @@ function FormCreateFactory(config) {
     }
 
     if (!name || !component) return;
+    var nameAlias = toCase(name);
     components[name] = component;
-    components[toCase(name)] = component;
+    components[nameAlias] = component;
+    delete CreateNode.aliasMap[name];
+    delete CreateNode.aliasMap[nameAlias];
+    delete parsers[name];
+    delete parsers[nameAlias];
     if (component.formCreateParser) parser(name, component.formCreateParser);
   }
 
@@ -5799,6 +6038,7 @@ function FormCreateFactory(config) {
         providers: providers,
         useApps: useApps,
         maker: maker,
+        formulas: formulas,
         loadData: loadData
       };
     } else {
@@ -5812,6 +6052,10 @@ function FormCreateFactory(config) {
     modelFields[name] = field;
   }
 
+  function setFormula(name, fn) {
+    formulas[name] = fn;
+  }
+
   function _emitData(id) {
     Object.keys(instance).forEach(function (v) {
       var apis = Array.isArray(instance[v]) ? instance[v] : [instance[v]];
@@ -5844,6 +6088,7 @@ function FormCreateFactory(config) {
       parsers: parsers,
       providers: providers,
       modelFields: modelFields,
+      formulas: formulas,
       rules: vm.props.rule,
       name: vm.props.name || uniqueId(),
       inFor: vm.props.inFor,
@@ -5855,7 +6100,7 @@ function FormCreateFactory(config) {
       CreateNode: CreateNode,
       bus: new Mitt(),
       unwatch: null,
-      options: ref(vm.props.option || {}),
+      options: ref({}),
       extendApi: config.extendApi || function (api) {
         return api;
       }
@@ -5889,9 +6134,9 @@ function FormCreateFactory(config) {
 
       if (this.isSub()) {
         this.unwatch = watch(function () {
-          return _this2.vm.parent.option;
+          return _this2.vm.setupState.parent.setupState.fc.options.value;
         }, function () {
-          _this2.initOptions(_this2.options.value);
+          _this2.initOptions();
 
           _this2.$handle.api.refresh();
         }, {
@@ -5899,23 +6144,28 @@ function FormCreateFactory(config) {
         });
       }
 
-      this.initOptions(this.options.value);
+      this.initOptions();
       this.$handle.init();
     },
     isSub: function isSub() {
       return this.vm.setupState.parent && this.vm.props.extendOption;
     },
-    initOptions: function initOptions(options) {
-      this.options.value = _objectSpread2({
+    initOptions: function initOptions() {
+      this.options.value = {};
+
+      var options = _objectSpread2({
         formData: {},
         submitBtn: {},
-        resetBtn: {}
+        resetBtn: {},
+        globalEvent: {},
+        globalData: {}
       }, deepCopy(globalConfig));
 
       if (this.isSub()) {
-        this.options.value = this.mergeOptions(this.options.value, this.vm.setupState.parent.setupState.fapi.config || {}, true);
+        options = this.mergeOptions(options, this.vm.setupState.parent.setupState.fc.options.value || {}, true);
       }
 
+      options = this.mergeOptions(options, this.vm.props.option);
       this.updateOptions(options);
     },
     mergeOptions: function mergeOptions(target, opt, parent) {
@@ -5977,6 +6227,7 @@ function FormCreateFactory(config) {
       component: component,
       directive: directive,
       setModelField: setModelField,
+      setFormula: setFormula,
       register: register,
       $vnode: $vnode,
       parser: parser,
@@ -6043,6 +6294,7 @@ function FormCreateFactory(config) {
     inherit.useApps && extend(useApps, inherit.useApps);
     inherit.maker && extend(maker, inherit.maker);
     inherit.loadData && extend(loadData, inherit.loadData);
+    inherit.formulas && extend(formulas, inherit.formulas);
   }
 
   return create;
@@ -6322,7 +6574,7 @@ var manager = {
     }
   },
   tidyOptions: function tidyOptions(options) {
-    ['submitBtn', 'resetBtn', 'row', 'info', 'wrap', 'col'].forEach(function (name) {
+    ['submitBtn', 'resetBtn', 'row', 'info', 'wrap', 'col', 'title'].forEach(function (name) {
       tidyBool(options, name);
     });
     return options;
@@ -6337,7 +6589,8 @@ var manager = {
     ctx.prop = mergeProps([{
       info: this.options.info || {},
       wrap: this.options.wrap || {},
-      col: this.options.col || {}
+      col: this.options.col || {},
+      title: this.options.title || {}
     }, ctx.prop], {
       info: {
         trigger: 'hover',
@@ -6365,7 +6618,7 @@ var manager = {
           e.preventDefault();
         }
       },
-      "class": [form.className, form["class"], 'form-create'],
+      "class": [form.className, form["class"], 'form-create', this.options.preview ? 'is-preview' : ''],
       style: form.style,
       type: 'form'
     };
@@ -6385,7 +6638,7 @@ var manager = {
   render: function render(children) {
     var _this2 = this;
 
-    if (children.slotLen()) {
+    if (children.slotLen() && !this.options.preview) {
       children.setSlot(undefined, function () {
         return _this2.makeFormBtn();
       });
@@ -6422,7 +6675,7 @@ var manager = {
       }
     }, isTitle ? {
       label: function label() {
-        return _this3.makeInfo(rule, uni);
+        return _this3.makeInfo(rule, uni, ctx);
       }
     } : {}));
     return inline === true || isFalse(_col) || isFalse(col.show) ? item : this.makeCol(rule, uni, [item]);
@@ -6432,7 +6685,7 @@ var manager = {
     var title = rule.title;
     return !(!title.title && !title["native"] || isFalse(title.show));
   },
-  makeInfo: function makeInfo(rule, uni) {
+  makeInfo: function makeInfo(rule, uni, ctx) {
     var _this4 = this;
 
     var titleProp = _objectSpread2({}, rule.title);
@@ -6441,7 +6694,12 @@ var manager = {
 
     var isTip = isTooltip(infoProp);
     var form = this.options.form;
-    var children = [(titleProp.title || '') + (form.labelSuffix || form['label-suffix'] || '')];
+    var titleSlot = this.getSlot('title');
+    var children = [titleSlot ? titleSlot({
+      title: titleProp.title || '',
+      rule: ctx.rule,
+      options: this.options
+    }) : (titleProp.title || '') + (form.labelSuffix || form['label-suffix'] || '')];
 
     if (!isFalse(infoProp.show) && (infoProp.info || infoProp["native"]) && !isFalse(infoProp.icon)) {
       var prop = {
@@ -6667,7 +6925,7 @@ function useFrame(maker) {
   return maker;
 }
 
-var css_248z = ".form-create .form-create .el-form-item{margin-bottom:22px}.form-create{width:100%}";
+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}";
 styleInject(css_248z);
 
 function tidyBtnProp(btn, def) {
@@ -6920,7 +7178,7 @@ function install(FormCreate) {
 function elmFormCreate() {
   return FormCreateFactory({
     ui: 'element-ui',
-    version: '3.1.27',
+    version: '3.1.29',
     manager: manager,
     extendApi: extendApi,
     install: install,