@tmagic/form 1.0.0-rc.1 → 1.0.0-rc.10

package/dist/tmagic-form.umd.js

@@ -1,7 +1,7 @@
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('@element-plus/icons'), require('lodash-es'), require('element-plus'), require('sortablejs'), require('@tmagic/utils')) :
   typeof define === 'function' && define.amd ? define(['exports', 'vue', '@element-plus/icons', 'lodash-es', 'element-plus', 'sortablejs', '@tmagic/utils'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicForm = {}, global.vue, global.icons, global.lodashEs, global.elementPlus, global.Sortable, global.utils));
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicForm = {}, global.Vue, global.icons, global.lodashEs, global.ElementPlus, global.Sortable, global.utils));
 })(this, (function (exports, vue, icons, lodashEs, elementPlus, Sortable, utils) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -117,7 +117,8 @@
       model: props.model,
       parent: mForm?.parentValues || {},
       formValue: mForm?.values || props.model,
-      prop: props.prop
+      prop: props.prop,
+      config: props.config
     });
   };
   const display = function(mForm, config, props) {
@@ -148,7 +149,8 @@
           model: props.model,
           parent: mForm?.parentValues || {},
           formValue: mForm?.values || props.model,
-          prop: props.prop
+          prop: props.prop,
+          config: props.config
         }, mForm);
       }
       return item;
@@ -208,7 +210,18 @@
       const expand = vue.ref(false);
       const name = vue.computed(() => props.config.name || "");
       const items = vue.computed(() => props.config.items);
-      const itemProp = vue.computed(() => name.value ? `${props.prop}${props.prop ? "." : ""}${name.value}` : props.prop);
+      const itemProp = vue.computed(() => {
+        let n = "";
+        const { names } = props.config;
+        if (names?.[0]) {
+          [n] = names;
+        } else if (name.value) {
+          n = name.value;
+        } else {
+          return props.prop;
+        }
+        return `${props.prop}${props.prop ? "." : ""}${n}`;
+      });
       const tagName = vue.computed(() => {
         const component = vue.resolveComponent(`m-${items.value ? "form" : "fields"}-${type.value}`);
         if (typeof component !== "string")
@@ -248,7 +261,8 @@
             model: props.model,
             values: mForm?.initValues,
             formValue: mForm?.values,
-            prop: itemProp.value
+            prop: itemProp.value,
+            config: props.config
           });
         }
         if (filter === "number") {
@@ -262,7 +276,8 @@
             model: props.model,
             values: mForm?.initValues,
             formValue: mForm?.values,
-            prop: itemProp.value
+            prop: itemProp.value,
+            config: props.config
           });
         }
       };
@@ -347,10 +362,10 @@
         "expand-more": _ctx.expand,
         "label-width": _ctx.itemLabelWidth,
         onChange: _ctx.onChangeHandler
