@tmagic/form 1.6.1 → 1.7.0-beta.1

package/dist/tmagic-form.umd.cjs

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('@element-plus/icons-vue'), require('@tmagic/design'), require('@tmagic/utils'), require('dayjs'), require('dayjs/plugin/utc'), require('sortablejs'), require('@popperjs/core'), require('@tmagic/form-schema')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'vue', '@element-plus/icons-vue', '@tmagic/design', '@tmagic/utils', 'dayjs', 'dayjs/plugin/utc', 'sortablejs', '@popperjs/core', '@tmagic/form-schema'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicForm = {}, global.Vue, global.iconsVue, global.design, global.utils, global.dayjs, global.utc, global.Sortable, global.core, global.formSchema));
-})(this, (function (exports, vue, iconsVue, design, utils, dayjs, utc, Sortable, core, formSchema) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('@element-plus/icons-vue'), require('@tmagic/design'), require('@tmagic/utils'), require('dayjs'), require('dayjs/plugin/utc'), require('@popperjs/core'), require('sortablejs'), require('@tmagic/form-schema')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue', '@element-plus/icons-vue', '@tmagic/design', '@tmagic/utils', 'dayjs', 'dayjs/plugin/utc', '@popperjs/core', 'sortablejs', '@tmagic/form-schema'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicForm = {}, global.Vue, global.iconsVue, global.design, global.utils, global.dayjs, global.utc, global.core, global.Sortable, global.formSchema));
+})(this, (function (exports, vue, iconsVue, design, utils, dayjs, utc, core, Sortable, formSchema) { 'use strict';
 
   /** Detect free variable `global` from Node.js. */
   var freeGlobal = typeof global == 'object' && global && global.Object === Object && global;
@@ -2968,8 +2968,10 @@
       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;
       }
     }
   };
@@ -2999,6 +3001,16 @@
       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 = {}) {
@@ -3039,7 +3051,8 @@
         formValue: mForm?.values || props.model,
         prop: props.prop,
         config: props.config,
-        index: props.index
+        index: props.index,
+        getFormValue: (prop) => utils.getValueByKeyPath(prop, mForm?.values || props.model)
       });
     }
     return config;
@@ -3116,25 +3129,47 @@
     }
     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__ */ vue.defineComponent({
+  const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormContainer"
     },
@@ -3188,8 +3223,19 @@
       });
       const disabled = vue.computed(() => props.disabled || filterFunction(mForm, props.config.disabled, props));
       const text = vue.computed(() => filterFunction(mForm, props.config.text, props));
-      const tooltip = vue.computed(() => filterFunction(mForm, props.config.tooltip, props));
-      const extra = vue.computed(() => filterFunction(mForm, props.config.extra, props));
+      const tooltip = vue.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 = vue.computed(() => getRules(mForm, props.config.rules, props));
       const type = vue.computed(() => {
         let { type: type2 } = props.config;
@@ -3205,6 +3251,22 @@
         }
         return value;
       });
+      const fieldsProps = vue.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 = vue.computed(() => ({
+        prop: itemProp.value,
+        labelWidth: itemLabelWidth.value,
+        labelPosition: props.config.labelPosition,
+        rules: rule.value,
+        extra: filterFunction(mForm, props.config.extra, props)
+      }));
       const itemLabelWidth = vue.computed(() => props.config.labelWidth ?? props.labelWidth);
       vue.watchEffect(() => {
         expand.value = props.expandMore;
@@ -3231,7 +3293,8 @@
             values: mForm?.initValues,
             formValue: mForm?.values,
             prop: itemProp.value,
-            config: props.config
+            config: props.config,
+            getFormValue: (prop) => utils.getValueByKeyPath(prop, mForm?.values || props.model)
           });
         }
         if (filter === "number") {
@@ -3259,27 +3322,50 @@
         }
         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 = vue.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 ? vue.readonly(mForm.initValues) : null,
+              formValue: createModelProxy(mForm?.values || {}, setFormValue),
               prop: itemProp.value,
               config: props.config,
               changeRecords: newChangeRecords,
-              setModel: (key2, value2) => {
-                utils.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) => utils.getValueByKeyPath(prop, mForm?.values || props.model)
             }) ?? value;
           }
           value = trimHandler(trim, value) ?? value;
@@ -3288,15 +3374,8 @@
         }
         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({
@@ -3312,95 +3391,65 @@
       return (_ctx, _cache) => {
         const _component_m_fields_hidden = vue.resolveComponent("m-fields-hidden");
         const _component_Container = vue.resolveComponent("Container", true);
-        return __props.config ? (vue.openBlock(), vue.createElementBlock("div", {
-          key: 0,
+        return vue.openBlock(), vue.createElementBlock("div", {
           "data-tmagic-id": __props.config.id,
           "data-tmagic-form-item-prop": itemProp.value,
-          style: vue.normalizeStyle(__props.config.tip ? "display: flex;align-items: baseline;" : ""),
-          class: vue.normalizeClass(`m-form-container m-container-${type.value || ""} ${__props.config.className || ""}`)
+          class: vue.normalizeClass(`m-form-container m-container-${type.value || ""} ${__props.config.className || ""}${__props.config.tip ? " has-tip" : ""}`),
+          style: vue.normalizeStyle(__props.config.style)
         }, [
-          type.value === "hidden" ? (vue.openBlock(), vue.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 ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tagName.value), {
-            key: key(__props.config),
-            size: __props.size,
+          type.value === "hidden" ? (vue.openBlock(), vue.createBlock(_component_m_fields_hidden, vue.mergeProps({ key: 0 }, fieldsProps.value, { model: __props.model }), null, 16, ["model"])) : items.value && !text.value && type.value && display$1.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tagName.value), vue.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 ? (vue.openBlock(), vue.createElementBlock(
+          }), null, 16, ["model", "last-values", "is-compare", "step-active", "expand-more", "label-width", "style"])) : type.value && display$1.value && !showDiff.value ? (vue.openBlock(), vue.createElementBlock(
             vue.Fragment,
             { key: 2 },
             [
-              vue.createVNode(vue.unref(design.TMagicFormItem), {
-                style: vue.normalizeStyle(__props.config.tip ? "flex: 1" : ""),
-                class: vue.normalizeClass({ "tmagic-form-hidden": `${itemLabelWidth.value}` === "0" || !text.value }),
-                prop: itemProp.value,
-                "label-width": itemLabelWidth.value,
-                "label-position": __props.config.labelPosition,
-                rules: rule.value
-              }, {
+              vue.createVNode(vue.unref(design.TMagicFormItem), vue.mergeProps(formItemProps.value, {
+                class: { "tmagic-form-hidden": `${itemLabelWidth.value}` === "0" || !text.value }
+              }), {
                 label: vue.withCtx(() => [
                   vue.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: vue.withCtx(() => [
-                  tooltip.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), { key: 0 }, {
+                  tooltip.value.text ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
+                    key: 0,
+                    placement: tooltip.value.placement
+                  }, {
                     content: vue.withCtx(() => [
-                      vue.createElementVNode("div", { innerHTML: tooltip.value }, null, 8, _hoisted_3$5)
+                      vue.createElementVNode("div", {
+                        innerHTML: tooltip.value.text
+                      }, null, 8, _hoisted_3$6)
                     ]),
                     default: vue.withCtx(() => [
-                      (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tagName.value), {
-                        key: key(__props.config),
-                        size: __props.size,
+                      (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tagName.value), vue.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 */
-                  })) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tagName.value), {
-                    key: key(__props.config),
-                    size: __props.size,
+                  }, 8, ["placement"])) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tagName.value), vue.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" ? (vue.openBlock(), vue.createElementBlock("div", {
-                    key: 2,
-                    innerHTML: extra.value,
-                    class: "m-form-tip"
-                  }, null, 8, _hoisted_4$3)) : vue.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 ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
                 key: 0,
                 placement: "left"
@@ -3408,7 +3457,7 @@
                 content: vue.withCtx(() => [
                   vue.createElementVNode("div", {
                     innerHTML: __props.config.tip
-                  }, null, 8, _hoisted_5$3)
+                  }, null, 8, _hoisted_4$3)
                 ]),
                 default: vue.withCtx(() => [
                   vue.createVNode(vue.unref(design.TMagicIcon), { style: { "line-height": "40px", "margin-left": "5px" } }, {
@@ -3431,58 +3480,41 @@
             [
               vue.createCommentVNode(" 对比 "),
               vue.createCommentVNode(" 上次内容 "),
-              vue.createVNode(vue.unref(design.TMagicFormItem), {
-                style: vue.normalizeStyle([__props.config.tip ? "flex: 1" : "", { "background": "#f7dadd" }]),
-                class: vue.normalizeClass({ "tmagic-form-hidden": `${itemLabelWidth.value}` === "0" || !text.value }),
-                prop: itemProp.value,
-                "label-width": itemLabelWidth.value,
-                "label-position": __props.config.labelPosition,
-                rules: rule.value
-              }, {
+              vue.createVNode(vue.unref(design.TMagicFormItem), vue.mergeProps(formItemProps.value, {
+                class: { "tmagic-form-hidden": `${itemLabelWidth.value}` === "0" || !text.value, "show-diff": true }
+              }), {
                 label: vue.withCtx(() => [
                   vue.createElementVNode("span", {
                     innerHTML: type.value === "checkbox" ? "" : text.value,
                     title: __props.config.labelTitle
-                  }, null, 8, _hoisted_6$2)
+                  }, null, 8, _hoisted_5$3)
                 ]),
                 default: vue.withCtx(() => [
-                  tooltip.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), { key: 0 }, {
+                  tooltip.value.text ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
+                    key: 0,
+                    placement: tooltip.value.placement
+                  }, {
                     content: vue.withCtx(() => [
-                      vue.createElementVNode("div", { innerHTML: tooltip.value }, null, 8, _hoisted_7$1)
+                      vue.createElementVNode("div", {
+                        innerHTML: tooltip.value.text
+                      }, null, 8, _hoisted_6$1)
                     ]),
                     default: vue.withCtx(() => [
-                      (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tagName.value), {
-                        key: key(__props.config),
-                        size: __props.size,
+                      (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tagName.value), vue.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 */
-                  })) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tagName.value), {
-                    key: key(__props.config),
-                    size: __props.size,
+                  }, 8, ["placement"])) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tagName.value), vue.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 ? (vue.openBlock(), vue.createElementBlock("div", {
-                    key: 2,
-                    innerHTML: extra.value,
-                    class: "m-form-tip"
-                  }, null, 8, _hoisted_8$1)) : vue.createCommentVNode("v-if", true)
+                  }), null, 16, ["model"]))
                 ]),
                 _: 1
                 /* STABLE */
-              }, 8, ["style", "class", "prop", "label-width", "label-position", "rules"]),
+              }, 16, ["class"]),
               __props.config.tip ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
                 key: 0,
                 placement: "left"
@@ -3490,7 +3522,7 @@
                 content: vue.withCtx(() => [
                   vue.createElementVNode("div", {
                     innerHTML: __props.config.tip
-                  }, null, 8, _hoisted_9)
+                  }, null, 8, _hoisted_7$1)
                 ]),
                 default: vue.withCtx(() => [
                   vue.createVNode(vue.unref(design.TMagicIcon), { style: { "line-height": "40px", "margin-left": "5px" } }, {
@@ -3505,58 +3537,42 @@
                 /* STABLE */
               })) : vue.createCommentVNode("v-if", true),
               vue.createCommentVNode(" 当前内容 "),
-              vue.createVNode(vue.unref(design.TMagicFormItem), {
-                style: vue.normalizeStyle([__props.config.tip ? "flex: 1" : "", { "background": "#def7da" }]),
-                class: vue.normalizeClass({ "tmagic-form-hidden": `${itemLabelWidth.value}` === "0" || !text.value }),
-                prop: itemProp.value,
-                "label-width": itemLabelWidth.value,
-                "label-position": __props.config.labelPosition,
-                rules: rule.value
-              }, {
+              vue.createVNode(vue.unref(design.TMagicFormItem), vue.mergeProps(formItemProps.value, {
+                style: __props.config.tip ? "flex: 1" : "",
+                class: { "tmagic-form-hidden": `${itemLabelWidth.value}` === "0" || !text.value, "show-diff": true }
+              }), {
                 label: vue.withCtx(() => [
                   vue.createElementVNode("span", {
                     innerHTML: type.value === "checkbox" ? "" : text.value,
                     title: __props.config.labelTitle
-                  }, null, 8, _hoisted_10)
+                  }, null, 8, _hoisted_8$1)
                 ]),
                 default: vue.withCtx(() => [
-                  tooltip.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), { key: 0 }, {
+                  tooltip.value.text ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
+                    key: 0,
+                    placement: tooltip.value.placement
+                  }, {
                     content: vue.withCtx(() => [
-                      vue.createElementVNode("div", { innerHTML: tooltip.value }, null, 8, _hoisted_11)
+                      vue.createElementVNode("div", {
+                        innerHTML: tooltip.value.text
+                      }, null, 8, _hoisted_9)
                     ]),
                     default: vue.withCtx(() => [
-                      (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tagName.value), {
-                        key: key(__props.config),
-                        size: __props.size,
+                      (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tagName.value), vue.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 */
-                  })) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tagName.value), {
-                    key: key(__props.config),
-                    size: __props.size,
+                  }, 8, ["placement"])) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tagName.value), vue.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 ? (vue.openBlock(), vue.createElementBlock("div", {
-                    key: 2,
-                    innerHTML: extra.value,
-                    class: "m-form-tip"
-                  }, null, 8, _hoisted_12)) : vue.createCommentVNode("v-if", true)
+                  }), null, 16, ["model"]))
                 ]),
                 _: 1
                 /* STABLE */
