@tmagic/form 1.0.0 → 1.0.3

package/dist/tmagic-form.umd.js

@@ -15,19 +15,10 @@
       value.asyncLoad = typeof initValue2.asyncLoad === "object" ? initValue2.asyncLoad : asyncLoad;
     }
   };
-  const isMultipleValue = (type) => typeof type === "string" && [
-    "checkbox-group",
-    "checkboxGroup",
-    "table",
-    "cascader",
-    "group-list",
-    "groupList",
-    "dynamic-tab",
-    "dynamicTab"
-  ].includes(type);
+  const isMultipleValue = (type) => typeof type === "string" && ["checkbox-group", "checkboxGroup", "table", "cascader", "group-list", "groupList"].includes(type);
   const initItemsValue = (mForm, value, initValue2, { items, name, extensible }) => {
     if (Array.isArray(initValue2[name])) {
-      value[name] = initValue2[name].map((v) => init(mForm, items, v));
+      value[name] = initValue2[name].map((v, index) => init(mForm, items, v, value[name]?.[index]));
     } else {
       value[name] = init(mForm, items, initValue2[name], value[name]);
       if (extensible) {
@@ -37,7 +28,7 @@
   };
   const setValue = (mForm, value, initValue2, item) => {
     const { items, name, type, checkbox } = item;
-    if (isMultipleValue(type)) {
+    if (isMultipleValue(type) || type === "tab" && item.dynamic) {
       value[name] = initValue2[name] || [];
     }
     if (items) {
@@ -140,7 +131,7 @@
         const fnc = item.validator;
         item.validator = (rule, value, callback, source, options) => fnc({
           rule,
-          value,
+          value: props.config.names ? props.model : value,
           callback,
           source,
           options
@@ -178,7 +169,7 @@
     return target;
   };
 
-  const _sfc_main$t = vue.defineComponent({
+  const _sfc_main$v = vue.defineComponent({
     name: "m-form-container",
     components: { WarningFilled: icons.WarningFilled },
     props: {
@@ -331,7 +322,7 @@
     key: 4,
     style: { "text-align": "center" }
   };
-  function _sfc_render$q(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$p(_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");
@@ -458,32 +449,32 @@
       ])) : vue.createCommentVNode("", true)
     ], 6)) : vue.createCommentVNode("", true);
   }
-  var Container = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["render", _sfc_render$q]]);
+  var Container = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["render", _sfc_render$p]]);
 
-  const _sfc_main$s = vue.defineComponent({
-    name: "m-form-fieldset",
+  const _hoisted_1$d = ["innerHTML"];
+  const _hoisted_2$6 = ["innerHTML"];
+  const _hoisted_3$6 = { key: 1 };
+  const _hoisted_4$5 = ["innerHTML"];
+  const _hoisted_5$3 = ["innerHTML"];
+  const _hoisted_6$2 = {
+    key: 2,
+    style: { "display": "flex" }
+  };
+  const _hoisted_7$2 = { style: { "flex": "1" } };
+  const _hoisted_8$1 = ["src"];
+  const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
+    __name: "Fieldset",
     props: {
-      labelWidth: String,
-      model: {
-        type: Object,
-        default: () => ({})
-      },
-      config: {
-        type: Object,
-        default: () => ({})
-      },
-      rules: {
-        type: Object,
-        default: () => ({})
-      },
-      prop: {
-        type: String,
-        default: () => ""
-      },
-      size: String
+      labelWidth: null,
+      prop: { default: "" },
+      size: null,
+      model: null,
+      config: null,
+      rules: { default: {} }
     },
     emits: ["change"],
-    setup(props, { emit }) {
+    setup(__props, { emit }) {
+      const props = __props;
       const mForm = vue.inject("mForm");
       const name = vue.computed(() => props.config.name || "");
       const show = vue.computed(() => {
@@ -502,125 +493,90 @@
         emit("change", props.model);
       };
       const key = (item, index) => item[mForm?.keyProp || "__key"] ?? index;
-      return {
-        show,
-        name,
-        mForm,
-        lWidth,
-        key,
-        change
-      };
-    }
-  });
-  const _hoisted_1$d = ["innerHTML"];
-  const _hoisted_2$6 = ["innerHTML"];
-  const _hoisted_3$6 = { key: 1 };
-  const _hoisted_4$5 = ["innerHTML"];
-  const _hoisted_5$3 = ["innerHTML"];
-  const _hoisted_6$2 = { key: 2 };
-  const _hoisted_7$2 = ["innerHTML"];
-  const _hoisted_8$1 = ["innerHTML"];
-  const _hoisted_9$1 = {
-    key: 3,
-    style: { "display": "flex" }
-  };
-  const _hoisted_10$1 = { style: { "flex": "1" } };
-  const _hoisted_11 = ["src"];
-  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", {
-      key: 0,
-      class: "m-fieldset",
-      style: vue.normalizeStyle(_ctx.show ? "padding: 15px 15px 0 5px;" : "border: 0")
-    }, [
-      !_ctx.show && _ctx.name ? (vue.openBlock(), vue.createBlock(_component_el_checkbox, {
-        key: 0,
-        modelValue: _ctx.model[_ctx.name].value,
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.model[_ctx.name].value = $event),
-        prop: `${_ctx.prop}${_ctx.prop ? "." : ""}${_ctx.config.name}.value`,
-        "true-label": 1,
-        "false-label": 0,
-        onChange: _ctx.change
-      }, {
-        default: vue.withCtx(() => [
-          vue.createElementVNode("span", {
-            innerHTML: _ctx.config.legend
-          }, null, 8, _hoisted_1$d),
-          _ctx.config.extra ? (vue.openBlock(), vue.createElementBlock("span", {
-            key: 0,
-            innerHTML: _ctx.config.extra,
-            class: "m-form-tip"
-          }, null, 8, _hoisted_2$6)) : vue.createCommentVNode("", true)
-        ]),
-        _: 1
-      }, 8, ["modelValue", "prop", "onChange"])) : _ctx.config.checkbox && _ctx.name ? (vue.openBlock(), vue.createElementBlock("legend", _hoisted_3$6, [
-        vue.createVNode(_component_el_checkbox, {
-          modelValue: _ctx.model[_ctx.name].value,
-          "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.model[_ctx.name].value = $event),
-          prop: `${_ctx.prop}${_ctx.prop ? "." : ""}${_ctx.config.name}.value`,
-          "true-label": 1,
-          "false-label": 0,
-          onChange: _ctx.change
-        }, {
-          default: vue.withCtx(() => [
+      if (props.config.checkbox && name.value) {
+        vue.watch(() => props.model[name.value]?.value, () => {
+          console.log(props.model);
+          emit("change", props.model);
+        });
+      }
+      return (_ctx, _cache) => {
+        const _component_el_checkbox = vue.resolveComponent("el-checkbox");
+        const _component_m_form_container = vue.resolveComponent("m-form-container");
+        return (vue.unref(name) ? __props.model[vue.unref(name)] : __props.model) ? (vue.openBlock(), vue.createElementBlock("fieldset", {
+          key: 0,
+          class: "m-fieldset",
+          style: vue.normalizeStyle(vue.unref(show) ? "padding: 15px 15px 0 5px;" : "border: 0")
+        }, [
+          vue.unref(name) && __props.config.checkbox ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(!vue.unref(show) ? "div" : "legend"), { key: 0 }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(_component_el_checkbox, {
+                modelValue: __props.model[vue.unref(name)].value,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => __props.model[vue.unref(name)].value = $event),
+                prop: `${__props.prop}${__props.prop ? "." : ""}${__props.config.name}.value`,
+                "true-label": 1,
+                "false-label": 0
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createElementVNode("span", {
+                    innerHTML: __props.config.legend
+                  }, null, 8, _hoisted_1$d),
+                  __props.config.extra ? (vue.openBlock(), vue.createElementBlock("span", {
+                    key: 0,
+                    innerHTML: __props.config.extra,
+                    class: "m-form-tip"
+                  }, null, 8, _hoisted_2$6)) : vue.createCommentVNode("", true)
+                ]),
+                _: 1
+              }, 8, ["modelValue", "prop"])
+            ]),
+            _: 1
+          })) : (vue.openBlock(), vue.createElementBlock("legend", _hoisted_3$6, [
             vue.createElementVNode("span", {
-              innerHTML: _ctx.config.legend
+              innerHTML: __props.config.legend
             }, null, 8, _hoisted_4$5),
-            _ctx.config.extra ? (vue.openBlock(), vue.createElementBlock("span", {
+            __props.config.extra ? (vue.openBlock(), vue.createElementBlock("span", {
               key: 0,
-              innerHTML: _ctx.config.extra,
+              innerHTML: __props.config.extra,
               class: "m-form-tip"
             }, null, 8, _hoisted_5$3)) : vue.createCommentVNode("", true)
-          ]),
-          _: 1
-        }, 8, ["modelValue", "prop", "onChange"])
-      ])) : (vue.openBlock(), vue.createElementBlock("legend", _hoisted_6$2, [
-        vue.createElementVNode("span", {
-          innerHTML: _ctx.config.legend
-        }, null, 8, _hoisted_7$2),
-        _ctx.config.extra ? (vue.openBlock(), vue.createElementBlock("span", {
-          key: 0,
-          innerHTML: _ctx.config.extra,
-          class: "m-form-tip"
-        }, null, 8, _hoisted_8$1)) : vue.createCommentVNode("", true)
-      ])),
-      _ctx.config.schematic && _ctx.show ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9$1, [
-        vue.createElementVNode("div", _hoisted_10$1, [
-          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.config.items, (item, index) => {
+          ])),
+          __props.config.schematic && vue.unref(show) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$2, [
+            vue.createElementVNode("div", _hoisted_7$2, [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.config.items, (item, index) => {
+                return vue.openBlock(), vue.createBlock(_component_m_form_container, {
+                  key: key(item, index),
+                  model: vue.unref(name) ? __props.model[vue.unref(name)] : __props.model,
+                  rules: vue.unref(name) ? __props.rules[vue.unref(name)] : [],
+                  config: item,
+                  prop: __props.prop,
+                  labelWidth: vue.unref(lWidth),
+                  size: __props.size,
+                  onChange: change
+                }, null, 8, ["model", "rules", "config", "prop", "labelWidth", "size"]);
+              }), 128))
+            ]),
+            vue.createElementVNode("img", {
+              class: "m-form-schematic",
+              src: __props.config.schematic
+            }, null, 8, _hoisted_8$1)
+          ])) : vue.unref(show) ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 3 }, vue.renderList(__props.config.items, (item, index) => {
             return vue.openBlock(), vue.createBlock(_component_m_form_container, {
-              key: _ctx.key(item, index),
-              model: _ctx.name ? _ctx.model[_ctx.name] : _ctx.model,
-              rules: _ctx.name ? _ctx.rules[_ctx.name] : [],
+              key: key(item, index),
+              model: vue.unref(name) ? __props.model[vue.unref(name)] : __props.model,
+              rules: vue.unref(name) ? __props.rules[vue.unref(name)] : [],
               config: item,
-              prop: _ctx.prop,
-              labelWidth: _ctx.lWidth,
-              size: _ctx.size,
-              onChange: _ctx.change
-            }, null, 8, ["model", "rules", "config", "prop", "labelWidth", "size", "onChange"]);
-          }), 128))
-        ]),
-        vue.createElementVNode("img", {
-          class: "m-form-schematic",
-          src: _ctx.config.schematic
-        }, null, 8, _hoisted_11)
-      ])) : _ctx.show ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 4 }, vue.renderList(_ctx.config.items, (item, index) => {
-        return vue.openBlock(), vue.createBlock(_component_m_form_container, {
-          key: _ctx.key(item, index),
-          model: _ctx.name ? _ctx.model[_ctx.name] : _ctx.model,
-          rules: _ctx.name ? _ctx.rules[_ctx.name] : [],
-          config: item,
-          prop: _ctx.prop,
-          labelWidth: _ctx.lWidth,
-          size: _ctx.size,
-          onChange: _ctx.change
-        }, null, 8, ["model", "rules", "config", "prop", "labelWidth", "size", "onChange"]);
-      }), 128)) : vue.createCommentVNode("", true)
-    ], 4)) : vue.createCommentVNode("", true);
-  }
-  var Fieldset = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["render", _sfc_render$p]]);
+              prop: __props.prop,
+              labelWidth: vue.unref(lWidth),
+              size: __props.size,
+              onChange: change
+            }, null, 8, ["model", "rules", "config", "prop", "labelWidth", "size"]);
+          }), 128)) : vue.createCommentVNode("", true)
+        ], 4)) : vue.createCommentVNode("", true);
+      };
+    }
+  });
 
