@form-create/element-ui 3.2.20 → 3.2.21

package/dist/form-create.esm.js

@@ -1,10 +1,10 @@
 /*!
- * @form-create/element-ui v3.2.20
+ * @form-create/element-ui v3.2.21
  * (c) 2018-2025 xaboy
  * Github https://github.com/xaboy/form-create
  * Released under the MIT License.
  */
-import { defineComponent, toRef, ref, watch, computed, createVNode, resolveComponent, mergeProps as mergeProps$1, openBlock, createElementBlock, createElementVNode, nextTick, markRaw, reactive, getCurrentInstance, provide, inject, toRefs, onBeforeMount, watchEffect, onMounted, onBeforeUnmount, onUpdated, isVNode, withDirectives, resolveDirective, createApp, h } from 'vue';
+import { defineComponent, toRef, ref, watch, computed, createVNode, resolveComponent, mergeProps as mergeProps$1, openBlock, createElementBlock, createElementVNode, nextTick, markRaw, reactive, isVNode, getCurrentInstance, provide, inject, toRefs, onBeforeMount, watchEffect, onMounted, onBeforeUnmount, onUpdated, withDirectives, resolveDirective, createApp, h } from 'vue';
 
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
@@ -2161,424 +2161,122 @@ function upper(str) {
   return str.replace(str[0], str[0].toLocaleUpperCase());
 }
 
-var _getGroupInject = function getGroupInject(vm, parent) {
-  if (!vm || vm === parent) {
-    return;
-  }
-
-  if (vm.props.formCreateInject) {
-    return vm.props.formCreateInject;
-  }
-
-  if (vm.parent) {
-    return _getGroupInject(vm.parent, parent);
-  }
-};
+var normalMerge = ['props'];
+var toArrayMerge = ['class', 'style', 'directives'];
+var functionalMerge = ['on', 'hook'];
 
