@form-create/element-ui 3.1.11 → 3.1.14

package/README.md

@@ -1,7 +1,7 @@
 # @form-create/element-ui
-**form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持3个UI框架，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。**
+**form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持5个UI框架，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。**
 
-form-create is a form generation component that can generate dynamic rendering, data collection, verification and submission functions through JSON. Supports 3 UI frameworks, and supports the generation of any Vue components. Built-in 20 kinds of commonly used form components and custom components, no matter how complex forms can be easily handled.
+form-create is a form generation component that can generate dynamic rendering, data collection, verification and submission functions through JSON. Supports 5 UI frameworks, and supports the generation of any Vue components. Built-in 20 kinds of commonly used form components and custom components, no matter how complex forms can be easily handled.
 
 > form-create element-ui 动态表单组件
 >

package/dist/form-create.esm.js

@@ -1,5 +1,5 @@
 /*!
- * @form-create/element-ui v3.1.11
+ * @form-create/element-ui v3.1.14
  * (c) 2018-2022 xaboy
  * Github https://github.com/xaboy/form-create
  * Released under the MIT License.
@@ -1493,7 +1493,7 @@ var Group = defineComponent({
       form: markRaw(this.formCreateInject.form.$form())
     };
   },
-  emits: ['update:modelValue', 'change', 'itemMounted', 'remove'],
+  emits: ['update:modelValue', 'change', 'itemMounted', 'remove', 'add'],
   watch: {
     rule: {
       handler: function handler(n, o) {
@@ -1549,7 +1549,7 @@ var Group = defineComponent({
 
         if (len < 0) {
           for (var i = len; i < 0; i++) {
-            this.addRule(n.length + i);
+            this.addRule(n.length + i, true);
           }
 
           for (var _i = 0; _i < total; _i++) {
@@ -1792,31 +1792,27 @@ var Group = defineComponent({
             "span": button ? 20 : 24
           }, {
             "default": function _default() {
-              return [createVNode(resolveComponent("ElFormItem"), null, {
-                "default": function _default() {
-                  return [createVNode(Type, {
-                    "key": key,
-                    "inFor": true,
-                    "onUpdate:modelValue": function onUpdateModelValue(formData) {
-                      return _this9.formData(key, formData);
-                    },
-                    "modelValue": _this9.field ? _defineProperty({}, _this9.field, _this9._value(_this9.modelValue[index])) : _this9.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);
-                    },
-                    "onUpdate:api": function onUpdateApi($f) {
-                      return _this9.add$f(index, key, $f);
-                    },
-                    "rule": rule,
-                    "option": options,
-                    "extendOption": true
-                  }, null)];
-                }
-              })];
+              return [createVNode(Type, {
+                "key": key,
+                "inFor": true,
+                "onUpdate:modelValue": function onUpdateModelValue(formData) {
+                  return _this9.formData(key, formData);
+                },
+                "modelValue": _this9.field ? _defineProperty({}, _this9.field, _this9._value(_this9.modelValue[index])) : _this9.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);
+                },
+                "onUpdate:api": function onUpdateApi($f) {
+                  return _this9.add$f(index, key, $f);
+                },
+                "rule": rule,
+                "option": options,
+                "extendOption": true
+              }, null)];
             }
           }), button ? createVNode(resolveComponent("ElCol"), {
             "span": 2,
@@ -2075,13 +2071,17 @@ function $FormCreate(FormCreate) {
         fc.$handle.reloadRule(rule.value);
         vm.setupState.renderRule();
       });
-      watch(props.option, function (n) {
+      watch(function () {
+        return props.option;
+      }, function (n) {
         fc.initOptions(n);
         fapi.refresh();
+      }, {
+        deep: true
       });
       watch(modelValue, function (n) {
         if (JSON.stringify(n || {}) === data.updateValue) return;
-        fapi.setValue(n || {});
+        fapi.config.forceCoverValue ? fapi.coverValue(n || {}) : fapi.setValue(n || {});
       }, {
         deep: true
       });
@@ -2297,7 +2297,13 @@ function mergeRule(rule, merge) {
   return rule;
 }
 function getRule(rule) {
-  return is.Function(rule.getRule) ? rule.getRule() : rule;
+  var r = is.Function(rule.getRule) ? rule.getRule() : rule;
+
+  if (!r.type) {
+    r.type = 'input';
+  }
+
+  return r;
 }
 function mergeGlobal(target, merge) {
   if (!target) return merge;
@@ -2576,15 +2582,21 @@ function Api(h) {
       return copy(ctx.rule.value);
     },
     coverValue: function coverValue(formData) {
+      var data = _objectSpread2({}, formData || {});
+
       h.deferSyncValue(function () {
         api.fields().forEach(function (key) {
           var ctxs = h.fieldCtx[key];
-          if (!ctxs) return h.appendData[key] = formData[key];
-          var flag = hasProperty(formData, key);
-          ctxs.forEach(function (ctx) {
-            ctx.rule.value = flag ? formData[key] : undefined;
-          });
+
+          if (ctxs) {
+            var flag = hasProperty(formData, key);
+            ctxs.forEach(function (ctx) {
+              ctx.rule.value = flag ? formData[key] : undefined;
+            });
+            delete data[key];
+          }
         });
+        extend(h.appendData, data);
       });
     },
     setValue: function setValue(field) {
@@ -2817,6 +2829,18 @@ function Api(h) {
         $set(ctx.rule.effect, attr, value);
       }
     },
+    clearEffectData: function clearEffectData(id, attr) {
+      var ctx = h.getCtx(id);
+
+      if (ctx) {
+        if (attr && attr[0] === '$') {
+          attr = attr.substr(1);
+        }
+
+        ctx.clearEffectData(attr);
+        api.sync(id);
+      }
+    },
     updateValidate: function updateValidate(id, validate, merge) {
       if (merge) {
         api.mergeRule(id, {
@@ -2949,8 +2973,13 @@ function useCache(Render) {
     },
     getCache: function getCache(ctx) {
       var cache = this.cache[ctx.id];
-      cache.use = true;
-      return cache.vnode;
+
+      if (cache) {
+        cache.use = true;
+        return cache.vnode;
+      }
+
+      return undefined;
     }
   });
 }
@@ -3621,7 +3650,7 @@ function bind(ctx) {
   });
 }
 
-function RuleContext(handle, rule) {
+function RuleContext(handle, rule, defaultValue) {
   var id = uniqueId();
   var isInput = !!rule.field;
   extend(this, {
@@ -3645,7 +3674,7 @@ function RuleContext(handle, rule) {
     refRule: {},
     input: isInput,
     el: undefined,
-    defaultValue: isInput ? deepCopy(rule.value) : undefined,
+    defaultValue: isInput ? deepCopy(defaultValue) : undefined,
     field: rule.field || undefined
   });
   this.updateType();
@@ -3758,7 +3787,11 @@ extend(RuleContext.prototype, {
     return this.payload[name];
   },
   clearEffectData: function clearEffectData(name) {
-    delete this.payload[name];
+    if (name === undefined) {
+      this.payload = {};
+    } else {
+      delete this.payload[name];
+    }
   },
   updateKey: function updateKey(flag) {
     this.key = uniqueId();
@@ -4019,7 +4052,6 @@ function useLoader(Handler) {
       rules.map(function (_rule, index) {
         if (parent && (is.String(_rule) || is.Undef(_rule))) return;
         if (!_this6.pageEnd && !parent && index >= _this6.first) return;
-        if (!is.Object(_rule) || !getRule(_rule).type) return err('未定义生成规则的 type 字段', _rule);
 
         if (_rule.__fc__ && _rule.__fc__.root === rules && _this6.ctxs[_rule.__fc__.id]) {
           loadChildren(_rule.__fc__.loadChildrenPending(), _rule.__fc__);
@@ -4043,9 +4075,11 @@ function useLoader(Handler) {
         var ctx;
         var isCopy = false;
         var isInit = !!_rule.__fc__;
+        var defaultValue = rule.value;
 
         if (isInit) {
           ctx = _rule.__fc__;
+          defaultValue = ctx.defaultValue;
           var check = !ctx.check(_this6);
 
           if (ctx.deleted) {
@@ -4070,7 +4104,9 @@ function useLoader(Handler) {
         }
 
         if (!ctx) {
-          ctx = new RuleContext(_this6, _this6.parseRule(_rule));
+          var _rule2 = _this6.parseRule(_rule);
+
+          ctx = new RuleContext(_this6, _rule2, isInit ? defaultValue : _rule2.value);
 
           _this6.bindParser(ctx);
         } else {
@@ -4318,7 +4354,7 @@ function useInput(Handler) {
       }
     },
     setFormData: function setFormData(ctx, value) {
-      $set(this.formData, ctx.id, value === null ? undefined : value);
+      $set(this.formData, ctx.id, value);
     },
     getFormData: function getFormData(ctx) {
       return this.formData[ctx.id];
@@ -4621,7 +4657,6 @@ 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);
@@ -4768,6 +4803,11 @@ function useEffect(Handler) {
       var ps = this.fc.providers;
       Object.keys(ps).forEach(function (k) {
         var prop = ps[k];
+
+        if (is.Function(prop)) {
+          prop = prop(_this.fc);
+        }
+
         prop._c = getComponent(prop);
 
         _this.onEffect(prop);
@@ -5001,7 +5041,7 @@ function getBody(xhr) {
   }
 }
 
-function fetch(option) {
+function fetch$1(option) {
   if (typeof XMLHttpRequest === 'undefined') {
     return;
   }
@@ -5214,90 +5254,103 @@ extend(Manager.prototype, {
   render: function render(children) {}
 });
 
-var $fetch = {
-  name: 'fetch',
-  loaded: function loaded() {
-    run.apply(void 0, arguments);
-  },
-  watch: function watch(inject, rule, api) {
-    if (!run(inject, rule, api)) {
-      inject.clearProp();
-      api.sync(rule);
+var fetch = function fetch(fc) {
+  function parseOpt(option) {
+    if (is.String(option)) {
+      option = {
+        action: option,
+        to: 'options'
+      };
     }
-  }
-};
 
-function parseOpt(option) {
-  if (is.String(option)) {
-    option = {
-      action: option,
-      to: 'options'
-    };
+    return option;
   }
 
-  return option;
-}
+  function run(inject, rule, api) {
+    var option = inject.value;
 
-function run(inject, rule, api) {
-  var option = inject.value;
+    if (is.Function(option)) {
+      option = option(rule, api);
+    }
 
-  if (is.Function(option)) {
-    option = option(rule, api);
-  }
+    option = parseOpt(option);
 
-  option = parseOpt(option);
+    if (!option || !option.action) {
+      return false;
+    }
 
-  if (!option || !option.action) {
-    return false;
-  }
+    if (!option.to) {
+      option.to = 'options';
+    }
 
-  if (!option.to) {
-    option.to = 'options';
-  }
+    var _onError = option.onError;
 
-  var _onError = option.onError;
+    var check = function check() {
+      if (!inject.getValue()) {
+        inject.clearProp();
+        api.sync(rule);
+        return true;
+      }
+    };
 
-  var check = function check() {
-    if (!inject.getValue()) {
-      inject.clearProp();
-      api.sync(rule);
-      return true;
-    }
-  };
+    var set = function set(val) {
+      if (val === undefined) {
+        inject.clearProp();
+        api.sync(rule);
+      } else {
+        deepSet(inject.getProp(), option.to, val);
+      }
+    };
 
-  var set = function set(val) {
-    if (val === undefined) {
-      inject.clearProp();
-      api.sync(rule);
-    } else {
-      deepSet(inject.getProp(), option.to, val);
-    }
-  };
+    invoke(function () {
+      return fc.create.fetch(_objectSpread2(_objectSpread2({}, option), {}, {
+        onSuccess: function onSuccess(body) {
+          if (check()) return;
 
-  invoke(function () {
-    return fetch(_objectSpread2(_objectSpread2({}, option), {}, {
-      onSuccess: function onSuccess(body) {
-        if (check()) return;
-        set((option.parse || function (v) {
-          return v.data;
-        })(body, rule, api));
-        api.sync(rule);
-      },
-      onError: function onError(e) {
-        set(undefined);
-        if (check()) return;
+          var fn = function fn(v) {
+            return v.data;
+          };
+
+          if (is.Function(option.parse)) {
+            fn = option.parse;
+          }
 
-        (_onError || function (e) {
-          return err(e.message || 'fetch fail ' + option.action);
-        })(e, rule, api);
+          set(fn(body, rule, api));
+          api.sync(rule);
+        },
+        onError: function onError(e) {
+          set(undefined);
+          if (check()) return;
+
+          (_onError || function (e) {
+            return err(e.message || 'fetch fail ' + option.action);
+          })(e, rule, api);
+        }
+      }), {
+        inject: inject,
+        rule: rule,
+        api: api
+      });
+    });
+    return true;
+  }
+
+  return {
+    name: 'fetch',
+    loaded: function loaded() {
+      run.apply(void 0, arguments);
+    },
+    watch: function watch(inject, rule, api) {
+      if (!run(inject, rule, api)) {
+        inject.clearProp();
+        api.sync(rule);
       }
-    }));
-  });
-  return true;
-}
+    }
+  };
+};
 
 var $provider = {
-  fetch: $fetch
+  fetch: fetch
 };
 
 var name$6 = 'html';
@@ -5645,7 +5698,7 @@ function FormCreateFactory(config) {
       componentAlias: componentAlias,
       copyRule: copyRule,
       copyRules: copyRules,
-      fetch: fetch,
+      fetch: fetch$1,
       $form: $form,
       parseFn: parseFn,
       parseJson: parseJson,
@@ -5940,6 +5993,13 @@ function tidyBool(opt, name) {
   }
 }
 
+function tidyRule(rule) {
+  var _rule = _objectSpread2({}, rule);
+
+  delete _rule.children;
+  return _rule;
+}
+
 var manager = {
   validate: function validate() {
     var form = this.form();
@@ -6099,7 +6159,7 @@ var manager = {
     if (!isFalse(infoProp.show) && (infoProp.info || infoProp["native"]) && !isFalse(infoProp.icon)) {
       var prop = {
         type: infoProp.type || 'popover',
-        props: _objectSpread2({}, infoProp),
+        props: tidyRule(infoProp),
         key: "".concat(uni, "pop")
       };
       delete prop.props.icon;
@@ -6129,7 +6189,7 @@ var manager = {
     }
 
     var _prop = mergeProps([titleProp, {
-      props: titleProp,
+      props: tidyRule(titleProp),
       key: "".concat(uni, "tit"),
       type: titleProp.type || 'span'
     }]);
@@ -6497,7 +6557,8 @@ var required = {
       }, val);
 
       if (!validate.message) {
-        validate.message = rule.title + '不能为空';
+        var title = rule.title || '';
+        validate.message = ((_typeof(title) === 'object' ? title.title : title) || '') + '不能为空';
       }
 
       inject.getProp().validate = [validate];
@@ -6553,7 +6614,7 @@ function install(FormCreate) {
 function elmFormCreate() {
   return FormCreateFactory({
     ui: 'element-ui',
-    version: '3.1.11',
+    version: '3.1.14',
     manager: manager,
     extendApi: extendApi,
     install: install,