@tmagic/form 1.6.1 → 1.7.0-beta.0

package/dist/tmagic-form.js

@@ -1,12 +1,12 @@
-import { toRaw, defineComponent, inject, ref, computed, watchEffect, watch, resolveComponent, createElementBlock, createCommentVNode, openBlock, normalizeClass, normalizeStyle, createBlock, resolveDynamicComponent, Fragment, createVNode, unref, withCtx, createElementVNode, renderList, createTextVNode, toDisplayString, withDirectives, vShow, renderSlot, onMounted, Teleport, toRefs, mergeProps, getCurrentInstance, reactive, onBeforeUnmount, vModelText, provide, shallowRef, withModifiers, onBeforeMount, nextTick, resolveDirective, createSlots } from 'vue';
+import { toRaw, defineComponent, inject, ref, computed, watchEffect, watch, resolveComponent, createElementBlock, openBlock, normalizeStyle, normalizeClass, createBlock, createCommentVNode, mergeProps, resolveDynamicComponent, Fragment, createVNode, unref, withCtx, createElementVNode, renderList, createTextVNode, toDisplayString, readonly, withDirectives, vShow, renderSlot, getCurrentInstance, createSlots, reactive, onBeforeUnmount, vModelText, useTemplateRef, provide, shallowRef, onBeforeMount, nextTick, resolveDirective, withModifiers, Teleport, h } from 'vue';
 import { WarningFilled, CaretBottom, CaretRight, Delete, DocumentCopy, CaretTop, Position, Grid, ArrowUp, ArrowDown, FullScreen } from '@element-plus/icons-vue';
 import { cloneDeep, isEqual, isEmpty, debounce } from 'lodash-es';
-import { TMagicFormItem, TMagicTooltip, TMagicIcon, TMagicButton, TMagicCheckbox, TMagicPopover, TMagicInputNumber, TMagicCard, TMagicCol, TMagicRow, TMagicSteps, TMagicStep, useZIndex, TMagicTable, TMagicTableColumn, TMagicUpload, TMagicPagination, tMagicMessage, getDesignConfig, TMagicBadge, TMagicCascader, TMagicCheckboxGroup, TMagicColorPicker, TMagicDatePicker, TMagicForm, TMagicInput, tMagicMessageBox, TMagicDialog, TMagicRadioButton, TMagicRadio, TMagicRadioGroup, TMagicSelect, TMagicSwitch, TMagicTimePicker, TMagicDrawer, TMagicScrollbar } from '@tmagic/design';
-import { setValueByKeyPath, asyncLoadJs, getValueByKeyPath, isNumber } from '@tmagic/utils';
+import { TMagicFormItem, TMagicTooltip, TMagicIcon, TMagicButton, TMagicCheckbox, TMagicPopover, TMagicInputNumber, TMagicCard, TMagicCol, TMagicRow, TMagicSteps, TMagicStep, getDesignConfig, TMagicBadge, TMagicCascader, TMagicCheckboxGroup, TMagicColorPicker, TMagicDatePicker, TMagicForm, TMagicInput, tMagicMessage, tMagicMessageBox, TMagicDialog, TMagicRadioButton, TMagicRadio, TMagicRadioGroup, TMagicSelect, TMagicSwitch, TMagicTimePicker, useZIndex, TMagicTable, TMagicUpload, TMagicPagination, TMagicDrawer, TMagicScrollbar } from '@tmagic/design';
+import { getValueByKeyPath, setValueByKeyPath, isNumber, asyncLoadJs } from '@tmagic/utils';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
-import Sortable from 'sortablejs';
 import { createPopper } from '@popperjs/core';
+import Sortable from 'sortablejs';
 export * from '@tmagic/form-schema';
 
 const isTableSelect = (type) => typeof type === "string" && ["table-select", "tableSelect"].includes(type);
@@ -38,8 +38,10 @@ const setValue = (mForm, value, initValue2, item) => {
     value[name] = getDefaultValue(mForm, item);
   }
   if (type === "fieldset" && checkbox) {
-    if (typeof value[name] === "object") {
-      value[name].value = typeof initValue2[name] === "object" ? initValue2[name].value || 0 : 0;
+    const checkboxName = typeof checkbox === "object" && typeof checkbox.name === "string" ? checkbox.name : "value";
+    const checkboxFalseValue = typeof checkbox === "object" && typeof checkbox.falseValue !== "undefined" ? checkbox.falseValue : 0;
+    if (name && typeof value[name] === "object") {
+      value[name][checkboxName] = typeof initValue2[name] === "object" ? initValue2[name][checkboxName] || checkboxFalseValue : checkboxFalseValue;
     }
   }
 };
@@ -69,6 +71,16 @@ const initValueItem = function(mForm, item, initValue2, value) {
     return createValues(mForm, items, initValue2, value);
   }
   setValue(mForm, value, initValue2, item);
+  if (type === "table") {
+    if (item.defautSort) {
+      sortChange(value[name], item.defautSort);
+    } else if (item.defaultSort) {
+      sortChange(value[name], item.defaultSort);
+    }
+    if (item.sort && item.sortKey) {
+      value[name].sort((a, b) => b[item.sortKey] - a[item.sortKey]);
+    }
+  }
   return value;
 };
 const createValues = function(mForm, config = [], initValue2 = {}, value = {}) {
@@ -109,7 +121,8 @@ const filterFunction = (mForm, config, props) => {
       formValue: mForm?.values || props.model,
       prop: props.prop,
       config: props.config,
-      index: props.index
+      index: props.index,
+      getFormValue: (prop) => getValueByKeyPath(prop, mForm?.values || props.model)
     });
   }
   return config;
@@ -186,25 +199,47 @@ const datetimeFormatter = (v, defaultValue = "-", format = "YYYY-MM-DD HH:mm:ss"
   }
   return defaultValue;
 };
+const getDataByPage = (data = [], pagecontext, pagesize) => data.filter(
+  (item, index) => index >= pagecontext * pagesize && index + 1 <= (pagecontext + 1) * pagesize
+);
+const sortArray = (data, newIndex, oldIndex, sortKey) => {
+  if (newIndex === oldIndex) {
+    return data;
+  }
+  if (newIndex < 0 || newIndex >= data.length || oldIndex < 0 || oldIndex >= data.length) {
+    return data;
+  }
+  const newData = data.toSpliced(newIndex, 0, ...data.splice(oldIndex, 1));
+  if (sortKey) {
+    for (let i = newData.length - 1, v = 0; i >= 0; i--, v++) {
+      newData[v][sortKey] = i;
+    }
+  }
+  return newData;
+};
+const sortChange = (data, { prop, order }) => {
+  if (order === "ascending") {
+    data = data.sort((a, b) => a[prop] - b[prop]);
+  } else if (order === "descending") {
+    data = data.sort((a, b) => b[prop] - a[prop]);
+  }
+};
 
-const _hoisted_1$e = ["data-tmagic-id", "data-tmagic-form-item-prop"];
+const _hoisted_1$d = ["data-tmagic-id", "data-tmagic-form-item-prop"];
 const _hoisted_2$7 = ["innerHTML", "title"];
-const _hoisted_3$5 = ["innerHTML"];
+const _hoisted_3$6 = ["innerHTML"];
 const _hoisted_4$3 = ["innerHTML"];
-const _hoisted_5$3 = ["innerHTML"];
-const _hoisted_6$2 = ["innerHTML", "title"];
+const _hoisted_5$3 = ["innerHTML", "title"];
+const _hoisted_6$1 = ["innerHTML"];
 const _hoisted_7$1 = ["innerHTML"];
-const _hoisted_8$1 = ["innerHTML"];
+const _hoisted_8$1 = ["innerHTML", "title"];
 const _hoisted_9 = ["innerHTML"];
-const _hoisted_10 = ["innerHTML", "title"];
-const _hoisted_11 = ["innerHTML"];
-const _hoisted_12 = ["innerHTML"];
-const _hoisted_13 = ["innerHTML"];
-const _hoisted_14 = {
+const _hoisted_10 = ["innerHTML"];
+const _hoisted_11 = {
   key: 5,
   style: { "text-align": "center" }
 };
-const _sfc_main$x = /* @__PURE__ */ defineComponent({
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormContainer"
   },
@@ -258,8 +293,19 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     });
     const disabled = computed(() => props.disabled || filterFunction(mForm, props.config.disabled, props));
     const text = computed(() => filterFunction(mForm, props.config.text, props));
-    const tooltip = computed(() => filterFunction(mForm, props.config.tooltip, props));
-    const extra = computed(() => filterFunction(mForm, props.config.extra, props));
+    const tooltip = computed(() => {
+      const config = filterFunction(mForm, props.config.tooltip, props);
+      if (typeof config === "string") {
+        return {
+          text: config,
+          placement: "top"
+        };
+      }
+      return {
+        text: config?.text,
+        placement: config?.placement || "top"
+      };
+    });
     const rule = computed(() => getRules(mForm, props.config.rules, props));
     const type = computed(() => {
       let { type: type2 } = props.config;
@@ -275,6 +321,22 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       }
       return value;
     });
+    const fieldsProps = computed(() => ({
+      size: props.size,
+      config: props.config,
+      name: name.value,
+      disabled: disabled.value,
+      prop: itemProp.value,
+      key: props.config[mForm?.keyProps],
+      style: props.config.fieldStyle
+    }));
+    const formItemProps = computed(() => ({
+      prop: itemProp.value,
+      labelWidth: itemLabelWidth.value,
+      labelPosition: props.config.labelPosition,
+      rules: rule.value,
+      extra: filterFunction(mForm, props.config.extra, props)
+    }));
     const itemLabelWidth = computed(() => props.config.labelWidth ?? props.labelWidth);
     watchEffect(() => {
       expand.value = props.expandMore;
@@ -301,7 +363,8 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
           values: mForm?.initValues,
           formValue: mForm?.values,
           prop: itemProp.value,
-          config: props.config
+          config: props.config,
+          getFormValue: (prop) => getValueByKeyPath(prop, mForm?.values || props.model)
         });
       }
       if (filter === "number") {
@@ -329,27 +392,50 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       }
       return true;
     };
