@tmagic/form 1.0.0-beta.6 → 1.0.0-rc.10

package/dist/tmagic-form.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('lodash-es'), require('@element-plus/icons'), require('element-plus'), require('sortablejs'), require('@tmagic/utils')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'lodash-es', '@element-plus/icons', 'element-plus', 'sortablejs', '@tmagic/utils'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicForm = {}, global.vue, global.lodashEs, global.icons, global.elementPlus, global.Sortable, global.utils));
-})(this, (function (exports, vue, lodashEs, icons, elementPlus, Sortable, utils) { 'use strict';
+  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));
+})(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 }; }
 
@@ -62,7 +62,11 @@
     asyncLoadConfig(value, initValue2, item);
     if (name && !items && typeof initValue2[name] !== "undefined") {
       if (typeof value[name] === "undefined") {
-        value[name] = typeof initValue2[name] === "object" ? lodashEs.cloneDeep(initValue2[name]) : initValue2[name];
+        if (type === "number") {
+          value[name] = Number(initValue2[name]);
+        } else {
+          value[name] = typeof initValue2[name] === "object" ? lodashEs.cloneDeep(initValue2[name]) : initValue2[name];
+        }
       }
       return value;
     }
@@ -113,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) {
@@ -144,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;
@@ -172,8 +178,9 @@
     return target;
   };
 
-  const _sfc_main$s = vue.defineComponent({
+  const _sfc_main$t = vue.defineComponent({
     name: "m-form-container",
+    components: { WarningFilled: icons.WarningFilled },
     props: {
       labelWidth: String,
       expandMore: Boolean,
@@ -203,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")
@@ -231,6 +249,7 @@
         }
         return display(mForm, props.config.display, props);
       });
+      const itemLabelWidth = vue.computed(() => props.config.labelWidth || props.labelWidth);
       vue.watchEffect(() => {
         expand.value = props.expandMore;
       });
@@ -242,7 +261,8 @@
             model: props.model,
             values: mForm?.initValues,
             formValue: mForm?.values,
-            prop: itemProp.value
+            prop: itemProp.value,
+            config: props.config
           });
         }
         if (filter === "number") {
@@ -256,7 +276,8 @@
             model: props.model,
             values: mForm?.initValues,
             formValue: mForm?.values,
-            prop: itemProp.value
+            prop: itemProp.value,
+            config: props.config
           });
         }
       };
@@ -267,9 +288,14 @@
       };
       const onChangeHandler = async function(v, key2) {
         const { filter, onChange, trim, name: name2, dynamicKey } = props.config;
-        let value = filterHandler(filter, v);
-        value = await changeHandler(onChange, value) ?? value;
-        value = trimHandler(trim, value) ?? value;
+        let value = v;
+        try {
+          value = filterHandler(filter, v);
+          value = await changeHandler(onChange, value) ?? value;
+          value = trimHandler(trim, value) ?? value;
+        } catch (e) {
+          console.error(e);
+        }
         if ((name2 || name2 === 0) && props.model !== value && (v !== value || props.model[name2] !== value)) {
           props.model[name2] = value;
         }
@@ -286,6 +312,7 @@
         itemProp,
         items,
         display: display$1,
+        itemLabelWidth,
         tagName,
         rule,
         tooltip,
@@ -296,24 +323,25 @@
       };
     }
   });
-  const _hoisted_1$g = ["innerHTML"];
+  const _hoisted_1$f = ["innerHTML"];
   const _hoisted_2$7 = ["innerHTML"];
   const _hoisted_3$7 = ["innerHTML"];