-function $FormCreate(FormCreate, components, directives) {
-  return defineComponent({
-    name: 'FormCreate' + (FormCreate.isMobile ? 'Mobile' : ''),
-    components: components,
-    directives: directives,
-    props: {
-      rule: {
-        type: Array,
-        required: true,
-        "default": function _default() {
-          return [];
-        }
-      },
-      option: {
-        type: Object,
-        "default": function _default() {
-          return {};
-        }
-      },
-      extendOption: Boolean,
-      driver: [String, Object],
-      modelValue: Object,
-      disabled: {
-        type: Boolean,
-        "default": undefined
-      },
-      preview: {
-        type: Boolean,
-        "default": undefined
-      },
-      index: [String, Number],
-      api: Object,
-      locale: [String, Object],
-      name: String,
-      subForm: {
-        type: Boolean,
-        "default": true
-      },
-      inFor: Boolean
-    },
-    emits: ['update:api', 'update:modelValue', 'mounted', 'submit', 'reset', 'change', 'emit-event', 'control', 'remove-rule', 'remove-field', 'sync', 'reload', 'repeat-field', 'update', 'validate-field-fail', 'validate-fail', 'created'],
-    render: function render() {
-      return this.fc.render();
-    },
-    setup: function setup(props) {
-      var vm = getCurrentInstance();
-      provide('parentFC', vm);
-      var parent = inject('parentFC', null);
-      var top = parent;
+var mergeProps = function mergeProps(objects) {
+  var initial = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var opt = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
 
-      if (parent) {
-        while (top.setupState.parent) {
-          top = top.setupState.parent;
-        }
-      } else {
-        top = vm;
-      }
+  var _normalMerge = [].concat(normalMerge, _toConsumableArray(opt['normal'] || []));
 
-      var _toRefs = toRefs(props),
-          rule = _toRefs.rule,
-          modelValue = _toRefs.modelValue,
-          subForm = _toRefs.subForm,
-          inFor = _toRefs.inFor;
+  var _toArrayMerge = [].concat(toArrayMerge, _toConsumableArray(opt['array'] || []));
 
-      var data = reactive({
-        ctxInject: {},
-        destroyed: false,
-        isShow: true,
-        unique: 1,
-        renderRule: _toConsumableArray(rule.value || []),
-        updateValue: JSON.stringify(modelValue.value || {})
-      });
-      var fc = new FormCreate(vm);
-      var fapi = fc.api();
-      var isMore = inFor.value;
+  var _functionalMerge = [].concat(functionalMerge, _toConsumableArray(opt['functional'] || []));
 
-      var addSubForm = function addSubForm() {
-        if (parent) {
-          var _inject = _getGroupInject(vm, parent);
+  var propsMerge = opt['props'] || [];
+  return objects.reduce(function (a, b) {
+    for (var key in b) {
+      if (a[key]) {
+        if (propsMerge.indexOf(key) > -1) {
+          a[key] = mergeProps([b[key]], a[key]);
+        } else if (_normalMerge.indexOf(key) > -1) {
+          a[key] = _objectSpread2(_objectSpread2({}, a[key]), b[key]);
+        } else if (_toArrayMerge.indexOf(key) > -1) {
+          var arrA = a[key] instanceof Array ? a[key] : [a[key]];
+          var arrB = b[key] instanceof Array ? b[key] : [b[key]];
+          a[key] = [].concat(_toConsumableArray(arrA), _toConsumableArray(arrB));
+        } else if (_functionalMerge.indexOf(key) > -1) {
+          for (var event in b[key]) {
+            if (a[key][event]) {
+              var _arrA = a[key][event] instanceof Array ? a[key][event] : [a[key][event]];
 
-          if (_inject) {
-            var sub;
+              var _arrB = b[key][event] instanceof Array ? b[key][event] : [b[key][event]];
 
-            if (isMore) {
-              sub = toArray(_inject.getSubForm());
-              sub.push(fapi);
+              a[key][event] = [].concat(_toConsumableArray(_arrA), _toConsumableArray(_arrB));
             } else {
-              sub = fapi;
+              a[key][event] = b[key][event];
             }
-
-            _inject.subForm(sub);
           }
-        }
-      };
-
-      var rmSubForm = function rmSubForm() {
-        var inject = _getGroupInject(vm, parent);
-
-        if (inject) {
-          if (isMore) {
-            var sub = toArray(inject.getSubForm());
-            var idx = sub.indexOf(fapi);
-
-            if (idx > -1) {
-              sub.splice(idx, 1);
+        } else if (key === 'hook') {
+          for (var hook in b[key]) {
+            if (a[key][hook]) {
+              a[key][hook] = mergeFn(a[key][hook], b[key][hook]);
+            } else {
+              a[key][hook] = b[key][hook];
             }
-          } else {
-            inject.subForm();
           }
+        } else {
+          a[key] = b[key];
         }
-      };
+      } else {
+        if (_normalMerge.indexOf(key) > -1 || _functionalMerge.indexOf(key) > -1 || propsMerge.indexOf(key) > -1) {
+          a[key] = _objectSpread2({}, b[key]);
+        } else if (_toArrayMerge.indexOf(key) > -1) {
+          a[key] = b[key] instanceof Array ? _toConsumableArray(b[key]) : _typeof(b[key]) === 'object' ? _objectSpread2({}, b[key]) : b[key];
+        } else a[key] = b[key];
+      }
+    }
 
-      var styleEl = null;
-      onBeforeMount(function () {
-        watchEffect(function () {
-          var content = '';
-          var globalClass = props.option && props.option.globalClass || {};
-          Object.keys(globalClass).forEach(function (k) {
-            var subCss = '';
-            globalClass[k].style && Object.keys(globalClass[k].style).forEach(function (key) {
-              subCss += toLine(key) + ':' + globalClass[k].style[key] + ';';
-            });
+    return a;
+  }, initial);
+};
 
-            if (globalClass[k].content) {
-              subCss += globalClass[k].content + ';';
-            }
+var mergeFn = function mergeFn(fn1, fn2) {
+  return function () {
+    fn1 && fn1.apply(this, arguments);
+    fn2 && fn2.apply(this, arguments);
+  };
+};
 
-            if (subCss) {
-              content += ".".concat(k, "{").concat(subCss, "}");
-            }
-          });
+var keyAttrs = ['type', 'slot', 'ignore', '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', 'deep', 'renderSlots'];
+function attrs() {
+  return [].concat(keyAttrs, _toConsumableArray(normalMerge), _toConsumableArray(toArrayMerge), _toConsumableArray(functionalMerge), arrayAttrs, normalAttrs);
+}
 
-          if (props.option && props.option.style) {
-            content += props.option.style;
-          }
+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);
+}
 
-          if (!styleEl) {
-            styleEl = document.createElement('style');
-            styleEl.type = 'text/css';
-            document.head.appendChild(styleEl);
-          }
+function toCase(str) {
+  var to = str.replace(/(-[a-z])/g, function (v) {
+    return v.replace('-', '').toLocaleUpperCase();
+  });
+  return lower(to);
+}
+function lower(str) {
+  return str.replace(str[0], str[0].toLowerCase());
+}
 
-          styleEl.innerHTML = content || '';
-        });
-      });
-      var emit$topForm = debounce(function () {
-        fc.bus.$emit('$loadData.$topForm');
-      }, 100);
-      var emit$scopeForm = debounce(function () {
-        fc.bus.$emit('$loadData.$scopeForm');
-      }, 100);
-      var emit$form = debounce(function () {
-        fc.bus.$emit('$loadData.$form');
-      }, 100);
+var PREFIX = '[[FORM-CREATE-PREFIX-';
+var SUFFIX = '-FORM-CREATE-SUFFIX]]';
+function toJson(obj, space) {
+  return JSON.stringify(deepExtend(Array.isArray(obj) ? [] : {}, obj, true), function (key, val) {
+    if (val && val._isVue === true) return undefined;
 
-      var emit$change = function emit$change(field) {
-        fc.bus.$emit('change-$form.' + field);
-      };
+    if (typeof val !== 'function') {
+      return val;
+    }
 
-      onMounted(function () {
-        if (parent) {
-          fapi.top.bus.$on('$loadData.$form', emit$topForm);
-          fapi.top.bus.$on('change', emit$change);
-        }
+    if (val.__json) {
+      return val.__json;
+    }
 
-        if (fapi !== fapi.scope) {
-          fapi.scope.bus.$on('$loadData.$scopeForm', emit$scopeForm);
-        }
-
-        fc.mounted();
-      });
-      onBeforeUnmount(function () {
-        if (parent) {
-          fapi.top.bus.$off('$loadData.$form', emit$topForm);
-          fapi.top.bus.$off('change', emit$change);
-        }
-
-        if (fapi !== fapi.scope) {
-          fapi.scope.bus.$off('$loadData.$scopeForm', emit$scopeForm);
-        }
-
-        styleEl && document.head.removeChild(styleEl);
-        rmSubForm();
-        data.destroyed = true;
-        fc.unmount();
-      });
-      onUpdated(function () {
-        fc.updated();
-      });
-      watch(subForm, function (n) {
-        n ? addSubForm() : rmSubForm();
-      }, {
-        immediate: true
-      });
-      watch(function () {
-        return props.option;
-      }, function () {
-        fc.initOptions();
-        fapi.refresh();
-      }, {
-        deep: true
-      });
-      watch(function () {
-        return _toConsumableArray(rule.value);
-      }, function (n) {
-        if (fc.$handle.isBreakWatch() || n.length === data.renderRule.length && n.every(function (v) {
-          return data.renderRule.indexOf(v) > -1;
-        })) return;
-        fc.$handle.updateAppendData();
-        fc.$handle.reloadRule(rule.value);
-        vm.setupState.renderRule();
-      });
-      watch(function () {
-        return [props.disabled, props.preview];
-      }, function () {
-        fapi.refresh();
-      });
-      watch(modelValue, function (n) {
-        if (JSON.stringify(n || {}) === data.updateValue) return;
-
-        if (fapi.config.forceCoverValue) {
-          fapi.coverValue(n || {});
-        } else {
-          fapi.setValue(n || {});
-        }
-      }, {
-        deep: true,
-        flush: 'post'
-      });
-      watch(function () {
-        return props.index;
-      }, function () {
-        fapi.coverValue({});
-        fc.$handle.updateAppendData();
-        nextTick(function () {
-          nextTick(function () {
-            fapi.clearValidateState();
-          });
-        });
-      }, {
-        flush: 'sync'
-      });
-      return _objectSpread2(_objectSpread2({
-        fc: markRaw(fc),
-        parent: parent ? markRaw(parent) : parent,
-        top: markRaw(top),
-        fapi: markRaw(fapi)
-      }, toRefs(data)), {}, {
-        getGroupInject: function getGroupInject() {
-          return _getGroupInject(vm, parent);
-        },
-        refresh: function refresh() {
-          ++data.unique;
-        },
-        renderRule: function renderRule() {
-          data.renderRule = _toConsumableArray(rule.value || []);
-        },
-        updateValue: function updateValue(value) {
-          if (data.destroyed) return;
-          var json = JSON.stringify(value);
-
-          if (data.updateValue === json) {
-            return;
-          }
-
-          data.updateValue = json;
-          vm.emit('update:modelValue', value);
-          nextTick(function () {
-            emit$form();
-
-            if (!parent) {
-              emit$topForm();
-              emit$scopeForm();
-            } else if (!subForm.value) {
-              emit$scopeForm();
-            }
-          });
-        }
-      });
-    },
-    created: function created() {
-      var vm = getCurrentInstance();
-      vm.emit('update:api', vm.setupState.fapi);
-      vm.setupState.fc.init();
-    }
-  });
-}
-
-var normalMerge = ['props'];
-var toArrayMerge = ['class', 'style', 'directives'];
-var functionalMerge = ['on', 'hook'];
-
-var mergeProps = function mergeProps(objects) {
-  var initial = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var opt = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-
-  var _normalMerge = [].concat(normalMerge, _toConsumableArray(opt['normal'] || []));
-
-  var _toArrayMerge = [].concat(toArrayMerge, _toConsumableArray(opt['array'] || []));
-
-  var _functionalMerge = [].concat(functionalMerge, _toConsumableArray(opt['functional'] || []));
-
-  var propsMerge = opt['props'] || [];
-  return objects.reduce(function (a, b) {
-    for (var key in b) {
-      if (a[key]) {
-        if (propsMerge.indexOf(key) > -1) {
-          a[key] = mergeProps([b[key]], a[key]);
-        } else if (_normalMerge.indexOf(key) > -1) {
-          a[key] = _objectSpread2(_objectSpread2({}, a[key]), b[key]);
-        } else if (_toArrayMerge.indexOf(key) > -1) {
-          var arrA = a[key] instanceof Array ? a[key] : [a[key]];
-          var arrB = b[key] instanceof Array ? b[key] : [b[key]];
-          a[key] = [].concat(_toConsumableArray(arrA), _toConsumableArray(arrB));
-        } else if (_functionalMerge.indexOf(key) > -1) {
-          for (var event in b[key]) {
-            if (a[key][event]) {
-              var _arrA = a[key][event] instanceof Array ? a[key][event] : [a[key][event]];
-
-              var _arrB = b[key][event] instanceof Array ? b[key][event] : [b[key][event]];
-
-              a[key][event] = [].concat(_toConsumableArray(_arrA), _toConsumableArray(_arrB));
-            } else {
-              a[key][event] = b[key][event];
-            }
-          }
-        } else if (key === 'hook') {
-          for (var hook in b[key]) {
-            if (a[key][hook]) {
-              a[key][hook] = mergeFn(a[key][hook], b[key][hook]);
-            } else {
-              a[key][hook] = b[key][hook];
-            }
-          }
-        } else {
-          a[key] = b[key];
-        }
-      } else {
-        if (_normalMerge.indexOf(key) > -1 || _functionalMerge.indexOf(key) > -1 || propsMerge.indexOf(key) > -1) {
-          a[key] = _objectSpread2({}, b[key]);
-        } else if (_toArrayMerge.indexOf(key) > -1) {
-          a[key] = b[key] instanceof Array ? _toConsumableArray(b[key]) : _typeof(b[key]) === 'object' ? _objectSpread2({}, b[key]) : b[key];
-        } else a[key] = b[key];
-      }
-    }
-
-    return a;
-  }, initial);
-};
-
-var mergeFn = function mergeFn(fn1, fn2) {
-  return function () {
-    fn1 && fn1.apply(this, arguments);
-    fn2 && fn2.apply(this, arguments);
-  };
-};
-
-var keyAttrs = ['type', 'slot', 'ignore', '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', 'deep', 'renderSlots'];
-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);
-}
-
-function toCase(str) {
-  var to = str.replace(/(-[a-z])/g, function (v) {
-    return v.replace('-', '').toLocaleUpperCase();
-  });
-  return lower(to);
-}
-function lower(str) {
-  return str.replace(str[0], str[0].toLowerCase());
-}
-
-var PREFIX = '[[FORM-CREATE-PREFIX-';
-var SUFFIX = '-FORM-CREATE-SUFFIX]]';
-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);
-}
+    if (val.__origin) val = val.__origin;
+    if (val.__emit) return undefined;
+    return PREFIX + val + SUFFIX;
+  }, space);
+}
 
 function makeFn(fn) {
   return new Function('return ' + fn)();
@@ -2750,170 +2448,468 @@ function makeSlotBag() {
           children.push(fn);
         }
       });
