@tmagic/form 1.2.0-beta.8 → 1.2.0

package/dist/{tmagic-form.umd.js → tmagic-form.umd.cjs}

@@ -20,9 +20,9 @@
   const isMultipleValue = (type) => typeof type === "string" && ["checkbox-group", "checkboxGroup", "table", "cascader", "group-list", "groupList"].includes(type);
   const initItemsValue = (mForm, value, initValue2, { items, name, extensible }) => {
     if (Array.isArray(initValue2[name])) {
-      value[name] = initValue2[name].map((v, index) => init(mForm, items, v, value[name]?.[index]));
+      value[name] = initValue2[name].map((v, index) => createValues(mForm, items, v, value[name]?.[index]));
     } else {
-      value[name] = init(mForm, items, initValue2[name], value[name]);
+      value[name] = createValues(mForm, items, initValue2[name], value[name]);
       if (extensible) {
         value[name] = Object.assign({}, initValue2[name], value[name]);
       }
@@ -67,12 +67,12 @@
       return names.forEach((n) => value[n] = initValue2[n] || "");
     }
     if (!name) {
-      return init(mForm, items, initValue2, value);
+      return createValues(mForm, items, initValue2, value);
     }
     setValue(mForm, value, initValue2, item);
     return value;
   };
-  const init = function(mForm, config = [], initValue2 = {}, value = {}) {
+  const createValues = function(mForm, config = [], initValue2 = {}, value = {}) {
     if (Array.isArray(config)) {
       config.forEach((item) => {
         initValueItem(mForm, item, initValue2, value);
@@ -115,6 +115,9 @@
     });
   };
   const display = function(mForm, config, props) {
+    if (config === "expand") {
+      return config;
+    }
     if (typeof config === "function") {
       return filterFunction(mForm, config, props);
     }
@@ -156,7 +159,7 @@
   const initValue = async (mForm, { initValues, config }) => {
     if (!Array.isArray(config))
       throw new Error("config\u5E94\u8BE5\u4E3A\u6570\u7EC4");
-    let valuesTmp = init(mForm, config, vue.toRaw(initValues), {});
+    let valuesTmp = createValues(mForm, config, vue.toRaw(initValues), {});
     const [firstForm] = config;
     if (firstForm && typeof firstForm.onInitValue === "function") {
       valuesTmp = await firstForm.onInitValue(mForm, {
@@ -175,12 +178,16 @@
     key: 4,
     style: { "text-align": "center" }
   };
+  const __default__$v = vue.defineComponent({
+    name: "MFormContainer"
+  });
   const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
-    __name: "Container",
+    ...__default__$v,
     props: {
       model: null,
       config: null,
       prop: { default: "" },
+      disabled: { type: Boolean },
       labelWidth: null,
       expandMore: { type: Boolean, default: false },
       stepActive: null,
@@ -211,7 +218,7 @@
           return component;
         return "m-fields-text";
       });
-      const disabled = vue.computed(() => filterFunction(mForm, props.config.disabled, props));
+      const disabled = vue.computed(() => props.disabled || filterFunction(mForm, props.config.disabled, props));
       const tooltip = vue.computed(() => filterFunction(mForm, props.config.tooltip, props));
       const extra = vue.computed(() => filterFunction(mForm, props.config.extra, props));
       const rule = vue.computed(() => getRules(mForm, props.config.rules, props));
@@ -227,10 +234,11 @@
         return type2?.replace(/([A-Z])/g, "-$1").toLowerCase() || (items.value ? "" : "text");
       });
       const display$1 = vue.computed(() => {
-        if (props.config.display === "expand") {
+        const value = display(mForm, props.config.display, props);
+        if (value === "expand") {
           return expand.value;
         }
-        return display(mForm, props.config.display, props);
+        return value;
       });
       const itemLabelWidth = vue.computed(() => props.config.labelWidth || props.labelWidth);
       vue.watchEffect(() => {
@@ -307,13 +315,14 @@
             size: __props.size,
             model: __props.model,
             config: __props.config,
+            disabled: vue.unref(disabled),
             name: vue.unref(name),
             prop: vue.unref(itemProp),
             "step-active": __props.stepActive,
             "expand-more": expand.value,
             "label-width": vue.unref(itemLabelWidth),
             onChange: onChangeHandler
-          }, null, 40, ["size", "model", "config", "name", "prop", "step-active", "expand-more", "label-width"])) : vue.unref(type) && vue.unref(display$1) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+          }, null, 40, ["size", "model", "config", "disabled", "name", "prop", "step-active", "expand-more", "label-width"])) : vue.unref(type) && vue.unref(display$1) ? (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({ hidden: `${vue.unref(itemLabelWidth)}` === "0" || !__props.config.text }),
@@ -388,16 +397,20 @@
                 model: vue.unref(name) || vue.unref(name) === 0 ? __props.model[vue.unref(name)] : __props.model,
                 config: item,
                 size: __props.size,
+                disabled: vue.unref(disabled),
                 "step-active": __props.stepActive,
                 "expand-more": expand.value,
                 "label-width": vue.unref(itemLabelWidth),
                 prop: vue.unref(itemProp),
                 onChange: onChangeHandler
-              }, null, 8, ["model", "config", "size", "step-active", "expand-more", "label-width", "prop"]);
+              }, null, 8, ["model", "config", "size", "disabled", "step-active", "expand-more", "label-width", "prop"]);
             }), 128)) : vue.createCommentVNode("", true)
           ], 64)) : vue.createCommentVNode("", true),
           __props.config.expand && vue.unref(type) !== "fieldset" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$4, [
             vue.createVNode(vue.unref(design.TMagicButton), {
+              type: "primary",
+              size: "small",
+              disabled: false,
               text: "",
               onClick: expandHandler
             }, {
@@ -423,15 +436,19 @@
   };
   const _hoisted_7$2 = { style: { "flex": "1" } };
   const _hoisted_8$1 = ["src"];
+  const __default__$u = vue.defineComponent({
+    name: "MFormFieldset"
+  });
   const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
-    __name: "Fieldset",
+    ...__default__$u,
     props: {
       labelWidth: null,
       prop: { default: "" },
       size: null,
       model: null,
       config: null,
-      rules: { default: {} }
+      rules: { default: {} },
+      disabled: { type: Boolean }
     },
     emits: ["change"],
     setup(__props, { emit }) {
@@ -510,10 +527,11 @@
                   rules: vue.unref(name) ? __props.rules[vue.unref(name)] : [],
                   config: item,
                   prop: __props.prop,
+                  disabled: __props.disabled,
                   labelWidth: vue.unref(lWidth),
                   size: __props.size,
                   onChange: change
-                }, null, 8, ["model", "rules", "config", "prop", "labelWidth", "size"]);
+                }, null, 8, ["model", "rules", "config", "prop", "disabled", "labelWidth", "size"]);
               }), 128))
             ]),
             vue.createElementVNode("img", {
@@ -529,8 +547,9 @@
               prop: __props.prop,
               labelWidth: vue.unref(lWidth),
               size: __props.size,
+              disabled: __props.disabled,
               onChange: change
-            }, null, 8, ["model", "rules", "config", "prop", "labelWidth", "size"]);
+            }, null, 8, ["model", "rules", "config", "prop", "labelWidth", "size", "disabled"]);
           }), 128)) : vue.createCommentVNode("", true)
         ], 4)) : vue.createCommentVNode("", true);
       };