-  const _hoisted_4$6 = /* @__PURE__ */ vue.createElementVNode("i", { class: "el-icon-warning" }, null, -1);
-  const _hoisted_5$4 = ["innerHTML"];
-  const _hoisted_6$3 = {
+  const _hoisted_4$6 = ["innerHTML"];
+  const _hoisted_5$4 = {
     key: 4,
     style: { "text-align": "center" }
   };
-  function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$q(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_m_fields_hidden = vue.resolveComponent("m-fields-hidden");
     const _component_el_tooltip = vue.resolveComponent("el-tooltip");
     const _component_el_form_item = vue.resolveComponent("el-form-item");
+    const _component_warning_filled = vue.resolveComponent("warning-filled");
+    const _component_el_icon = vue.resolveComponent("el-icon");
     const _component_m_form_container = vue.resolveComponent("m-form-container");
     const _component_el_button = vue.resolveComponent("el-button");
     return _ctx.config ? (vue.openBlock(), vue.createElementBlock("div", {
       key: 0,
-      style: vue.normalizeStyle(_ctx.config.tip ? "display: flex" : ""),
+      style: vue.normalizeStyle(_ctx.config.tip ? "display: flex;align-items: baseline;" : ""),
       class: vue.normalizeClass([_ctx.config.className, "m-form-container"])
     }, [
       _ctx.type === "hidden" ? (vue.openBlock(), vue.createBlock(_component_m_fields_hidden, {
@@ -332,19 +360,20 @@
         prop: _ctx.itemProp,
         "step-active": _ctx.stepActive,
         "expand-more": _ctx.expand,
-        "label-width": _ctx.config.labelWidth || _ctx.labelWidth,
+        "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 }),
           prop: _ctx.itemProp,
-          "label-width": _ctx.config.text ? _ctx.config.labelWidth || _ctx.labelWidth : "0",
+          "label-width": _ctx.itemLabelWidth,
           rules: _ctx.rule
         }, {
           label: vue.withCtx(() => [
             vue.createElementVNode("span", {
               innerHTML: _ctx.type === "checkbox" ? "" : _ctx.config.text
-            }, null, 8, _hoisted_1$g)
+            }, null, 8, _hoisted_1$f)
           ]),
           default: vue.withCtx(() => [
             _ctx.tooltip ? (vue.openBlock(), vue.createBlock(_component_el_tooltip, { key: 0 }, {
@@ -361,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), {
@@ -373,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,
@@ -381,19 +410,23 @@
             }, null, 8, _hoisted_3$7)) : vue.createCommentVNode("", true)
           ]),
           _: 1
-        }, 8, ["style", "prop", "label-width", "rules"]),
+        }, 8, ["style", "class", "prop", "label-width", "rules"]),
         _ctx.config.tip ? (vue.openBlock(), vue.createBlock(_component_el_tooltip, {
           key: 0,
-          placement: "top",
-          style: { "line-height": "40px", "margin-left": "5px" }
+          placement: "left"
         }, {
           content: vue.withCtx(() => [
             vue.createElementVNode("div", {
               innerHTML: _ctx.config.tip
-            }, null, 8, _hoisted_5$4)
+            }, null, 8, _hoisted_4$6)
           ]),
           default: vue.withCtx(() => [
-            _hoisted_4$6
+            vue.createVNode(_component_el_icon, { style: { "line-height": "40px", "margin-left": "5px" } }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(_component_warning_filled)
+              ]),
+              _: 1
+            })
           ]),
           _: 1
         })) : vue.createCommentVNode("", true)
@@ -406,15 +439,15 @@
             size: _ctx.size,
             "step-active": _ctx.stepActive,
             "expand-more": _ctx.expand,
-            "label-width": _ctx.config.labelWidth || _ctx.labelWidth,
+            "label-width": _ctx.itemLabelWidth,
             prop: _ctx.itemProp,
             onChange: _ctx.onChangeHandler
           }, null, 8, ["model", "config", "size", "step-active", "expand-more", "label-width", "prop", "onChange"]);
         }), 128)) : vue.createCommentVNode("", true)
       ], 64)) : vue.createCommentVNode("", true),
-      _ctx.config.expand && _ctx.type !== "fieldset" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$3, [
+      _ctx.config.expand && _ctx.type !== "fieldset" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$4, [
         vue.createVNode(_component_el_button, {
-          type: "text",
+          text: "",
           onClick: _ctx.expandHandler
         }, {
           default: vue.withCtx(() => [
@@ -425,9 +458,9 @@
       ])) : vue.createCommentVNode("", true)
     ], 6)) : vue.createCommentVNode("", true);
   }
-  var Container = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["render", _sfc_render$p]]);
+  var Container = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["render", _sfc_render$q]]);
 
-  const _sfc_main$r = vue.defineComponent({
+  const _sfc_main$s = vue.defineComponent({
     name: "m-form-fieldset",
     props: {
       labelWidth: String,
@@ -479,7 +512,7 @@
       };
     }
   });
-  const _hoisted_1$f = ["innerHTML"];
+  const _hoisted_1$e = ["innerHTML"];
   const _hoisted_2$6 = ["innerHTML"];
   const _hoisted_3$6 = { key: 1 };
   const _hoisted_4$5 = ["innerHTML"];
@@ -493,7 +526,7 @@
   };
   const _hoisted_10$1 = { style: { "flex": "1" } };
   const _hoisted_11 = ["src"];
