@form-create/element-ui 2.5.31 → 2.5.32

package/dist/form-create.js

@@ -1,5 +1,5 @@
 /*!
- * @form-create/element-ui v2.5.31
+ * @form-create/element-ui v2.5.32
  * (c) 2018-2023 xaboy
  * Github https://github.com/xaboy/form-create
  * Released under the MIT License.
@@ -312,6 +312,7 @@
           value: this.trueValue
         }
       }, {
+        "ref": "el",
         "on": {
           "input": this.onInput
         }
@@ -325,6 +326,9 @@
           "key": Type + index + '-' + opt.value
         }]));
       }), getSlot(this.$slots)]);
+    },
+    mounted: function mounted() {
+      this.$emit('fc.el', this.$refs.el);
     }
   };
 
@@ -866,7 +870,9 @@
     render: function render() {
       var _this2 = this;
       var h = arguments[0];
-      return h("ElRadioGroup", helper([{}, this.formCreateInject.prop, {}, {
+      return h("ElRadioGroup", helper([{}, this.formCreateInject.prop, {
+        "ref": "el"
+      }, {
         "props": {
           value: this.trueValue
         }
@@ -884,6 +890,9 @@
           "key": Type + index + '-' + opt.value
         }]));
       }), getSlot(this.$slots)]);
+    },
+    mounted: function mounted() {
+      this.$emit('fc.el', this.$refs.el);
     }
   };
 
@@ -939,7 +948,9 @@
     },
     render: function render(h, ctx) {
       var options = ctx.props.formCreateInject.options;
-      return h("ElSelect", helper([{}, ctx.data]), [(Array.isArray(options) ? options : []).map(function (props, index) {
+      return h("ElSelect", helper([{}, ctx.data, {
+        "ref": "el"
+      }]), [(Array.isArray(options) ? options : []).map(function (props, index) {
         var slot = props.slot;
         return h("ElOption", helper([{}, {
           "props": props
@@ -949,6 +960,9 @@
           "slot": props.slotName || 'default'
         }, [is.Function(slot) ? props.slot(h) : slot]) : null]);
       }), ctx.children]);
+    },
+    mounted: function mounted() {
+      this.$emit('fc.el', this.$refs.el);
     }
   };
 
@@ -1026,6 +1040,7 @@
     },
     mounted: function mounted() {
       this.setValue();
+      this.$emit('fc.el', this.$refs.tree);
     }
   };
 
@@ -1207,12 +1222,12 @@
       makeUpload: function makeUpload() {
         var h = this.$createElement;
         var isShow = !this.limit || this.limit > this.uploadList.length;
-        return h("ElUpload", helper([{}, this.formCreateInject.prop, {
-          "ref": "upload",
-          "style": {
+        return h("ElUpload", helper([{}, this.formCreateInject.prop, {}, {
+          style: {
             display: 'inline-block'
           },
-          "key": this.key('upload')
+          key: this.key('upload'),
+          ref: 'upload'
         }]), [isShow ? h("template", {
           "slot": "default"
         }, [this.$slots["default"] || h("div", {
@@ -1275,6 +1290,7 @@
       }, {
         deep: true
       });
+      this.$emit('fc.el', this.$refs.upload);
     }
   };
 
@@ -1344,6 +1360,9 @@
     return _extends$1.apply(this, arguments);
   }
 
+  var css_248z$2 = "._fc-group{\n    display: flex;\n    min-height: 42px;\n    justify-content: center;\n    flex-direction: column;\n}\n\n._fc-group-disabled ._fc-group-btn, ._fc-group-disabled ._fc-group-add{\n    cursor: not-allowed;\n}\n\n._fc-group-handle {\n    display: flex;\n    flex-direction: row;\n    position: absolute;\n    bottom: -15px;\n    right: 30px;\n    border-radius: 15px;\n    border: 1px dashed #d9d9d9;\n    padding: 3px 8px;\n    background-color: #ffffff;\n}\n\n._fc-group-btn{\n    cursor: pointer;\n}\n\n._fc-group-idx {\n    position: absolute;\n    bottom: -15px;\n    left: 10px;\n    width: 30px;\n    height: 30px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: #eee;\n    border-radius: 15px;\n    font-weight: 700;\n}\n\n._fc-group-handle ._fc-group-btn + ._fc-group-btn {\n    margin-left: 7px;\n}\n\n._fc-group-container{\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    border: 1px dashed #d9d9d9;\n    padding: 20px;\n    margin: 5px;\n    border-radius: 5px;\n    margin-bottom: 25px;\n    padding-bottom: 25px;\n}\n\n._fc-group-arrow {\n    position: relative;\n    width: 20px;\n    height: 20px;\n}\n\n._fc-group-arrow::before {\n    content: \"\";\n    position: absolute;\n    top: 8px;\n    left: 5px;\n    width: 9px;\n    height: 9px;\n    border-left: 2px solid #999;\n    border-top: 2px solid #999;\n}\n._fc-group-arrow::before {\n    transform: rotate(45deg);\n}\n\n._fc-group-arrow._fc-group-down {\n    transform: rotate(180deg);\n}\n\n._fc-group-plus-minus {\n    width: 20px;\n    height: 20px;\n    position: relative;\n    cursor: pointer;\n}\n\n._fc-group-plus-minus::before,\n._fc-group-plus-minus::after {\n    content: \"\";\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 60%;\n    height: 2px;\n    background-color: #409eff;\n    transform: translate(-50%, -50%);\n}\n\n._fc-group-plus-minus::before {\n    transform: translate(-50%, -50%) rotate(90deg);\n}\n\n._fc-group-plus-minus._fc-group-minus::before {\n    display: none;\n}\n._fc-group-plus-minus._fc-group-minus::after {\n    background-color: #f56c6c;\n}\n\n\n._fc-group-add{\n    cursor: pointer;\n    width: 25px;\n    height: 25px;\n    border: 1px solid rgb(64 158 255 / 50%);\n    border-radius: 15px;\n}\n\n._fc-group-add._fc-group-plus-minus::before, ._fc-group-add._fc-group-plus-minus::after {\n    width: 50%;\n}\n\n";
+  styleInject(css_248z$2);
+
   var NAME$6 = 'fcGroup';
   var Group = {
     name: NAME$6,
@@ -1375,6 +1394,10 @@
           return [];
         }
       },
+      sortBtn: {
+        type: Boolean,
+        "default": true
+      },
       defaultValue: Object,
       disabled: {
         type: Boolean,
@@ -1384,10 +1407,6 @@
         type: Boolean,
         "default": true
       },
-      fontSize: {
-        type: Number,
-        "default": 28
-      },
       onBeforeRemove: {
         type: Function,
         "default": function _default() {}
@@ -1395,13 +1414,15 @@
       onBeforeAdd: {
         type: Function,
         "default": function _default() {}
-      }
+      },
+      parse: Function
     },
     data: function data() {
       return {
         len: 0,
         cacheRule: {},
         cacheValue: {},
+        sort: [],
         type: undefined
       };
     },
@@ -1417,6 +1438,12 @@
       }
     },
     watch: {
+      cacheRule: {
+        handler: function handler(n) {
+          this.sort = Object.keys(n);
+        },
+        immediate: true
+      },
       formRule: {
         handler: function handler(n, o) {
           var _this = this;
@@ -1455,10 +1482,10 @@
           this.expandRule(d);
         }
       },
-      value: function value(n) {
+      value: function value(n, o) {
         var _this2 = this;
         n = n || [];
-        var keys = Object.keys(this.cacheRule),
+        var keys = this.sort,
             total = keys.length,
             len = total - n.length;
         if (len < 0) {
@@ -1477,6 +1504,9 @@
           n.forEach(function (val, i) {
             _this2.setValue(keys[i], n[i]);
           });
+          if (o.length && !n.length) {
+            this.input([]);
+          }
         }
       }
     },
@@ -1494,7 +1524,7 @@
       formData: function formData(key, _formData) {
         var _this3 = this;
         var cacheRule = this.cacheRule;
-        var keys = Object.keys(cacheRule);
+        var keys = this.sort;
         if (keys.filter(function (k) {
           return cacheRule[k].$f;
         }).length !== keys.length) {
@@ -1532,6 +1562,11 @@
           var defVal = deepCopy(this.defaultValue);
           extend(options.formData, this.field ? _defineProperty({}, this.field, defVal) : defVal);
         }
+        this.parse && this.parse({
+          rule: rule,
+          options: options,
+          index: this.sort.length
+        });
         this.$set(this.cacheRule, ++this.len, {
           rule: rule,
           options: options
@@ -1545,7 +1580,6 @@
       add$f: function add$f(i, key, $f) {
         var _this5 = this;
         this.cacheRule[key].$f = $f;
-        this.formData(key, $f.formData());
         this.$nextTick(function () {
           if (_this5.syncDisabled) {
             $f.disabled(_this5.disabled);
@@ -1575,15 +1609,14 @@
           return;
         }
         this.removeRule(key, true);
-        this.value.splice(index, 1);
-        this.input(this.value);
+        var value = _toConsumableArray(this.value);
+        value.splice(index, 1);
+        this.input(value);
       },
       addIcon: function addIcon(key) {
         var h = this.$createElement;
-        return h("i", {
-          "key": "a".concat(key),
-          "class": "el-icon-circle-plus-outline",
-          "style": "font-size:".concat(this.fontSize, "px;cursor:").concat(this.disabled ? 'not-allowed;color:#c9cdd4' : 'pointer', ";"),
+        return h("div", {
+          "class": "_fc-group-btn _fc-group-plus-minus",
           "on": {
             "click": this.add
           }
@@ -1592,10 +1625,8 @@
       delIcon: function delIcon(index, key) {
         var _this7 = this;
         var h = this.$createElement;
-        return h("i", {
-          "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', ";"),
+        return h("div", {
+          "class": "_fc-group-btn _fc-group-plus-minus _fc-group-minus",
           "on": {
             "click": function click() {
               return _this7.del(index, key);
@@ -1603,8 +1634,38 @@
           }
         });
       },
-      makeIcon: function makeIcon(total, index, key) {
+      sortUpIcon: function sortUpIcon(index) {
         var _this8 = this;
+        var h = this.$createElement;
+        return h("div", {
+          "class": "_fc-group-btn _fc-group-arrow _fc-group-up",
+          "on": {
+            "click": function click() {
+              return _this8.changeSort(index, -1);
+            }
+          }
+        });
+      },
+      sortDownIcon: function sortDownIcon(index) {
+        var _this9 = this;
+        var h = this.$createElement;
+        return h("div", {
+          "class": "_fc-group-btn _fc-group-arrow _fc-group-down",
+          "on": {
+            "click": function click() {
+              return _this9.changeSort(index, 1);
+            }
+          }
+        });
+      },
+      changeSort: function changeSort(index, sort) {
+        var a = this.sort[index];
+        this.$set(this.sort, index, this.sort[index + sort]);
+        this.sort[index + sort] = a;
+        this.formData(0);
+      },
+      makeIcon: function makeIcon(total, index, key) {
+        var _this10 = this;
         if (this.$scopedSlots.button) {
           return this.$scopedSlots.button({
             total: total,
@@ -1612,17 +1673,25 @@
             vm: this,
             key: key,
             del: function del() {
-              return _this8.del(index, key);
+              return _this10.del(index, key);
             },
             add: this.add
           });
         }
-        if (index === 0) {
-          return [this.max !== 0 && total >= this.max ? null : this.addIcon(key), this.min === 0 || total > this.min ? this.delIcon(index, key) : null];
+        var btn = [];
+        if ((!this.max || total < this.max) && total === index + 1) {
+          btn.push(this.addIcon(key));
         }
         if (total > this.min) {
-          return this.delIcon(index, key);
+          btn.push(this.delIcon(index, key));
+        }
+        if (this.sortBtn && index) {
+          btn.push(this.sortUpIcon(index));
+        }
+        if (this.sortBtn && index !== total - 1) {
+          btn.push(this.sortDownIcon(index));
         }
+        return btn;
       },
       emitEvent: function emitEvent(name, args, index, key) {
         this.$emit.apply(this, [name].concat(_toConsumableArray(args), [this.cacheRule[key].$f, index]));
@@ -1644,71 +1713,64 @@
       }
     },
     render: function render() {
-      var _this9 = this;
+      var _this11 = this;
       var h = arguments[0];
-      var keys = Object.keys(this.cacheRule);
+      var keys = this.sort;
       var button = this.button;
       var Type = this.type;
-      return keys.length === 0 ? this.$scopedSlots["default"] ? this.$scopedSlots["default"]({
+      var disabled = this.disabled;
+      var children = keys.length === 0 ? this.$scopedSlots["default"] ? this.$scopedSlots["default"]({
         vm: this,
         add: this.add
-      }) : h("i", {
+      }) : h("div", {
         "key": 'a_def',
-        "class": "el-icon-circle-plus-outline",
-        "style": "font-size:".concat(this.fontSize, "px;vertical-align:middle;color:").concat(this.disabled ? '#c9cdd4;cursor: not-allowed' : '#606266;cursor:pointer', ";"),
+        "class": "_fc-group-plus-minus _fc-group-add",
         "on": {
           "click": this.add
         }
-      }) : h("div", {
-        "key": 'con'
-      }, [keys.map(function (key, index) {
-        var _this9$cacheRule$key = _this9.cacheRule[key],
-            rule = _this9$cacheRule$key.rule,
-            options = _this9$cacheRule$key.options;
-        return h("ElRow", {
-          "attrs": {
-            "align": "middle",
-            "type": "flex"
-          },
-          "key": key,
-          "style": "border-bottom:1px dashed #DCDFE6;margin-bottom:10px;"
-        }, [h("ElCol", {
-          "attrs": {
-            "span": button ? 20 : 24
-          }
+      }) : keys.map(function (key, index) {
+        var _this11$cacheRule$key = _this11.cacheRule[key],
+            rule = _this11$cacheRule$key.rule,
+            options = _this11$cacheRule$key.options;
+        var btn = button && !disabled ? _this11.makeIcon(keys.length, index, key) : [];
+        return h("div", {
+          "class": "_fc-group-container",
+          "key": key
         }, [h(Type, helper([{
           "key": key
         }, {
           "on": {
             'update:value': function updateValue(formData) {
-              return _this9.formData(key, formData);
+              return _this11.formData(key, formData);
             },
             'emit-event': function emitEvent(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 _this11.emitEvent(name, args, index, key);
             },
             input: function input($f) {
-              return _this9.add$f(index, key, $f);
+              return _this11.add$f(index, key, $f);
             }
           }
         }, {}, {
           "props": {
-            value: _this9.field ? _defineProperty({}, _this9.field, _this9._value(_this9.value[index])) : _this9.value[index],
+            inFor: true,
+            value: _this11.field ? _defineProperty({}, _this11.field, _this11._value(_this11.value[index])) : _this11.value[index],
             rule: rule,
             option: options,
-            extendOption: true,
-            inFor: true
+            extendOption: true
           }
-        }]))]), button ? h("ElCol", helper([{}, {
-          "props": {
-            span: 2,
-            pull: 1,
-            push: 1
-          }
-        }]), [_this9.makeIcon(keys.length, index, key)]) : null]);
-      })]);
+        }])), h("div", {
+          "class": "_fc-group-idx"
+        }, [index + 1]), btn.length ? h("div", {
+          "class": "_fc-group-handle"
+        }, [btn]) : null]);
+      });
+      return h("div", {
+        "key": 'con',
+        "class": '_fc-group ' + (disabled ? '_fc-group-disabled' : '')
+      }, [children]);
     }
   };
 
@@ -2614,7 +2676,7 @@
       },
       el: function el(id) {
         var ctx = h.getCtx(id);
-        if (ctx) return ctx.el || h.vm.$refs[ctx.ref];
+        if (ctx) return ctx.exportEl || ctx.el || h.vm.$refs[ctx.ref];
       },
       closeModal: function closeModal(id) {
         var el = api.el(id);
@@ -3068,6 +3130,12 @@
             },
             'fc.sub-form': function fcSubForm(subForm) {
               _this8.$handle.addSubForm(ctx, subForm);
+            },
+            'fc.el': function fcEl(el) {
+              ctx.exportEl = el;
+              if (el) {
+                (el.$el || el).__rule__ = ctx.rule;
+              }
             }
           }
         }];
@@ -3389,6 +3457,7 @@
       payload: {},
       input: !!rule.field,
       el: undefined,
+      exportEl: undefined,
       defaultValue: rule.field ? deepCopy(defaultValue) : undefined,
       field: rule.field || undefined
     });
@@ -4783,6 +4852,15 @@
             };
             if (is.Function(option.parse)) {
               fn = option.parse;
+            } else if (option.parse && is.String(option.parse)) {
+              fn = function fn(v) {
+                option.parse.split('.').forEach(function (k) {
+                  if (v) {
+                    v = v[k];
+                  }
+                });
+                return v;
+              };
             }
             set(fn(body, rule, api));
             api.sync(rule);
@@ -5775,8 +5853,8 @@
     return maker;
   }
 
-  var css_248z$2 = ".form-create .form-create .el-form-item {\n    margin-bottom: 22px;\n}\n\n.form-create .form-create .el-form-item .el-form-item {\n    margin-bottom: 0px;\n}\n";
-  styleInject(css_248z$2);
+  var css_248z$3 = ".form-create .form-create .el-form-item {\n    margin-bottom: 22px;\n}\n\n.form-create .form-create .el-form-item .el-form-item {\n    margin-bottom: 0px;\n}\n";
+  styleInject(css_248z$3);
 
   function tidyBtnProp(btn, def) {
     if (is.Boolean(btn)) btn = {
@@ -5788,6 +5866,14 @@
   }
   function extendApi(api, h) {
     extend(api, {
+      formEl: function formEl() {
+        return h.$manager.form();
+      },
+      wrapEl: function wrapEl(id) {
+        var ctx = h.getFieldCtx(id);
+        if (!ctx) return;
+        return h.vm.$refs[ctx.wrapRef];
+      },
       validate: function validate(callback) {
         return new Promise(function (resolve, reject) {
           var forms = api.children;
@@ -5950,7 +6036,7 @@
   function elmFormCreate() {
     return FormCreateFactory({
       ui: "".concat("element-ui"),
-      version: "".concat("2.5.31"),
+      version: "".concat("2.5.32"),
       manager: manager,
       extendApi: extendApi,
       install: install,