-  const _sfc_main$r = vue.defineComponent({
+  const _sfc_main$t = vue.defineComponent({
     name: "m-form-group-list-item",
     components: { CaretRight: icons.CaretRight, CaretBottom: icons.CaretBottom },
     props: {
@@ -799,9 +755,9 @@
       }, null, 8, ["config", "model", "labelWidth", "prop", "size", "onChange"])) : vue.createCommentVNode("", true)
     ]);
   }
-  var MFieldsGroupListItem = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["render", _sfc_render$o]]);
+  var MFieldsGroupListItem = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["render", _sfc_render$o]]);
 
-  const _sfc_main$q = vue.defineComponent({
+  const _sfc_main$s = vue.defineComponent({
     name: "m-form-group-list",
     components: { MFieldsGroupListItem },
     props: {
@@ -833,7 +789,9 @@
         if (typeof props.config.addable === "function") {
           return props.config.addable(mForm, {
             model: props.model[props.name],
-            formValue: mForm?.values
+            formValue: mForm?.values,
+            prop: props.prop,
+            config: props.config
           });
         }
         return typeof props.config.addable === "undefined" ? true : props.config.addable;
@@ -850,7 +808,9 @@
         if (typeof props.config.defaultAdd === "function") {
           initValues = await props.config.defaultAdd(mForm, {
             model: props.model[props.name],
-            formValue: mForm?.values
+            formValue: mForm?.values,
+            prop: props.prop,
+            config: props.config
           });
         } else if (props.config.defaultAdd) {
           initValues = props.config.defaultAdd;
@@ -952,9 +912,9 @@
       }, 8, ["onClick"])) : vue.createCommentVNode("", true)
     ]);
   }
