@form-create/element-ui 3.2.13 → 3.2.14

package/dist/form-create.esm.js

@@ -1,10 +1,10 @@
 /*!
- * @form-create/element-ui v3.2.13
+ * @form-create/element-ui v3.2.14
  * (c) 2018-2024 xaboy
  * Github https://github.com/xaboy/form-create
  * Released under the MIT License.
  */
-import { defineComponent, toRef, ref, watch, createVNode, resolveComponent, mergeProps as mergeProps$1, openBlock, createElementBlock, createElementVNode, isVNode, nextTick, createTextVNode, markRaw, reactive, getCurrentInstance, provide, inject, toRefs, onBeforeMount, watchEffect, onMounted, onBeforeUnmount, onUpdated, computed, withDirectives, resolveDirective, createApp, h } from 'vue';
+import { defineComponent, toRef, ref, watch, computed, createVNode, resolveComponent, mergeProps as mergeProps$1, openBlock, createElementBlock, createElementVNode, isVNode, nextTick, createTextVNode, markRaw, reactive, getCurrentInstance, provide, inject, toRefs, onBeforeMount, watchEffect, onMounted, onBeforeUnmount, onUpdated, withDirectives, resolveDirective, createApp, h } from 'vue';
 
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
@@ -222,12 +222,14 @@ var Checkbox = defineComponent({
       }
     },
     type: String,