-  function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_checkbox = vue.resolveComponent("el-checkbox");
     const _component_m_form_container = vue.resolveComponent("m-form-container");
     return (_ctx.name ? _ctx.model[_ctx.name] : _ctx.model) ? (vue.openBlock(), vue.createElementBlock("fieldset", {
@@ -513,7 +546,7 @@
         default: vue.withCtx(() => [
           vue.createElementVNode("span", {
             innerHTML: _ctx.config.legend
-          }, null, 8, _hoisted_1$f),
+          }, null, 8, _hoisted_1$e),
           _ctx.config.extra ? (vue.openBlock(), vue.createElementBlock("span", {
             key: 0,
             innerHTML: _ctx.config.extra,
@@ -585,9 +618,9 @@
       }), 128)) : vue.createCommentVNode("", true)
     ], 4)) : vue.createCommentVNode("", true);
   }
-  var Fieldset = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["render", _sfc_render$o]]);
+  var Fieldset = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["render", _sfc_render$p]]);
 
-  const _sfc_main$q = vue.defineComponent({
+  const _sfc_main$r = vue.defineComponent({
     name: "m-form-group-list-item",
     components: { CaretRight: icons.CaretRight, CaretBottom: icons.CaretBottom },
     props: {
@@ -671,11 +704,11 @@
       };
     }
   });
-  const _hoisted_1$e = { class: "m-fields-group-list-item" };
+  const _hoisted_1$d = { class: "m-fields-group-list-item" };
   const _hoisted_2$5 = /* @__PURE__ */ vue.createTextVNode("\u4E0A\u79FB");
   const _hoisted_3$5 = /* @__PURE__ */ vue.createTextVNode("\u4E0B\u79FB");
   const _hoisted_4$4 = ["innerHTML"];
-  function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_caret_bottom = vue.resolveComponent("caret-bottom");
     const _component_caret_right = vue.resolveComponent("caret-right");
     const _component_el_icon = vue.resolveComponent("el-icon");
@@ -683,7 +716,7 @@
     const _component_CaretRight = vue.resolveComponent("CaretRight");
     const _component_CaretBottom = vue.resolveComponent("CaretBottom");
     const _component_m_form_container = vue.resolveComponent("m-form-container");
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [
       vue.createElementVNode("div", null, [
         vue.createVNode(_component_el_icon, {
           style: { "margin-right": "7px" },
@@ -695,7 +728,7 @@
           _: 1
         }, 8, ["onClick"]),
         vue.createVNode(_component_el_button, {
-          type: "text",
+          text: "",
           onClick: _ctx.expandHandler
         }, {
           default: vue.withCtx(() => [
@@ -704,7 +737,7 @@
           _: 1
         }, 8, ["onClick"]),
         vue.withDirectives(vue.createVNode(_component_el_button, {
-          type: "text",
+          text: "",
           icon: _ctx.Delete,
           style: { "color": "#f56c6c" },
           onClick: _ctx.removeHandler
@@ -713,7 +746,7 @@
         ]),
         _ctx.movable() ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
           vue.withDirectives(vue.createVNode(_component_el_button, {
-            type: "text",
+            text: "",
             size: "small",
             onClick: _cache[0] || (_cache[0] = ($event) => _ctx.changeOrder(-1))
           }, {
@@ -731,7 +764,7 @@
             [vue.vShow, _ctx.index !== 0]
           ]),
           vue.withDirectives(vue.createVNode(_component_el_button, {
-            type: "text",
+            text: "",
             size: "small",
             onClick: _cache[1] || (_cache[1] = ($event) => _ctx.changeOrder(1))
           }, {
@@ -766,9 +799,9 @@
       }, null, 8, ["config", "model", "labelWidth", "prop", "size", "onChange"])) : vue.createCommentVNode("", true)
     ]);
   }
-  var MFieldsGroupListItem = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["render", _sfc_render$n]]);
+  var MFieldsGroupListItem = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["render", _sfc_render$o]]);
 
-  const _sfc_main$p = vue.defineComponent({
+  const _sfc_main$q = vue.defineComponent({
     name: "m-form-group-list",
     components: { MFieldsGroupListItem },
     props: {
@@ -860,7 +893,7 @@
       };
     }
   });
-  const _hoisted_1$d = { class: "m-fields-group-list" };
+  const _hoisted_1$c = { class: "m-fields-group-list" };
   const _hoisted_2$4 = ["innerHTML"];
   const _hoisted_3$4 = {
     key: 1,
@@ -872,10 +905,10 @@
   ];
   const _hoisted_6$1 = /* @__PURE__ */ vue.createTextVNode("\u6DFB\u52A0\u7EC4");
   const _hoisted_7$1 = /* @__PURE__ */ vue.createTextVNode("\u5207\u6362\u4E3A\u8868\u683C");
-  function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_m_fields_group_list_item = vue.resolveComponent("m-fields-group-list-item");
     const _component_el_button = vue.resolveComponent("el-button");
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
       _ctx.config.extra ? (vue.openBlock(), vue.createElementBlock("div", {
         key: 0,
         innerHTML: _ctx.config.extra,
@@ -919,9 +952,9 @@
       }, 8, ["onClick"])) : vue.createCommentVNode("", true)
     ]);
   }