-  var GroupList = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["render", _sfc_render$n]]);
+  var GroupList = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["render", _sfc_render$n]]);
 
-  const _sfc_main$p = vue.defineComponent({
+  const _sfc_main$r = vue.defineComponent({
     name: "m-form-panel",
     components: { CaretBottom: icons.CaretBottom, CaretRight: icons.CaretRight },
     props: {
@@ -1065,9 +1025,9 @@
       _: 3
     }, 8, ["body-style"])) : vue.createCommentVNode("", true);
   }
-  var Panel = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["render", _sfc_render$m]]);
+  var Panel = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["render", _sfc_render$m]]);
 
-  const _sfc_main$o = vue.defineComponent({
+  const _sfc_main$q = vue.defineComponent({
     props: {
       labelWidth: String,
       expandMore: Boolean,
@@ -1114,9 +1074,9 @@
       [vue.vShow, _ctx.display && _ctx.config.type !== "hidden"]
     ]);
   }
-  var Col = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$l]]);
+  var Col = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["render", _sfc_render$l]]);
 
-  const _sfc_main$n = vue.defineComponent({
+  const _sfc_main$p = vue.defineComponent({
     name: "m-form-row",
     components: { Col },
     props: {
@@ -1166,9 +1126,9 @@
       _: 1
     });
   }
-  var Row = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render$k]]);
+  var Row = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["render", _sfc_render$k]]);
 
