@form-create/element-ui 3.1.34 → 3.2.0

package/README.md

@@ -1,5 +1,5 @@
 # @form-create/element-ui
-**form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持5个UI框架，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。**
+**form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持6个UI框架，并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。**
 
 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.
 

package/dist/form-create.esm.js

@@ -1,5 +1,5 @@
 /*!
- * @form-create/element-ui v3.1.34
+ * @form-create/element-ui v3.2.0
  * (c) 2018-2024 xaboy
  * Github https://github.com/xaboy/form-create
  * Released under the MIT License.
@@ -209,9 +209,9 @@ function toArray(value) {
   return Array.isArray(value) ? value : [null, undefined, ''].indexOf(value) > -1 ? [] : [value];
 }
 
-var NAME$9 = 'fcCheckbox';
+var NAME$8 = 'fcCheckbox';
 var Checkbox = defineComponent({
-  name: NAME$9,
+  name: NAME$8,
   inheritAttrs: false,
   props: {
     formCreateInject: Object,
@@ -521,9 +521,9 @@ function _isSlot(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
-var NAME$8 = 'fcFrame';
+var NAME$7 = 'fcFrame';
 var Frame = defineComponent({
-  name: NAME$8,
+  name: NAME$7,
   props: {
     type: {
       type: String,
@@ -1004,9 +1004,9 @@ var Frame = defineComponent({
   }
 });
 
-var NAME$7 = 'fcRadio';
+var NAME$6 = 'fcRadio';
 var Radio = defineComponent({
-  name: NAME$7,
+  name: NAME$6,
   inheritAttrs: false,
   props: {
     formCreateInject: Object,
@@ -1157,9 +1157,9 @@ function hasProperty(rule, k) {
   return {}.hasOwnProperty.call(rule, k);
 }
 
-var NAME$6 = 'fcSelect';
+var NAME$5 = 'fcSelect';
 var Select = defineComponent({
-  name: NAME$6,
+  name: NAME$5,
   inheritAttrs: false,
   props: {
     formCreateInject: Object,
@@ -1227,9 +1227,9 @@ var Select = defineComponent({
   }
 });
 
-var NAME$5 = 'fcTree';
+var NAME$4 = 'fcTree';
 var Tree = defineComponent({
-  name: NAME$5,
+  name: NAME$4,
   inheritAttrs: false,
   formCreateParser: {
     mergeProp: function mergeProp(ctx) {
@@ -1329,9 +1329,9 @@ function getFileName(file) {
   return ('' + file).split('/').pop();
 }
 
-var NAME$4 = 'fcUpload';
+var NAME$3 = 'fcUpload';
 var Upload = defineComponent({
-  name: NAME$4,
+  name: NAME$3,
   inheritAttrs: false,
   formCreateParser: {
     toFormValue: function toFormValue(value) {
@@ -1523,9 +1523,9 @@ function copy$1(obj) {
 var css_248z$1 = "._fc-group{display:flex;flex-direction:column;justify-content:center;min-height:38px;width:100%}._fc-group-disabled ._fc-group-add,._fc-group-disabled ._fc-group-btn{cursor:not-allowed}._fc-group-handle{background-color:#fff;border:1px dashed #d9d9d9;border-radius:15px;bottom:-15px;display:flex;flex-direction:row;padding:3px 8px;position:absolute;right:30px}._fc-group-btn{cursor:pointer}._fc-group-idx{align-items:center;background:#eee;border-radius:15px;bottom:-15px;display:flex;font-weight:700;height:30px;justify-content:center;left:10px;position:absolute;width:30px}._fc-group-handle ._fc-group-btn+._fc-group-btn{margin-left:7px}._fc-group-container{border:1px dashed #d9d9d9;border-radius:5px;display:flex;flex-direction:column;margin:5px 5px 25px;padding:20px 20px 25px;position:relative}._fc-group-arrow{height:20px;position:relative;width:20px}._fc-group-arrow:before{border-left:2px solid #999;border-top:2px solid #999;content:\"\";height:9px;left:5px;position:absolute;top:8px;transform:rotate(45deg);width:9px}._fc-group-arrow._fc-group-down{transform:rotate(180deg)}._fc-group-plus-minus{cursor:pointer;height:20px;position:relative;width:20px}._fc-group-plus-minus:after,._fc-group-plus-minus:before{background-color:#409eff;content:\"\";height:2px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:60%}._fc-group-plus-minus:before{transform:translate(-50%,-50%) rotate(90deg)}._fc-group-plus-minus._fc-group-minus:before{display:none}._fc-group-plus-minus._fc-group-minus:after{background-color:#f56c6c}._fc-group-add{border:1px solid rgba(64,158,255,.5);border-radius:15px;cursor:pointer;height:25px;width:25px}._fc-group-add._fc-group-plus-minus:after,._fc-group-add._fc-group-plus-minus:before{width:50%}";
 styleInject(css_248z$1);
 
-var NAME$3 = 'fcGroup';
+var NAME$2 = 'fcGroup';
 var Group = defineComponent({
-  name: NAME$3,
+  name: NAME$2,
   props: {
     field: String,
     rule: Array,
@@ -1935,9 +1935,9 @@ var Group = defineComponent({
   }
 });
 
-var NAME$2 = 'fcSubForm';
+var NAME$1 = 'fcSubForm';
 var Sub = defineComponent({
-  name: NAME$2,
+  name: NAME$1,
   props: {
     rule: Array,
     options: {
@@ -2178,8 +2178,6 @@ function deepSet(data, idx, val) {
   return _data;
 }
 
-var NAME$1 = 'FormCreate';
-
 var getRuleInject = function getRuleInject(vm, parent) {
   if (!vm || vm === parent) {
     return;
@@ -2196,7 +2194,7 @@ var getRuleInject = function getRuleInject(vm, parent) {
 
 function $FormCreate(FormCreate, components, directives) {
   return defineComponent({
-    name: NAME$1,
+    name: 'FormCreate' + (FormCreate.isMobile ? 'Mobile' : ''),
     components: components,
     directives: directives,
     props: {
@@ -5674,9 +5672,10 @@ function Handler(fc) {
   this.$manager = new fc.manager(this);
   this.$render = new Render(this);
   this.api = fc.extendApiFn.reduce(function (api, fn) {
-    return _objectSpread2(_objectSpread2({}, api), invoke(function () {
-      return fn(_objectSpread2({}, api), _this);
+    extend(api, invoke(function () {
+      return fn(api, _this);
     }, {}));
+    return api;
   }, Api(this));
 }
 extend(Handler.prototype, {
@@ -6201,6 +6200,7 @@ function FormCreateFactory(config) {
   var directives = {};
   var modelFields = {};
   var useApps = [];
+  var listener = [];
   var extendApiFn = [config.extendApi];
 
   var providers = _objectSpread2({}, $provider);
@@ -6212,6 +6212,7 @@ function FormCreateFactory(config) {
   var loadData = reactive({});
   var CreateNode = CreateNodeFactory();
   var formulas = {};
+  var isMobile = config.isMobile === true;
   exportAttrs(config.attrs || {});
 
   function getApi(name) {
@@ -6385,6 +6386,13 @@ function FormCreateFactory(config) {
     _emitData(id);
   }
 
+  function on(name, callback) {
+    listener.push({
+      name: name,
+      callback: callback
+    });
+  }
+
   function FormCreate(vm) {
     var _this = this;
 
@@ -6397,6 +6405,7 @@ function FormCreateFactory(config) {
       providers: providers,
       modelFields: modelFields,
       formulas: formulas,
+      isMobile: isMobile,
       rules: vm.props.rule,
       name: vm.props.name || uniqueId(),
       inFor: vm.props.inFor,
@@ -6413,6 +6422,9 @@ function FormCreateFactory(config) {
       options: ref({}),
       extendApiFn: extendApiFn
     });
+    listener.forEach(function (item) {
+      _this.bus.$on(item.name, item.callback);
+    });
     nextTick(function () {
       watch(_this.options, function () {
         _this.$handle.$manager.updateOptions(_this.options.value);
@@ -6436,6 +6448,7 @@ function FormCreateFactory(config) {
     }
   }
 
+  FormCreate.isMobile = isMobile;
   extend(FormCreate.prototype, {
     init: function init() {
       var _this2 = this;
@@ -6552,13 +6565,15 @@ function FormCreateFactory(config) {
       parseJson: parseJson,
       toJson: toJson,
       useApp: useApp,
-      getApi: getApi
+      getApi: getApi,
+      on: on
     });
   }
 
   function useStatic(formCreate) {
     extend(formCreate, {
       create: create,
+      isMobile: isMobile,
       install: function install(app, options) {
         globalConfig = _objectSpread2(_objectSpread2({}, globalConfig), options || {});
         if (app._installedFormCreate === true) return;
@@ -6571,7 +6586,8 @@ function FormCreateFactory(config) {
 
         useAttr($formCreate);
         app.config.globalProperties.$formCreate = $formCreate;
-        app.component('FormCreate', $form());
+        var $component = $form();
+        app.component($component.name, $component);
         useApps.forEach(function (v) {
           invoke(function () {
             return v(formCreate, app);
@@ -7114,6 +7130,7 @@ var manager = {
     return this.$r({
       type: 'button',
       props: resetBtn,
+      "class": '_fc-reset-btn',
       style: {
         width: resetBtn.width
       },
@@ -7139,6 +7156,7 @@ var manager = {
     return this.$r({
       type: 'button',
       props: submitBtn,
+      "class": '_fc-submit-btn',
       style: {
         width: submitBtn.width
       },
@@ -7235,7 +7253,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 .fc-clock{display:none!important}.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{content:\"\"!important}";
+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}";
 styleInject(css_248z);
 
 function tidyBtnProp(btn, def) {
@@ -7488,7 +7506,7 @@ function install(FormCreate) {
 function elmFormCreate() {
   return FormCreateFactory({
     ui: 'element-ui',
-    version: '3.1.34',
+    version: '3.2.0',
     manager: manager,
     extendApi: extendApi,
     install: install,