@form-create/view-design 2.5.31 → 2.5.33

package/dist/form-create.js

@@ -1,5 +1,5 @@
 /*!
- * @form-create/view-design v2.5.31
+ * @form-create/view-design v2.5.33
  * (c) 2018-2023 xaboy
  * Github https://github.com/xaboy/form-create
  * Released under the MIT License.
@@ -305,7 +305,9 @@
     },
     render: function render() {
       var h = arguments[0];
-      return h("CheckboxGroup", helper([{}, this.formCreateInject.prop, {}, {
+      return h("CheckboxGroup", helper([{}, this.formCreateInject.prop, {
+        "ref": "el"
+      }, {
         "props": {
           value: this.trueValue
         }
@@ -322,6 +324,9 @@
           "key": '' + index + '-' + opt.value
         }]));
       }), getSlot(this.$slots)]);
+    },
+    mounted: function mounted() {
+      this.$emit('fc.el', this.$refs.el);
     }
   };
 
@@ -862,6 +867,7 @@
           value: this.trueValue
         }
       }, {
+        "ref": "el",
         "on": {
           "input": this.onInput
         }
@@ -874,6 +880,9 @@
           "key": '' + index + '-' + opt.value
         }]));
       }), getSlot(this.$slots)]);
+    },
+    mounted: function mounted() {
+      this.$emit('fc.el', this.$refs.el);
     }
   };
 
@@ -928,8 +937,7 @@
       }
     },
     render: function render(h, ctx) {
-      var options = ctx.props.formCreateInject.options;
-      return h("Select", helper([{}, ctx.data]), [(Array.isArray(options) ? options : []).map(function (props, index) {
+      var makeOption = function makeOption(props, index) {
         var slot = props.slot;
         return h("Option", helper([{}, {
           "props": props
@@ -938,7 +946,26 @@
         }]), [slot ? h("template", {
           "slot": props.slotName || 'default'
         }, [is.Function(slot) ? props.slot(h) : slot]) : null]);
+      };
+      var makeOptionGroup = function makeOptionGroup(props, index) {
+        return h("OptionGroup", {
+          "attrs": {
+            "label": props.label
+          },
+          "key": '' + index + '-' + props.label
+        }, [is.trueArray(props.options) && props.options.map(function (v, index) {
+          return makeOption(v, index);
+        })]);
+      };
+      var options = ctx.props.formCreateInject.options;
+      return h("Select", helper([{}, ctx.data, {
+        "ref": "el"
+      }]), [(Array.isArray(options) ? options : []).map(function (props, index) {
+        return hasProperty(props || '', 'options') ? makeOptionGroup(props, index) : makeOption(props, index);
       }), ctx.children]);
+    },
+    mounted: function mounted() {
+      this.$emit('fc.el', this.$refs.el);
     }
   };
 
@@ -1007,6 +1034,9 @@
       }, {
         "on": on
       }]), [getSlot(this.$slots)]);
+    },
+    mounted: function mounted() {
+      this.$emit('fc.el', this.$refs.tree);
     }
   };
 
@@ -1184,12 +1214,12 @@
         makeUpload: function makeUpload() {
           var h = this.$createElement;
           var isShow = !this.maxLength || this.maxLength > this.uploadList.length;
-          return h("Upload", helper([{}, this.formCreateInject.prop, {
-            "ref": "upload",
-            "style": {
+          return h("Upload", 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", {
@@ -1255,6 +1285,7 @@
         }, {
           deep: true
         });
+        this.$emit('fc.el', this.$refs.upload);
       }
     };
   }
@@ -1334,390 +1365,416 @@
     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';
-  function createGroup(config) {
-    return {
-      name: NAME$6,
-      props: {
-        field: String,
-        rule: [Array, Object],
-        rules: Array,
-        expand: Number,
-        options: Object,
-        formCreateInject: {
-          type: Object,
-          required: true
-        },
-        button: {
-          type: Boolean,
-          "default": true
-        },
-        max: {
-          type: Number,
-          "default": 0
-        },
-        min: {
-          type: Number,
-          "default": 0
-        },
-        value: {
-          type: Array,
-          "default": function _default() {
-            return [];
-          }
-        },
-        defaultValue: Object,
-        disabled: {
-          type: Boolean,
-          "default": false
-        },
-        syncDisabled: {
-          type: Boolean,
-          "default": true
-        },
-        fontSize: {
-          type: Number,
-          "default": 28
-        },
-        onBeforeRemove: {
-          type: Function,
-          "default": function _default() {}
-        },
-        onBeforeAdd: {
-          type: Function,
-          "default": function _default() {}
-        }
+  var Group = {
+    name: NAME$6,
+    props: {
+      field: String,
+      rule: [Array, Object],
+      rules: Array,
+      expand: Number,
+      options: Object,
+      formCreateInject: {
+        type: Object,
+        required: true
       },
-      data: function data() {
-        return {
-          len: 0,
-          cacheRule: {},
-          cacheValue: {},
-          type: undefined
-        };
+      button: {
+        type: Boolean,
+        "default": true
       },
-      computed: {
-        formRule: function formRule() {
-          if (this.rules) {
-            return this.rules;
-          }
-          if (this.rule) {
-            return Array.isArray(this.rule) ? this.rule : [this.rule];
-          }
+      max: {
+        type: Number,
+        "default": 0
+      },
+      min: {
+        type: Number,
+        "default": 0
+      },
+      value: {
+        type: Array,
+        "default": function _default() {
           return [];
         }
       },
-      watch: {
-        formRule: {
-          handler: function handler(n, o) {
-            var _this = this;
-            Object.keys(this.cacheRule).forEach(function (v) {
-              var item = _this.cacheRule[v];
-              if (item.$f) {
-                var val = item.$f.formData();
-                if (n === o) {
-                  item.$f.deferSyncValue(function () {
-                    deepExtend(item.rule, n);
-                    item.$f.setValue(val);
-                  }, true);
-                } 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;
-            Object.keys(lst).forEach(function (k) {
-              lst[k].$f.disabled(n);
-            });
-          }
-        },
-        expand: function expand(n) {
-          var d = n - this.value.length;
-          if (d > 0) {
-            this.expandRule(d);
-          }
+      sortBtn: {
+        type: Boolean,
+        "default": true
+      },
+      defaultValue: Object,
+      disabled: {
+        type: Boolean,
+        "default": false
+      },
+      syncDisabled: {
+        type: Boolean,
+        "default": true
+      },
+      onBeforeRemove: {
+        type: Function,
+        "default": function _default() {}
+      },
+      onBeforeAdd: {
+        type: Function,
+        "default": function _default() {}
+      },
+      parse: Function
+    },
+    data: function data() {
+      return {
+        len: 0,
+        cacheRule: {},
+        cacheValue: {},
+        sort: [],
+        type: undefined
+      };
+    },
+    computed: {
+      formRule: function formRule() {
+        if (this.rules) {
+          return this.rules;
+        }
+        if (this.rule) {
+          return Array.isArray(this.rule) ? this.rule : [this.rule];
+        }
+        return [];
+      }
+    },
+    watch: {
+      cacheRule: {
+        handler: function handler(n) {
+          this.sort = Object.keys(n);
         },
-        value: function value(n) {
-          var _this2 = this;
-          n = n || [];
-          var keys = Object.keys(this.cacheRule),
-              total = keys.length,
-              len = total - n.length;
-          if (len < 0) {
-            for (var i = len; i < 0; i++) {
-              this.addRule(n.length + i);
-            }
-            for (var _i = 0; _i < total; _i++) {
-              this.setValue(keys[_i], n[_i]);
-            }
-          } else {
-            if (len > 0) {
-              for (var _i2 = 0; _i2 < len; _i2++) {
-                this.removeRule(keys[total - _i2 - 1]);
+        immediate: true
+      },
+      formRule: {
+        handler: function handler(n, o) {
+          var _this = this;
+          Object.keys(this.cacheRule).forEach(function (v) {
+            var item = _this.cacheRule[v];
+            if (item.$f) {
+              var val = item.$f.formData();
+              if (n === o) {
+                item.$f.deferSyncValue(function () {
+                  deepExtend(item.rule, n);
+                  item.$f.setValue(val);
+                }, true);
+              } else {
+                var _val = item.$f.formData();
+                item.$f.once('reloading', function () {
+                  item.$f.setValue(_val);
+                });
+                item.rule = deepCopy(n);
               }
             }
-            n.forEach(function (val, i) {
-              _this2.setValue(keys[i], n[i]);
-            });
-          }
-        }
-      },
-      methods: {
-        _value: function _value(v) {
-          return v && hasProperty(v, this.field) ? v[this.field] : v;
-        },
-        cache: function cache(k, val) {
-          this.cacheValue[k] = JSON.stringify(val);
-        },
-        input: function input(value) {
-          this.$emit('input', value);
-          this.$emit('change', value);
-        },
-        formData: function formData(key, _formData) {
-          var _this3 = this;
-          var cacheRule = this.cacheRule;
-          var keys = Object.keys(cacheRule);
-          if (keys.filter(function (k) {
-            return cacheRule[k].$f;
-          }).length !== keys.length) {
-            return;
-          }
-          var value = keys.map(function (k) {
-            var data = key === k ? _formData : _objectSpread2({}, _this3.cacheRule[k].$f.form);
-            var value = _this3.field ? data[_this3.field] || null : data;
-            _this3.cache(k, value);
-            return value;
           });
-          this.input(value);
         },
-        setValue: function setValue(key, value) {
-          var field = this.field,
-              $f = this.cacheRule[key].$f;
-          if (field) {
-            value = _defineProperty({}, field, this._value(value));
+        deep: true
+      },
+      disabled: function disabled(n) {
+        if (this.syncDisabled) {
+          var lst = this.cacheRule;
+          Object.keys(lst).forEach(function (k) {
+            lst[k].$f.disabled(n);
+          });
+        }
+      },
+      expand: function expand(n) {
+        var d = n - this.value.length;
+        if (d > 0) {
+          this.expandRule(d);
+        }
+      },
+      value: function value(n, o) {
+        var _this2 = this;
+        n = n || [];
+        var keys = this.sort,
+            total = keys.length,
+            len = total - n.length;
+        if (len < 0) {
+          for (var i = len; i < 0; i++) {
+            this.addRule(n.length + i);
           }
-          if (this.cacheValue[key] === JSON.stringify(field ? value[field] : value)) {
-            return;
+          for (var _i = 0; _i < total; _i++) {
+            this.setValue(keys[_i], n[_i]);
           }
-          this.cache(key, value);
-          $f.coverValue(value || {});
-        },
-        addRule: function addRule(i, emit) {
-          var _this4 = this;
-          var rule = this.formCreateInject.form.copyRules(this.formRule);
-          var options = this.options ? _objectSpread2({}, this.options) : {
-            submitBtn: false,
-            resetBtn: false
-          };
-          if (this.defaultValue) {
-            if (!options.formData) options.formData = {};
-            var defVal = deepCopy(this.defaultValue);
-            extend(options.formData, this.field ? _defineProperty({}, this.field, defVal) : defVal);
+        } else {
+          if (len > 0) {
+            for (var _i2 = 0; _i2 < len; _i2++) {
+              this.removeRule(keys[total - _i2 - 1]);
+            }
           }
-          this.$set(this.cacheRule, ++this.len, {
-            rule: rule,
-            options: options
+          n.forEach(function (val, i) {
+            _this2.setValue(keys[i], n[i]);
           });
-          if (emit) {
-            this.$nextTick(function () {
-              return _this4.$emit('add', rule, Object.keys(_this4.cacheRule).length - 1);
-            });
+        }
+      }
+    },
+    methods: {
+      _value: function _value(v) {
+        return v && hasProperty(v, this.field) ? v[this.field] : v;
+      },
+      cache: function cache(k, val) {
+        this.cacheValue[k] = JSON.stringify(val);
+      },
+      input: function input(value) {
+        this.$emit('input', value);
+        this.$emit('change', value);
+      },
+      formData: function formData(key, _formData) {
+        var _this3 = this;
+        var cacheRule = this.cacheRule;
+        var keys = this.sort;
+        if (keys.filter(function (k) {
+          return cacheRule[k].$f;
+        }).length !== keys.length) {
+          return;
+        }
+        var value = keys.map(function (k) {
+          var data = key === k ? _formData : _objectSpread2({}, _this3.cacheRule[k].$f.form);
+          var value = _this3.field ? data[_this3.field] || null : data;
+          _this3.cache(k, value);
+          return value;
+        });
+        this.input(value);
+      },
+      setValue: function setValue(key, value) {
+        var field = this.field,
+            $f = this.cacheRule[key].$f;
+        if (field) {
+          value = _defineProperty({}, field, this._value(value));
+        }
+        if (this.cacheValue[key] === JSON.stringify(field ? value[field] : value)) {
+          return;
+        }
+        this.cache(key, value);
+        $f && $f.coverValue(value || {});
+      },
+      addRule: function addRule(i, emit) {
+        var _this4 = this;
+        var rule = this.formCreateInject.form.copyRules(this.formRule);
+        var options = this.options ? _objectSpread2({}, this.options) : {
+          submitBtn: false,
+          resetBtn: false
+        };
+        if (this.defaultValue) {
+          if (!options.formData) options.formData = {};
+          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
+        });
+        if (emit) {
+          this.$nextTick(function () {
+            return _this4.$emit('add', rule, Object.keys(_this4.cacheRule).length - 1);
+          });
+        }
+      },
+      add$f: function add$f(i, key, $f) {
+        var _this5 = this;
+        this.cacheRule[key].$f = $f;
+        this.$nextTick(function () {
+          if (_this5.syncDisabled) {
+            $f.disabled(_this5.disabled);
           }
-        },
-        add$f: function add$f(i, key, $f) {
-          var _this5 = this;
-          this.cacheRule[key].$f = $f;
-          this.formData(key, $f.formData());
+          _this5.$emit('itemMounted', $f, Object.keys(_this5.cacheRule).indexOf(key));
+        });
+      },
+      removeRule: function removeRule(key, emit) {
+        var _this6 = this;
+        var index = Object.keys(this.cacheRule).indexOf(key);
+        this.$delete(this.cacheRule, key);
+        this.$delete(this.cacheValue, key);
+        if (emit) {
           this.$nextTick(function () {
-            if (_this5.syncDisabled) {
-              $f.disabled(_this5.disabled);
-            }
-            _this5.$emit('itemMounted', $f, Object.keys(_this5.cacheRule).indexOf(key));
+            return _this6.$emit('remove', index);
           });
-        },
-        removeRule: function removeRule(key, emit) {
-          var _this6 = this;
-          var index = Object.keys(this.cacheRule).indexOf(key);
-          this.$delete(this.cacheRule, key);
-          this.$delete(this.cacheValue, key);
-          if (emit) {
-            this.$nextTick(function () {
-              return _this6.$emit('remove', index);
-            });
+        }
+      },
+      add: function add(i) {
+        if (this.disabled || false === this.onBeforeAdd(this.value)) {
+          return;
+        }
+        this.addRule(i, true);
+      },
+      del: function del(index, key) {
+        if (this.disabled || false === this.onBeforeRemove(this.value, index)) {
+          return;
+        }
+        this.removeRule(key, true);
+        var value = _toConsumableArray(this.value);
+        value.splice(index, 1);
+        this.input(value);
+      },
+      addIcon: function addIcon(key) {
+        var h = this.$createElement;
+        return h("div", {
+          "class": "_fc-group-btn _fc-group-plus-minus",
+          "on": {
+            "click": this.add
           }
-        },
-        add: function add(i) {
-          if (this.disabled || false === this.onBeforeAdd(this.value)) {
-            return;
+        });
+      },
+      delIcon: function delIcon(index, key) {
+        var _this7 = this;
+        var h = this.$createElement;
+        return h("div", {
+          "class": "_fc-group-btn _fc-group-plus-minus _fc-group-minus",
+          "on": {
+            "click": function click() {
+              return _this7.del(index, key);
+            }
           }
-          this.addRule(i, true);
-        },
-        del: function del(index, key) {
-          if (this.disabled || false === this.onBeforeRemove(this.value, index)) {
-            return;
+        });
+      },
+      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);
+            }
           }
-          this.removeRule(key, true);
-          this.value.splice(index, 1);
-          this.input(this.value);
-        },
-        addIcon: function addIcon(key) {
-          var h = this.$createElement;
-          return h("Icon", {
-            "key": "a".concat(key),
-            "attrs": {
-              "type": config.addIcon
-            },
-            "style": "font-size:".concat(this.fontSize, "px;cursor:").concat(this.disabled ? 'not-allowed;color:#c9cdd4' : 'pointer;color:#000'),
-            "on": {
-              "click": this.add
+        });
+      },
+      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);
             }
-          });
-        },
-        delIcon: function delIcon(index, key) {
-          var _this7 = this;
-          var h = this.$createElement;
-          return h("Icon", {
-            "key": "d".concat(key),
-            "attrs": {
-              "type": config.removeIcon
+          }
+        });
+      },
+      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,
+            index: index,
+            vm: this,
+            key: key,
+            del: function del() {
+              return _this10.del(index, key);
             },
-            "style": "font-size:".concat(this.fontSize, "px;cursor:").concat(this.disabled ? 'not-allowed;color:#c9cdd4' : 'pointer', ";"),
-            "on": {
-              "click": function click() {
-                return _this7.del(index, key);
-              }
-            }
+            add: this.add
           });
-        },
-        makeIcon: function makeIcon(total, index, key) {
-          var _this8 = this;
-          if (this.$scopedSlots.button) {
-            return this.$scopedSlots.button({
-              total: total,
-              index: index,
-              vm: this,
-              key: key,
-              del: function del() {
-                return _this8.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];
-          }
-          if (total > this.min) {
-            return this.delIcon(index, key);
-          }
-        },
-        emitEvent: function emitEvent(name, args, index, key) {
-          this.$emit.apply(this, [name].concat(_toConsumableArray(args), [this.cacheRule[key].$f, index]));
-        },
-        expandRule: function expandRule(n) {
-          for (var i = 0; i < n; i++) {
-            this.value.push(this.field ? null : {});
-          }
         }
-      },
-      created: function created() {
-        this.type = this.formCreateInject.form.$form();
-        var d = (this.expand || 0) - this.value.length;
-        if (d > 0) {
-          this.expandRule(d);
+        var btn = [];
+        if ((!this.max || total < this.max) && total === index + 1) {
+          btn.push(this.addIcon(key));
+        }
+        if (total > this.min) {
+          btn.push(this.delIcon(index, key));
         }
-        for (var i = 0; i < this.value.length; i++) {
-          this.addRule(i);
+        if (this.sortBtn && index) {
+          btn.push(this.sortUpIcon(index));
         }
+        if (this.sortBtn && index !== total - 1) {
+          btn.push(this.sortDownIcon(index));
+        }
+        return btn;
       },
-      render: function render() {
-        var _this9 = this;
-        var h = arguments[0];
-        var keys = Object.keys(this.cacheRule);
-        var button = this.button;
-        var Type = this.type;
-        return keys.length === 0 ? this.$scopedSlots["default"] ? this.$scopedSlots["default"]({
-          vm: this,
-          add: this.add
-        }) : h("Icon", {
-          "key": 'a_def',
-          "attrs": {
-            "type": config.addIcon
-          },
-          "style": "font-size:".concat(this.fontSize, "px;vertical-align:middle;cursor:").concat(this.disabled ? 'not-allowed;color:#c9cdd4' : 'pointer', ";"),
+      emitEvent: function emitEvent(name, args, index, key) {
+        this.$emit.apply(this, [name].concat(_toConsumableArray(args), [this.cacheRule[key].$f, index]));
+      },
+      expandRule: function expandRule(n) {
+        for (var i = 0; i < n; i++) {
+          this.value.push(this.field ? null : {});
+        }
+      }
+    },
+    created: function created() {
+      this.type = this.formCreateInject.form.$form();
+      var d = (this.expand || 0) - this.value.length;
+      if (d > 0) {
+        this.expandRule(d);
+      }
+      for (var i = 0; i < this.value.length; i++) {
+        this.addRule(i);
+      }
+    },
+    render: function render() {
+      var _this11 = this;
+      var h = arguments[0];
+      var keys = this.sort;
+      var button = this.button;
+      var Type = this.type;
+      var disabled = this.disabled;
+      var children = keys.length === 0 ? this.$scopedSlots["default"] ? this.$scopedSlots["default"]({
+        vm: this,
+        add: this.add
+      }) : h("div", {
+        "key": 'a_def',
+        "class": "_fc-group-plus-minus _fc-group-add",
+        "on": {
+          "click": this.add
+        }
+      }) : 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": {
-            "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("Row", {
-            "attrs": {
-              "align": "middle",
-              "type": "flex"
+            'update:value': function updateValue(formData) {
+              return _this11.formData(key, formData);
             },
-            "key": key,
-            "style": "border-bottom:1px dashed #dcdee2;margin-bottom:10px;"
-          }, [h("Col", {
-            "attrs": {
-              "span": button ? 20 : 24
-            }
-          }, [h(Type, helper([{
-            "key": key
-          }, {
-            "on": {
-              'update:value': function updateValue(formData) {
-                return _this9.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);
-              },
-              input: function input($f) {
-                return _this9.add$f(index, key, $f);
+            '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 _this11.emitEvent(name, args, index, key);
+            },
+            input: function input($f) {
+              return _this11.add$f(index, key, $f);
             }
-          }, {}, {
-            "props": {
-              value: _this9.field ? _defineProperty({}, _this9.field, _this9._value(_this9.value[index])) : _this9.value[index],
-              rule: rule,
-              option: options,
-              extendOption: true,
-              inFor: true
-            }
-          }]))]), button ? h("Col", helper([{}, {
-            "props": {
-              span: 2,
-              pull: 1,
-              push: 1
-            }
-          }]), [_this9.makeIcon(keys.length, index, key)]) : null]);
-        })]);
-      }
-    };
-  }
-
-  var group = createGroup({
-    removeIcon: 'ios-remove-circle-outline',
-    addIcon: 'ios-add-circle-outline'
-  });
-  group.v2 = createGroup({
-    addIcon: 'ios-plus-outline',
-    removeIcon: 'ios-minus-outline'
-  });
+          }
+        }, {}, {
+          "props": {
+            inFor: true,
+            value: _this11.field ? _defineProperty({}, _this11.field, _this11._value(_this11.value[index])) : _this11.value[index],
+            rule: rule,
+            option: options,
+            extendOption: true
+          }
+        }])), 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]);
+    }
+  };
 
   var NAME$7 = 'fcSubForm';
   var Sub = {
@@ -1825,7 +1882,7 @@
     }
   };
 
-  var components = [Checkbox, Radio, Select, Tree, Sub, frame, upload, group];
+  var components = [Checkbox, Radio, Select, Tree, Sub, frame, upload, Group];
 
   var NAME$8 = 'FormCreate';
   var getRuleInject = function getRuleInject(vm, parent) {
@@ -2621,7 +2678,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);
@@ -3075,6 +3132,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;
+              }
             }
           }
         }];
@@ -3396,6 +3459,7 @@
       payload: {},
       input: !!rule.field,
       el: undefined,
+      exportEl: undefined,
       defaultValue: rule.field ? deepCopy(defaultValue) : undefined,
       field: rule.field || undefined
     });
@@ -3518,7 +3582,8 @@
         vm: handle.vm,
         trueType: handle.getType(this.originType),
         vNode: handle.$render.vNode,
-        updated: false
+        updated: false,
+        cacheValue: this.rule.value
       });
       !init && this.unwatch();
       this.watchTo();
@@ -3761,6 +3826,7 @@
           ctx.root = rules;
           _this6.setCtx(ctx);
           !isCopy && !isInit && _this6.effect(ctx, 'load');
+          _this6.effect(ctx, 'created');
           ctx.parser.loadChildren === false || loadChildren(ctx.rule.children, ctx);
           if (!parent) {
             var _preIndex = preIndex(index);
@@ -4446,6 +4512,7 @@
             data.mergeProp = function (prop) {
               return mergeRule(data.getProp(), [prop]);
             };
+            data.id = ctx.id;
           }
           _this4.bus.$emit("p:".concat(attr, ":").concat(_type, ":").concat(p.input ? 1 : 0), event, [data, rule, _this4.api]);
         });
@@ -4459,9 +4526,12 @@
   }
   function getComponent(p) {
     var c = p.components;
-    if (Array.isArray(c)) return unique(c.filter(function (v) {
-      return v !== '*';
-    }));else if (is.String(c)) return [c];else return false;
+    if (Array.isArray(c)) {
+      var arr = unique(c.filter(function (v) {
+        return v !== '*';
+      }));
+      return arr.length ? arr : false;
+    } else if (is.String(c)) return [c];else return false;
   }
 
   function Handler(fc) {
@@ -4714,6 +4784,52 @@
     render: function render(children) {}
   });
 
+  var loadData = function loadData(fc) {
+    var loadData = {
+      name: 'loadData',
+      _fn: [],
+      created: function created(inject, rule, api) {
+        this.deleted(inject);
+        var attrs = toArray(inject.getValue());
+        var events = [];
+        attrs.forEach(function (attr) {
+          if (attr) {
+            var on = function on() {
+              if (attr.watch !== false) {
+                fc.bus.$off('p.loadData.' + attr.attr, on);
+                fc.bus.$once('p.loadData.' + attr.attr, on);
+              }
+              var value = undefined;
+              if (attr.attr) {
+                value = fc.loadData[attr.attr] || attr["default"];
+                if (attr.copy) {
+                  value = deepCopy(value);
+                }
+              }
+              deepSet(inject.getProp(), attr.to || 'options', value);
+              api.sync(rule);
+            };
+            events.push(function () {
+              return fc.bus.$off('p.loadData.' + attr.attr, on);
+            });
+            on();
+          }
+        });
+        this._fn[inject.id] = events;
+      },
+      deleted: function deleted(inject) {
+        if (this._fn[inject.id]) {
+          this._fn[inject.id].forEach(function (un) {
+            un();
+          });
+          delete this._fn[inject.id];
+        }
+        inject.clearProp();
+      }
+    };
+    loadData.watch = loadData.created;
+    return loadData;
+  };
   var componentValidate = {
     name: 'componentValidate',
     load: function load(attr, rule, api) {
@@ -4755,12 +4871,21 @@
     }
     function run(inject, rule, api) {
       var option = inject.value;
+      var set = function set(val) {
+        if (val === undefined) {
+          inject.clearProp();
+          api.sync(rule);
+        } else {
+          deepSet(inject.getProp(), option.to || 'options', val);
+        }
+      };
       if (is.Function(option)) {
         option = option(rule, api);
       }
       option = parseOpt(option);
       if (!option || !option.action) {
-        return false;
+        set(undefined);
+        return;
       }
       if (!option.to) {
         option.to = 'options';
@@ -4773,52 +4898,66 @@
           return true;
         }
       };
-      var set = function set(val) {
-        if (val === undefined) {
-          inject.clearProp();
+      var config = _objectSpread2(_objectSpread2({
+        headers: {}
+      }, option), {}, {
+        onSuccess: function onSuccess(body, flag) {
+          if (check()) return;
+          var fn = function fn(v) {
+            return flag ? v : v.data;
+          };
+          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);
-        } else {
-          deepSet(inject.getProp(), option.to, val);
+        },
+        onError: function onError(e) {
+          set(undefined);
+          if (check()) return;
+          (_onError || function (e) {
+            return err(e.message || 'fetch fail ' + option.action);
+          })(e, rule, api);
         }
-      };
+      });
+      fc.options.beforeFetch && invoke(function () {
+        return fc.options.beforeFetch(config, {
+          rule: rule,
+          api: api
+        });
+      });
+      if (is.Function(option.action)) {
+        option.action(rule, api).then(function (val) {
+          config.onSuccess(val, true);
+        })["catch"](function (e) {
+          config.onError(e);
+        });
+        return;
+      }
       invoke(function () {
-        return fc.create.fetch(_objectSpread2(_objectSpread2({}, option), {}, {
-          onSuccess: function onSuccess(body) {
-            if (check()) return;
-            var fn = function fn(v) {
-              return v.data;
-            };
-            if (is.Function(option.parse)) {
-              fn = option.parse;
-            }
-            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);
-          }
-        }), {
+        return fc.create.fetch(config, {
           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);
-        }
+      watch: function watch() {
+        run.apply(void 0, arguments);
       }
     };
   };
@@ -4872,6 +5011,7 @@
   }
   var $provider = {
     fetch: fetch$1,
+    loadData: loadData,
     required: $required,
     componentValidate: componentValidate
   };
@@ -4954,13 +5094,18 @@
     var globalConfig = {
       global: {}
     };
-    var data = {};
+    var loadData = {};
     var CreateNode = CreateNodeFactory();
     exportAttrs(config.attrs || {});
     function getApi(name) {
       var val = instance[name];
-      if (Array.isArray(val)) return _toConsumableArray(val);
-      return val;
+      if (Array.isArray(val)) {
+        return val.map(function (v) {
+          return v.api();
+        });
+      } else if (val) {
+        return val.api();
+      }
     }
     function directive() {
       var data = nameProp.apply(void 0, arguments);
@@ -5002,6 +5147,22 @@
       components[name] = component;
       if (component.formCreateParser) parser(name, component.formCreateParser);
     }
+    function _emitData(id) {
+      Object.keys(instance).forEach(function (v) {
+        var apis = Array.isArray(instance[v]) ? instance[v] : [instance[v]];
+        apis.forEach(function (that) {
+          that.bus.$emit('p.loadData.' + id);
+        });
+      });
+    }
+    function setData(id, data) {
+      loadData[id] = data;
+      _emitData(id);
+    }
+    function removeData(id) {
+      delete loadData[id];
+      _emitData(id);
+    }
     function $form() {
       return _vue.extend($FormCreate(FormCreate));
     }
@@ -5028,7 +5189,7 @@
           directives: directives,
           providers: providers,
           maker: maker,
-          data: data
+          loadData: loadData
         };
       } else {
         delete _config.inherit;
@@ -5044,12 +5205,13 @@
         parsers: parsers,
         providers: providers,
         rules: Array.isArray(rules) ? rules : [],
-        name: vm.$options.propsData.name,
+        name: vm.$options.propsData.name || uniqueId(),
         inFor: vm.$options.propsData.inFor,
         prop: {
           components: components,
           directives: directives
         },
+        loadData: loadData,
         CreateNode: CreateNode,
         bus: new _vue(),
         unwatch: null,
@@ -5063,9 +5225,9 @@
       if (this.name) {
         if (this.inFor) {
           if (!instance[this.name]) instance[this.name] = [];
-          instance[this.name].push(this.api());
+          instance[this.name].push(this);
         } else {
-          instance[this.name] = this.api();
+          instance[this.name] = this;
         }
       }
     }
@@ -5100,8 +5262,11 @@
           h.reloadRule([]);
           if (_this2.name) {
             if (_this2.inFor) {
-              var idx = instance[_this2.name].indexOf(_this2.api());
+              var idx = instance[_this2.name].indexOf(_this2);
               instance[_this2.name].splice(idx, 1);
+              if (!instance[_this2.name].length) {
+                delete instance[_this2.name];
+              }
             } else {
               delete instance[_this2.name];
             }
@@ -5161,7 +5326,8 @@
       extend(formCreate, {
         version: config.version,
         ui: config.ui,
-        data: data,
+        setData: setData,
+        removeData: removeData,
         maker: maker,
         component: component,
         directive: directive,
@@ -5234,7 +5400,7 @@
       inherit.directives && extend(directives, inherit.directives);
       inherit.providers && extend(providers, inherit.providers);
       inherit.maker && extend(maker, inherit.maker);
-      inherit.data && extend(data, inherit.data);
+      inherit.loadData && extend(loadData, inherit.loadData);
     }
     return create;
   }
@@ -5825,8 +5991,8 @@
   useFrame(maker);
   useTimePicker(maker);
 
-  var css_248z$2 = ".form-create .form-create .ivu-form-item {\n    margin-bottom: 24px;\n}\n\n.form-create .form-create .ivu-form-item .ivu-form-item {\n    margin-bottom: 0px;\n}\n";
-  styleInject(css_248z$2);
+  var css_248z$3 = ".form-create .form-create .ivu-form-item {\n    margin-bottom: 24px;\n}\n\n.form-create .form-create .ivu-form-item .ivu-form-item {\n    margin-bottom: 0px;\n}\n";
+  styleInject(css_248z$3);
 
   function tidyBtnProp(btn, def) {
     if (is.Boolean(btn)) btn = {
@@ -5838,6 +6004,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;
@@ -6000,7 +6174,7 @@
   function ivuFormCreate() {
     return FormCreateFactory({
       ui: "".concat("view-design"),
-      version: "".concat("2.5.31"),
+      version: "".concat("2.5.33"),
       manager: manager,
       install: install,
       extendApi: extendApi,