+    options: Array,
     input: Boolean,
     inputValue: String
   },
   emits: ['update:modelValue', 'fc.el'],
   setup: function setup(props, _) {
     var options = toRef(props.formCreateInject, 'options', []);
+    var opt = toRef(props, 'options');
     var value = toRef(props, 'modelValue');
     var inputValue = toRef(props, 'inputValue', '');
     var customValue = ref(inputValue.value);
@@ -258,9 +260,37 @@ var Checkbox = defineComponent({
       updateCustomValue(n);
     });
 
-    var _options = function _options() {
-      return Array.isArray(options.value) ? options.value : [];
-    };
+    var _options = computed(function () {
+      var arr = options.value || [];
+
+      if (opt.value) {
+        arr = opt.value || [];
+      }
+
+      return Array.isArray(arr) ? arr : [];
+    });
+
+    watch(value, function (n) {
+      var value = null;
+
+      if (!inputValue.value && n != null && Array.isArray(n) && n.length > 0 && input.value) {
+        var values = _options.value.map(function (item) {
+          return item.value;
+        });
+
+        n.forEach(function (val) {
+          if (values.indexOf(val) === -1) {
+            value = val;
+          }
+        });
+      }
+
+      if (value != null) {
+        customValue.value = value;
+      }
+    }, {
+      immediate: true
+    });
 
     var onInput = function onInput(n) {
       _.emit('update:modelValue', n);
@@ -304,7 +334,7 @@ var Checkbox = defineComponent({
       "ref": "el"
     }), _objectSpread2({
       "default": function _default() {
-        return [_this.options().map(function (opt, index) {
+        return [_this.options.map(function (opt, index) {
           var props = _objectSpread2({}, opt);
 
           var value = props.value;
@@ -1015,6 +1045,7 @@ var Radio = defineComponent({
       type: [String, Number, Boolean],
       "default": ''
     },
+    options: Array,
     type: String,
     input: Boolean,
     inputValue: String
@@ -1022,15 +1053,11 @@ var Radio = defineComponent({
   emits: ['update:modelValue', 'fc.el'],
   setup: function setup(props, _) {
     var options = toRef(props.formCreateInject, 'options', []);
+    var opt = toRef(props, 'options');
     var value = toRef(props, 'modelValue');
     var inputValue = toRef(props, 'inputValue', '');
     var customValue = ref(inputValue.value);
     var input = toRef(props, 'input', false);
-
-    var _options = function _options() {
-      return Array.isArray(options.value) ? options.value : [];
-    };
-
     watch(inputValue, function (n) {
       if (!input.value) {
         customValue.value = n;
@@ -1040,6 +1067,32 @@ var Radio = defineComponent({
       updateCustomValue(n);
     });
 
+    var _options = computed(function () {
+      var arr = options.value || [];
+
+      if (opt.value) {
+        arr = opt.value || [];
+      }
+
+      return Array.isArray(arr) ? arr : [];
+    });
+
+    watch(value, function (n) {
+      var flag = false;
+
+      if (!inputValue.value && n != null && input.value) {
+        flag = _options.value.map(function (item) {
+          return item.value;
+        }).indexOf(n) === -1;
+      }
+
+      if (flag) {
+        customValue.value = n;
+      }
+    }, {
+      immediate: true
+    });
+
     var onInput = function onInput(n) {
       _.emit('update:modelValue', n);
     };
@@ -1093,7 +1146,7 @@ var Radio = defineComponent({
       "ref": "el"
     }), _objectSpread2({
       "default": function _default() {
-        return [_this.options().map(function (opt, index) {
+        return [_this.options.map(function (opt, index) {
           var props = _objectSpread2({}, opt);
 
           var value = props.value;
@@ -1396,7 +1449,7 @@ var Upload = defineComponent({
       var files = fileList.map(function (v) {
         return v.is_string ? v.url : v.value || v.url;
       }).filter(function (url) {
-        return url !== undefined;
+        return url !== undefined && url.indexOf('blob:') !== 0;
       });
       this.$emit('update:modelValue', files);
     },
@@ -1437,7 +1490,7 @@ var Upload = defineComponent({
       "ref": "upload"
     }), _objectSpread2({
       "default": function _default() {
-        return [(_this$$slots$default = (_this$$slots = _this.$slots)["default"]) !== null && _this$$slots$default !== void 0 && _this$$slots$default.call(_this$$slots) || ['text', 'picture'].indexOf(_this.listType) === -1 ? createVNode(resolveComponent("ElIcon"), null, {
+        return [((_this$$slots$default = (_this$$slots = _this.$slots)["default"]) === null || _this$$slots$default === void 0 ? void 0 : _this$$slots$default.call(_this$$slots)) || (['text', 'picture'].indexOf(_this.listType) === -1 ? createVNode(resolveComponent("ElIcon"), null, {
           "default": function _default() {
             return [createVNode(script$1, null, null)];
           }
@@ -1447,7 +1500,7 @@ var Upload = defineComponent({
           "default": function _default() {
             return [createTextVNode("\u70B9\u51FB\u4E0A\u4F20")];
           }
-        })];
+        }))];
       }
     }, getSlot(this.$slots, ['default']))), createVNode(resolveComponent("ElDialog"), {
       "appendToBody": true,
@@ -2146,6 +2199,7 @@ function $FormCreate(FormCreate, components, directives) {
       },
       index: [String, Number],
       api: Object,
+      locale: [String, Object],
       name: String,
       subForm: {
         type: Boolean,
@@ -2389,7 +2443,7 @@ function $FormCreate(FormCreate, components, directives) {
 
 var normalMerge = ['props'];
 var toArrayMerge = ['class', 'style', 'directives'];
-var functionalMerge = ['on'];
+var functionalMerge = ['on', 'hook'];
 
 var mergeProps = function mergeProps(objects) {
   var initial = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -2486,15 +2540,11 @@ function lower(str) {
 
 var PREFIX = '[[FORM-CREATE-PREFIX-';
 var SUFFIX = '-FORM-CREATE-SUFFIX]]';
-var $T = '$FN:';
-var $TX = '$FNX:';
-var $ON = '$GLOBAL:';
-var FUNCTION = 'function';
 function toJson(obj, space) {
   return JSON.stringify(deepExtend(Array.isArray(obj) ? [] : {}, obj, true), function (key, val) {
     if (val && val._isVue === true) return undefined;
 
-    if (_typeof(val) !== FUNCTION) {
+    if (typeof val !== 'function') {
       return val;
     }
 
@@ -2521,11 +2571,14 @@ function parseFn(fn, mode) {
       if (v.indexOf(SUFFIX) > 0 && v.indexOf(PREFIX) === 0) {
         v = v.replace(SUFFIX, '').replace(PREFIX, '');
         flag = true;
-      } else if (v.indexOf($T) === 0) {
-        v = v.replace($T, '');
+      } else if (v.indexOf('$FN:') === 0) {
+        v = v.substring(4);
+        flag = true;
+      } else if (v.indexOf('$EXEC:') === 0) {
+        v = v.substring(6);
         flag = true;
-      } else if (v.indexOf($ON) === 0) {
-        var name = v.replace($ON, '');
+      } else if (v.indexOf('$GLOBAL:') === 0) {
+        var name = v.substring(8);
 
         v = function v() {
           for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -2544,17 +2597,19 @@ function parseFn(fn, mode) {
         v.__json = fn;
         v.__inject = true;
         return v;
-      } else if (v.indexOf($TX) === 0) {
-        v = makeFn('function($inject){' + v.replace($TX, '') + '}');
+      } else if (v.indexOf('$FNX:') === 0) {
+        v = makeFn('function($inject){' + v.substring(5) + '}');
         v.__json = fn;
         v.__inject = true;
         return v;
-      } else if (!mode && v.indexOf(FUNCTION) === 0 && v !== FUNCTION) {
+      } else if (!mode && v.indexOf('function ') === 0 && v !== 'function ') {
+        flag = true;
+      } else if (!mode && v.indexOf('function(') === 0 && v !== 'function(') {
         flag = true;
       }
 
       if (!flag) return fn;
-      var val = makeFn(v.indexOf(FUNCTION) === -1 && v.indexOf('(') !== 0 ? FUNCTION + ' ' + v : v);
+      var val = makeFn(v);
       val.__json = fn;
       return val;
     } catch (e) {
@@ -2920,7 +2975,17 @@ function fetch$1(option) {
   }
 
   var xhr = new XMLHttpRequest();
-  var action = option.action;
+  var action = option.action || '';
+
+  if (option.query) {
+    var queryString = new URLSearchParams(option.query).toString();
+
+    if (action.includes('?')) {
+      action += "&".concat(queryString);
+    } else {
+      action += "?".concat(queryString);
+    }
+  }
 
   xhr.onerror = function error(e) {
     option.onError(e);
@@ -2961,7 +3026,7 @@ function fetch$1(option) {
   });
   xhr.send(formData);
 }
-function asyncFetch(config, _fetch) {
+function asyncFetch(config, _fetch, api) {
   return new Promise(function (resolve, reject) {
     (_fetch || fetch$1)(_objectSpread2(_objectSpread2({}, config), {}, {
       onSuccess: function onSuccess(res) {
@@ -2979,7 +3044,7 @@ function asyncFetch(config, _fetch) {
           };
         }
 
-        resolve(fn(res));
+        resolve(fn(res, undefined, api));
       },
       onError: function onError(err) {
         reject(err);
@@ -3584,7 +3649,7 @@ function Api(h) {
         opt = deepCopy(opt);
         opt = h.loadFetchVar(opt);
         h.beforeFetch(opt).then(function () {
-          return asyncFetch(opt, h.fc.create.fetch).then(function (res) {
+          return asyncFetch(opt, h.fc.create.fetch, api).then(function (res) {
             invoke(function () {
               return opt.onSuccess && opt.onSuccess(res);
             });
@@ -3604,7 +3669,7 @@ function Api(h) {
 
         _opt = h.loadFetchVar(_opt, get);
         h.beforeFetch(_opt).then(function () {
-          return asyncFetch(_opt, h.fc.create.fetch).then(function (res) {
+          return asyncFetch(_opt, h.fc.create.fetch, api).then(function (res) {
             invoke(function () {
               return _opt.onSuccess && _opt.onSuccess(res);
             });
@@ -3627,6 +3692,12 @@ function Api(h) {
     refreshData: function refreshData(id) {
       return h.fc.refreshData(id);
     },
+    t: function t(id, params) {
+      return h.fc.t(id, params);
+    },
+    getLocale: function getLocale() {
+      return h.fc.getLocale();
+    },
     helper: {
       tidyFields: tidyFields,
       props: props
@@ -3957,15 +4028,19 @@ function useRender$1(Render) {
     },
     none: function none(vn) {
       if (vn) {
-        if (Array.isArray(vn.props["class"])) {
-          vn.props["class"].push('fc-none');
-        } else {
-          vn.props["class"] = vn.props["class"] ? [vn.props["class"], 'fc-none'] : 'fc-none';
-        }
-
+        vn.props["class"] = this.mergeClass(vn.props["class"], 'fc-none');
         return vn;
       }
     },
+    mergeClass: function mergeClass(target, value) {
+      if (Array.isArray(target)) {
+        target.push(value);
+      } else {
+        return target ? [target, value] : value;
+      }
+
+      return target;
+    },
     stable: function stable(vn) {
       var _this5 = this;
 
@@ -4065,6 +4140,7 @@ function useRender$1(Render) {
           callback: function callback(value) {
             _this7.onInput(ctx, value);
           },
+          modelField: field,
           value: this.$handle.getFormData(ctx)
         };
         props.push({
@@ -4083,6 +4159,7 @@ function useRender$1(Render) {
       ctx.el = this.vm.refs[ctx.ref] || el;
       ctx.parser.mounted(ctx);
       this.$handle.effect(ctx, 'mounted');
+      this.$handle.targetHook(ctx, 'mounted');
     },
     onInput: function onInput(ctx, value) {
       if (ctx.prop.modelEmit) {
@@ -4644,43 +4721,17 @@ extend(RuleContext.prototype, {
     var rule = _objectSpread2({}, this.rule);
 
     delete rule.children;
+    delete rule.validate;
     this.prop = mergeRule({}, [rule].concat(_toConsumableArray(Object.keys(this.payload).map(function (k) {
       return _this3.payload[k];
     })), [this.computed]));
+    this.prop.validate = [].concat(_toConsumableArray(this.refRule.__$validate.value || []), _toConsumableArray(this.prop.validate || []));
   },
   initNone: function initNone() {
     this.none = !(is.Undef(this.prop.display) || !!this.prop.display);
   },
   injectValidate: function injectValidate() {
-    var _this4 = this;
-
-    return toArray(this.prop.validate).map(function (item) {
-      if (is.Function(item.validator)) {
-        var temp = _objectSpread2({}, item);
-
-        var that = _this4;
-
-        temp.validator = function () {
-          var _item$validator;
-
-          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-            args[_key] = arguments[_key];
-          }
-
-          return (_item$validator = item.validator).call.apply(_item$validator, [{
-            that: this,
-            id: that.id,
-            field: that.field,
-            rule: that.rule,
-            api: that.$handle.api
-          }].concat(args));
-        };
-
-        return temp;
-      }
-
-      return item;
-    });
+    return this.prop.validate;
   },
   check: function check(handle) {
     return this.vm === handle.vm;
@@ -4730,15 +4781,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();
       }
     };
 
@@ -4749,17 +4800,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) {
@@ -4997,7 +5048,11 @@ function useLoader(Handler) {
 
         _this6.setCtx(ctx);
 
-        !isCopy && !isInit && _this6.effect(ctx, 'load');
+        if (!isCopy && !isInit) {
+          _this6.effect(ctx, 'load');
+
+          _this6.targetHook(ctx, 'load');
+        }
 
         _this6.effect(ctx, 'created');
 
@@ -5249,6 +5304,9 @@ function useInput(Handler) {
       this.valueChange(ctx, value);
       this.vm.emit('change', ctx.field, value, ctx.origin, this.api, setFlag || false);
       this.effect(ctx, 'value');
+      this.targetHook(ctx, 'value', {
+        value: value
+      });
       this.emitEvent('change', ctx.field, value, {
         rule: ctx.origin,
         api: this.api,
@@ -5594,9 +5652,22 @@ function useContext(Handler) {
           }
 
           _this.watching = true;
+          nextTick(function () {
+            _this.targetHook(ctx, 'watch', {
+              key: key,
+              oldValue: o,
+              newValue: n
+            });
+          });
 
           if (key === 'hidden' && Boolean(n) !== Boolean(o)) {
             _this.$render.clearCacheAll();
+
+            nextTick(function () {
+              _this.targetHook(ctx, 'hidden', {
+                value: n
+              });
+            });
           }
 
           if (key === 'ignore' && ctx.input || key === 'hidden' && ctx.input && (ctx.rule.ignore === 'hidden' || _this.options.ignoreHiddenFields)) {
@@ -5638,6 +5709,71 @@ function useContext(Handler) {
           sync: flag
         }));
       });
+      ctx.refRule['__$title'] = computed(function () {
+        var title = (_typeof(ctx.rule.title) === 'object' ? ctx.rule.title.title : ctx.rule.title) || '';
+
+        if (title) {
+          var match = title.match(/^\{\{\s*\$t\.(.+)\s*\}\}$/);
+
+          if (match) {
+            title = _this.api.t(match[1]);
+          }
+        }
+
+        return title;
+      });
+      ctx.refRule['__$info'] = computed(function () {
+        var info = (_typeof(ctx.rule.info) === 'object' ? ctx.rule.info.info : ctx.rule.info) || '';
+
+        if (info) {
+          var match = info.match(/^\{\{\s*\$t\.(.+)\s*\}\}$/);
+
+          if (match) {
+            info = _this.api.t(match[1]);
+          }
+        }
+
+        return info;
+      });
+      ctx.refRule['__$validate'] = computed(function () {
+        return toArray(ctx.rule.validate).map(function (item) {
+          var temp = _objectSpread2({}, item);
+
+          if (temp.message) {
+            var match = temp.message.match(/^\{\{\s*\$t\.(.+)\s*\}\}$/);
+
+            if (match) {
+              temp.message = _this.api.t(match[1], {
+                title: ctx.refRule.__$title.value
+              });
+            }
+          }
+
+          if (is.Function(temp.validator)) {
+            var that = ctx;
+
+            temp.validator = function () {
+              var _item$validator;
+
+              for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+                args[_key] = arguments[_key];
+              }
+
+              return (_item$validator = item.validator).call.apply(_item$validator, [{
+                that: this,
+                id: that.id,
+                field: that.field,
+                rule: that.rule,
+                api: that.$handle.api
+              }].concat(args));
+            };
+
+            return temp;
+          }
+
+          return temp;
+        });
+      });
 
       if (ctx.input) {
         var val = toRef(ctx.rule, 'value');
@@ -5725,25 +5861,42 @@ function useContext(Handler) {
           var or = item.mode === 'OR';
           var valid = true;
 
-          for (var i = 0; i < item.group.length; i++) {
+          var _loop = function _loop(i) {
             var one = item.group[i];
             var flag = void 0;
+            var field = one.field;
+
+            if (one.variable) {
+              field = JSON.stringify(_this2.fc.getLoadData(one.variable) || '');
+            }
 
             if (one.mode) {
               flag = checkCondition(one);
             } else if (!condition[one.condition]) {
               flag = false;
+            } else if (is.Function(one.handler)) {
+              flag = invoke(function () {
+                return one.handler(_this2.api, ctx.rule);
+              });
             } else {
-              flag = new Function('$condition', '$val', '$form', '$group', "with($form){with(this){with($group){ return $condition['".concat(one.condition, "'](").concat(one.field, ", ").concat(one.compare ? one.compare : '$val', "); }}}")).call(_this2.api.form, condition, one.value, _this2.api.top.form, group ? _this2.subRuleData[group.id] || {} : {});
+              flag = new Function('$condition', '$val', '$form', '$group', '$rule', "with($form){with(this){with($group){ return $condition['".concat(one.condition, "'](").concat(field, ", ").concat(one.compare ? one.compare : '$val', "); }}}")).call(_this2.api.form, condition, one.value, _this2.api.top.form, group ? _this2.subRuleData[group.id] || {} : {}, ctx.rule);
             }
 
             if (or && flag) {
-              return true;
+              return {
+                v: true
+              };
             }
 
             if (!or) {
               valid = valid && flag;
             }
+          };
+
+          for (var i = 0; i < item.group.length; i++) {
+            var _ret = _loop(i);
+
+            if (_typeof(_ret) === "object") return _ret.v;
           }
 
           return or ? false : valid;
@@ -5779,8 +5932,8 @@ function useContext(Handler) {
         obj[k] = function () {
           var _that$fc$formulas$k;
 
-          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-            args[_key] = arguments[_key];
+          for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+            args[_key2] = arguments[_key2];
           }
 
           return (_that$fc$formulas$k = that.fc.formulas[k]).call.apply(_that$fc$formulas$k, [{
@@ -5874,6 +6027,7 @@ function useContext(Handler) {
       this.$render.clearCache(ctx);
       ctx["delete"]();
       this.effect(ctx, 'deleted');
+      this.targetHook(ctx, 'deleted');
       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;
@@ -5920,6 +6074,25 @@ function useLifecycle(Handler) {
       }
 
       (_this$bus = this.bus).$emit.apply(_this$bus, [name].concat(args));
+    },
+    targetHook: function targetHook(ctx, name, args) {
+      var _ctx$prop,
+          _ctx$prop$hook,
+          _this2 = this;
+
+      var hook = (_ctx$prop = ctx.prop) === null || _ctx$prop === void 0 ? void 0 : (_ctx$prop$hook = _ctx$prop.hook) === null || _ctx$prop$hook === void 0 ? void 0 : _ctx$prop$hook[name];
+
+      if (hook) {
+        hook = Array.isArray(hook) ? hook : [hook];
+        hook.forEach(function (fn) {
+          invoke(function () {
+            return fn(_objectSpread2(_objectSpread2({}, args || {}), {}, {
+              rule: ctx.rule,
+              api: _this2.api
+            }));
+          });
+        });
+      }
     }
   });
 }
@@ -6387,7 +6560,7 @@ var loadData = function loadData(fc) {
       var unwatchs = [];
       attrs.forEach(function (attr) {
         if (attr && (attr.attr || attr.template)) {
-          var unwatch = fc.watchLoadData(debounce(function (get) {
+          var fn = function fn(get) {
             var value;
 
             if (attr.template) {
@@ -6413,7 +6586,14 @@ var loadData = function loadData(fc) {
             }
 
             api.sync(rule);
-          }, attr.wait || 300));
+          };
+
+          var callback = function callback(get) {
+            return fn(get);
+          };
+
+          var unwatch = fc.watchLoadData(callback);
+          fn = debounce(fn, attr.wait || 300);
 
           if (attr.watch !== false) {
             unwatchs.push(unwatch);
@@ -6434,10 +6614,72 @@ var loadData = function loadData(fc) {
       inject.clearProp();
     }
   };
-  loadData.watch = loadData.created;
+  loadData.watch = loadData.mounted;
   return loadData;
 };
 
+var t = function t(fc) {
+  var t = {
+    name: 't',
+    _fn: [],
+    loaded: function loaded(inject, rule, api) {
+      this.deleted(inject);
+      var attrs = inject.getValue() || {};
+      var unwatchs = [];
+      Object.keys(attrs).forEach(function (key) {
+        var attr = attrs[key];
+
+        if (attr) {
+          var isObj = _typeof(attr) === 'object';
+
+          var fn = function fn(get) {
+            var value = fc.t(isObj ? attr.attr : attr, isObj ? attr.params : null, get);
+
+            var _rule = isObj && attr.modify ? rule : inject.getProp();
+
+            if (key === 'child') {
+              if (_rule.children) {
+                _rule.children[0] = value;
+              } else {
+                _rule.children = [value];
+              }
+            } else {
+              deepSet(_rule, key, value);
+            }
+
+            api.sync(rule);
+          };
+
+          var callback = function callback(get) {
+            return fn(get);
+          };
+
+          var unwatch = fc.watchLoadData(callback);
+          fn = debounce(fn, attr.wait || 300);
+
+          if (attr.watch !== false) {
+            unwatchs.push(unwatch);
+          } else {
+            unwatch();
+          }
+        }
+      });
+      this._fn[inject.id] = unwatchs;
+    },
+    deleted: function deleted(inject) {
+      if (this._fn[inject.id]) {
+        this._fn[inject.id].forEach(function (un) {
+          un();
+        });
+      }
+
+      inject.clearProp();
+    }
+  };
+  t.watch = t.loaded;
+  return t;
+};
+
 var componentValidate = {
   name: 'componentValidate',
   load: function load(attr, rule, api) {
@@ -6636,6 +6878,7 @@ var fetch = function fetch(fc) {
 var $provider = {
   fetch: fetch,
   loadData: loadData,
+  t: t,
   componentValidate: componentValidate
 };
 
@@ -7038,7 +7281,7 @@ function FormCreateFactory(config) {
       options: ref({}),
       extendApiFn: extendApiFn,
       fetchCache: new WeakMap(),
-      tmpData: {}
+      tmpData: reactive({})
     });
     listener.forEach(function (item) {
       _this.bus.$on(item.name, item.callback);
@@ -7113,6 +7356,26 @@ function FormCreateFactory(config) {
         });
       }
     },
+    t: function t(id, params, get) {
+      var value = get ? get('$t.' + id) : this.globalLanguageDriver(id);
+
+      if (value == null && this.vm.appContext.config.globalProperties.$i18n) {
+        return this.vm.appContext.config.globalProperties.$i18n.t(id, params);
+      }
+
+      if (value == null) {
+        value = '';
+      }
+
+      if (value && params) {
+        Object.keys(params).forEach(function (param) {
+          var regex = new RegExp("{".concat(param, "}"), 'g');
+          value = value.replace(regex, params[param]);
+        });
+      }
+
+      return value;
+    },
     globalDataDriver: function globalDataDriver(id) {
       var _this4 = this;
 
@@ -7196,6 +7459,41 @@ function FormCreateFactory(config) {
         }
       }
     },
+    getLocale: function getLocale() {
+      var locale = this.vm.setupState.top.props.locale;
+
+      if (locale && _typeof(locale) === 'object') {
+        return locale.name;
+      }
+
+      if (typeof locale === 'string') {
+        return locale;
+      }
+
+      if (this.vm.appContext.config.globalProperties.$i18n && this.vm.appContext.config.globalProperties.$i18n.locale) {
+        return this.vm.appContext.config.globalProperties.$i18n.locale;
+      }
+
+      return 'zh-cn';
+    },
+    globalLanguageDriver: function globalLanguageDriver(id) {
+      var locale = this.vm.setupState.top.props.locale;
+      var value = undefined;
+
+      if (locale && _typeof(locale) === 'object') {
+        value = deepGet(locale, id);
+      }
+
+      if (value == null) {
+        var language = this.options.value.language || {};
+
+        var _locale = this.getLocale();
+
+        value = deepGet(language[_locale], id);
+      }
+
+      return value;
+    },
     globalVarDriver: function globalVarDriver(id) {
       var _this5 = this;
 
@@ -7253,6 +7551,12 @@ function FormCreateFactory(config) {
         } else if (key === '$var') {
           val = this.globalVarDriver(split.join('.'));
           split = [];
+        } else if (key === '$locale') {
+          val = this.getLocale();
+          split = [];
+        } else if (key === '$t') {
+          val = this.globalLanguageDriver(split.join('.'));
+          split = [];
         } else {
           var tmpData = this.vm.setupState.top.setupState.fc.tmpData;
           val = hasProperty(tmpData, key) ? deepGet(tmpData, id) : getData(id);
@@ -7282,8 +7586,9 @@ function FormCreateFactory(config) {
           return unwatch[id].val;
         }
 
-        var val = _this6.getLoadData(id, def);
-
+        var data = computed(function () {
+          return _this6.getLoadData(id, def);
+        });
         var split = id.split('.');
         var key = split.shift();
         var key2 = split.shift() || '';
@@ -7297,6 +7602,9 @@ function FormCreateFactory(config) {
             run(true);
           }
         }, 0);
+        var un = watch(data, function (n) {
+          callback();
+        });
 
         _this6.bus.$on('$loadData.' + key, callback);
 
@@ -7311,10 +7619,12 @@ function FormCreateFactory(config) {
             if (key2) {
               _this6.bus.$off('$loadData.' + key + '.' + key2, callback);
             }
+
+            un();
           },
-          val: val
+          val: data.value
         };
-        return val;
+        return data.value;
       };
 
       run(false);
@@ -7686,6 +7996,7 @@ var alias = {
   autoComplete: PRE + '-autocomplete',
   auto: PRE + '-autocomplete',
   group: 'fc-group',
+  array: 'fc-group',
   object: 'fc-sub-form',
   subForm: 'fc-sub-form'
 };
@@ -7804,12 +8115,9 @@ var manager = {
     return prop;
   },
   mergeProp: function mergeProp(ctx) {
-    ctx.prop = mergeProps([{
-      info: this.options.info || {},
-      wrap: this.options.wrap || {},
-      col: this.options.col || {},
-      title: this.options.title || {}
-    }, ctx.prop], {
+    var _this2 = this;
+
+    var def = {
       info: {
         trigger: 'hover',
         placement: 'top-start',
@@ -7820,8 +8128,9 @@ var manager = {
         span: 24
       },
       wrap: {}
-    }, {
-      normal: ['title', 'info', 'col', 'wrap']
+    };
+    ['info', 'wrap', 'col', 'title'].forEach(function (name) {
+      ctx.prop[name] = mergeProps([_this2.options[name] || {}, ctx.prop[name] || {}], def[name]);
     });
   },
   getDefaultOptions: function getDefaultOptions() {
@@ -7854,18 +8163,18 @@ var manager = {
     });
   },
   render: function render(children) {
-    var _this2 = this;
+    var _this3 = this;
 
     if (children.slotLen() && !this.$handle.preview) {
       children.setSlot(undefined, function () {
-        return _this2.makeFormBtn();
+        return _this3.makeFormBtn();
       });
     }
 
     return this.$r(this.rule, isFalse(this.options.row.show) ? children.getSlots() : [this.makeRow(children)]);
   },
   makeWrap: function makeWrap(ctx, children) {
-    var _this3 = this;
+    var _this4 = this;
 
     var rule = ctx.prop;
     var uni = "".concat(this.key).concat(ctx.key);
@@ -7884,7 +8193,7 @@ var manager = {
         prop: ctx.id,
         rules: ctx.injectValidate()
       }),
-      "class": rule.className,
+      "class": this.$render.mergeClass(rule.className, 'fc-form-item'),
       key: "".concat(uni, "fi"),
       ref: ctx.wrapRef,
       type: 'formItem'
@@ -7894,7 +8203,7 @@ var manager = {
       }
     }, isTitle ? {
       label: function label() {
-        return _this3.makeInfo(rule, uni, ctx);
+        return _this4.makeInfo(rule, uni, ctx);
       }
     } : {}));
     return inline === true || isFalse(_col) || isFalse(col.show) ? item : this.makeCol(rule, uni, [item]);
@@ -7905,7 +8214,7 @@ var manager = {
     return !(!title.title && !title["native"] || isFalse(title.show));
   },
   makeInfo: function makeInfo(rule, uni, ctx) {
-    var _this4 = this;
+    var _this5 = this;
 
     var titleProp = _objectSpread2({}, rule.title);
 
@@ -7915,10 +8224,10 @@ var manager = {
     var form = this.options.form;
     var titleSlot = this.getSlot('title');
     var children = [titleSlot ? titleSlot({
-      title: titleProp.title || '',
+      title: ctx.refRule.__$title.value,
       rule: ctx.rule,
       options: this.options
-    }) : (titleProp.title || '') + (form.labelSuffix || form['label-suffix'] || '')];
+    }) : ctx.refRule.__$title.value + (form.labelSuffix || form['label-suffix'] || '')];
 
     if (!isFalse(infoProp.show) && (infoProp.info || infoProp["native"]) && !isFalse(infoProp.icon)) {
       var prop = {
@@ -7934,17 +8243,17 @@ var manager = {
       var field = 'content';
 
       if (infoProp.info && !hasProperty(prop.props, field)) {
-        prop.props[field] = infoProp.info;
+        prop.props[field] = ctx.refRule.__$info.value;
       }
 
       children[infoProp.align !== 'left' ? 'unshift' : 'push'](this.$r(mergeProps([infoProp, prop]), _defineProperty({}, titleProp.slot || (isTip ? 'default' : 'reference'), function () {
-        return _this4.$r({
+        return _this5.$r({
           type: 'ElIcon',
           style: 'top:2px',
           key: "".concat(uni, "i")
         }, {
           "default": function _default() {
-            return _this4.$r({
+            return _this5.$r({
               type: infoProp.icon === true ? 'icon-warning' : infoProp.icon
             });
           }
@@ -7955,6 +8264,7 @@ var manager = {
     var _prop = mergeProps([titleProp, {
       props: tidyRule(titleProp),
       key: "".concat(uni, "tit"),
+      "class": 'fc-form-title',
       type: titleProp.type || 'span'
     }]);
 
@@ -7966,7 +8276,7 @@ var manager = {
   makeCol: function makeCol(rule, uni, children) {
     var col = rule.col;
     return this.$r({
-      "class": col["class"],
+      "class": this.$render.mergeClass(col["class"], 'fc-form-col'),
       type: 'col',
       props: col || {
         span: 24
@@ -7979,7 +8289,7 @@ var manager = {
     return this.$r({
       type: 'row',
       props: row,
-      "class": row["class"],
+      "class": this.$render.mergeClass(row["class"], 'fc-form-row'),
       key: "".concat(this.key, "row")
     }, children);
   },
@@ -8000,10 +8310,12 @@ var manager = {
 
     var item = this.$r({
       type: 'formItem',
+      "class": 'fc-form-item',
       key: "".concat(this.key, "fb")
     }, vn);
     return this.rule.props.inline === true ? item : this.$r({
       type: 'col',
+      "class": 'fc-form-col fc-form-footer',
       props: {
         span: 24
       },
@@ -8011,7 +8323,7 @@ var manager = {
     }, [item]);
   },
   makeResetBtn: function makeResetBtn() {
-    var _this5 = this;
+    var _this6 = this;
 
     var resetBtn = _objectSpread2({}, this.options.resetBtn);
 
@@ -8023,21 +8335,21 @@ var manager = {
     return this.$r({
       type: 'button',
       props: resetBtn,
-      "class": '_fc-reset-btn',
+      "class": 'fc-reset-btn',
       style: {
         width: resetBtn.width
       },
       on: {
         click: function click() {
-          var fApi = _this5.$handle.api;
-          _this5.options.resetBtn.click ? _this5.options.resetBtn.click(fApi) : fApi.resetFields();
+          var fApi = _this6.$handle.api;
+          _this6.options.resetBtn.click ? _this6.options.resetBtn.click(fApi) : fApi.resetFields();
         }
       },
       key: "".concat(this.key, "b2")
     }, [innerText]);
   },
   makeSubmitBtn: function makeSubmitBtn() {
-    var _this6 = this;
+    var _this7 = this;
 
     var submitBtn = _objectSpread2({}, this.options.submitBtn);
 
@@ -8049,14 +8361,14 @@ var manager = {
     return this.$r({
       type: 'button',
       props: submitBtn,
-      "class": '_fc-submit-btn',
+      "class": 'fc-submit-btn',
       style: {
         width: submitBtn.width
       },
       on: {
         click: function click() {
-          var fApi = _this6.$handle.api;
-          _this6.options.submitBtn.click ? _this6.options.submitBtn.click(fApi) : fApi.submit()["catch"](function () {});
+          var fApi = _this7.$handle.api;
+          _this7.options.submitBtn.click ? _this7.options.submitBtn.click(fApi) : fApi.submit()["catch"](function () {});
         }
       },
       key: "".concat(this.key, "b1")
@@ -8146,7 +8458,7 @@ function useFrame(maker) {
   return maker;
 }
 
-var css_248z = ".form-create .form-create .el-form-item{margin-bottom:22px}.form-create{width:100%}.form-create .fc-none,.form-create.is-preview .el-form-item.is-required>.el-form-item__label-wrap>.el-form-item__label:before,.form-create.is-preview .el-form-item.is-required>.el-form-item__label:before,.form-create.is-preview .fc-clock{display:none!important}.fc-wrap-right .el-form-item__label{justify-content:flex-end}.fc-wrap-left .el-form-item__label{justify-content:flex-start}.fc-wrap-top.el-form-item{display:block}.fc-wrap-top.el-form-item .el-form-item__label{display:block;height:auto;line-height:22px;margin-bottom:8px;text-align:left}.el-form--large .fc-wrap-top.el-form-item .el-form-item__label{line-height:22px;margin-bottom:12px}.el-form--default .fc-wrap-top.el-form-item .el-form-item__label{line-height:22px;margin-bottom:8px}.el-form--small .fc-wrap-top.el-form-item .el-form-item__label{line-height:20px;margin-bottom:4px}";
+var css_248z = ".form-create .form-create .el-form-item{margin-bottom:22px}.form-create{width:100%}.form-create .fc-none,.form-create.is-preview .el-form-item.is-required>.el-form-item__label-wrap>.el-form-item__label:before,.form-create.is-preview .el-form-item.is-required>.el-form-item__label:before,.form-create.is-preview .fc-clock{display:none!important}.fc-wrap-right .el-form-item__label{justify-content:flex-end}.fc-wrap-left .el-form-item__label{justify-content:flex-start}.fc-wrap-top.el-form-item{display:block}.fc-wrap-top.el-form-item .el-form-item__label{display:block;height:auto;line-height:22px;margin-bottom:8px;text-align:left}.el-form--large .fc-wrap-top.el-form-item .el-form-item__label{line-height:22px;margin-bottom:12px}.el-form--default .fc-wrap-top.el-form-item .el-form-item__label{line-height:22px;margin-bottom:8px}.el-form--small .fc-wrap-top.el-form-item .el-form-item__label{line-height:20px;margin-bottom:4px}.fc-form-footer{margin-top:12px}";
 styleInject(css_248z);
 
 function tidyBtnProp(btn, def) {
@@ -8338,8 +8650,15 @@ var required = {
       }, val);
 
       if (!validate.message) {
-        var title = rule.title || '';
-        validate.message = ((_typeof(title) === 'object' ? title.title : title) || '') + '不能为空';
+        validate.message = rule.__fc__.refRule.__$title.value + (api.getLocale() === 'en' ? ' is required' : '不能为空');
+      } else {
+        var match = validate.message.match(/^\{\{\s*\$t\.(.+)\s*\}\}$/);
+
+        if (match) {
+          validate.message = api.t(match[1], {
+            title: rule.__fc__.refRule.__$title.value
+          });
+        }
       }
 
       inject.getProp().validate = [validate];
@@ -8399,7 +8718,7 @@ function install(FormCreate) {
 function elmFormCreate() {
   return FormCreateFactory({
     ui: 'element-ui',
-    version: '3.2.13',
+    version: '3.2.14',
     manager: manager,
     extendApi: extendApi,
     install: install,