@form-create/element-ui 3.2.9 → 3.2.11

package/README.md

@@ -1,30 +1,117 @@
-# @form-create/element-ui
-**form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持6个UI框架，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。**
+<p align="center">
+    <a href="https://www.form-create.com" target="_blank">
+        <img width="300" alt="FormCreate" src="https://static.form-create.com/file/img/info-logo2.png">
+    </a>
+</p>
+<p align="center">
+    基于Element Plus的低代码表单生成组件
+</p>
 
-form-create is a form generation component that can generate dynamic rendering, data collection, verification and submission functions through JSON. Supports 5 UI frameworks, and supports the generation of any Vue components. Built-in 20 kinds of commonly used form components and custom components, no matter how complex forms can be easily handled.
+<p align="center">
+    <a href="https://www.form-create.com/" target="_blank">官网</a>
+    <span>&nbsp;|&nbsp;</span>
+    <a href="https://form-create.com/v3/guide/" target="_blank">帮助文档</a>
+    <span>&nbsp;|&nbsp;</span>
+    <a href="https://pro.form-create.com/view/" target="_blank">可视化表单设计器</a>
+    <span>&nbsp;|&nbsp;</span>
+    <a href="https://pro.form-create.com/mobile/" target="_blank">移动端表单设计器</a>
+</p>
 
-> form-create element-ui 动态表单组件
->
-> form-create element-ui Dynamic form component
+<p align="center">
+  <a href="https://github.com/xaboy/form-create" target="_blank"><img src="https://img.shields.io/badge/License-MIT-yellow.svg" alt="TIM" /></a>
+  <a href="https://github.com/xaboy/form-create" target="_blank"><img src="https://img.shields.io/npm/dt/@form-create/element-ui.svg" alt="dt" /></a>
+</p>
 