@@ -541,8 +560,11 @@
   const _hoisted_2$5 = /* @__PURE__ */ vue.createTextVNode("\u4E0A\u79FB");
   const _hoisted_3$5 = /* @__PURE__ */ vue.createTextVNode("\u4E0B\u79FB");
   const _hoisted_4$4 = ["innerHTML"];
+  const __default__$t = vue.defineComponent({
+    name: "MFormGroupListItem"
+  });
   const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
-    __name: "GroupListItem",
+    ...__default__$t,
     props: {
       model: null,
       groupModel: null,
@@ -550,7 +572,8 @@
       labelWidth: null,
       prop: null,
       size: null,
-      index: null
+      index: null,
+      disabled: { type: Boolean }
     },
     emits: ["swap-item", "remove-item", "change"],
     setup(__props, { emit }) {
@@ -611,24 +634,27 @@
             }),
             vue.createVNode(vue.unref(design.TMagicButton), {
               text: "",
+              disabled: __props.disabled,
               onClick: expandHandler
             }, {
               default: vue.withCtx(() => [
                 vue.createTextVNode(vue.toDisplayString(vue.unref(title)), 1)
               ]),
               _: 1
-            }),
+            }, 8, ["disabled"]),
             vue.withDirectives(vue.createVNode(vue.unref(design.TMagicButton), {
+              style: { "color": "#f56c6c" },
               text: "",
               icon: vue.unref(iconsVue.Delete),
-              style: { "color": "#f56c6c" },
+              disabled: __props.disabled,
               onClick: removeHandler
-            }, null, 8, ["icon"]), [
+            }, null, 8, ["icon", "disabled"]), [
               [vue.vShow, showDelete(parseInt(String(__props.index)))]
             ]),
             movable() ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
               vue.withDirectives(vue.createVNode(vue.unref(design.TMagicButton), {
                 text: "",
+                disabled: __props.disabled,
                 size: "small",
                 onClick: _cache[0] || (_cache[0] = ($event) => changeOrder(-1))
               }, {
@@ -642,10 +668,11 @@
                   })
                 ]),
                 _: 1
-              }, 512), [
+              }, 8, ["disabled"]), [
                 [vue.vShow, __props.index !== 0]
               ]),
               vue.withDirectives(vue.createVNode(vue.unref(design.TMagicButton), {
+                disabled: __props.disabled,
                 text: "",
                 size: "small",
                 onClick: _cache[1] || (_cache[1] = ($event) => changeOrder(1))
@@ -660,7 +687,7 @@
                   })
                 ]),
                 _: 1
-              }, 512), [
+              }, 8, ["disabled"]), [
                 [vue.vShow, __props.index !== vue.unref(length) - 1]
               ])
             ], 64)) : vue.createCommentVNode("", true),
@@ -677,8 +704,9 @@
             labelWidth: __props.labelWidth,
             prop: `${__props.prop}${__props.prop ? "." : ""}${String(__props.index)}`,
             size: __props.size,
+            disabled: __props.disabled,
             onChange: changeHandler
-          }, null, 8, ["config", "model", "labelWidth", "prop", "size"])) : vue.createCommentVNode("", true)
+          }, null, 8, ["config", "model", "labelWidth", "prop", "size", "disabled"])) : vue.createCommentVNode("", true)
         ]);
       };
     }