-  var GroupList = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["render", _sfc_render$m]]);
+  var GroupList = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["render", _sfc_render$n]]);
 
-  const _sfc_main$o = vue.defineComponent({
+  const _sfc_main$p = vue.defineComponent({
     name: "m-form-panel",
     components: { CaretBottom: icons.CaretBottom, CaretRight: icons.CaretRight },
     props: {
@@ -954,7 +987,7 @@
       };
     }
   });
-  const _hoisted_1$c = { class: "clearfix" };
+  const _hoisted_1$b = { class: "clearfix" };
   const _hoisted_2$3 = ["innerHTML"];
   const _hoisted_3$3 = {
     key: 0,
@@ -962,7 +995,7 @@
   };
   const _hoisted_4$2 = { style: { "flex": "1" } };
   const _hoisted_5$1 = ["src"];
-  function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_caret_bottom = vue.resolveComponent("caret-bottom");
     const _component_caret_right = vue.resolveComponent("caret-right");
     const _component_el_icon = vue.resolveComponent("el-icon");
@@ -974,7 +1007,7 @@
       "body-style": { display: _ctx.expand ? "block" : "none" }
     }, {
       header: vue.withCtx(() => [
-        vue.createElementVNode("div", _hoisted_1$c, [
+        vue.createElementVNode("div", _hoisted_1$b, [
           vue.createElementVNode("a", {
             href: "javascript:",
             style: { "width": "100%", "display": "block" },
@@ -1032,10 +1065,60 @@
       _: 3
     }, 8, ["body-style"])) : vue.createCommentVNode("", true);
   }
-  var Panel = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$l]]);
+  var Panel = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["render", _sfc_render$m]]);
+
+  const _sfc_main$o = vue.defineComponent({
+    props: {
+      labelWidth: String,
+      expandMore: Boolean,
+      span: Number,
+      model: {
+        type: Object,
+        default: () => ({})
+      },
+      config: {
+        type: Object,
+        default: () => ({})
+      },
+      prop: String,
+      size: String
+    },
+    emits: ["change"],
+    setup(props, { emit }) {
+      const mForm = vue.inject("mForm");
+      const changeHandler = () => emit("change", props.model);
+      return {
+        mForm,
+        display: vue.computed(() => display(mForm, props.config.display, props)),
+        changeHandler
+      };
+    }
+  });
+  function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
+    const _component_m_form_container = vue.resolveComponent("m-form-container");
+    const _component_el_col = vue.resolveComponent("el-col");
+    return vue.withDirectives((vue.openBlock(), vue.createBlock(_component_el_col, { span: _ctx.span }, {
+      default: vue.withCtx(() => [
+        vue.createVNode(_component_m_form_container, {
+          model: _ctx.model,
+          config: _ctx.config,
+          prop: _ctx.prop,
+          "label-width": _ctx.config.labelWidth || _ctx.labelWidth,
+          "expand-more": _ctx.expandMore,
+          size: _ctx.size,
+          onChange: _ctx.changeHandler
+        }, null, 8, ["model", "config", "prop", "label-width", "expand-more", "size", "onChange"])
+      ]),
+      _: 1
+    }, 8, ["span"])), [
+      [vue.vShow, _ctx.display && _ctx.config.type !== "hidden"]
+    ]);
+  }
+  var Col = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$l]]);
 
   const _sfc_main$n = vue.defineComponent({
     name: "m-form-row",
+    components: { Col },
     props: {
       labelWidth: String,
       expandMore: Boolean,
@@ -1057,38 +1140,27 @@
       const changeHandler = () => emit("change", props.name ? props.model[props.name] : props.model);
       return {
         mForm,
-        display(config) {
-          return display(mForm, config.display, props);
-        },
         changeHandler
       };
     }
   });
   function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
