@tmagic/form 1.0.0-rc.4 → 1.0.0-rc.7

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 }; }
@@ -208,7 +208,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")
@@ -347,10 +358,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 +386,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 +398,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,
@@ -2393,6 +2404,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 {
@@ -3773,7 +3792,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) => {