@tmagic/form 1.0.2 → 1.0.3

package/dist/tmagic-form.es.js

@@ -1,4 +1,4 @@
-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 { toRaw, defineComponent, inject, ref, computed, resolveComponent, watchEffect, openBlock, createElementBlock, normalizeStyle, normalizeClass, createBlock, resolveDynamicComponent, Fragment, createVNode, withCtx, createElementVNode, createCommentVNode, renderList, createTextVNode, toDisplayString, watch, unref, withDirectives, vShow, renderSlot, onMounted, toRefs, getCurrentInstance, 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 { ElMessage } from 'element-plus';
@@ -12,16 +12,7 @@ const asyncLoadConfig = (value, initValue2, { asyncLoad, name, type }) => {
     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, index) => init(mForm, items, v, value[name]?.[index]));
@@ -34,7 +25,7 @@ const initItemsValue = (mForm, value, initValue2, { items, name, extensible }) =
 };
 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) {
@@ -137,7 +128,7 @@ const getRules = function(mForm, rules = [], props) {
       const fnc = item.validator;
       item.validator = (rule, value, callback, source, options) => fnc({
         rule,
-        value,
+        value: props.config.names ? props.model : value,
         callback,
         source,
         options
@@ -175,7 +166,7 @@ var _export_sfc = (sfc, props) => {
   return target;
 };
 
-const _sfc_main$t = defineComponent({
+const _sfc_main$v = defineComponent({
   name: "m-form-container",
   components: { WarningFilled },
   props: {
@@ -328,7 +319,7 @@ const _hoisted_5$4 = {
   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 = resolveComponent("m-fields-hidden");
   const _component_el_tooltip = resolveComponent("el-tooltip");
   const _component_el_form_item = resolveComponent("el-form-item");
@@ -455,32 +446,32 @@ function _sfc_render$q(_ctx, _cache, $props, $setup, $data, $options) {
     ])) : createCommentVNode("", true)
   ], 6)) : 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 = 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__ */ 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 = inject("mForm");
     const name = computed(() => props.config.name || "");
     const show = computed(() => {
@@ -499,125 +490,90 @@ const _sfc_main$s = defineComponent({
       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 = resolveComponent("el-checkbox");
-  const _component_m_form_container = resolveComponent("m-form-container");
-  return (_ctx.name ? _ctx.model[_ctx.name] : _ctx.model) ? (openBlock(), createElementBlock("fieldset", {
-    key: 0,
-    class: "m-fieldset",
-    style: normalizeStyle(_ctx.show ? "padding: 15px 15px 0 5px;" : "border: 0")
-  }, [
-    !_ctx.show && _ctx.name ? (openBlock(), 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: withCtx(() => [
-        createElementVNode("span", {
-          innerHTML: _ctx.config.legend
-        }, null, 8, _hoisted_1$d),
-        _ctx.config.extra ? (openBlock(), createElementBlock("span", {
-          key: 0,
-          innerHTML: _ctx.config.extra,
-          class: "m-form-tip"
-        }, null, 8, _hoisted_2$6)) : createCommentVNode("", true)
-      ]),
-      _: 1
-    }, 8, ["modelValue", "prop", "onChange"])) : _ctx.config.checkbox && _ctx.name ? (openBlock(), createElementBlock("legend", _hoisted_3$6, [
-      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: withCtx(() => [
+    if (props.config.checkbox && name.value) {
+      watch(() => props.model[name.value]?.value, () => {
+        console.log(props.model);
+        emit("change", props.model);
+      });
+    }
+    return (_ctx, _cache) => {
+      const _component_el_checkbox = resolveComponent("el-checkbox");
+      const _component_m_form_container = resolveComponent("m-form-container");
+      return (unref(name) ? __props.model[unref(name)] : __props.model) ? (openBlock(), createElementBlock("fieldset", {
+        key: 0,
+        class: "m-fieldset",
+        style: normalizeStyle(unref(show) ? "padding: 15px 15px 0 5px;" : "border: 0")
+      }, [
+        unref(name) && __props.config.checkbox ? (openBlock(), createBlock(resolveDynamicComponent(!unref(show) ? "div" : "legend"), { key: 0 }, {
+          default: withCtx(() => [
+            createVNode(_component_el_checkbox, {
+              modelValue: __props.model[unref(name)].value,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => __props.model[unref(name)].value = $event),
+              prop: `${__props.prop}${__props.prop ? "." : ""}${__props.config.name}.value`,
+              "true-label": 1,
+              "false-label": 0
+            }, {
+              default: withCtx(() => [
+                createElementVNode("span", {
+                  innerHTML: __props.config.legend
+                }, null, 8, _hoisted_1$d),
+                __props.config.extra ? (openBlock(), createElementBlock("span", {
+                  key: 0,
+                  innerHTML: __props.config.extra,
+                  class: "m-form-tip"
+                }, null, 8, _hoisted_2$6)) : createCommentVNode("", true)
+              ]),
+              _: 1
+            }, 8, ["modelValue", "prop"])
+          ]),
+          _: 1
+        })) : (openBlock(), createElementBlock("legend", _hoisted_3$6, [
           createElementVNode("span", {
-            innerHTML: _ctx.config.legend
+            innerHTML: __props.config.legend
           }, null, 8, _hoisted_4$5),
-          _ctx.config.extra ? (openBlock(), createElementBlock("span", {
+          __props.config.extra ? (openBlock(), createElementBlock("span", {
             key: 0,
-            innerHTML: _ctx.config.extra,
+            innerHTML: __props.config.extra,
             class: "m-form-tip"
           }, null, 8, _hoisted_5$3)) : createCommentVNode("", true)
-        ]),
-        _: 1
-      }, 8, ["modelValue", "prop", "onChange"])
-    ])) : (openBlock(), createElementBlock("legend", _hoisted_6$2, [
-      createElementVNode("span", {
-        innerHTML: _ctx.config.legend
-      }, null, 8, _hoisted_7$2),
-      _ctx.config.extra ? (openBlock(), createElementBlock("span", {
-        key: 0,
-        innerHTML: _ctx.config.extra,
-        class: "m-form-tip"
-      }, null, 8, _hoisted_8$1)) : createCommentVNode("", true)
-    ])),
-    _ctx.config.schematic && _ctx.show ? (openBlock(), createElementBlock("div", _hoisted_9$1, [
-      createElementVNode("div", _hoisted_10$1, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.config.items, (item, index) => {
+        ])),
+        __props.config.schematic && unref(show) ? (openBlock(), createElementBlock("div", _hoisted_6$2, [
+          createElementVNode("div", _hoisted_7$2, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(__props.config.items, (item, index) => {
+              return openBlock(), createBlock(_component_m_form_container, {
+                key: key(item, index),
+                model: unref(name) ? __props.model[unref(name)] : __props.model,
+                rules: unref(name) ? __props.rules[unref(name)] : [],
+                config: item,
+                prop: __props.prop,
+                labelWidth: unref(lWidth),
+                size: __props.size,
+                onChange: change
+              }, null, 8, ["model", "rules", "config", "prop", "labelWidth", "size"]);
+            }), 128))
+          ]),
+          createElementVNode("img", {
+            class: "m-form-schematic",
+            src: __props.config.schematic
+          }, null, 8, _hoisted_8$1)
+        ])) : unref(show) ? (openBlock(true), createElementBlock(Fragment, { key: 3 }, renderList(__props.config.items, (item, index) => {
           return openBlock(), 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: unref(name) ? __props.model[unref(name)] : __props.model,
+            rules: unref(name) ? __props.rules[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))
-      ]),
-      createElementVNode("img", {
-        class: "m-form-schematic",
-        src: _ctx.config.schematic
-      }, null, 8, _hoisted_11)
-    ])) : _ctx.show ? (openBlock(true), createElementBlock(Fragment, { key: 4 }, renderList(_ctx.config.items, (item, index) => {
-      return openBlock(), 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)) : createCommentVNode("", true)
-  ], 4)) : createCommentVNode("", true);
-}
-var Fieldset = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["render", _sfc_render$p]]);
+            prop: __props.prop,
+            labelWidth: unref(lWidth),
+            size: __props.size,
+            onChange: change
+          }, null, 8, ["model", "rules", "config", "prop", "labelWidth", "size"]);
+        }), 128)) : createCommentVNode("", true)
+      ], 4)) : createCommentVNode("", true);
+    };
+  }
+});
 
