@form-create/element-ui 3.2.10 → 3.2.12

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.10
+ * @form-create/element-ui v3.2.12
  * (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,32 @@ 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) {
+        var data = {};
+        Object.keys(h.form).forEach(function (k) {
+          if (h.ignoreFields.indexOf(k) === -1) {
+            data[k] = copy(h.form[k]);
+          }
+        });
+        return data;
+      } 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 +3405,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);
@@ -3965,6 +3988,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,
@@ -5059,9 +5085,9 @@ function useLoader(Handler) {
               __ctrl: true,
               children: rule,
               valid: valid
-            }) : ctx.ctrlRule.splice(ctx.ctrlRule.indexOf(ctrl), 1);
+            }) : ctrl && ctx.ctrlRule.splice(ctx.ctrlRule.indexOf(ctrl) >>> 0, 1);
             hideLst[valid ? 'push' : 'unshift'](function () {
-              if (method === 'disabled') {
+              if (method === 'disabled' || method === 'enabled') {
                 _this7.api.disabled(!valid, rule);
               } else if (method === 'display') {
                 _this7.api.display(valid, rule);
@@ -5281,6 +5307,7 @@ function useInput(Handler) {
 
       var data = reactive({});
       var fields = this.fields();
+      var ignoreFields = [];
 
       if (this.options.appendValue !== false) {
         Object.keys(this.appendData).reduce(function (initial, field) {
@@ -5293,14 +5320,24 @@ function useInput(Handler) {
       }
 
       fields.reduce(function (initial, field) {
-        var ctx = _this2.getCtx(field);
+        var ctx = (_this2.fieldCtx[field] || []).filter(function (ctx) {
+          return !_this2.isIgnore(ctx.rule);
+        })[0] || _this2.fieldCtx[field][0];
+
+        if (_this2.isIgnore(ctx.rule)) {
+          ignoreFields.push(field);
+        }
 
         initial[field] = toRef(ctx.rule, 'value');
         return initial;
       }, data);
       this.form = data;
+      this.ignoreFields = ignoreFields;
       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;
@@ -5332,11 +5369,19 @@ function useInput(Handler) {
       }
     },
     syncValue: function syncValue() {
+      var _this3 = this;
+
       if (this.deferSyncFn) {
         return this.deferSyncFn.sync = true;
       }
 
-      this.vm.setupState.updateValue(_objectSpread2({}, this.form));
+      var data = {};
+      Object.keys(this.form).forEach(function (k) {
+        if (_this3.ignoreFields.indexOf(k) === -1) {
+          data[k] = _this3.form[k];
+        }
+      });
+      this.vm.setupState.updateValue(data);
     },
     isChange: function isChange(ctx, value) {
       return JSON.stringify(this.getFormData(ctx), strFn) !== JSON.stringify(value, strFn);
@@ -5345,11 +5390,11 @@ function useInput(Handler) {
       return (is.Object(value) || Array.isArray(value)) && value === ctx.rule.value;
     },
     refreshUpdate: function refreshUpdate(ctx, val, origin, field) {
-      var _this3 = this;
+      var _this4 = this;
 
       if (is.Function(ctx.rule.update)) {
         var state = invoke(function () {
-          return ctx.rule.update(val, ctx.origin, _this3.api, {
+          return ctx.rule.update(val, ctx.origin, _this4.api, {
             origin: origin || 'change',
             linkField: field
           });
@@ -5373,18 +5418,18 @@ function useInput(Handler) {
       this.refreshUpdate(ctx, val, origin, field);
     },
     appendLink: function appendLink(ctx) {
-      var _this4 = this;
+      var _this5 = this;
 
       var link = ctx.rule.link;
       is.trueArray(link) && link.forEach(function (field) {
         var fn = function fn() {
-          return _this4.refreshRule(ctx, ctx.rule.value, 'link', field);
+          return _this5.refreshRule(ctx, ctx.rule.value, 'link', field);
         };
 
-        _this4.bus.$on('change-' + field, fn);
+        _this5.bus.$on('change-' + field, fn);
 
         ctx.linkOn.push(function () {
-          return _this4.bus.$off('change-' + field, fn);
+          return _this5.bus.$off('change-' + field, fn);
         });
       });
     },
@@ -5538,7 +5583,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) {
@@ -5549,8 +5600,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();
 
@@ -5605,10 +5654,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) {
@@ -5626,6 +5683,7 @@ function useContext(Handler) {
           }
 
           ctx.watch.push(watch(computedValue, function (n) {
+            oldValue = n;
             setTimeout(function () {
               callback(n);
             });
@@ -5680,41 +5738,51 @@ 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);
         };
       } else {
-        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;
-        }, {});
-
         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, 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;
 
@@ -6037,6 +6105,7 @@ function Handler(fc) {
     subForm: {},
     form: reactive({}),
     appendData: {},
+    ignoreFields: [],
     providers: {},
     cycleLoad: null,
     loadedId: 1,
@@ -6696,6 +6765,7 @@ function FormCreateFactory(config) {
   var CreateNode = CreateNodeFactory();
   var formulas = {};
   var isMobile = config.isMobile === true;
+  var prototype = {};
   exportAttrs(config.attrs || {});
 
   function getApi(name) {
@@ -6810,6 +6880,8 @@ function FormCreateFactory(config) {
     return vm.$refs.fc.fapi;
   }
 
+  setPrototypeOf(create, prototype);
+
   function factory(inherit) {
     var _config = _objectSpread2({}, config);
 
@@ -7157,9 +7229,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;
@@ -7171,7 +7243,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 = [];
         }
 
@@ -7206,7 +7278,9 @@ function FormCreateFactory(config) {
         var callback = debounce(function () {
           var temp = _this6.getLoadData(id, def);
 
-          if (JSON.stringify(temp) !== JSON.stringify(unwatch[id].val)) {
+          if (!unwatch[id]) {
+            return;
+          } else if (JSON.stringify(temp) !== JSON.stringify(unwatch[id].val)) {
             unwatch[id].val = temp;
             run(true);
           }
@@ -7327,6 +7401,7 @@ function FormCreateFactory(config) {
     extend(formCreate, {
       version: config.version,
       ui: config.ui,
+      isMobile: isMobile,
       extendApi: extendApi,
       getData: getData,
       setDataDriver: setDataDriver,
@@ -7347,6 +7422,7 @@ function FormCreateFactory(config) {
       componentAlias: componentAlias,
       copyRule: copyRule,
       copyRules: copyRules,
+      mergeRule: mergeRule,
       fetch: fetch$1,
       $form: $form,
       parseFn: parseFn,
@@ -7361,7 +7437,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;
@@ -7386,8 +7461,8 @@ function FormCreateFactory(config) {
     });
   }
 
-  useAttr(create);
-  useStatic(create);
+  useAttr(prototype);
+  useStatic(prototype);
   setDataDriver('$cookie', cookieDriver);
   setDataDriver('$localStorage', localStorageDriver);
   CreateNode.use({
@@ -7415,18 +7490,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;
 }
 
@@ -8311,7 +8386,7 @@ function install(FormCreate) {
 function elmFormCreate() {
   return FormCreateFactory({
     ui: 'element-ui',
-    version: '3.2.10',
+    version: '3.2.12',
     manager: manager,
     extendApi: extendApi,
     install: install,