@@ -696,15 +724,19 @@
   ];
   const _hoisted_6$1 = /* @__PURE__ */ vue.createTextVNode("\u6DFB\u52A0\u7EC4");
   const _hoisted_7$1 = /* @__PURE__ */ vue.createTextVNode("\u5207\u6362\u4E3A\u8868\u683C");
+  const __default__$s = vue.defineComponent({
+    name: "MFormGroupList"
+  });
   const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
-    __name: "GroupList",
+    ...__default__$s,
     props: {
       model: null,
       config: null,
       name: null,
       labelWidth: null,
       prop: null,
-      size: null
+      size: null,
+      disabled: { type: Boolean }
     },
     emits: ["change"],
     setup(__props, { emit }) {
@@ -786,22 +818,24 @@
               index,
               "label-width": __props.labelWidth,
               size: __props.size,
+              disabled: __props.disabled,
               "group-model": __props.model[__props.name],
               onRemoveItem: removeHandler,
               onSwapItem: swapHandler,
               onChange: changeHandler
-            }, null, 8, ["model", "config", "prop", "index", "label-width", "size", "group-model"]);
+            }, null, 8, ["model", "config", "prop", "index", "label-width", "size", "disabled", "group-model"]);
           }), 128)),
           vue.unref(addable) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
             key: 3,
             onClick: addHandler,
-            size: "small"
+            size: "small",
+            disabled: __props.disabled
           }, {
             default: vue.withCtx(() => [
               _hoisted_6$1
             ]),
             _: 1
-          })) : vue.createCommentVNode("", true),
+          }, 8, ["disabled"])) : vue.createCommentVNode("", true),
           __props.config.enableToggleMode ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
             key: 4,
             icon: vue.unref(iconsVue.Grid),
@@ -826,15 +860,19 @@
   };
   const _hoisted_4$2 = { style: { "flex": "1" } };
   const _hoisted_5$1 = ["src"];
+  const __default__$r = vue.defineComponent({
+    name: "MFormPanel"
+  });
   const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
-    __name: "Panel",
+    ...__default__$r,
     props: {
       model: null,
       config: null,
       name: null,
       labelWidth: null,
       prop: null,
-      size: null
+      size: null,
+      disabled: { type: Boolean }
     },
     emits: ["change"],
     setup(__props, { emit }) {
@@ -884,9 +922,10 @@
                       model: __props.name ? __props.model[__props.name] : __props.model,
                       prop: __props.prop,
                       size: __props.size,
+                      disabled: __props.disabled,
                       "label-width": __props.config.labelWidth || __props.labelWidth,
                       onChange: changeHandler
-                    }, null, 8, ["config", "model", "prop", "size", "label-width"]);
+                    }, null, 8, ["config", "model", "prop", "size", "disabled", "label-width"]);
                   }), 128))
                 ]),
                 vue.createElementVNode("img", {
@@ -900,9 +939,10 @@
                   model: __props.name ? __props.model[__props.name] : __props.model,
                   prop: __props.prop,
                   size: __props.size,
+                  disabled: __props.disabled,
                   "label-width": __props.config.labelWidth || __props.labelWidth,
                   onChange: changeHandler
-                }, null, 8, ["config", "model", "prop", "size", "label-width"]);
+                }, null, 8, ["config", "model", "prop", "size", "disabled", "label-width"]);
               }), 128))
             ])
           ]),
@@ -912,8 +952,11 @@
     }
   });
 
+  const __default__$q = vue.defineComponent({
+    name: "MFormCol"
+  });
   const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
-    __name: "Col",
+    ...__default__$q,
     props: {
       model: null,
       config: null,
@@ -921,7 +964,8 @@
       expandMore: { type: Boolean },
       span: null,
       size: null,
-      prop: null
+      prop: null,
+      disabled: { type: Boolean }
     },
     emits: ["change"],
     setup(__props, { emit }) {
@@ -939,8 +983,9 @@
               "label-width": __props.config.labelWidth || __props.labelWidth,
               "expand-more": __props.expandMore,
               size: __props.size,
+              disabled: __props.disabled,
               onChange: changeHandler
-            }, null, 8, ["model", "config", "prop", "label-width", "expand-more", "size"])
+            }, null, 8, ["model", "config", "prop", "label-width", "expand-more", "size", "disabled"])
           ]),
           _: 1
         }, 8, ["span"])), [
@@ -950,8 +995,11 @@
     }
   });
 
+  const __default__$p = vue.defineComponent({
+    name: "MFormRow"
+  });
   const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
-    __name: "Row",
+    ...__default__$p,
     props: {
       model: null,
       config: null,
@@ -959,7 +1007,8 @@
       labelWidth: null,
       prop: null,
       size: null,
-      expandMore: { type: Boolean }
+      expandMore: { type: Boolean },
+      disabled: { type: Boolean }
     },
     emits: ["change"],
     setup(__props, { emit }) {
@@ -979,8 +1028,9 @@
                 model: __props.name ? __props.model[__props.name] : __props.model,
                 prop: __props.prop,
                 size: __props.size,
+                disabled: __props.disabled,
                 onChange: changeHandler
-              }, null, 8, ["span", "config", "labelWidth", "expandMore", "model", "prop", "size"]);
+              }, null, 8, ["span", "config", "labelWidth", "expandMore", "model", "prop", "size", "disabled"]);
             }), 128))
           ]),
           _: 1
@@ -989,14 +1039,18 @@
     }
   });
 
+  const __default__$o = vue.defineComponent({
+    name: "MFormStep"
+  });
   const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
