@form-create/element-ui 3.0.0-alpha.2 → 3.0.0-alpha.3

package/dist/form-create.esm.js

@@ -1,10 +1,10 @@
 /*!
- * @form-create/element-ui v3.0.0-alpha.2
+ * @form-create/element-ui v3.0.0-alpha.3
  * (c) 2018-2021 xaboy
  * Github https://github.com/xaboy/form-create
  * Released under the MIT License.
  */
-import { defineComponent, toRefs, inject, ref, toRef, computed, resolveComponent, createVNode, mergeProps as mergeProps$1, isVNode, nextTick, markRaw, reactive, getCurrentInstance, provide, onMounted, onBeforeUnmount, onUpdated, watch, customRef, withDirectives, resolveDirective, createApp, h } from 'vue';
+import { defineComponent, toRefs, inject, ref, toRef, watch, resolveComponent, createVNode, mergeProps as mergeProps$1, isVNode, nextTick, markRaw, reactive, getCurrentInstance, provide, onMounted, onBeforeUnmount, onUpdated, computed, customRef, withDirectives, resolveDirective, createApp, h } from 'vue';
 import ElementPlus from 'element-plus';
 
 function ownKeys(object, enumerableOnly) {
@@ -227,25 +227,30 @@ var Checkbox = defineComponent({
     var trueValue = ref([]);
     var value = toRef(props, 'modelValue');
 
-    var _options = computed(function () {
-      return Array.isArray(options) ? options : [];
-    });
+    var _options = function _options() {
+      return Array.isArray(options.value) ? options.value : [];
+    };
 
     var update = function update() {
-      trueValue.value = value.value ? _options.value.filter(function (opt) {
+      trueValue.value = value.value ? _options().filter(function (opt) {
         return value.value.indexOf(opt.value) !== -1;
       }).map(function (option) {
         return option.label;
       }) : [];
     };
 
-    update();
+    watch(options, function () {
+      update();
+    }, {
+      deep: true,
+      immediate: true
+    });
     return {
       options: _options,
       trueValue: trueValue,
       value: value,
       onInput: function onInput(n) {
-        _.emit('update:modelValue', _options.value.filter(function (opt) {
+        _.emit('update:modelValue', _options().filter(function (opt) {
           return n.indexOf(opt.label) !== -1;
         }).map(function (opt) {
           return opt.value;
@@ -273,7 +278,7 @@ var Checkbox = defineComponent({
       "onUpdate:modelValue": this.onInput
     }), _objectSpread2({
       "default": function _default() {
-        return [_this.options.map(function (opt, index) {
+        return [_this.options().map(function (opt, index) {
           var props = _objectSpread2({}, opt);
 
           delete props.value;
@@ -848,25 +853,30 @@ var Radio = defineComponent({
     var trueValue = ref([]);
     var value = toRef(props, 'modelValue');
 
-    var _options = computed(function () {
-      return Array.isArray(options) ? options : [];
-    });
+    var _options = function _options() {
+      return Array.isArray(options.value) ? options.value : [];
+    };
 
     var update = function update() {
-      trueValue.value = _options.value.filter(function (opt) {
+      trueValue.value = _options().filter(function (opt) {
         return opt.value === value.value;
       }).reduce(function (initial, opt) {
         return opt.label;
       }, '');
     };
 
-    update();
+    watch(options, function () {
+      update();
+    }, {
+      deep: true,
+      immediate: true
+    });
     return {
       options: _options,
       trueValue: trueValue,
       value: value,
       onInput: function onInput(n) {
-        _.emit('update:modelValue', _options.value.filter(function (opt) {
+        _.emit('update:modelValue', _options().filter(function (opt) {
           return opt.label === n;
         }).reduce(function (initial, opt) {
           return opt.value;
@@ -892,7 +902,7 @@ var Radio = defineComponent({
       "onUpdate:modelValue": this.onInput
     }), _objectSpread2({
       "default": function _default() {
-        return [_this.options.map(function (opt, index) {
+        return [_this.options().map(function (opt, index) {
           var props = _objectSpread2({}, opt);
 
           delete props.value;
@@ -925,9 +935,9 @@ var Select = defineComponent({
 
     var value = toRef(props, 'modelValue');
 
-    var _options = computed(function () {
-      return Array.isArray(options) ? options : [];
-    });
+    var _options = function _options() {
+      return Array.isArray(options.value) ? options.value : [];
+    };
 
     return {
       options: _options,
@@ -946,7 +956,7 @@ var Select = defineComponent({
       }
     }), _objectSpread2({
       "default": function _default() {
-        return [_this.options.map(function (props, index) {
+        return [_this.options().map(function (props, index) {
           return createVNode(resolveComponent("ElOption"), mergeProps$1(props, {
             "key": '' + index + props.value
           }), null);
@@ -1064,7 +1074,8 @@ var Upload = defineComponent({
       uploadList: [],
       previewVisible: false,
       previewImage: '',
-      fileList: []
+      fileList: [],
+      cacheFiles: []
     };
   },
   created: function created() {
@@ -1163,7 +1174,7 @@ var Upload = defineComponent({
         }
 
         return createVNode("div", {
-          "class": 'fc-upload-cover'
+          "class": "fc-upload-cover"
         }, [icons]);
       }
     },
@@ -1173,7 +1184,7 @@ var Upload = defineComponent({
       return this.uploadList.map(function (file, index) {
         return createVNode("div", {
           "key": _this3.key(index),
-          "class": 'fc-files'
+          "class": "fc-files"
         }, [file.percentage !== undefined && file.status !== 'success' ? _this3.makeProgress(file, index) : [_this3.makeItem(file, index), _this3.makeIcons(file, index)]]);
       });
     },
@@ -1194,7 +1205,7 @@ var Upload = defineComponent({
       }), _objectSpread2({
         "default": function _default() {
           return [isShow ? ((_this$$slots$default = (_this$$slots = _this4.$slots)["default"]) === null || _this$$slots$default === void 0 ? void 0 : _this$$slots$default.call(_this$$slots)) || createVNode("div", {
-            "class": 'fc-upload-btn'
+            "class": "fc-upload-btn"
           }, [createVNode("i", {
             "class": "el-icon-upload2"
           }, null)]) : undefined];
@@ -1207,7 +1218,11 @@ var Upload = defineComponent({
       }).filter(function (url) {
         return url !== undefined;
       });
-      this.$emit('update:modelValue', this.limit === 1 ? files[0] || '' : files);
+
+      if (this.cacheFiles.length !== files.length) {
+        this.cacheFiles = _toConsumableArray(files);
+        this.$emit('update:modelValue', this.limit === 1 ? files[0] || '' : files);
+      }
     },
     handleCancel: function handleCancel() {
       this.previewVisible = false;
@@ -1217,7 +1232,7 @@ var Upload = defineComponent({
     var _this5 = this;
 
     return createVNode("div", {
-      "class": '_fc-upload'
+      "class": "_fc-upload"
     }, [[this.$attrs.showFileList ? [] : this.makeFiles(), this.makeUpload()], createVNode(resolveComponent("ElDialog"), {
       "appendToBody": true,
       "modal": this.previewMask,
@@ -1747,14 +1762,14 @@ function $FormCreate(FormCreate) {
       modelValue: Object,
       api: Object
     },
-    emits: ['update:api', 'update:modelValue', 'mounted', 'submit', 'change', 'emit-event', 'control', 'remove-rule', 'remove-field', 'sync'],
+    emits: ['update:api', 'update:modelValue', 'mounted', 'submit', 'change', 'emit-event', 'control', 'remove-rule', 'remove-field', 'sync', 'reload', 'repeat-field', 'update'],
     render: function render() {
       return this.fc.render();
     },
     setup: function setup(props) {
       var vm = getCurrentInstance();
       provide('parentFC', vm);
-      var parent = inject('parentFC');
+      var parent = inject('parentFC', null);
 
       var _toRefs = toRefs(props),
           rule = _toRefs.rule,
@@ -1949,14 +1964,18 @@ function deepExtend(origin) {
         }
 
         origin[key] = deepExtend(origin[key], clone, mode);
-      } else if (is.Undef(clone)) {
-        $set(origin, key, clone);
-      } else if (clone.__json !== undefined) {
-        $set(origin, key, clone.__json);
-      } else if (clone.__origin !== undefined) {
-        $set(origin, key, clone.__origin);
       } else {
         $set(origin, key, clone);
+
+        if (!is.Undef(clone)) {
+          if (clone.__json !== undefined) {
+            origin[key].__json = clone.__json;
+          }
+
+          if (clone.__origin !== undefined) {
+            origin[key].__origin = clone.__origin;
+          }
+        }
       }
     }
   }
@@ -2337,11 +2356,6 @@ function Api(h) {
   }
 
   var api = {
-    helper: {
-      tidyFields: tidyFields,
-      props: props
-    },
-
     get config() {
       return h.options;
     },
@@ -2489,6 +2503,12 @@ function Api(h) {
       });
       h.refresh();
     },
+    all: function all(origin) {
+      return Object.keys(h.ctxs).map(function (k) {
+        var ctx = h.ctxs[k];
+        return origin ? ctx.origin : ctx.rule;
+      });
+    },
     model: function model(origin) {
       return h.fields().reduce(function (initial, key) {
         var ctx = h.fieldCtx[key][0];
@@ -2674,6 +2694,15 @@ function Api(h) {
     nextRefresh: function nextRefresh(fn) {
       h.nextRefresh();
       fn && invoke(fn);
+    },
+    emit: function emit(name) {
+      var _h$vm;
+
+      for (var _len3 = arguments.length, args = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
+        args[_key3 - 1] = arguments[_key3];
+      }
+
+      (_h$vm = h.vm).emit.apply(_h$vm, [name].concat(args));
     }
   };
   ['on', 'once', 'off', 'set'].forEach(function (n) {
@@ -2819,6 +2848,7 @@ function useRender$1(Render) {
 
       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;
@@ -2854,12 +2884,13 @@ function useRender$1(Render) {
               _vn = _this4.vm.slots[slot]({
                 rule: rule,
                 prop: prop,
+                preview: preview,
                 children: children,
                 api: _this4.$handle.api,
                 model: prop.model || {}
               });
             } else {
-              _vn = ctx.parser.render(_this4.renderChildren(ctx), ctx);
+              _vn = preview ? ctx.parser.preview(children, ctx) : ctx.parser.render(children, ctx);
             }
 
             _vn = _this4.renderSides(_vn, ctx);
@@ -2928,6 +2959,7 @@ function useRender$1(Render) {
       var _this6 = this;
 
       return {
+        preview: this.options.preview || false,
         api: this.$handle.api,
         form: this.fc.create,
         subForm: function subForm(_subForm) {
@@ -3825,6 +3857,7 @@ function useLoader(Handler) {
       this.refresh();
       this.bus.$off('next-tick', this.nextReload);
       this.bus.$once('next-tick', this.nextReload);
+      this.bus.$emit('update', this.api);
     },
     //todo 组件生成全部通过 alias
     refresh: function refresh() {
@@ -3948,7 +3981,7 @@ function useInput(Handler) {
       this.vm.setupState.updateValue(_objectSpread2({}, this.form));
     },
     isChange: function isChange(ctx, value) {
-      return JSON.stringify(this.getFormData(ctx)) !== JSON.stringify(value);
+      return JSON.stringify(this.getFormData(ctx), strFn) !== JSON.stringify(value, strFn);
     },
     isQuote: function isQuote(ctx, value) {
       return (is.Object(value) || Array.isArray(value)) && value === ctx.rule.value;
@@ -3972,6 +4005,7 @@ function useInput(Handler) {
       if (this.refreshControl(ctx)) {
         this.$render.clearCacheAll();
         this.loadRule();
+        this.bus.$emit('update', this.api);
         this.refresh();
       }
 
@@ -3999,6 +4033,10 @@ function useInput(Handler) {
   });
 }
 
+function strFn(key, val) {
+  return typeof val === 'function' ? '' + val : val;
+}
+
 var BaseParser = {
   init: function init(ctx) {},
   toFormValue: function toFormValue(value, ctx) {
@@ -4011,6 +4049,9 @@ var BaseParser = {
   render: function render(children, ctx) {
     return ctx.$render.defaultRender(ctx, children);
   },
+  preview: function preview(children, ctx) {
+    return ctx.$render.defaultRender(ctx, children);
+  },
   mergeProp: function mergeProp(ctx) {}
 };
 
@@ -4136,7 +4177,12 @@ function useContext(Handler) {
                   _this.rmCtx(child.__fc__);
                 }
               });
-              is.trueArray(n) && _this.loadChildren(n, ctx);
+
+              if (is.trueArray(n)) {
+                _this.loadChildren(n, ctx);
+
+                _this.bus.$emit('update', _this.api);
+              }
             });
           }
 
@@ -4208,8 +4254,8 @@ function useContext(Handler) {
       this.$render.clearCache(ctx);
       ctx["delete"]();
       this.effect(ctx, 'deleted');
-      input && !this.fieldCtx[field] && this.vm.emit('removeField', field, ctx.rule, this.api);
-      ctx.rule.__ctrl || this.vm.emit('removeRule', ctx.rule, this.api);
+      input && !this.fieldCtx[field] && this.vm.emit('remove-field', field, ctx.rule, this.api);
+      ctx.rule.__ctrl || this.vm.emit('remove-rule', ctx.rule, this.api);
       return ctx;
     }
   });
@@ -4698,6 +4744,11 @@ function parseOpt(option) {
 
 function run(inject, rule, api) {
   var option = inject.value;
+
+  if (is.Function(option)) {
+    option = option(rule, api);
+  }
+
   option = parseOpt(option);
 
   if (!option || !option.action) {
@@ -5022,6 +5073,7 @@ function FormCreateFactory(config) {
       copyRules: copyRules,
       fetch: fetch,
       $form: $form,
+      parseFn: parseFn,
       parseJson: parseJson,
       toJson: toJson
     });
@@ -5430,40 +5482,35 @@ var manager = {
     var form = this.options.form;
     var children = [(titleProp.title || '') + (form.labelSuffix || form['label-suffix'] || '')];
 
-    var titleFn = function titleFn() {
-      return _this4.$r(mergeProps([titleProp, {
-        props: titleProp,
-        key: "".concat(uni, "tit"),
-        type: titleProp.type || 'span'
-      }]), children);
-    };
-
-    if (!isFalse(infoProp.show) && (infoProp.info || infoProp["native"])) {
-      if (infoProp.icon !== false) {
-        children[infoProp.align !== 'left' ? 'unshift' : 'push'](this.$r({
-          type: 'i',
-          "class": infoProp.icon === true ? 'el-icon-warning' : infoProp.icon,
-          key: "".concat(uni, "i")
-        }, {}, true));
-      }
-
+    if (!isFalse(infoProp.show) && (infoProp.info || infoProp["native"]) && !isFalse(infoProp.icon)) {
       var prop = {
         type: infoProp.type || 'popover',
         props: _objectSpread2({}, infoProp),
         key: "".concat(uni, "pop")
       };
+      delete prop.props.icon;
+      delete prop.props.show;
+      delete prop.props.info;
       var field = 'content';
 
       if (infoProp.info && !hasProperty(prop.props, field)) {
         prop.props[field] = infoProp.info;
       }
 
-      return this.$r(mergeProps([infoProp, prop]), _defineProperty({}, titleProp.slot || (isTip ? 'default' : 'reference'), function () {
-        return titleFn();
-      }));
+      children[infoProp.align !== 'left' ? 'unshift' : 'push'](this.$r(mergeProps([infoProp, prop]), _defineProperty({}, titleProp.slot || (isTip ? 'default' : 'reference'), function () {
+        return _this4.$r({
+          type: 'i',
+          "class": infoProp.icon === true ? 'el-icon-warning' : infoProp.icon,
+          key: "".concat(uni, "i")
+        }, {}, true);
+      })));
     }
 
-    return titleFn();
+    return this.$r(mergeProps([titleProp, {
+      props: titleProp,
+      key: "".concat(uni, "tit"),
+      type: titleProp.type || 'span'
+    }]), children);
   },
   makeCol: function makeCol(rule, uni, children) {
     var col = rule.col;
@@ -5821,7 +5868,7 @@ function appUse(app) {
 function elmFormCreate() {
   return FormCreateFactory({
     ui: 'element-ui',
-    version: '3.0.0-alpha.2',
+    version: '3.0.0-alpha.3',
     manager: manager,
     appUse: appUse,
     extendApi: extendApi,