-      return children;
-    },
-    getSlots: function getSlots() {
-      var _this = this;
+      return children;
+    },
+    getSlots: function getSlots() {
+      var _this = this;
+
+      var slots = {};
+      Object.keys(slotBag).forEach(function (k) {
+        slots[k] = function () {
+          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = arguments[_key];
+          }
+
+          return _this.getSlot(k, args);
+        };
+      });
+      return slots;
+    },
+    slotLen: function slotLen(slot) {
+      slot = slotName(slot);
+      return slotBag[slot] ? slotBag[slot].length : 0;
+    },
+    mergeBag: function mergeBag(bag) {
+      var _this2 = this;
+
+      if (!bag) return this;
+      var slots = is.Function(bag.getSlots) ? bag.getSlots() : bag;
+
+      if (Array.isArray(bag) || isVNode(bag)) {
+        this.setSlot(undefined, function () {
+          return bag;
+        });
+      } else {
+        Object.keys(slots).forEach(function (k) {
+          _this2.setSlot(k, slots[k]);
+        });
+      }
+
+      return this;
+    }
+  };
+}
+function toProps(rule) {
+  var prop = _objectSpread2({}, rule.props || {});
+
+  Object.keys(rule.on || {}).forEach(function (k) {
+    if (k.indexOf('-') > 0) {
+      k = toCase(k);
+    }
+
+    var name = "on".concat(upper(k));
+
+    if (Array.isArray(prop[name])) {
+      prop[name] = [].concat(_toConsumableArray(prop[name]), [rule.on[k]]);
+    } else if (prop[name]) {
+      prop[name] = [prop[name], rule.on[k]];
+    } else {
+      prop[name] = rule.on[k];
+    }
+  });
+  prop.key = rule.key;
+  prop.ref = rule.ref;
+  prop["class"] = rule["class"];
+  prop.id = rule.id;
+  prop.style = rule.style;
+  if (prop.slot) delete prop.slot;
+  return prop;
+}
+function setPrototypeOf(o, proto) {
+  Object.setPrototypeOf(o, proto);
+  return o;
+}
+
+var changeType = function changeType(a, b) {
+  if (typeof a === 'string') {
+    return String(b);
+  } else if (typeof a === 'number') {
+    return Number(b);
+  }
+
+  return b;
+};
+
+var condition = {
+  '==': function _(a, b) {
+    return JSON.stringify(a) === JSON.stringify(changeType(a, b));
+  },
+  '!=': function _(a, b) {
+    return !condition['=='](a, b);
+  },
+  '>': function _(a, b) {
+    return a > b;
+  },
+  '>=': function _(a, b) {
+    return a >= b;
+  },
+  '<': function _(a, b) {
+    return a < b;
+  },
+  '<=': function _(a, b) {
+    return a <= b;
+  },
+  on: function on(a, b) {
+    return a && a.indexOf && a.indexOf(changeType(a[0], b)) > -1;
+  },
+  notOn: function notOn(a, b) {
+    return !condition.on(a, b);
+  },
+  "in": function _in(a, b) {
+    return b && b.indexOf && b.indexOf(a) > -1;
+  },
+  notIn: function notIn(a, b) {
+    return !condition["in"](a, b);
+  },
+  between: function between(a, b) {
+    return a > b[0] && a < b[1];
+  },
+  notBetween: function notBetween(a, b) {
+    return a < b[0] || a > b[1];
+  },
+  empty: function empty(a) {
+    return is.empty(a);
+  },
+  notEmpty: function notEmpty(a) {
+    return !is.empty(a);
+  },
+  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 convertFieldToConditions(field) {
+  var parts = field.split('.');
+  var conditions = [];
+  var currentCondition = '';
+  parts.forEach(function (part, index) {
+    if (index === 0) {
+      currentCondition = part;
+    } else {
+      currentCondition += '.' + part;
+    }
+
+    conditions.push(currentCondition);
+  });
+  return conditions.join(' && ');
+}
+
+var _getGroupInject = function getGroupInject(vm, parent) {
+  if (!vm || vm === parent) {
+    return;
+  }
+
+  if (vm.props.formCreateInject) {
+    return vm.props.formCreateInject;
+  }
+
+  if (vm.parent) {
+    return _getGroupInject(vm.parent, parent);
+  }
+};
+
+function $FormCreate(FormCreate, components, directives) {
+  return defineComponent({
+    name: 'FormCreate' + (FormCreate.isMobile ? 'Mobile' : ''),
+    components: components,
+    directives: directives,
+    props: {
+      rule: {
+        type: Array,
+        required: true,
+        "default": function _default() {
+          return [];
+        }
+      },
+      option: {
+        type: Object,
+        "default": function _default() {
+          return {};
+        }
+      },
+      extendOption: Boolean,
+      driver: [String, Object],
+      modelValue: Object,
+      disabled: {
+        type: Boolean,
+        "default": undefined
+      },
+      preview: {
+        type: Boolean,
+        "default": undefined
+      },
+      index: [String, Number],
+      api: Object,
+      locale: [String, Object],
+      name: String,
+      subForm: {
+        type: Boolean,
+        "default": true
+      },
+      inFor: Boolean
+    },
+    emits: ['update:api', 'update:modelValue', 'mounted', 'submit', 'reset', 'change', 'emit-event', 'control', 'remove-rule', 'remove-field', 'sync', 'reload', 'repeat-field', 'update', 'validate-field-fail', 'validate-fail', 'created'],
+    render: function render() {
+      return this.fc.render();
+    },
+    setup: function setup(props) {
+      var vm = getCurrentInstance();
+      provide('parentFC', vm);
+      var parent = inject('parentFC', null);
+      var top = parent;
+
+      if (parent) {
+        while (top.setupState.parent) {
+          top = top.setupState.parent;
+        }
+      } else {
+        top = vm;
+      }
+
+      var _toRefs = toRefs(props),
+          rule = _toRefs.rule,
+          modelValue = _toRefs.modelValue,
+          subForm = _toRefs.subForm,
+          inFor = _toRefs.inFor;
+
+      var data = reactive({
+        ctxInject: {},
+        destroyed: false,
+        isShow: true,
+        unique: 1,
+        renderRule: _toConsumableArray(rule.value || []),
+        updateValue: JSON.stringify(modelValue.value || {})
+      });
+      var fc = new FormCreate(vm);
+      var fapi = fc.api();
+      var isMore = inFor.value;
+
+      var addSubForm = function addSubForm() {
+        if (parent) {
+          var _inject = _getGroupInject(vm, parent);
+
+          if (_inject) {
+            var sub;
+
+            if (isMore) {
+              sub = toArray(_inject.getSubForm());
+              sub.push(fapi);
+            } else {
+              sub = fapi;
+            }
+
+            _inject.subForm(sub);
+          }
+        }
+      };
+
+      var rmSubForm = function rmSubForm() {
+        var inject = _getGroupInject(vm, parent);
+
+        if (inject) {
+          if (isMore) {
+            var sub = toArray(inject.getSubForm());
+            var idx = sub.indexOf(fapi);
+
+            if (idx > -1) {
+              sub.splice(idx, 1);
+            }
+          } else {
+            inject.subForm();
+          }
+        }
+      };
+
+      var styleEl = null;
+      onBeforeMount(function () {
+        watchEffect(function () {
+          var content = '';
+          var globalClass = props.option && props.option.globalClass || {};
+          Object.keys(globalClass).forEach(function (k) {
+            var subCss = '';
+            globalClass[k].style && Object.keys(globalClass[k].style).forEach(function (key) {
+              subCss += toLine(key) + ':' + globalClass[k].style[key] + ';';
+            });
+
+            if (globalClass[k].content) {
+              subCss += globalClass[k].content + ';';
+            }
+
+            if (subCss) {
+              content += ".".concat(k, "{").concat(subCss, "}");
+            }
+          });
+
+          if (props.option && props.option.style) {
+            content += props.option.style;
+          }
+
+          if (!styleEl) {
+            styleEl = document.createElement('style');
+            styleEl.type = 'text/css';
+            document.head.appendChild(styleEl);
+          }
+
+          styleEl.innerHTML = content || '';
+        });
+      });
+      var emit$topForm = debounce(function () {
+        fc.bus.$emit('$loadData.$topForm');
+      }, 100);
+      var emit$scopeForm = debounce(function () {
+        fc.bus.$emit('$loadData.$scopeForm');
+      }, 100);
+      var emit$form = debounce(function () {
+        fc.bus.$emit('$loadData.$form');
+      }, 100);
+
+      var emit$change = function emit$change(field) {
+        fc.bus.$emit('change-$form.' + field);
+      };
+
+      onMounted(function () {
+        if (parent) {
+          fapi.top.bus.$on('$loadData.$form', emit$topForm);
+          fapi.top.bus.$on('change', emit$change);
+        }
+
+        if (fapi !== fapi.scope) {
+          fapi.scope.bus.$on('$loadData.$scopeForm', emit$scopeForm);
+        }
+
+        fc.mounted();
+      });
+      onBeforeUnmount(function () {
+        if (parent) {
+          fapi.top.bus.$off('$loadData.$form', emit$topForm);
+          fapi.top.bus.$off('change', emit$change);
+        }
+
+        if (fapi !== fapi.scope) {
+          fapi.scope.bus.$off('$loadData.$scopeForm', emit$scopeForm);
+        }
+
+        styleEl && document.head.removeChild(styleEl);
+        rmSubForm();
+        data.destroyed = true;
+        fc.unmount();
+      });
+      onUpdated(function () {
+        fc.updated();
+      });
+      addSubForm();
+      watch(function () {
+        return props.option;
+      }, function () {
+        fc.initOptions();
+        fapi.refresh();
+      }, {
+        deep: true
+      });
+      watch(function () {
+        return _toConsumableArray(rule.value);
+      }, function (n) {
+        if (fc.$handle.isBreakWatch() || n.length === data.renderRule.length && n.every(function (v) {
+          return data.renderRule.indexOf(v) > -1;
+        })) return;
+        fc.$handle.updateAppendData();
+        fc.$handle.reloadRule(rule.value);
+        vm.setupState.renderRule();
+      });
+      watch(function () {
+        return [props.disabled, props.preview];
+      }, function () {
+        fapi.refresh();
+      });
+      watch(modelValue, function (n) {
+        if (toJson(n || {}) === data.updateValue) return;
+
+        if (fapi.config.forceCoverValue) {
+          fapi.coverValue(n || {});
+        } else {
+          fapi.setValue(n || {});
+        }
+      }, {
+        deep: true,
+        flush: 'post'
+      });
+      watch(function () {
+        return props.index;
+      }, function () {
+        fapi.coverValue({});
+        fc.$handle.updateAppendData();
+        nextTick(function () {
+          nextTick(function () {
+            fapi.clearValidateState();
+          });
+        });
+      }, {
+        flush: 'sync'
+      });
+      return _objectSpread2(_objectSpread2({
+        fc: markRaw(fc),
+        parent: parent ? markRaw(parent) : parent,
+        top: markRaw(top),
+        fapi: markRaw(fapi)
+      }, toRefs(data)), {}, {
+        getGroupInject: function getGroupInject() {
+          return _getGroupInject(vm, parent);
+        },
+        refresh: function refresh() {
+          ++data.unique;
+        },
+        renderRule: function renderRule() {
+          data.renderRule = _toConsumableArray(rule.value || []);
+        },
+        updateValue: function updateValue(value) {
+          if (data.destroyed) return;
+          var json = toJson(value);
 
-      var slots = {};
-      Object.keys(slotBag).forEach(function (k) {
-        slots[k] = function () {
-          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-            args[_key] = arguments[_key];
+          if (data.updateValue === json) {
+            return;
           }
 
-          return _this.getSlot(k, args);
-        };
+          data.updateValue = json;
+          vm.emit('update:modelValue', value);
+          nextTick(function () {
+            emit$form();
+
+            if (!parent) {
+              emit$topForm();
+              emit$scopeForm();
+            } else if (!subForm.value) {
+              emit$scopeForm();
+            }
+          });
+        }
       });
-      return slots;
-    },
-    slotLen: function slotLen(slot) {
-      slot = slotName(slot);
-      return slotBag[slot] ? slotBag[slot].length : 0;
     },
-    mergeBag: function mergeBag(bag) {
-      var _this2 = this;
-
-      if (!bag) return this;
-      var slots = is.Function(bag.getSlots) ? bag.getSlots() : bag;
-
-      if (Array.isArray(bag) || isVNode(bag)) {
-        this.setSlot(undefined, function () {
-          return bag;
-        });
-      } else {
-        Object.keys(slots).forEach(function (k) {
-          _this2.setSlot(k, slots[k]);
-        });
-      }
-
-      return this;
-    }
-  };
-}
-function toProps(rule) {
-  var prop = _objectSpread2({}, rule.props || {});
-
-  Object.keys(rule.on || {}).forEach(function (k) {
-    if (k.indexOf('-') > 0) {
-      k = toCase(k);
-    }
-
-    var name = "on".concat(upper(k));
-
-    if (Array.isArray(prop[name])) {
-      prop[name] = [].concat(_toConsumableArray(prop[name]), [rule.on[k]]);
-    } else if (prop[name]) {
-      prop[name] = [prop[name], rule.on[k]];
-    } else {
-      prop[name] = rule.on[k];
-    }
-  });
-  prop.key = rule.key;
-  prop.ref = rule.ref;
-  prop["class"] = rule["class"];
-  prop.id = rule.id;
-  prop.style = rule.style;
-  if (prop.slot) delete prop.slot;
-  return prop;
-}
-function setPrototypeOf(o, proto) {
-  Object.setPrototypeOf(o, proto);
-  return o;
-}
-
-var changeType = function changeType(a, b) {
-  if (typeof a === 'string') {
-    return String(b);
-  } else if (typeof a === 'number') {
-    return Number(b);
-  }
-
-  return b;
-};
-
-var condition = {
-  '==': function _(a, b) {
-    return JSON.stringify(a) === JSON.stringify(changeType(a, b));
-  },
-  '!=': function _(a, b) {
-    return !condition['=='](a, b);
-  },
-  '>': function _(a, b) {
-    return a > b;
-  },
-  '>=': function _(a, b) {
-    return a >= b;
-  },
-  '<': function _(a, b) {
-    return a < b;
-  },
-  '<=': function _(a, b) {
-    return a <= b;
-  },
-  on: function on(a, b) {
-    return a && a.indexOf && a.indexOf(changeType(a[0], b)) > -1;
-  },
-  notOn: function notOn(a, b) {
-    return !condition.on(a, b);
-  },
-  "in": function _in(a, b) {
-    return b && b.indexOf && b.indexOf(a) > -1;
-  },
-  notIn: function notIn(a, b) {
-    return !condition["in"](a, b);
-  },
-  between: function between(a, b) {
-    return a > b[0] && a < b[1];
-  },
-  notBetween: function notBetween(a, b) {
-    return a < b[0] || a > b[1];
-  },
-  empty: function empty(a) {
-    return is.empty(a);
-  },
-  notEmpty: function notEmpty(a) {
-    return !is.empty(a);
-  },
-  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 convertFieldToConditions(field) {
-  var parts = field.split('.');
-  var conditions = [];
-  var currentCondition = '';
-  parts.forEach(function (part, index) {
-    if (index === 0) {
-      currentCondition = part;
-    } else {
-      currentCondition += '.' + part;
+    created: function created() {
+      var vm = getCurrentInstance();
+      vm.emit('update:api', vm.setupState.fapi);
+      vm.setupState.fc.init();
     }
-
-    conditions.push(currentCondition);
   });
-  return conditions.join(' && ');
 }
 
 function baseRule() {
@@ -3121,8 +3117,15 @@ function Api(h) {
   }
 
   function props(fields, key, val) {
-    tidyFields(fields).forEach(function (field) {
-      h.getCtxs(field).forEach(function (ctx) {
+    if (is.Undef(fields)) {
+      fields = Object.keys(_objectSpread2(_objectSpread2({}, h.fieldCtx), h.nameCtx));
+    } else if (!Array.isArray(fields)) {
+      fields = [fields];
+    }
+
+    fields.forEach(function (field) {
+      var ctxs = h.fieldCtx[field] || h.nameCtx[field];
+      ctxs && ctxs.forEach(function (ctx) {
         $set(ctx.rule, key, val);
         h.$render.clearCache(ctx);
       });
@@ -3140,6 +3143,14 @@ function Api(h) {
   }
 
   var api = {
+    get isScope() {
+      return h.vm.props.subForm === false;
+    },
+
+    get isPreview() {
+      return h.preview;
+    },
+
     get config() {
       return h.options;
     },
@@ -5651,7 +5662,7 @@ function useInput(Handler) {
       return JSON.stringify(this.getFormData(ctx), strFn) !== JSON.stringify(value, strFn);
     },
     isQuote: function isQuote(ctx, value) {
-      return (is.Object(value) || Array.isArray(value)) && value === ctx.rule.value;
+      return (value instanceof Function || is.Object(value) || Array.isArray(value)) && value === ctx.rule.value;
     },
     refreshUpdate: function refreshUpdate(ctx, val, origin, field) {
       var _this5 = this;
@@ -6067,7 +6078,7 @@ function useContext(Handler) {
               field = JSON.stringify(_this2.fc.getLoadData(one.variable) || '');
             } else if (one.field) {
               field = convertFieldToConditions(one.field || '');
-            } else {
+            } else if (!one.mode) {
               return {
                 v: true
               };
@@ -6138,6 +6149,8 @@ function useContext(Handler) {
       return invoke(fn, undefined);
     },
     computeValue: function computeValue(str, ctx, group) {
+      var _this3 = this;
+
       var that = this;
       var formulas = Object.keys(this.fc.formulas).reduce(function (obj, k) {
         obj[k] = function () {
@@ -6157,34 +6170,36 @@ function useContext(Handler) {
 
         return obj;
       }, {});
-      return new Function('$formulas', '$form', '$scope', '$group', '$rule', '$api', "with($form){with($scope){with(this){with($group){with($formulas){ return ".concat(str, " }}}}}")).call(this.api.form, formulas, this.api.top.form, this.api.top === this.api.scope ? {} : this.api.scope.form, group ? this.subRuleData[group.id] || {} : {}, ctx.rule, this.api);
+      return invoke(function () {
+        return new Function('$formulas', '$form', '$scope', '$group', '$rule', '$api', "with($form){with($scope){with(this){with($group){with($formulas){ return ".concat(str, " }}}}}")).call(_this3.api.form, formulas, _this3.api.top.form, _this3.api.top === _this3.api.scope ? {} : _this3.api.scope.form, group ? _this3.subRuleData[group.id] || {} : {}, ctx.rule, _this3.api);
+      }, undefined);
     },
     updateChildren: function updateChildren(ctx, n, o) {
-      var _this3 = this;
+      var _this4 = this;
 
       this.deferSyncValue(function () {
         o && o.forEach(function (child) {
           if ((n || []).indexOf(child) === -1 && child && !is.String(child) && child.__fc__ && child.__fc__.parent === ctx) {
-            _this3.rmCtx(child.__fc__);
+            _this4.rmCtx(child.__fc__);
           }
         });
 
         if (is.trueArray(n)) {
-          _this3.loadChildren(n, ctx);
+          _this4.loadChildren(n, ctx);
 
-          _this3.bus.$emit('update', _this3.api);
+          _this4.bus.$emit('update', _this4.api);
         }
       });
     },
     rmSub: function rmSub(sub) {
-      var _this4 = this;
+      var _this5 = this;
 
       is.trueArray(sub) && sub.forEach(function (r) {
-        r && r.__fc__ && _this4.rmCtx(r.__fc__);
+        r && r.__fc__ && _this5.rmCtx(r.__fc__);
       });
     },
     rmCtx: function rmCtx(ctx) {
-      var _this5 = this;
+      var _this6 = this;
 
       if (ctx.deleted) return;
       var id = ctx.id,
@@ -6213,19 +6228,19 @@ function useContext(Handler) {
       }
 
       this.deferSyncValue(function () {
-        if (!_this5.reloading) {
+        if (!_this6.reloading) {
           if (ctx.parser.loadChildren !== false) {
             var children = ctx.getPending('children', ctx.rule.children);
 
             if (is.trueArray(children)) {
               children.forEach(function (h) {
-                return h.__fc__ && _this5.rmCtx(h.__fc__);
+                return h.__fc__ && _this6.rmCtx(h.__fc__);
               });
             }
           }
 
-          if (ctx.root === _this5.rules) {
-            _this5.vm.setupState.renderRule();
+          if (ctx.root === _this6.rules) {
+            _this6.vm.setupState.renderRule();
           }
         }
       }, input);
@@ -6487,7 +6502,13 @@ function Handler(fc) {
       return fc.bus;
     },
     preview: function preview() {
-      return fc.vm.props.preview != null ? fc.vm.props.preview : fc.options.value.preview || false;
+      if (fc.vm.props.preview != null) {
+        return fc.vm.props.preview;
+      } else if (fc.vm.setupState.parent && fc.vm.setupState.parent.props.preview != null) {
+        return fc.vm.setupState.parent.props.preview;
+      }
+
+      return fc.options.value.preview || false;
     }
   });
   extend(this, {
@@ -6592,7 +6613,7 @@ extend(Handler.prototype, {
       }
     }).then(function () {
       return _this3.globalBeforeFetch(opt);
-    });
+    })["catch"](function () {});
   }
 });
 useInject(Handler);
@@ -6794,57 +6815,61 @@ var loadData = function loadData(fc) {
   var loadData = {
     name: 'loadData',
     _fn: [],
-    mounted: function mounted(inject, rule, api) {
-      this.deleted(inject);
-      var attrs = toArray(inject.getValue());
-      var unwatchs = [];
-      attrs.forEach(function (attr) {
-        if (attr && (attr.attr || attr.template)) {
-          var fn = function fn(get) {
-            var value;
+    loaded: function loaded(inject, rule, api) {
+      var _this = this;
 
-            if (attr.template) {
-              value = fc.$handle.loadStrVar(attr.template, get);
-            } else if (attr.handler && is.Function(attr.handler)) {
-              value = attr.handler(get, rule, api);
-            } else {
-              value = get(attr.attr, attr["default"]);
-            }
+      this.deleted(inject);
+      nextTick(function () {
+        var attrs = toArray(inject.getValue());
+        var unwatchs = [];
+        attrs.forEach(function (attr) {
+          if (attr && (attr.attr || attr.template)) {
+            var fn = function fn(get) {
+              var value;
+
+              if (attr.template) {
+                value = fc.$handle.loadStrVar(attr.template, get);
+              } else if (attr.handler && is.Function(attr.handler)) {
+                value = attr.handler(get, rule, api);
+              } else {
+                value = get(attr.attr, attr["default"]);
+              }
 
-            if (attr.copy !== false) {
-              value = deepCopy(value);
-            }
+              if (attr.copy !== false) {
+                value = deepCopy(value);
+              }
 
-            var _rule = attr.modify ? rule : inject.getProp();
+              var _rule = attr.modify ? rule : inject.getProp();
 
-            if (attr.to === 'child') {
-              if (_rule.children) {
-                _rule.children[0] = value;
+              if (attr.to === 'child') {
+                if (_rule.children) {
+                  _rule.children[0] = value;
+                } else {
+                  _rule.children = [value];
+                }
               } else {
-                _rule.children = [value];
+                deepSet(_rule, attr.to || 'options', value);
               }
-            } else {
-              deepSet(_rule, attr.to || 'options', value);
-            }
 
-            api.sync(rule);
-          };
+              api.sync(rule);
+            };
 
-          var callback = function callback(get) {
-            return fn(get);
-          };
+            var callback = function callback(get) {
+              return fn(get);
+            };
 
-          var unwatch = fc.watchLoadData(callback);
-          fn = debounce(fn, attr.wait || 300);
+            var unwatch = fc.watchLoadData(callback);
+            fn = debounce(fn, attr.wait || 300);
 
-          if (attr.watch !== false) {
-            unwatchs.push(unwatch);
-          } else {
-            unwatch();
+            if (attr.watch !== false) {
+              unwatchs.push(unwatch);
+            } else {
+              unwatch();
+            }
           }
-        }
+        });
+        _this._fn[inject.id] = unwatchs;
       });
-      this._fn[inject.id] = unwatchs;
     },
     deleted: function deleted(inject) {
       if (this._fn[inject.id]) {
@@ -6858,7 +6883,7 @@ var loadData = function loadData(fc) {
       inject.clearProp();
     }
   };
-  loadData.watch = loadData.mounted;
+  loadData.watch = loadData.loaded;
   return loadData;
 };
 
@@ -7071,7 +7096,6 @@ var fetch = function fetch(fc) {
           }
 
           set(fn(body, rule, api));
-          api.sync(rule);
         },
         onError: function onError(e) {
           set(undefined);
@@ -7788,7 +7812,7 @@ function FormCreateFactory(config) {
             }
           });
           this.unwatch.push(unwatch);
-          return val;
+          return deepGet(val, split);
         }
       }
     },
@@ -8783,7 +8807,9 @@ function extendApi(api, h) {
       return new Promise(function (resolve, reject) {
         var forms = api.children;
         var all = [h.$manager.validate()];
-        forms.forEach(function (v) {
+        forms.filter(function (v) {
+          return !v.isScope;
+        }).forEach(function (v) {
           all.push(v.validate());
         });
         Promise.all(all).then(function () {
@@ -8804,7 +8830,9 @@ function extendApi(api, h) {
         if (!ctx) return;
         var sub = h.subForm[ctx.id];
         var all = [h.$manager.validateField(ctx.id)];
-        toArray(sub).forEach(function (v) {
+        toArray(sub).filter(function (v) {
+          return !v.isScope;
+        }).forEach(function (v) {
           all.push(v.validate());
         });
         Promise.all(all).then(function () {
@@ -8907,7 +8935,8 @@ function extendApi(api, h) {
     },
     submit: function submit(successFn, failFn) {
       return new Promise(function (resolve, reject) {
-        api.validate().then(function () {
+        var promise = h.options.validateOnSubmit === false ? Promise.resolve() : api.validate();
+        promise.then(function () {
           var formData = api.formData();
           is.Function(successFn) && invoke(function () {
             return successFn(formData, api);
@@ -9023,7 +9052,7 @@ function install(FormCreate) {
 function elmFormCreate() {
   return FormCreateFactory({
     ui: 'element-ui',
-    version: '3.2.20',
+    version: '3.2.21',
     manager: manager,
     extendApi: extendApi,
     install: install,