-    __name: "Step",
+    ...__default__$o,
     props: {
       model: null,
       config: null,
       stepActive: { default: 1 },
       labelWidth: null,
-      size: null
+      size: null,
+      disabled: { type: Boolean }
     },
     emits: ["change"],
     setup(__props, { emit }) {
@@ -1042,9 +1096,10 @@
                     model: step.name ? __props.model[step.name] : __props.model,
                     prop: `${step.name}`,
                     size: __props.size,
+                    disabled: __props.disabled,
                     "label-width": __props.config.labelWidth || __props.labelWidth,
                     onChange: changeHandler
-                  }, null, 8, ["config", "model", "prop", "size", "label-width"])), [
+                  }, null, 8, ["config", "model", "prop", "size", "disabled", "label-width"])), [
                     [vue.vShow, active.value - 1 === index]
                   ]) : vue.createCommentVNode("", true)
                 ], 64);
@@ -1066,11 +1121,15 @@
   const _hoisted_8 = /* @__PURE__ */ vue.createTextVNode("\xA0 ");
   const _hoisted_9 = /* @__PURE__ */ vue.createTextVNode("\u6E05\u7A7A");
   const _hoisted_10 = {
+    key: 1,
     class: "bottom",
     style: { "text-align": "right" }
   };
+  const __default__$n = vue.defineComponent({
+    name: "MFormTable"
+  });
   const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
-    __name: "Table",
+    ...__default__$n,
     props: {
       model: null,
       config: null,
@@ -1078,6 +1137,7 @@
       prop: { default: "" },
       labelWidth: null,
       sort: { type: Boolean },
+      disabled: { type: Boolean },
       sortKey: { default: "" },
       text: null,
       size: null,
@@ -1097,6 +1157,11 @@
       const updateKey = vue.ref(1);
       const isFullscreen = vue.ref(false);
       const modelName = vue.computed(() => props.name || props.config.name || "");
+      const data = vue.computed(
+        () => props.config.pagination ? props.model[modelName.value].filter(
+          (item, index) => index >= pagecontext.value * pagesize.value && index + 1 <= (pagecontext.value + 1) * pagesize.value
+        ) : props.model[modelName.value]
+      );
       const sortChange = ({ prop, order }) => {
         if (order === "ascending") {
           props.model[modelName.value] = props.model[modelName.value].sort((a, b) => a[prop] - b[prop]);
@@ -1122,10 +1187,10 @@
         mForm?.$emit("field-change", props.prop, props.model[modelName.value]);
       };
       const rowDrop = () => {
-        const tableEl = tMagicTable.value?.$el;
-        if (tableEl?.querySelectorAll(".el-table__body > tbody")) {
-          const el = tableEl.querySelectorAll(".el-table__body > tbody")[0];
-          const sortable = Sortable__default.default.create(el, {
+        const tableEl = tMagicTable.value?.instance.$el;
+        const tBodyEl = tableEl?.querySelector(".el-table__body > tbody");
+        if (tBodyEl) {
+          const sortable = Sortable__default.default.create(tBodyEl, {
             onEnd: ({ newIndex, oldIndex }) => {
               if (typeof newIndex === "undefined")
                 return;
@@ -1137,11 +1202,11 @@
               sortable.destroy();
               mForm?.$emit("field-change", props.prop, props.model[modelName.value]);
               utils.sleep(1e3).then(() => {
-                const eltrs = tableEl.querySelectorAll(".el-table__body > tbody > tr");
-                if (eltrs?.[newIndex]) {
-                  eltrs[newIndex].style.backgroundColor = "rgba(243, 89, 59, 0.2)";
+                const elTrs = tableEl.querySelectorAll(".el-table__body > tbody > tr");
+                if (elTrs?.[newIndex]) {
+                  elTrs[newIndex].style.backgroundColor = "rgba(243, 89, 59, 0.2)";
                   utils.sleep(1e3).then(() => {
-                    eltrs[newIndex].style.backgroundColor = "";
+                    elTrs[newIndex].style.backgroundColor = "";
                   });
                 }
               });
@@ -1212,6 +1277,8 @@
         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();
         }
@@ -1258,6 +1325,8 @@
         return fuc;
       };
       const removeHandler = (index) => {
+        if (props.disabled)
+          return;
         props.model[modelName.value].splice(index, 1);
         emit("change", props.model[modelName.value]);
       };
@@ -1274,8 +1343,11 @@
       const toggleRowSelection = (row, selected) => {
         tMagicTable.value?.toggleRowSelection.call(tMagicTable.value, row, selected);
       };
-      const makeConfig = (config) => {
+      const makeConfig = (config, row) => {
         const newConfig = lodashEs.cloneDeep(config);
+        if (typeof config.itemsFunction === "function") {
+          newConfig.items = config.itemsFunction(row);
+        }
         delete newConfig.display;
         return newConfig;
       };
@@ -1333,8 +1405,8 @@
         }
         const reader = new FileReader();
         reader.onload = () => {
-          const data = reader.result;
-          const pdata = globalThis.XLSX.read(data, { type: "array" });
+          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]) {
@@ -1416,7 +1488,8 @@
                   ref_key: "tMagicTable",
                   ref: tMagicTable,
                   style: { "width": "100%" },
-                  data: __props.model[vue.unref(modelName)],
+                  "row-key": __props.config.rowKey || "id",
+                  data: vue.unref(data),
                   border: __props.config.border,
                   "max-height": __props.config.maxHeight,
                   "default-expand-all": true,
@@ -1477,10 +1550,11 @@
                               size: "small",
                               type: "primary",
                               icon: vue.unref(iconsVue.ArrowUp),
+                              disabled: __props.disabled,
                               text: "",
                               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", "onClick", "onDblclick"])
+                            }, null, 8, ["icon", "disabled", "onClick", "onDblclick"])
                           ]),
                           _: 2
                         }, 1024)) : vue.createCommentVNode("", true),
@@ -1495,10 +1569,11 @@
                               size: "small",
                               type: "primary",
                               icon: vue.unref(iconsVue.ArrowDown),
+                              disabled: __props.disabled,
                               text: "",
                               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", "onClick", "onDblclick"])
+                            }, null, 8, ["icon", "disabled", "onClick", "onDblclick"])
                           ]),
                           _: 2
                         }, 1024)) : vue.createCommentVNode("", true)
