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

package/dist/tmagic-form.es.js

@@ -1,6 +1,6 @@
-import { toRaw, defineComponent, inject, ref, computed, resolveComponent, watchEffect, openBlock, createElementBlock, normalizeStyle, normalizeClass, createBlock, resolveDynamicComponent, Fragment, createVNode, withCtx, createElementVNode, createCommentVNode, renderList, createTextVNode, toDisplayString, withDirectives, vShow, renderSlot, onMounted, toRefs, getCurrentInstance, watch, unref, reactive, onBeforeUnmount, vModelText, onBeforeMount, resolveDirective, createSlots, provide } from 'vue';
+import { toRaw, defineComponent, inject, ref, computed, resolveComponent, watchEffect, openBlock, createElementBlock, normalizeStyle, normalizeClass, createBlock, resolveDynamicComponent, Fragment, createVNode, withCtx, createElementVNode, createCommentVNode, renderList, createTextVNode, toDisplayString, withDirectives, vShow, renderSlot, onMounted, toRefs, getCurrentInstance, watch, unref, reactive, onBeforeUnmount, vModelText, onBeforeMount, resolveDirective, createSlots, withModifiers, provide } from 'vue';
+import { WarningFilled, CaretRight, CaretBottom, Delete, ArrowDown, ArrowUp, FullScreen, Grid } from '@element-plus/icons';
 import { cloneDeep, isEqual } from 'lodash-es';
-import { CaretRight, CaretBottom, Delete, ArrowDown, ArrowUp, FullScreen, Grid } from '@element-plus/icons';
 import { ElMessage } from 'element-plus';
 import Sortable from 'sortablejs';
 import { asyncLoadJs, sleep, datetimeFormatter } from '@tmagic/utils';
@@ -59,7 +59,11 @@ const initValueItem = function(mForm, item, initValue2, value) {
   asyncLoadConfig(value, initValue2, item);
   if (name && !items && typeof initValue2[name] !== "undefined") {
     if (typeof value[name] === "undefined") {
-      value[name] = typeof initValue2[name] === "object" ? cloneDeep(initValue2[name]) : initValue2[name];
+      if (type === "number") {
+        value[name] = Number(initValue2[name]);
+      } else {
+        value[name] = typeof initValue2[name] === "object" ? cloneDeep(initValue2[name]) : initValue2[name];
+      }
     }
     return value;
   }
@@ -110,7 +114,8 @@ const filterFunction = (mForm, config, props) => {
     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) {
@@ -141,7 +146,8 @@ const getRules = function(mForm, rules = [], props) {
         model: props.model,
         parent: mForm?.parentValues || {},
         formValue: mForm?.values || props.model,
-        prop: props.prop
+        prop: props.prop,
+        config: props.config
       }, mForm);
     }
     return item;
@@ -169,8 +175,9 @@ var _export_sfc = (sfc, props) => {
   return target;
 };
 