-  const _sfc_main$m = vue.defineComponent({
+  const _sfc_main$o = vue.defineComponent({
     name: "m-form-step",
     props: {
       model: {
@@ -1246,11 +1206,11 @@
       }), 256))
     ]);
   }
-  var MStep = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$j]]);
+  var MStep = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$j]]);
 
   let loadedAMapJS = false;
   let firstLoadingAMapJS = true;
-  const _sfc_main$l = vue.defineComponent({
+  const _sfc_main$n = vue.defineComponent({
     name: "m-form-table",
     props: {
       name: {
@@ -1881,7 +1841,7 @@
       ])
     ], 2);
   }
-  var Table = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$i]]);
+  var Table = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render$i]]);
 
   const getActive = (mForm, props, activeTabName) => {
     const { config, model, prop } = props;
@@ -1919,6 +1879,7 @@
         default: () => ({})
       },
       prop: String,
+      name: String,
       size: String
     },
     emits: {
@@ -1999,7 +1960,7 @@
       };
     }
   });
-  const _sfc_main$k = Tab;
+  const _sfc_main$m = Tab;
   function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_m_form_container = vue.resolveComponent("m-form-container");
     const _component_el_tab_pane = vue.resolveComponent("el-tab-pane");
@@ -2029,7 +1990,7 @@
                   return vue.openBlock(), vue.createBlock(_component_m_form_container, {
                     key: item[_ctx.mForm?.keyProp || "__key"],
                     config: item,
-                    model: _ctx.config.dynamic ? _ctx.model[_ctx.config.name || ""][tabIndex] : tab.name ? _ctx.model[tab.name] : _ctx.model,
+                    model: _ctx.config.dynamic ? (_ctx.name ? _ctx.model[_ctx.name] : _ctx.model)[tabIndex] : tab.name ? (_ctx.name ? _ctx.model[_ctx.name] : _ctx.model)[tab.name] : _ctx.name ? _ctx.model[_ctx.name] : _ctx.model,
                     prop: _ctx.config.dynamic ? `${_ctx.prop}${_ctx.prop ? "." : ""}${String(tabIndex)}` : _ctx.prop,
                     size: _ctx.size,
                     "label-width": tab.labelWidth || _ctx.labelWidth,
@@ -2046,7 +2007,7 @@
       _: 1
     }, 8, ["modelValue", "class", "type", "editable", "tab-position", "onTabClick", "onTabAdd", "onTabRemove"]);
   }