@@ -1537,13 +1612,14 @@
                             scope.$index > -1 ? (vue.openBlock(), vue.createBlock(_sfc_main$v, {
                               key: 0,
                               labelWidth: "0",
+                              disabled: __props.disabled,
                               prop: getProp(scope.$index),
                               rules: column.rules,
-                              config: makeConfig(column),
+                              config: makeConfig(column, scope.row),
                               model: scope.row,
                               size: __props.size,
                               onChange: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("change", __props.model[vue.unref(modelName)]))
-                            }, null, 8, ["prop", "rules", "config", "model", "size"])) : vue.createCommentVNode("", true)
+                            }, null, 8, ["disabled", "prop", "rules", "config", "model", "size"])) : vue.createCommentVNode("", true)
                           ]),
                           _: 2
                         }, 1032, ["prop", "width", "label", "sortable", "class-name"])) : vue.createCommentVNode("", true)
@@ -1551,7 +1627,7 @@
                     }), 256))
                   ]),
                   _: 1
-                }, 8, ["data", "border", "max-height"])) : vue.createCommentVNode("", true)
+                }, 8, ["row-key", "data", "border", "max-height"])) : vue.createCommentVNode("", true)
               ]),
               _: 1
             }, 8, ["disabled"]),
@@ -1560,6 +1636,7 @@
               key: 0,
               size: "small",
               type: "primary",
+              disabled: __props.disabled,
               plain: "",
               onClick: _cache[1] || (_cache[1] = ($event) => newHandler())
             }, {
@@ -1567,7 +1644,7 @@
                 _hoisted_4$1
               ]),
               _: 1
-            })) : vue.createCommentVNode("", true),
+            }, 8, ["disabled"])) : vue.createCommentVNode("", true),
             _hoisted_5,
             __props.enableToggleMode && !isFullscreen.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
               key: 1,
@@ -1595,32 +1672,35 @@
             }, 8, ["icon"])) : vue.createCommentVNode("", true),
             vue.unref(importable) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicUpload), {
               key: 3,
+              style: { "display": "inline-block" },
               ref_key: "excelBtn",
               ref: excelBtn,
               action: "/noop",
+              disabled: __props.disabled,
               "on-change": excelHandler,
-              "auto-upload": false,
-              style: { "display": "inline-block" }
+              "auto-upload": false
             }, {
               default: vue.withCtx(() => [
                 vue.createVNode(vue.unref(design.TMagicButton), {
                   size: "small",
                   type: "success",
+                  disabled: __props.disabled,
                   plain: ""
                 }, {
                   default: vue.withCtx(() => [
                     _hoisted_7
                   ]),
                   _: 1
-                })
+                }, 8, ["disabled"])
               ]),
               _: 1
-            }, 512)) : vue.createCommentVNode("", true),
+            }, 8, ["disabled"])) : vue.createCommentVNode("", true),
             _hoisted_8,
             vue.unref(importable) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
               key: 4,
               size: "small",
               type: "warning",
+              disabled: __props.disabled,
               plain: "",
               onClick: _cache[2] || (_cache[2] = ($event) => clearHandler())
             }, {
@@ -1628,9 +1708,9 @@
                 _hoisted_9
               ]),
               _: 1
-            })) : vue.createCommentVNode("", true)
+            }, 8, ["disabled"])) : vue.createCommentVNode("", true)
           ]),
-          vue.createElementVNode("div", _hoisted_10, [
+          __props.config.pagination ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10, [
             vue.createVNode(vue.unref(design.TMagicPagination), {
               layout: "total, sizes, prev, pager, next, jumper",
               "hide-on-single-page": __props.model[vue.unref(modelName)].length < pagesize.value,
@@ -1641,14 +1721,17 @@
               onSizeChange: handleSizeChange,
               onCurrentChange: handleCurrentChange
             }, null, 8, ["hide-on-single-page", "current-page", "page-sizes", "page-size", "total"])
-          ])
+          ])) : vue.createCommentVNode("", true)
         ], 2);
       };
     }
   });
 
+  const __default__$m = vue.defineComponent({
+    name: "MFormTabs"
+  });
   const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