-    const _component_m_form_container = vue.resolveComponent("m-form-container");
-    const _component_el_col = vue.resolveComponent("el-col");
+    const _component_Col = vue.resolveComponent("Col");
     const _component_el_row = vue.resolveComponent("el-row");
     return vue.openBlock(), vue.createBlock(_component_el_row, { gutter: 10 }, {
       default: vue.withCtx(() => [
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.config.items, (col, index) => {
-          return vue.openBlock(), vue.createBlock(_component_el_col, {
-            style: vue.normalizeStyle(!_ctx.display(col) || col.type === "hidden" ? "display: none" : ""),
+          return vue.openBlock(), vue.createBlock(_component_Col, {
             key: col[_ctx.mForm?.keyProp || "__key"] ?? index,
-            span: col.span || _ctx.config.span || 24 / _ctx.config.items.length
-          }, {
-            default: vue.withCtx(() => [
-              vue.createVNode(_component_m_form_container, {
-                model: _ctx.name ? _ctx.model[_ctx.name] : _ctx.model,
-                config: col,
-                prop: _ctx.prop,
-                "label-width": _ctx.config.labelWidth || _ctx.labelWidth,
-                "expand-more": _ctx.expandMore,
-                size: _ctx.size,
-                onChange: _ctx.changeHandler
-              }, null, 8, ["model", "config", "prop", "label-width", "expand-more", "size", "onChange"])
-            ]),
-            _: 2
-          }, 1032, ["style", "span"]);
+            span: col.span || _ctx.config.span || 24 / _ctx.config.items.length,
+            config: col,
+            labelWidth: _ctx.config.labelWidth || _ctx.labelWidth,
+            expandMore: _ctx.expandMore,
+            model: _ctx.name ? _ctx.model[_ctx.name] : _ctx.model,
+            prop: _ctx.prop,
+            size: _ctx.size,
+            onChange: _ctx.changeHandler
+          }, null, 8, ["span", "config", "labelWidth", "expandMore", "model", "prop", "size", "onChange"]);
         }), 128))
       ]),
       _: 1
@@ -1421,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) {
@@ -1547,7 +1619,7 @@
       };
     }
   });
-  const _hoisted_1$b = ["innerHTML"];
+  const _hoisted_1$a = ["innerHTML"];
   const _hoisted_2$2 = { class: "el-form-item__content" };
   const _hoisted_3$2 = ["innerHTML"];
   const _hoisted_4$1 = /* @__PURE__ */ vue.createTextVNode("\u6DFB\u52A0");
@@ -1576,7 +1648,7 @@
         key: 0,
         style: { "color": "rgba(0, 0, 0, 0.45)" },
         innerHTML: _ctx.config.extra