-  var Tabs = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$h]]);
+  var Tabs = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$h]]);
 
   let $MAGIC_FORM = {};
   const setConfig = (option) => {
@@ -2090,7 +2051,7 @@
     });
   };
 
-  const _sfc_main$j = vue.defineComponent({
+  const _sfc_main$l = vue.defineComponent({
     name: "m-fields-cascader",
     props: {
       ...fieldProps,
@@ -2125,8 +2086,9 @@
           if (typeof body === "function" && props.model && mForm) {
             body = body(mForm, {
               model: props.model,
-              formValue: null,
-              formValues: mForm.values
+              formValue: mForm.values,
+              formValues: mForm.values,
+              config: props.config
             });
           }
           postOptions.data = body;
@@ -2205,9 +2167,9 @@
       }, null, 8, ["modelValue", "size", "placeholder", "disabled", "options", "props", "onChange"])
     ]);
   }
-  var Cascader = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$g]]);
+  var Cascader = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$g]]);
 
-  const _sfc_main$i = vue.defineComponent({
+  const _sfc_main$k = vue.defineComponent({
     name: "m-fields-checkbox",
     props: {
       ...fieldProps,
@@ -2259,9 +2221,9 @@
       onChange: _ctx.changeHandler
     }, null, 8, ["modelValue", "size", "trueLabel", "falseLabel", "disabled", "label", "onChange"]);
   }
-  var Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$f]]);
+  var Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$f]]);
 