-    __name: "Tabs",
+    ...__default__$m,
     props: {
       model: null,
       config: null,
@@ -1656,11 +1739,13 @@
       size: null,
       labelWidth: null,
       prop: null,
-      expandMore: { type: Boolean }
+      expandMore: { type: Boolean },
+      disabled: { type: Boolean }
     },
     emits: ["change"],
     setup(__props, { emit }) {
       const props = __props;
+      const uiComponent = design.getConfig("components").tabPane;
       const getActive = (mForm2, props2, activeTabName2) => {
         const { config, model, prop } = props2;
         const { active } = config;
@@ -1762,7 +1847,7 @@
           default: vue.withCtx(() => [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(tabs), (tab, tabIndex) => {
               return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-                display$1(tab.display) && tabItems(tab).length ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTabPane), {
+                display$1(tab.display) && tabItems(tab).length ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(uiComponent).component), {
                   key: tab[vue.unref(mForm)?.keyProp || "__key"] ?? tabIndex,
                   name: filter(tab.status) || tabIndex.toString(),
                   label: filter(tab.title),
@@ -1773,13 +1858,14 @@
                       return vue.openBlock(), vue.createBlock(_sfc_main$v, {
                         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,
                         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
-                      }, null, 8, ["config", "model", "prop", "size", "label-width", "expand-more"]);
+                      }, null, 8, ["config", "disabled", "model", "prop", "size", "label-width", "expand-more"]);
                     }), 128))
                   ]),
                   _: 2
@@ -1819,8 +1905,11 @@
     );
   };
 
+  const __default__$l = vue.defineComponent({
+    name: "MFormCascader"
+  });
   const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
-    __name: "Cascader",
+    ...__default__$l,
     props: {
       config: null,
       model: null,
@@ -1903,8 +1992,11 @@
     }
   });
 
+  const __default__$k = vue.defineComponent({
+    name: "MFormCheckbox"
+  });
   const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
-    __name: "Checkbox",
+    ...__default__$k,
     props: {
       config: null,
       model: null,
@@ -1961,8 +2053,11 @@
     }
   });
 
+  const __default__$j = vue.defineComponent({
+    name: "MFormCheckGroup"
+  });
   const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
-    __name: "CheckboxGroup",
+    ...__default__$j,
     props: {
       config: null,
       model: null,
@@ -2003,6 +2098,7 @@
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(options), (option) => {
               return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicCheckbox), {
                 label: option.value,
+                value: option.value,
                 key: option.value,
                 disabled: option.disabled
               }, {
@@ -2010,7 +2106,7 @@
                   vue.createTextVNode(vue.toDisplayString(option.text), 1)
                 ]),
                 _: 2
-              }, 1032, ["label", "disabled"]);
+              }, 1032, ["label", "value", "disabled"]);
             }), 128))
           ]),
           _: 1
@@ -2019,8 +2115,11 @@
     }
   });
 
+  const __default__$i = vue.defineComponent({
+    name: "MFormColorPicker"
+  });
   const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
-    __name: "ColorPicker",
+    ...__default__$i,
     props: {
       config: null,
       model: null,
@@ -2049,8 +2148,11 @@
     }
   });
 
+  const __default__$h = vue.defineComponent({
+    name: "MFormDate"
+  });
   const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
-    __name: "Date",
+    ...__default__$h,
     props: {
       config: null,
       model: null,
@@ -2078,15 +2180,18 @@
           placeholder: __props.config.placeholder,
           disabled: __props.disabled,
           format: __props.config.format,
-          "value-format": __props.config.format || "YYYY-MM-DD HH:mm:ss",
+          "value-format": __props.config.valueFormat || "YYYY-MM-DD HH:mm:ss",
           onChange: changeHandler
         }, null, 8, ["modelValue", "size", "placeholder", "disabled", "format", "value-format"]);
       };
     }
   });
 
+  const __default__$g = vue.defineComponent({
+    name: "MFormDateRange"
+  });
   const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
-    __name: "Daterange",
+    ...__default__$g,
     props: {
       config: null,
       model: null,
@@ -2183,8 +2288,11 @@
     }
   });
 
+  const __default__$f = vue.defineComponent({
+    name: "MFormDateTime"
+  });
   const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
-    __name: "DateTime",
+    ...__default__$f,
     props: {
       config: null,
       model: null,
@@ -2229,8 +2337,11 @@
   });
 
   const _hoisted_1$5 = { key: 0 };
+  const __default__$e = vue.defineComponent({
+    name: "MFormDisplay"
+  });
   const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
-    __name: "Display",
+    ...__default__$e,
     props: {
       config: null,
       model: null,
@@ -2252,8 +2363,11 @@
   });
 
   const _hoisted_1$4 = { class: "m-fields-dynamic-field" };
+  const __default__$d = vue.defineComponent({
+    name: "MFormDynamicField"
+  });
   const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
-    __name: "DynamicField",
+    ...__default__$d,
     props: {
       config: null,
       model: null,
@@ -2340,8 +2454,11 @@
     }
   });
 
+  const __default__$c = vue.defineComponent({
+    name: "MFormHidden"
+  });
   const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
-    __name: "Hidden",
+    ...__default__$c,
     props: {
       config: null,
       model: null,
@@ -2365,8 +2482,11 @@
     }
   });
 
+  const __default__$b = vue.defineComponent({
+    name: "MForm"
+  });
   const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
-    __name: "Form",
+    ...__default__$b,
     props: {
       config: { default: () => [] },
       initValues: { default: () => ({}) },
@@ -2410,6 +2530,13 @@
           }
         }
       });
