@form-create/element-ui 3.1.3 → 3.1.4

package/dist/form-create.js

@@ -1,5 +1,5 @@
 /*!
- * @form-create/element-ui v3.1.3
+ * @form-create/element-ui v3.1.4
  * (c) 2018-2022 xaboy
  * Github https://github.com/xaboy/form-create
  * Released under the MIT License.
@@ -1536,8 +1536,6 @@
               for (var _i2 = 0; _i2 < len; _i2++) {
                 this.removeRule(keys[total - _i2 - 1]);
               }
-
-              this.subForm();
             }
 
             n.forEach(function (val, i) {
@@ -1545,8 +1543,7 @@
             });
           }
         },
-        deep: true,
-        flush: 'post'
+        deep: true
       }
     },
     methods: {
@@ -1625,7 +1622,6 @@
         var _this4 = this;
 
         this.cacheRule[key].$f = $f;
-        this.subForm();
         this.formData(key, $f.formData());
         vue.nextTick(function () {
           if (_this4.syncDisabled) {
@@ -1635,15 +1631,8 @@
           _this4.$emit('itemMounted', $f, Object.keys(_this4.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;
+        var _this5 = this;
 
         var index = Object.keys(this.cacheRule).indexOf(key);
         delete this.cacheRule[key];
@@ -1651,7 +1640,7 @@
 
         if (emit) {
           vue.nextTick(function () {
-            return _this6.$emit('remove', index);
+            return _this5.$emit('remove', index);
           });
         }
       },
@@ -1669,7 +1658,6 @@
         }
 
         this.removeRule(key, true);
-        this.subForm();
         this.modelValue.splice(index, 1);
         this.input(this.modelValue);
       },
@@ -1685,14 +1673,14 @@
         });
       },
       delIcon: function delIcon(index, key) {
-        var _this7 = this;
+        var _this6 = this;
 
         return vue.createVNode(vue.resolveComponent("ElIcon"), {
           "key": "d".concat(key),
           "class": "el-icon-remove-outline",
           "style": "font-size:".concat(this.fontSize, "px;cursor:").concat(this.disabled ? 'not-allowed;color:#c9cdd4' : 'pointer;color:#606266', ";"),
           "onClick": function onClick() {
-            return _this7.del(index, key);
+            return _this6.del(index, key);
           }
         }, {
           "default": function _default() {
@@ -1701,7 +1689,7 @@
         });
       },
       makeIcon: function makeIcon(total, index, key) {
-        var _this8 = this;
+        var _this7 = this;
 
         if (this.$slots.button) {
           return this.$slots.button({
@@ -1710,7 +1698,7 @@
             vm: this,
             key: key,
             del: function del() {
-              return _this8.del(index, key);
+              return _this7.del(index, key);
             },
             add: this.add
           });
@@ -1745,7 +1733,7 @@
       }
     },
     render: function render() {
-      var _this9 = this;
+      var _this8 = this;
 
       var keys = Object.keys(this.cacheRule);
       var button = this.button;
@@ -1766,9 +1754,9 @@
       }, [keys.map(function (key, index) {
         var _slot;
 
-        var _this9$cacheRule$key = _this9.cacheRule[key],
-            rule = _this9$cacheRule$key.rule,
-            options = _this9$cacheRule$key.options;
+        var _this8$cacheRule$key = _this8.cacheRule[key],
+            rule = _this8$cacheRule$key.rule,
+            options = _this8$cacheRule$key.options;
         return vue.createVNode(vue.resolveComponent("ElRow"), {
           "align": "middle",
           "type": "flex",
@@ -1784,19 +1772,20 @@
                   "default": function _default() {
                     return [vue.createVNode(Type, {
                       "key": key,
+                      "inFor": true,
                       "onUpdate:modelValue": function onUpdateModelValue(formData) {
-                        return _this9.formData(key, formData);
+                        return _this8.formData(key, formData);
                       },
-                      "modelValue": _this9.field ? _defineProperty({}, _this9.field, _this9._value(_this9.modelValue[index])) : _this9.modelValue[index],
+                      "modelValue": _this8.field ? _defineProperty({}, _this8.field, _this8._value(_this8.modelValue[index])) : _this8.modelValue[index],
                       "onEmit-event": function onEmitEvent(name) {
                         for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
                           args[_key - 1] = arguments[_key];
                         }
 
-                        return _this9.emitEvent(name, args, index, key);
+                        return _this8.emitEvent(name, args, index, key);
                       },
                       "onUpdate:api": function onUpdateApi($f) {
-                        return _this9.add$f(index, key, $f);
+                        return _this8.add$f(index, key, $f);
                       },
                       "rule": rule,
                       "option": options,
@@ -1809,7 +1798,7 @@
               "span": 2,
               "pull": 1,
               "push": 1
-            }, _isSlot(_slot = _this9.makeIcon(keys.length, index, key)) ? _slot : {
+            }, _isSlot(_slot = _this8.makeIcon(keys.length, index, key)) ? _slot : {
               "default": function _default() {
                 return [_slot];
               }
@@ -1886,7 +1875,6 @@
         var _this = this;
 
         this.subApi = api;
-        this.formCreateInject.subForm(api);
         vue.nextTick(function () {
           _this.syncDisabled && api.disabled(_this.disabled);
 
@@ -1933,6 +1921,21 @@
   var components = [Checkbox, Frame, Radio, Select, Tree, Upload, Group, Sub, script];
 
   var NAME$1 = 'FormCreate';
+
+  var getRuleInject = function getRuleInject(vm, parent) {
+    if (vm === parent) {
+      return;
+    }
+
+    if (vm.ctx.formCreateInject) {
+      return vm.ctx.formCreateInject;
+    }
+
+    if (vm.parent) {
+      return getRuleInject(vm.parent, parent);
+    }
+  };
+
   function $FormCreate(FormCreate) {
     return vue.defineComponent({
       name: NAME$1,
@@ -1953,7 +1956,12 @@
         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() {
@@ -1966,7 +1974,9 @@
 
         var _toRefs = vue.toRefs(props),
             rule = _toRefs.rule,
-            modelValue = _toRefs.modelValue;
+            modelValue = _toRefs.modelValue,
+            subForm = _toRefs.subForm,
+            inFor = _toRefs.inFor;
 
         var data = vue.reactive({
           ctxInject: {},
@@ -1978,16 +1988,60 @@
         });
         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();
+            }
+          }
+        };
+
         vue.onMounted(function () {
           fc.mounted();
         });
         vue.onBeforeUnmount(function () {
+          rmSubForm();
           data.destroyed = true;
           fc.unmount();
         });
         vue.onUpdated(function () {
           fc.updated();
         });
+        vue.watch(subForm, function (n) {
+          n ? addSubForm() : rmSubForm();
+        }, {
+          immediate: true
+        });
         vue.watch(function () {
           return _toConsumableArray(rule.value);
         }, function (n) {
@@ -2002,8 +2056,8 @@
           fapi.refresh();
         });
         vue.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
         });
@@ -2720,6 +2774,25 @@
           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, {
@@ -3136,11 +3209,15 @@
             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
           };
         }
 
@@ -4238,9 +4315,7 @@
         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) {
@@ -5052,44 +5127,6 @@
       }
     }
   };
-  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)) {
@@ -5161,8 +5198,7 @@
   }
 
   var $provider = {
-    fetch: $fetch,
-    required: $required
+    fetch: $fetch
   };
 
   var name$6 = 'html';
@@ -5236,7 +5272,9 @@
     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) {
@@ -5371,6 +5409,7 @@
         modelFields: modelFields,
         rules: vm.props.rule,
         name: vm.props.name,
+        inFor: vm.props.inFor,
         prop: {
           components: components,
           directives: directives
@@ -5397,7 +5436,12 @@
       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();
+        }
       }
     }
 
@@ -5465,7 +5509,12 @@
       },
       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();
@@ -6318,11 +6367,57 @@
     return api;
   }
 
+  var required = {
+    name: 'required',
+    load: function load(inject, rule, api) {
+      var val = parseVa(inject.getValue());
+
+      if (val.required === false) {
+        inject.clearProp();
+      } else {
+        var validate = _objectSpread2(_objectSpread2({}, val), {}, {
+          required: true,
+          validator: function validator(_, v, call) {
+            is.empty(v) ? call(validate.message) : call();
+          }
+        });
+
+        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 parseVa(val) {
+    if (is.Boolean(val)) {
+      return {
+        required: val
+      };
+    } else if (is.String(val)) {
+      return {
+        message: 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);
     });
@@ -6340,7 +6435,7 @@
   function elmFormCreate() {
     return FormCreateFactory({
       ui: 'element-ui',
-      version: '3.1.3',
+      version: '3.1.4',
       manager: manager,
       extendApi: extendApi,
       install: install,