-  const _sfc_main$h = vue.defineComponent({
+  const _sfc_main$j = vue.defineComponent({
     name: "m-fields-checkbox-group",
     props: {
       ...fieldProps,
@@ -2309,13 +2271,13 @@
       _: 1
     }, 8, ["modelValue", "size", "disabled", "onChange"]);
   }
-  var CheckboxGroup = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$e]]);
+  var CheckboxGroup = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$e]]);
 
   const _hoisted_1$7 = { key: 0 };
   const __default__$2 = vue.defineComponent({
     name: "m-fields-color-picker"
   });
-  const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
     ...__default__$2,
     props: {
       ...fieldProps,
@@ -2345,7 +2307,7 @@
     }
   });
 
-  const _sfc_main$f = vue.defineComponent({
+  const _sfc_main$h = vue.defineComponent({
     name: "m-fields-date",
     props: {
       ...fieldProps,
@@ -2384,9 +2346,9 @@
       }, null, 8, ["modelValue", "size", "placeholder", "disabled", "format", "value-format", "onChange"])
     ])) : vue.createCommentVNode("", true);
   }
-  var Date$1 = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$d]]);
+  var Date$1 = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$d]]);
 
-  const _sfc_main$e = vue.defineComponent({
+  const _sfc_main$g = vue.defineComponent({
     name: "m-fields-daterange",
     props: {
       ...fieldProps,
@@ -2447,13 +2409,13 @@
       size: _ctx.size,
       "unlink-panels": true,
       disabled: _ctx.disabled,
-      "default-time": _ctx.config.defaultTime || [new Date(2e3, 1, 1, 23, 59, 59)],
+      "default-time": _ctx.config.defaultTime,
       onChange: _ctx.changeHandler
     }, null, 8, ["modelValue", "size", "disabled", "default-time", "onChange"]);
   }
-  var Daterange = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$c]]);
+  var Daterange = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$c]]);
 
-  const _sfc_main$d = vue.defineComponent({
+  const _sfc_main$f = vue.defineComponent({
     name: "m-fields-datetime",
     props: {
       ...fieldProps,
@@ -2493,17 +2455,17 @@
       disabled: _ctx.disabled,
       format: _ctx.config.format || "YYYY-MM-DD HH:mm:ss",
       "value-format": _ctx.config.valueFormat || "YYYY-MM-DD HH:mm:ss",
-      "default-time": _ctx.config.defaultTime || [new Date(2e3, 1, 1, 23, 59, 59)],
+      "default-time": _ctx.config.defaultTime,
       onChange: _ctx.changeHandler
     }, null, 8, ["modelValue", "size", "placeholder", "disabled", "format", "value-format", "default-time", "onChange"]);
   }
-  var DateTime = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$b]]);
+  var DateTime = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$b]]);
 
   const _hoisted_1$5 = { key: 0 };
   const __default__$1 = vue.defineComponent({
     name: "m-fields-display"
   });
-  const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
     ...__default__$1,
     props: {
       ...fieldProps,
@@ -2525,7 +2487,7 @@
     }
   });
 
-  const _sfc_main$b = vue.defineComponent({
+  const _sfc_main$d = vue.defineComponent({
     name: "m-fields-dynamic-field",
     props: {
       ...fieldProps,
@@ -2619,12 +2581,12 @@
       })
     ]);
   }
