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

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;
   }
@@ -169,8 +173,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,
@@ -228,6 +233,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;
     });
@@ -264,9 +270,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 +294,7 @@ const _sfc_main$s = defineComponent({
       itemProp,
       items,
       display: display$1,
+      itemLabelWidth,
       tagName,
       rule,
       tooltip,
@@ -293,24 +305,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 +342,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 }, [
       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 }, {
@@ -378,19 +392,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 +421,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 +440,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 +494,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 +508,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 +528,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 +600,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 +686,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 +698,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 +710,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 +719,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 +728,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 +746,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 +781,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 +875,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 +887,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 +934,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 +969,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 +977,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 +989,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 +1047,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 +1122,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
@@ -1544,7 +1601,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 +1630,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 +1671,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 +1696,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 +1714,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 +1793,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 +1805,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(() => [
@@ -2095,13 +2156,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 +2202,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 +2212,7 @@ const _sfc_main$i = defineComponent({
         } else {
           return props.config.inactiveValue;
         }
-        return "false";
+        return void 0;
       }),
       changeHandler(value) {
         emit("change", value);
@@ -2224,7 +2285,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 +2305,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 +2341,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),
@@ -2387,10 +2448,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 +2468,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 +2489,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 +2559,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 +2686,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 +2700,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(() => [
@@ -2937,6 +2999,7 @@ 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
         })).then((data) => {
@@ -2986,11 +3049,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 +3070,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 +3084,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 +3098,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 +3106,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 +3137,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 +3214,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 +3223,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 +3290,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 +3308,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 +3358,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 +3460,9 @@ const _sfc_main$1 = defineComponent({
     keyProp: {
       type: String,
       default: "__key"
+    },
+    popperClass: {
+      type: String
     }
   },
   emits: ["change", "field-input", "field-change"],
@@ -3414,6 +3474,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 +3518,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]) => {