-[GitHub](https://github.com/xaboy/form-create) | [文档](http://form-create.com/v3/element-ui/)
+**FormCreate 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的低代码表单生成组件。支持6个UI框架，适配移动端，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。**
+
+[![FcDesigner](https://static.form-create.com/file/img/banner-m2.jpg)](https://pro.form-create.com/view)
+
+## 特点
+- 使用JSON数据生成表单
+- 支持扩展，生成任何Vue组件和HTML标签
+- 支持6个UI框架
+- 支持组件之间联动
+- 提供丰富的表单操作API
+- 支持子表单和分组
+- 高性能
+- **适配移动端**
+
+## 支持的UI框架
+- element-plus
+- ant-design-vue
+- naive-ui
+- arco-design
+- tdesign
+- vant
+
+> 如果对您有帮助，您可以点右上角 "Star" 支持一下 谢谢！本项目还在不断开发完善中,如有任何建议或问题[请在这里提出](https://github.com/xaboy/form-create/issues/new)
+
+> 开发者讨论群[629709230](https://jq.qq.com/?_wv=1027&k=F1FlEFIV)
 
-[开源的vue表单设计器组件](https://github.com/xaboy/form-create-designer) ([功能演示](http://form-create.com/designer?fr=fc))
 
 - **预览**
 
 ![demo1](https://raw.githubusercontent.com/xaboy/form-create/dev/images/demo-live3.gif)
 
+![demo2](https://form-create.com/v3/img/form-create.mobile.jpg)
+
+<details>
+<summary><b>更多</b></summary>
 
 - **操作表单**
 
+[详细说明](https://www.form-create.com/v3/instance.html)
+
 ![demo2](https://raw.githubusercontent.com/xaboy/form-create/dev/images/demo-live2.gif)
 
 - **`group` 组件**
 
+[详细说明](https://www.form-create.com/v3/guide/group.html)
+
 ![demo3](https://raw.githubusercontent.com/xaboy/form-create/dev/images/demo-group.gif)
 
 - **`control` 配置项**
 
+[详细说明](https://www.form-create.com/v3/guide/control.html)
+
 ![demo2](https://raw.githubusercontent.com/xaboy/form-create/dev/images/demo-live4.gif)
+</details>
+
+## 包说明
+
+| 包名                                                                                                                                                                                                                                                                                                        | 说明                                                             |
+|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------|
+| @form-create/element-ui [![version](https://img.shields.io/npm/v/@form-create/element-ui/next.svg)](https://www.npmjs.com/package/@form-create/element-ui) [![npm](https://img.shields.io/npm/dt/@form-create/element-ui.svg)](https://www.npmjs.com/package/@form-create/element-ui)                     | [element-plus 版本](http://form-create.com/v3/element-ui/)       |
+| @form-create/ant-design-vue [![version](https://img.shields.io/npm/v/@form-create/ant-design-vue/next.svg)](https://www.npmjs.com/package/@form-create/ant-design-vue) [![npm](https://img.shields.io/npm/dt/@form-create/ant-design-vue.svg)](https://www.npmjs.com/package/@form-create/ant-design-vue) | [ant-design-vue 版本](http://form-create.com/v3/ant-design-vue/) |
+| @form-create/arco-design [![version](https://img.shields.io/npm/v/@form-create/arco-design/next.svg)](https://www.npmjs.com/package/@form-create/arco-design) [![npm](https://img.shields.io/npm/dt/@form-create/arco-design.svg)](https://www.npmjs.com/package/@form-create/arco-design)                | [arco-design 版本](http://form-create.com/v3/arco-design/)       |
+| @form-create/naive-ui [![version](https://img.shields.io/npm/v/@form-create/naive-ui/next.svg)](https://www.npmjs.com/package/@form-create/naive-ui) [![npm](https://img.shields.io/npm/dt/@form-create/naive-ui.svg)](https://www.npmjs.com/package/@form-create/naive-ui)                               | [naive-ui 版本](http://form-create.com/v3/naive-ui/)             |
+| @form-create/tdesign [![version](https://img.shields.io/npm/v/@form-create/tdesign/next.svg)](https://www.npmjs.com/package/@form-create/tdesign) [![npm](https://img.shields.io/npm/dt/@form-create/tdesign.svg)](https://www.npmjs.com/package/@form-create/tdesign)                                    | [tdesign 版本](http://form-create.com/v3/tdesign/)               |
+| @form-create/vant [![version](https://img.shields.io/npm/v/@form-create/vant.svg)](https://www.npmjs.com/package/@form-create/vant) [![npm](https://img.shields.io/npm/dt/@form-create/vant.svg)](https://www.npmjs.com/package/@form-create/vant)                                                        | [vant 版本(移动端)](http://form-create.com/v3/vant/)                |
+| @form-create/designer [![version](https://img.shields.io/npm/v/@form-create/designer.svg)](https://www.npmjs.com/package/@form-create/designer) [![npm](https://img.shields.io/npm/dt/@form-create/designer.svg)](https://www.npmjs.com/package/@form-create/designer)                                    | [可视化表单设计器](http://form-create.com/designer)                    |
+
+
+## 示例
+
+- [在线示例](https://www.form-create.com/v3/guide/demo.html)
+
+
+
+<details>
+<summary><b>效果图</b></summary>
+
+![https://raw.githubusercontent.com/xaboy/form-create/dev/images/sample110.jpg](https://raw.githubusercontent.com/xaboy/form-create/dev/images/sample110.jpg)
+</details>
+
+
+## 联系
+![http://static.form-create.com/file/img/support.jpg](http://static.form-create.com/file/img/support.jpg)
+
+## 感谢
+
+[时光弧线](https://github.com/shiguanghuxian)  |  [wxxtqk](https://github.com/wxxtqk)  |  [williamBoss](https://github.com/williamBoss)  |  [HeyMrLin](https://github.com/HeyMrLin)  |  [djkloop](https://github.com/djkloop)  |  [daiwenyong](https://github.com/daiwenyong) | [JetBrains](https://www.jetbrains.com/?from=form-create)
+
+## License
+
+[MIT](http://opensource.org/licenses/MIT)
 
+Copyright (c) 2018-present xaboy

package/dist/form-create.esm.js

@@ -1,5 +1,5 @@
 /*!
- * @form-create/element-ui v3.2.9
+ * @form-create/element-ui v3.2.11
  * (c) 2018-2024 xaboy
  * Github https://github.com/xaboy/form-create
  * Released under the MIT License.
@@ -2141,7 +2141,7 @@ function $FormCreate(FormCreate, components, directives) {
       },
       inFor: Boolean
     },
-    emits: ['update:api', 'update:modelValue', 'mounted', 'submit', 'change', 'emit-event', 'control', 'remove-rule', 'remove-field', 'sync', 'reload', 'repeat-field', 'update', 'validate-field-fail', 'validate-fail', 'created'],
+    emits: ['update:api', 'update:modelValue', 'mounted', 'submit', 'reset', 'change', 'emit-event', 'control', 'remove-rule', 'remove-field', 'sync', 'reload', 'repeat-field', 'update', 'validate-field-fail', 'validate-fail', 'created'],
     render: function render() {
       return this.fc.render();
     },
@@ -2444,7 +2444,7 @@ var mergeFn = function mergeFn(fn1, fn2) {
   };
 };
 
-var keyAttrs = ['type', 'slot', 'emitPrefix', 'value', 'name', 'native', 'hidden', 'display', 'inject', 'options', 'emit', 'link', 'prefix', 'suffix', 'update', 'sync', 'optionsTo', 'key', 'slotUpdate', 'computed', 'preview', 'component', 'cache', 'modelEmit'];
+var keyAttrs = ['type', 'slot', 'ignore', 'emitPrefix', 'value', 'name', 'native', 'hidden', 'display', 'inject', 'options', 'emit', 'link', 'prefix', 'suffix', 'update', 'sync', 'optionsTo', 'key', 'slotUpdate', 'computed', 'preview', 'component', 'cache', 'modelEmit'];
 var arrayAttrs = ['validate', 'children', 'control'];
 var normalAttrs = ['effect', 'deep'];
 function attrs() {
@@ -3072,16 +3072,33 @@ function Api(h) {
     },
 
     formData: function formData(fields) {
-      return tidyFields(fields).reduce(function (initial, id) {
-        var ctx = h.getFieldCtx(id);
-        if (!ctx) return initial;
-        initial[ctx.field] = copy(ctx.rule.value);
-        return initial;
-      }, h.options.appendValue !== false ? copy(h.appendData) : {});
+      if (fields == null) {
+        return api.fields().reduce(function (initial, id) {
+          var ctx = (h.fieldCtx[id] || []).filter(function (ctx) {
+            return !h.isIgnore(ctx.rule);
+          })[0];
+          if (!ctx) return initial;
+          initial[ctx.field] = copy(ctx.rule.value);
+          return initial;
+        }, h.options.appendValue !== false ? copy(h.appendData) : {});
+      } else {
+        return tidyFields(fields).reduce(function (initial, id) {
+          initial[id] = api.getValue(id);
+          return initial;
+        }, {});
+      }
     },
     getValue: function getValue(field) {
       var ctx = h.getFieldCtx(field);
-      if (!ctx) return;
+
+      if (!ctx) {
+        if (h.options.appendValue !== false && hasProperty(h.appendData, field)) {
+          return copy(h.appendData[field]);
+        }
+
+        return undefined;
+      }
+
       return copy(ctx.rule.value);
     },
     coverValue: function coverValue(formData) {
@@ -3389,6 +3406,13 @@ function Api(h) {
       nextTick(function () {
         api.clearValidateState();
       });
+
+      if (fields == null) {
+        is.Function(h.options.onReset) && invoke(function () {
+          return h.options.onReset(api);
+        });
+        h.vm.emit('reset', api);
+      }
     },
     method: function method(id, name) {
       var el = api.el(id);
@@ -3549,7 +3573,17 @@ function Api(h) {
         opt = deepCopy(opt);
         opt = h.loadFetchVar(opt);
         h.beforeFetch(opt).then(function () {
-          return asyncFetch(opt, h.fc.create.fetch).then(resolve)["catch"](reject);
+          return asyncFetch(opt, h.fc.create.fetch).then(function (res) {
+            invoke(function () {
+              return opt.onSuccess && opt.onSuccess(res);
+            });
+            resolve(res);
+          })["catch"](function (e) {
+            invoke(function () {
+              return opt.onError && opt.onError(e);
+            });
+            reject(e);
+          });
         });
       });
     },
@@ -3560,8 +3594,14 @@ function Api(h) {
         _opt = h.loadFetchVar(_opt, get);
         h.beforeFetch(_opt).then(function () {
           return asyncFetch(_opt, h.fc.create.fetch).then(function (res) {
+            invoke(function () {
+              return _opt.onSuccess && _opt.onSuccess(res);
+            });
             callback && callback(res, change);
           })["catch"](function (e) {
+            invoke(function () {
+              return _opt.onError && _opt.onError(e);
+            });
             error && error(e);
           });
         });
@@ -3949,6 +3989,9 @@ function useRender$1(Render) {
           getSubForm: function getSubForm() {
             return _this6.$handle.subForm[ctx.id];
           },
+          slots: function slots() {
+            return _this6.vm.setupState.top.slots;
+          },
           options: [],
           children: [],
           preview: false,
@@ -5279,12 +5322,18 @@ function useInput(Handler) {
       fields.reduce(function (initial, field) {
         var ctx = _this2.getCtx(field);
 
-        initial[field] = toRef(ctx.rule, 'value');
+        if (!_this2.isIgnore(ctx.rule)) {
+          initial[field] = toRef(ctx.rule, 'value');
+        }
+
         return initial;
       }, data);
       this.form = data;
       this.syncValue();
     },
+    isIgnore: function isIgnore(rule) {
+      return rule.ignore || this.options.ignoreHiddenFields && rule.hidden;
+    },
     appendValue: function appendValue(rule) {
       if ((!rule.field || !hasProperty(this.appendData, rule.field)) && !this.options.forceCoverValue) {
         return;
@@ -5522,7 +5571,13 @@ function useContext(Handler) {
 
           _this.watching = true;
 
-          if (key === 'link') {
+          if (key === 'hidden' && Boolean(n) !== Boolean(o)) {
+            _this.$render.clearCacheAll();
+          }
+
+          if (key === 'ignore' && ctx.input || key === 'hidden' && ctx.input && _this.options.ignoreHiddenFields) {
+            _this.syncForm();
+          } else if (key === 'link') {
             ctx.link();
             return;
           } else if (['props', 'on', 'deep'].indexOf(key) > -1) {
@@ -5533,8 +5588,6 @@ function useContext(Handler) {
             }
           } else if (key === 'emit') {
             _this.parseEmit(ctx);
-          } else if (key === 'hidden' && Boolean(n) !== Boolean(o)) {
-            _this.$render.clearCacheAll();
           } else if (['prefix', 'suffix'].indexOf(key) > -1) n && _this.loadFn(n, ctx.rule);else if (key === 'type') {
             ctx.updateType();
 
@@ -5589,10 +5642,18 @@ function useContext(Handler) {
         }
 
         Object.keys(computedRule).forEach(function (k) {
+          var oldValue = undefined;
           var computedValue = computed(function () {
             var item = computedRule[k];
             if (!item) return undefined;
-            return _this.compute(ctx, item);
+
+            var value = _this.compute(ctx, item);
+
+            if (item.linkage && value === undefined) {
+              return oldValue;
+            }
+
+            return value;
           });
 
           var callback = function callback(n) {
@@ -5610,6 +5671,7 @@ function useContext(Handler) {
           }
 
           ctx.watch.push(watch(computedValue, function (n) {
+            oldValue = n;
             setTimeout(function () {
               callback(n);
             });
@@ -5664,7 +5726,15 @@ function useContext(Handler) {
         };
 
         var val = checkCondition(item);
-        return item.invert === true ? !val : val;
+        val = item.invert === true ? !val : val;
+
+        if (item.linkage) {
+          return val ? invoke(function () {
+            return _this2.computeValue(item.linkage, ctx, group);
+          }, undefined) : undefined;
+        }
+
+        return val;
       } else if (is.Function(item)) {
         fn = function fn() {
           return item(_this2.api.form, _this2.api);
@@ -5673,12 +5743,34 @@ function useContext(Handler) {
         var _group = ctx.getParentGroup();
 
         fn = function fn() {
-          return new Function('$formulas', '$form', '$group', '$rule', '$api', "with($form){with(this){with($group){with($formulas){ return ".concat(item, " }}}}")).call(_this2.api.form, _this2.fc.formulas, _this2.api.top.form, _group ? _this2.subRuleData[_group.id] || {} : {}, ctx.rule, _this2.api);
+          return _this2.computeValue(item, ctx, _group);
         };
       }
 
       return invoke(fn, undefined);
     },
+    computeValue: function computeValue(str, ctx, group) {
+      var that = this;
+      var formulas = Object.keys(this.fc.formulas).reduce(function (obj, k) {
+        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];
+          }
+
+          return (_that$fc$formulas$k = that.fc.formulas[k]).call.apply(_that$fc$formulas$k, [{
+            that: this,
+            rule: ctx.rule,
+            api: that.api,
+            fc: that.fc
+          }].concat(args));
+        };
+
+        return obj;
+      }, {});
+      return new Function('$formulas', '$form', '$group', '$rule', '$api', "with($form){with(this){with($group){with($formulas){ return ".concat(str, " }}}}")).call(this.api.form, formulas, this.api.top.form, group ? this.subRuleData[group.id] || {} : {}, ctx.rule, this.api);
+    },
     updateChildren: function updateChildren(ctx, n, o) {
       var _this3 = this;
 
@@ -5984,7 +6076,7 @@ function Handler(fc) {
       return fc.bus;
     },
     preview: function preview() {
-      return fc.vm.props.preview != null ? fc.vm.props.preview : this.options.preview || false;
+      return fc.vm.props.preview != null ? fc.vm.props.preview : fc.options.value.preview || false;
     }
   });
   extend(this, {
@@ -6660,6 +6752,7 @@ function FormCreateFactory(config) {
   var CreateNode = CreateNodeFactory();
   var formulas = {};
   var isMobile = config.isMobile === true;
+  var prototype = {};
   exportAttrs(config.attrs || {});
 
   function getApi(name) {
@@ -6774,6 +6867,8 @@ function FormCreateFactory(config) {
     return vm.$refs.fc.fapi;
   }
 
+  setPrototypeOf(create, prototype);
+
   function factory(inherit) {
     var _config = _objectSpread2({}, config);
 
@@ -7121,9 +7216,9 @@ function FormCreateFactory(config) {
         var split = id.split('.');
         var key = split.shift();
 
-        if (key === '$form') {
+        if (key === '$topForm') {
           val = this.$handle.api.top.formData();
-        } else if (key === '$subForm') {
+        } else if (key === '$form') {
           val = this.$handle.api.formData();
         } else if (key === '$options') {
           val = this.options.value;
@@ -7135,7 +7230,7 @@ function FormCreateFactory(config) {
           split = [];
         } else {
           var tmpData = this.vm.setupState.top.setupState.fc.tmpData;
-          val = hasProperty(tmpData, key) ? deepGet(tmpData, id) : getData(key);
+          val = hasProperty(tmpData, key) ? deepGet(tmpData, id) : getData(id);
           split = [];
         }
 
@@ -7168,14 +7263,12 @@ function FormCreateFactory(config) {
         var key = split.shift();
         var key2 = split.shift() || '';
         var callback = debounce(function () {
-          if (key !== id) {
-            var temp = _this6.getLoadData(id, def);
+          var temp = _this6.getLoadData(id, def);
 
-            if (JSON.stringify(temp) !== JSON.stringify(unwatch[id].val)) {
-              unwatch[id].val = temp;
-              run(true);
-            }
-          } else {
+          if (!unwatch[id]) {
+            return;
+          } else if (JSON.stringify(temp) !== JSON.stringify(unwatch[id].val)) {
+            unwatch[id].val = temp;
             run(true);
           }
         }, 0);
@@ -7295,6 +7388,7 @@ function FormCreateFactory(config) {
     extend(formCreate, {
       version: config.version,
       ui: config.ui,
+      isMobile: isMobile,
       extendApi: extendApi,
       getData: getData,
       setDataDriver: setDataDriver,
@@ -7315,6 +7409,7 @@ function FormCreateFactory(config) {
       componentAlias: componentAlias,
       copyRule: copyRule,
       copyRules: copyRules,
+      mergeRule: mergeRule,
       fetch: fetch$1,
       $form: $form,
       parseFn: parseFn,
@@ -7329,7 +7424,6 @@ function FormCreateFactory(config) {
   function useStatic(formCreate) {
     extend(formCreate, {
       create: create,
-      isMobile: isMobile,
       install: function install(app, options) {
         globalConfig = _objectSpread2(_objectSpread2({}, globalConfig), options || {});
         var key = '_installedFormCreate_' + config.ui;
@@ -7354,8 +7448,8 @@ function FormCreateFactory(config) {
     });
   }
 
-  useAttr(create);
-  useStatic(create);
+  useAttr(prototype);
+  useStatic(prototype);
   setDataDriver('$cookie', cookieDriver);
   setDataDriver('$localStorage', localStorageDriver);
   CreateNode.use({
@@ -7383,18 +7477,18 @@ function FormCreateFactory(config) {
   }
 
   var FcComponent = $form();
-  setPrototypeOf(FcComponent, create);
+  setPrototypeOf(FcComponent, prototype);
   Object.defineProperties(FcComponent, {
     fetch: {
       get: function get() {
-        return create.fetch;
+        return prototype.fetch;
       },
       set: function set(val) {
-        create.fetch = val;
+        prototype.fetch = val;
       }
     }
   });
-  FcComponent.util = create;
+  FcComponent.util = prototype;
   return FcComponent;
 }
 
@@ -7730,7 +7824,7 @@ var manager = {
       ref: ref
     });
     extend(this.rule.props, {
-      model: $handle.formData
+      model: _objectSpread2({}, $handle.formData)
     });
   },
   render: function render(children) {
@@ -8279,7 +8373,7 @@ function install(FormCreate) {
 function elmFormCreate() {
   return FormCreateFactory({
     ui: 'element-ui',
-    version: '3.2.9',
+    version: '3.2.11',
     manager: manager,
     extendApi: extendApi,
     install: install,