-  var DynamicField = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$a]]);
+  var DynamicField = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$a]]);
 
   const __default__ = vue.defineComponent({
     name: "m-fields-hidden"
   });
-  const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
     ...__default__,
     props: {
       ...fieldProps,
@@ -2649,7 +2611,7 @@
     }
   });
 
-  const _sfc_main$9 = vue.defineComponent({
+  const _sfc_main$b = vue.defineComponent({
     name: "m-fields-link",
     props: {
       ...fieldProps,
@@ -2757,9 +2719,9 @@
       }, null, 8, ["title", "width", "values", "config", "parentValues", "fullscreen", "onSubmit"])
     ]));
   }
-  var Link = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$9]]);
+  var Link = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$9]]);
 
-  const _sfc_main$8 = vue.defineComponent({
+  const _sfc_main$a = vue.defineComponent({
     name: "m-fields-number",
     props: {
       ...fieldProps,
@@ -2802,9 +2764,9 @@
       onInput: _ctx.inputHandler
     }, null, 8, ["modelValue", "size", "max", "min", "step", "placeholder", "disabled", "onChange", "onInput"])) : vue.createCommentVNode("", true);
   }
-  var Number$1 = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$8]]);
+  var Number$1 = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$8]]);
 
-  const _sfc_main$7 = vue.defineComponent({
+  const _sfc_main$9 = vue.defineComponent({
     name: "m-fields-radio-group",
     props: {
       ...fieldProps,
@@ -2848,10 +2810,64 @@
       _: 1
     }, 8, ["modelValue", "size", "disabled", "onChange"])) : vue.createCommentVNode("", true);
   }
-  var RadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$7]]);
+  var RadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$7]]);
+
+  const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
+    __name: "SelectOptionGroups",
+    props: {
+      options: null
+    },
+    setup(__props) {
+      return (_ctx, _cache) => {
+        const _component_el_option = vue.resolveComponent("el-option");
+        const _component_el_option_group = vue.resolveComponent("el-option-group");
+        return vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.options, (group, index) => {
+          return vue.openBlock(), vue.createBlock(_component_el_option_group, {
+            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: index2,
+                  label: item.label,
+                  value: item.value,
+                  disabled: item.disabled
+                }, null, 8, ["label", "value", "disabled"]);
+              }), 128))
+            ]),
+            _: 2
+          }, 1032, ["label", "disabled"]);
+        }), 128);
+      };
+    }
+  });
+
+  const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
+    __name: "SelectOptions",
+    props: {
+      options: null,
+      valueKey: null
+    },
+    setup(__props) {
+      return (_ctx, _cache) => {
+        const _component_el_option = vue.resolveComponent("el-option");
+        return vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.options, (option) => {
+          return vue.openBlock(), vue.createBlock(_component_el_option, {
+            label: option.text,
+            value: option.value,
+            key: __props.valueKey ? option.value[__props.valueKey] : option.value,
+            disabled: option.disabled
+          }, null, 8, ["label", "value", "disabled"]);
+        }), 128);
+      };
+    }
+  });
 
   const _sfc_main$6 = vue.defineComponent({
     name: "m-fields-select",
+    components: { SelectOptions: _sfc_main$7, SelectOptionGroups: _sfc_main$8 },
     props: {
       ...fieldProps,
       config: {
@@ -3082,6 +3098,7 @@
         loading,
         remote,
         options,
+        groupOptions: options,
         moreLoadingVisible,
         popperClass: mForm?.popperClass,
         getOptions,
@@ -3120,8 +3137,8 @@
   });
   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");
+    const _component_select_option_groups = vue.resolveComponent("select-option-groups");
+    const _component_select_options = vue.resolveComponent("select-options");
     const _component_el_select = vue.resolveComponent("el-select");
     const _directive_loading = vue.resolveDirective("loading");
     return _ctx.model ? vue.withDirectives((vue.openBlock(), vue.createBlock(_component_el_select, {
@@ -3145,32 +3162,13 @@
       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: 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: index2,
-                  label: item.label,
-                  value: item.value,
-                  disabled: item.disabled
-                }, null, 8, ["label", "value", "disabled"]);
-              }), 128))
-            ]),
-            _: 2
-          }, 1032, ["label", "disabled"]);
-        }), 128)) : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(_ctx.options, (option) => {
-          return vue.openBlock(), vue.createBlock(_component_el_option, {
-            label: option.text,
-            value: option.value,
-            key: _ctx.config.valueKey ? option.value[_ctx.config.valueKey] : option.value,
-            disabled: option.disabled
-          }, null, 8, ["label", "value", "disabled"]);
-        }), 128)),
+        _ctx.config.group ? (vue.openBlock(), vue.createBlock(_component_select_option_groups, {
+          key: 0,
+          options: _ctx.groupOptions
+        }, null, 8, ["options"])) : (vue.openBlock(), vue.createBlock(_component_select_options, {
+          key: 1,
+          options: _ctx.options
+        }, null, 8, ["options"])),
         _ctx.moreLoadingVisible ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, null, 512)), [
           [_directive_loading, true]
         ]) : vue.createCommentVNode("", true)
