@form-create/element-ui 3.1.5 → 3.1.6

package/dist/form-create.js

@@ -1,5 +1,5 @@
 /*!
- * @form-create/element-ui v3.1.4
+ * @form-create/element-ui v3.1.6
  * (c) 2018-2022 xaboy
  * Github https://github.com/xaboy/form-create
  * Released under the MIT License.
@@ -1499,6 +1499,26 @@
     },
     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;
@@ -1516,7 +1536,7 @@
       },
       modelValue: {
         handler: function handler(n) {
-          var _this = this;
+          var _this2 = this;
 
           n = n || [];
           var keys = Object.keys(this.cacheRule),
@@ -1539,7 +1559,7 @@
             }
 
             n.forEach(function (val, i) {
-              _this.setValue(keys[i], n[i]);
+              _this2.setValue(keys[i], n[i]);
             });
           }
         },
@@ -1558,7 +1578,7 @@
         this.$emit('change', value);
       },
       formData: function formData(key, _formData) {
-        var _this2 = this;
+        var _this3 = this;
 
         var cacheRule = this.cacheRule;
         var keys = Object.keys(cacheRule);
@@ -1570,10 +1590,10 @@
         }
 
         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;
         });
@@ -1593,7 +1613,7 @@
         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) : {
@@ -1614,25 +1634,25 @@
 
         if (emit) {
           vue.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.formData(key, $f.formData());
         vue.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));
         });
       },
       removeRule: function removeRule(key, emit) {
-        var _this5 = this;
+        var _this6 = this;
 
         var index = Object.keys(this.cacheRule).indexOf(key);
         delete this.cacheRule[key];
@@ -1640,7 +1660,7 @@
 
         if (emit) {
           vue.nextTick(function () {
-            return _this5.$emit('remove', index);
+            return _this6.$emit('remove', index);
           });
         }
       },
@@ -1673,14 +1693,14 @@
         });
       },
       delIcon: function delIcon(index, key) {
-        var _this6 = this;
+        var _this7 = 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 _this6.del(index, key);
+            return _this7.del(index, key);
           }
         }, {
           "default": function _default() {
@@ -1689,7 +1709,7 @@
         });
       },
       makeIcon: function makeIcon(total, index, key) {
-        var _this7 = this;
+        var _this8 = this;
 
         if (this.$slots.button) {
           return this.$slots.button({
@@ -1698,7 +1718,7 @@
             vm: this,
             key: key,
             del: function del() {
-              return _this7.del(index, key);
+              return _this8.del(index, key);
             },
             add: this.add
           });
@@ -1733,7 +1753,7 @@
       }
     },
     render: function render() {
-      var _this8 = this;
+      var _this9 = this;
 
       var keys = Object.keys(this.cacheRule);
       var button = this.button;
@@ -1754,9 +1774,9 @@
       }, [keys.map(function (key, index) {
         var _slot;
 
-        var _this8$cacheRule$key = _this8.cacheRule[key],
-            rule = _this8$cacheRule$key.rule,
-            options = _this8$cacheRule$key.options;
+        var _this9$cacheRule$key = _this9.cacheRule[key],
+            rule = _this9$cacheRule$key.rule,
+            options = _this9$cacheRule$key.options;
         return vue.createVNode(vue.resolveComponent("ElRow"), {
           "align": "middle",
           "type": "flex",
@@ -1774,18 +1794,18 @@
                       "key": key,
                       "inFor": true,
                       "onUpdate:modelValue": function onUpdateModelValue(formData) {
-                        return _this8.formData(key, formData);
+                        return _this9.formData(key, formData);
                       },
-                      "modelValue": _this8.field ? _defineProperty({}, _this8.field, _this8._value(_this8.modelValue[index])) : _this8.modelValue[index],
+                      "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 _this8.emitEvent(name, args, index, key);
+                        return _this9.emitEvent(name, args, index, key);
                       },
                       "onUpdate:api": function onUpdateApi($f) {
-                        return _this8.add$f(index, key, $f);
+                        return _this9.add$f(index, key, $f);
                       },
                       "rule": rule,
                       "option": options,
@@ -1798,7 +1818,7 @@
               "span": 2,
               "pull": 1,
               "push": 1
-            }, _isSlot(_slot = _this8.makeIcon(keys.length, index, key)) ? _slot : {
+            }, _isSlot(_slot = _this9.makeIcon(keys.length, index, key)) ? _slot : {
               "default": function _default() {
                 return [_slot];
               }
@@ -1923,7 +1943,7 @@
   var NAME$1 = 'FormCreate';
 
   var getRuleInject = function getRuleInject(vm, parent) {
-    if (vm === parent) {
+    if (!vm || vm === parent) {
       return;
     }
 
@@ -1984,7 +2004,7 @@
           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();
@@ -2156,7 +2176,7 @@
     };
   };
 
-  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() {
@@ -2544,7 +2564,7 @@
           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);
@@ -3075,7 +3095,6 @@
         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;
@@ -3087,7 +3106,10 @@
             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);
@@ -3145,18 +3167,18 @@
                 _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;
@@ -3223,7 +3245,7 @@
 
         var inject = state.ctxInject[ctx.id];
         extend(inject, {
-          preview: this.options.preview || false,
+          preview: ctx.prop.preview,
           options: ctx.prop.options,
           children: ctx.loadChildrenPending()
         });
@@ -3301,6 +3323,7 @@
       },
       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);
@@ -3775,11 +3798,7 @@
       this.$handle.appendLink(this);
     },
     watchTo: function watchTo() {
-      var _this4 = this;
-
-      vue.nextTick(function () {
-        _this4.$handle && _this4.$handle.watchCtx(_this4);
-      });
+      this.$handle.watchCtx(this);
     },
     "delete": function _delete() {
       var undef = void 0;
@@ -3808,15 +3827,15 @@
       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();
         }
       };
 
@@ -3827,17 +3846,17 @@
       }
 
       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) {
@@ -3941,13 +3960,13 @@
             return _this5.loadRule();
           }
 
+          _this5.syncForm();
+
           if (_this5.pageEnd) {
             _this5.bus.$emit('load-end');
           }
 
           _this5.vm.setupState.renderRule();
-
-          _this5.syncForm();
         });
       },
       loadChildren: function loadChildren(children, parent) {
@@ -3962,8 +3981,8 @@
         if (this.cycleLoad) {
           return this.loadRule();
         } else {
-          this.bus.$emit('load-end');
           this.syncForm();
+          this.bus.$emit('load-end');
         }
 
         this.$render.clearCache(parent);
@@ -4207,19 +4226,27 @@
         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);
@@ -4285,28 +4312,14 @@
       syncForm: function syncForm() {
         var _this = this;
 
+        var data = vue.reactive({});
         this.fields().reduce(function (initial, field) {
           var ctx = _this.getCtx(field);
 
           initial[field] = vue.toRef(ctx.rule, 'value');
           return initial;
-        }, Object.keys(this.appendData).reduce(function (initial, field) {
-          initial[field] = vue.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) {
@@ -4413,11 +4426,46 @@
       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) {
@@ -4494,10 +4542,9 @@
       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 = vue.toRef(ctx.rule, key);
           var flag = key === 'children';
@@ -4560,11 +4607,36 @@
             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 = vue.toRef(ctx.rule, 'computed');
+            ctx.watch.push(vue.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);
@@ -4605,6 +4677,7 @@
         $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 () {
@@ -5001,6 +5074,14 @@
       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, vue.createVNode(type, toProps(data), children));
+        } catch (e) {
+          console.error(e);
+          return vue.createVNode('');
+        }
+      },
       h: function h(tag, data, children) {
         var isNativeTag = vue.getCurrentInstance().appContext.config.isNativeTag(tag);
 
@@ -5417,7 +5498,7 @@
         CreateNode: CreateNode,
         bus: new Mitt(),
         unwatch: null,
-        options: vue.ref({}),
+        options: vue.ref(vm.props.option || {}),
         extendApi: config.extendApi || function (api) {
           return api;
         }
@@ -5461,7 +5542,7 @@
           });
         }
 
-        this.initOptions(this.vm.props.option || {});
+        this.initOptions(this.options || {});
         this.$handle.init();
       },
       isSub: function isSub() {
@@ -6370,17 +6451,17 @@
   var required = {
     name: 'required',
     load: function load(inject, rule, api) {
-      var val = parseVa(inject.getValue());
+      var val = parseVal(inject.getValue());
 
       if (val.required === false) {
         inject.clearProp();
       } else {
-        var validate = _objectSpread2(_objectSpread2({}, val), {}, {
+        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';
@@ -6396,7 +6477,7 @@
     }
   };
 
-  function parseVa(val) {
+  function parseVal(val) {
     if (is.Boolean(val)) {
       return {
         required: val
@@ -6405,6 +6486,10 @@
       return {
         message: val
       };
+    } else if (is.Function(val)) {
+      return {
+        validator: val
+      };
     } else if (!is.Object(val)) {
       return {};
     } else {
@@ -6435,7 +6520,7 @@
   function elmFormCreate() {
     return FormCreateFactory({
       ui: 'element-ui',
-      version: '3.1.4',
+      version: '3.1.6',
       manager: manager,
       extendApi: extendApi,
       install: install,