-      }, null, 8, ["size", "model", "config", "name", "prop", "step-active", "expand-more", "label-width", "onChange"])) : _ctx.type && _ctx.display ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+      }, null, 40, ["size", "model", "config", "name", "prop", "step-active", "expand-more", "label-width", "onChange"])) : _ctx.type && _ctx.display ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
         vue.createVNode(_component_el_form_item, {
           style: vue.normalizeStyle(_ctx.config.tip ? "flex: 1" : ""),
-          class: vue.normalizeClass({ hidden: _ctx.itemLabelWidth === 0 || !_ctx.config.text }),
+          class: vue.normalizeClass({ hidden: `${_ctx.itemLabelWidth}` === "0" || !_ctx.config.text }),
           prop: _ctx.itemProp,
           "label-width": _ctx.itemLabelWidth,
           rules: _ctx.rule
@@ -375,7 +390,7 @@
                   disabled: _ctx.disabled,
                   prop: _ctx.itemProp,
                   onChange: _ctx.onChangeHandler
-                }, null, 8, ["size", "model", "config", "name", "disabled", "prop", "onChange"]))
+                }, null, 40, ["size", "model", "config", "name", "disabled", "prop", "onChange"]))
               ]),
               _: 1
             })) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tagName), {
@@ -387,7 +402,7 @@
               disabled: _ctx.disabled,
               prop: _ctx.itemProp,
               onChange: _ctx.onChangeHandler
-            }, null, 8, ["size", "model", "config", "name", "disabled", "prop", "onChange"])),
+            }, null, 40, ["size", "model", "config", "name", "disabled", "prop", "onChange"])),
             _ctx.extra ? (vue.openBlock(), vue.createElementBlock("div", {
               key: 2,
               innerHTML: _ctx.extra,
@@ -1478,7 +1493,7 @@
           }
           emit("select", selection, row);
           if (typeof props.config.onSelect === "function") {
-            props.config.onSelect(mForm, { selection, row });
+            props.config.onSelect(mForm, { selection, row, config: props.config });
           }
         },
         toggleRowSelection(row, selected) {
@@ -1883,11 +1898,11 @@
     const { config, model, prop } = props;
     tab.name = tab.paneName;
     if (typeof config.onTabClick === "function") {
-      config.onTabClick(mForm, tab, { model, formValue: mForm?.values, prop });
+      config.onTabClick(mForm, tab, { model, formValue: mForm?.values, prop, config });
     }
     const tabConfig = config.items.find((item) => tab.name === item.status);
     if (tabConfig && typeof tabConfig.onTabClick === "function") {
-      tabConfig.onTabClick(mForm, tab, { model, formValue: mForm?.values, prop });
+      tabConfig.onTabClick(mForm, tab, { model, formValue: mForm?.values, prop, config });
     }
   };
   const Tab = vue.defineComponent({
@@ -1942,7 +1957,11 @@
           if (!props.config.name)
             throw new Error("dynamic tab \u5FC5\u987B\u914D\u7F6Ename");
           if (typeof props.config.onTabAdd === "function") {
-            props.config.onTabAdd(mForm, { model: props.model });
+            props.config.onTabAdd(mForm, {
+              model: props.model,
+              prop: props.prop,
+              config: props.config
+            });
           } else if (tabs.value.length > 0) {
             const newObj = lodashEs.cloneDeep(tabs.value[0]);
             newObj.title = `\u6807\u7B7E${tabs.value.length + 1}`;
@@ -1955,7 +1974,11 @@
           if (!props.config.name)
             throw new Error("dynamic tab \u5FC5\u987B\u914D\u7F6Ename");
           if (typeof props.config.onTabRemove === "function") {
-            props.config.onTabRemove(mForm, tabName, { model: props.model });
+            props.config.onTabRemove(mForm, tabName, {
+              model: props.model,
+              prop: props.prop,
+              config: props.config
+            });
           } else {
             props.model[props.config.name].splice(+tabName, 1);
             if (tabName < activeTabName.value || activeTabName.value >= props.model[props.config.name].length) {
@@ -1970,7 +1993,7 @@
         changeHandler: () => {
           emit("change", props.model);
           if (typeof props.config.onChange === "function") {
-            props.config.onChange(mForm, { model: props.model });
+            props.config.onChange(mForm, { model: props.model, prop: props.prop, config: props.config });
           }
         }
       };
@@ -2393,6 +2416,14 @@
           });
         } else if (props.model && props.name && v instanceof Date) {
           props.model[props.name] = utils.datetimeFormatter(v.toString(), "");
+        } else if (names?.length) {
+          names.forEach((item) => {
+            if (props.model) {
+              props.model[item] = void 0;
+            }
+          });
+        } else if (props.name) {
+          props.model[props.name] = void 0;
         }
       };
       return {
@@ -2889,7 +2920,8 @@
             body = body(mForm, {
               model: props.model,
               formValue: mForm?.values,
-              formValues: mForm?.values
+              formValues: mForm?.values,
+              config: props.config
             });
           }
           body.query = query.value;
@@ -2912,7 +2944,8 @@
           res = option.afterRequest(mForm, res, {
             model: props.model,
             formValue: mForm?.values,
-            formValues: mForm?.values
+            formValues: mForm?.values,
+            config: props.config
           });
         }
         const optionsData = res[option.root];
@@ -3004,7 +3037,8 @@
             model: props.model,
             prop: props.prop,
             formValues: mForm?.values,
-            formValue: mForm?.values
+            formValue: mForm?.values,
+            config: props.config
           })).then((data) => {
             options.value = data;
           });