+    const createModelProxy = (target, setModelFn, pathPrefix = "") => {
+      return new Proxy(target, {
+        get: (obj, key2) => {
+          const value = obj[key2];
+          if (value && typeof value === "object") {
+            const newPath = pathPrefix ? `${pathPrefix}.${key2}` : key2;
+            return createModelProxy(value, setModelFn, newPath);
+          }
+          return value;
+        },
+        set: (obj, key2, value) => {
+          setModelFn(pathPrefix ? `${pathPrefix}.${key2}` : key2, value);
+          return true;
+        }
+      });
+    };
     const onChangeHandler = async function(v, eventData = {}) {
-      const { filter, onChange, trim, dynamicKey } = props.config;
+      const { filter, onChange, trim } = props.config;
       let value = toRaw(v);
       const changeRecords = eventData.changeRecords || [];
       const newChangeRecords = [...changeRecords];
       try {
         value = filterHandler(filter, v);
         if (typeof onChange === "function") {
+          const setModel = (key2, value2) => {
+            if (props.config.name) {
+              newChangeRecords.push({ propPath: itemProp.value.replace(`${props.config.name}`, key2), value: value2 });
+            } else {
+              newChangeRecords.push({ propPath: itemProp.value, value: value2 });
+            }
+          };
+          const setFormValue = (key2, value2) => {
+            newChangeRecords.push({ propPath: key2, value: value2 });
+          };
           value = await onChange(mForm, value, {
-            model: props.model,
-            values: mForm?.initValues,
-            formValue: mForm?.values,
+            model: createModelProxy(props.model, setModel),
+            values: mForm ? readonly(mForm.initValues) : null,
+            formValue: createModelProxy(mForm?.values || {}, setFormValue),
             prop: itemProp.value,
             config: props.config,
             changeRecords: newChangeRecords,
-            setModel: (key2, value2) => {
-              setValueByKeyPath(key2, value2, props.model);
-              if (props.config.name) {
-                newChangeRecords.push({ propPath: itemProp.value.replace(`${props.config.name}`, key2), value: value2 });
-              }
-            }
+            setModel,
+            setFormValue,
+            getFormValue: (prop) => getValueByKeyPath(prop, mForm?.values || props.model)
           }) ?? value;
         }
         value = trimHandler(trim, value) ?? value;
@@ -358,15 +444,8 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       }
       let valueProp = itemProp.value;
       if (hasModifyKey(eventData)) {
-        if (dynamicKey) {
-          props.model[eventData.modifyKey] = value;
-        } else if (isValidName()) {
-          props.model[name.value][eventData.modifyKey] = value;
-        }
         valueProp = valueProp ? `${valueProp}.${eventData.modifyKey}` : eventData.modifyKey;
         delete eventData.modifyKey;
-      } else if (isValidName() && props.model !== value && (v !== value || props.model[name.value] !== value)) {
-        props.model[name.value] = value;
       }
       if (changeRecords.length === 0) {
         newChangeRecords.push({
@@ -382,95 +461,65 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       const _component_m_fields_hidden = resolveComponent("m-fields-hidden");
       const _component_Container = resolveComponent("Container", true);
-      return __props.config ? (openBlock(), createElementBlock("div", {
-        key: 0,
+      return openBlock(), createElementBlock("div", {
         "data-tmagic-id": __props.config.id,
         "data-tmagic-form-item-prop": itemProp.value,
-        style: normalizeStyle(__props.config.tip ? "display: flex;align-items: baseline;" : ""),
-        class: normalizeClass(`m-form-container m-container-${type.value || ""} ${__props.config.className || ""}`)
+        class: normalizeClass(`m-form-container m-container-${type.value || ""} ${__props.config.className || ""}${__props.config.tip ? " has-tip" : ""}`),
+        style: normalizeStyle(__props.config.style)
       }, [
-        type.value === "hidden" ? (openBlock(), createBlock(_component_m_fields_hidden, {
-          key: 0,
-          model: __props.model,
-          config: __props.config,
-          name: __props.config.name,
-          disabled: disabled.value,
-          prop: itemProp.value
-        }, null, 8, ["model", "config", "name", "disabled", "prop"])) : items.value && !text.value && type.value && display$1.value ? (openBlock(), createBlock(resolveDynamicComponent(tagName.value), {
-          key: key(__props.config),
-          size: __props.size,
+        type.value === "hidden" ? (openBlock(), createBlock(_component_m_fields_hidden, mergeProps({ key: 0 }, fieldsProps.value, { model: __props.model }), null, 16, ["model"])) : items.value && !text.value && type.value && display$1.value ? (openBlock(), createBlock(resolveDynamicComponent(tagName.value), mergeProps({ key: 1 }, fieldsProps.value, {
           model: __props.model,
           "last-values": __props.lastValues,
           "is-compare": __props.isCompare,
-          config: __props.config,
-          disabled: disabled.value,
-          name: name.value,
-          prop: itemProp.value,
           "step-active": __props.stepActive,
           "expand-more": expand.value,
           "label-width": itemLabelWidth.value,
+          style: __props.config.fieldStyle,
           onChange: onChangeHandler,
           onAddDiffCount
-        }, null, 40, ["size", "model", "last-values", "is-compare", "config", "disabled", "name", "prop", "step-active", "expand-more", "label-width"])) : type.value && display$1.value && !showDiff.value ? (openBlock(), createElementBlock(
+        }), null, 16, ["model", "last-values", "is-compare", "step-active", "expand-more", "label-width", "style"])) : type.value && display$1.value && !showDiff.value ? (openBlock(), createElementBlock(
           Fragment,
           { key: 2 },
           [
-            createVNode(unref(TMagicFormItem), {
-              style: normalizeStyle(__props.config.tip ? "flex: 1" : ""),
-              class: normalizeClass({ "tmagic-form-hidden": `${itemLabelWidth.value}` === "0" || !text.value }),
-              prop: itemProp.value,
-              "label-width": itemLabelWidth.value,
-              "label-position": __props.config.labelPosition,
-              rules: rule.value
-            }, {
+            createVNode(unref(TMagicFormItem), mergeProps(formItemProps.value, {
+              class: { "tmagic-form-hidden": `${itemLabelWidth.value}` === "0" || !text.value }
+            }), {
               label: withCtx(() => [
                 createElementVNode("span", {
-                  innerHTML: type.value === "checkbox" ? "" : text.value,
+                  innerHTML: type.value === "checkbox" && !__props.config.useLabel ? "" : text.value,
                   title: __props.config.labelTitle
                 }, null, 8, _hoisted_2$7)
               ]),
               default: withCtx(() => [
-                tooltip.value ? (openBlock(), createBlock(unref(TMagicTooltip), { key: 0 }, {
+                tooltip.value.text ? (openBlock(), createBlock(unref(TMagicTooltip), {
+                  key: 0,
+                  placement: tooltip.value.placement
+                }, {
                   content: withCtx(() => [
-                    createElementVNode("div", { innerHTML: tooltip.value }, null, 8, _hoisted_3$5)
+                    createElementVNode("div", {
+                      innerHTML: tooltip.value.text
+                    }, null, 8, _hoisted_3$6)
                   ]),
                   default: withCtx(() => [
-                    (openBlock(), createBlock(resolveDynamicComponent(tagName.value), {
-                      key: key(__props.config),
-                      size: __props.size,
+                    (openBlock(), createBlock(resolveDynamicComponent(tagName.value), mergeProps(fieldsProps.value, {
                       model: __props.model,
                       "last-values": __props.lastValues,
-                      config: __props.config,
-                      name: name.value,
-                      disabled: disabled.value,
-                      prop: itemProp.value,
                       onChange: onChangeHandler,
                       onAddDiffCount
-                    }, null, 40, ["size", "model", "last-values", "config", "name", "disabled", "prop"]))
+                    }), null, 16, ["model", "last-values"]))
                   ]),
                   _: 1
                   /* STABLE */
-                })) : (openBlock(), createBlock(resolveDynamicComponent(tagName.value), {
-                  key: key(__props.config),
-                  size: __props.size,
+                }, 8, ["placement"])) : (openBlock(), createBlock(resolveDynamicComponent(tagName.value), mergeProps({ key: 1 }, fieldsProps.value, {
                   model: __props.model,
                   "last-values": __props.lastValues,
-                  config: __props.config,
-                  name: name.value,
-                  disabled: disabled.value,
-                  prop: itemProp.value,
                   onChange: onChangeHandler,
                   onAddDiffCount
-                }, null, 40, ["size", "model", "last-values", "config", "name", "disabled", "prop"])),
-                extra.value && type.value !== "table" ? (openBlock(), createElementBlock("div", {
-                  key: 2,
-                  innerHTML: extra.value,
-                  class: "m-form-tip"
-                }, null, 8, _hoisted_4$3)) : createCommentVNode("v-if", true)
+                }), null, 16, ["model", "last-values"]))
               ]),
               _: 1
               /* STABLE */
-            }, 8, ["style", "class", "prop", "label-width", "label-position", "rules"]),
+            }, 16, ["class"]),
             __props.config.tip ? (openBlock(), createBlock(unref(TMagicTooltip), {
               key: 0,
               placement: "left"
@@ -478,7 +527,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
               content: withCtx(() => [
                 createElementVNode("div", {
                   innerHTML: __props.config.tip
-                }, null, 8, _hoisted_5$3)
+                }, null, 8, _hoisted_4$3)
               ]),
               default: withCtx(() => [
                 createVNode(unref(TMagicIcon), { style: { "line-height": "40px", "margin-left": "5px" } }, {
@@ -501,58 +550,41 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
           [
             createCommentVNode(" 对比 "),
             createCommentVNode(" 上次内容 "),
-            createVNode(unref(TMagicFormItem), {
-              style: normalizeStyle([__props.config.tip ? "flex: 1" : "", { "background": "#f7dadd" }]),
-              class: normalizeClass({ "tmagic-form-hidden": `${itemLabelWidth.value}` === "0" || !text.value }),
-              prop: itemProp.value,
-              "label-width": itemLabelWidth.value,
-              "label-position": __props.config.labelPosition,
-              rules: rule.value
-            }, {
+            createVNode(unref(TMagicFormItem), mergeProps(formItemProps.value, {
+              class: { "tmagic-form-hidden": `${itemLabelWidth.value}` === "0" || !text.value, "show-diff": true }
+            }), {
               label: withCtx(() => [
                 createElementVNode("span", {
                   innerHTML: type.value === "checkbox" ? "" : text.value,
                   title: __props.config.labelTitle
-                }, null, 8, _hoisted_6$2)
+                }, null, 8, _hoisted_5$3)
               ]),
               default: withCtx(() => [
-                tooltip.value ? (openBlock(), createBlock(unref(TMagicTooltip), { key: 0 }, {
+                tooltip.value.text ? (openBlock(), createBlock(unref(TMagicTooltip), {
+                  key: 0,
+                  placement: tooltip.value.placement
+                }, {
                   content: withCtx(() => [
-                    createElementVNode("div", { innerHTML: tooltip.value }, null, 8, _hoisted_7$1)
+                    createElementVNode("div", {
+                      innerHTML: tooltip.value.text
+                    }, null, 8, _hoisted_6$1)
                   ]),
                   default: withCtx(() => [
-                    (openBlock(), createBlock(resolveDynamicComponent(tagName.value), {
-                      key: key(__props.config),
-                      size: __props.size,
+                    (openBlock(), createBlock(resolveDynamicComponent(tagName.value), mergeProps(fieldsProps.value, {
                       model: __props.lastValues,
-                      config: __props.config,
-                      name: name.value,
-                      disabled: disabled.value,
-                      prop: itemProp.value,
                       onChange: onChangeHandler
-                    }, null, 40, ["size", "model", "config", "name", "disabled", "prop"]))
+                    }), null, 16, ["model"]))
                   ]),
                   _: 1
                   /* STABLE */
-                })) : (openBlock(), createBlock(resolveDynamicComponent(tagName.value), {
-                  key: key(__props.config),
-                  size: __props.size,
+                }, 8, ["placement"])) : (openBlock(), createBlock(resolveDynamicComponent(tagName.value), mergeProps({ key: 1 }, fieldsProps.value, {
                   model: __props.lastValues,
-                  config: __props.config,
-                  name: name.value,
-                  disabled: disabled.value,
-                  prop: itemProp.value,
                   onChange: onChangeHandler
-                }, null, 40, ["size", "model", "config", "name", "disabled", "prop"])),
-                extra.value ? (openBlock(), createElementBlock("div", {
-                  key: 2,
-                  innerHTML: extra.value,
-                  class: "m-form-tip"
-                }, null, 8, _hoisted_8$1)) : createCommentVNode("v-if", true)
+                }), null, 16, ["model"]))
               ]),
               _: 1
               /* STABLE */
-            }, 8, ["style", "class", "prop", "label-width", "label-position", "rules"]),
+            }, 16, ["class"]),
             __props.config.tip ? (openBlock(), createBlock(unref(TMagicTooltip), {
               key: 0,
               placement: "left"
@@ -560,7 +592,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
               content: withCtx(() => [
                 createElementVNode("div", {
                   innerHTML: __props.config.tip
-                }, null, 8, _hoisted_9)
+                }, null, 8, _hoisted_7$1)
               ]),
               default: withCtx(() => [
                 createVNode(unref(TMagicIcon), { style: { "line-height": "40px", "margin-left": "5px" } }, {
@@ -575,58 +607,42 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
               /* STABLE */
             })) : createCommentVNode("v-if", true),
             createCommentVNode(" 当前内容 "),
-            createVNode(unref(TMagicFormItem), {
-              style: normalizeStyle([__props.config.tip ? "flex: 1" : "", { "background": "#def7da" }]),
-              class: normalizeClass({ "tmagic-form-hidden": `${itemLabelWidth.value}` === "0" || !text.value }),
-              prop: itemProp.value,
-              "label-width": itemLabelWidth.value,
-              "label-position": __props.config.labelPosition,
-              rules: rule.value
-            }, {
+            createVNode(unref(TMagicFormItem), mergeProps(formItemProps.value, {
+              style: __props.config.tip ? "flex: 1" : "",
+              class: { "tmagic-form-hidden": `${itemLabelWidth.value}` === "0" || !text.value, "show-diff": true }
+            }), {
               label: withCtx(() => [
                 createElementVNode("span", {
                   innerHTML: type.value === "checkbox" ? "" : text.value,
                   title: __props.config.labelTitle
-                }, null, 8, _hoisted_10)
+                }, null, 8, _hoisted_8$1)
               ]),
               default: withCtx(() => [
-                tooltip.value ? (openBlock(), createBlock(unref(TMagicTooltip), { key: 0 }, {
+                tooltip.value.text ? (openBlock(), createBlock(unref(TMagicTooltip), {
+                  key: 0,
+                  placement: tooltip.value.placement
+                }, {
                   content: withCtx(() => [
-                    createElementVNode("div", { innerHTML: tooltip.value }, null, 8, _hoisted_11)
+                    createElementVNode("div", {
+                      innerHTML: tooltip.value.text
+                    }, null, 8, _hoisted_9)
                   ]),
                   default: withCtx(() => [
-                    (openBlock(), createBlock(resolveDynamicComponent(tagName.value), {
-                      key: key(__props.config),
-                      size: __props.size,
+                    (openBlock(), createBlock(resolveDynamicComponent(tagName.value), mergeProps(fieldsProps.value, {
                       model: __props.model,
-                      config: __props.config,
-                      name: name.value,
-                      disabled: disabled.value,
-                      prop: itemProp.value,
                       onChange: onChangeHandler
-                    }, null, 40, ["size", "model", "config", "name", "disabled", "prop"]))
+                    }), null, 16, ["model"]))
                   ]),
                   _: 1
                   /* STABLE */
-                })) : (openBlock(), createBlock(resolveDynamicComponent(tagName.value), {
-                  key: key(__props.config),
-                  size: __props.size,
+                }, 8, ["placement"])) : (openBlock(), createBlock(resolveDynamicComponent(tagName.value), mergeProps({ key: 1 }, fieldsProps.value, {
                   model: __props.model,
-                  config: __props.config,
-                  name: name.value,
-                  disabled: disabled.value,
-                  prop: itemProp.value,
                   onChange: onChangeHandler
-                }, null, 40, ["size", "model", "config", "name", "disabled", "prop"])),
-                extra.value ? (openBlock(), createElementBlock("div", {
-                  key: 2,
-                  innerHTML: extra.value,
-                  class: "m-form-tip"
-                }, null, 8, _hoisted_12)) : createCommentVNode("v-if", true)
+                }), null, 16, ["model"]))
               ]),
               _: 1
               /* STABLE */
-            }, 8, ["style", "class", "prop", "label-width", "label-position", "rules"]),
+            }, 16, ["style", "class"]),
             __props.config.tip ? (openBlock(), createBlock(unref(TMagicTooltip), {
               key: 1,
               placement: "left"
@@ -634,7 +650,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
               content: withCtx(() => [
                 createElementVNode("div", {
                   innerHTML: __props.config.tip
-                }, null, 8, _hoisted_13)
+                }, null, 8, _hoisted_10)
               ]),
               default: withCtx(() => [
                 createVNode(unref(TMagicIcon), { style: { "line-height": "40px", "margin-left": "5px" } }, {
@@ -682,7 +698,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
           64
           /* STABLE_FRAGMENT */
         )) : createCommentVNode("v-if", true),
-        __props.config.expand && type.value !== "fieldset" ? (openBlock(), createElementBlock("div", _hoisted_14, [
+        __props.config.expand && type.value !== "fieldset" ? (openBlock(), createElementBlock("div", _hoisted_11, [
           createVNode(unref(TMagicButton), {
             type: "primary",
             size: "small",
@@ -701,23 +717,23 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
             /* STABLE */
           })
         ])) : createCommentVNode("v-if", true)
-      ], 14, _hoisted_1$e)) : createCommentVNode("v-if", true);
+      ], 14, _hoisted_1$d);
     };
   }
 });
 
-const _hoisted_1$d = ["innerHTML"];
+const _hoisted_1$c = ["innerHTML"];
 const _hoisted_2$6 = ["innerHTML"];
-const _hoisted_3$4 = { key: 1 };
+const _hoisted_3$5 = { key: 1 };
 const _hoisted_4$2 = ["innerHTML"];
 const _hoisted_5$2 = ["innerHTML"];
-const _hoisted_6$1 = {
+const _hoisted_6 = {
   key: 2,
   style: { "display": "flex" }
 };
 const _hoisted_7 = { style: { "flex": "1" } };
 const _hoisted_8 = ["src"];
-const _sfc_main$w = /* @__PURE__ */ defineComponent({
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormFieldset"
   },
@@ -739,9 +755,27 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     const emit = __emit;
     const mForm = inject("mForm");
     const name = computed(() => props.config.name || "");
+    const checkboxName = computed(() => {
+      if (typeof props.config.checkbox === "object" && typeof props.config.checkbox.name === "string") {
+        return props.config.checkbox.name;
+      }
+      return "value";
+    });
+    const checkboxTrueValue = computed(() => {
+      if (typeof props.config.checkbox === "object" && typeof props.config.checkbox.trueValue !== "undefined") {
+        return props.config.checkbox.trueValue;
+      }
+      return 1;
+    });
+    const checkboxFalseValue = computed(() => {
+      if (typeof props.config.checkbox === "object" && typeof props.config.checkbox.falseValue !== "undefined") {
+        return props.config.checkbox.falseValue;
+      }
+      return 0;
+    });
     const show = computed(() => {
-      if (props.config.expand && name.value) {
-        return props.model[name.value]?.value;
+      if (props.config.expand && checkboxName.value) {
+        return (name.value ? props.model[name.value] : props.model)?.[checkboxName.value] === checkboxTrueValue.value;
       }
       return true;
     });
@@ -752,7 +786,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
       return props.config.labelWidth || props.labelWidth || (props.config.text ? void 0 : "0");
     });
     const valueChangeHandler = (value) => {
-      emit("change", value, { modifyKey: "value" });
+      emit("change", value, { modifyKey: checkboxName.value });
     };
     const changeHandler = (v, eventData) => emit("change", v, eventData);
     const key = (item, index) => item[mForm?.keyProp || "__key"] ?? index;
@@ -769,19 +803,16 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
           name.value && __props.config.checkbox ? (openBlock(), createBlock(resolveDynamicComponent(!show.value ? "div" : "legend"), { key: 0 }, {
             default: withCtx(() => [
               createVNode(unref(TMagicCheckbox), {
-                modelValue: __props.model[name.value].value,
-                "onUpdate:modelValue": [
-                  _cache[0] || (_cache[0] = ($event) => __props.model[name.value].value = $event),
-                  valueChangeHandler
-                ],
-                prop: `${__props.prop}${__props.prop ? "." : ""}${__props.config.name}.value`,
-                "true-value": 1,
-                "false-value": 0
+                "model-value": (name.value ? __props.model[name.value] : __props.model)[checkboxName.value],
+                prop: `${__props.prop}${__props.prop ? "." : ""}${__props.config.name}.${checkboxName.value}`,
+                "true-value": checkboxTrueValue.value,
+                "false-value": checkboxFalseValue.value,
+                "onUpdate:modelValue": valueChangeHandler
               }, {
                 default: withCtx(() => [
                   createElementVNode("span", {
                     innerHTML: __props.config.legend
-                  }, null, 8, _hoisted_1$d),
+                  }, null, 8, _hoisted_1$c),
                   __props.config.extra ? (openBlock(), createElementBlock("span", {
                     key: 0,
                     innerHTML: __props.config.extra,
@@ -790,11 +821,11 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
                 ]),
                 _: 1
                 /* STABLE */
-              }, 8, ["modelValue", "prop"])
+              }, 8, ["model-value", "prop", "true-value", "false-value"])
             ]),
             _: 1
             /* STABLE */
-          })) : (openBlock(), createElementBlock("legend", _hoisted_3$4, [
+          })) : (openBlock(), createElementBlock("legend", _hoisted_3$5, [
             createElementVNode("span", {
               innerHTML: __props.config.legend
             }, null, 8, _hoisted_4$2),
@@ -804,13 +835,13 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
               class: "m-form-tip"
             }, null, 8, _hoisted_5$2)) : createCommentVNode("v-if", true)
           ])),
-          __props.config.schematic && show.value ? (openBlock(), createElementBlock("div", _hoisted_6$1, [
+          __props.config.schematic && show.value ? (openBlock(), createElementBlock("div", _hoisted_6, [
             createElementVNode("div", _hoisted_7, [
               (openBlock(true), createElementBlock(
                 Fragment,
                 null,
                 renderList(__props.config.items, (item, index) => {
-                  return openBlock(), createBlock(_sfc_main$x, {
+                  return openBlock(), createBlock(_sfc_main$A, {
                     key: key(item, index),
                     model: name.value ? __props.model[name.value] : __props.model,
                     lastValues: name.value ? __props.lastValues[name.value] : __props.lastValues,
@@ -822,7 +853,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
                     labelWidth: lWidth.value,
                     size: __props.size,
                     onChange: changeHandler,
-                    onAddDiffCount: _cache[1] || (_cache[1] = ($event) => onAddDiffCount())
+                    onAddDiffCount: _cache[0] || (_cache[0] = ($event) => onAddDiffCount())
                   }, null, 8, ["model", "lastValues", "is-compare", "rules", "config", "prop", "disabled", "labelWidth", "size"]);
                 }),
                 128
@@ -837,7 +868,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
             Fragment,
             { key: 3 },
             renderList(__props.config.items, (item, index) => {
-              return openBlock(), createBlock(_sfc_main$x, {
+              return openBlock(), createBlock(_sfc_main$A, {
                 key: key(item, index),
                 model: name.value ? __props.model[name.value] : __props.model,
                 lastValues: name.value ? __props.lastValues[name.value] : __props.lastValues,
@@ -849,7 +880,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
                 size: __props.size,
                 disabled: __props.disabled,
                 onChange: changeHandler,
-                onAddDiffCount: _cache[2] || (_cache[2] = ($event) => onAddDiffCount())
+                onAddDiffCount: _cache[1] || (_cache[1] = ($event) => onAddDiffCount())
               }, null, 8, ["model", "lastValues", "is-compare", "rules", "config", "prop", "labelWidth", "size", "disabled"]);
             }),
             128
@@ -863,10 +894,73 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$c = { class: "m-fields-group-list-item" };
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MFormFlexLayout"
+  },
+  __name: "FlexLayout",
+  props: {
+    model: {},
+    lastValues: {},
+    isCompare: { type: Boolean },
+    config: {},
+    name: {},
+    labelWidth: {},
+    prop: {},
+    size: {},
+    disabled: { type: Boolean }
+  },
+  emits: ["change", "addDiffCount"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const mForm = inject("mForm");
+    const gap = computed(() => props.config.gap || "16px");
+    const changeHandler = (v, eventData) => {
+      emit("change", props.model, eventData);
+    };
+    const onAddDiffCount = () => emit("addDiffCount");
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          class: "m-form-flex-layout",
+          style: normalizeStyle({ display: "flex", flexWrap: "wrap", gap: gap.value })
+        },
+        [
+          (openBlock(true), createElementBlock(
+            Fragment,
+            null,
+            renderList(__props.config.items, (item, index) => {
+              return openBlock(), createBlock(_sfc_main$A, {
+                key: item[unref(mForm)?.keyProp || "__key"] ?? index,
+                config: item,
+                model: __props.name ? __props.model[__props.name] : __props.model,
+                lastValues: __props.name ? __props.lastValues[__props.name] : __props.lastValues,
+                "is-compare": __props.isCompare,
+                prop: __props.prop,
+                size: __props.size,
+                disabled: __props.disabled,
+                "label-width": __props.config.labelWidth || __props.labelWidth,
+                onChange: changeHandler,
+                onAddDiffCount: _cache[0] || (_cache[0] = ($event) => onAddDiffCount())
+              }, null, 8, ["config", "model", "lastValues", "is-compare", "prop", "size", "disabled", "label-width"]);
+            }),
+            128
+            /* KEYED_FRAGMENT */
+          ))
+        ],
+        4
+        /* STYLE */
+      );
+    };
+  }
+});
+
+const _hoisted_1$b = { class: "m-fields-group-list-item" };
 const _hoisted_2$5 = { style: { "text-align": "right", "margin-top": "20px" } };
-const _hoisted_3$3 = ["innerHTML"];
-const _sfc_main$v = /* @__PURE__ */ defineComponent({
+const _hoisted_3$4 = ["innerHTML"];
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormGroupListItem"
   },
@@ -944,7 +1038,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
       emit("swap-item", props.index, moveSpecifyLocationIndex.value - 1);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$c, [
+      return openBlock(), createElementBlock("div", _hoisted_1$b, [
         createElementVNode("div", null, [
           createVNode(unref(TMagicButton), {
             link: "",
@@ -1133,9 +1227,9 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
             key: 3,
             innerHTML: itemExtra.value,
             class: "m-form-tip"
-          }, null, 8, _hoisted_3$3)) : createCommentVNode("v-if", true)
+          }, null, 8, _hoisted_3$4)) : createCommentVNode("v-if", true)
         ]),
-        expand.value ? (openBlock(), createBlock(_sfc_main$x, {
+        expand.value ? (openBlock(), createBlock(_sfc_main$A, {
           key: 0,
           config: rowConfig.value,
           model: __props.model,
@@ -1153,13 +1247,13 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$b = { class: "m-fields-group-list" };
+const _hoisted_1$a = { class: "m-fields-group-list" };
 const _hoisted_2$4 = ["innerHTML"];
-const _hoisted_3$2 = {
+const _hoisted_3$3 = {
   key: 1,
   class: "el-table__empty-block"
 };
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormGroupList"
   },
@@ -1249,13 +1343,13 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     const onAddDiffCount = () => emit("addDiffCount");
     const getLastValues = (item, index) => item?.[index] || {};
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$b, [
+      return openBlock(), createElementBlock("div", _hoisted_1$a, [
         __props.config.extra ? (openBlock(), createElementBlock("div", {
           key: 0,
           innerHTML: __props.config.extra,
           style: { "color": "rgba(0, 0, 0, 0.45)" }
         }, null, 8, _hoisted_2$4)) : createCommentVNode("v-if", true),
-        !__props.model[__props.name] || !__props.model[__props.name].length ? (openBlock(), createElementBlock("div", _hoisted_3$2, [..._cache[1] || (_cache[1] = [
+        !__props.model[__props.name] || !__props.model[__props.name].length ? (openBlock(), createElementBlock("div", _hoisted_3$3, [..._cache[1] || (_cache[1] = [
           createElementVNode(
             "span",
             { class: "el-table__empty-text" },
@@ -1267,7 +1361,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
           Fragment,
           { key: 2 },
           renderList(__props.model[__props.name], (item, index) => {
-            return openBlock(), createBlock(_sfc_main$v, {
+            return openBlock(), createBlock(_sfc_main$x, {
               key: index,
               model: item,
               lastValues: getLastValues(__props.lastValues[__props.name], index),
@@ -1327,15 +1421,15 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$a = { style: { "width": "100%", "display": "flex", "align-items": "center" } };
+const _hoisted_1$9 = { style: { "width": "100%", "display": "flex", "align-items": "center" } };
 const _hoisted_2$3 = ["innerHTML"];
-const _hoisted_3$1 = {
+const _hoisted_3$2 = {
   key: 0,
   style: { "display": "flex" }
 };
 const _hoisted_4$1 = { style: { "flex": "1" } };
 const _hoisted_5$1 = ["src"];
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormPanel"
   },
@@ -1370,7 +1464,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
         "body-style": { display: expand.value ? "block" : "none" }
       }, {
         header: withCtx(() => [
-          createElementVNode("div", _hoisted_1$a, [
+          createElementVNode("div", _hoisted_1$9, [
             createVNode(unref(TMagicButton), {
               style: { "padding": "0" },
               link: "",
@@ -1394,13 +1488,13 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
         default: withCtx(() => [
           createElementVNode("div", null, [
             renderSlot(_ctx.$slots, "default"),
-            __props.config.schematic ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
+            __props.config.schematic ? (openBlock(), createElementBlock("div", _hoisted_3$2, [
               createElementVNode("div", _hoisted_4$1, [
                 (openBlock(true), createElementBlock(
                   Fragment,
                   null,
                   renderList(items.value, (item, index) => {
-                    return openBlock(), createBlock(_sfc_main$x, {
+                    return openBlock(), createBlock(_sfc_main$A, {
                       key: item[unref(mForm)?.keyProp || "__key"] ?? index,
                       config: item,
                       model: __props.name ? __props.model[__props.name] : __props.model,
@@ -1426,7 +1520,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
               Fragment,
               { key: 1 },
               renderList(items.value, (item, index) => {
-                return openBlock(), createBlock(_sfc_main$x, {
+                return openBlock(), createBlock(_sfc_main$A, {
                   key: item[unref(mForm)?.keyProp || "__key"] ?? index,
                   config: item,
                   model: __props.name ? __props.model[__props.name] : __props.model,
@@ -1452,7 +1546,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormCol"
   },
@@ -1480,7 +1574,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return withDirectives((openBlock(), createBlock(unref(TMagicCol), { span: __props.span }, {
         default: withCtx(() => [
-          createVNode(_sfc_main$x, {
+          createVNode(_sfc_main$A, {
             model: __props.model,
             lastValues: __props.lastValues,
             "is-compare": __props.isCompare,
@@ -1503,7 +1597,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormRow"
   },
@@ -1536,7 +1630,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
             Fragment,
             null,
             renderList(__props.config.items, (col, index) => {
-              return openBlock(), createBlock(_sfc_main$s, {
+              return openBlock(), createBlock(_sfc_main$u, {
                 key: col[unref(mForm)?.keyProp || "__key"] ?? index,
                 span: col.span || __props.config.span || 24 / __props.config.items.length,
                 config: col,
@@ -1563,7 +1657,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormStep"
   },
@@ -1638,7 +1732,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
                       Fragment,
                       null,
                       [
-                        item ? withDirectives((openBlock(), createBlock(_sfc_main$x, {
+                        item ? withDirectives((openBlock(), createBlock(_sfc_main$A, {
                           key: item[unref(mForm)?.keyProp || "__key"],
                           config: item,
                           model: step.name ? __props.model[step.name] : __props.model,
@@ -1674,1044 +1768,325 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$9 = { class: "m-fields-table-wrap" };
-const _hoisted_2$2 = ["innerHTML"];
-const _hoisted_3 = ["innerHTML"];
-const _hoisted_4 = { style: { "display": "flex", "justify-content": "space-between", "margin": "10px 0" } };
-const _hoisted_5 = { style: { "display": "flex" } };
-const _hoisted_6 = {
-  key: 1,
-  class: "bottom",
-  style: { "text-align": "right" }
-};
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   ...{
-    name: "MFormTable"
+    name: "MFormTabs"
   },
-  __name: "Table",
+  __name: "Tabs",
   props: {
     model: {},
     lastValues: { default: () => ({}) },
     isCompare: { type: Boolean, default: false },
     config: {},
     name: {},
-    prop: { default: "" },
-    labelWidth: {},
-    sort: { type: Boolean },
-    disabled: { type: Boolean },
-    sortKey: { default: "" },
-    text: {},
     size: {},
-    enableToggleMode: { type: Boolean, default: true },
-    showIndex: { type: Boolean, default: true }
+    labelWidth: {},
+    prop: {},
+    expandMore: { type: Boolean },
+    disabled: { type: Boolean }
   },
-  emits: ["change", "select", "addDiffCount"],
-  setup(__props, { expose: __expose, emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    let timer = null;
-    const mForm = inject("mForm");
-    const { nextZIndex } = useZIndex();
-    const tMagicTable = ref();
-    const excelBtn = ref();
-    const mTable = ref();
-    const pagesize = ref(10);
-    const pagecontext = ref(0);
-    const updateKey = ref(1);
-    const isFullscreen = ref(false);
-    const modelName = computed(() => props.name || props.config.name || "");
-    const getDataByPage = (data2 = []) => data2.filter(
-      (item, index) => index >= pagecontext.value * pagesize.value && index + 1 <= (pagecontext.value + 1) * pagesize.value
-    );
-    const pageinationData = computed(() => getDataByPage(props.model[modelName.value]));
-    const data = computed(() => props.config.pagination ? pageinationData.value : props.model[modelName.value]);
-    const lastData = computed(
-      () => props.config.pagination ? getDataByPage(props.lastValues[modelName.value]) : props.lastValues[modelName.value] || []
-    );
-    const sortChange = ({ prop, order }) => {
-      if (order === "ascending") {
-        props.model[modelName.value] = props.model[modelName.value].sort((a, b) => a[prop] - b[prop]);
-      } else if (order === "descending") {
-        props.model[modelName.value] = props.model[modelName.value].sort((a, b) => b[prop] - a[prop]);
-      }
+  emits: ["change", "addDiffCount"],
+  setup(__props, { emit: __emit }) {
+    const tabPaneComponent = getDesignConfig("components")?.tabPane;
+    const tabsComponent = getDesignConfig("components")?.tabs;
+    const getActive = (mForm2, props2, activeTabName2) => {
+      const { config, model, prop } = props2;
+      const { active } = config;
+      if (typeof active === "function") return active(mForm2, { model, formValue: mForm2?.values, prop });
+      if (0 >= props2.config.items.length) return "0";
+      if (typeof active !== "undefined") return active;
+      return "0";
     };
-    const swapArray = (index1, index2) => {
-      props.model[modelName.value].splice(index1, 0, props.model[modelName.value].splice(index2, 1)[0]);
-      if (props.sortKey) {
-        for (let i = props.model[modelName.value].length - 1, v = 0; i >= 0; i--, v++) {
-          props.model[modelName.value][v][props.sortKey] = i;
-        }
+    const tabClick = (mForm2, tab, props2) => {
+      const { config, model, prop } = props2;
+      tab.name = tab.paneName;
+      if (typeof config.onTabClick === "function") {
+        config.onTabClick(mForm2, tab, { model, formValue: mForm2?.values, prop, config });
       }
-      mForm?.$emit("field-change", props.prop, props.model[modelName.value]);
-    };
-    let sortable;
-    const rowDrop = () => {
-      sortable?.destroy();
-      const tableEl = tMagicTable.value?.instance.$el;
-      const tBodyEl = tableEl?.querySelector(".el-table__body > tbody");
-      if (!tBodyEl) {
-        return;
+      const tabConfig = config.items.find((item) => tab.name === item.status);
+      if (tabConfig && typeof tabConfig.onTabClick === "function") {
+        tabConfig.onTabClick(mForm2, tab, { model, formValue: mForm2?.values, prop, config });
       }
-      sortable = Sortable.create(tBodyEl, {
-        draggable: ".tmagic-design-table-row",
-        filter: "input",
-        // 表单组件选字操作和触发拖拽会冲突，优先保证选字操作
-        preventOnFilter: false,
-        // 允许选字
-        direction: "vertical",
-        onEnd: ({ newIndex, oldIndex }) => {
-          if (typeof newIndex === "undefined") return;
-          if (typeof oldIndex === "undefined") return;
-          swapArray(newIndex, oldIndex);
-          emit("change", props.model[modelName.value]);
-          mForm?.$emit("field-change", props.prop, props.model[modelName.value]);
-        }
-      });
     };
-    const newHandler = async (row) => {
-      if (props.config.max && props.model[modelName.value].length >= props.config.max) {
-        tMagicMessage.error(`最多新增配置不能超过${props.config.max}条`);
-        return;
+    const props = __props;
+    const emit = __emit;
+    const mForm = inject("mForm");
+    const activeTabName = ref(getActive(mForm, props));
+    const diffCount = ref({});
+    const tabs = computed(() => {
+      if (props.config.dynamic) {
+        if (!props.config.name) throw new Error("dynamic tab 必须配置name");
+        return props.model[props.config.name] || [];
       }
-      if (typeof props.config.beforeAddRow === "function") {
-        const beforeCheckRes = props.config.beforeAddRow(mForm, {
-          model: props.model[modelName.value],
-          formValue: mForm?.values,
+      return props.config.items.filter((item) => display(mForm, item.display, props));
+    });
+    const filter = (config) => filterFunction(mForm, config, props);
+    watchEffect(() => {
+      if (typeof props.config.activeChange === "function") {
+        props.config.activeChange(mForm, activeTabName.value, {
+          model: props.model,
           prop: props.prop
         });
-        if (!beforeCheckRes) return;
       }
-      const columns = props.config.items;
-      const enumValues = props.config.enum || [];
-      let enumV = [];
-      const { length } = props.model[modelName.value];
-      const key = props.config.key || "id";
-      let inputs = {};
-      if (enumValues.length) {
-        if (length >= enumValues.length) {
-          return;
-        }
-        enumV = enumValues.filter((item) => {
-          let i = 0;
-          for (; i < length; i++) {
-            if (item[key] === props.model[modelName.value][i][key]) {
-              break;
-            }
-          }
-          return i === length;
-        });
-        if (enumV.length > 0) {
-          inputs = enumV[0];
-        }
-      } else if (Array.isArray(row)) {
-        columns.forEach((column, index) => {
-          column.name && (inputs[column.name] = row[index]);
-        });
+    });
+    const tabItems = (tab) => props.config.dynamic ? props.config.items : tab.items;
+    const tabClickHandler = (tab) => {
+      if (typeof tab === "object") {
+        tabClick(mForm, tab, props);
       } else {
-        if (typeof props.config.defaultAdd === "function") {
-          inputs = await props.config.defaultAdd(mForm, {
-            model: props.model[modelName.value],
-            formValue: mForm?.values
-          });
-        } else if (props.config.defaultAdd) {
-          inputs = props.config.defaultAdd;
+        let item = tabs.value.find((tab2) => tab2.status === tab2);
+        if (!item) {
+          item = tabs.value[tab];
         }
-        inputs = await initValue(mForm, {
-          config: columns,
-          initValues: inputs
-        });
-      }
-      if (props.sortKey && length) {
-        inputs[props.sortKey] = props.model[modelName.value][length - 1][props.sortKey] - 1;
+        tabClick(mForm, item, props);
       }
-      props.model[modelName.value].push(inputs);
-      emit("change", props.model[modelName.value], {
-        changeRecords: [
-          {
-            propPath: `${props.prop}.${props.model[modelName.value].length - 1}`,
-            value: inputs
-          }
-        ]
-      });
     };
-    onMounted(() => {
-      if (props.config.defautSort) {
-        sortChange(props.config.defautSort);
-      } else if (props.config.defaultSort) {
-        sortChange(props.config.defaultSort);
-      }
-      if (props.sort && props.sortKey) {
-        props.model[modelName.value].sort((a, b) => b[props.sortKey] - a[props.sortKey]);
-      }
-    });
-    watchEffect(() => {
-      if (props.config.dropSort) {
-        rowDrop();
-      }
-    });
-    const addable = computed(() => {
-      if (!props.model[modelName.value].length) {
-        return true;
-      }
-      if (typeof props.config.addable === "function") {
-        return props.config.addable(mForm, {
-          model: props.model[modelName.value],
-          formValue: mForm?.values,
-          prop: props.prop
+    const onTabAdd = async () => {
+      if (!props.name) throw new Error("dynamic tab 必须配置name");
+      if (typeof props.config.onTabAdd === "function") {
+        props.config.onTabAdd(mForm, {
+          model: props.model,
+          prop: props.prop,
+          config: props.config
         });
-      }
-      return typeof props.config.addable === "undefined" ? true : props.config.addable;
-    });
-    const selection = computed(() => {
-      if (typeof props.config.selection === "function") {
-        return props.config.selection(mForm, { model: props.model[modelName.value] });
-      }
-      return props.config.selection;
-    });
-    const importable = computed(() => {
-      if (typeof props.config.importable === "function") {
-        return props.config.importable(mForm, {
-          formValue: mForm?.values,
-          model: props.model[modelName.value]
+        emit("change", props.model);
+      } else {
+        const newObj = await initValue(mForm, {
+          config: props.config.items,
+          initValues: {}
+        });
+        newObj.title = `标签${tabs.value.length + 1}`;
+        props.model[props.name].push(newObj);
+        emit("change", props.model[props.name], {
+          changeRecords: [
+            {
+              propPath: `${props.prop}.${props.model[props.name].length - 1}`,
+              value: newObj
+            }
+          ]
         });
       }
-      return typeof props.config.importable === "undefined" ? false : props.config.importable;
-    });
-    const display$1 = (fuc) => display(mForm, fuc, props);
-    const itemExtra = (fuc, index) => {
-      if (typeof fuc === "function") {
-        return fuc(mForm, {
-          values: mForm?.initValues,
+      mForm?.$emit("field-change", props.prop, props.model[props.name]);
+    };
+    const onTabRemove = (tabName) => {
+      if (!props.name) throw new Error("dynamic tab 必须配置name");
+      if (typeof props.config.onTabRemove === "function") {
+        props.config.onTabRemove(mForm, tabName, {
           model: props.model,
-          formValue: mForm ? mForm.values : props.model,
           prop: props.prop,
-          index
+          config: props.config
         });
+      } else {
+        props.model[props.name].splice(+tabName, 1);
+        if (tabName < activeTabName.value || activeTabName.value >= props.model[props.name].length) {
+          activeTabName.value = (+activeTabName.value - 1).toString();
+          tabClick(mForm, { name: activeTabName.value }, props);
+        }
       }
-      return fuc;
+      emit("change", props.model);
+      mForm?.$emit("field-change", props.prop, props.model[props.name]);
     };
-    const removeHandler = (index) => {
-      if (props.disabled) return;
-      props.model[modelName.value].splice(index, 1);
-      emit("change", props.model[modelName.value]);
+    const changeHandler = (v, eventData) => {
+      emit("change", props.model, eventData);
     };
-    const selectHandle = (selection2, row) => {
-      if (typeof props.config.selection === "string" && props.config.selection === "single") {
-        tMagicTable.value?.clearSelection();
-        tMagicTable.value?.toggleRowSelection(row, true);
-      }
-      emit("select", selection2, row);
-      if (typeof props.config.onSelect === "function") {
-        props.config.onSelect(mForm, { selection: selection2, row, config: props.config });
+    const onAddDiffCount = (tabIndex) => {
+      if (!diffCount.value[tabIndex]) {
+        diffCount.value[tabIndex] = 1;
+      } else {
+        diffCount.value[tabIndex] += 1;
       }
+      emit("addDiffCount");
     };
-    const toggleRowSelection = (row, selected) => {
-      tMagicTable.value?.toggleRowSelection.call(tMagicTable.value, row, selected);
-    };
-    const makeConfig = (config, row) => {
-      const newConfig = cloneDeep(config);
-      if (typeof config.itemsFunction === "function") {
-        newConfig.items = config.itemsFunction(row);
-      }
-      delete newConfig.display;
-      return newConfig;
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(unref(tabsComponent)?.component || "el-tabs"), mergeProps(
+        {
+          modelValue: activeTabName.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => activeTabName.value = $event)
+        },
+        unref(tabsComponent)?.props({
+          type: __props.config.tabType,
+          editable: __props.config.editable || false,
+          tabPosition: __props.config.tabPosition || "top"
+        }) || {},
+        {
+          class: `tmagic-design-tabs ${__props.config.dynamic ? "magic-form-dynamic-tab" : "magic-form-tab"}`,
+          onTabClick: tabClickHandler,
+          onTabAdd,
+          onTabRemove
+        }
+      ), {
+        default: withCtx(() => [
+          (openBlock(true), createElementBlock(
+            Fragment,
+            null,
+            renderList(tabs.value, (tab, tabIndex) => {
+              return openBlock(), createBlock(
+                resolveDynamicComponent(unref(tabPaneComponent)?.component || "el-tab-pane"),
+                mergeProps(
+                  {
+                    key: tab[unref(mForm)?.keyProp || "__key"] ?? tabIndex
+                  },
+                  { ref_for: true },
+                  unref(tabPaneComponent)?.props({ name: filter(tab.status) || tabIndex.toString(), lazy: tab.lazy || false }) || {}
+                ),
+                {
+                  label: withCtx(() => [
+                    createElementVNode("span", null, [
+                      createTextVNode(
+                        toDisplayString(filter(tab.title)),
+                        1
+                        /* TEXT */
+                      ),
+                      createVNode(unref(TMagicBadge), {
+                        hidden: !diffCount.value[tabIndex],
+                        value: diffCount.value[tabIndex],
+                        class: "diff-count-badge"
+                      }, null, 8, ["hidden", "value"])
+                    ])
+                  ]),
+                  default: withCtx(() => [
+                    (openBlock(true), createElementBlock(
+                      Fragment,
+                      null,
+                      renderList(tabItems(tab), (item) => {
+                        return openBlock(), createBlock(_sfc_main$A, {
+                          key: item[unref(mForm)?.keyProp || "__key"],
+                          config: item,
+                          disabled: __props.disabled,
+                          model: __props.config.dynamic ? (__props.name ? __props.model[__props.name] : __props.model)[tabIndex] : tab.name ? (__props.name ? __props.model[__props.name] : __props.model)[tab.name] : __props.name ? __props.model[__props.name] : __props.model,
+                          "last-values": unref(isEmpty)(__props.lastValues) ? {} : __props.config.dynamic ? (__props.name ? __props.lastValues[__props.name] : __props.lastValues)[tabIndex] : tab.name ? (__props.name ? __props.lastValues[__props.name] : __props.lastValues)[tab.name] : __props.name ? __props.lastValues[__props.name] : __props.lastValues,
+                          "is-compare": __props.isCompare,
+                          prop: __props.config.dynamic ? `${__props.prop}${__props.prop ? "." : ""}${String(tabIndex)}` : __props.prop,
+                          size: __props.size,
+                          "label-width": tab.labelWidth || __props.labelWidth,
+                          "expand-more": __props.expandMore,
+                          onChange: changeHandler,
+                          onAddDiffCount: ($event) => onAddDiffCount(tabIndex)
+                        }, null, 8, ["config", "disabled", "model", "last-values", "is-compare", "prop", "size", "label-width", "expand-more", "onAddDiffCount"]);
+                      }),
+                      128
+                      /* KEYED_FRAGMENT */
+                    ))
+                  ]),
+                  _: 2
+                  /* DYNAMIC */
+                },
+                1040
+                /* FULL_PROPS, DYNAMIC_SLOTS */
+              );
+            }),
+            128
+            /* KEYED_FRAGMENT */
+          ))
+        ]),
+        _: 1
+        /* STABLE */
+      }, 16, ["modelValue", "class"]);
     };
-    const upHandler = (index) => {
-      if (timer) {
-        clearTimeout(timer);
+  }
+});
+
+let $MAGIC_FORM = {};
+const setConfig = (option) => {
+  $MAGIC_FORM = option;
+};
+const getConfig = (key) => $MAGIC_FORM[key];
+
+const useAddField = (prop) => {
+  if (!prop) return;
+  const mForm = inject("mForm");
+  const instance = getCurrentInstance();
+  watch(
+    () => instance?.proxy,
+    (vm) => {
+      if (vm) {
+        mForm?.setField(prop, vm);
+      } else {
+        mForm?.deleteField(prop);
       }
-      timer = setTimeout(() => {
-        swapArray(index, index - 1);
-        timer = void 0;
-      }, 300);
-    };
-    const topHandler = (index) => {
-      if (timer) {
-        clearTimeout(timer);
+    },
+    {
+      immediate: true
+    }
+  );
+};
+
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MFormCascader"
+  },
+  __name: "Cascader",
+  props: {
+    config: {},
+    model: {},
+    initValues: {},
+    values: {},
+    name: {},
+    prop: {},
+    disabled: { type: Boolean },
+    size: {},
+    lastValues: {}
+  },
+  emits: ["change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const mForm = inject("mForm");
+    useAddField(props.prop);
+    const requestFunc = getConfig("request");
+    const tMagicCascader = ref();
+    const options = ref([]);
+    const remoteData = ref(null);
+    const checkStrictly = computed(() => filterFunction(mForm, props.config.checkStrictly, props));
+    const valueSeparator = computed(() => filterFunction(mForm, props.config.valueSeparator, props));
+    const value = computed(() => {
+      if (typeof props.model[props.name] === "string" && valueSeparator.value) {
+        return props.model[props.name].split(valueSeparator.value);
       }
-      const moveNum = index;
-      for (let i = 0; i < moveNum; i++) {
-        swapArray(index, index - 1);
-        index -= 1;
+      return props.model[props.name];
+    });
+    const updateModelValueHandler = (value2) => {
+      let result = value2;
+      if (valueSeparator.value) {
+        result = value2.join(valueSeparator.value);
       }
-    };
-    const downHandler = (index) => {
-      if (timer) {
-        clearTimeout(timer);
+      if (typeof result === "undefined") {
+        if (Array.isArray(props.model[props.name])) {
+          emit("change", []);
+        } else if (typeof props.model[props.name] === "string") {
+          emit("change", "");
+        } else if (typeof props.model[props.name] === "object") {
+          emit("change", null);
+        }
       }
-      timer = setTimeout(() => {
-        swapArray(index, index + 1);
-        timer = void 0;
-      }, 300);
+      emit("change", result);
     };
-    const bottomHandler = (index) => {
-      if (timer) {
-        clearTimeout(timer);
-      }
-      const moveNum = props.model[modelName.value].length - 1 - index;
-      for (let i = 0; i < moveNum; i++) {
-        swapArray(index, index + 1);
-        index += 1;
+    const setRemoteOptions = async function() {
+      const { config } = props;
+      const { option } = config;
+      if (!option) return;
+      let { body } = option;
+      const postOptions = {
+        url: option.url,
+        cache: option.cache,
+        timeout: option.timeout,
+        data: {}
+      };
+      if (body && mForm) {
+        if (typeof body === "function" && props.model && mForm) {
+          body = body(mForm, {
+            model: props.model,
+            formValue: mForm.values,
+            formValues: mForm.values,
+            config: props.config
+          });
+        }
+        postOptions.data = body;
       }
-    };
-    const showDelete = (index) => {
-      const deleteFunc = props.config.delete;
-      if (deleteFunc && typeof deleteFunc === "function") {
-        return deleteFunc(props.model[modelName.value], index, mForm?.values);
-      }
-      return true;
-    };
-    const copyable = (index) => {
-      const copyableFunc = props.config.copyable;
-      if (copyableFunc && typeof copyableFunc === "function") {
-        return copyableFunc(mForm, {
-          values: mForm?.initValues || {},
-          model: props.model,
-          parent: mForm?.parentValues || {},
-          formValue: mForm?.values || props.model,
-          prop: props.prop,
-          config: props.config,
-          index
-        });
-      }
-      return true;
-    };
-    const clearHandler = () => {
-      const len = props.model[modelName.value].length;
-      props.model[modelName.value].splice(0, len);
-      mForm?.$emit("field-change", props.prop, props.model[modelName.value]);
-    };
-    const excelHandler = async (file) => {
-      if (!file?.raw) {
-        return false;
-      }
-      if (!globalThis.XLSX) {
-        await asyncLoadJs("https://cdn.bootcdn.net/ajax/libs/xlsx/0.17.0/xlsx.full.min.js");
-      }
-      const reader = new FileReader();
-      reader.onload = () => {
-        const data2 = reader.result;
-        const pdata = globalThis.XLSX.read(data2, { type: "array" });
-        pdata.SheetNames.forEach((sheetName) => {
-          const arr = globalThis.XLSX.utils.sheet_to_json(pdata.Sheets[sheetName], { header: 1 });
-          if (arr?.[0]) {
-            arr.forEach((row) => {
-              newHandler(row);
-            });
-          }
-          setTimeout(() => {
-            excelBtn.value?.clearFiles();
-          }, 300);
-        });
-      };
-      reader.readAsArrayBuffer(file.raw);
-      return false;
-    };
-    const handleSizeChange = (val) => {
-      pagesize.value = val;
-    };
-    const handleCurrentChange = (val) => {
-      pagecontext.value = val - 1;
-    };
-    const copyHandler = (index) => {
-      props.model[modelName.value].push(cloneDeep(props.model[modelName.value][index]));
-    };
-    const toggleMode = () => {
-      const calcLabelWidth = (label) => {
-        if (!label) return "0px";
-        const zhLength = label.match(/[^\x00-\xff]/g)?.length || 0;
-        const chLength = label.length - zhLength;
-        return `${Math.max(chLength * 8 + zhLength * 20, 80)}px`;
-      };
-      props.config.type = "groupList";
-      props.config.enableToggleMode = true;
-      props.config.tableItems = props.config.items;
-      props.config.items = props.config.groupItems || props.config.items.map((item) => {
-        const text = item.text || item.label;
-        const labelWidth = calcLabelWidth(text);
-        return {
-          ...item,
-          text,
-          labelWidth,
-          span: item.span || 12
-        };
-      });
-    };
-    const toggleFullscreen = () => {
-      if (!mTable.value) return;
-      if (isFullscreen.value) {
-        mTable.value.classList.remove("fixed");
-        isFullscreen.value = false;
-      } else {
-        mTable.value.classList.add("fixed");
-        mTable.value.style.zIndex = `${nextZIndex()}`;
-        isFullscreen.value = true;
-      }
-    };
-    const getProp = (index) => {
-      const { prop } = toRefs(props);
-      return `${prop.value}${prop.value ? "." : ""}${index + 1 + pagecontext.value * pagesize.value - 1}`;
-    };
-    const onAddDiffCount = () => emit("addDiffCount");
-    const changeHandler = (v, eventData) => {
-      emit("change", props.model, eventData);
-    };
-    __expose({
-      toggleRowSelection
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$9, [
-        (openBlock(), createBlock(Teleport, {
-          to: "body",
-          disabled: !isFullscreen.value
-        }, [
-          createElementVNode(
-            "div",
-            {
-              ref_key: "mTable",
-              ref: mTable,
-              class: normalizeClass(["m-fields-table", { "m-fields-table-item-extra": __props.config.itemExtra }])
-            },
-            [
-              __props.config.extra ? (openBlock(), createElementBlock("span", {
-                key: 0,
-                style: { "color": "rgba(0, 0, 0, 0.45)" },
-                innerHTML: __props.config.extra
-              }, null, 8, _hoisted_2$2)) : createCommentVNode("v-if", true),
-              createVNode(unref(TMagicTooltip), {
-                content: "拖拽可排序",
-                placement: "left-start",
-                disabled: __props.config.dropSort !== true
-              }, {
-                default: withCtx(() => [
-                  __props.model[modelName.value] ? (openBlock(), createBlock(unref(TMagicTable), {
-                    ref_key: "tMagicTable",
-                    ref: tMagicTable,
-                    style: { "width": "100%" },
-                    "row-key": __props.config.rowKey || "id",
-                    data: data.value,
-                    lastData: lastData.value,
-                    border: __props.config.border,
-                    "max-height": __props.config.maxHeight,
-                    "default-expand-all": true,
-                    key: updateKey.value,
-                    onSelect: selectHandle,
-                    onSortChange: sortChange
-                  }, {
-                    default: withCtx(() => [
-                      __props.config.itemExtra && !__props.config.dropSort ? (openBlock(), createBlock(unref(TMagicTableColumn), {
-                        key: 0,
-                        fixed: "left",
-                        width: "30",
-                        type: "expand"
-                      }, {
-                        default: withCtx((scope) => [
-                          createElementVNode("span", {
-                            innerHTML: itemExtra(__props.config.itemExtra, scope.$index),
-                            class: "m-form-tip"
-                          }, null, 8, _hoisted_3)
-                        ]),
-                        _: 1
-                        /* STABLE */
-                      })) : createCommentVNode("v-if", true),
-                      createVNode(unref(TMagicTableColumn), {
-                        label: "操作",
-                        width: __props.config.operateColWidth || 100,
-                        align: "center",
-                        fixed: __props.config.fixed === false ? void 0 : "left"
-                      }, {
-                        default: withCtx((scope) => [
-                          renderSlot(_ctx.$slots, "operateCol", { scope }),
-                          withDirectives(createVNode(unref(TMagicButton), {
-                            size: "small",
-                            type: "danger",
-                            link: "",
-                            title: "删除",
-                            icon: unref(Delete),
-                            onClick: ($event) => removeHandler(scope.$index + 1 + pagecontext.value * pagesize.value - 1)
-                          }, null, 8, ["icon", "onClick"]), [
-                            [vShow, showDelete(scope.$index + 1 + pagecontext.value * pagesize.value - 1)]
-                          ]),
-                          copyable(scope.$index + 1 + pagecontext.value * pagesize.value - 1) ? (openBlock(), createBlock(unref(TMagicButton), {
-                            key: 0,
-                            link: "",
-                            size: "small",
-                            type: "primary",
-                            title: "复制",
-                            icon: unref(DocumentCopy),
-                            disabled: __props.disabled,
-                            onClick: ($event) => copyHandler(scope.$index + 1 + pagecontext.value * pagesize.value - 1)
-                          }, null, 8, ["icon", "disabled", "onClick"])) : createCommentVNode("v-if", true)
-                        ]),
-                        _: 3
-                        /* FORWARDED */
-                      }, 8, ["width", "fixed"]),
-                      __props.sort && __props.model[modelName.value] && __props.model[modelName.value].length > 1 ? (openBlock(), createBlock(unref(TMagicTableColumn), {
-                        key: 1,
-                        label: "排序",
-                        width: "60"
-                      }, {
-                        default: withCtx((scope) => [
-                          scope.$index + 1 + pagecontext.value * pagesize.value - 1 !== 0 ? (openBlock(), createBlock(
-                            unref(TMagicTooltip),
-                            {
-                              key: 0,
-                              content: "点击上移，双击置顶",
-                              placement: "top"
-                            },
-                            {
-                              default: withCtx(() => [
-                                createVNode(unref(TMagicButton), {
-                                  plain: "",
-                                  size: "small",
-                                  type: "primary",
-                                  icon: unref(ArrowUp),
-                                  disabled: __props.disabled,
-                                  link: "",
-                                  onClick: ($event) => upHandler(scope.$index + 1 + pagecontext.value * pagesize.value - 1),
-                                  onDblclick: ($event) => topHandler(scope.$index + 1 + pagecontext.value * pagesize.value - 1)
-                                }, null, 8, ["icon", "disabled", "onClick", "onDblclick"])
-                              ]),
-                              _: 2
-                              /* DYNAMIC */
-                            },
-                            1024
-                            /* DYNAMIC_SLOTS */
-                          )) : createCommentVNode("v-if", true),
-                          scope.$index + 1 + pagecontext.value * pagesize.value - 1 !== __props.model[modelName.value].length - 1 ? (openBlock(), createBlock(
-                            unref(TMagicTooltip),
-                            {
-                              key: 1,
-                              content: "点击下移，双击置底",
-                              placement: "top"
-                            },
-                            {
-                              default: withCtx(() => [
-                                createVNode(unref(TMagicButton), {
-                                  plain: "",
-                                  size: "small",
-                                  type: "primary",
-                                  icon: unref(ArrowDown),
-                                  disabled: __props.disabled,
-                                  link: "",
-                                  onClick: ($event) => downHandler(scope.$index + 1 + pagecontext.value * pagesize.value - 1),
-                                  onDblclick: ($event) => bottomHandler(scope.$index + 1 + pagecontext.value * pagesize.value - 1)
-                                }, null, 8, ["icon", "disabled", "onClick", "onDblclick"])
-                              ]),
-                              _: 2
-                              /* DYNAMIC */
-                            },
-                            1024
-                            /* DYNAMIC_SLOTS */
-                          )) : createCommentVNode("v-if", true)
-                        ]),
-                        _: 1
-                        /* STABLE */
-                      })) : createCommentVNode("v-if", true),
-                      selection.value ? (openBlock(), createBlock(unref(TMagicTableColumn), {
-                        key: 2,
-                        align: "center",
-                        "header-align": "center",
-                        type: "selection",
-                        width: "45"
-                      })) : createCommentVNode("v-if", true),
-                      __props.showIndex && __props.config.showIndex ? (openBlock(), createBlock(unref(TMagicTableColumn), {
-                        key: 3,
-                        width: "60",
-                        label: "序号"
-                      }, {
-                        default: withCtx((scope) => [
-                          createTextVNode(
-                            toDisplayString(scope.$index + 1 + pagecontext.value * pagesize.value),
-                            1
-                            /* TEXT */
-                          )
-                        ]),
-                        _: 1
-                        /* STABLE */
-                      })) : createCommentVNode("v-if", true),
-                      (openBlock(true), createElementBlock(
-                        Fragment,
-                        null,
-                        renderList(__props.config.items, (column, index) => {
-                          return openBlock(), createElementBlock(
-                            Fragment,
-                            null,
-                            [
-                              column.type !== "hidden" && display$1(column.display) ? (openBlock(), createBlock(unref(TMagicTableColumn), {
-                                prop: column.name,
-                                width: column.width,
-                                label: column.label,
-                                sortable: column.sortable,
-                                "sort-orders": ["ascending", "descending"],
-                                key: column[unref(mForm)?.keyProp || "__key"] ?? index,
-                                "class-name": __props.config.dropSort === true ? "el-table__column--dropable" : ""
-                              }, {
-                                default: withCtx((scope) => [
-                                  scope.$index > -1 ? (openBlock(), createBlock(_sfc_main$x, {
-                                    key: 0,
-                                    labelWidth: "0",
-                                    disabled: __props.disabled,
-                                    prop: getProp(scope.$index),
-                                    rules: column.rules,
-                                    config: makeConfig(column, scope.row),
-                                    model: scope.row,
-                                    lastValues: lastData.value[scope.$index],
-                                    "is-compare": __props.isCompare,
-                                    size: __props.size,
-                                    onChange: changeHandler,
-                                    onAddDiffCount: _cache[0] || (_cache[0] = ($event) => onAddDiffCount())
-                                  }, null, 8, ["disabled", "prop", "rules", "config", "model", "lastValues", "is-compare", "size"])) : createCommentVNode("v-if", true)
-                                ]),
-                                _: 2
-                                /* DYNAMIC */
-                              }, 1032, ["prop", "width", "label", "sortable", "class-name"])) : createCommentVNode("v-if", true)
-                            ],
-                            64
-                            /* STABLE_FRAGMENT */
-                          );
-                        }),
-                        256
-                        /* UNKEYED_FRAGMENT */
-                      ))
-                    ]),
-                    _: 3
-                    /* FORWARDED */
-                  }, 8, ["row-key", "data", "lastData", "border", "max-height"])) : createCommentVNode("v-if", true)
-                ]),
-                _: 3
-                /* FORWARDED */
-              }, 8, ["disabled"]),
-              renderSlot(_ctx.$slots, "default"),
-              createElementVNode("div", _hoisted_4, [
-                addable.value ? (openBlock(), createBlock(unref(TMagicButton), {
-                  key: 0,
-                  size: "small",
-                  type: "primary",
-                  disabled: __props.disabled,
-                  plain: "",
-                  onClick: _cache[1] || (_cache[1] = ($event) => newHandler())
-                }, {
-                  default: withCtx(() => [..._cache[3] || (_cache[3] = [
-                    createTextVNode(
-                      "新增一行",
-                      -1
-                      /* CACHED */
-                    )
-                  ])]),
-                  _: 1
-                  /* STABLE */
-                }, 8, ["disabled"])) : createCommentVNode("v-if", true),
-                createElementVNode("div", _hoisted_5, [
-                  __props.enableToggleMode && __props.config.enableToggleMode !== false && !isFullscreen.value ? (openBlock(), createBlock(unref(TMagicButton), {
-                    key: 0,
-                    icon: unref(Grid),
-                    size: "small",
-                    type: "primary",
-                    onClick: toggleMode
-                  }, {
-                    default: withCtx(() => [..._cache[4] || (_cache[4] = [
-                      createTextVNode(
-                        "展开配置",
-                        -1
-                        /* CACHED */
-                      )
-                    ])]),
-                    _: 1
-                    /* STABLE */
-                  }, 8, ["icon"])) : createCommentVNode("v-if", true),
-                  __props.config.enableFullscreen !== false ? (openBlock(), createBlock(unref(TMagicButton), {
-                    key: 1,
-                    icon: unref(FullScreen),
-                    size: "small",
-                    type: "primary",
-                    onClick: toggleFullscreen
-                  }, {
-                    default: withCtx(() => [
-                      createTextVNode(
-                        toDisplayString(isFullscreen.value ? "退出全屏" : "全屏编辑"),
-                        1
-                        /* TEXT */
-                      )
-                    ]),
-                    _: 1
-                    /* STABLE */
-                  }, 8, ["icon"])) : createCommentVNode("v-if", true),
-                  importable.value ? (openBlock(), createBlock(unref(TMagicUpload), {
-                    key: 2,
-                    style: { "display": "inline-block" },
-                    ref_key: "excelBtn",
-                    ref: excelBtn,
-                    action: "/noop",
-                    disabled: __props.disabled,
-                    "on-change": excelHandler,
-                    "auto-upload": false
-                  }, {
-                    default: withCtx(() => [
-                      createVNode(unref(TMagicButton), {
-                        size: "small",
-                        type: "success",
-                        disabled: __props.disabled,
-                        plain: ""
-                      }, {
-                        default: withCtx(() => [..._cache[5] || (_cache[5] = [
-                          createTextVNode(
-                            "导入EXCEL",
-                            -1
-                            /* CACHED */
-                          )
-                        ])]),
-                        _: 1
-                        /* STABLE */
-                      }, 8, ["disabled"])
-                    ]),
-                    _: 1
-                    /* STABLE */
-                  }, 8, ["disabled"])) : createCommentVNode("v-if", true),
-                  importable.value ? (openBlock(), createBlock(unref(TMagicButton), {
-                    key: 3,
-                    size: "small",
-                    type: "warning",
-                    disabled: __props.disabled,
-                    plain: "",
-                    onClick: _cache[2] || (_cache[2] = ($event) => clearHandler())
-                  }, {
-                    default: withCtx(() => [..._cache[6] || (_cache[6] = [
-                      createTextVNode(
-                        "清空",
-                        -1
-                        /* CACHED */
-                      )
-                    ])]),
-                    _: 1
-                    /* STABLE */
-                  }, 8, ["disabled"])) : createCommentVNode("v-if", true)
-                ])
-              ]),
-              __props.config.pagination ? (openBlock(), createElementBlock("div", _hoisted_6, [
-                createVNode(unref(TMagicPagination), {
-                  layout: "total, sizes, prev, pager, next, jumper",
-                  "hide-on-single-page": __props.model[modelName.value].length < pagesize.value,
-                  "current-page": pagecontext.value + 1,
-                  "page-sizes": [pagesize.value, 60, 120, 300],
-                  "page-size": pagesize.value,
-                  total: __props.model[modelName.value].length,
-                  onSizeChange: handleSizeChange,
-                  onCurrentChange: handleCurrentChange
-                }, null, 8, ["hide-on-single-page", "current-page", "page-sizes", "page-size", "total"])
-              ])) : createCommentVNode("v-if", true)
-            ],
-            2
-            /* CLASS */
-          )
-        ], 8, ["disabled"]))
-      ]);
-    };
-  }
-});
-
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "MFormTabs"
-  },
-  __name: "Tabs",
-  props: {
-    model: {},
-    lastValues: { default: () => ({}) },
-    isCompare: { type: Boolean, default: false },
-    config: {},
-    name: {},
-    size: {},
-    labelWidth: {},
-    prop: {},
-    expandMore: { type: Boolean },
-    disabled: { type: Boolean }
-  },
-  emits: ["change", "addDiffCount"],
-  setup(__props, { emit: __emit }) {
-    const tabPaneComponent = getDesignConfig("components")?.tabPane;
-    const tabsComponent = getDesignConfig("components")?.tabs;
-    const getActive = (mForm2, props2, activeTabName2) => {
-      const { config, model, prop } = props2;
-      const { active } = config;
-      if (typeof active === "function") return active(mForm2, { model, formValue: mForm2?.values, prop });
-      if (0 >= props2.config.items.length) return "0";
-      if (typeof active !== "undefined") return active;
-      return "0";
-    };
-    const tabClick = (mForm2, tab, props2) => {
-      const { config, model, prop } = props2;
-      tab.name = tab.paneName;
-      if (typeof config.onTabClick === "function") {
-        config.onTabClick(mForm2, tab, { model, formValue: mForm2?.values, prop, config });
-      }
-      const tabConfig = config.items.find((item) => tab.name === item.status);
-      if (tabConfig && typeof tabConfig.onTabClick === "function") {
-        tabConfig.onTabClick(mForm2, tab, { model, formValue: mForm2?.values, prop, config });
-      }
-    };
-    const props = __props;
-    const emit = __emit;
-    const mForm = inject("mForm");
-    const activeTabName = ref(getActive(mForm, props));
-    const diffCount = ref({});
-    const tabs = computed(() => {
-      if (props.config.dynamic) {
-        if (!props.config.name) throw new Error("dynamic tab 必须配置name");
-        return props.model[props.config.name] || [];
-      }
-      return props.config.items.filter((item) => display(mForm, item.display, props));
-    });
-    const filter = (config) => filterFunction(mForm, config, props);
-    watchEffect(() => {
-      if (typeof props.config.activeChange === "function") {
-        props.config.activeChange(mForm, activeTabName.value, {
-          model: props.model,
-          prop: props.prop
-        });
-      }
-    });
-    const tabItems = (tab) => props.config.dynamic ? props.config.items : tab.items;
-    const tabClickHandler = (tab) => tabClick(mForm, tab, props);
-    const onTabAdd = async () => {
-      if (!props.name) throw new Error("dynamic tab 必须配置name");
-      if (typeof props.config.onTabAdd === "function") {
-        props.config.onTabAdd(mForm, {
-          model: props.model,
-          prop: props.prop,
-          config: props.config
-        });
-        emit("change", props.model);
-      } else {
-        const newObj = await initValue(mForm, {
-          config: props.config.items,
-          initValues: {}
-        });
-        newObj.title = `标签${tabs.value.length + 1}`;
-        props.model[props.name].push(newObj);
-        emit("change", props.model[props.name], {
-          changeRecords: [
-            {
-              propPath: `${props.prop}.${props.model[props.name].length - 1}`,
-              value: newObj
-            }
-          ]
-        });
-      }
-      mForm?.$emit("field-change", props.prop, props.model[props.name]);
-    };
-    const onTabRemove = (tabName) => {
-      if (!props.name) throw new Error("dynamic tab 必须配置name");
-      if (typeof props.config.onTabRemove === "function") {
-        props.config.onTabRemove(mForm, tabName, {
-          model: props.model,
-          prop: props.prop,
-          config: props.config
-        });
-      } else {
-        props.model[props.name].splice(+tabName, 1);
-        if (tabName < activeTabName.value || activeTabName.value >= props.model[props.name].length) {
-          activeTabName.value = (+activeTabName.value - 1).toString();
-          tabClick(mForm, { name: activeTabName.value }, props);
-        }
-      }
-      emit("change", props.model);
-      mForm?.$emit("field-change", props.prop, props.model[props.name]);
-    };
-    const changeHandler = (v, eventData) => {
-      emit("change", props.model, eventData);
-    };
-    const onAddDiffCount = (tabIndex) => {
-      if (!diffCount.value[tabIndex]) {
-        diffCount.value[tabIndex] = 1;
-      } else {
-        diffCount.value[tabIndex] += 1;
-      }
-      emit("addDiffCount");
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(resolveDynamicComponent(unref(tabsComponent)?.component || "el-tabs"), mergeProps(
-        {
-          modelValue: activeTabName.value,
-          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => activeTabName.value = $event)
-        },
-        unref(tabsComponent)?.props({
-          type: __props.config.tabType,
-          editable: __props.config.editable || false,
-          tabPosition: __props.config.tabPosition || "top"
-        }) || {},
-        {
-          class: `tmagic-design-tabs ${__props.config.dynamic ? "magic-form-dynamic-tab" : "magic-form-tab"}`,
-          onTabClick: tabClickHandler,
-          onTabAdd,
-          onTabRemove
-        }
-      ), {
-        default: withCtx(() => [
-          (openBlock(true), createElementBlock(
-            Fragment,
-            null,
-            renderList(tabs.value, (tab, tabIndex) => {
-              return openBlock(), createBlock(
-                resolveDynamicComponent(unref(tabPaneComponent)?.component || "el-tab-pane"),
-                mergeProps(
-                  {
-                    key: tab[unref(mForm)?.keyProp || "__key"] ?? tabIndex
-                  },
-                  { ref_for: true },
-                  unref(tabPaneComponent)?.props({ name: filter(tab.status) || tabIndex.toString(), lazy: tab.lazy || false }) || {}
-                ),
-                {
-                  label: withCtx(() => [
-                    createElementVNode("span", null, [
-                      createTextVNode(
-                        toDisplayString(filter(tab.title)),
-                        1
-                        /* TEXT */
-                      ),
-                      createVNode(unref(TMagicBadge), {
-                        hidden: !diffCount.value[tabIndex],
-                        value: diffCount.value[tabIndex],
-                        class: "diff-count-badge"
-                      }, null, 8, ["hidden", "value"])
-                    ])
-                  ]),
-                  default: withCtx(() => [
-                    (openBlock(true), createElementBlock(
-                      Fragment,
-                      null,
-                      renderList(tabItems(tab), (item) => {
-                        return openBlock(), createBlock(_sfc_main$x, {
-                          key: item[unref(mForm)?.keyProp || "__key"],
-                          config: item,
-                          disabled: __props.disabled,
-                          model: __props.config.dynamic ? (__props.name ? __props.model[__props.name] : __props.model)[tabIndex] : tab.name ? (__props.name ? __props.model[__props.name] : __props.model)[tab.name] : __props.name ? __props.model[__props.name] : __props.model,
-                          "last-values": unref(isEmpty)(__props.lastValues) ? {} : __props.config.dynamic ? (__props.name ? __props.lastValues[__props.name] : __props.lastValues)[tabIndex] : tab.name ? (__props.name ? __props.lastValues[__props.name] : __props.lastValues)[tab.name] : __props.name ? __props.lastValues[__props.name] : __props.lastValues,
-                          "is-compare": __props.isCompare,
-                          prop: __props.config.dynamic ? `${__props.prop}${__props.prop ? "." : ""}${String(tabIndex)}` : __props.prop,
-                          size: __props.size,
-                          "label-width": tab.labelWidth || __props.labelWidth,
-                          "expand-more": __props.expandMore,
-                          onChange: changeHandler,
-                          onAddDiffCount: ($event) => onAddDiffCount(tabIndex)
-                        }, null, 8, ["config", "disabled", "model", "last-values", "is-compare", "prop", "size", "label-width", "expand-more", "onAddDiffCount"]);
-                      }),
-                      128
-                      /* KEYED_FRAGMENT */
-                    ))
-                  ]),
-                  _: 2
-                  /* DYNAMIC */
-                },
-                1040
-                /* FULL_PROPS, DYNAMIC_SLOTS */
-              );
-            }),
-            128
-            /* KEYED_FRAGMENT */
-          ))
-        ]),
-        _: 1
-        /* STABLE */
-      }, 16, ["modelValue", "class"]);
-    };
-  }
-});
-
-let $MAGIC_FORM = {};
-const setConfig = (option) => {
-  $MAGIC_FORM = option;
-};
-const getConfig = (key) => $MAGIC_FORM[key];
-
-const useAddField = (prop) => {
-  if (!prop) return;
-  const mForm = inject("mForm");
-  const instance = getCurrentInstance();
-  watch(
-    () => instance?.proxy,
-    (vm) => {
-      if (vm) {
-        mForm?.setField(prop, vm);
-      } else {
-        mForm?.deleteField(prop);
-      }
-    },
-    {
-      immediate: true
-    }
-  );
-};
-
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "MFormCascader"
-  },
-  __name: "Cascader",
-  props: {
-    config: {},
-    model: {},
-    initValues: {},
-    values: {},
-    name: {},
-    prop: {},
-    disabled: { type: Boolean },
-    size: {},
-    lastValues: {}
-  },
-  emits: ["change"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const mForm = inject("mForm");
-    useAddField(props.prop);
-    const requestFunc = getConfig("request");
-    const tMagicCascader = ref();
-    const options = ref([]);
-    const remoteData = ref(null);
-    const checkStrictly = computed(() => filterFunction(mForm, props.config.checkStrictly, props));
-    const valueSeparator = computed(() => filterFunction(mForm, props.config.valueSeparator, props));
-    const value = computed({
-      get() {
-        if (typeof props.model[props.name] === "string" && valueSeparator.value) {
-          return props.model[props.name].split(valueSeparator.value);
-        }
-        return props.model[props.name];
-      },
-      set(value2) {
-        let result = value2;
-        if (valueSeparator.value) {
-          result = value2.join(valueSeparator.value);
-        }
-        props.model[props.name] = result;
-      }
-    });
-    const setRemoteOptions = async function() {
-      const { config } = props;
-      const { option } = config;
-      if (!option) return;
-      let { body } = option;
-      const postOptions = {
-        url: option.url,
-        cache: option.cache,
-        timeout: option.timeout,
-        data: {}
-      };
-      if (body && mForm) {
-        if (typeof body === "function" && props.model && mForm) {
-          body = body(mForm, {
-            model: props.model,
-            formValue: mForm.values,
-            formValues: mForm.values,
-            config: props.config
-          });
-        }
-        postOptions.data = body;
-      }
-      const res = await requestFunc(postOptions);
-      remoteData.value = res[option.root];
-      if (remoteData.value && typeof option?.item === "function") {
-        options.value = option.item(res[option.root]);
+      const res = await requestFunc(postOptions);
+      remoteData.value = res[option.root];
+      if (remoteData.value && typeof option?.item === "function") {
+        options.value = option.item(res[option.root]);
       }
     };
     if (typeof props.config.options === "function" && props.model && mForm) {
@@ -2737,12 +2112,10 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
       if (!tMagicCascader.value) return;
       tMagicCascader.value.setQuery("");
       tMagicCascader.value.setPreviousQuery(null);
-      emit("change", props.model[props.name]);
     };
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(TMagicCascader), {
-        modelValue: value.value,
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => value.value = $event),
+        "model-value": value.value,
         ref_key: "tMagicCascader",
         ref: tMagicCascader,
         style: { "width": "100%" },
@@ -2758,13 +2131,14 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
           emitPath: __props.config.emitPath ?? true,
           checkStrictly: checkStrictly.value ?? false
         },
+        "onUpdate:modelValue": updateModelValueHandler,
         onChange: changeHandler
-      }, null, 8, ["modelValue", "size", "placeholder", "disabled", "options", "popper-class", "props"]);
+      }, null, 8, ["model-value", "size", "placeholder", "disabled", "options", "popper-class", "props"]);
     };
   }
 });
 
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormCheckbox"
   },
@@ -2810,29 +2184,33 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(TMagicCheckbox), {
-        modelValue: __props.model[__props.name],
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => __props.model[__props.name] = $event),
+        "model-value": __props.model[__props.name],
         size: __props.size,
         trueValue: activeValue.value,
         falseValue: inactiveValue.value,
         disabled: __props.disabled,
-        onChange: changeHandler
-      }, {
-        default: withCtx(() => [
-          createTextVNode(
-            toDisplayString(__props.config.text),
-            1
-            /* TEXT */
-          )
-        ]),
-        _: 1
-        /* STABLE */
-      }, 8, ["modelValue", "size", "trueValue", "falseValue", "disabled"]);
+        "onUpdate:modelValue": changeHandler
+      }, createSlots({
+        _: 2
+        /* DYNAMIC */
+      }, [
+        !__props.config.useLabel ? {
+          name: "default",
+          fn: withCtx(() => [
+            createTextVNode(
+              toDisplayString(__props.config.text),
+              1
+              /* TEXT */
+            )
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1032, ["model-value", "size", "trueValue", "falseValue", "disabled"]);
     };
   }
 });
 
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormCheckGroup"
   },
@@ -2868,11 +2246,10 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(TMagicCheckboxGroup), {
-        modelValue: __props.model[__props.name],
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => __props.model[__props.name] = $event),
+        "model-value": __props.model[__props.name],
         size: __props.size,
         disabled: __props.disabled,
-        onChange: changeHandler
+        "onUpdate:modelValue": changeHandler
       }, {
         default: withCtx(() => [
           (openBlock(true), createElementBlock(
@@ -2901,12 +2278,12 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
         ]),
         _: 1
         /* STABLE */
-      }, 8, ["modelValue", "size", "disabled"]);
+      }, 8, ["model-value", "size", "disabled"]);
     };
   }
 });
 
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormColorPicker"
   },
@@ -2930,18 +2307,17 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     const changeHandler = (value) => emit("change", value);
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(TMagicColorPicker), {
-        modelValue: __props.model[__props.name],
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => __props.model[__props.name] = $event),
+        "model-value": __props.model[__props.name],
         size: __props.size,
         disabled: __props.disabled,
         showAlpha: true,
-        onChange: changeHandler
-      }, null, 8, ["modelValue", "size", "disabled"]);
+        "onUpdate:modelValue": changeHandler
+      }, null, 8, ["model-value", "size", "disabled"]);
     };
   }
 });
 
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormDate"
   },
@@ -2968,21 +2344,20 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(TMagicDatePicker), {
-        modelValue: __props.model[__props.name],
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => __props.model[__props.name] = $event),
+        "model-value": __props.model[__props.name],
         type: "date",
         size: __props.size,
         placeholder: __props.config.placeholder,
         disabled: __props.disabled,
         format: __props.config.format || "YYYY/MM/DD",
         "value-format": __props.config.valueFormat || "YYYY/MM/DD",
-        onChange: changeHandler
-      }, null, 8, ["modelValue", "size", "placeholder", "disabled", "format", "value-format"]);
+        "onUpdate:modelValue": changeHandler
+      }, null, 8, ["model-value", "size", "placeholder", "disabled", "format", "value-format"]);
     };
   }
 });
 
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormDateRange"
   },
@@ -3063,8 +2438,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(TMagicDatePicker), {
-        modelValue: value.value,
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => value.value = $event),
+        "model-value": value.value,
         type: "datetimerange",
         "range-separator": "-",
         "start-placeholder": "开始日期",
@@ -3076,13 +2450,13 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
         "value-format": __props.config.valueFormat || "YYYY/MM/DD HH:mm:ss",
         "date-format": __props.config.dateFormat || "YYYY/MM/DD",
         "time-format": __props.config.timeFormat || "HH:mm:ss",
-        onChange: changeHandler
-      }, null, 8, ["modelValue", "size", "disabled", "default-time", "value-format", "date-format", "time-format"]);
+        "onUpdate:modelValue": changeHandler
+      }, null, 8, ["model-value", "size", "disabled", "default-time", "value-format", "date-format", "time-format"]);
     };
   }
 });
 
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormDateTime"
   },
@@ -3120,8 +2494,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(TMagicDatePicker), {
-        modelValue: __props.model[__props.name],
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => __props.model[__props.name] = $event),
+        "model-value": __props.model[__props.name],
         "popper-class": "magic-datetime-picker-popper",
         type: "datetime",
         size: __props.size,
@@ -3130,14 +2503,14 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
         format: __props.config.format || "YYYY/MM/DD HH:mm:ss",
         "value-format": __props.config.valueFormat || "YYYY/MM/DD HH:mm:ss",
         "default-time": __props.config.defaultTime,
-        onChange: changeHandler
-      }, null, 8, ["modelValue", "size", "placeholder", "disabled", "format", "value-format", "default-time"]);
+        "onUpdate:modelValue": changeHandler
+      }, null, 8, ["model-value", "size", "placeholder", "disabled", "format", "value-format", "default-time"]);
     };
   }
 });
 
 const _hoisted_1$8 = { key: 0 };
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormDisplay"
   },
@@ -3172,7 +2545,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$7 = { class: "m-fields-dynamic-field" };
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormDynamicField"
   },
@@ -3273,7 +2646,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormHidden"
   },
@@ -3310,7 +2683,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   ...{
     name: "MForm"
   },
@@ -3337,7 +2710,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    const tMagicForm = ref();
+    const tMagicFormRef = useTemplateRef("tMagicForm");
     const initialized = ref(false);
     const values = ref({});
     const lastValuesProcessed = ref({});
@@ -3414,7 +2787,17 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     );
     const changeHandler = (v, eventData) => {
       if (eventData.changeRecords?.length) {
-        changeRecords.value.push(...eventData.changeRecords);
+        for (const record of eventData.changeRecords) {
+          if (record.propPath) {
+            const index = changeRecords.value.findIndex((item) => item.propPath === record.propPath);
+            if (index > -1) {
+              changeRecords.value[index] = record;
+            } else {
+              changeRecords.value.push(record);
+            }
+            setValueByKeyPath(record.propPath, record.value, values.value);
+          }
+        }
       }
       emit("change", values.value, eventData);
     };
@@ -3431,12 +2814,13 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       changeRecords,
       changeHandler,
       resetForm: () => {
-        tMagicForm.value?.resetFields();
+        tMagicFormRef.value?.resetFields();
         changeRecords.value = [];
       },
       submitForm: async (native) => {
         try {
-          await tMagicForm.value?.validate();
+          await tMagicFormRef.value?.validate();
+          changeRecords.value = [];
           return native ? values.value : cloneDeep(toRaw(values.value));
         } catch (invalidFields) {
           emit("error", invalidFields);
@@ -3455,8 +2839,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(TMagicForm), {
         class: "m-form",
-        ref_key: "tMagicForm",
-        ref: tMagicForm,
+        ref: "tMagicForm",
         model: values.value,
         "label-width": __props.labelWidth,
         style: normalizeStyle(`height: ${__props.height}`),
@@ -3469,7 +2852,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
             Fragment,
             { key: 0 },
             renderList(__props.config, (item, index) => {
-              return openBlock(), createBlock(_sfc_main$x, {
+              return openBlock(), createBlock(_sfc_main$A, {
                 disabled: __props.disabled,
                 key: item[__props.keyProp] ?? index,
                 config: item,
@@ -3494,7 +2877,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$6 = { style: { "min-height": "1px" } };
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormDialog"
   },
@@ -3695,7 +3078,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
               style: normalizeStyle(`max-height: ${bodyHeight.value}; overflow-y: auto; overflow-x: hidden;`)
             },
             [
-              createVNode(_sfc_main$d, {
+              createVNode(_sfc_main$g, {
                 modelValue: stepActive.value,
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => stepActive.value = $event),
                 ref_key: "form",
@@ -3725,11 +3108,11 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$5 = ["href"];
-const _hoisted_2$1 = {
+const _hoisted_2$2 = {
   key: 2,
   class: "m-fields-link"
 };
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormLink"
   },
@@ -3807,7 +3190,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
         toDisplayString(displayText.value),
         5
         /* TEXT, STYLE */
-      )) : (openBlock(), createElementBlock("div", _hoisted_2$1, [
+      )) : (openBlock(), createElementBlock("div", _hoisted_2$2, [
         createVNode(unref(TMagicButton), {
           link: "",
           type: "primary",
@@ -3823,7 +3206,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
           _: 1
           /* STABLE */
         }),
-        createVNode(_sfc_main$c, {
+        createVNode(_sfc_main$f, {
           ref_key: "editor",
           ref: editor,
           title: __props.config.formTitle || "编辑扩展配置",
@@ -3839,7 +3222,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormNumber"
   },
@@ -3871,8 +3254,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return __props.model ? (openBlock(), createBlock(unref(TMagicInputNumber), {
         key: 0,
-        modelValue: __props.model[__props.name],
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => __props.model[__props.name] = $event),
+        "model-value": __props.model[__props.name],
         clearable: "",
         "controls-position": "right",
         size: __props.size,
@@ -3881,15 +3263,15 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         step: __props.config.step,
         placeholder: __props.config.placeholder,
         disabled: __props.disabled,
-        onChange: changeHandler,
+        "onUpdate:modelValue": changeHandler,
         onInput: inputHandler
-      }, null, 8, ["modelValue", "size", "max", "min", "step", "placeholder", "disabled"])) : createCommentVNode("v-if", true);
+      }, null, 8, ["model-value", "size", "max", "min", "step", "placeholder", "disabled"])) : createCommentVNode("v-if", true);
     };
   }
 });
 
 const _hoisted_1$4 = { class: "m-fields-number-range" };
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormNumberRange"
   },
@@ -3922,14 +3304,13 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$4, [
         createVNode(unref(TMagicInput), {
-          modelValue: __props.model[__props.name][0],
-          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => __props.model[__props.name][0] = $event),
-          clearable: "",
+          "model-value": __props.model[__props.name][0],
+          clearable: __props.config.clearable ?? true,
           size: __props.size,
           disabled: __props.disabled,
-          onChange: minChangeHandler
-        }, null, 8, ["modelValue", "size", "disabled"]),
-        _cache[2] || (_cache[2] = createElementVNode(
+          "onUpdate:modelValue": minChangeHandler
+        }, null, 8, ["model-value", "clearable", "size", "disabled"]),
+        _cache[0] || (_cache[0] = createElementVNode(
           "span",
           { class: "split-tag" },
           "-",
@@ -3937,20 +3318,18 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
           /* CACHED */
         )),
         createVNode(unref(TMagicInput), {
-          modelValue: __props.model[__props.name][1],
-          "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => __props.model[__props.name][1] = $event),
-          clearable: "",
+          "model-value": __props.model[__props.name][1],
+          clearable: __props.config.clearable ?? true,
           size: __props.size,
           disabled: __props.disabled,
-          onChange: maxChangeHandler
-        }, null, 8, ["modelValue", "size", "disabled"])
+          "onUpdate:modelValue": maxChangeHandler
+        }, null, 8, ["model-value", "clearable", "size", "disabled"])
       ]);
     };
   }
 });
 
-const _hoisted_1$3 = { key: 1 };
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormRadioGroup"
   },
@@ -3971,12 +3350,8 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     const props = __props;
     const itemComponent = computed(() => props.config.childType === "button" ? TMagicRadioButton : TMagicRadio);
     const emit = __emit;
-    const changeHandler = (value) => {
-      emit("change", value);
-    };
     const clickHandler = (item) => {
-      props.model[props.name] = props.model[props.name] === item ? "" : item;
-      changeHandler(props.model[props.name]);
+      emit("change", props.model[props.name] === item ? "" : item);
     };
     useAddField(props.prop);
     const iconSize = computed(() => {
@@ -3991,8 +3366,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return __props.model ? (openBlock(), createBlock(unref(TMagicRadioGroup), {
         key: 0,
-        modelValue: __props.model[__props.name],
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => __props.model[__props.name] = $event),
+        "model-value": __props.model[__props.name],
         size: __props.size,
         disabled: __props.disabled
       }, {
@@ -4004,11 +3378,11 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
               return openBlock(), createBlock(resolveDynamicComponent(itemComponent.value), {
                 value: option.value,
                 key: `${option.value}`,
-                onClick: withModifiers(($event) => clickHandler(option.value), ["prevent"])
+                onClick: ($event) => clickHandler(option.value)
               }, {
                 default: withCtx(() => [
-                  option.tooltip ? (openBlock(), createBlock(unref(TMagicTooltip), {
-                    key: 0,
+                  createVNode(unref(TMagicTooltip), {
+                    disabled: !Boolean(option.tooltip),
                     placement: "top-start",
                     content: option.tooltip
                   }, {
@@ -4035,25 +3409,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
                     ]),
                     _: 2
                     /* DYNAMIC */
-                  }, 1032, ["content"])) : (openBlock(), createElementBlock("div", _hoisted_1$3, [
-                    option.icon ? (openBlock(), createBlock(unref(TMagicIcon), {
-                      key: 0,
-                      size: iconSize.value
-                    }, {
-                      default: withCtx(() => [
-                        (openBlock(), createBlock(resolveDynamicComponent(option.icon)))
-                      ]),
-                      _: 2
-                      /* DYNAMIC */
-                    }, 1032, ["size"])) : createCommentVNode("v-if", true),
-                    createElementVNode(
-                      "span",
-                      null,
-                      toDisplayString(option.text),
-                      1
-                      /* TEXT */
-                    )
-                  ]))
+                  }, 1032, ["disabled", "content"])
                 ]),
                 _: 2
                 /* DYNAMIC */
@@ -4065,13 +3421,13 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
         ]),
         _: 1
         /* STABLE */
-      }, 8, ["modelValue", "size", "disabled"])) : createCommentVNode("v-if", true);
+      }, 8, ["model-value", "size", "disabled"])) : createCommentVNode("v-if", true);
     };
   }
 });
 
-const _hoisted_1$2 = { key: 2 };
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$3 = { key: 2 };
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormSelect"
   },
@@ -4398,8 +3754,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       const _directive_loading = resolveDirective("loading");
       return __props.model ? withDirectives((openBlock(), createBlock(unref(TMagicSelect), {
         key: 0,
-        modelValue: __props.model[__props.name],
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => __props.model[__props.name] = $event),
+        "model-value": __props.model[__props.name],
         class: "m-select",
         ref_key: "tMagicSelect",
         ref: tMagicSelect,
@@ -4414,7 +3769,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         "allow-create": __props.config.allowCreate,
         disabled: __props.disabled,
         "remote-method": __props.config.remote && remoteMethod,
-        onChange: changeHandler,
+        "onUpdate:modelValue": changeHandler,
         onVisibleChange: visibleHandler
       }, {
         default: withCtx(() => [
@@ -4506,7 +3861,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           )),
           moreLoadingVisible.value ? withDirectives((openBlock(), createElementBlock(
             "div",
-            _hoisted_1$2,
+            _hoisted_1$3,
             null,
             512
             /* NEED_PATCH */
@@ -4516,14 +3871,14 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         ]),
         _: 1
         /* STABLE */
-      }, 8, ["modelValue", "clearable", "filterable", "popper-class", "size", "remote", "placeholder", "multiple", "value-key", "allow-create", "disabled", "remote-method"])), [
+      }, 8, ["model-value", "clearable", "filterable", "popper-class", "size", "remote", "placeholder", "multiple", "value-key", "allow-create", "disabled", "remote-method"])), [
         [_directive_loading, loading.value]
       ]) : createCommentVNode("v-if", true);
     };
   }
 });
 
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormSwitch"
   },
@@ -4569,21 +3924,21 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(TMagicSwitch), {
-        modelValue: __props.model[__props.name],
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => __props.model[__props.name] = $event),
+        "model-value": __props.model[__props.name],
         size: __props.size,
         activeValue: activeValue.value,
         inactiveValue: inactiveValue.value,
         disabled: __props.disabled,
-        onChange: changeHandler
-      }, null, 8, ["modelValue", "size", "activeValue", "inactiveValue", "disabled"]);
+        "onUpdate:modelValue": changeHandler
+      }, null, 8, ["model-value", "size", "activeValue", "inactiveValue", "disabled"]);
     };
   }
 });
 
-const _hoisted_1$1 = { class: "m-fields-text" };
-const _hoisted_2 = { style: { "display": "flex", "justify-content": "flex-end" } };
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$2 = { class: "m-fields-text" };
+const _hoisted_2$1 = { key: 1 };
+const _hoisted_3$1 = { style: { "display": "flex", "justify-content": "flex-end" } };
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormText"
   },
@@ -4608,16 +3963,25 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     const appendConfig = computed(() => {
       if (typeof props.config.append === "string") {
         return {
+          type: "text",
           text: props.config.append,
-          type: "button",
           handler: void 0
         };
       }
-      if (props.config.append && typeof props.config.append === "object") {
-        if (props.config.append.value === 0) {
-          return false;
+      if (typeof props.config.append === "object") {
+        if (typeof props.config.append?.handler === "function") {
+          return {
+            type: "button",
+            text: props.config.append.text,
+            handler: props.config.append.handler
+          };
+        }
+        if (props.config.append) {
+          if (props.config.append.value === 0) {
+            return false;
+          }
+          return props.config.append;
         }
-        return props.config.append;
       }
       return false;
     });
@@ -4722,23 +4086,35 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       instanceRef.value = void 0;
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$1, [
+      return openBlock(), createElementBlock("div", _hoisted_1$2, [
         createVNode(unref(TMagicInput), {
-          modelValue: __props.model[__props.name],
-          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => __props.model[__props.name] = $event),
+          "model-value": __props.model[__props.name],
           ref_key: "input",
           ref: input,
           clearable: "",
           size: __props.size,
           placeholder: __props.config.placeholder,
           disabled: __props.disabled,
-          onChange: changeHandler,
+          "onUpdate:modelValue": changeHandler,
           onInput: inputHandler,
-          onKeyup: _cache[1] || (_cache[1] = ($event) => keyUpHandler($event))
+          onKeyup: _cache[0] || (_cache[0] = ($event) => keyUpHandler($event))
         }, createSlots({
           _: 2
           /* DYNAMIC */
         }, [
+          __props.config.prepend ? {
+            name: "prepend",
+            fn: withCtx(() => [
+              createElementVNode(
+                "span",
+                null,
+                toDisplayString(__props.config.prepend),
+                1
+                /* TEXT */
+              )
+            ]),
+            key: "0"
+          } : void 0,
           appendConfig.value ? {
             name: "append",
             fn: withCtx(() => [
@@ -4757,11 +4133,17 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                 ]),
                 _: 1
                 /* STABLE */
-              }, 8, ["size"])) : createCommentVNode("v-if", true)
+              }, 8, ["size"])) : (openBlock(), createElementBlock(
+                "span",
+                _hoisted_2$1,
+                toDisplayString(appendConfig.value.text),
+                1
+                /* TEXT */
+              ))
             ]),
-            key: "0"
+            key: "1"
           } : void 0
-        ]), 1032, ["modelValue", "size", "placeholder", "disabled"]),
+        ]), 1032, ["model-value", "size", "placeholder", "disabled"]),
         (openBlock(), createBlock(Teleport, { to: "body" }, [
           popoverVisible.value ? (openBlock(), createElementBlock(
             "div",
@@ -4772,20 +4154,20 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
               ref: popoverEl
             },
             [
-              _cache[5] || (_cache[5] = createElementVNode(
+              _cache[4] || (_cache[4] = createElementVNode(
                 "div",
                 { class: "m-form-validate__warning" },
                 "输入内容前后有空格，是否移除空格？",
                 -1
                 /* CACHED */
               )),
-              createElementVNode("div", _hoisted_2, [
+              createElementVNode("div", _hoisted_3$1, [
                 createVNode(unref(TMagicButton), {
                   link: "",
                   size: "small",
-                  onClick: _cache[2] || (_cache[2] = ($event) => popoverVisible.value = false)
+                  onClick: _cache[1] || (_cache[1] = ($event) => popoverVisible.value = false)
                 }, {
-                  default: withCtx(() => [..._cache[3] || (_cache[3] = [
+                  default: withCtx(() => [..._cache[2] || (_cache[2] = [
                     createTextVNode(
                       "保持原样",
                       -1
@@ -4800,7 +4182,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                   size: "small",
                   onClick: confirmTrimHandler
                 }, {
-                  default: withCtx(() => [..._cache[4] || (_cache[4] = [
+                  default: withCtx(() => [..._cache[3] || (_cache[3] = [
                     createTextVNode(
                       "移除空格",
                       -1
@@ -4811,7 +4193,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                   /* STABLE */
                 })
               ]),
-              _cache[6] || (_cache[6] = createElementVNode(
+              _cache[5] || (_cache[5] = createElementVNode(
                 "span",
                 {
                   class: "tmagic-form-text-popper-arrow",
@@ -4831,162 +4213,989 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   }
 });
 
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MFormTextarea"
+  },
+  __name: "Textarea",
+  props: {
+    config: {},
+    model: {},
+    initValues: {},
+    values: {},
+    name: {},
+    prop: {},
+    disabled: { type: Boolean },
+    size: {},
+    lastValues: {}
+  },
+  emits: ["change", "input"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    useAddField(props.prop);
+    const mForm = inject("mForm");
+    const changeHandler = (value) => {
+      emit("change", value);
+    };
+    const inputHandler = (v) => {
+      emit("input", v);
+      mForm?.$emit("field-input", props.prop, v);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(TMagicInput), {
+        "model-value": __props.model[__props.name],
+        type: "textarea",
+        size: __props.size,
+        clearable: "",
+        placeholder: __props.config.placeholder,
+        disabled: __props.disabled,
+        "onUpdate:modelValue": changeHandler,
+        onInput: inputHandler
+      }, null, 8, ["model-value", "size", "placeholder", "disabled"]);
+    };
+  }
+});
+
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MFormTime"
+  },
+  __name: "Time",
+  props: {
+    config: {},
+    model: {},
+    initValues: {},
+    values: {},
+    name: {},
+    prop: {},
+    disabled: { type: Boolean },
+    size: {},
+    lastValues: {}
+  },
+  emits: ["change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    useAddField(props.prop);
+    const changeHandler = (v) => {
+      emit("change", v);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(TMagicTimePicker), {
+        "model-value": __props.model[__props.name],
+        "value-format": __props.config.valueFormat || "HH:mm:ss",
+        format: __props.config.format || "HH:mm:ss",
+        size: __props.size,
+        placeholder: __props.config.placeholder,
+        disabled: __props.disabled,
+        "onUpdate:modelValue": changeHandler
+      }, null, 8, ["model-value", "value-format", "format", "size", "placeholder", "disabled"]);
+    };
+  }
+});
+
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MFormTimeRange"
+  },
+  __name: "Timerange",
+  props: {
+    config: {},
+    model: {},
+    initValues: {},
+    values: {},
+    name: {},
+    prop: {},
+    disabled: { type: Boolean },
+    size: {},
+    lastValues: {}
+  },
+  emits: ["change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    useAddField(props.prop);
+    const { names } = props.config;
+    const value = ref([]);
+    if (props.model !== void 0 && names?.length) {
+      watch(
+        [() => props.model[names[0]], () => props.model[names[1]]],
+        ([start, end], [preStart, preEnd]) => {
+          if (!value.value) {
+            value.value = [];
+          }
+          if (!start || !end) value.value = [];
+          if (start !== preStart) value.value[0] = start;
+          if (end !== preEnd) value.value[1] = end;
+        },
+        {
+          immediate: true
+        }
+      );
+    }
+    const setValue = (v) => {
+      names?.forEach((item, index) => {
+        if (!props.model) {
+          return;
+        }
+        if (Array.isArray(v)) {
+          props.model[item] = v[index];
+        } else {
+          props.model[item] = void 0;
+        }
+      });
+    };
+    const changeHandler = (v) => {
+      const value2 = v || [];
+      if (names?.length) {
+        setValue(value2);
+      }
+      emit("change", value2);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(TMagicTimePicker), {
+        "model-value": value.value,
+        "is-range": "",
+        "range-separator": "-",
+        "start-placeholder": "开始时间",
+        "end-placeholder": "结束时间",
+        size: __props.size,
+        "unlink-panels": true,
+        disabled: __props.disabled,
+        "default-time": __props.config.defaultTime,
+        "onUpdate:modelValue": changeHandler
+      }, null, 8, ["model-value", "size", "disabled", "default-time"]);
+    };
+  }
+});
+
+const useAdd = (props, emit) => {
+  const mForm = inject("mForm");
+  const addable = computed(() => {
+    const modelName = props.name || props.config.name || "";
+    if (!props.model[modelName].length) {
+      return true;
+    }
+    if (typeof props.config.addable === "function") {
+      return props.config.addable(mForm, {
+        model: props.model[modelName],
+        formValue: mForm?.values,
+        prop: props.prop
+      });
+    }
+    return typeof props.config.addable === "undefined" ? true : props.config.addable;
+  });
+  const newHandler = async (row) => {
+    const modelName = props.name || props.config.name || "";
+    if (props.config.max && props.model[modelName].length >= props.config.max) {
+      tMagicMessage.error(`最多新增配置不能超过${props.config.max}条`);
+      return;
+    }
+    if (typeof props.config.beforeAddRow === "function") {
+      const beforeCheckRes = props.config.beforeAddRow(mForm, {
+        model: props.model[modelName],
+        formValue: mForm?.values,
+        prop: props.prop
+      });
+      if (!beforeCheckRes) return;
+    }
+    const columns = props.config.items;
+    const enumValues = props.config.enum || [];
+    let enumV = [];
+    const { length } = props.model[modelName];
+    const key = props.config.key || "id";
+    let inputs = {};
+    if (enumValues.length) {
+      if (length >= enumValues.length) {
+        return;
+      }
+      enumV = enumValues.filter((item) => {
+        let i = 0;
+        for (; i < length; i++) {
+          if (item[key] === props.model[modelName][i][key]) {
+            break;
+          }
+        }
+        return i === length;
+      });
+      if (enumV.length > 0) {
+        inputs = enumV[0];
+      }
+    } else if (Array.isArray(row)) {
+      columns.forEach((column, index) => {
+        column.name && (inputs[column.name] = row[index]);
+      });
+    } else {
+      if (typeof props.config.defaultAdd === "function") {
+        inputs = await props.config.defaultAdd(mForm, {
+          model: props.model[modelName],
+          formValue: mForm?.values
+        });
+      } else if (props.config.defaultAdd) {
+        inputs = props.config.defaultAdd;
+      }
+      inputs = await initValue(mForm, {
+        config: columns,
+        initValues: inputs
+      });
+    }
+    if (props.sortKey && length) {
+      inputs[props.sortKey] = props.model[modelName][length - 1][props.sortKey] - 1;
+    }
+    emit("change", [...props.model[modelName], inputs], {
+      changeRecords: [
+        {
+          propPath: `${props.prop}.${props.model[modelName].length}`,
+          value: inputs
+        }
+      ]
+    });
+  };
+  return {
+    addable,
+    newHandler
+  };
+};
+
+const useFullscreen = () => {
+  const isFullscreen = ref(false);
+  const mTableEl = useTemplateRef("mTable");
+  const { nextZIndex } = useZIndex();
+  const toggleFullscreen = () => {
+    if (!mTableEl.value) return;
+    if (isFullscreen.value) {
+      mTableEl.value.classList.remove("fixed");
+      isFullscreen.value = false;
+    } else {
+      mTableEl.value.classList.add("fixed");
+      mTableEl.value.style.zIndex = `${nextZIndex()}`;
+      isFullscreen.value = true;
+    }
+  };
+  return {
+    isFullscreen,
+    toggleFullscreen
+  };
+};
+
+const useImport = (props, emit, newHandler) => {
+  const mForm = inject("mForm");
+  const modelName = computed(() => props.name || props.config.name || "");
+  const importable = computed(() => {
+    if (typeof props.config.importable === "function") {
+      return props.config.importable(mForm, {
+        formValue: mForm?.values,
+        model: props.model[modelName.value]
+      });
+    }
+    return typeof props.config.importable === "undefined" ? false : props.config.importable;
+  });
+  const excelBtn = useTemplateRef("excelBtn");
+  const excelHandler = async (file) => {
+    if (!file?.raw) {
+      return false;
+    }
+    if (!globalThis.XLSX) {
+      await asyncLoadJs("https://cdn.bootcdn.net/ajax/libs/xlsx/0.17.0/xlsx.full.min.js");
+    }
+    const reader = new FileReader();
+    reader.onload = () => {
+      const data = reader.result;
+      const pdata = globalThis.XLSX.read(data, { type: "array" });
+      pdata.SheetNames.forEach((sheetName) => {
+        const arr = globalThis.XLSX.utils.sheet_to_json(pdata.Sheets[sheetName], { header: 1 });
+        if (arr?.[0]) {
+          arr.forEach((row) => {
+            newHandler(row);
+          });
+        }
+        setTimeout(() => {
+          excelBtn.value?.clearFiles();
+        }, 300);
+      });
+    };
+    reader.readAsArrayBuffer(file.raw);
+    return false;
+  };
+  const clearHandler = () => {
+    emit("change", []);
+    mForm?.$emit("field-change", props.prop, props.model[modelName.value]);
+  };
+  return {
+    importable,
+    excelHandler,
+    clearHandler
+  };
+};
+
+const usePagination = (props, modelName) => {
+  const pageSize = ref(10);
+  const currentPage = ref(0);
+  const paginationData = computed(() => getDataByPage(props.model[modelName.value], currentPage.value, pageSize.value));
+  const handleSizeChange = (val) => {
+    pageSize.value = val;
+  };
+  const handleCurrentChange = (val) => {
+    currentPage.value = val - 1;
+  };
+  return {
+    pageSize,
+    currentPage,
+    paginationData,
+    handleSizeChange,
+    handleCurrentChange
+  };
+};
+
+const useSelection = (props, emit, tMagicTableRef) => {
+  const mForm = inject("mForm");
+  const selectHandle = (selection, row) => {
+    if (typeof props.config.selection === "string" && props.config.selection === "single") {
+      tMagicTableRef.value?.clearSelection();
+      tMagicTableRef.value?.toggleRowSelection(row, true);
+    }
+    emit("select", selection, row);
+    if (typeof props.config.onSelect === "function") {
+      props.config.onSelect(mForm, { selection, row, config: props.config });
+    }
+  };
+  const toggleRowSelection = (row, selected) => {
+    tMagicTableRef.value?.toggleRowSelection.call(tMagicTableRef.value?.getTableRef(), row, selected);
+  };
+  return {
+    selectHandle,
+    toggleRowSelection
+  };
+};
+
+const useSortable = (props, emit, tMagicTableRef, modelName) => {
+  const mForm = inject("mForm");
+  let sortable;
+  const rowDrop = () => {
+    sortable?.destroy();
+    const tableEl = tMagicTableRef.value?.getEl();
+    const tBodyEl = tableEl?.querySelector(".el-table__body > tbody");
+    if (!tBodyEl) {
+      return;
+    }
+    sortable = Sortable.create(tBodyEl, {
+      draggable: ".tmagic-design-table-row",
+      filter: "input",
+      // 表单组件选字操作和触发拖拽会冲突，优先保证选字操作
+      preventOnFilter: false,
+      // 允许选字
+      direction: "vertical",
+      onEnd: ({ newIndex, oldIndex }) => {
+        if (typeof newIndex === "undefined") return;
+        if (typeof oldIndex === "undefined") return;
+        const newData = sortArray(props.model[modelName.value], newIndex, oldIndex, props.sortKey);
+        emit("change", newData);
+        mForm?.$emit("field-change", newData);
+      }
+    });
+  };
+  watchEffect(() => {
+    if (props.config.dropSort) {
+      rowDrop();
+    }
+  });
+};
+
 const _sfc_main$4 = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "MFormTextarea"
-  },
-  __name: "Textarea",
+  __name: "ActionsColumn",
   props: {
     config: {},
     model: {},
-    initValues: {},
-    values: {},
     name: {},
-    prop: {},
     disabled: { type: Boolean },
-    size: {},
-    lastValues: {}
+    currentPage: {},
+    pageSize: {},
+    index: {},
+    row: {},
+    prop: {},
+    sortKey: {}
   },
-  emits: ["change", "input"],
+  emits: ["change"],
   setup(__props, { emit: __emit }) {
-    const props = __props;
     const emit = __emit;
-    useAddField(props.prop);
+    const props = __props;
     const mForm = inject("mForm");
-    const changeHandler = (value) => {
-      emit("change", value);
+    const removeHandler = (index) => {
+      if (props.disabled) return;
+      emit("change", props.model[props.name].toSpliced(index, 1));
     };
-    const inputHandler = (v) => {
-      emit("input", v);
-      mForm?.$emit("field-input", props.prop, v);
+    const copyHandler = (index) => {
+      const inputs = cloneDeep(props.model[props.name][index]);
+      const { length } = props.model[props.name];
+      if (props.sortKey && length) {
+        inputs[props.sortKey] = props.model[props.name][length - 1][props.sortKey] - 1;
+      }
+      emit("change", [...props.model[props.name], inputs], {
+        changeRecords: [
+          {
+            propPath: `${props.prop}.${props.model[props.name].length}`,
+            value: inputs
+          }
+        ]
+      });
+    };
+    const showDelete = (index) => {
+      const deleteFunc = props.config.delete;
+      if (deleteFunc && typeof deleteFunc === "function") {
+        return deleteFunc(props.model[props.name], index, mForm?.values);
+      }
+      return props.config.delete ?? true;
+    };
+    const copyable = (index) => {
+      const copyableFunc = props.config.copyable;
+      if (copyableFunc && typeof copyableFunc === "function") {
+        return copyableFunc(mForm, {
+          values: mForm?.initValues || {},
+          model: props.model,
+          parent: mForm?.parentValues || {},
+          formValue: mForm?.values || props.model,
+          prop: props.prop,
+          config: props.config,
+          index
+        });
+      }
+      return props.config.copyable ?? true;
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(TMagicInput), {
-        modelValue: __props.model[__props.name],
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => __props.model[__props.name] = $event),
-        type: "textarea",
-        size: __props.size,
-        clearable: "",
-        placeholder: __props.config.placeholder,
-        disabled: __props.disabled,
-        onChange: changeHandler,
-        onInput: inputHandler
-      }, null, 8, ["modelValue", "size", "placeholder", "disabled"]);
+      return openBlock(), createElementBlock(
+        Fragment,
+        null,
+        [
+          renderSlot(_ctx.$slots, "operateCol", {
+            scope: { $index: __props.index, row: __props.row }
+          }),
+          withDirectives(createVNode(unref(TMagicButton), {
+            size: "small",
+            type: "danger",
+            link: "",
+            title: "删除",
+            icon: unref(Delete),
+            onClick: _cache[0] || (_cache[0] = ($event) => removeHandler(__props.index + 1 + __props.currentPage * __props.pageSize - 1))
+          }, null, 8, ["icon"]), [
+            [vShow, showDelete(__props.index + 1 + __props.currentPage * __props.pageSize - 1)]
+          ]),
+          copyable(__props.index + 1 + __props.currentPage * __props.pageSize - 1) ? (openBlock(), createBlock(unref(TMagicButton), {
+            key: 0,
+            link: "",
+            size: "small",
+            type: "primary",
+            title: "复制",
+            icon: unref(DocumentCopy),
+            disabled: __props.disabled,
+            onClick: _cache[1] || (_cache[1] = ($event) => copyHandler(__props.index + 1 + __props.currentPage * __props.pageSize - 1))
+          }, null, 8, ["icon", "disabled"])) : createCommentVNode("v-if", true)
+        ],
+        64
+        /* STABLE_FRAGMENT */
+      );
     };
   }
 });
 
 const _sfc_main$3 = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "MFormTime"
-  },
-  __name: "Time",
+  __name: "SortColumn",
   props: {
-    config: {},
-    model: {},
-    initValues: {},
-    values: {},
-    name: {},
-    prop: {},
+    index: {},
     disabled: { type: Boolean },
-    size: {},
-    lastValues: {}
+    currentPage: {},
+    pageSize: {},
+    name: {},
+    model: {}
   },
-  emits: ["change"],
+  emits: ["swap"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    useAddField(props.prop);
-    const changeHandler = (v) => {
-      emit("change", v);
+    let timer = null;
+    const upHandler = (index) => {
+      if (timer) {
+        clearTimeout(timer);
+      }
+      timer = setTimeout(() => {
+        emit("swap", index, index - 1);
+        timer = null;
+      }, 300);
+    };
+    const topHandler = (index) => {
+      if (timer) {
+        clearTimeout(timer);
+      }
+      const moveNum = index;
+      for (let i = 0; i < moveNum; i++) {
+        emit("swap", index, index - 1);
+        index -= 1;
+      }
+    };
+    const downHandler = (index) => {
+      if (timer) {
+        clearTimeout(timer);
+      }
+      timer = setTimeout(() => {
+        emit("swap", index, index + 1);
+        timer = null;
+      }, 300);
+    };
+    const bottomHandler = (index) => {
+      if (timer) {
+        clearTimeout(timer);
+      }
+      const moveNum = props.model[props.name].length - 1 - index;
+      for (let i = 0; i < moveNum; i++) {
+        emit("swap", index, index + 1);
+        index += 1;
+      }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(TMagicTimePicker), {
-        modelValue: __props.model[__props.name],
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => __props.model[__props.name] = $event),
-        "value-format": __props.config.valueFormat || "HH:mm:ss",
-        format: __props.config.format || "HH:mm:ss",
-        size: __props.size,
-        placeholder: __props.config.placeholder,
-        disabled: __props.disabled,
-        onChange: changeHandler
-      }, null, 8, ["modelValue", "value-format", "format", "size", "placeholder", "disabled"]);
+      return openBlock(), createElementBlock(
+        Fragment,
+        null,
+        [
+          __props.index + 1 + __props.currentPage * __props.pageSize - 1 !== 0 ? (openBlock(), createBlock(unref(TMagicTooltip), {
+            key: 0,
+            content: "点击上移，双击置顶",
+            placement: "top"
+          }, {
+            default: withCtx(() => [
+              createVNode(unref(TMagicButton), {
+                plain: "",
+                size: "small",
+                type: "primary",
+                icon: unref(ArrowUp),
+                disabled: __props.disabled,
+                link: "",
+                onClick: _cache[0] || (_cache[0] = ($event) => upHandler(__props.index + 1 + __props.currentPage * __props.pageSize - 1)),
+                onDblclick: _cache[1] || (_cache[1] = ($event) => topHandler(__props.index + 1 + __props.currentPage * __props.pageSize - 1))
+              }, null, 8, ["icon", "disabled"])
+            ]),
+            _: 1
+            /* STABLE */
+          })) : createCommentVNode("v-if", true),
+          __props.index + 1 + __props.currentPage * __props.pageSize - 1 !== __props.model[__props.name].length - 1 ? (openBlock(), createBlock(unref(TMagicTooltip), {
+            key: 1,
+            content: "点击下移，双击置底",
+            placement: "top"
+          }, {
+            default: withCtx(() => [
+              createVNode(unref(TMagicButton), {
+                plain: "",
+                size: "small",
+                type: "primary",
+                icon: unref(ArrowDown),
+                disabled: __props.disabled,
+                link: "",
+                onClick: _cache[2] || (_cache[2] = ($event) => downHandler(__props.index + 1 + __props.currentPage * __props.pageSize - 1)),
+                onDblclick: _cache[3] || (_cache[3] = ($event) => bottomHandler(__props.index + 1 + __props.currentPage * __props.pageSize - 1))
+              }, null, 8, ["icon", "disabled"])
+            ]),
+            _: 1
+            /* STABLE */
+          })) : createCommentVNode("v-if", true)
+        ],
+        64
+        /* STABLE_FRAGMENT */
+      );
     };
   }
 });
 
+const useTableColumns = (props, emit, currentPage, pageSize, modelName) => {
+  const mForm = inject("mForm");
+  const display$1 = (fuc) => display(mForm, fuc, props);
+  const lastData = computed(
+    () => props.config.pagination ? getDataByPage(props.lastValues[modelName.value], currentPage.value, pageSize.value) : props.lastValues[modelName.value] || []
+  );
+  const itemExtra = (fuc, index) => {
+    if (typeof fuc === "function") {
+      return fuc(mForm, {
+        values: mForm?.initValues,
+        model: props.model,
+        formValue: mForm ? mForm.values : props.model,
+        prop: props.prop,
+        index
+      });
+    }
+    return fuc;
+  };
+  const selection = computed(() => {
+    if (typeof props.config.selection === "function") {
+      return props.config.selection(mForm, { model: props.model[modelName.value] });
+    }
+    return props.config.selection;
+  });
+  const getProp = (index) => {
+    return `${props.prop}${props.prop ? "." : ""}${index + 1 + currentPage.value * pageSize.value - 1}`;
+  };
+  const makeConfig = (config, row) => {
+    const newConfig = cloneDeep(config);
+    if (typeof config.itemsFunction === "function") {
+      newConfig.items = config.itemsFunction(row);
+    }
+    delete newConfig.display;
+    return newConfig;
+  };
+  const changeHandler = (v, eventData) => {
+    emit("change", props.model, eventData);
+  };
+  const onAddDiffCount = () => emit("addDiffCount");
+  const columns = computed(() => {
+    const columns2 = [];
+    if (props.config.itemExtra && !props.config.dropSort) {
+      columns2.push({
+        props: {
+          fixed: "left",
+          width: 30,
+          type: "expand"
+        },
+        cell: ({ $index }) => h("span", {
+          innerHTML: itemExtra(props.config.itemExtra, $index),
+          class: "m-form-tip"
+        })
+      });
+    }
+    columns2.push({
+      props: {
+        label: "操作",
+        fixed: props.config.fixed === false ? void 0 : "left",
+        width: props.config.operateColWidth || 112,
+        align: "center"
+      },
+      cell: ({ row, $index }) => h(_sfc_main$4, {
+        row,
+        index: $index,
+        model: props.model,
+        config: props.config,
+        prop: props.prop,
+        disabled: props.disabled,
+        sortKey: props.sortKey,
+        name: modelName.value,
+        currentPage: currentPage.value,
+        pageSize: pageSize.value,
+        onChange: (v) => {
+          emit("change", v);
+        }
+      })
+    });
+    if (props.sort && props.model[modelName.value] && props.model[modelName.value].length > 1) {
+      columns2.push({
+        props: {
+          label: "排序",
+          width: 80
+        },
+        cell: ({ $index }) => h(_sfc_main$3, {
+          index: $index,
+          model: props.model,
+          disabled: props.disabled,
+          name: modelName.value,
+          currentPage: currentPage.value,
+          pageSize: pageSize.value,
+          onSwap: (index1, index2) => {
+            const newData = sortArray(props.model[modelName.value], index1, index2, props.sortKey);
+            emit("change", newData);
+            mForm?.$emit("field-change", newData);
+          }
+        })
+      });
+    }
+    if (selection.value) {
+      columns2.push({
+        props: {
+          align: "center",
+          headerAlign: "center",
+          type: "selection",
+          width: 45
+        }
+      });
+    }
+    if (props.showIndex && props.config.showIndex) {
+      columns2.push({
+        props: {
+          label: "序号",
+          width: 60
+        },
+        cell: ({ $index }) => h("span", $index + 1 + currentPage.value * pageSize.value)
+      });
+    }
+    for (const column of props.config.items) {
+      if (column.type !== "hidden" && display$1(column.display)) {
+        columns2.push({
+          props: {
+            prop: column.name,
+            label: column.label,
+            width: column.width,
+            sortable: column.sortable,
+            sortOrders: ["ascending", "descending"],
+            class: props.config.dropSort === true ? "el-table__column--dropable" : ""
+          },
+          cell: ({ row, $index }) => h(_sfc_main$A, {
+            labelWidth: "0",
+            disabled: props.disabled,
+            prop: getProp($index),
+            rules: column.rules,
+            config: makeConfig(column, row),
+            model: row,
+            lastValues: lastData.value[$index],
+            isCompare: props.isCompare,
+            size: props.size,
+            onChange: changeHandler,
+            onAddDiffCount
+          })
+        });
+      }
+    }
+    return columns2;
+  });
+  return {
+    columns
+  };
+};
+
+const _hoisted_1$1 = { class: "m-fields-table-wrap" };
+const _hoisted_2 = ["innerHTML"];
+const _hoisted_3 = { style: { "display": "flex", "justify-content": "space-between", "margin": "10px 0" } };
+const _hoisted_4 = { style: { "display": "flex" } };
+const _hoisted_5 = {
+  key: 1,
+  class: "bottom",
+  style: { "text-align": "right" }
+};
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   ...{
-    name: "MFormTimeRange"
+    name: "MFormTable"
   },
-  __name: "Timerange",
+  __name: "Table",
   props: {
-    config: {},
     model: {},
-    initValues: {},
-    values: {},
+    lastValues: { default: () => ({}) },
+    isCompare: { type: Boolean, default: false },
+    config: {},
     name: {},
-    prop: {},
+    prop: { default: "" },
+    labelWidth: {},
+    sort: { type: Boolean },
     disabled: { type: Boolean },
+    sortKey: { default: "" },
+    text: {},
     size: {},
-    lastValues: {}
+    enableToggleMode: { type: Boolean, default: true },
+    showIndex: { type: Boolean, default: true }
   },
-  emits: ["change"],
-  setup(__props, { emit: __emit }) {
+  emits: ["change", "select", "addDiffCount"],
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    useAddField(props.prop);
-    const { names } = props.config;
-    const value = ref([]);
-    if (props.model !== void 0 && names?.length) {
-      watch(
-        [() => props.model[names[0]], () => props.model[names[1]]],
-        ([start, end], [preStart, preEnd]) => {
-          if (!value.value) {
-            value.value = [];
-          }
-          if (!start || !end) value.value = [];
-          if (start !== preStart) value.value[0] = start;
-          if (end !== preEnd) value.value[1] = end;
-        },
-        {
-          immediate: true
-        }
-      );
-    }
-    const setValue = (v) => {
-      names?.forEach((item, index) => {
-        if (!props.model) {
-          return;
-        }
-        if (Array.isArray(v)) {
-          props.model[item] = v[index];
-        } else {
-          props.model[item] = void 0;
-        }
+    const modelName = computed(() => props.name || props.config.name || "");
+    const tMagicTableRef = useTemplateRef("tMagicTable");
+    const { pageSize, currentPage, paginationData, handleSizeChange, handleCurrentChange } = usePagination(
+      props,
+      modelName
+    );
+    const { addable, newHandler } = useAdd(props, emit);
+    const { columns } = useTableColumns(props, emit, currentPage, pageSize, modelName);
+    useSortable(props, emit, tMagicTableRef, modelName);
+    const { isFullscreen, toggleFullscreen } = useFullscreen();
+    const { importable, excelHandler, clearHandler } = useImport(props, emit, newHandler);
+    const { selectHandle, toggleRowSelection } = useSelection(props, emit, tMagicTableRef);
+    const updateKey = ref(1);
+    const data = computed(() => props.config.pagination ? paginationData.value : props.model[modelName.value]);
+    const toggleMode = () => {
+      const calcLabelWidth = (label) => {
+        if (!label) return "0px";
+        const zhLength = label.match(/[^\x00-\xff]/g)?.length || 0;
+        const chLength = label.length - zhLength;
+        return `${Math.max(chLength * 8 + zhLength * 20, 80)}px`;
+      };
+      props.config.type = "groupList";
+      props.config.enableToggleMode = true;
+      props.config.tableItems = props.config.items;
+      props.config.items = props.config.groupItems || props.config.items.map((item) => {
+        const text = item.text || item.label;
+        const labelWidth = calcLabelWidth(text);
+        return {
+          ...item,
+          text,
+          labelWidth,
+          span: item.span || 12
+        };
       });
     };
-    const changeHandler = (v) => {
-      const value2 = v || [];
-      if (names?.length) {
-        setValue(value2);
-      }
-      emit("change", value2);
+    const sortChangeHandler = (sortOptions) => {
+      const modelName2 = props.name || props.config.name || "";
+      sortChange(props.model[modelName2], sortOptions);
     };
+    __expose({
+      toggleRowSelection
+    });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(TMagicTimePicker), {
-        modelValue: value.value,
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => value.value = $event),
-        "is-range": "",
-        "range-separator": "-",
-        "start-placeholder": "开始时间",
-        "end-placeholder": "结束时间",
-        size: __props.size,
-        "unlink-panels": true,
-        disabled: __props.disabled,
-        "default-time": __props.config.defaultTime,
-        onChange: changeHandler
-      }, null, 8, ["modelValue", "size", "disabled", "default-time"]);
+      return openBlock(), createElementBlock("div", _hoisted_1$1, [
+        (openBlock(), createBlock(Teleport, {
+          to: "body",
+          disabled: !unref(isFullscreen)
+        }, [
+          createElementVNode(
+            "div",
+            {
+              ref: "mTable",
+              class: normalizeClass(["m-fields-table", { "m-fields-table-item-extra": __props.config.itemExtra }])
+            },
+            [
+              __props.config.extra ? (openBlock(), createElementBlock("span", {
+                key: 0,
+                style: { "color": "rgba(0, 0, 0, 0.45)" },
+                innerHTML: __props.config.extra
+              }, null, 8, _hoisted_2)) : createCommentVNode("v-if", true),
+              createVNode(unref(TMagicTooltip), {
+                content: "拖拽可排序",
+                placement: "left-start",
+                disabled: __props.config.dropSort !== true
+              }, {
+                default: withCtx(() => [
+                  __props.model[modelName.value] ? (openBlock(), createBlock(unref(TMagicTable), {
+                    ref: "tMagicTable",
+                    style: { "width": "100%" },
+                    "show-header": "",
+                    "row-key": __props.config.rowKey || "id",
+                    columns: unref(columns),
+                    data: data.value,
+                    border: __props.config.border,
+                    "max-height": __props.config.maxHeight,
+                    "default-expand-all": true,
+                    key: updateKey.value,
+                    onSelect: unref(selectHandle),
+                    onSortChange: sortChangeHandler
+                  }, null, 8, ["row-key", "columns", "data", "border", "max-height", "onSelect"])) : createCommentVNode("v-if", true)
+                ]),
+                _: 1
+                /* STABLE */
+              }, 8, ["disabled"]),
+              renderSlot(_ctx.$slots, "default"),
+              createElementVNode("div", _hoisted_3, [
+                unref(addable) ? (openBlock(), createBlock(unref(TMagicButton), {
+                  key: 0,
+                  size: "small",
+                  type: "primary",
+                  disabled: __props.disabled,
+                  plain: "",
+                  onClick: _cache[0] || (_cache[0] = ($event) => unref(newHandler)())
+                }, {
+                  default: withCtx(() => [..._cache[1] || (_cache[1] = [
+                    createTextVNode(
+                      "新增一行",
+                      -1
+                      /* CACHED */
+                    )
+                  ])]),
+                  _: 1
+                  /* STABLE */
+                }, 8, ["disabled"])) : createCommentVNode("v-if", true),
+                createElementVNode("div", _hoisted_4, [
+                  __props.enableToggleMode && __props.config.enableToggleMode !== false && !unref(isFullscreen) ? (openBlock(), createBlock(unref(TMagicButton), {
+                    key: 0,
+                    icon: unref(Grid),
+                    size: "small",
+                    type: "primary",
+                    onClick: toggleMode
+                  }, {
+                    default: withCtx(() => [..._cache[2] || (_cache[2] = [
+                      createTextVNode(
+                        "展开配置",
+                        -1
+                        /* CACHED */
+                      )
+                    ])]),
+                    _: 1
+                    /* STABLE */
+                  }, 8, ["icon"])) : createCommentVNode("v-if", true),
+                  __props.config.enableFullscreen !== false ? (openBlock(), createBlock(unref(TMagicButton), {
+                    key: 1,
+                    icon: unref(FullScreen),
+                    size: "small",
+                    type: "primary",
+                    onClick: unref(toggleFullscreen)
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(
+                        toDisplayString(unref(isFullscreen) ? "退出全屏" : "全屏编辑"),
+                        1
+                        /* TEXT */
+                      )
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  }, 8, ["icon", "onClick"])) : createCommentVNode("v-if", true),
+                  unref(importable) ? (openBlock(), createBlock(unref(TMagicUpload), {
+                    key: 2,
+                    style: { "display": "inline-block" },
+                    ref: "excelBtn",
+                    action: "/noop",
+                    disabled: __props.disabled,
+                    "on-change": unref(excelHandler),
+                    "auto-upload": false
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(unref(TMagicButton), {
+                        size: "small",
+                        type: "success",
+                        disabled: __props.disabled,
+                        plain: ""
+                      }, {
+                        default: withCtx(() => [..._cache[3] || (_cache[3] = [
+                          createTextVNode(
+                            "导入EXCEL",
+                            -1
+                            /* CACHED */
+                          )
+                        ])]),
+                        _: 1
+                        /* STABLE */
+                      }, 8, ["disabled"])
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  }, 8, ["disabled", "on-change"])) : createCommentVNode("v-if", true),
+                  unref(importable) ? (openBlock(), createBlock(unref(TMagicButton), {
+                    key: 3,
+                    size: "small",
+                    type: "warning",
+                    disabled: __props.disabled,
+                    plain: "",
+                    onClick: unref(clearHandler)
+                  }, {
+                    default: withCtx(() => [..._cache[4] || (_cache[4] = [
+                      createTextVNode(
+                        "清空",
+                        -1
+                        /* CACHED */
+                      )
+                    ])]),
+                    _: 1
+                    /* STABLE */
+                  }, 8, ["disabled", "onClick"])) : createCommentVNode("v-if", true)
+                ])
+              ]),
+              __props.config.pagination ? (openBlock(), createElementBlock("div", _hoisted_5, [
+                createVNode(unref(TMagicPagination), {
+                  layout: "total, sizes, prev, pager, next, jumper",
+                  "hide-on-single-page": __props.model[modelName.value].length < unref(pageSize),
+                  "current-page": unref(currentPage) + 1,
+                  "page-sizes": [unref(pageSize), 60, 120, 300],
+                  "page-size": unref(pageSize),
+                  total: __props.model[modelName.value].length,
+                  onSizeChange: unref(handleSizeChange),
+                  onCurrentChange: unref(handleCurrentChange)
+                }, null, 8, ["hide-on-single-page", "current-page", "page-sizes", "page-size", "total", "onSizeChange", "onCurrentChange"])
+              ])) : createCommentVNode("v-if", true)
+            ],
+            2
+            /* CLASS */
+          )
+        ], 8, ["disabled"]))
+      ]);
     };
   }
 });
@@ -5153,7 +5362,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               class: "m-drawer-body"
             },
             [
-              createVNode(_sfc_main$d, {
+              createVNode(_sfc_main$g, {
                 ref_key: "form",
                 ref: form,
                 size: __props.size,
@@ -5261,7 +5470,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             [
               createVNode(unref(TMagicScrollbar), null, {
                 default: withCtx(() => [
-                  createVNode(_sfc_main$d, {
+                  createVNode(_sfc_main$g, {
                     ref_key: "form",
                     ref: form,
                     size: __props.size,
@@ -5334,38 +5543,39 @@ const index = {
     const option = Object.assign(defaultInstallOpt, opt);
     app.config.globalProperties.$MAGIC_FORM = option;
     setConfig(option);
-    app.component("m-form", _sfc_main$d);
-    app.component("m-form-dialog", _sfc_main$c);
-    app.component("m-form-container", _sfc_main$x);
-    app.component("m-form-fieldset", _sfc_main$w);
-    app.component("m-form-group-list", _sfc_main$u);
-    app.component("m-form-panel", _sfc_main$t);
-    app.component("m-form-row", _sfc_main$r);
-    app.component("m-form-step", _sfc_main$q);
-    app.component("m-form-table", _sfc_main$p);
-    app.component("m-form-tab", _sfc_main$o);
-    app.component("m-fields-text", _sfc_main$5);
-    app.component("m-fields-img-upload", _sfc_main$5);
-    app.component("m-fields-number", _sfc_main$a);
-    app.component("m-fields-number-range", _sfc_main$9);
-    app.component("m-fields-textarea", _sfc_main$4);
-    app.component("m-fields-hidden", _sfc_main$e);
-    app.component("m-fields-date", _sfc_main$j);
-    app.component("m-fields-datetime", _sfc_main$h);
-    app.component("m-fields-daterange", _sfc_main$i);
-    app.component("m-fields-timerange", _sfc_main$2);
-    app.component("m-fields-time", _sfc_main$3);
-    app.component("m-fields-checkbox", _sfc_main$m);
-    app.component("m-fields-switch", _sfc_main$6);
-    app.component("m-fields-color-picker", _sfc_main$k);
-    app.component("m-fields-checkbox-group", _sfc_main$l);
-    app.component("m-fields-radio-group", _sfc_main$8);
-    app.component("m-fields-display", _sfc_main$g);
-    app.component("m-fields-link", _sfc_main$b);
-    app.component("m-fields-select", _sfc_main$7);
-    app.component("m-fields-cascader", _sfc_main$n);
-    app.component("m-fields-dynamic-field", _sfc_main$f);
+    app.component("m-form", _sfc_main$g);
+    app.component("m-form-dialog", _sfc_main$f);
+    app.component("m-form-container", _sfc_main$A);
+    app.component("m-form-fieldset", _sfc_main$z);
+    app.component("m-form-group-list", _sfc_main$w);
+    app.component("m-form-panel", _sfc_main$v);
+    app.component("m-form-row", _sfc_main$t);
+    app.component("m-form-step", _sfc_main$s);
+    app.component("m-form-table", _sfc_main$2);
+    app.component("m-form-tab", _sfc_main$r);
+    app.component("m-form-flex-layout", _sfc_main$y);
+    app.component("m-fields-text", _sfc_main$8);
+    app.component("m-fields-img-upload", _sfc_main$8);
+    app.component("m-fields-number", _sfc_main$d);
+    app.component("m-fields-number-range", _sfc_main$c);
+    app.component("m-fields-textarea", _sfc_main$7);
+    app.component("m-fields-hidden", _sfc_main$h);
+    app.component("m-fields-date", _sfc_main$m);
+    app.component("m-fields-datetime", _sfc_main$k);
+    app.component("m-fields-daterange", _sfc_main$l);
+    app.component("m-fields-timerange", _sfc_main$5);
+    app.component("m-fields-time", _sfc_main$6);
+    app.component("m-fields-checkbox", _sfc_main$p);
+    app.component("m-fields-switch", _sfc_main$9);
+    app.component("m-fields-color-picker", _sfc_main$n);
+    app.component("m-fields-checkbox-group", _sfc_main$o);
+    app.component("m-fields-radio-group", _sfc_main$b);
+    app.component("m-fields-display", _sfc_main$j);
+    app.component("m-fields-link", _sfc_main$e);
+    app.component("m-fields-select", _sfc_main$a);
+    app.component("m-fields-cascader", _sfc_main$q);
+    app.component("m-fields-dynamic-field", _sfc_main$i);
   }
 };
 
-export { _sfc_main$n as MCascader, _sfc_main$m as MCheckbox, _sfc_main$l as MCheckboxGroup, _sfc_main$k as MColorPicker, _sfc_main$x as MContainer, _sfc_main$j as MDate, _sfc_main$h as MDateTime, _sfc_main$i as MDaterange, _sfc_main$g as MDisplay, _sfc_main$f as MDynamicField, _sfc_main$w as MFieldset, _sfc_main$d as MForm, _sfc_main as MFormBox, _sfc_main$c as MFormDialog, _sfc_main$1 as MFormDrawer, _sfc_main$u as MGroupList, _sfc_main$e as MHidden, _sfc_main$b as MLink, _sfc_main$a as MNumber, _sfc_main$9 as MNumberRange, _sfc_main$t as MPanel, _sfc_main$8 as MRadioGroup, _sfc_main$r as MRow, _sfc_main$7 as MSelect, _sfc_main$6 as MSwitch, _sfc_main$p as MTable, _sfc_main$o as MTabs, _sfc_main$5 as MText, _sfc_main$4 as MTextarea, _sfc_main$3 as MTime, _sfc_main$2 as MTimerange, createForm, createValues, datetimeFormatter, index as default, display, filterFunction, getRules, initValue, useAddField };
+export { _sfc_main$q as MCascader, _sfc_main$p as MCheckbox, _sfc_main$o as MCheckboxGroup, _sfc_main$n as MColorPicker, _sfc_main$A as MContainer, _sfc_main$m as MDate, _sfc_main$k as MDateTime, _sfc_main$l as MDaterange, _sfc_main$j as MDisplay, _sfc_main$i as MDynamicField, _sfc_main$z as MFieldset, _sfc_main$y as MFlexLayout, _sfc_main$g as MForm, _sfc_main as MFormBox, _sfc_main$f as MFormDialog, _sfc_main$1 as MFormDrawer, _sfc_main$w as MGroupList, _sfc_main$h as MHidden, _sfc_main$e as MLink, _sfc_main$d as MNumber, _sfc_main$c as MNumberRange, _sfc_main$v as MPanel, _sfc_main$b as MRadioGroup, _sfc_main$t as MRow, _sfc_main$a as MSelect, _sfc_main$9 as MSwitch, _sfc_main$2 as MTable, _sfc_main$r as MTabs, _sfc_main$8 as MText, _sfc_main$7 as MTextarea, _sfc_main$6 as MTime, _sfc_main$5 as MTimerange, createForm, createValues, datetimeFormatter, index as default, display, filterFunction, getDataByPage, getRules, initValue, sortArray, sortChange, useAddField };