-const _sfc_main$s = defineComponent({
+const _sfc_main$t = defineComponent({
   name: "m-form-container",
+  components: { WarningFilled },
   props: {
     labelWidth: String,
     expandMore: Boolean,
@@ -200,7 +207,18 @@ const _sfc_main$s = defineComponent({
     const expand = ref(false);
     const name = computed(() => props.config.name || "");
     const items = computed(() => props.config.items);
-    const itemProp = computed(() => name.value ? `${props.prop}${props.prop ? "." : ""}${name.value}` : props.prop);
+    const itemProp = 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 = computed(() => {
       const component = resolveComponent(`m-${items.value ? "form" : "fields"}-${type.value}`);
       if (typeof component !== "string")
@@ -228,6 +246,7 @@ const _sfc_main$s = defineComponent({
       }
       return display(mForm, props.config.display, props);
     });
+    const itemLabelWidth = computed(() => props.config.labelWidth || props.labelWidth);
     watchEffect(() => {
       expand.value = props.expandMore;
     });
@@ -239,7 +258,8 @@ const _sfc_main$s = defineComponent({
           model: props.model,
           values: mForm?.initValues,
           formValue: mForm?.values,
-          prop: itemProp.value
+          prop: itemProp.value,
+          config: props.config
         });
       }
       if (filter === "number") {
@@ -253,7 +273,8 @@ const _sfc_main$s = defineComponent({
           model: props.model,
           values: mForm?.initValues,
           formValue: mForm?.values,
-          prop: itemProp.value
+          prop: itemProp.value,
+          config: props.config
         });
       }
     };
@@ -264,9 +285,14 @@ const _sfc_main$s = defineComponent({
     };
     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;
       }
@@ -283,6 +309,7 @@ const _sfc_main$s = defineComponent({
       itemProp,
       items,
       display: display$1,
+      itemLabelWidth,
       tagName,
       rule,
       tooltip,
@@ -293,24 +320,25 @@ const _sfc_main$s = defineComponent({
     };
   }
 });
-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__ */ 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 = resolveComponent("m-fields-hidden");
   const _component_el_tooltip = resolveComponent("el-tooltip");
   const _component_el_form_item = resolveComponent("el-form-item");
+  const _component_warning_filled = resolveComponent("warning-filled");
+  const _component_el_icon = resolveComponent("el-icon");
   const _component_m_form_container = resolveComponent("m-form-container");
   const _component_el_button = resolveComponent("el-button");
   return _ctx.config ? (openBlock(), createElementBlock("div", {
     key: 0,
-    style: normalizeStyle(_ctx.config.tip ? "display: flex" : ""),
+    style: normalizeStyle(_ctx.config.tip ? "display: flex;align-items: baseline;" : ""),
     class: normalizeClass([_ctx.config.className, "m-form-container"])
   }, [
     _ctx.type === "hidden" ? (openBlock(), createBlock(_component_m_fields_hidden, {
@@ -329,19 +357,20 @@ function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
       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 ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+    }, null, 40, ["size", "model", "config", "name", "prop", "step-active", "expand-more", "label-width", "onChange"])) : _ctx.type && _ctx.display ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
       createVNode(_component_el_form_item, {
         style: normalizeStyle(_ctx.config.tip ? "flex: 1" : ""),
+        class: 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: withCtx(() => [
           createElementVNode("span", {
             innerHTML: _ctx.type === "checkbox" ? "" : _ctx.config.text
-          }, null, 8, _hoisted_1$g)
+          }, null, 8, _hoisted_1$f)
         ]),
         default: withCtx(() => [
           _ctx.tooltip ? (openBlock(), createBlock(_component_el_tooltip, { key: 0 }, {
@@ -358,7 +387,7 @@ function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
                 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
           })) : (openBlock(), createBlock(resolveDynamicComponent(_ctx.tagName), {
@@ -370,7 +399,7 @@ function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
             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 ? (openBlock(), createElementBlock("div", {
             key: 2,
             innerHTML: _ctx.extra,
@@ -378,19 +407,23 @@ function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
           }, null, 8, _hoisted_3$7)) : createCommentVNode("", true)
         ]),
         _: 1
-      }, 8, ["style", "prop", "label-width", "rules"]),
+      }, 8, ["style", "class", "prop", "label-width", "rules"]),
       _ctx.config.tip ? (openBlock(), createBlock(_component_el_tooltip, {
         key: 0,
-        placement: "top",
-        style: { "line-height": "40px", "margin-left": "5px" }
+        placement: "left"
       }, {
         content: withCtx(() => [
           createElementVNode("div", {
             innerHTML: _ctx.config.tip
-          }, null, 8, _hoisted_5$4)
+          }, null, 8, _hoisted_4$6)
         ]),
         default: withCtx(() => [
-          _hoisted_4$6
+          createVNode(_component_el_icon, { style: { "line-height": "40px", "margin-left": "5px" } }, {
+            default: withCtx(() => [
+              createVNode(_component_warning_filled)
+            ]),
+            _: 1
+          })
         ]),
         _: 1
       })) : createCommentVNode("", true)
@@ -403,15 +436,15 @@ function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
           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)) : createCommentVNode("", true)
     ], 64)) : createCommentVNode("", true),
-    _ctx.config.expand && _ctx.type !== "fieldset" ? (openBlock(), createElementBlock("div", _hoisted_6$3, [
+    _ctx.config.expand && _ctx.type !== "fieldset" ? (openBlock(), createElementBlock("div", _hoisted_5$4, [
       createVNode(_component_el_button, {
-        type: "text",
+        text: "",
         onClick: _ctx.expandHandler
       }, {
         default: withCtx(() => [
@@ -422,9 +455,9 @@ function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
     ])) : createCommentVNode("", true)
   ], 6)) : 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 = defineComponent({
+const _sfc_main$s = defineComponent({
   name: "m-form-fieldset",
   props: {
     labelWidth: String,
@@ -476,7 +509,7 @@ const _sfc_main$r = defineComponent({
     };
   }
 });
-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"];
@@ -490,7 +523,7 @@ const _hoisted_9$1 = {
 };
 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 = resolveComponent("el-checkbox");
   const _component_m_form_container = resolveComponent("m-form-container");
   return (_ctx.name ? _ctx.model[_ctx.name] : _ctx.model) ? (openBlock(), createElementBlock("fieldset", {
@@ -510,7 +543,7 @@ function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
       default: withCtx(() => [
         createElementVNode("span", {
           innerHTML: _ctx.config.legend
-        }, null, 8, _hoisted_1$f),
+        }, null, 8, _hoisted_1$e),
         _ctx.config.extra ? (openBlock(), createElementBlock("span", {
           key: 0,
           innerHTML: _ctx.config.extra,
@@ -582,9 +615,9 @@ function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
     }), 128)) : createCommentVNode("", true)
   ], 4)) : 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 = defineComponent({
+const _sfc_main$r = defineComponent({
   name: "m-form-group-list-item",
   components: { CaretRight, CaretBottom },
   props: {
@@ -668,11 +701,11 @@ const _sfc_main$q = defineComponent({
     };
   }
 });
-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__ */ createTextVNode("\u4E0A\u79FB");
 const _hoisted_3$5 = /* @__PURE__ */ 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 = resolveComponent("caret-bottom");
   const _component_caret_right = resolveComponent("caret-right");
   const _component_el_icon = resolveComponent("el-icon");
@@ -680,7 +713,7 @@ function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_CaretRight = resolveComponent("CaretRight");
   const _component_CaretBottom = resolveComponent("CaretBottom");
   const _component_m_form_container = resolveComponent("m-form-container");
-  return openBlock(), createElementBlock("div", _hoisted_1$e, [
+  return openBlock(), createElementBlock("div", _hoisted_1$d, [
     createElementVNode("div", null, [
       createVNode(_component_el_icon, {
         style: { "margin-right": "7px" },
@@ -692,7 +725,7 @@ function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
         _: 1
       }, 8, ["onClick"]),
       createVNode(_component_el_button, {
-        type: "text",
+        text: "",
         onClick: _ctx.expandHandler
       }, {
         default: withCtx(() => [
@@ -701,7 +734,7 @@ function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
         _: 1
       }, 8, ["onClick"]),
       withDirectives(createVNode(_component_el_button, {
-        type: "text",
+        text: "",
         icon: _ctx.Delete,
         style: { "color": "#f56c6c" },
         onClick: _ctx.removeHandler
@@ -710,7 +743,7 @@ function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
       ]),
       _ctx.movable() ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
         withDirectives(createVNode(_component_el_button, {
-          type: "text",
+          text: "",
           size: "small",
           onClick: _cache[0] || (_cache[0] = ($event) => _ctx.changeOrder(-1))
         }, {
@@ -728,7 +761,7 @@ function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
           [vShow, _ctx.index !== 0]
         ]),
         withDirectives(createVNode(_component_el_button, {
-          type: "text",
+          text: "",
           size: "small",
           onClick: _cache[1] || (_cache[1] = ($event) => _ctx.changeOrder(1))
         }, {
@@ -763,9 +796,9 @@ function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
     }, null, 8, ["config", "model", "labelWidth", "prop", "size", "onChange"])) : 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 = defineComponent({
+const _sfc_main$q = defineComponent({
   name: "m-form-group-list",
   components: { MFieldsGroupListItem },
   props: {
@@ -857,7 +890,7 @@ const _sfc_main$p = defineComponent({
     };
   }
 });
-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,
@@ -869,10 +902,10 @@ const _hoisted_5$2 = [
 ];
 const _hoisted_6$1 = /* @__PURE__ */ createTextVNode("\u6DFB\u52A0\u7EC4");
 const _hoisted_7$1 = /* @__PURE__ */ 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 = resolveComponent("m-fields-group-list-item");
   const _component_el_button = resolveComponent("el-button");
-  return openBlock(), createElementBlock("div", _hoisted_1$d, [
+  return openBlock(), createElementBlock("div", _hoisted_1$c, [
     _ctx.config.extra ? (openBlock(), createElementBlock("div", {
       key: 0,
       innerHTML: _ctx.config.extra,
@@ -916,9 +949,9 @@ function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
     }, 8, ["onClick"])) : 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 = defineComponent({
+const _sfc_main$p = defineComponent({
   name: "m-form-panel",
   components: { CaretBottom, CaretRight },
   props: {
@@ -951,7 +984,7 @@ const _sfc_main$o = defineComponent({
     };
   }
 });
-const _hoisted_1$c = { class: "clearfix" };
+const _hoisted_1$b = { class: "clearfix" };
 const _hoisted_2$3 = ["innerHTML"];
 const _hoisted_3$3 = {
   key: 0,
@@ -959,7 +992,7 @@ const _hoisted_3$3 = {
 };
 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 = resolveComponent("caret-bottom");
   const _component_caret_right = resolveComponent("caret-right");
   const _component_el_icon = resolveComponent("el-icon");
@@ -971,7 +1004,7 @@ function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
     "body-style": { display: _ctx.expand ? "block" : "none" }
   }, {
     header: withCtx(() => [
-      createElementVNode("div", _hoisted_1$c, [
+      createElementVNode("div", _hoisted_1$b, [
         createElementVNode("a", {
           href: "javascript:",
           style: { "width": "100%", "display": "block" },
@@ -1029,10 +1062,60 @@ function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["body-style"])) : 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 = 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 = inject("mForm");
+    const changeHandler = () => emit("change", props.model);
+    return {
+      mForm,
+      display: computed(() => display(mForm, props.config.display, props)),
+      changeHandler
+    };
+  }
+});
+function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_m_form_container = resolveComponent("m-form-container");
+  const _component_el_col = resolveComponent("el-col");
+  return withDirectives((openBlock(), createBlock(_component_el_col, { span: _ctx.span }, {
+    default: withCtx(() => [
+      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"])), [
+    [vShow, _ctx.display && _ctx.config.type !== "hidden"]
+  ]);
+}
+var Col = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$l]]);
 
 const _sfc_main$n = defineComponent({
   name: "m-form-row",
+  components: { Col },
   props: {
     labelWidth: String,
     expandMore: Boolean,
@@ -1054,38 +1137,27 @@ const _sfc_main$n = defineComponent({
     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 = resolveComponent("m-form-container");
-  const _component_el_col = resolveComponent("el-col");
+  const _component_Col = resolveComponent("Col");
   const _component_el_row = resolveComponent("el-row");
   return openBlock(), createBlock(_component_el_row, { gutter: 10 }, {
     default: withCtx(() => [
       (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.config.items, (col, index) => {
-        return openBlock(), createBlock(_component_el_col, {
-          style: normalizeStyle(!_ctx.display(col) || col.type === "hidden" ? "display: none" : ""),
+        return openBlock(), createBlock(_component_Col, {
           key: col[_ctx.mForm?.keyProp || "__key"] ?? index,
-          span: col.span || _ctx.config.span || 24 / _ctx.config.items.length
-        }, {
-          default: withCtx(() => [
-            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
@@ -1418,7 +1490,7 @@ const _sfc_main$l = defineComponent({
         }
         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) {
@@ -1544,7 +1616,7 @@ const _sfc_main$l = defineComponent({
     };
   }
 });
-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__ */ createTextVNode("\u6DFB\u52A0");
@@ -1573,7 +1645,7 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
       key: 0,
       style: { "color": "rgba(0, 0, 0, 0.45)" },
       innerHTML: _ctx.config.extra
-    }, null, 8, _hoisted_1$b)) : createCommentVNode("", true),
+    }, null, 8, _hoisted_1$a)) : createCommentVNode("", true),
     createElementVNode("div", _hoisted_2$2, [
       createVNode(_component_el_tooltip, {
         content: "\u62D6\u62FD\u53EF\u6392\u5E8F",
@@ -1614,8 +1686,8 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
               }, {
                 default: withCtx((scope) => [
                   withDirectives(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"]), [
@@ -1639,8 +1711,9 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
                       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"])
@@ -1656,8 +1729,9 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
                       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"])
@@ -1734,6 +1808,7 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
         key: 1,
         icon: _ctx.Grid,
         size: "small",
+        type: "primary",
         onClick: _ctx.toggleMode
       }, {
         default: withCtx(() => [
@@ -1745,6 +1820,7 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
         key: 2,
         icon: _ctx.FullScreen,
         size: "small",
+        type: "primary",
         onClick: _ctx.toggleFullscreen
       }, {
         default: withCtx(() => [
@@ -1819,11 +1895,11 @@ const tabClickHandler = (mForm, tab, props) => {
   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 = defineComponent({
@@ -1878,7 +1954,11 @@ const Tab = defineComponent({
         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 = cloneDeep(tabs.value[0]);
           newObj.title = `\u6807\u7B7E${tabs.value.length + 1}`;
@@ -1891,7 +1971,11 @@ const Tab = defineComponent({
         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) {
@@ -1906,7 +1990,7 @@ const Tab = defineComponent({
       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 });
         }
       }
     };
@@ -2095,13 +2179,13 @@ const _sfc_main$j = defineComponent({
     };
   }
 });
-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 = resolveComponent("el-cascader");
-  return openBlock(), createElementBlock("div", _hoisted_1$a, [
+  return openBlock(), createElementBlock("div", _hoisted_1$9, [
     createVNode(_component_el_cascader, {
       modelValue: _ctx.model[_ctx.name],
       "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.model[_ctx.name] = $event),
@@ -2141,7 +2225,7 @@ const _sfc_main$i = defineComponent({
         } else {
           return props.config.activeValue;
         }
-        return "true";
+        return void 0;
       }),
       inactiveValue: computed(() => {
         if (typeof props.config.inactiveValue === "undefined") {
@@ -2151,7 +2235,7 @@ const _sfc_main$i = defineComponent({
         } else {
           return props.config.inactiveValue;
         }
-        return "false";
+        return void 0;
       }),
       changeHandler(value) {
         emit("change", value);
@@ -2224,7 +2308,7 @@ function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
 }
 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 = defineComponent({
   name: "m-fields-color-picker"
 });
@@ -2244,7 +2328,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     const changeHandler = (value) => emit("change", value);
     return (_ctx, _cache) => {
       const _component_el_color_picker = resolveComponent("el-color-picker");
-      return _ctx.model ? (openBlock(), createElementBlock("div", _hoisted_1$9, [
+      return _ctx.model ? (openBlock(), createElementBlock("div", _hoisted_1$8, [
         createVNode(_component_el_color_picker, {
           modelValue: _ctx.model[_ctx.name],
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.model[_ctx.name] = $event),
@@ -2280,10 +2364,10 @@ const _sfc_main$f = defineComponent({
     };
   }
 });
-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 = resolveComponent("el-date-picker");
-  return _ctx.model ? (openBlock(), createElementBlock("div", _hoisted_1$8, [
+  return _ctx.model ? (openBlock(), createElementBlock("div", _hoisted_1$7, [
     createVNode(_component_el_date_picker, {
       modelValue: _ctx.model[_ctx.modelName],
       "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.model[_ctx.modelName] = $event),
@@ -2329,6 +2413,14 @@ const _sfc_main$e = defineComponent({
         });
       } else if (props.model && props.name && v instanceof Date) {
         props.model[props.name] = 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 {
@@ -2387,10 +2479,10 @@ const _sfc_main$d = defineComponent({
     };
   }
 });
-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 = resolveComponent("el-date-picker");
-  return _ctx.model ? (openBlock(), createElementBlock("div", _hoisted_1$7, [
+  return _ctx.model ? (openBlock(), createElementBlock("div", _hoisted_1$6, [
     createVNode(_component_el_date_picker, {
       modelValue: _ctx.model[_ctx.name],
       "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.model[_ctx.name] = $event),
@@ -2407,7 +2499,7 @@ function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
 }
 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 = defineComponent({
   name: "m-fields-display"
 });
@@ -2428,7 +2520,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     }
     useAddField(props.prop);
     return (_ctx, _cache) => {
-      return _ctx.model ? (openBlock(), createElementBlock("span", _hoisted_1$6, toDisplayString(_ctx.model[unref(n)]), 1)) : createCommentVNode("", true);
+      return _ctx.model ? (openBlock(), createElementBlock("span", _hoisted_1$5, toDisplayString(_ctx.model[unref(n)]), 1)) : createCommentVNode("", true);
     };
   }
 });
@@ -2498,12 +2590,12 @@ const _sfc_main$b = defineComponent({
     }
   }
 });
-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 = resolveComponent("el-input");
   const _component_el_form_item = resolveComponent("el-form-item");
   const _component_el_form = resolveComponent("el-form");
-  return openBlock(), createElementBlock("div", _hoisted_1$5, [
+  return openBlock(), createElementBlock("div", _hoisted_1$4, [
     createVNode(_component_el_form, { size: "small" }, {
       default: withCtx(() => [
         (openBlock(true), createElementBlock(Fragment, null, renderList(Object.keys(_ctx.fieldMap.value), (key) => {
@@ -2625,7 +2717,7 @@ const _sfc_main$9 = defineComponent({
     };
   }
 });
-const _hoisted_1$4 = ["href"];
+const _hoisted_1$3 = ["href"];
 const _hoisted_2$1 = {
   key: 2,
   class: "m-fields-link"
@@ -2639,12 +2731,13 @@ function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
     target: "_blank",
     href: _ctx.href,
     style: normalizeStyle(_ctx.config.css || {})
-  }, toDisplayString(_ctx.displayText), 13, _hoisted_1$4)) : _ctx.config.href && _ctx.disabled ? (openBlock(), createElementBlock("span", {
+  }, toDisplayString(_ctx.displayText), 13, _hoisted_1$3)) : _ctx.config.href && _ctx.disabled ? (openBlock(), createElementBlock("span", {
     key: 1,
     style: normalizeStyle(_ctx.config.disabledCss || {})
   }, toDisplayString(_ctx.displayText), 5)) : (openBlock(), createElementBlock("div", _hoisted_2$1, [
     createVNode(_component_el_button, {
-      type: "text",
+      text: "",
+      type: "primary",
       onClick: _ctx.editHandler
     }, {
       default: withCtx(() => [
@@ -2824,7 +2917,8 @@ const _sfc_main$6 = defineComponent({
           body = body(mForm, {
             model: props.model,
             formValue: mForm?.values,
-            formValues: mForm?.values
+            formValues: mForm?.values,
+            config: props.config
           });
         }
         body.query = query.value;
@@ -2847,7 +2941,8 @@ const _sfc_main$6 = defineComponent({
         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];
@@ -2937,8 +3032,10 @@ const _sfc_main$6 = defineComponent({
       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;
         });
@@ -2986,11 +3083,11 @@ const _sfc_main$6 = defineComponent({
       remote,
       options,
       moreLoadingVisible,
+      popperClass: mForm?.popperClass,
+      getOptions,
       getRequestFuc() {
         return getConfig("request");
       },
-      async getInitOption() {
-      },
       changeHandler(value) {
         emit("change", value);
       },
@@ -3007,10 +3104,6 @@ const _sfc_main$6 = defineComponent({
           options.value = await getOptions();
         }
       },
-      async editAfterAction() {
-        pgIndex.value = 0;
-        options.value = await getOptions();
-      },
       async remoteMethod(q) {
         if (!localOptions.value.length) {
           query.value = q;
@@ -3025,7 +3118,7 @@ const _sfc_main$6 = defineComponent({
     };
   }
 });
-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 = resolveComponent("el-option");
   const _component_el_option_group = resolveComponent("el-option-group");
@@ -3039,6 +3132,7 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
     ref: "select",
     clearable: "",
     filterable: "",
+    "popper-class": `m-select-popper ${_ctx.popperClass}`,
     size: _ctx.size,
     remote: _ctx.remote,
     placeholder: _ctx.config.placeholder,
@@ -3046,21 +3140,21 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
     "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: withCtx(() => [
       _ctx.config.group ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.options, (group, index) => {
         return openBlock(), createBlock(_component_el_option_group, {
-          key: group.label + index,
+          key: index,
           label: group.label,
           disabled: group.disabled
         }, {
           default: withCtx(() => [
             (openBlock(true), createElementBlock(Fragment, null, renderList(group.options, (item, index2) => {
               return openBlock(), createBlock(_component_el_option, {
-                key: item.label + index2,
+                key: index2,
                 label: item.label,
                 value: item.value,
                 disabled: item.disabled
@@ -3077,12 +3171,12 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
           disabled: option.disabled
         }, null, 8, ["label", "value", "disabled"]);
       }), 128)),
-      _ctx.moreLoadingVisible ? withDirectives((openBlock(), createElementBlock("div", _hoisted_1$3, null, 512)), [
+      _ctx.moreLoadingVisible ? withDirectives((openBlock(), createElementBlock("div", _hoisted_1$2, null, 512)), [
         [_directive_loading, true]
       ]) : 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]
   ]) : createCommentVNode("", true);
 }
@@ -3154,6 +3248,7 @@ const _sfc_main$4 = defineComponent({
   },
   emits: ["change", "input"],
   setup(props, { emit }) {
+    const mForm = inject("mForm");
     useAddField(props.prop);
     const modelName = computed(() => props.name || props.config.name || "");
     return {
@@ -3162,12 +3257,10 @@ const _sfc_main$4 = defineComponent({
         emit("change", v);
       },
       inputHandler(v) {
-        const mForm = inject("mForm");
         emit("input", v);
         mForm?.$emit("field-input", props.prop, v);
       },
       buttonClickHandler() {
-        const mForm = inject("mForm");
         if (typeof props.config.append === "string")
           return;
         if (props.config.append?.handler) {
@@ -3231,7 +3324,7 @@ const _sfc_main$4 = defineComponent({
     };
   }
 });
-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 = resolveComponent("el-button");
   const _component_el_input = resolveComponent("el-input");
@@ -3249,17 +3342,18 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
     _ctx.config.append ? {
       name: "append",
       fn: withCtx(() => [
-        typeof _ctx.config.append === "string" ? (openBlock(), createElementBlock("span", _hoisted_1$2, toDisplayString(_ctx.config.append), 1)) : createCommentVNode("", true),
+        typeof _ctx.config.append === "string" ? (openBlock(), createElementBlock("span", _hoisted_1$1, toDisplayString(_ctx.config.append), 1)) : createCommentVNode("", true),
         typeof _ctx.config.append === "object" && _ctx.config.append.type === "button" ? (openBlock(), createBlock(_component_el_button, {
           key: 1,
           style: { "color": "#409eff" },
-          onClick: _ctx.buttonClickHandler
+          size: _ctx.size,
+          onClick: withModifiers(_ctx.buttonClickHandler, ["prevent"])
         }, {
           default: withCtx(() => [
             createTextVNode(toDisplayString(_ctx.config.append.text), 1)
           ]),
           _: 1
-        }, 8, ["onClick"])) : createCommentVNode("", true)
+        }, 8, ["size", "onClick"])) : createCommentVNode("", true)
       ])
     } : void 0
   ]), 1032, ["modelValue", "size", "placeholder", "disabled", "onChange", "onInput"]);
@@ -3298,22 +3392,19 @@ const _sfc_main$3 = defineComponent({
     };
   }
 });
-const _hoisted_1$1 = { key: 0 };
 function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_input = resolveComponent("el-input");
-  return _ctx.model ? (openBlock(), createElementBlock("div", _hoisted_1$1, [
-    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"])
-  ])) : createCommentVNode("", true);
+  return openBlock(), 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]]);
 
@@ -3403,6 +3494,9 @@ const _sfc_main$1 = defineComponent({
     keyProp: {
       type: String,
       default: "__key"
+    },
+    popperClass: {
+      type: String
     }
   },
   emits: ["change", "field-input", "field-change"],
@@ -3414,6 +3508,7 @@ const _sfc_main$1 = defineComponent({
     const requestFuc = getConfig("request");
     const formState = reactive({
       keyProp: props.keyProp,
+      popperClass: props.popperClass,
       config: props.config,
       initValues: props.initValues,
       parentValues: props.parentValues,
@@ -3457,7 +3552,7 @@ const _sfc_main$1 = defineComponent({
       submitForm: async (native) => {
         try {
           await elForm.value?.validate();
-          return native ? values.value : cloneDeep(values.value);
+          return native ? values.value : cloneDeep(toRaw(values.value));
         } catch (invalidFields) {
           const error = [];
           Object.entries(invalidFields).forEach(([, ValidateError]) => {
@@ -3709,7 +3804,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 }
 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) => {