@form-create/element-ui 3.1.5 → 3.1.6

package/dist/form-create.esm.js

@@ -1,10 +1,10 @@
 /*!
- * @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.
  */
-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),
@@ -1535,7 +1555,7 @@ var Group = defineComponent({
           }
 
           n.forEach(function (val, i) {
-            _this.setValue(keys[i], n[i]);
+            _this2.setValue(keys[i], n[i]);
           });
         }
       },
@@ -1554,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);
@@ -1566,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;
       });
@@ -1589,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) : {
@@ -1610,25 +1630,25 @@ 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.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));
       });
     },
     removeRule: function removeRule(key, emit) {
-      var _this5 = this;
+      var _this6 = this;
 
       var index = Object.keys(this.cacheRule).indexOf(key);
       delete this.cacheRule[key];
@@ -1636,7 +1656,7 @@ var Group = defineComponent({
 
       if (emit) {
         nextTick(function () {
-          return _this5.$emit('remove', index);
+          return _this6.$emit('remove', index);
         });
       }
     },
@@ -1669,14 +1689,14 @@ var Group = defineComponent({
       });
     },
     delIcon: function delIcon(index, key) {
-      var _this6 = this;
+      var _this7 = this;
 
       return createVNode(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() {
@@ -1685,7 +1705,7 @@ var Group = defineComponent({
       });
     },
     makeIcon: function makeIcon(total, index, key) {
-      var _this7 = this;
+      var _this8 = this;
 
       if (this.$slots.button) {
         return this.$slots.button({
@@ -1694,7 +1714,7 @@ var Group = defineComponent({
           vm: this,
           key: key,
           del: function del() {
-            return _this7.del(index, key);
+            return _this8.del(index, key);
           },
           add: this.add
         });
@@ -1729,7 +1749,7 @@ var Group = defineComponent({
     }
   },
   render: function render() {
-    var _this8 = this;
+    var _this9 = this;
 
     var keys = Object.keys(this.cacheRule);
     var button = this.button;
@@ -1750,9 +1770,9 @@ var Group = defineComponent({
     }, [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 createVNode(resolveComponent("ElRow"), {
         "align": "middle",
         "type": "flex",
@@ -1770,18 +1790,18 @@ var Group = defineComponent({
                     "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,
@@ -1794,7 +1814,7 @@ var Group = defineComponent({
             "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];
             }
@@ -1919,7 +1939,7 @@ var components = [Checkbox, Frame, Radio, Select, Tree, Upload, Group, Sub, scri
 var NAME$1 = 'FormCreate';
 
 var getRuleInject = function getRuleInject(vm, parent) {
-  if (vm === parent) {
+  if (!vm || vm === parent) {
     return;
   }
 
@@ -1980,7 +2000,7 @@ 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();
@@ -2152,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() {
@@ -2540,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);
@@ -3071,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;
@@ -3083,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);
@@ -3141,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;
@@ -3219,7 +3241,7 @@ function useRender$1(Render) {
 
       var inject = state.ctxInject[ctx.id];
       extend(inject, {
-        preview: this.options.preview || false,
+        preview: ctx.prop.preview,
         options: ctx.prop.options,
         children: ctx.loadChildrenPending()
       });
@@ -3297,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);
@@ -3771,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;
@@ -3804,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();
       }
     };
 
@@ -3823,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) {
@@ -3937,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) {
@@ -3958,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);
@@ -4203,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);
@@ -4281,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) {
@@ -4409,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) {
@@ -4490,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';
@@ -4556,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);
@@ -4601,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 () {
@@ -4997,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);
 
@@ -5413,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;
       }
@@ -5457,7 +5538,7 @@ function FormCreateFactory(config) {
         });
       }
 
-      this.initOptions(this.vm.props.option || {});
+      this.initOptions(this.options || {});
       this.$handle.init();
     },
     isSub: function isSub() {
@@ -6366,17 +6447,17 @@ function extendApi(api, h) {
 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';
@@ -6392,7 +6473,7 @@ var required = {
   }
 };
 
-function parseVa(val) {
+function parseVal(val) {
   if (is.Boolean(val)) {
     return {
       required: val
@@ -6401,6 +6482,10 @@ function parseVa(val) {
     return {
       message: val
     };
+  } else if (is.Function(val)) {
+    return {
+      validator: val
+    };
   } else if (!is.Object(val)) {
     return {};
   } else {
@@ -6431,7 +6516,7 @@ function install(FormCreate) {
 function elmFormCreate() {
   return FormCreateFactory({
     ui: 'element-ui',
-    version: '3.1.4',
+    version: '3.1.6',
     manager: manager,
     extendApi: extendApi,
     install: install,