-              }, 8, ["style", "class", "prop", "label-width", "label-position", "rules"]),
+              }, 16, ["style", "class"]),
               __props.config.tip ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
                 key: 1,
                 placement: "left"
@@ -3564,7 +3580,7 @@
                 content: vue.withCtx(() => [
                   vue.createElementVNode("div", {
                     innerHTML: __props.config.tip
-                  }, null, 8, _hoisted_13)
+                  }, null, 8, _hoisted_10)
                 ]),
                 default: vue.withCtx(() => [
                   vue.createVNode(vue.unref(design.TMagicIcon), { style: { "line-height": "40px", "margin-left": "5px" } }, {
@@ -3612,7 +3628,7 @@
             64
             /* STABLE_FRAGMENT */
           )) : vue.createCommentVNode("v-if", true),
-          __props.config.expand && type.value !== "fieldset" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_14, [
+          __props.config.expand && type.value !== "fieldset" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11, [
             vue.createVNode(vue.unref(design.TMagicButton), {
               type: "primary",
               size: "small",
@@ -3631,23 +3647,23 @@
               /* STABLE */
             })
           ])) : vue.createCommentVNode("v-if", true)
-        ], 14, _hoisted_1$e)) : vue.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__ */ vue.defineComponent({
+  const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormFieldset"
     },
@@ -3669,9 +3685,27 @@
       const emit = __emit;
       const mForm = vue.inject("mForm");
       const name = vue.computed(() => props.config.name || "");
+      const checkboxName = vue.computed(() => {
+        if (typeof props.config.checkbox === "object" && typeof props.config.checkbox.name === "string") {
+          return props.config.checkbox.name;
+        }
+        return "value";
+      });
+      const checkboxTrueValue = vue.computed(() => {
+        if (typeof props.config.checkbox === "object" && typeof props.config.checkbox.trueValue !== "undefined") {
+          return props.config.checkbox.trueValue;
+        }
+        return 1;
+      });
+      const checkboxFalseValue = vue.computed(() => {
+        if (typeof props.config.checkbox === "object" && typeof props.config.checkbox.falseValue !== "undefined") {
+          return props.config.checkbox.falseValue;
+        }
+        return 0;
+      });
       const show = vue.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;
       });
@@ -3682,7 +3716,7 @@
         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;
@@ -3699,19 +3733,16 @@
             name.value && __props.config.checkbox ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(!show.value ? "div" : "legend"), { key: 0 }, {
               default: vue.withCtx(() => [
                 vue.createVNode(vue.unref(design.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: vue.withCtx(() => [
                     vue.createElementVNode("span", {
                       innerHTML: __props.config.legend
-                    }, null, 8, _hoisted_1$d),
+                    }, null, 8, _hoisted_1$c),
                     __props.config.extra ? (vue.openBlock(), vue.createElementBlock("span", {
                       key: 0,
                       innerHTML: __props.config.extra,
@@ -3720,11 +3751,11 @@
                   ]),
                   _: 1
                   /* STABLE */
-                }, 8, ["modelValue", "prop"])
+                }, 8, ["model-value", "prop", "true-value", "false-value"])
               ]),
               _: 1
               /* STABLE */
-            })) : (vue.openBlock(), vue.createElementBlock("legend", _hoisted_3$4, [
+            })) : (vue.openBlock(), vue.createElementBlock("legend", _hoisted_3$5, [
               vue.createElementVNode("span", {
                 innerHTML: __props.config.legend
               }, null, 8, _hoisted_4$2),
@@ -3734,13 +3765,13 @@
                 class: "m-form-tip"
               }, null, 8, _hoisted_5$2)) : vue.createCommentVNode("v-if", true)
             ])),