+      vue.watchEffect(() => {
+        formState.initValues = props.initValues;
+        formState.config = props.config;
+        formState.keyProp = props.keyProp;
+        formState.popperClass = props.popperClass;
+        formState.parentValues = props.parentValues;
+      });
       vue.provide("mForm", formState);
       vue.watch(
         [() => props.config, () => props.initValues],
@@ -2463,7 +2590,6 @@
           ref: tMagicForm,
           model: values.value,
           "label-width": __props.labelWidth,
-          disabled: __props.disabled,
           style: vue.normalizeStyle(`height: ${__props.height}`),
           inline: __props.inline,
           "label-position": __props.labelPosition
@@ -2471,6 +2597,7 @@
           default: vue.withCtx(() => [
             initialized.value && Array.isArray(__props.config) ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(__props.config, (item, index) => {
               return vue.openBlock(), vue.createBlock(_sfc_main$v, {
+                disabled: __props.disabled,
                 key: item[__props.keyProp] ?? index,
                 config: item,
                 model: values.value,
@@ -2478,11 +2605,11 @@
                 "step-active": __props.stepActive,
                 size: __props.size,
                 onChange: changeHandler
-              }, null, 8, ["config", "model", "label-width", "step-active", "size"]);
+              }, null, 8, ["disabled", "config", "model", "label-width", "step-active", "size"]);
             }), 128)) : vue.createCommentVNode("", true)
           ]),
           _: 1
-        }, 8, ["model", "label-width", "disabled", "style", "inline", "label-position"]);
+        }, 8, ["model", "label-width", "style", "inline", "label-position"]);
       };
     }
   });
@@ -2491,8 +2618,11 @@
   const _hoisted_2$1 = /* @__PURE__ */ vue.createTextVNode("\u53D6 \u6D88");
   const _hoisted_3$1 = /* @__PURE__ */ vue.createTextVNode("\u4E0A\u4E00\u6B65");
   const _hoisted_4 = /* @__PURE__ */ vue.createTextVNode("\u4E0B\u4E00\u6B65");
+  const __default__$a = vue.defineComponent({
+    name: "MFormDialog"
+  });
   const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
-    __name: "FormDialog",
+    ...__default__$a,
     props: {
       config: { default: () => [] },
       values: { default: () => ({}) },
@@ -2500,6 +2630,7 @@
       width: null,
       labelWidth: null,
       fullscreen: { type: Boolean },
+      disabled: { type: Boolean },
       title: null,
       zIndex: null,
       size: null,
@@ -2655,12 +2786,13 @@
                 ref_key: "form",
                 ref: form,
                 size: __props.size,
+                disabled: __props.disabled,
                 config: __props.config,
                 "init-values": __props.values,
                 "parent-values": __props.parentValues,
                 "label-width": __props.labelWidth,
                 onChange: changeHandler
-              }, null, 8, ["modelValue", "size", "config", "init-values", "parent-values", "label-width"]),
+              }, null, 8, ["modelValue", "size", "disabled", "config", "init-values", "parent-values", "label-width"]),
               vue.renderSlot(_ctx.$slots, "default")
             ], 4)) : vue.createCommentVNode("", true)
           ]),
@@ -2676,8 +2808,11 @@
     class: "m-fields-link"
   };
   const _hoisted_3 = /* @__PURE__ */ vue.createTextVNode("\u70B9\u51FB\u7F16\u8F91");
+  const __default__$9 = vue.defineComponent({
+    name: "MFormLink"
+  });
   const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
-    __name: "Link",
+    ...__default__$9,
     props: {
       config: null,
       model: null,
@@ -2770,8 +2905,11 @@
     }
   });
 
+  const __default__$8 = vue.defineComponent({
+    name: "MFormNumber"
+  });
   const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
-    __name: "Number",
+    ...__default__$8,
     props: {
       config: null,
       model: null,
@@ -2814,8 +2952,11 @@
     }
   });
 
+  const __default__$7 = vue.defineComponent({
+    name: "MFormRadioGroup"
+  });
   const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
-    __name: "RadioGroup",
+    ...__default__$7,
     props: {
       config: null,
       model: null,
@@ -2846,13 +2987,14 @@
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.config.options, (option) => {
               return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicRadio), {
                 label: option.value,
+                value: option.value,
                 key: `${option.value}`
               }, {
                 default: vue.withCtx(() => [
                   vue.createTextVNode(vue.toDisplayString(option.text), 1)
                 ]),
                 _: 2
-              }, 1032, ["label"]);
+              }, 1032, ["label", "value"]);
             }), 128))
           ]),
           _: 1
@@ -2861,8 +3003,11 @@
     }
   });
 
+  const __default__$6 = vue.defineComponent({
+    name: "MFormSelectOptionGroups"
+  });
   const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
-    __name: "SelectOptionGroups",
+    ...__default__$6,
     props: {
       options: null
     },
@@ -2892,8 +3037,11 @@
     }
   });
 
+  const __default__$5 = vue.defineComponent({
+    name: "MFormSelectOptions"
+  });
   const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
-    __name: "SelectOptions",
+    ...__default__$5,
     props: {
       options: null,
       valueKey: null
@@ -2913,8 +3061,11 @@
   });
 
   const _hoisted_1$1 = { key: 2 };
+  const __default__$4 = vue.defineComponent({
+    name: "MFormSelect"
+  });
   const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
-    __name: "Select",
+    ...__default__$4,
     props: {
       config: null,
       model: null,
@@ -2969,30 +3120,32 @@
         let items = [];
         const { config } = props;
         const { option } = config;
-        let { body } = option;
+        const { root = "", totalKey = "total" } = option;
+        let { body = {}, url } = option;
+        if (typeof url === "function") {
+          url = await url(mForm, { model: props.model, formValue: mForm?.values });
+        }
         let postOptions = {
           method: option.method || "POST",
-          url: option.url,
+          url,
           cache: option.cache,
           timeout: option.timeout,
           mode: option.mode,
           headers: option.headers || {},
           json: option.json || false
         };
-        if (body) {
-          if (typeof body === "function") {
-            body = body(mForm, {
-              model: props.model,
-              formValue: mForm?.values,
-              formValues: mForm?.values,
-              config: props.config
-            });
-          }
-          body.query = query.value;
-          body.pgSize = pgSize.value;
-          body.pgIndex = pgIndex.value;
-          postOptions.data = body;
+        if (typeof body === "function") {
+          body = body(mForm, {
+            model: props.model,
+            formValue: mForm?.values,
+            formValues: mForm?.values,
+            config: props.config
+          });
         }
+        body.query = query.value;
+        body.pgSize = pgSize.value;
+        body.pgIndex = pgIndex.value;
+        postOptions.data = body;
         const requestFuc = getConfig("request");
         if (typeof option.beforeRequest === "function") {
           postOptions = option.beforeRequest(mForm, postOptions, {
@@ -3012,9 +3165,13 @@
             config: props.config
           });
         }
-        const optionsData = res[option.root];
-        if (res.total > 0) {
-          total.value = res.total;
+        const optionsData = root.split(".").reduce((accumulator, currentValue) => accumulator[currentValue], res);
+        const resTotal = globalThis.parseInt(
+          totalKey.split(".").reduce((accumulator, currentValue) => accumulator[currentValue], res),
+          10
+        );
+        if (resTotal > 0) {
+          total.value = resTotal;
         }
         remoteData.value = remoteData.value.concat(optionsData);
         if (optionsData) {
@@ -3063,6 +3220,8 @@
           return [];
         const { config } = props;
         const { option } = config;
+        const { root = "", initRoot = "" } = option;
+        let { initBody = {} } = option;
         let options2 = [];
         let url = option.initUrl;
         if (!url) {
@@ -3071,22 +3230,45 @@
         if (typeof url === "function") {
           url = await url(mForm, { model: props.model, formValue: mForm?.values });
         }
-        const postOptions = {
+        if (typeof initBody === "function") {
+          initBody = initBody(mForm, {
+            model: props.model,
+            formValue: mForm?.values,
+            formValues: mForm?.values,
+            config: props.config
+          });
+        }
+        let postOptions = {
           method: option.method || "POST",
           url,
           data: {
-            id: props.model[props.name]
+            id: props.model[props.name],
+            ...initBody
           },
           mode: option.mode,
           headers: option.headers || {},
           json: option.json || false
         };
+        if (typeof option.beforeInitRequest === "function") {
+          postOptions = option.beforeInitRequest(mForm, postOptions, {
+            model: props.model,
+            formValue: mForm?.values
+          });
+        }
         if (option.method?.toLocaleLowerCase() === "jsonp") {
           postOptions.jsonpCallback = option.jsonpCallback || "callback";
         }
         const requestFuc = getConfig("request");
-        const res = await requestFuc(postOptions);
-        let initData = res[option.root];
+        let res = await requestFuc(postOptions);
+        if (typeof option.afterRequest === "function") {
+          res = option.afterRequest(mForm, res, {
+            model: props.model,
+            formValue: mForm?.values,
+            formValues: mForm?.values,
+            config: props.config
+          });
+        }
+        let initData = (initRoot || root).split(".").reduce((accumulator, currentValue) => accumulator[currentValue], res);
         if (initData) {
           if (!Array.isArray(initData)) {
             initData = [initData];
@@ -3221,8 +3403,11 @@
     }
   });
 
+  const __default__$3 = vue.defineComponent({
+    name: "MFormSwitch"
+  });
   const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
-    __name: "Switch",
+    ...__default__$3,
     props: {
       config: null,
       model: null,
@@ -3275,8 +3460,11 @@
   });
 
   const _hoisted_1 = { key: 0 };
+  const __default__$2 = vue.defineComponent({
+    name: "MFormText"
+  });
   const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
-    __name: "Text",
+    ...__default__$2,
     props: {
       config: null,
       model: null,
@@ -3395,8 +3583,11 @@
     }
   });
 
+  const __default__$1 = vue.defineComponent({
+    name: "MFormTextarea"
+  });
   const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
-    __name: "Textarea",
+    ...__default__$1,
     props: {
       config: null,
       model: null,
@@ -3435,8 +3626,11 @@
     }
   });
 
+  const __default__ = vue.defineComponent({
+    name: "MFormTime"
+  });
   const _sfc_main = /* @__PURE__ */ vue.defineComponent({
-    __name: "Time",
+    ...__default__,
     props: {
       config: null,
       model: null,
@@ -3458,11 +3652,13 @@
         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", "size", "placeholder", "disabled"]);
+        }, null, 8, ["modelValue", "value-format", "format", "size", "placeholder", "disabled"]);
       };
     }
   });
@@ -3534,6 +3730,7 @@
   exports.MText = _sfc_main$2;
   exports.MTextarea = _sfc_main$1;
   exports.MTime = _sfc_main;
+  exports.createValues = createValues;
   exports.default = index;
   exports.display = display;
   exports.filterFunction = filterFunction;
@@ -3544,4 +3741,4 @@
   Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
 
 }));
-//# sourceMappingURL=tmagic-form.umd.js.map
+//# sourceMappingURL=tmagic-form.umd.cjs.map