-      }, null, 8, _hoisted_1$b)) : vue.createCommentVNode("", true),
+      }, null, 8, _hoisted_1$a)) : vue.createCommentVNode("", true),
       vue.createElementVNode("div", _hoisted_2$2, [
         vue.createVNode(_component_el_tooltip, {
           content: "\u62D6\u62FD\u53EF\u6392\u5E8F",
@@ -1617,8 +1689,8 @@
                 }, {
                   default: vue.withCtx((scope) => [
                     vue.withDirectives(vue.createVNode(_component_el_button, {
-                      style: { "color": "#f56c6c" },
-                      type: "text",
+                      type: "danger",
+                      text: "",
                       icon: _ctx.Delete,
                       onClick: ($event) => _ctx.removeHandler(scope.$index + 1 + _ctx.pagecontext * _ctx.pagesize - 1)
                     }, null, 8, ["icon", "onClick"]), [
@@ -1642,8 +1714,9 @@
                         vue.createVNode(_component_el_button, {
                           plain: "",
                           size: "small",
+                          type: "primary",
                           icon: _ctx.ArrowUp,
-                          type: "text",
+                          text: "",
                           onClick: ($event) => _ctx.upHandler(scope.$index + 1 + _ctx.pagecontext * _ctx.pagesize - 1),
                           onDblclick: ($event) => _ctx.topHandler(scope.$index + 1 + _ctx.pagecontext * _ctx.pagesize - 1)
                         }, null, 8, ["icon", "onClick", "onDblclick"])
@@ -1659,8 +1732,9 @@
                         vue.createVNode(_component_el_button, {
                           plain: "",
                           size: "small",
+                          type: "primary",
                           icon: _ctx.ArrowDown,
-                          type: "text",
+                          text: "",
                           onClick: ($event) => _ctx.downHandler(scope.$index + 1 + _ctx.pagecontext * _ctx.pagesize - 1),
                           onDblclick: ($event) => _ctx.bottomHandler(scope.$index + 1 + _ctx.pagecontext * _ctx.pagesize - 1)
                         }, null, 8, ["icon", "onClick", "onDblclick"])
@@ -1737,6 +1811,7 @@
           key: 1,
           icon: _ctx.Grid,
           size: "small",
+          type: "primary",
           onClick: _ctx.toggleMode
         }, {
           default: vue.withCtx(() => [
@@ -1748,6 +1823,7 @@
           key: 2,
           icon: _ctx.FullScreen,
           size: "small",
+          type: "primary",
           onClick: _ctx.toggleFullscreen
         }, {
           default: vue.withCtx(() => [
@@ -1822,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({
@@ -1881,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}`;
@@ -1894,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) {
@@ -1909,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 });
           }
         }
       };
@@ -2098,13 +2182,13 @@
       };
     }
   });
-  const _hoisted_1$a = {
+  const _hoisted_1$9 = {
     class: "m-cascader",
     style: { "width": "100%" }
   };
   function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_cascader = vue.resolveComponent("el-cascader");
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
       vue.createVNode(_component_el_cascader, {
         modelValue: _ctx.model[_ctx.name],
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.model[_ctx.name] = $event),
@@ -2144,7 +2228,7 @@
           } else {
             return props.config.activeValue;
           }
-          return "true";
+          return void 0;
         }),
         inactiveValue: vue.computed(() => {
           if (typeof props.config.inactiveValue === "undefined") {
@@ -2154,7 +2238,7 @@
           } else {
             return props.config.inactiveValue;
           }
-          return "false";
+          return void 0;
         }),
         changeHandler(value) {
           emit("change", value);
@@ -2227,7 +2311,7 @@
   }
   var CheckboxGroup = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$e]]);
 
-  const _hoisted_1$9 = { key: 0 };
+  const _hoisted_1$8 = { key: 0 };
   const __default__$2 = vue.defineComponent({
     name: "m-fields-color-picker"
   });
@@ -2247,7 +2331,7 @@
       const changeHandler = (value) => emit("change", value);
       return (_ctx, _cache) => {
         const _component_el_color_picker = vue.resolveComponent("el-color-picker");
-        return _ctx.model ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
+        return _ctx.model ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [
           vue.createVNode(_component_el_color_picker, {
             modelValue: _ctx.model[_ctx.name],
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.model[_ctx.name] = $event),
@@ -2283,10 +2367,10 @@
       };
     }
   });
-  const _hoisted_1$8 = { key: 0 };
+  const _hoisted_1$7 = { key: 0 };
   function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_date_picker = vue.resolveComponent("el-date-picker");
-    return _ctx.model ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [
+    return _ctx.model ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$7, [
       vue.createVNode(_component_el_date_picker, {
         modelValue: _ctx.model[_ctx.modelName],
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.model[_ctx.modelName] = $event),
@@ -2332,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 {
@@ -2390,10 +2482,10 @@
       };
     }
   });
-  const _hoisted_1$7 = { key: 0 };
+  const _hoisted_1$6 = { key: 0 };
   function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_date_picker = vue.resolveComponent("el-date-picker");
-    return _ctx.model ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$7, [
+    return _ctx.model ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, [
       vue.createVNode(_component_el_date_picker, {
         modelValue: _ctx.model[_ctx.name],
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.model[_ctx.name] = $event),
@@ -2410,7 +2502,7 @@
   }
   var DateTime = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$b]]);
 
-  const _hoisted_1$6 = { key: 0 };
+  const _hoisted_1$5 = { key: 0 };
   const __default__$1 = vue.defineComponent({
     name: "m-fields-display"
   });
@@ -2431,7 +2523,7 @@
       }
       useAddField(props.prop);
       return (_ctx, _cache) => {
-        return _ctx.model ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$6, vue.toDisplayString(_ctx.model[vue.unref(n)]), 1)) : vue.createCommentVNode("", true);
+        return _ctx.model ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$5, vue.toDisplayString(_ctx.model[vue.unref(n)]), 1)) : vue.createCommentVNode("", true);
       };
     }
   });
@@ -2501,12 +2593,12 @@
       }
     }
   });
-  const _hoisted_1$5 = { class: "m-fields-dynamic-field" };
+  const _hoisted_1$4 = { class: "m-fields-dynamic-field" };
   function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_input = vue.resolveComponent("el-input");
     const _component_el_form_item = vue.resolveComponent("el-form-item");
     const _component_el_form = vue.resolveComponent("el-form");
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
       vue.createVNode(_component_el_form, { size: "small" }, {
         default: vue.withCtx(() => [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(Object.keys(_ctx.fieldMap.value), (key) => {
@@ -2628,7 +2720,7 @@
       };
     }
   });
-  const _hoisted_1$4 = ["href"];
+  const _hoisted_1$3 = ["href"];
   const _hoisted_2$1 = {
     key: 2,
     class: "m-fields-link"
@@ -2642,12 +2734,13 @@
       target: "_blank",
       href: _ctx.href,
       style: vue.normalizeStyle(_ctx.config.css || {})
-    }, vue.toDisplayString(_ctx.displayText), 13, _hoisted_1$4)) : _ctx.config.href && _ctx.disabled ? (vue.openBlock(), vue.createElementBlock("span", {
+    }, vue.toDisplayString(_ctx.displayText), 13, _hoisted_1$3)) : _ctx.config.href && _ctx.disabled ? (vue.openBlock(), vue.createElementBlock("span", {
       key: 1,
       style: vue.normalizeStyle(_ctx.config.disabledCss || {})
     }, vue.toDisplayString(_ctx.displayText), 5)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$1, [
       vue.createVNode(_component_el_button, {
-        type: "text",
+        text: "",
+        type: "primary",
         onClick: _ctx.editHandler
       }, {
         default: vue.withCtx(() => [
@@ -2827,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;
@@ -2850,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];
@@ -2940,8 +3035,10 @@
         vue.watch(() => mForm?.values, () => {
           typeof props.config.options === "function" && Promise.resolve(props.config.options(mForm, {
             model: props.model,
+            prop: props.prop,
             formValues: mForm?.values,
-            formValue: mForm?.values
+            formValue: mForm?.values,
+            config: props.config
           })).then((data) => {
             options.value = data;
           });
@@ -2989,11 +3086,11 @@
         remote,
         options,
         moreLoadingVisible,
+        popperClass: mForm?.popperClass,
+        getOptions,
         getRequestFuc() {
           return getConfig("request");
         },
-        async getInitOption() {
-        },
         changeHandler(value) {
           emit("change", value);
         },
@@ -3010,10 +3107,6 @@
             options.value = await getOptions();
           }
         },
-        async editAfterAction() {
-          pgIndex.value = 0;
-          options.value = await getOptions();
-        },
         async remoteMethod(q) {
           if (!localOptions.value.length) {
             query.value = q;
@@ -3028,7 +3121,7 @@
       };
     }
   });
-  const _hoisted_1$3 = { key: 2 };
+  const _hoisted_1$2 = { key: 2 };
   function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_option = vue.resolveComponent("el-option");
     const _component_el_option_group = vue.resolveComponent("el-option-group");
@@ -3042,6 +3135,7 @@
       ref: "select",
       clearable: "",
       filterable: "",
+      "popper-class": `m-select-popper ${_ctx.popperClass}`,
       size: _ctx.size,
       remote: _ctx.remote,
       placeholder: _ctx.config.placeholder,
@@ -3049,21 +3143,21 @@
       "value-key": _ctx.config.valueKey || "value",
       "allow-create": _ctx.config.allowCreate,
       disabled: _ctx.disabled,
-      "remote-method": _ctx.remoteMethod,
+      "remote-method": _ctx.config.remote && _ctx.remoteMethod,
       onChange: _ctx.changeHandler,
       onVisibleChange: _ctx.visibleHandler
     }, {
       default: vue.withCtx(() => [
         _ctx.config.group ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(_ctx.options, (group, index) => {
           return vue.openBlock(), vue.createBlock(_component_el_option_group, {
-            key: group.label + index,
+            key: index,
             label: group.label,
             disabled: group.disabled
           }, {
             default: vue.withCtx(() => [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(group.options, (item, index2) => {
                 return vue.openBlock(), vue.createBlock(_component_el_option, {
-                  key: item.label + index2,
+                  key: index2,
                   label: item.label,
                   value: item.value,
                   disabled: item.disabled
@@ -3080,12 +3174,12 @@
             disabled: option.disabled
           }, null, 8, ["label", "value", "disabled"]);
         }), 128)),
-        _ctx.moreLoadingVisible ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, null, 512)), [
+        _ctx.moreLoadingVisible ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, null, 512)), [
           [_directive_loading, true]
         ]) : vue.createCommentVNode("", true)
       ]),
       _: 1
-    }, 8, ["modelValue", "size", "remote", "placeholder", "multiple", "value-key", "allow-create", "disabled", "remote-method", "onChange", "onVisibleChange"])), [
+    }, 8, ["modelValue", "popper-class", "size", "remote", "placeholder", "multiple", "value-key", "allow-create", "disabled", "remote-method", "onChange", "onVisibleChange"])), [
       [_directive_loading, _ctx.loading]
     ]) : vue.createCommentVNode("", true);
   }
@@ -3157,6 +3251,7 @@
     },
     emits: ["change", "input"],
     setup(props, { emit }) {
+      const mForm = vue.inject("mForm");
       useAddField(props.prop);
       const modelName = vue.computed(() => props.name || props.config.name || "");
       return {
@@ -3165,12 +3260,10 @@
           emit("change", v);
         },
         inputHandler(v) {
-          const mForm = vue.inject("mForm");
           emit("input", v);
           mForm?.$emit("field-input", props.prop, v);
         },
         buttonClickHandler() {
-          const mForm = vue.inject("mForm");
           if (typeof props.config.append === "string")
             return;
           if (props.config.append?.handler) {
@@ -3234,7 +3327,7 @@
       };
     }
   });
-  const _hoisted_1$2 = { key: 0 };
+  const _hoisted_1$1 = { key: 0 };
   function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_button = vue.resolveComponent("el-button");
     const _component_el_input = vue.resolveComponent("el-input");
@@ -3252,17 +3345,18 @@
       _ctx.config.append ? {
         name: "append",
         fn: vue.withCtx(() => [
-          typeof _ctx.config.append === "string" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$2, vue.toDisplayString(_ctx.config.append), 1)) : vue.createCommentVNode("", true),
+          typeof _ctx.config.append === "string" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$1, vue.toDisplayString(_ctx.config.append), 1)) : vue.createCommentVNode("", true),
           typeof _ctx.config.append === "object" && _ctx.config.append.type === "button" ? (vue.openBlock(), vue.createBlock(_component_el_button, {
             key: 1,
             style: { "color": "#409eff" },
-            onClick: _ctx.buttonClickHandler
+            size: _ctx.size,
+            onClick: vue.withModifiers(_ctx.buttonClickHandler, ["prevent"])
           }, {
             default: vue.withCtx(() => [
               vue.createTextVNode(vue.toDisplayString(_ctx.config.append.text), 1)
             ]),
             _: 1
-          }, 8, ["onClick"])) : vue.createCommentVNode("", true)
+          }, 8, ["size", "onClick"])) : vue.createCommentVNode("", true)
         ])
       } : void 0
     ]), 1032, ["modelValue", "size", "placeholder", "disabled", "onChange", "onInput"]);
@@ -3301,22 +3395,19 @@
       };
     }
   });
-  const _hoisted_1$1 = { key: 0 };
   function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_input = vue.resolveComponent("el-input");
-    return _ctx.model ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
-      vue.createVNode(_component_el_input, {
-        modelValue: _ctx.model[_ctx.name],
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.model[_ctx.name] = $event),
-        type: "textarea",
-        size: _ctx.size,
-        clearable: "",
-        placeholder: _ctx.config.placeholder,
-        disabled: _ctx.disabled,
-        onChange: _ctx.changeHandler,
-        onInput: _ctx.inputHandler
-      }, null, 8, ["modelValue", "size", "placeholder", "disabled", "onChange", "onInput"])
-    ])) : vue.createCommentVNode("", true);
+    return vue.openBlock(), vue.createBlock(_component_el_input, {
+      modelValue: _ctx.model[_ctx.name],
+      "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.model[_ctx.name] = $event),
+      type: "textarea",
+      size: _ctx.size,
+      clearable: "",
+      placeholder: _ctx.config.placeholder,
+      disabled: _ctx.disabled,
+      onChange: _ctx.changeHandler,
+      onInput: _ctx.inputHandler
+    }, null, 8, ["modelValue", "size", "placeholder", "disabled", "onChange", "onInput"]);
   }
   var Textarea = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3]]);
 
@@ -3406,6 +3497,9 @@
       keyProp: {
         type: String,
         default: "__key"
+      },
+      popperClass: {
+        type: String
       }
     },
     emits: ["change", "field-input", "field-change"],
@@ -3417,6 +3511,7 @@
       const requestFuc = getConfig("request");
       const formState = vue.reactive({
         keyProp: props.keyProp,
+        popperClass: props.popperClass,
         config: props.config,
         initValues: props.initValues,
         parentValues: props.parentValues,
@@ -3460,7 +3555,7 @@
         submitForm: async (native) => {
           try {
             await elForm.value?.validate();
-            return native ? values.value : lodashEs.cloneDeep(values.value);
+            return native ? values.value : lodashEs.cloneDeep(vue.toRaw(values.value));
           } catch (invalidFields) {
             const error = [];
             Object.entries(invalidFields).forEach(([, ValidateError]) => {
@@ -3712,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) => {
@@ -3787,8 +3882,7 @@
   exports.initValue = initValue;
   exports.useAddField = useAddField;
 
-  Object.defineProperty(exports, '__esModule', { value: true });
-  exports[Symbol.toStringTag] = 'Module';
+  Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
 
 }));
 //# sourceMappingURL=tmagic-form.umd.js.map