-            __props.config.schematic && show.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$1, [
+            __props.config.schematic && show.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
               vue.createElementVNode("div", _hoisted_7, [
                 (vue.openBlock(true), vue.createElementBlock(
                   vue.Fragment,
                   null,
                   vue.renderList(__props.config.items, (item, index) => {
-                    return vue.openBlock(), vue.createBlock(_sfc_main$x, {
+                    return vue.openBlock(), vue.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,
@@ -3752,7 +3783,7 @@
                       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
@@ -3767,7 +3798,7 @@
               vue.Fragment,
               { key: 3 },
               vue.renderList(__props.config.items, (item, index) => {
-                return vue.openBlock(), vue.createBlock(_sfc_main$x, {
+                return vue.openBlock(), vue.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,
@@ -3779,7 +3810,7 @@
                   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
@@ -3793,10 +3824,73 @@
     }
   });
 
-  const _hoisted_1$c = { class: "m-fields-group-list-item" };
+  const _sfc_main$y = /* @__PURE__ */ vue.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 = vue.inject("mForm");
+      const gap = vue.computed(() => props.config.gap || "16px");
+      const changeHandler = (v, eventData) => {
+        emit("change", props.model, eventData);
+      };
+      const onAddDiffCount = () => emit("addDiffCount");
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock(
+          "div",
+          {
+            class: "m-form-flex-layout",
+            style: vue.normalizeStyle({ display: "flex", flexWrap: "wrap", gap: gap.value })
+          },
+          [
+            (vue.openBlock(true), vue.createElementBlock(
+              vue.Fragment,
+              null,
+              vue.renderList(__props.config.items, (item, index) => {
+                return vue.openBlock(), vue.createBlock(_sfc_main$A, {
+                  key: item[vue.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__ */ vue.defineComponent({
+  const _hoisted_3$4 = ["innerHTML"];
+  const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormGroupListItem"
     },
@@ -3874,7 +3968,7 @@
         emit("swap-item", props.index, moveSpecifyLocationIndex.value - 1);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
           vue.createElementVNode("div", null, [
             vue.createVNode(vue.unref(design.TMagicButton), {
               link: "",
@@ -4063,9 +4157,9 @@
               key: 3,
               innerHTML: itemExtra.value,
               class: "m-form-tip"
-            }, null, 8, _hoisted_3$3)) : vue.createCommentVNode("v-if", true)
+            }, null, 8, _hoisted_3$4)) : vue.createCommentVNode("v-if", true)
           ]),
-          expand.value ? (vue.openBlock(), vue.createBlock(_sfc_main$x, {
+          expand.value ? (vue.openBlock(), vue.createBlock(_sfc_main$A, {
             key: 0,
             config: rowConfig.value,
             model: __props.model,
@@ -4083,13 +4177,13 @@
     }
   });
 
-  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__ */ vue.defineComponent({
+  const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormGroupList"
     },
@@ -4179,13 +4273,13 @@
       const onAddDiffCount = () => emit("addDiffCount");
       const getLastValues = (item, index) => item?.[index] || {};
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
           __props.config.extra ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 0,
             innerHTML: __props.config.extra,
             style: { "color": "rgba(0, 0, 0, 0.45)" }
           }, null, 8, _hoisted_2$4)) : vue.createCommentVNode("v-if", true),
-          !__props.model[__props.name] || !__props.model[__props.name].length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$2, [..._cache[1] || (_cache[1] = [
+          !__props.model[__props.name] || !__props.model[__props.name].length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$3, [..._cache[1] || (_cache[1] = [
             vue.createElementVNode(
               "span",
               { class: "el-table__empty-text" },
@@ -4197,7 +4291,7 @@
             vue.Fragment,
             { key: 2 },
             vue.renderList(__props.model[__props.name], (item, index) => {
-              return vue.openBlock(), vue.createBlock(_sfc_main$v, {
+              return vue.openBlock(), vue.createBlock(_sfc_main$x, {
                 key: index,
                 model: item,
                 lastValues: getLastValues(__props.lastValues[__props.name], index),
@@ -4257,15 +4351,15 @@
     }
   });
 
-  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__ */ vue.defineComponent({
+  const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormPanel"
     },
@@ -4300,7 +4394,7 @@
           "body-style": { display: expand.value ? "block" : "none" }
         }, {
           header: vue.withCtx(() => [
-            vue.createElementVNode("div", _hoisted_1$a, [
+            vue.createElementVNode("div", _hoisted_1$9, [
               vue.createVNode(vue.unref(design.TMagicButton), {
                 style: { "padding": "0" },
                 link: "",
@@ -4324,13 +4418,13 @@
           default: vue.withCtx(() => [
             vue.createElementVNode("div", null, [
               vue.renderSlot(_ctx.$slots, "default"),
-              __props.config.schematic ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$1, [
+              __props.config.schematic ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$2, [
                 vue.createElementVNode("div", _hoisted_4$1, [
                   (vue.openBlock(true), vue.createElementBlock(
                     vue.Fragment,
                     null,
                     vue.renderList(items.value, (item, index) => {
-                      return vue.openBlock(), vue.createBlock(_sfc_main$x, {
+                      return vue.openBlock(), vue.createBlock(_sfc_main$A, {
                         key: item[vue.unref(mForm)?.keyProp || "__key"] ?? index,
                         config: item,
                         model: __props.name ? __props.model[__props.name] : __props.model,
@@ -4356,7 +4450,7 @@
                 vue.Fragment,
                 { key: 1 },
                 vue.renderList(items.value, (item, index) => {
-                  return vue.openBlock(), vue.createBlock(_sfc_main$x, {
+                  return vue.openBlock(), vue.createBlock(_sfc_main$A, {
                     key: item[vue.unref(mForm)?.keyProp || "__key"] ?? index,
                     config: item,
                     model: __props.name ? __props.model[__props.name] : __props.model,
@@ -4382,7 +4476,7 @@
     }
   });
 
-  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormCol"
     },
@@ -4410,7 +4504,7 @@
       return (_ctx, _cache) => {
         return vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(design.TMagicCol), { span: __props.span }, {
           default: vue.withCtx(() => [
-            vue.createVNode(_sfc_main$x, {
+            vue.createVNode(_sfc_main$A, {
               model: __props.model,
               lastValues: __props.lastValues,
               "is-compare": __props.isCompare,
@@ -4433,7 +4527,7 @@
     }
   });
 
-  const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormRow"
     },
@@ -4466,7 +4560,7 @@
               vue.Fragment,
               null,
               vue.renderList(__props.config.items, (col, index) => {
-                return vue.openBlock(), vue.createBlock(_sfc_main$s, {
+                return vue.openBlock(), vue.createBlock(_sfc_main$u, {
                   key: col[vue.unref(mForm)?.keyProp || "__key"] ?? index,
                   span: col.span || __props.config.span || 24 / __props.config.items.length,
                   config: col,
@@ -4493,7 +4587,7 @@
     }
   });
 
-  const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormStep"
     },
@@ -4568,7 +4662,7 @@
                         vue.Fragment,
                         null,
                         [
-                          item ? vue.withDirectives((vue.openBlock(), vue.createBlock(_sfc_main$x, {
+                          item ? vue.withDirectives((vue.openBlock(), vue.createBlock(_sfc_main$A, {
                             key: item[vue.unref(mForm)?.keyProp || "__key"],
                             config: item,
                             model: step.name ? __props.model[step.name] : __props.model,
@@ -4604,1044 +4698,325 @@
     }
   });
 
-  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__ */ vue.defineComponent({
+  const _sfc_main$r = /* @__PURE__ */ vue.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 = vue.inject("mForm");
-      const { nextZIndex } = design.useZIndex();
-      const tMagicTable = vue.ref();
-      const excelBtn = vue.ref();
-      const mTable = vue.ref();
-      const pagesize = vue.ref(10);
-      const pagecontext = vue.ref(0);
-      const updateKey = vue.ref(1);
-      const isFullscreen = vue.ref(false);
-      const modelName = vue.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 = vue.computed(() => getDataByPage(props.model[modelName.value]));
-      const data = vue.computed(() => props.config.pagination ? pageinationData.value : props.model[modelName.value]);
-      const lastData = vue.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 = design.getDesignConfig("components")?.tabPane;
+      const tabsComponent = design.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) {
-          design.tMagicMessage.error(`最多新增配置不能超过${props.config.max}条`);
-          return;
+      const props = __props;
+      const emit = __emit;
+      const mForm = vue.inject("mForm");
+      const activeTabName = vue.ref(getActive(mForm, props));
+      const diffCount = vue.ref({});
+      const tabs = vue.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);
+      vue.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
-          });
+          tabClick(mForm, item, props);
         }
-        if (props.sortKey && length) {
-          inputs[props.sortKey] = props.model[modelName.value][length - 1][props.sortKey] - 1;
-        }
-        props.model[modelName.value].push(inputs);
-        emit("change", props.model[modelName.value], {
-          changeRecords: [
-            {
-              propPath: `${props.prop}.${props.model[modelName.value].length - 1}`,
-              value: inputs
-            }
-          ]
-        });
       };
-      vue.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]);
-        }
-      });
-      vue.watchEffect(() => {
-        if (props.config.dropSort) {
-          rowDrop();
-        }
-      });
-      const addable = vue.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 = vue.computed(() => {
-        if (typeof props.config.selection === "function") {
-          return props.config.selection(mForm, { model: props.model[modelName.value] });
-        }
-        return props.config.selection;
-      });
-      const importable = vue.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;
-      };
-      const removeHandler = (index) => {
-        if (props.disabled) return;
-        props.model[modelName.value].splice(index, 1);
-        emit("change", props.model[modelName.value]);
-      };
-      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 });
-        }
+        emit("change", props.model);
+        mForm?.$emit("field-change", props.prop, props.model[props.name]);
       };
-      const toggleRowSelection = (row, selected) => {
-        tMagicTable.value?.toggleRowSelection.call(tMagicTable.value, row, selected);
+      const changeHandler = (v, eventData) => {
+        emit("change", props.model, eventData);
       };
-      const makeConfig = (config, row) => {
-        const newConfig = cloneDeep(config);
-        if (typeof config.itemsFunction === "function") {
-          newConfig.items = config.itemsFunction(row);
+      const onAddDiffCount = (tabIndex) => {
+        if (!diffCount.value[tabIndex]) {
+          diffCount.value[tabIndex] = 1;
+        } else {
+          diffCount.value[tabIndex] += 1;
         }
-        delete newConfig.display;
-        return newConfig;
+        emit("addDiffCount");
       };
-      const upHandler = (index) => {
-        if (timer) {
-          clearTimeout(timer);
-        }
-        timer = setTimeout(() => {
-          swapArray(index, index - 1);
-          timer = void 0;
-        }, 300);
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(tabsComponent)?.component || "el-tabs"), vue.mergeProps(
+          {
+            modelValue: activeTabName.value,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => activeTabName.value = $event)
+          },
+          vue.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: vue.withCtx(() => [
+            (vue.openBlock(true), vue.createElementBlock(
+              vue.Fragment,
+              null,
+              vue.renderList(tabs.value, (tab, tabIndex) => {
+                return vue.openBlock(), vue.createBlock(
+                  vue.resolveDynamicComponent(vue.unref(tabPaneComponent)?.component || "el-tab-pane"),
+                  vue.mergeProps(
+                    {
+                      key: tab[vue.unref(mForm)?.keyProp || "__key"] ?? tabIndex
+                    },
+                    { ref_for: true },
+                    vue.unref(tabPaneComponent)?.props({ name: filter(tab.status) || tabIndex.toString(), lazy: tab.lazy || false }) || {}
+                  ),
+                  {
+                    label: vue.withCtx(() => [
+                      vue.createElementVNode("span", null, [
+                        vue.createTextVNode(
+                          vue.toDisplayString(filter(tab.title)),
+                          1
+                          /* TEXT */
+                        ),
+                        vue.createVNode(vue.unref(design.TMagicBadge), {
+                          hidden: !diffCount.value[tabIndex],
+                          value: diffCount.value[tabIndex],
+                          class: "diff-count-badge"
+                        }, null, 8, ["hidden", "value"])
+                      ])
+                    ]),
+                    default: vue.withCtx(() => [
+                      (vue.openBlock(true), vue.createElementBlock(
+                        vue.Fragment,
+                        null,
+                        vue.renderList(tabItems(tab), (item) => {
+                          return vue.openBlock(), vue.createBlock(_sfc_main$A, {
+                            key: item[vue.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": vue.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 topHandler = (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 = vue.inject("mForm");
+    const instance = vue.getCurrentInstance();
+    vue.watch(
+      () => instance?.proxy,
+      (vm) => {
+        if (vm) {
+          mForm?.setField(prop, vm);
+        } else {
+          mForm?.deleteField(prop);
         }
-        const moveNum = index;
-        for (let i = 0; i < moveNum; i++) {
-          swapArray(index, index - 1);
-          index -= 1;
+      },
+      {
+        immediate: true
+      }
+    );
+  };
+
+  const _sfc_main$q = /* @__PURE__ */ vue.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 = vue.inject("mForm");
+      useAddField(props.prop);
+      const requestFunc = getConfig("request");
+      const tMagicCascader = vue.ref();
+      const options = vue.ref([]);
+      const remoteData = vue.ref(null);
+      const checkStrictly = vue.computed(() => filterFunction(mForm, props.config.checkStrictly, props));
+      const valueSeparator = vue.computed(() => filterFunction(mForm, props.config.valueSeparator, props));
+      const value = vue.computed(() => {
+        if (typeof props.model[props.name] === "string" && valueSeparator.value) {
+          return props.model[props.name].split(valueSeparator.value);
         }
-      };
-      const downHandler = (index) => {
-        if (timer) {
-          clearTimeout(timer);
+        return props.model[props.name];
+      });
+      const updateModelValueHandler = (value2) => {
+        let result = value2;
+        if (valueSeparator.value) {
+          result = value2.join(valueSeparator.value);
+        }
+        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 utils.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 } = vue.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 vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
-          (vue.openBlock(), vue.createBlock(vue.Teleport, {
-            to: "body",
-            disabled: !isFullscreen.value
-          }, [
-            vue.createElementVNode(
-              "div",
-              {
-                ref_key: "mTable",
-                ref: mTable,
-                class: vue.normalizeClass(["m-fields-table", { "m-fields-table-item-extra": __props.config.itemExtra }])
-              },
-              [
-                __props.config.extra ? (vue.openBlock(), vue.createElementBlock("span", {
-                  key: 0,
-                  style: { "color": "rgba(0, 0, 0, 0.45)" },
-                  innerHTML: __props.config.extra
-                }, null, 8, _hoisted_2$2)) : vue.createCommentVNode("v-if", true),
-                vue.createVNode(vue.unref(design.TMagicTooltip), {
-                  content: "拖拽可排序",
-                  placement: "left-start",
-                  disabled: __props.config.dropSort !== true
-                }, {
-                  default: vue.withCtx(() => [
-                    __props.model[modelName.value] ? (vue.openBlock(), vue.createBlock(vue.unref(design.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: vue.withCtx(() => [
-                        __props.config.itemExtra && !__props.config.dropSort ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTableColumn), {
-                          key: 0,
-                          fixed: "left",
-                          width: "30",
-                          type: "expand"
-                        }, {
-                          default: vue.withCtx((scope) => [
-                            vue.createElementVNode("span", {
-                              innerHTML: itemExtra(__props.config.itemExtra, scope.$index),
-                              class: "m-form-tip"
-                            }, null, 8, _hoisted_3)
-                          ]),
-                          _: 1
-                          /* STABLE */
-                        })) : vue.createCommentVNode("v-if", true),
-                        vue.createVNode(vue.unref(design.TMagicTableColumn), {
-                          label: "操作",
-                          width: __props.config.operateColWidth || 100,
-                          align: "center",
-                          fixed: __props.config.fixed === false ? void 0 : "left"
-                        }, {
-                          default: vue.withCtx((scope) => [
-                            vue.renderSlot(_ctx.$slots, "operateCol", { scope }),
-                            vue.withDirectives(vue.createVNode(vue.unref(design.TMagicButton), {
-                              size: "small",
-                              type: "danger",
-                              link: "",
-                              title: "删除",
-                              icon: vue.unref(iconsVue.Delete),
-                              onClick: ($event) => removeHandler(scope.$index + 1 + pagecontext.value * pagesize.value - 1)
-                            }, null, 8, ["icon", "onClick"]), [
-                              [vue.vShow, showDelete(scope.$index + 1 + pagecontext.value * pagesize.value - 1)]
-                            ]),
-                            copyable(scope.$index + 1 + pagecontext.value * pagesize.value - 1) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
-                              key: 0,
-                              link: "",
-                              size: "small",
-                              type: "primary",
-                              title: "复制",
-                              icon: vue.unref(iconsVue.DocumentCopy),
-                              disabled: __props.disabled,
-                              onClick: ($event) => copyHandler(scope.$index + 1 + pagecontext.value * pagesize.value - 1)
-                            }, null, 8, ["icon", "disabled", "onClick"])) : vue.createCommentVNode("v-if", true)
-                          ]),
-                          _: 3
-                          /* FORWARDED */
-                        }, 8, ["width", "fixed"]),
-                        __props.sort && __props.model[modelName.value] && __props.model[modelName.value].length > 1 ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTableColumn), {
-                          key: 1,
-                          label: "排序",
-                          width: "60"
-                        }, {
-                          default: vue.withCtx((scope) => [
-                            scope.$index + 1 + pagecontext.value * pagesize.value - 1 !== 0 ? (vue.openBlock(), vue.createBlock(
-                              vue.unref(design.TMagicTooltip),
-                              {
-                                key: 0,
-                                content: "点击上移，双击置顶",
-                                placement: "top"
-                              },
-                              {
-                                default: vue.withCtx(() => [
-                                  vue.createVNode(vue.unref(design.TMagicButton), {
-                                    plain: "",
-                                    size: "small",
-                                    type: "primary",
-                                    icon: vue.unref(iconsVue.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 */
-                            )) : vue.createCommentVNode("v-if", true),
-                            scope.$index + 1 + pagecontext.value * pagesize.value - 1 !== __props.model[modelName.value].length - 1 ? (vue.openBlock(), vue.createBlock(
-                              vue.unref(design.TMagicTooltip),
-                              {
-                                key: 1,
-                                content: "点击下移，双击置底",
-                                placement: "top"
-                              },
-                              {
-                                default: vue.withCtx(() => [
-                                  vue.createVNode(vue.unref(design.TMagicButton), {
-                                    plain: "",
-                                    size: "small",
-                                    type: "primary",
-                                    icon: vue.unref(iconsVue.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 */
-                            )) : vue.createCommentVNode("v-if", true)
-                          ]),
-                          _: 1
-                          /* STABLE */
-                        })) : vue.createCommentVNode("v-if", true),
-                        selection.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTableColumn), {
-                          key: 2,
-                          align: "center",
-                          "header-align": "center",
-                          type: "selection",
-                          width: "45"
-                        })) : vue.createCommentVNode("v-if", true),
-                        __props.showIndex && __props.config.showIndex ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTableColumn), {
-                          key: 3,
-                          width: "60",
-                          label: "序号"
-                        }, {
-                          default: vue.withCtx((scope) => [
-                            vue.createTextVNode(
-                              vue.toDisplayString(scope.$index + 1 + pagecontext.value * pagesize.value),
-                              1
-                              /* TEXT */
-                            )
-                          ]),
-                          _: 1
-                          /* STABLE */
-                        })) : vue.createCommentVNode("v-if", true),
-                        (vue.openBlock(true), vue.createElementBlock(
-                          vue.Fragment,
-                          null,
-                          vue.renderList(__props.config.items, (column, index) => {
-                            return vue.openBlock(), vue.createElementBlock(
-                              vue.Fragment,
-                              null,
-                              [
-                                column.type !== "hidden" && display$1(column.display) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTableColumn), {
-                                  prop: column.name,
-                                  width: column.width,
-                                  label: column.label,
-                                  sortable: column.sortable,
-                                  "sort-orders": ["ascending", "descending"],
-                                  key: column[vue.unref(mForm)?.keyProp || "__key"] ?? index,
-                                  "class-name": __props.config.dropSort === true ? "el-table__column--dropable" : ""
-                                }, {
-                                  default: vue.withCtx((scope) => [
-                                    scope.$index > -1 ? (vue.openBlock(), vue.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"])) : vue.createCommentVNode("v-if", true)
-                                  ]),
-                                  _: 2
-                                  /* DYNAMIC */
-                                }, 1032, ["prop", "width", "label", "sortable", "class-name"])) : vue.createCommentVNode("v-if", true)
-                              ],
-                              64
-                              /* STABLE_FRAGMENT */
-                            );
-                          }),
-                          256
-                          /* UNKEYED_FRAGMENT */
-                        ))
-                      ]),
-                      _: 3
-                      /* FORWARDED */
-                    }, 8, ["row-key", "data", "lastData", "border", "max-height"])) : vue.createCommentVNode("v-if", true)
-                  ]),
-                  _: 3
-                  /* FORWARDED */
-                }, 8, ["disabled"]),
-                vue.renderSlot(_ctx.$slots, "default"),
-                vue.createElementVNode("div", _hoisted_4, [
-                  addable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
-                    key: 0,
-                    size: "small",
-                    type: "primary",
-                    disabled: __props.disabled,
-                    plain: "",
-                    onClick: _cache[1] || (_cache[1] = ($event) => newHandler())
-                  }, {
-                    default: vue.withCtx(() => [..._cache[3] || (_cache[3] = [
-                      vue.createTextVNode(
-                        "新增一行",
-                        -1
-                        /* CACHED */
-                      )
-                    ])]),
-                    _: 1
-                    /* STABLE */
-                  }, 8, ["disabled"])) : vue.createCommentVNode("v-if", true),
-                  vue.createElementVNode("div", _hoisted_5, [
-                    __props.enableToggleMode && __props.config.enableToggleMode !== false && !isFullscreen.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
-                      key: 0,
-                      icon: vue.unref(iconsVue.Grid),
-                      size: "small",
-                      type: "primary",
-                      onClick: toggleMode
-                    }, {
-                      default: vue.withCtx(() => [..._cache[4] || (_cache[4] = [
-                        vue.createTextVNode(
-                          "展开配置",
-                          -1
-                          /* CACHED */
-                        )
-                      ])]),
-                      _: 1
-                      /* STABLE */
-                    }, 8, ["icon"])) : vue.createCommentVNode("v-if", true),
-                    __props.config.enableFullscreen !== false ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
-                      key: 1,
-                      icon: vue.unref(iconsVue.FullScreen),
-                      size: "small",
-                      type: "primary",
-                      onClick: toggleFullscreen
-                    }, {
-                      default: vue.withCtx(() => [
-                        vue.createTextVNode(
-                          vue.toDisplayString(isFullscreen.value ? "退出全屏" : "全屏编辑"),
-                          1
-                          /* TEXT */
-                        )
-                      ]),
-                      _: 1
-                      /* STABLE */
-                    }, 8, ["icon"])) : vue.createCommentVNode("v-if", true),
-                    importable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicUpload), {
-                      key: 2,
-                      style: { "display": "inline-block" },
-                      ref_key: "excelBtn",
-                      ref: excelBtn,
-                      action: "/noop",
-                      disabled: __props.disabled,
-                      "on-change": excelHandler,
-                      "auto-upload": false
-                    }, {
-                      default: vue.withCtx(() => [
-                        vue.createVNode(vue.unref(design.TMagicButton), {
-                          size: "small",
-                          type: "success",
-                          disabled: __props.disabled,
-                          plain: ""
-                        }, {
-                          default: vue.withCtx(() => [..._cache[5] || (_cache[5] = [
-                            vue.createTextVNode(
-                              "导入EXCEL",
-                              -1
-                              /* CACHED */
-                            )
-                          ])]),
-                          _: 1
-                          /* STABLE */
-                        }, 8, ["disabled"])
-                      ]),
-                      _: 1
-                      /* STABLE */
-                    }, 8, ["disabled"])) : vue.createCommentVNode("v-if", true),
-                    importable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
-                      key: 3,
-                      size: "small",
-                      type: "warning",
-                      disabled: __props.disabled,
-                      plain: "",
-                      onClick: _cache[2] || (_cache[2] = ($event) => clearHandler())
-                    }, {
-                      default: vue.withCtx(() => [..._cache[6] || (_cache[6] = [
-                        vue.createTextVNode(
-                          "清空",
-                          -1
-                          /* CACHED */
-                        )
-                      ])]),
-                      _: 1
-                      /* STABLE */
-                    }, 8, ["disabled"])) : vue.createCommentVNode("v-if", true)
-                  ])
-                ]),
-                __props.config.pagination ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
-                  vue.createVNode(vue.unref(design.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"])
-                ])) : vue.createCommentVNode("v-if", true)
-              ],
-              2
-              /* CLASS */
-            )
-          ], 8, ["disabled"]))
-        ]);
-      };
-    }
-  });
-
-  const _sfc_main$o = /* @__PURE__ */ vue.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 = design.getDesignConfig("components")?.tabPane;
-      const tabsComponent = design.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 = vue.inject("mForm");
-      const activeTabName = vue.ref(getActive(mForm, props));
-      const diffCount = vue.ref({});
-      const tabs = vue.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);
-      vue.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 vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(tabsComponent)?.component || "el-tabs"), vue.mergeProps(
-          {
-            modelValue: activeTabName.value,
-            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => activeTabName.value = $event)
-          },
-          vue.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: vue.withCtx(() => [
-            (vue.openBlock(true), vue.createElementBlock(
-              vue.Fragment,
-              null,
-              vue.renderList(tabs.value, (tab, tabIndex) => {
-                return vue.openBlock(), vue.createBlock(
-                  vue.resolveDynamicComponent(vue.unref(tabPaneComponent)?.component || "el-tab-pane"),
-                  vue.mergeProps(
-                    {
-                      key: tab[vue.unref(mForm)?.keyProp || "__key"] ?? tabIndex
-                    },
-                    { ref_for: true },
-                    vue.unref(tabPaneComponent)?.props({ name: filter(tab.status) || tabIndex.toString(), lazy: tab.lazy || false }) || {}
-                  ),
-                  {
-                    label: vue.withCtx(() => [
-                      vue.createElementVNode("span", null, [
-                        vue.createTextVNode(
-                          vue.toDisplayString(filter(tab.title)),
-                          1
-                          /* TEXT */
-                        ),
-                        vue.createVNode(vue.unref(design.TMagicBadge), {
-                          hidden: !diffCount.value[tabIndex],
-                          value: diffCount.value[tabIndex],
-                          class: "diff-count-badge"
-                        }, null, 8, ["hidden", "value"])
-                      ])
-                    ]),
-                    default: vue.withCtx(() => [
-                      (vue.openBlock(true), vue.createElementBlock(
-                        vue.Fragment,
-                        null,
-                        vue.renderList(tabItems(tab), (item) => {
-                          return vue.openBlock(), vue.createBlock(_sfc_main$x, {
-                            key: item[vue.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": vue.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 = vue.inject("mForm");
-    const instance = vue.getCurrentInstance();
-    vue.watch(
-      () => instance?.proxy,
-      (vm) => {
-        if (vm) {
-          mForm?.setField(prop, vm);
-        } else {
-          mForm?.deleteField(prop);
-        }
-      },
-      {
-        immediate: true
-      }
-    );
-  };
-
-  const _sfc_main$n = /* @__PURE__ */ vue.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 = vue.inject("mForm");
-      useAddField(props.prop);
-      const requestFunc = getConfig("request");
-      const tMagicCascader = vue.ref();
-      const options = vue.ref([]);
-      const remoteData = vue.ref(null);
-      const checkStrictly = vue.computed(() => filterFunction(mForm, props.config.checkStrictly, props));
-      const valueSeparator = vue.computed(() => filterFunction(mForm, props.config.valueSeparator, props));
-      const value = vue.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) {
@@ -5667,12 +5042,10 @@
         if (!tMagicCascader.value) return;
         tMagicCascader.value.setQuery("");
         tMagicCascader.value.setPreviousQuery(null);
-        emit("change", props.model[props.name]);
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(vue.unref(design.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%" },
@@ -5688,13 +5061,14 @@
             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__ */ vue.defineComponent({
+  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormCheckbox"
     },
@@ -5740,29 +5114,33 @@
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(vue.unref(design.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: vue.withCtx(() => [
-            vue.createTextVNode(
-              vue.toDisplayString(__props.config.text),
-              1
-              /* TEXT */
-            )
-          ]),
-          _: 1
-          /* STABLE */
-        }, 8, ["modelValue", "size", "trueValue", "falseValue", "disabled"]);
+          "onUpdate:modelValue": changeHandler
+        }, vue.createSlots({
+          _: 2
+          /* DYNAMIC */
+        }, [
+          !__props.config.useLabel ? {
+            name: "default",
+            fn: vue.withCtx(() => [
+              vue.createTextVNode(
+                vue.toDisplayString(__props.config.text),
+                1
+                /* TEXT */
+              )
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["model-value", "size", "trueValue", "falseValue", "disabled"]);
       };
     }
   });
 
-  const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormCheckGroup"
     },
@@ -5798,11 +5176,10 @@
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(vue.unref(design.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: vue.withCtx(() => [
             (vue.openBlock(true), vue.createElementBlock(
@@ -5831,12 +5208,12 @@
           ]),
           _: 1
           /* STABLE */
-        }, 8, ["modelValue", "size", "disabled"]);
+        }, 8, ["model-value", "size", "disabled"]);
       };
     }
   });
 
-  const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormColorPicker"
     },
@@ -5860,18 +5237,17 @@
       const changeHandler = (value) => emit("change", value);
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(vue.unref(design.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__ */ vue.defineComponent({
+  const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormDate"
     },
@@ -5898,21 +5274,20 @@
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(vue.unref(design.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__ */ vue.defineComponent({
+  const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormDateRange"
     },
@@ -5993,8 +5368,7 @@
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDatePicker), {
-          modelValue: value.value,
-          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => value.value = $event),
+          "model-value": value.value,
           type: "datetimerange",
           "range-separator": "-",
           "start-placeholder": "开始日期",
@@ -6006,13 +5380,13 @@
           "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__ */ vue.defineComponent({
+  const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormDateTime"
     },
@@ -6050,8 +5424,7 @@
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(vue.unref(design.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,
@@ -6060,14 +5433,14 @@
           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__ */ vue.defineComponent({
+  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormDisplay"
     },
@@ -6102,7 +5475,7 @@
   });
 
   const _hoisted_1$7 = { class: "m-fields-dynamic-field" };
-  const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormDynamicField"
     },
@@ -6203,7 +5576,7 @@
     }
   });
 
-  const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormHidden"
     },
@@ -6240,7 +5613,7 @@
     }
   });
 
-  const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MForm"
     },
@@ -6267,7 +5640,7 @@
     setup(__props, { expose: __expose, emit: __emit }) {
       const props = __props;
       const emit = __emit;
-      const tMagicForm = vue.ref();
+      const tMagicFormRef = vue.useTemplateRef("tMagicForm");
       const initialized = vue.ref(false);
       const values = vue.ref({});
       const lastValuesProcessed = vue.ref({});
@@ -6344,7 +5717,17 @@
       );
       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);
+              }
+              utils.setValueByKeyPath(record.propPath, record.value, values.value);
+            }
+          }
         }
         emit("change", values.value, eventData);
       };
@@ -6353,6 +5736,31 @@
           e.preventDefault();
         }
       };
+      const getTextByName = (name, config = props.config) => {
+        if (!name || !Array.isArray(config)) return void 0;
+        const nameParts = name.split(".");
+        const findInConfig = (configs, parts) => {
+          if (parts.length === 0) return void 0;
+          const [currentPart, ...remainingParts] = parts;
+          for (const item of configs) {
+            if (item.name === currentPart) {
+              if (remainingParts.length === 0) {
+                return typeof item.text === "string" ? item.text : void 0;
+              }
+              if (item.items && Array.isArray(item.items)) {
+                const result = findInConfig(item.items, remainingParts);
+                if (result !== void 0) return result;
+              }
+            }
+            if (item.items && Array.isArray(item.items)) {
+              const result = findInConfig(item.items, parts);
+              if (result !== void 0) return result;
+            }
+          }
+          return void 0;
+        };
+        return findInConfig(config, nameParts);
+      };
       __expose({
         values,
         lastValuesProcessed,
@@ -6361,32 +5769,36 @@
         changeRecords,
         changeHandler,
         resetForm: () => {
-          tMagicForm.value?.resetFields();
+          tMagicFormRef.value?.resetFields();
           changeRecords.value = [];
         },
         submitForm: async (native) => {
           try {
-            await tMagicForm.value?.validate();
+            const result = await tMagicFormRef.value?.validate();
+            if (result !== true) {
+              throw result;
+            }
+            changeRecords.value = [];
             return native ? values.value : cloneDeep(vue.toRaw(values.value));
           } catch (invalidFields) {
             emit("error", invalidFields);
             const error = [];
-            Object.entries(invalidFields).forEach(([, ValidateError]) => {
+            Object.entries(invalidFields).forEach(([prop, ValidateError]) => {
               ValidateError.forEach(({ field, message }) => {
-                if (field && message) error.push(`${field} -> ${message}`);
-                if (field && !message) error.push(`${field} -> 出现错误`);
-                if (!field && message) error.push(`${message}`);
+                const name = field || prop;
+                const text = getTextByName(name, props.config) || name;
+                error.push(`${text} -> ${message}`);
               });
             });
             throw new Error(error.join("<br>"));
           }
-        }
+        },
+        getTextByName
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicForm), {
           class: "m-form",
-          ref_key: "tMagicForm",
-          ref: tMagicForm,
+          ref: "tMagicForm",
           model: values.value,
           "label-width": __props.labelWidth,
           style: vue.normalizeStyle(`height: ${__props.height}`),
@@ -6399,7 +5811,7 @@
               vue.Fragment,
               { key: 0 },
               vue.renderList(__props.config, (item, index) => {
-                return vue.openBlock(), vue.createBlock(_sfc_main$x, {
+                return vue.openBlock(), vue.createBlock(_sfc_main$A, {
                   disabled: __props.disabled,
                   key: item[__props.keyProp] ?? index,
                   config: item,
@@ -6424,7 +5836,7 @@
   });
 
   const _hoisted_1$6 = { style: { "min-height": "1px" } };
-  const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormDialog"
     },
@@ -6625,7 +6037,7 @@
                 style: vue.normalizeStyle(`max-height: ${bodyHeight.value}; overflow-y: auto; overflow-x: hidden;`)
               },
               [
-                vue.createVNode(_sfc_main$d, {
+                vue.createVNode(_sfc_main$g, {
                   modelValue: stepActive.value,
                   "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => stepActive.value = $event),
                   ref_key: "form",
@@ -6655,11 +6067,11 @@
   });
 
   const _hoisted_1$5 = ["href"];
-  const _hoisted_2$1 = {
+  const _hoisted_2$2 = {
     key: 2,
     class: "m-fields-link"
   };
-  const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormLink"
     },
@@ -6737,7 +6149,7 @@
           vue.toDisplayString(displayText.value),
           5
           /* TEXT, STYLE */
-        )) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$1, [
+        )) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$2, [
           vue.createVNode(vue.unref(design.TMagicButton), {
             link: "",
             type: "primary",
@@ -6753,7 +6165,7 @@
             _: 1
             /* STABLE */
           }),
-          vue.createVNode(_sfc_main$c, {
+          vue.createVNode(_sfc_main$f, {
             ref_key: "editor",
             ref: editor,
             title: __props.config.formTitle || "编辑扩展配置",
@@ -6769,7 +6181,7 @@
     }
   });
 
-  const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormNumber"
     },
@@ -6801,8 +6213,7 @@
       return (_ctx, _cache) => {
         return __props.model ? (vue.openBlock(), vue.createBlock(vue.unref(design.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,
@@ -6811,15 +6222,15 @@
           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"])) : vue.createCommentVNode("v-if", true);
+        }, null, 8, ["model-value", "size", "max", "min", "step", "placeholder", "disabled"])) : vue.createCommentVNode("v-if", true);
       };
     }
   });
 
   const _hoisted_1$4 = { class: "m-fields-number-range" };
-  const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormNumberRange"
     },
@@ -6852,14 +6263,13 @@
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
           vue.createVNode(vue.unref(design.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] = vue.createElementVNode(
+            "onUpdate:modelValue": minChangeHandler
+          }, null, 8, ["model-value", "clearable", "size", "disabled"]),
+          _cache[0] || (_cache[0] = vue.createElementVNode(
             "span",
             { class: "split-tag" },
             "-",
@@ -6867,20 +6277,18 @@
             /* CACHED */
           )),
           vue.createVNode(vue.unref(design.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__ */ vue.defineComponent({
+  const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormRadioGroup"
     },
@@ -6901,12 +6309,8 @@
       const props = __props;
       const itemComponent = vue.computed(() => props.config.childType === "button" ? design.TMagicRadioButton : design.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 = vue.computed(() => {
@@ -6921,8 +6325,7 @@
       return (_ctx, _cache) => {
         return __props.model ? (vue.openBlock(), vue.createBlock(vue.unref(design.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
         }, {
@@ -6934,11 +6337,11 @@
                 return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(itemComponent.value), {
                   value: option.value,
                   key: `${option.value}`,
-                  onClick: vue.withModifiers(($event) => clickHandler(option.value), ["prevent"])
+                  onClick: ($event) => clickHandler(option.value)
                 }, {
                   default: vue.withCtx(() => [
-                    option.tooltip ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
-                      key: 0,
+                    vue.createVNode(vue.unref(design.TMagicTooltip), {
+                      disabled: !Boolean(option.tooltip),
                       placement: "top-start",
                       content: option.tooltip
                     }, {
@@ -6965,25 +6368,7 @@
                       ]),
                       _: 2
                       /* DYNAMIC */
-                    }, 1032, ["content"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
-                      option.icon ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicIcon), {
-                        key: 0,
-                        size: iconSize.value
-                      }, {
-                        default: vue.withCtx(() => [
-                          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(option.icon)))
-                        ]),
-                        _: 2
-                        /* DYNAMIC */
-                      }, 1032, ["size"])) : vue.createCommentVNode("v-if", true),
-                      vue.createElementVNode(
-                        "span",
-                        null,
-                        vue.toDisplayString(option.text),
-                        1
-                        /* TEXT */
-                      )
-                    ]))
+                    }, 1032, ["disabled", "content"])
                   ]),
                   _: 2
                   /* DYNAMIC */
@@ -6995,13 +6380,13 @@
           ]),
           _: 1
           /* STABLE */
-        }, 8, ["modelValue", "size", "disabled"])) : vue.createCommentVNode("v-if", true);
+        }, 8, ["model-value", "size", "disabled"])) : vue.createCommentVNode("v-if", true);
       };
     }
   });
 
-  const _hoisted_1$2 = { key: 2 };
-  const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$3 = { key: 2 };
+  const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormSelect"
     },
@@ -7328,8 +6713,7 @@
         const _directive_loading = vue.resolveDirective("loading");
         return __props.model ? vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(design.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,
@@ -7344,7 +6728,7 @@
           "allow-create": __props.config.allowCreate,
           disabled: __props.disabled,
           "remote-method": __props.config.remote && remoteMethod,
-          onChange: changeHandler,
+          "onUpdate:modelValue": changeHandler,
           onVisibleChange: visibleHandler
         }, {
           default: vue.withCtx(() => [
@@ -7436,7 +6820,7 @@
             )),
             moreLoadingVisible.value ? vue.withDirectives((vue.openBlock(), vue.createElementBlock(
               "div",
-              _hoisted_1$2,
+              _hoisted_1$3,
               null,
               512
               /* NEED_PATCH */
@@ -7446,14 +6830,14 @@
           ]),
           _: 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]
         ]) : vue.createCommentVNode("v-if", true);
       };
     }
   });
 
-  const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormSwitch"
     },
@@ -7499,21 +6883,21 @@
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(vue.unref(design.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__ */ vue.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__ */ vue.defineComponent({
     ...{
       name: "MFormText"
     },
@@ -7538,16 +6922,25 @@
       const appendConfig = vue.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;
       });
@@ -7652,23 +7045,35 @@
         instanceRef.value = void 0;
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
           vue.createVNode(vue.unref(design.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))
           }, vue.createSlots({
             _: 2
             /* DYNAMIC */
           }, [
+            __props.config.prepend ? {
+              name: "prepend",
+              fn: vue.withCtx(() => [
+                vue.createElementVNode(
+                  "span",
+                  null,
+                  vue.toDisplayString(__props.config.prepend),
+                  1
+                  /* TEXT */
+                )
+              ]),
+              key: "0"
+            } : void 0,
             appendConfig.value ? {
               name: "append",
               fn: vue.withCtx(() => [
@@ -7687,11 +7092,17 @@
                   ]),
                   _: 1
                   /* STABLE */
-                }, 8, ["size"])) : vue.createCommentVNode("v-if", true)
+                }, 8, ["size"])) : (vue.openBlock(), vue.createElementBlock(
+                  "span",
+                  _hoisted_2$1,
+                  vue.toDisplayString(appendConfig.value.text),
+                  1
+                  /* TEXT */
+                ))
               ]),
-              key: "0"
+              key: "1"
             } : void 0
-          ]), 1032, ["modelValue", "size", "placeholder", "disabled"]),
+          ]), 1032, ["model-value", "size", "placeholder", "disabled"]),
           (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
             popoverVisible.value ? (vue.openBlock(), vue.createElementBlock(
               "div",
@@ -7702,20 +7113,20 @@
                 ref: popoverEl
               },
               [
-                _cache[5] || (_cache[5] = vue.createElementVNode(
+                _cache[4] || (_cache[4] = vue.createElementVNode(
                   "div",
                   { class: "m-form-validate__warning" },
                   "输入内容前后有空格，是否移除空格？",
                   -1
                   /* CACHED */
                 )),
-                vue.createElementVNode("div", _hoisted_2, [
+                vue.createElementVNode("div", _hoisted_3$1, [
                   vue.createVNode(vue.unref(design.TMagicButton), {
                     link: "",
                     size: "small",
-                    onClick: _cache[2] || (_cache[2] = ($event) => popoverVisible.value = false)
+                    onClick: _cache[1] || (_cache[1] = ($event) => popoverVisible.value = false)
                   }, {
-                    default: vue.withCtx(() => [..._cache[3] || (_cache[3] = [
+                    default: vue.withCtx(() => [..._cache[2] || (_cache[2] = [
                       vue.createTextVNode(
                         "保持原样",
                         -1
@@ -7730,7 +7141,7 @@
                     size: "small",
                     onClick: confirmTrimHandler
                   }, {
-                    default: vue.withCtx(() => [..._cache[4] || (_cache[4] = [
+                    default: vue.withCtx(() => [..._cache[3] || (_cache[3] = [
                       vue.createTextVNode(
                         "移除空格",
                         -1
@@ -7741,7 +7152,7 @@
                     /* STABLE */
                   })
                 ]),
-                _cache[6] || (_cache[6] = vue.createElementVNode(
+                _cache[5] || (_cache[5] = vue.createElementVNode(
                   "span",
                   {
                     class: "tmagic-form-text-popper-arrow",
@@ -7761,162 +7172,990 @@
     }
   });
 
+  const _sfc_main$7 = /* @__PURE__ */ vue.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 = vue.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 vue.openBlock(), vue.createBlock(vue.unref(design.TMagicInput), {
+          "model-value": __props.model[__props.name],
+          type: "textarea",
+          size: __props.size,
+          clearable: "",
+          placeholder: __props.config.placeholder,
+          disabled: __props.disabled,
+          rows: __props.config.rows,
+          "onUpdate:modelValue": changeHandler,
+          onInput: inputHandler
+        }, null, 8, ["model-value", "size", "placeholder", "disabled", "rows"]);
+      };
+    }
+  });
+
+  const _sfc_main$6 = /* @__PURE__ */ vue.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 vue.openBlock(), vue.createBlock(vue.unref(design.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__ */ vue.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 = vue.ref([]);
+      if (props.model !== void 0 && names?.length) {
+        vue.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 vue.openBlock(), vue.createBlock(vue.unref(design.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 = vue.inject("mForm");
+    const addable = vue.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) {
+        design.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 = vue.ref(false);
+    const mTableEl = vue.useTemplateRef("mTable");
+    const { nextZIndex } = design.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 = vue.inject("mForm");
+    const modelName = vue.computed(() => props.name || props.config.name || "");
+    const importable = vue.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 = vue.useTemplateRef("excelBtn");
+    const excelHandler = async (file) => {
+      if (!file?.raw) {
+        return false;
+      }
+      if (!globalThis.XLSX) {
+        await utils.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 = vue.ref(10);
+    const currentPage = vue.ref(0);
+    const paginationData = vue.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 = vue.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 = vue.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);
+        }
+      });
+    };
+    vue.watchEffect(() => {
+      if (props.config.dropSort) {
+        rowDrop();
+      }
+    });
+  };
+
   const _sfc_main$4 = /* @__PURE__ */ vue.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 = vue.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 vue.openBlock(), vue.createBlock(vue.unref(design.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 vue.openBlock(), vue.createElementBlock(
+          vue.Fragment,
+          null,
+          [
+            vue.renderSlot(_ctx.$slots, "operateCol", {
+              scope: { $index: __props.index, row: __props.row }
+            }),
+            vue.withDirectives(vue.createVNode(vue.unref(design.TMagicButton), {
+              size: "small",
+              type: "danger",
+              link: "",
+              title: "删除",
+              icon: vue.unref(iconsVue.Delete),
+              onClick: _cache[0] || (_cache[0] = ($event) => removeHandler(__props.index + 1 + __props.currentPage * __props.pageSize - 1))
+            }, null, 8, ["icon"]), [
+              [vue.vShow, showDelete(__props.index + 1 + __props.currentPage * __props.pageSize - 1)]
+            ]),
+            copyable(__props.index + 1 + __props.currentPage * __props.pageSize - 1) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+              key: 0,
+              link: "",
+              size: "small",
+              type: "primary",
+              title: "复制",
+              icon: vue.unref(iconsVue.DocumentCopy),
+              disabled: __props.disabled,
+              onClick: _cache[1] || (_cache[1] = ($event) => copyHandler(__props.index + 1 + __props.currentPage * __props.pageSize - 1))
+            }, null, 8, ["icon", "disabled"])) : vue.createCommentVNode("v-if", true)
+          ],
+          64
+          /* STABLE_FRAGMENT */
+        );
       };
     }
   });
 
   const _sfc_main$3 = /* @__PURE__ */ vue.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 vue.openBlock(), vue.createBlock(vue.unref(design.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 vue.openBlock(), vue.createElementBlock(
+          vue.Fragment,
+          null,
+          [
+            __props.index + 1 + __props.currentPage * __props.pageSize - 1 !== 0 ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
+              key: 0,
+              content: "点击上移，双击置顶",
+              placement: "top"
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(vue.unref(design.TMagicButton), {
+                  plain: "",
+                  size: "small",
+                  type: "primary",
+                  icon: vue.unref(iconsVue.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 */
+            })) : vue.createCommentVNode("v-if", true),
+            __props.index + 1 + __props.currentPage * __props.pageSize - 1 !== __props.model[__props.name].length - 1 ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
+              key: 1,
+              content: "点击下移，双击置底",
+              placement: "top"
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(vue.unref(design.TMagicButton), {
+                  plain: "",
+                  size: "small",
+                  type: "primary",
+                  icon: vue.unref(iconsVue.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 */
+            })) : vue.createCommentVNode("v-if", true)
+          ],
+          64
+          /* STABLE_FRAGMENT */
+        );
       };
     }
   });
 
+  const useTableColumns = (props, emit, currentPage, pageSize, modelName) => {
+    const mForm = vue.inject("mForm");
+    const display$1 = (fuc) => display(mForm, fuc, props);
+    const lastData = vue.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 = vue.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 = vue.computed(() => {
+      const columns2 = [];
+      if (props.config.itemExtra && !props.config.dropSort) {
+        columns2.push({
+          props: {
+            fixed: "left",
+            width: 30,
+            type: "expand"
+          },
+          cell: ({ $index }) => vue.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 }) => vue.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 }) => vue.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 }) => vue.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 }) => vue.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__ */ vue.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 = vue.ref([]);
-      if (props.model !== void 0 && names?.length) {
-        vue.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 = vue.computed(() => props.name || props.config.name || "");
+      const tMagicTableRef = vue.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 = vue.ref(1);
+      const data = vue.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 vue.openBlock(), vue.createBlock(vue.unref(design.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 vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
+          (vue.openBlock(), vue.createBlock(vue.Teleport, {
+            to: "body",
+            disabled: !vue.unref(isFullscreen)
+          }, [
+            vue.createElementVNode(
+              "div",
+              {
+                ref: "mTable",
+                class: vue.normalizeClass(["m-fields-table", { "m-fields-table-item-extra": __props.config.itemExtra }])
+              },
+              [
+                __props.config.extra ? (vue.openBlock(), vue.createElementBlock("span", {
+                  key: 0,
+                  style: { "color": "rgba(0, 0, 0, 0.45)" },
+                  innerHTML: __props.config.extra
+                }, null, 8, _hoisted_2)) : vue.createCommentVNode("v-if", true),
+                vue.createVNode(vue.unref(design.TMagicTooltip), {
+                  content: "拖拽可排序",
+                  placement: "left-start",
+                  disabled: __props.config.dropSort !== true
+                }, {
+                  default: vue.withCtx(() => [
+                    __props.model[modelName.value] ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTable), {
+                      ref: "tMagicTable",
+                      style: { "width": "100%" },
+                      "show-header": "",
+                      "row-key": __props.config.rowKey || "id",
+                      columns: vue.unref(columns),
+                      data: data.value,
+                      border: __props.config.border,
+                      "max-height": __props.config.maxHeight,
+                      "default-expand-all": true,
+                      key: updateKey.value,
+                      onSelect: vue.unref(selectHandle),
+                      onSortChange: sortChangeHandler
+                    }, null, 8, ["row-key", "columns", "data", "border", "max-height", "onSelect"])) : vue.createCommentVNode("v-if", true)
+                  ]),
+                  _: 1
+                  /* STABLE */
+                }, 8, ["disabled"]),
+                vue.renderSlot(_ctx.$slots, "default"),
+                vue.createElementVNode("div", _hoisted_3, [
+                  vue.unref(addable) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+                    key: 0,
+                    size: "small",
+                    type: "primary",
+                    disabled: __props.disabled,
+                    plain: "",
+                    onClick: _cache[0] || (_cache[0] = ($event) => vue.unref(newHandler)())
+                  }, {
+                    default: vue.withCtx(() => [..._cache[1] || (_cache[1] = [
+                      vue.createTextVNode(
+                        "新增一行",
+                        -1
+                        /* CACHED */
+                      )
+                    ])]),
+                    _: 1
+                    /* STABLE */
+                  }, 8, ["disabled"])) : vue.createCommentVNode("v-if", true),
+                  vue.createElementVNode("div", _hoisted_4, [
+                    __props.enableToggleMode && __props.config.enableToggleMode !== false && !vue.unref(isFullscreen) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+                      key: 0,
+                      icon: vue.unref(iconsVue.Grid),
+                      size: "small",
+                      type: "primary",
+                      onClick: toggleMode
+                    }, {
+                      default: vue.withCtx(() => [..._cache[2] || (_cache[2] = [
+                        vue.createTextVNode(
+                          "展开配置",
+                          -1
+                          /* CACHED */
+                        )
+                      ])]),
+                      _: 1
+                      /* STABLE */
+                    }, 8, ["icon"])) : vue.createCommentVNode("v-if", true),
+                    __props.config.enableFullscreen !== false ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+                      key: 1,
+                      icon: vue.unref(iconsVue.FullScreen),
+                      size: "small",
+                      type: "primary",
+                      onClick: vue.unref(toggleFullscreen)
+                    }, {
+                      default: vue.withCtx(() => [
+                        vue.createTextVNode(
+                          vue.toDisplayString(vue.unref(isFullscreen) ? "退出全屏" : "全屏编辑"),
+                          1
+                          /* TEXT */
+                        )
+                      ]),
+                      _: 1
+                      /* STABLE */
+                    }, 8, ["icon", "onClick"])) : vue.createCommentVNode("v-if", true),
+                    vue.unref(importable) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicUpload), {
+                      key: 2,
+                      style: { "display": "inline-block" },
+                      ref: "excelBtn",
+                      action: "/noop",
+                      disabled: __props.disabled,
+                      "on-change": vue.unref(excelHandler),
+                      "auto-upload": false
+                    }, {
+                      default: vue.withCtx(() => [
+                        vue.createVNode(vue.unref(design.TMagicButton), {
+                          size: "small",
+                          type: "success",
+                          disabled: __props.disabled,
+                          plain: ""
+                        }, {
+                          default: vue.withCtx(() => [..._cache[3] || (_cache[3] = [
+                            vue.createTextVNode(
+                              "导入EXCEL",
+                              -1
+                              /* CACHED */
+                            )
+                          ])]),
+                          _: 1
+                          /* STABLE */
+                        }, 8, ["disabled"])
+                      ]),
+                      _: 1
+                      /* STABLE */
+                    }, 8, ["disabled", "on-change"])) : vue.createCommentVNode("v-if", true),
+                    vue.unref(importable) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+                      key: 3,
+                      size: "small",
+                      type: "warning",
+                      disabled: __props.disabled,
+                      plain: "",
+                      onClick: vue.unref(clearHandler)
+                    }, {
+                      default: vue.withCtx(() => [..._cache[4] || (_cache[4] = [
+                        vue.createTextVNode(
+                          "清空",
+                          -1
+                          /* CACHED */
+                        )
+                      ])]),
+                      _: 1
+                      /* STABLE */
+                    }, 8, ["disabled", "onClick"])) : vue.createCommentVNode("v-if", true)
+                  ])
+                ]),
+                __props.config.pagination ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
+                  vue.createVNode(vue.unref(design.TMagicPagination), {
+                    layout: "total, sizes, prev, pager, next, jumper",
+                    "hide-on-single-page": __props.model[modelName.value].length < vue.unref(pageSize),
+                    "current-page": vue.unref(currentPage) + 1,
+                    "page-sizes": [vue.unref(pageSize), 60, 120, 300],
+                    "page-size": vue.unref(pageSize),
+                    total: __props.model[modelName.value].length,
+                    onSizeChange: vue.unref(handleSizeChange),
+                    onCurrentChange: vue.unref(handleCurrentChange)
+                  }, null, 8, ["hide-on-single-page", "current-page", "page-sizes", "page-size", "total", "onSizeChange", "onCurrentChange"])
+                ])) : vue.createCommentVNode("v-if", true)
+              ],
+              2
+              /* CLASS */
+            )
+          ], 8, ["disabled"]))
+        ]);
       };
     }
   });
@@ -8083,7 +8322,7 @@
                 class: "m-drawer-body"
               },
               [
-                vue.createVNode(_sfc_main$d, {
+                vue.createVNode(_sfc_main$g, {
                   ref_key: "form",
                   ref: form,
                   size: __props.size,
@@ -8191,7 +8430,7 @@
               [
                 vue.createVNode(vue.unref(design.TMagicScrollbar), null, {
                   default: vue.withCtx(() => [
-                    vue.createVNode(_sfc_main$d, {
+                    vue.createVNode(_sfc_main$g, {
                       ref_key: "form",
                       ref: form,
                       size: __props.size,
@@ -8264,79 +8503,84 @@
       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);
     }
   };
 
-  exports.MCascader = _sfc_main$n;
-  exports.MCheckbox = _sfc_main$m;
-  exports.MCheckboxGroup = _sfc_main$l;
-  exports.MColorPicker = _sfc_main$k;
-  exports.MContainer = _sfc_main$x;
-  exports.MDate = _sfc_main$j;
-  exports.MDateTime = _sfc_main$h;
-  exports.MDaterange = _sfc_main$i;
-  exports.MDisplay = _sfc_main$g;
-  exports.MDynamicField = _sfc_main$f;
-  exports.MFieldset = _sfc_main$w;
-  exports.MForm = _sfc_main$d;
+  exports.MCascader = _sfc_main$q;
+  exports.MCheckbox = _sfc_main$p;
+  exports.MCheckboxGroup = _sfc_main$o;
+  exports.MColorPicker = _sfc_main$n;
+  exports.MContainer = _sfc_main$A;
+  exports.MDate = _sfc_main$m;
+  exports.MDateTime = _sfc_main$k;
+  exports.MDaterange = _sfc_main$l;
+  exports.MDisplay = _sfc_main$j;
+  exports.MDynamicField = _sfc_main$i;
+  exports.MFieldset = _sfc_main$z;
+  exports.MFlexLayout = _sfc_main$y;
+  exports.MForm = _sfc_main$g;
   exports.MFormBox = _sfc_main;
-  exports.MFormDialog = _sfc_main$c;
+  exports.MFormDialog = _sfc_main$f;
   exports.MFormDrawer = _sfc_main$1;
-  exports.MGroupList = _sfc_main$u;
-  exports.MHidden = _sfc_main$e;
-  exports.MLink = _sfc_main$b;
-  exports.MNumber = _sfc_main$a;
-  exports.MNumberRange = _sfc_main$9;
-  exports.MPanel = _sfc_main$t;
-  exports.MRadioGroup = _sfc_main$8;
-  exports.MRow = _sfc_main$r;
-  exports.MSelect = _sfc_main$7;
-  exports.MSwitch = _sfc_main$6;
-  exports.MTable = _sfc_main$p;
-  exports.MTabs = _sfc_main$o;
-  exports.MText = _sfc_main$5;
-  exports.MTextarea = _sfc_main$4;
-  exports.MTime = _sfc_main$3;
-  exports.MTimerange = _sfc_main$2;
+  exports.MGroupList = _sfc_main$w;
+  exports.MHidden = _sfc_main$h;
+  exports.MLink = _sfc_main$e;
+  exports.MNumber = _sfc_main$d;
+  exports.MNumberRange = _sfc_main$c;
+  exports.MPanel = _sfc_main$v;
+  exports.MRadioGroup = _sfc_main$b;
+  exports.MRow = _sfc_main$t;
+  exports.MSelect = _sfc_main$a;
+  exports.MSwitch = _sfc_main$9;
+  exports.MTable = _sfc_main$2;
+  exports.MTabs = _sfc_main$r;
+  exports.MText = _sfc_main$8;
+  exports.MTextarea = _sfc_main$7;
+  exports.MTime = _sfc_main$6;
+  exports.MTimerange = _sfc_main$5;
   exports.createForm = createForm;
   exports.createValues = createValues;
   exports.datetimeFormatter = datetimeFormatter;
   exports.default = index;
   exports.display = display;
   exports.filterFunction = filterFunction;
+  exports.getDataByPage = getDataByPage;
   exports.getRules = getRules;
   exports.initValue = initValue;
+  exports.sortArray = sortArray;
+  exports.sortChange = sortChange;
   exports.useAddField = useAddField;
   Object.keys(formSchema).forEach(k => {
     if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {