@form-create/element-ui 3.1.3 → 3.1.6

package/dist/form-create.esm.js

@@ -1,10 +1,10 @@
 /*!
- * @form-create/element-ui v3.1.3
+ * @form-create/element-ui v3.1.6
  * (c) 2018-2022 xaboy
  * Github https://github.com/xaboy/form-create
  * Released under the MIT License.
  */
-import { defineComponent, toRef, resolveComponent, createVNode, mergeProps as mergeProps$1, openBlock, createElementBlock, createElementVNode, isVNode, nextTick, Fragment, markRaw, reactive, getCurrentInstance, provide, inject, toRefs, onMounted, onBeforeUnmount, onUpdated, watch, computed, customRef, withDirectives, resolveDirective, createApp, h, ref } from 'vue';
+import { defineComponent, toRef, resolveComponent, createVNode, mergeProps as mergeProps$1, openBlock, createElementBlock, createElementVNode, isVNode, nextTick, Fragment, markRaw, reactive, getCurrentInstance, provide, inject, toRefs, onMounted, onBeforeUnmount, onUpdated, watch, computed, withDirectives, resolveDirective, createApp, h, ref } from 'vue';
 
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
@@ -1495,6 +1495,26 @@ var Group = defineComponent({
   },
   emits: ['update:modelValue', 'change', 'itemMounted', 'remove'],
   watch: {
+    rule: {
+      handler: function handler(n, o) {
+        var _this = this;
+
+        Object.keys(this.cacheRule).forEach(function (v) {
+          var item = _this.cacheRule[v];
+
+          if (n === o) {
+            deepExtend(item.rule, n);
+          } else {
+            var val = item.$f.formData();
+            item.$f.once('reloading', function () {
+              item.$f.setValue(val);
+            });
+            item.rule = deepCopy(n);
+          }
+        });
+      },
+      deep: true
+    },
     disabled: function disabled(n) {
       if (this.syncDisabled) {
         var lst = this.cacheRule;
@@ -1512,7 +1532,7 @@ var Group = defineComponent({
     },
     modelValue: {
       handler: function handler(n) {
-        var _this = this;
+        var _this2 = this;
 
         n = n || [];
         var keys = Object.keys(this.cacheRule),
@@ -1532,17 +1552,14 @@ var Group = defineComponent({
             for (var _i2 = 0; _i2 < len; _i2++) {
               this.removeRule(keys[total - _i2 - 1]);
             }
-
-            this.subForm();
           }
 
           n.forEach(function (val, i) {
-            _this.setValue(keys[i], n[i]);
+            _this2.setValue(keys[i], n[i]);
           });
         }
       },
-      deep: true,
-      flush: 'post'
+      deep: true
     }
   },
   methods: {
@@ -1557,7 +1574,7 @@ var Group = defineComponent({
       this.$emit('change', value);
     },
     formData: function formData(key, _formData) {
-      var _this2 = this;
+      var _this3 = this;
 
       var cacheRule = this.cacheRule;
       var keys = Object.keys(cacheRule);
@@ -1569,10 +1586,10 @@ var Group = defineComponent({
       }
 
       var value = keys.map(function (k) {
-        var data = key === k ? _formData : _objectSpread2({}, _this2.cacheRule[k].$f.form);
-        var value = _this2.field ? data[_this2.field] || null : data;
+        var data = key === k ? _formData : _objectSpread2({}, _this3.cacheRule[k].$f.form);
+        var value = _this3.field ? data[_this3.field] || null : data;
 
-        _this2.cache(k, value);
+        _this3.cache(k, value);
 
         return value;
       });
@@ -1592,7 +1609,7 @@ var Group = defineComponent({
       this.cache(key, value);
     },
     addRule: function addRule(i, emit) {
-      var _this3 = this;
+      var _this4 = this;
 
       var rule = this.formCreateInject.form.copyRules(this.rule || []);
       var options = this.options ? _objectSpread2({}, this.options) : {
@@ -1613,31 +1630,23 @@ var Group = defineComponent({
 
       if (emit) {
         nextTick(function () {
-          return _this3.$emit('add', rule, Object.keys(_this3.cacheRule).length - 1);
+          return _this4.$emit('add', rule, Object.keys(_this4.cacheRule).length - 1);
         });
       }
     },
     add$f: function add$f(i, key, $f) {
-      var _this4 = this;
+      var _this5 = this;
 
       this.cacheRule[key].$f = $f;
-      this.subForm();
       this.formData(key, $f.formData());
       nextTick(function () {
-        if (_this4.syncDisabled) {
-          $f.disabled(_this4.disabled);
+        if (_this5.syncDisabled) {
+          $f.disabled(_this5.disabled);
         }
 
-        _this4.$emit('itemMounted', $f, Object.keys(_this4.cacheRule).indexOf(key));
+        _this5.$emit('itemMounted', $f, Object.keys(_this5.cacheRule).indexOf(key));
       });
     },
-    subForm: function subForm() {
-      var _this5 = this;
-
-      this.formCreateInject.subForm(Object.keys(this.cacheRule).map(function (k) {
-        return _this5.cacheRule[k].$f;
-      }));
-    },
     removeRule: function removeRule(key, emit) {
       var _this6 = this;
 
@@ -1665,7 +1674,6 @@ var Group = defineComponent({
       }
 
       this.removeRule(key, true);
-      this.subForm();
       this.modelValue.splice(index, 1);
       this.input(this.modelValue);
     },
@@ -1780,6 +1788,7 @@ var Group = defineComponent({
                 "default": function _default() {
                   return [createVNode(Type, {
                     "key": key,
+                    "inFor": true,
                     "onUpdate:modelValue": function onUpdateModelValue(formData) {
                       return _this9.formData(key, formData);
                     },
@@ -1882,7 +1891,6 @@ var Sub = defineComponent({
       var _this = this;
 
       this.subApi = api;
-      this.formCreateInject.subForm(api);
       nextTick(function () {
         _this.syncDisabled && api.disabled(_this.disabled);
 
@@ -1929,6 +1937,21 @@ script.render = render;
 var components = [Checkbox, Frame, Radio, Select, Tree, Upload, Group, Sub, script];
 
 var NAME$1 = 'FormCreate';
+
+var getRuleInject = function getRuleInject(vm, parent) {
+  if (!vm || vm === parent) {
+    return;
+  }
+
+  if (vm.ctx.formCreateInject) {
+    return vm.ctx.formCreateInject;
+  }
+
+  if (vm.parent) {
+    return getRuleInject(vm.parent, parent);
+  }
+};
+
 function $FormCreate(FormCreate) {
   return defineComponent({
     name: NAME$1,
@@ -1949,7 +1972,12 @@ function $FormCreate(FormCreate) {
       extendOption: Boolean,
       modelValue: Object,
       api: Object,
-      name: String
+      name: String,
+      subForm: {
+        type: Boolean,
+        "default": true
+      },
+      inFor: Boolean
     },
     emits: ['update:api', 'update:modelValue', 'mounted', 'submit', 'change', 'emit-event', 'control', 'remove-rule', 'remove-field', 'sync', 'reload', 'repeat-field', 'update'],
     render: function render() {
@@ -1962,7 +1990,9 @@ function $FormCreate(FormCreate) {
 
       var _toRefs = toRefs(props),
           rule = _toRefs.rule,
-          modelValue = _toRefs.modelValue;
+          modelValue = _toRefs.modelValue,
+          subForm = _toRefs.subForm,
+          inFor = _toRefs.inFor;
 
       var data = reactive({
         ctxInject: {},
@@ -1970,20 +2000,64 @@ function $FormCreate(FormCreate) {
         isShow: true,
         unique: 1,
         renderRule: _toConsumableArray(rule.value || []),
-        updateValue: JSON.stringify(modelValue)
+        updateValue: JSON.stringify(modelValue || {})
       });
       var fc = new FormCreate(vm);
       var fapi = fc.api();
+      var isMore = inFor.value;
+
+      var addSubForm = function addSubForm() {
+        if (parent) {
+          var _inject = getRuleInject(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 = getRuleInject(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();
+          }
+        }
+      };
+
       onMounted(function () {
         fc.mounted();
       });
       onBeforeUnmount(function () {
+        rmSubForm();
         data.destroyed = true;
         fc.unmount();
       });
       onUpdated(function () {
         fc.updated();
       });
+      watch(subForm, function (n) {
+        n ? addSubForm() : rmSubForm();
+      }, {
+        immediate: true
+      });
       watch(function () {
         return _toConsumableArray(rule.value);
       }, function (n) {
@@ -1998,8 +2072,8 @@ function $FormCreate(FormCreate) {
         fapi.refresh();
       });
       watch(modelValue, function (n) {
-        if (JSON.stringify(n) === data.updateValue) return;
-        fapi.setValue(n);
+        if (JSON.stringify(n || {}) === data.updateValue) return;
+        fapi.setValue(n || {});
       }, {
         deep: true
       });
@@ -2098,7 +2172,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'];
+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 arrayAttrs = ['validate', 'children', 'control'];
 var normalAttrs = ['effect'];
 function attrs() {
@@ -2486,7 +2560,7 @@ function Api(h) {
         if (!ctx) return initial;
         initial[ctx.field] = copy(ctx.rule.value);
         return initial;
-      }, copy(h.appendData));
+      }, {});
     },
     getValue: function getValue(field) {
       var ctx = h.getFieldCtx(field);
@@ -2716,6 +2790,25 @@ function Api(h) {
         return origin ? ctx.origin : ctx.rule;
       }
     },
+    setEffect: function setEffect(id, attr, value) {
+      var ctx = h.getCtx(id);
+
+      if (ctx && attr) {
+        if (attr[0] === '$') {
+          attr = attr.substr(1);
+        }
+
+        if (hasProperty(ctx.rule, '$' + attr)) {
+          $set(ctx.rule, '$' + attr, value);
+        }
+
+        if (!hasProperty(ctx.rule, 'effect')) {
+          ctx.rule.effect = {};
+        }
+
+        $set(ctx.rule.effect, attr, value);
+      }
+    },
     updateValidate: function updateValidate(id, validate, merge) {
       if (merge) {
         api.mergeRule(id, {
@@ -2998,7 +3091,6 @@ function useRender$1(Render) {
       try {
         if (ctx.type === 'hidden') return;
         var rule = ctx.rule;
-        var preview = this.options.preview || false;
 
         if (!this.cache[ctx.id] || this.cache[ctx.id].slot !== rule.slot) {
           var vn;
@@ -3010,7 +3102,10 @@ function useRender$1(Render) {
           this.setOptions(ctx);
           this.ctxProp(ctx);
           var prop = ctx.prop;
+          prop.preview = !!(hasProperty(prop, 'preview') ? prop.preview : this.options.preview || false);
           prop.props.formCreateInject = this.injectProp(ctx);
+          var cacheFlag = prop.cache !== false;
+          var preview = prop.preview;
 
           if (prop.hidden) {
             this.setCache(ctx, undefined, parent);
@@ -3068,18 +3163,18 @@ function useRender$1(Render) {
               _vn = _this4.display(_vn);
             }
 
-            _this4.setCache(ctx, function () {
+            cacheFlag && _this4.setCache(ctx, function () {
               return _vn;
             }, parent);
-
             return _vn;
           };
 
           this.setCache(ctx, vn, parent);
-          return vn;
         }
 
-        return this.getCache(ctx);
+        return function () {
+          return _this4.getCache(ctx).apply(void 0, arguments);
+        };
       } catch (e) {
         console.error(e);
         return;
@@ -3132,17 +3227,21 @@ function useRender$1(Render) {
           subForm: function subForm(_subForm) {
             _this6.$handle.addSubForm(ctx, _subForm);
           },
+          getSubForm: function getSubForm() {
+            return _this6.$handle.subForm[ctx.id];
+          },
           options: [],
           children: [],
           preview: false,
           field: ctx.field,
-          rule: ctx.rule
+          rule: ctx.rule,
+          input: ctx.input
         };
       }
 
       var inject = state.ctxInject[ctx.id];
       extend(inject, {
-        preview: this.options.preview || false,
+        preview: ctx.prop.preview,
         options: ctx.prop.options,
         children: ctx.loadChildrenPending()
       });
@@ -3220,6 +3319,7 @@ function useRender$1(Render) {
     },
     defaultRender: function defaultRender(ctx, children) {
       var prop = ctx.prop;
+      if (prop.component) return this.vNode.makeComponent(prop.component, prop, children);
       if (this.vNode[ctx.type]) return this.vNode[ctx.type](prop, children);
       if (this.vNode[ctx.originType]) return this.vNode[ctx.originType](prop, children);
       return this.vNode.make(lower(ctx.originType), prop, children);
@@ -3694,11 +3794,7 @@ extend(RuleContext.prototype, {
     this.$handle.appendLink(this);
   },
   watchTo: function watchTo() {
-    var _this4 = this;
-
-    nextTick(function () {
-      _this4.$handle && _this4.$handle.watchCtx(_this4);
-    });
+    this.$handle.watchCtx(this);
   },
   "delete": function _delete() {
     var undef = void 0;
@@ -3727,15 +3823,15 @@ extend(RuleContext.prototype, {
     this.ctrlRule = [];
   },
   rm: function rm() {
-    var _this5 = this;
+    var _this4 = this;
 
     var _rm = function _rm() {
-      var index = _this5.root.indexOf(_this5.origin);
+      var index = _this4.root.indexOf(_this4.origin);
 
       if (index > -1) {
-        _this5.root.splice(index, 1);
+        _this4.root.splice(index, 1);
 
-        _this5.$handle && _this5.$handle.refresh();
+        _this4.$handle && _this4.$handle.refresh();
       }
     };
 
@@ -3746,17 +3842,17 @@ extend(RuleContext.prototype, {
     }
 
     this.$handle.noWatch(function () {
-      _this5.$handle.deferSyncValue(function () {
-        _this5.rmCtrl();
+      _this4.$handle.deferSyncValue(function () {
+        _this4.rmCtrl();
 
         _rm();
 
-        _this5.$handle.rmCtx(_this5);
+        _this4.$handle.rmCtx(_this4);
 
-        extend(_this5, {
+        extend(_this4, {
           root: []
         });
-      }, _this5.input);
+      }, _this4.input);
     });
   },
   update: function update(handle, init) {
@@ -3860,13 +3956,13 @@ function useLoader(Handler) {
           return _this5.loadRule();
         }
 
+        _this5.syncForm();
+
         if (_this5.pageEnd) {
           _this5.bus.$emit('load-end');
         }
 
         _this5.vm.setupState.renderRule();
-
-        _this5.syncForm();
       });
     },
     loadChildren: function loadChildren(children, parent) {
@@ -3881,8 +3977,8 @@ function useLoader(Handler) {
       if (this.cycleLoad) {
         return this.loadRule();
       } else {
-        this.bus.$emit('load-end');
         this.syncForm();
+        this.bus.$emit('load-end');
       }
 
       this.$render.clearCache(parent);
@@ -4126,19 +4222,27 @@ function useLoader(Handler) {
       this.clearNextTick();
       this.initData(rules);
       this.fc.rules = rules;
-      this.bus.$once('load-end', function () {
-        Object.keys(ctxs).filter(function (id) {
-          return _this8.ctxs[id] === undefined;
-        }).forEach(function (id) {
-          return _this8.rmCtx(ctxs[id]);
+      this.deferSyncValue(function () {
+        _this8.bus.$once('load-end', function () {
+          Object.keys(ctxs).filter(function (id) {
+            return _this8.ctxs[id] === undefined;
+          }).forEach(function (id) {
+            return _this8.rmCtx(ctxs[id]);
+          });
+
+          _this8.$render.clearCacheAll();
         });
 
-        _this8.$render.clearCacheAll();
+        _this8.reloading = true;
+
+        _this8.loadRule();
+
+        _this8.reloading = false;
+
+        _this8.refresh();
+
+        _this8.bus.$emit('reloading', _this8.api);
       });
-      this.reloading = true;
-      this.loadRule();
-      this.reloading = false;
-      this.refresh();
       this.bus.$off('next-tick', this.nextReload);
       this.bus.$once('next-tick', this.nextReload);
       this.bus.$emit('update', this.api);
@@ -4204,28 +4308,14 @@ function useInput(Handler) {
     syncForm: function syncForm() {
       var _this = this;
 
+      var data = reactive({});
       this.fields().reduce(function (initial, field) {
         var ctx = _this.getCtx(field);
 
         initial[field] = toRef(ctx.rule, 'value');
         return initial;
-      }, Object.keys(this.appendData).reduce(function (initial, field) {
-        initial[field] = customRef(function (track, trigger) {
-          return {
-            get: function get() {
-              track();
-              return _this.appendData[field];
-            },
-            set: function set(val) {
-              trigger();
-              _this.appendData[field] = val;
-
-              _this.syncValue();
-            }
-          };
-        });
-        return initial;
-      }, this.form));
+      }, data);
+      this.form = data;
       this.syncValue();
     },
     appendValue: function appendValue(rule) {
@@ -4234,9 +4324,7 @@ function useInput(Handler) {
       delete this.appendData[rule.field];
     },
     addSubForm: function addSubForm(ctx, subForm) {
-      if (ctx.input) {
-        this.subForm[ctx.id] = subForm;
-      }
+      this.subForm[ctx.id] = subForm;
     },
     deferSyncValue: function deferSyncValue(fn, sync) {
       if (!this.deferSyncFn) {
@@ -4334,11 +4422,46 @@ var BaseParser = {
     return ctx.$render.defaultRender(ctx, children);
   },
   preview: function preview(children, ctx) {
-    return ctx.$render.defaultRender(ctx, children);
+    return this.render(children, ctx);
   },
   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, {
     getCtx: function getCtx(id) {
@@ -4415,10 +4538,9 @@ function useContext(Handler) {
     watchCtx: function watchCtx(ctx) {
       var _this = this;
 
-      var none = ['field', 'value', 'vm', 'template', 'name', 'config', 'control', 'inject', 'sync', 'payload', 'optionsTo', 'update', 'slotUpdate'];
       var all = attrs();
       all.filter(function (k) {
-        return k[0] !== '_' && k[0] !== '$' && none.indexOf(k) === -1;
+        return k[0] !== '_' && k[0] !== '$' && noneKey.indexOf(k) === -1;
       }).forEach(function (key) {
         var ref = toRef(ctx.rule, key);
         var flag = key === 'children';
@@ -4481,11 +4603,36 @@ function useContext(Handler) {
           return val.value;
         }, function () {
           var formValue = ctx.parser.toFormValue(val.value, ctx);
+          formValue = formValue === null ? undefined : formValue;
 
           if (_this.isChange(ctx, formValue)) {
             _this.setValue(ctx, val.value, formValue, true);
           }
         }));
+        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, _);
+              };
+            }
+
+            return invoke(fn, undefined);
+          }, function (n) {
+            val.value = n;
+          }, {
+            immediate: !!computedRef.value
+          }));
+        });
       }
 
       this.watchEffect(ctx);
@@ -4526,6 +4673,7 @@ function useContext(Handler) {
       $del(this.formData, id);
       $del(this.subForm, id);
       $del(this.vm.setupState.ctxInject, id);
+      input && $del(this.form, field);
       input && this.rmIdCtx(ctx, field, 'field');
       name && this.rmIdCtx(ctx, name, 'name');
       this.deferSyncValue(function () {
@@ -4922,6 +5070,14 @@ function CreateNodeFactory() {
     make: function make(tag, data, children) {
       return makeDirective(data, this.h(tag, toProps(data), children));
     },
+    makeComponent: function makeComponent(type, data, children) {
+      try {
+        return makeDirective(data, createVNode(type, toProps(data), children));
+      } catch (e) {
+        console.error(e);
+        return createVNode('');
+      }
+    },
     h: function h(tag, data, children) {
       var isNativeTag = getCurrentInstance().appContext.config.isNativeTag(tag);
 
@@ -5048,44 +5204,6 @@ var $fetch = {
     }
   }
 };
-var $required = {
-  name: 'required',
-  load: function load(inject, rule) {
-    var val = parseVa(inject.getValue());
-
-    var validate = _objectSpread2(_objectSpread2({}, val), {}, {
-      required: true,
-      validator: function validator(_, v) {
-        return new Promise(function (resolve, reject) {
-          is.empty(v) ? reject(validate.message) : resolve();
-        });
-      }
-    });
-
-    if (!validate.message) {
-      validate.message = rule.title + ' is required';
-    }
-
-    inject.getProp().validate = [validate];
-  },
-  watch: function watch() {
-    $required.load.apply($required, arguments);
-  }
-};
-
-function parseVa(val) {
-  if (is.Boolean(val)) {
-    return {};
-  } else if (is.String(val)) {
-    return {
-      message: val
-    };
-  } else if (!is.Object(val)) {
-    return {};
-  } else {
-    return val;
-  }
-}
 
 function parseOpt(option) {
   if (is.String(option)) {
@@ -5157,8 +5275,7 @@ function run(inject, rule, api) {
 }
 
 var $provider = {
-  fetch: $fetch,
-  required: $required
+  fetch: $fetch
 };
 
 var name$6 = 'html';
@@ -5232,7 +5349,9 @@ function FormCreateFactory(config) {
   exportAttrs(config.attrs || {});
 
   function getApi(name) {
-    return instance[name];
+    var val = instance[name];
+    if (Array.isArray(val)) return _toConsumableArray(val);
+    return val;
   }
 
   function useApp(fn) {
@@ -5367,6 +5486,7 @@ function FormCreateFactory(config) {
       modelFields: modelFields,
       rules: vm.props.rule,
       name: vm.props.name,
+      inFor: vm.props.inFor,
       prop: {
         components: components,
         directives: directives
@@ -5374,7 +5494,7 @@ function FormCreateFactory(config) {
       CreateNode: CreateNode,
       bus: new Mitt(),
       unwatch: null,
-      options: ref({}),
+      options: ref(vm.props.option || {}),
       extendApi: config.extendApi || function (api) {
         return api;
       }
@@ -5393,7 +5513,12 @@ function FormCreateFactory(config) {
     this.$handle = new Handler(this);
 
     if (this.name) {
-      instance[this.name] = this.api();
+      if (this.inFor) {
+        if (!instance[this.name]) instance[this.name] = [];
+        instance[this.name].push(this.api());
+      } else {
+        instance[this.name] = this.api();
+      }
     }
   }
 
@@ -5413,7 +5538,7 @@ function FormCreateFactory(config) {
         });
       }
 
-      this.initOptions(this.vm.props.option || {});
+      this.initOptions(this.options || {});
       this.$handle.init();
     },
     isSub: function isSub() {
@@ -5461,7 +5586,12 @@ function FormCreateFactory(config) {
     },
     unmount: function unmount() {
       if (this.name) {
-        delete instance[this.name];
+        if (this.inFor) {
+          var idx = instance[this.name].indexOf(this.api());
+          instance[this.name].splice(idx, 1);
+        } else {
+          delete instance[this.name];
+        }
       }
 
       this.unwatch && this.unwatch();
@@ -6314,11 +6444,61 @@ function extendApi(api, h) {
   return api;
 }
 
+var required = {
+  name: 'required',
+  load: function load(inject, rule, api) {
+    var val = parseVal(inject.getValue());
+
+    if (val.required === false) {
+      inject.clearProp();
+    } else {
+      var validate = _objectSpread2({
+        required: true,
+        validator: function validator(_, v, call) {
+          is.empty(v) ? call(validate.message) : call();
+        }
+      }, val);
+
+      if (!validate.message) {
+        validate.message = rule.title + ' is required';
+      }
+
+      inject.getProp().validate = [validate];
+    }
+
+    api.sync(rule);
+  },
+  watch: function watch() {
+    required.load.apply(required, arguments);
+  }
+};
+
+function parseVal(val) {
+  if (is.Boolean(val)) {
+    return {
+      required: val
+    };
+  } else if (is.String(val)) {
+    return {
+      message: val
+    };
+  } else if (is.Function(val)) {
+    return {
+      validator: val
+    };
+  } else if (!is.Object(val)) {
+    return {};
+  } else {
+    return val;
+  }
+}
+
 function install(FormCreate) {
   FormCreate.componentAlias(alias);
   components.forEach(function (component) {
     FormCreate.component(component.name, component);
   });
+  FormCreate.register(required);
   parsers.forEach(function (parser) {
     FormCreate.parser(parser);
   });
@@ -6336,7 +6516,7 @@ function install(FormCreate) {
 function elmFormCreate() {
   return FormCreateFactory({
     ui: 'element-ui',
-    version: '3.1.3',
+    version: '3.1.6',
     manager: manager,
     extendApi: extendApi,
     install: install,