@@ -3804,7 +3802,7 @@
   }
   var FormDialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 
-  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}")();
+  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 .el-checkbox {\n  height: 22px;\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) => {
@@ -3814,7 +3812,7 @@
     app.component(Form.name, Form);
     app.component(FormDialog.name, FormDialog);
     app.component(Container.name, Container);
-    app.component(Fieldset.name, Fieldset);
+    app.component("m-form-fieldset", _sfc_main$u);
     app.component(GroupList.name, GroupList);
     app.component(Panel.name, Panel);
     app.component(Row.name, Row);
@@ -3824,17 +3822,17 @@
     app.component(Text.name, Text);
     app.component(Number$1.name, Number$1);
     app.component(Textarea.name, Textarea);
-    app.component(_sfc_main$a.name, _sfc_main$a);
+    app.component(_sfc_main$c.name, _sfc_main$c);
     app.component(Date$1.name, Date$1);
     app.component(DateTime.name, DateTime);
     app.component(Time.name, Time);
     app.component(Checkbox.name, Checkbox);
     app.component(Switch.name, Switch);
     app.component(Daterange.name, Daterange);
-    app.component(_sfc_main$g.name, _sfc_main$g);
+    app.component(_sfc_main$i.name, _sfc_main$i);
     app.component(CheckboxGroup.name, CheckboxGroup);
     app.component(RadioGroup.name, RadioGroup);
-    app.component(_sfc_main$c.name, _sfc_main$c);
+    app.component(_sfc_main$e.name, _sfc_main$e);
     app.component(Link.name, Link);
     app.component(Select.name, Select);
     app.component(Cascader.name, Cascader);
@@ -3847,18 +3845,18 @@
   exports.MCascader = Cascader;
   exports.MCheckbox = Checkbox;
   exports.MCheckboxGroup = CheckboxGroup;
-  exports.MColorPicker = _sfc_main$g;
+  exports.MColorPicker = _sfc_main$i;
   exports.MContainer = Container;
   exports.MDate = Date$1;
   exports.MDateTime = DateTime;
   exports.MDaterange = Daterange;
-  exports.MDisplay = _sfc_main$c;
+  exports.MDisplay = _sfc_main$e;
   exports.MDynamicField = DynamicField;
-  exports.MFieldset = Fieldset;
+  exports.MFieldset = _sfc_main$u;
   exports.MForm = Form;
   exports.MFormDialog = FormDialog;
   exports.MGroupList = GroupList;
-  exports.MHidden = _sfc_main$a;
+  exports.MHidden = _sfc_main$c;
   exports.MLink = Link;
   exports.MNumber = Number$1;
   exports.MPanel = Panel;