-const _sfc_main$r = defineComponent({
+const _sfc_main$t = defineComponent({
   name: "m-form-group-list-item",
   components: { CaretRight, CaretBottom },
   props: {
@@ -796,9 +752,9 @@ function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
     }, null, 8, ["config", "model", "labelWidth", "prop", "size", "onChange"])) : 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 = defineComponent({
+const _sfc_main$s = defineComponent({
   name: "m-form-group-list",
   components: { MFieldsGroupListItem },
   props: {
@@ -953,9 +909,9 @@ function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
     }, 8, ["onClick"])) : 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 = defineComponent({
+const _sfc_main$r = defineComponent({
   name: "m-form-panel",
   components: { CaretBottom, CaretRight },
   props: {
@@ -1066,9 +1022,9 @@ function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["body-style"])) : 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 = defineComponent({
+const _sfc_main$q = defineComponent({
   props: {
     labelWidth: String,
     expandMore: Boolean,
@@ -1115,9 +1071,9 @@ function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
     [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 = defineComponent({
+const _sfc_main$p = defineComponent({
   name: "m-form-row",
   components: { Col },
   props: {
@@ -1167,9 +1123,9 @@ function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
     _: 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 = defineComponent({
+const _sfc_main$o = defineComponent({
   name: "m-form-step",
   props: {
     model: {
@@ -1247,11 +1203,11 @@ function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
     }), 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 = defineComponent({
+const _sfc_main$n = defineComponent({
   name: "m-form-table",
   props: {
     name: {
@@ -1882,7 +1838,7 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ], 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;
@@ -1920,6 +1876,7 @@ const Tab = defineComponent({
       default: () => ({})
     },
     prop: String,
+    name: String,
     size: String
   },
   emits: {
@@ -2000,7 +1957,7 @@ const Tab = defineComponent({
     };
   }
 });
-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 = resolveComponent("m-form-container");
   const _component_el_tab_pane = resolveComponent("el-tab-pane");
@@ -2030,7 +1987,7 @@ function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
                 return openBlock(), 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,
@@ -2047,7 +2004,7 @@ function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
     _: 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) => {
@@ -2091,7 +2048,7 @@ const useAddField = (prop) => {
   });
 };
 
-const _sfc_main$j = defineComponent({
+const _sfc_main$l = defineComponent({
   name: "m-fields-cascader",
   props: {
     ...fieldProps,
@@ -2126,8 +2083,9 @@ const _sfc_main$j = defineComponent({
         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;
@@ -2206,9 +2164,9 @@ function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
     }, 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 = defineComponent({
+const _sfc_main$k = defineComponent({
   name: "m-fields-checkbox",
   props: {
     ...fieldProps,
@@ -2260,9 +2218,9 @@ function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
     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 = defineComponent({
+const _sfc_main$j = defineComponent({
   name: "m-fields-checkbox-group",
   props: {
     ...fieldProps,
@@ -2310,13 +2268,13 @@ function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
     _: 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 = defineComponent({
   name: "m-fields-color-picker"
 });
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   ...__default__$2,
   props: {
     ...fieldProps,
@@ -2346,7 +2304,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$f = defineComponent({
+const _sfc_main$h = defineComponent({
   name: "m-fields-date",
   props: {
     ...fieldProps,
@@ -2385,9 +2343,9 @@ function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
     }, null, 8, ["modelValue", "size", "placeholder", "disabled", "format", "value-format", "onChange"])
   ])) : 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 = defineComponent({
+const _sfc_main$g = defineComponent({
   name: "m-fields-daterange",
   props: {
     ...fieldProps,
@@ -2448,13 +2406,13 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
     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 = defineComponent({
+const _sfc_main$f = defineComponent({
   name: "m-fields-datetime",
   props: {
     ...fieldProps,
@@ -2494,17 +2452,17 @@ function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
     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 = defineComponent({
   name: "m-fields-display"
 });
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   ...__default__$1,
   props: {
     ...fieldProps,
@@ -2526,7 +2484,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$b = defineComponent({
+const _sfc_main$d = defineComponent({
   name: "m-fields-dynamic-field",
   props: {
     ...fieldProps,
@@ -2620,12 +2578,12 @@ function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
     })
   ]);
 }
-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__ = defineComponent({
   name: "m-fields-hidden"
 });
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   ...__default__,
   props: {
     ...fieldProps,
@@ -2650,7 +2608,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$9 = defineComponent({
+const _sfc_main$b = defineComponent({
   name: "m-fields-link",
   props: {
     ...fieldProps,
@@ -2758,9 +2716,9 @@ function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
     }, 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 = defineComponent({
+const _sfc_main$a = defineComponent({
   name: "m-fields-number",
   props: {
     ...fieldProps,
@@ -2803,9 +2761,9 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
     onInput: _ctx.inputHandler
   }, null, 8, ["modelValue", "size", "max", "min", "step", "placeholder", "disabled", "onChange", "onInput"])) : 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 = defineComponent({
+const _sfc_main$9 = defineComponent({
   name: "m-fields-radio-group",
   props: {
     ...fieldProps,
@@ -2849,10 +2807,64 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   }, 8, ["modelValue", "size", "disabled", "onChange"])) : 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__ */ defineComponent({
+  __name: "SelectOptionGroups",
+  props: {
+    options: null
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      const _component_el_option = resolveComponent("el-option");
+      const _component_el_option_group = resolveComponent("el-option-group");
+      return openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (group, index) => {
+        return openBlock(), createBlock(_component_el_option_group, {
+          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: 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__ */ defineComponent({
+  __name: "SelectOptions",
+  props: {
+    options: null,
+    valueKey: null
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      const _component_el_option = resolveComponent("el-option");
+      return openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option) => {
+        return openBlock(), 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 = defineComponent({
   name: "m-fields-select",
+  components: { SelectOptions: _sfc_main$7, SelectOptionGroups: _sfc_main$8 },
   props: {
     ...fieldProps,
     config: {
@@ -3083,6 +3095,7 @@ const _sfc_main$6 = defineComponent({
       loading,
       remote,
       options,
+      groupOptions: options,
       moreLoadingVisible,
       popperClass: mForm?.popperClass,
       getOptions,
@@ -3121,8 +3134,8 @@ const _sfc_main$6 = defineComponent({
 });
 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");
+  const _component_select_option_groups = resolveComponent("select-option-groups");
+  const _component_select_options = resolveComponent("select-options");
   const _component_el_select = resolveComponent("el-select");
   const _directive_loading = resolveDirective("loading");
   return _ctx.model ? withDirectives((openBlock(), createBlock(_component_el_select, {
@@ -3146,32 +3159,13 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
     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: 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: index2,
-                label: item.label,
-                value: item.value,
-                disabled: item.disabled
-              }, null, 8, ["label", "value", "disabled"]);
-            }), 128))
-          ]),
-          _: 2
-        }, 1032, ["label", "disabled"]);
-      }), 128)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(_ctx.options, (option) => {
-        return openBlock(), 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 ? (openBlock(), createBlock(_component_select_option_groups, {
+        key: 0,
+        options: _ctx.groupOptions
+      }, null, 8, ["options"])) : (openBlock(), createBlock(_component_select_options, {
+        key: 1,
+        options: _ctx.options
+      }, null, 8, ["options"])),
       _ctx.moreLoadingVisible ? withDirectives((openBlock(), createElementBlock("div", _hoisted_1$2, null, 512)), [
         [_directive_loading, true]
       ]) : createCommentVNode("", true)
@@ -3805,7 +3799,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 }
 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) => {
@@ -3815,7 +3809,7 @@ const install = (app, opt) => {
   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);
@@ -3825,17 +3819,17 @@ const install = (app, opt) => {
   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);
@@ -3845,5 +3839,5 @@ var index = {
   install
 };
 
-export { Cascader as MCascader, Checkbox as MCheckbox, CheckboxGroup as MCheckboxGroup, _sfc_main$g as MColorPicker, Container as MContainer, Date$1 as MDate, DateTime as MDateTime, Daterange as MDaterange, _sfc_main$c as MDisplay, DynamicField as MDynamicField, Fieldset as MFieldset, Form as MForm, FormDialog as MFormDialog, GroupList as MGroupList, _sfc_main$a as MHidden, Link as MLink, Number$1 as MNumber, Panel as MPanel, RadioGroup as MRadioGroup, Row as MRow, Select as MSelect, Switch as MSwitch, Table as MTable, Tabs as MTabs, Text as MText, Textarea as MTextarea, Time as MTime, index as default, display, fieldProps, filterFunction, getRules, initValue, useAddField };
+export { Cascader as MCascader, Checkbox as MCheckbox, CheckboxGroup as MCheckboxGroup, _sfc_main$i as MColorPicker, Container as MContainer, Date$1 as MDate, DateTime as MDateTime, Daterange as MDaterange, _sfc_main$e as MDisplay, DynamicField as MDynamicField, _sfc_main$u as MFieldset, Form as MForm, FormDialog as MFormDialog, GroupList as MGroupList, _sfc_main$c as MHidden, Link as MLink, Number$1 as MNumber, Panel as MPanel, RadioGroup as MRadioGroup, Row as MRow, Select as MSelect, Switch as MSwitch, Table as MTable, Tabs as MTabs, Text as MText, Textarea as MTextarea, Time as MTime, index as default, display, fieldProps, filterFunction, getRules, initValue, useAddField };
 //# sourceMappingURL=tmagic-form.es.js.map