@@ -3773,7 +3807,7 @@
   }
   var FormDialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 
-  var index$1 = '';
+  var index$1 = /* #__PURE__ */ (() => ".m-form-dialog .el-dialog__body {\n  padding: 0 !important;\n}\n.m-form-dialog .m-dialog-body {\n  padding: 0 20px;\n}\n.m-form-dialog .el-table .m-form-item .el-form-item {\n  margin-bottom: 0;\n}\n\n.fade-enter-active,\n.fade-leave-active {\n  transition: opacity 0.5s;\n}\n\n.fade-enter, .fade-leave-to {\n  opacity: 0;\n}\n\n.m-form .m-form-tip {\n  color: rgba(0, 0, 0, 0.45);\n  font-size: 12px;\n  transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);\n}\n.m-form .m-form-schematic {\n  max-width: 50%;\n  height: 100%;\n}\n.m-form .el-table .cell > div.m-form-container {\n  display: block;\n}\n.m-form .el-tabs {\n  margin-bottom: 10px;\n}\n.m-form .el-form-item.hidden .el-form-item__label {\n  display: none;\n}\n\n.magic-datetime-picker-popper .el-picker-panel__footer button:first-child {\n  display: none;\n}\n\ndiv.m-fields-link {\n  width: fit-content;\n}\n\nfieldset.m-fieldset {\n  position: relative;\n  border: 1px solid rgb(229, 229, 229);\n  margin-top: 10px;\n  margin-bottom: 10px;\n  min-inline-size: auto;\n}\nfieldset.m-fieldset legend {\n  font-size: 14px;\n  position: absolute;\n  border: 0;\n  top: -10px;\n  left: 20px;\n  background: rgb(255, 255, 255);\n  width: auto;\n  padding: 0px 3px;\n  font-weight: bold;\n  line-height: 20px;\n}\nfieldset.m-fieldset .m-form-tip {\n  margin-left: 5px;\n}\n\n.m-fields-group-list .el-button--text {\n  padding: 0;\n  margin-bottom: 7px;\n}\n.m-fields-group-list .el-tree-node__expand-icon {\n  padding: 0;\n  margin-bottom: 7px;\n}\n.m-fields-group-list .el-tree-node__expand-icon.expand {\n  transform: rotate(90deg);\n}\n.m-fields-group-list .m-fields-group-list-item {\n  border-bottom: 1px solid #ebeef5;\n  margin-bottom: 7px;\n}\n.m-fields-group-list .m-fields-group-list-item:last-of-type {\n  border-bottom: 0;\n}\n\n.m-form-panel .el-card__header:hover {\n  background: #f2f6fc;\n}\n.m-form-panel .el-card__header a {\n  color: #409eff;\n}\n.m-form-panel .el-card__body {\n  padding: 10px;\n}\n.m-form-panel .m-form-tip {\n  margin-left: 5px;\n}\n\n.m-fields-table {\n  width: 100%;\n}\n.m-fields-table.fixed {\n  position: fixed;\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  z-index: 100;\n}\n.m-fields-table.fixed::before {\n  content: \" \";\n  display: block;\n  background: rgba(0, 0, 0, 0.5);\n  position: fixed;\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  z-index: 100;\n}\n.m-fields-table.fixed > .el-form-item__content {\n  z-index: 101;\n  position: relative;\n  margin: 10vh auto;\n  max-width: fit-content;\n}\n.m-fields-table.fixed table {\n  width: 95vw !important;\n}\n.m-fields-table th {\n  background-color: #f2f2f2 !important;\n  color: #333 !important;\n}\n.m-fields-table .el-table th {\n  padding: 0 !important;\n}\n.m-fields-table .el-table__column--dropable {\n  cursor: move;\n}\n.m-fields-table .el-form-item__content .el-input-group {\n  vertical-align: middle;\n}\n.m-fields-table.m-fields-table-item-extra tr.expanded td {\n  border-bottom: 0;\n}\n.m-fields-table .el-table__expanded-cell .m-form-tip {\n  margin-left: 80px;\n}\n.m-fields-table .el-form-item {\n  margin-bottom: 0;\n}\n\n.m-select {\n  width: 100%;\n}")();
 
   const defaultInstallOpt = {};
   const install = (app, opt) => {