@tmagic/form 1.2.0-beta.2 → 1.2.0-beta.21

package/dist/tmagic-form.umd.cjs

@@ -0,0 +1,3713 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('@element-plus/icons-vue'), require('@tmagic/design'), require('lodash-es'), require('sortablejs'), require('@tmagic/utils'), require('lodash-es/cloneDeep'), require('lodash-es/isEqual')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue', '@element-plus/icons-vue', '@tmagic/design', 'lodash-es', 'sortablejs', '@tmagic/utils', 'lodash-es/cloneDeep', 'lodash-es/isEqual'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicForm = {}, global.Vue, global.iconsVue, global.design, global.lodashEs, global.Sortable, global.utils, global.cloneDeep, global.isEqual));
+})(this, (function (exports, vue, iconsVue, design, lodashEs, Sortable, utils, cloneDeep, isEqual) { 'use strict';
+
+  const _interopDefaultLegacy = e => e && typeof e === 'object' && 'default' in e ? e : { default: e };
+
+  const Sortable__default = /*#__PURE__*/_interopDefaultLegacy(Sortable);
+  const cloneDeep__default = /*#__PURE__*/_interopDefaultLegacy(cloneDeep);
+  const isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
+
+  const isTableSelect = (type) => typeof type === "string" && ["table-select", "tableSelect"].includes(type);
+  const asyncLoadConfig = (value, initValue2, { asyncLoad, name, type }) => {
+    if (type === "html" && typeof asyncLoad === "object" && typeof name !== "undefined") {
+      asyncLoad.name = name;
+      value.asyncLoad = typeof initValue2.asyncLoad === "object" ? initValue2.asyncLoad : asyncLoad;
+    }
+  };
+  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) => createValues(mForm, items, v, value[name]?.[index]));
+    } else {
+      value[name] = createValues(mForm, items, initValue2[name], value[name]);
+      if (extensible) {
+        value[name] = Object.assign({}, initValue2[name], value[name]);
+      }
+    }
+  };
+  const setValue = (mForm, value, initValue2, item) => {
+    const { items, name, type, checkbox } = item;
+    if (isMultipleValue(type) || type === "tab" && item.dynamic) {
+      value[name] = initValue2[name] || [];
+    }
+    if (items) {
+      initItemsValue(mForm, value, initValue2, item);
+    } else {
+      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 initValueItem = function(mForm, item, initValue2, value) {
+    const { items } = item;
+    const { names } = item;
+    const { type, name } = item;
+    if (isTableSelect(type) && name) {
+      value[name] = initValue2[name] || "";
+      return value;
+    }
+    asyncLoadConfig(value, initValue2, item);
+    if (name && !items && typeof initValue2[name] !== "undefined") {
+      if (typeof value[name] === "undefined") {
+        if (type === "number") {
+          value[name] = Number(initValue2[name]);
+        } else {
+          value[name] = typeof initValue2[name] === "object" ? lodashEs.cloneDeep(initValue2[name]) : initValue2[name];
+        }
+      }
+      return value;
+    }
+    if (names) {
+      return names.forEach((n) => value[n] = initValue2[n] || "");
+    }
+    if (!name) {
+      return createValues(mForm, items, initValue2, value);
+    }
+    setValue(mForm, value, initValue2, item);
+    return value;
+  };
+  const createValues = function(mForm, config = [], initValue2 = {}, value = {}) {
+    if (Array.isArray(config)) {
+      config.forEach((item) => {
+        initValueItem(mForm, item, initValue2, value);
+      });
+    }
+    return value;
+  };
+  const getDefaultValue = function(mForm, { defaultValue, type, filter, multiple }) {
+    if (typeof defaultValue === "function") {
+      return defaultValue(mForm);
+    }
+    if (defaultValue === "undefined") {
+      return void 0;
+    }
+    if (typeof defaultValue !== "undefined") {
+      return defaultValue;
+    }
+    if (type === "number" || filter === "number") {
+      return 0;
+    }
+    if (["switch", "checkbox"].includes(type)) {
+      return false;
+    }
+    if (multiple) {
+      return [];
+    }
+    return "";
+  };
+  const filterFunction = (mForm, config, props) => {
+    if (typeof config !== "function") {
+      return config;
+    }
+    return config(mForm, {
+      values: mForm?.initValues || {},
+      model: props.model,
+      parent: mForm?.parentValues || {},
+      formValue: mForm?.values || props.model,
+      prop: props.prop,
+      config: props.config
+    });
+  };
+  const display = function(mForm, config, props) {
+    if (config === "expand") {
+      return config;
+    }
+    if (typeof config === "function") {
+      return filterFunction(mForm, config, props);
+    }
+    if (config === false) {
+      return false;
+    }
+    return true;
+  };
+  const getRules = function(mForm, rules = [], props) {
+    rules = lodashEs.cloneDeep(rules);
+    if (typeof rules === "object" && !Array.isArray(rules)) {
+      rules = [rules];
+    }
+    return rules.map((item) => {
+      if (typeof item.validator === "function") {
+        const fnc = item.validator;
+        item.validator = (rule, value, callback, source, options) => fnc(
+          {
+            rule,
+            value: props.config.names ? props.model : value,
+            callback,
+            source,
+            options
+          },
+          {
+            values: mForm?.initValues || {},
+            model: props.model,
+            parent: mForm?.parentValues || {},
+            formValue: mForm?.values || props.model,
+            prop: props.prop,
+            config: props.config
+          },
+          mForm
+        );
+      }
+      return item;
+    });
+  };
+  const initValue = async (mForm, { initValues, config }) => {
+    if (!Array.isArray(config))
+      throw new Error("config\u5E94\u8BE5\u4E3A\u6570\u7EC4");
+    let valuesTmp = createValues(mForm, config, vue.toRaw(initValues), {});
+    const [firstForm] = config;
+    if (firstForm && typeof firstForm.onInitValue === "function") {
+      valuesTmp = await firstForm.onInitValue(mForm, {
+        formValue: valuesTmp,
+        initValue: initValues
+      });
+    }
+    return valuesTmp || {};
+  };
+
+  const _hoisted_1$b = ["innerHTML"];
+  const _hoisted_2$7 = ["innerHTML"];
+  const _hoisted_3$7 = ["innerHTML"];
+  const _hoisted_4$6 = ["innerHTML"];
+  const _hoisted_5$4 = {
+    key: 4,
+    style: { "text-align": "center" }
+  };
+  const __default__$v = vue.defineComponent({
+    name: "MFormContainer"
+  });
+  const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$v,
+    props: {
+      model: null,
+      config: null,
+      prop: { default: "" },
+      disabled: { type: Boolean },
+      labelWidth: null,
+      expandMore: { type: Boolean, default: false },
+      stepActive: null,
+      size: { default: "small" }
+    },
+    emits: ["change"],
+    setup(__props, { emit }) {
+      const props = __props;
+      const mForm = vue.inject("mForm");
+      const expand = vue.ref(false);
+      const name = vue.computed(() => props.config.name || "");
+      const items = vue.computed(() => props.config.items);
+      const itemProp = vue.computed(() => {
+        let n = "";
+        const { names } = props.config;
+        if (names?.[0]) {
+          [n] = names;
+        } else if (name.value) {
+          n = name.value;
+        } else {
+          return props.prop;
+        }
+        return `${props.prop}${props.prop ? "." : ""}${n}`;
+      });
+      const tagName = vue.computed(() => {
+        const component = vue.resolveComponent(`m-${items.value ? "form" : "fields"}-${type.value}`);
+        if (typeof component !== "string")
+          return component;
+        return "m-fields-text";
+      });
+      const disabled = vue.computed(
+        () => typeof props.disabled === "undefined" ? filterFunction(mForm, props.config.disabled, props) : props.disabled
+      );
+      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));
+      const type = vue.computed(() => {
+        let { type: type2 } = props.config;
+        if (typeof type2 === "function") {
+          type2 = type2(mForm, {
+            model: props.model
+          });
+        }
+        if (type2 === "form")
+          return "";
+        return type2?.replace(/([A-Z])/g, "-$1").toLowerCase() || (items.value ? "" : "text");
+      });
+      const display$1 = vue.computed(() => {
+        const value = display(mForm, props.config.display, props);
+        if (value === "expand") {
+          return expand.value;
+        }
+        return value;
+      });
+      const itemLabelWidth = vue.computed(() => props.config.labelWidth || props.labelWidth);
+      vue.watchEffect(() => {
+        expand.value = props.expandMore;
+      });
+      const expandHandler = () => expand.value = !expand.value;
+      const key = (config) => config[mForm?.keyProps];
+      const filterHandler = (filter, value) => {
+        if (typeof filter === "function") {
+          return filter(mForm, value, {
+            model: props.model,
+            values: mForm?.initValues,
+            formValue: mForm?.values,
+            prop: itemProp.value,
+            config: props.config
+          });
+        }
+        if (filter === "number") {
+          return +value;
+        }
+        return value;
+      };
+      const changeHandler = (onChange, value) => {
+        if (typeof onChange === "function") {
+          return onChange(mForm, value, {
+            model: props.model,
+            values: mForm?.initValues,
+            formValue: mForm?.values,
+            prop: itemProp.value,
+            config: props.config
+          });
+        }
+      };
+      const trimHandler = (trim, value) => {
+        if (typeof value === "string" && trim) {
+          return value.replace(/^\s*/, "").replace(/\s*$/, "");
+        }
+      };
+      const onChangeHandler = async function(v, key2) {
+        const { filter, onChange, trim, name: name2, dynamicKey } = props.config;
+        let value = v;
+        try {
+          value = filterHandler(filter, v);
+          value = await changeHandler(onChange, value) ?? value;
+          value = trimHandler(trim, value) ?? value;
+        } catch (e) {
+          console.error(e);
+        }
+        if ((name2 || name2 === 0) && props.model !== value && (v !== value || props.model[name2] !== value)) {
+          props.model[name2] = value;
+        }
+        if (key2 !== void 0 && dynamicKey) {
+          props.model[key2] = value;
+        }
+        emit("change", props.model);
+      };
+      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,
+          style: vue.normalizeStyle(__props.config.tip ? "display: flex;align-items: baseline;" : ""),
+          class: vue.normalizeClass([__props.config.className, "m-form-container"])
+        }, [
+          vue.unref(type) === "hidden" ? (vue.openBlock(), vue.createBlock(_component_m_fields_hidden, {
+            key: 0,
+            model: __props.model,
+            config: __props.config,
+            name: __props.config.name,
+            disabled: vue.unref(disabled),
+            prop: vue.unref(itemProp)
+          }, null, 8, ["model", "config", "name", "disabled", "prop"])) : vue.unref(items) && !__props.config.text && vue.unref(type) && vue.unref(display$1) ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(tagName)), {
+            key: key(__props.config),
+            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", "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 }),
+              prop: vue.unref(itemProp),
+              "label-width": vue.unref(itemLabelWidth),
+              rules: vue.unref(rule)
+            }, {
+              label: vue.withCtx(() => [
+                vue.createElementVNode("span", {
+                  innerHTML: vue.unref(type) === "checkbox" ? "" : __props.config.text
+                }, null, 8, _hoisted_1$b)
+              ]),
+              default: vue.withCtx(() => [
+                vue.unref(tooltip) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), { key: 0 }, {
+                  content: vue.withCtx(() => [
+                    vue.createElementVNode("div", { innerHTML: vue.unref(tooltip) }, null, 8, _hoisted_2$7)
+                  ]),
+                  default: vue.withCtx(() => [
+                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(tagName)), {
+                      key: key(__props.config),
+                      size: __props.size,
+                      model: __props.model,
+                      config: __props.config,
+                      name: vue.unref(name),
+                      disabled: vue.unref(disabled),
+                      prop: vue.unref(itemProp),
+                      onChange: onChangeHandler
+                    }, null, 40, ["size", "model", "config", "name", "disabled", "prop"]))
+                  ]),
+                  _: 1
+                })) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(tagName)), {
+                  key: key(__props.config),
+                  size: __props.size,
+                  model: __props.model,
+                  config: __props.config,
+                  name: vue.unref(name),
+                  disabled: vue.unref(disabled),
+                  prop: vue.unref(itemProp),
+                  onChange: onChangeHandler
+                }, null, 40, ["size", "model", "config", "name", "disabled", "prop"])),
+                vue.unref(extra) ? (vue.openBlock(), vue.createElementBlock("div", {
+                  key: 2,
+                  innerHTML: vue.unref(extra),
+                  class: "m-form-tip"
+                }, null, 8, _hoisted_3$7)) : vue.createCommentVNode("", true)
+              ]),
+              _: 1
+            }, 8, ["style", "class", "prop", "label-width", "rules"]),
+            __props.config.tip ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
+              key: 0,
+              placement: "left"
+            }, {
+              content: vue.withCtx(() => [
+                vue.createElementVNode("div", {
+                  innerHTML: __props.config.tip
+                }, null, 8, _hoisted_4$6)
+              ]),
+              default: vue.withCtx(() => [
+                vue.createVNode(vue.unref(design.TMagicIcon), { style: { "line-height": "40px", "margin-left": "5px" } }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(vue.unref(iconsVue.WarningFilled))
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            })) : vue.createCommentVNode("", true)
+          ], 64)) : vue.unref(items) && vue.unref(display$1) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 3 }, [
+            (vue.unref(name) || vue.unref(name) === 0 ? __props.model[vue.unref(name)] : __props.model) ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(vue.unref(items), (item) => {
+              return vue.openBlock(), vue.createBlock(_component_Container, {
+                key: key(item),
+                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", "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
+            }, {
+              default: vue.withCtx(() => [
+                vue.createTextVNode(vue.toDisplayString(expand.value ? "\u6536\u8D77\u914D\u7F6E" : "\u5C55\u5F00\u66F4\u591A\u914D\u7F6E"), 1)
+              ]),
+              _: 1
+            })
+          ])) : vue.createCommentVNode("", true)
+        ], 6)) : vue.createCommentVNode("", true);
+      };
+    }
+  });
+
+  const _hoisted_1$a = ["innerHTML"];
+  const _hoisted_2$6 = ["innerHTML"];
+  const _hoisted_3$6 = { key: 1 };
+  const _hoisted_4$5 = ["innerHTML"];
+  const _hoisted_5$3 = ["innerHTML"];
+  const _hoisted_6$2 = {
+    key: 2,
+    style: { "display": "flex" }
+  };
+  const _hoisted_7$2 = { style: { "flex": "1" } };
+  const _hoisted_8$1 = ["src"];
+  const __default__$u = vue.defineComponent({
+    name: "MFormFieldset"
+  });
+  const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$u,
+    props: {
+      labelWidth: null,
+      prop: { default: "" },
+      size: null,
+      model: null,
+      config: null,
+      rules: { default: {} },
+      disabled: { type: Boolean }
+    },
+    emits: ["change"],
+    setup(__props, { emit }) {
+      const props = __props;
+      const mForm = vue.inject("mForm");
+      const name = vue.computed(() => props.config.name || "");
+      const show = vue.computed(() => {
+        if (props.config.expand && name.value) {
+          return props.model[name.value]?.value;
+        }
+        return true;
+      });
+      const lWidth = vue.computed(() => {
+        if (props.config.items) {
+          return props.config.labelWidth || props.labelWidth;
+        }
+        return props.config.labelWidth || props.labelWidth || (props.config.text ? void 0 : "0");
+      });
+      const change = () => {
+        emit("change", props.model);
+      };
+      const key = (item, index) => item[mForm?.keyProp || "__key"] ?? index;
+      if (props.config.checkbox && name.value) {
+        vue.watch(
+          () => props.model[name.value]?.value,
+          () => {
+            emit("change", props.model);
+          }
+        );
+      }
+      return (_ctx, _cache) => {
+        return (vue.unref(name) ? __props.model[vue.unref(name)] : __props.model) ? (vue.openBlock(), vue.createElementBlock("fieldset", {
+          key: 0,
+          class: "m-fieldset",
+          style: vue.normalizeStyle(vue.unref(show) ? "padding: 15px 15px 0 5px;" : "border: 0")
+        }, [
+          vue.unref(name) && __props.config.checkbox ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(!vue.unref(show) ? "div" : "legend"), { key: 0 }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(vue.unref(design.TMagicCheckbox), {
+                modelValue: __props.model[vue.unref(name)].value,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => __props.model[vue.unref(name)].value = $event),
+                prop: `${__props.prop}${__props.prop ? "." : ""}${__props.config.name}.value`,
+                "true-label": 1,
+                "false-label": 0
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createElementVNode("span", {
+                    innerHTML: __props.config.legend
+                  }, null, 8, _hoisted_1$a),
+                  __props.config.extra ? (vue.openBlock(), vue.createElementBlock("span", {
+                    key: 0,
+                    innerHTML: __props.config.extra,
+                    class: "m-form-tip"
+                  }, null, 8, _hoisted_2$6)) : vue.createCommentVNode("", true)
+                ]),
+                _: 1
+              }, 8, ["modelValue", "prop"])
+            ]),
+            _: 1
+          })) : (vue.openBlock(), vue.createElementBlock("legend", _hoisted_3$6, [
+            vue.createElementVNode("span", {
+              innerHTML: __props.config.legend
+            }, null, 8, _hoisted_4$5),
+            __props.config.extra ? (vue.openBlock(), vue.createElementBlock("span", {
+              key: 0,
+              innerHTML: __props.config.extra,
+              class: "m-form-tip"
+            }, null, 8, _hoisted_5$3)) : vue.createCommentVNode("", true)
+          ])),
+          __props.config.schematic && vue.unref(show) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$2, [
+            vue.createElementVNode("div", _hoisted_7$2, [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.config.items, (item, index) => {
+                return vue.openBlock(), vue.createBlock(_sfc_main$v, {
+                  key: key(item, index),
+                  model: vue.unref(name) ? __props.model[vue.unref(name)] : __props.model,
+                  rules: vue.unref(name) ? __props.rules[vue.unref(name)] : [],
+                  config: item,
+                  prop: __props.prop,
+                  disabled: __props.disabled,
+                  labelWidth: vue.unref(lWidth),
+                  size: __props.size,
+                  onChange: change
+                }, null, 8, ["model", "rules", "config", "prop", "disabled", "labelWidth", "size"]);
+              }), 128))
+            ]),
+            vue.createElementVNode("img", {
+              class: "m-form-schematic",
+              src: __props.config.schematic
+            }, null, 8, _hoisted_8$1)
+          ])) : vue.unref(show) ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 3 }, vue.renderList(__props.config.items, (item, index) => {
+            return vue.openBlock(), vue.createBlock(_sfc_main$v, {
+              key: key(item, index),
+              model: vue.unref(name) ? __props.model[vue.unref(name)] : __props.model,
+              rules: vue.unref(name) ? __props.rules[vue.unref(name)] : [],
+              config: item,
+              prop: __props.prop,
+              labelWidth: vue.unref(lWidth),
+              size: __props.size,
+              disabled: __props.disabled,
+              onChange: change
+            }, null, 8, ["model", "rules", "config", "prop", "labelWidth", "size", "disabled"]);
+          }), 128)) : vue.createCommentVNode("", true)
+        ], 4)) : vue.createCommentVNode("", true);
+      };
+    }
+  });
+
+  const _hoisted_1$9 = { class: "m-fields-group-list-item" };
+  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({
+    ...__default__$t,
+    props: {
+      model: null,
+      groupModel: null,
+      config: null,
+      labelWidth: null,
+      prop: null,
+      size: null,
+      index: null,
+      disabled: { type: Boolean }
+    },
+    emits: ["swap-item", "remove-item", "change"],
+    setup(__props, { emit }) {
+      const props = __props;
+      const mForm = vue.inject("mForm");
+      const expand = vue.ref(false);
+      vue.watchEffect(() => {
+        expand.value = !props.index;
+      });
+      const rowConfig = vue.computed(() => ({
+        type: "row",
+        span: props.config.span || 24,
+        items: props.config.items,
+        labelWidth: props.config.labelWidth,
+        [mForm?.keyProp || "__key"]: `${props.config[mForm?.keyProp || "__key"]}${String(props.index)}`
+      }));
+      const title = vue.computed(() => {
+        if (props.config.titleKey && props.model[props.config.titleKey]) {
+          return props.model[props.config.titleKey];
+        }
+        return `\u7EC4 ${String(props.index)}`;
+      });
+      const length = vue.computed(() => props.groupModel?.length || 0);
+      const itemExtra = vue.computed(() => filterFunction(mForm, props.config.itemExtra, props));
+      const removeHandler = () => emit("remove-item", props.index);
+      const changeHandler = () => emit("change");
+      const expandHandler = () => {
+        expand.value = !expand.value;
+      };
+      const showDelete = (index) => {
+        const deleteFunc = props.config.delete;
+        if (deleteFunc && typeof deleteFunc === "function") {
+          return deleteFunc(props.model, index, mForm?.values);
+        }
+        return true;
+      };
+      const changeOrder = (offset = 0) => emit("swap-item", props.index, `${String(props.index)}${offset}`);
+      const movable = () => {
+        const { movable: movable2 } = props.config;
+        if (movable2 === void 0)
+          return true;
+        if (typeof movable2 === "function") {
+          return movable2(mForm, props.index || 0, props.model, props.groupModel);
+        }
+        return movable2;
+      };
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
+          vue.createElementVNode("div", null, [
+            vue.createVNode(vue.unref(design.TMagicIcon), {
+              style: { "margin-right": "7px" },
+              onClick: expandHandler
+            }, {
+              default: vue.withCtx(() => [
+                expand.value ? (vue.openBlock(), vue.createBlock(vue.unref(iconsVue.CaretBottom), { key: 0 })) : (vue.openBlock(), vue.createBlock(vue.unref(iconsVue.CaretRight), { key: 1 }))
+              ]),
+              _: 1
+            }),
+            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),
+              disabled: __props.disabled,
+              onClick: removeHandler
+            }, 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))
+              }, {
+                default: vue.withCtx(() => [
+                  _hoisted_2$5,
+                  vue.createVNode(vue.unref(design.TMagicIcon), null, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(vue.unref(iconsVue.CaretTop))
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }, 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))
+              }, {
+                default: vue.withCtx(() => [
+                  _hoisted_3$5,
+                  vue.createVNode(vue.unref(design.TMagicIcon), null, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(vue.unref(iconsVue.CaretBottom))
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }, 8, ["disabled"]), [
+                [vue.vShow, __props.index !== vue.unref(length) - 1]
+              ])
+            ], 64)) : vue.createCommentVNode("", true),
+            vue.unref(itemExtra) ? (vue.openBlock(), vue.createElementBlock("span", {
+              key: 1,
+              innerHTML: vue.unref(itemExtra),
+              class: "m-form-tip"
+            }, null, 8, _hoisted_4$4)) : vue.createCommentVNode("", true)
+          ]),
+          expand.value ? (vue.openBlock(), vue.createBlock(_sfc_main$v, {
+            key: 0,
+            config: vue.unref(rowConfig),
+            model: __props.model,
+            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", "disabled"])) : vue.createCommentVNode("", true)
+        ]);
+      };
+    }
+  });
+
+  const _hoisted_1$8 = { class: "m-fields-group-list" };
+  const _hoisted_2$4 = ["innerHTML"];
+  const _hoisted_3$4 = {
+    key: 1,
+    class: "el-table__empty-block"
+  };
+  const _hoisted_4$3 = /* @__PURE__ */ vue.createElementVNode("span", { class: "el-table__empty-text" }, "\u6682\u65E0\u6570\u636E", -1);
+  const _hoisted_5$2 = [
+    _hoisted_4$3
+  ];
+  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({
+    ...__default__$s,
+    props: {
+      model: null,
+      config: null,
+      name: null,
+      labelWidth: null,
+      prop: null,
+      size: null,
+      disabled: { type: Boolean }
+    },
+    emits: ["change"],
+    setup(__props, { emit }) {
+      const props = __props;
+      const mForm = vue.inject("mForm");
+      const addable = vue.computed(() => {
+        if (!props.name)
+          return false;
+        if (typeof props.config.addable === "function") {
+          return props.config.addable(mForm, {
+            model: props.model[props.name],
+            formValue: mForm?.values,
+            prop: props.prop,
+            config: props.config
+          });
+        }
+        return typeof props.config.addable === "undefined" ? true : props.config.addable;
+      });
+      const changeHandler = () => {
+        if (!props.name)
+          return false;
+        emit("change", props.model[props.name]);
+      };
+      const addHandler = async () => {
+        if (!props.name)
+          return false;
+        let initValues = {};
+        if (typeof props.config.defaultAdd === "function") {
+          initValues = await props.config.defaultAdd(mForm, {
+            model: props.model[props.name],
+            formValue: mForm?.values,
+            prop: props.prop,
+            config: props.config
+          });
+        } else if (props.config.defaultAdd) {
+          initValues = props.config.defaultAdd;
+        }
+        const groupValue = await initValue(mForm, {
+          config: props.config.items,
+          initValues
+        });
+        props.model[props.name].push(groupValue);
+      };
+      const removeHandler = (index) => {
+        if (!props.name)
+          return false;
+        props.model[props.name].splice(index, 1);
+        changeHandler();
+      };
+      const swapHandler = (idx1, idx2) => {
+        if (!props.name)
+          return false;
+        const [currRow] = props.model[props.name].splice(idx1, 1);
+        props.model[props.name].splice(idx2, 0, currRow);
+        changeHandler();
+      };
+      const toggleMode = () => {
+        props.config.type = "table";
+        props.config.groupItems = props.config.items;
+        props.config.items = props.config.tableItems || props.config.items.map((item) => ({
+          ...item,
+          label: item.label || item.text,
+          text: null
+        }));
+      };
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [
+          __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("", true),
+          !__props.model[__props.name] || !__props.model[__props.name].length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$4, _hoisted_5$2)) : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 2 }, vue.renderList(__props.model[__props.name], (item, index) => {
+            return vue.openBlock(), vue.createBlock(_sfc_main$t, {
+              key: index,
+              model: item,
+              config: __props.config,
+              prop: __props.prop,
+              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", "disabled", "group-model"]);
+          }), 128)),
+          vue.unref(addable) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+            key: 3,
+            onClick: addHandler,
+            size: "small",
+            disabled: __props.disabled
+          }, {
+            default: vue.withCtx(() => [
+              _hoisted_6$1
+            ]),
+            _: 1
+          }, 8, ["disabled"])) : vue.createCommentVNode("", true),
+          __props.config.enableToggleMode ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+            key: 4,
+            icon: vue.unref(iconsVue.Grid),
+            size: "small",
+            onClick: toggleMode
+          }, {
+            default: vue.withCtx(() => [
+              _hoisted_7$1
+            ]),
+            _: 1
+          }, 8, ["icon"])) : vue.createCommentVNode("", true)
+        ]);
+      };
+    }
+  });
+
+  const _hoisted_1$7 = { class: "clearfix" };
+  const _hoisted_2$3 = ["innerHTML"];
+  const _hoisted_3$3 = {
+    key: 0,
+    style: { "display": "flex" }
+  };
+  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({
+    ...__default__$r,
+    props: {
+      model: null,
+      config: null,
+      name: null,
+      labelWidth: null,
+      prop: null,
+      size: null,
+      disabled: { type: Boolean }
+    },
+    emits: ["change"],
+    setup(__props, { emit }) {
+      const props = __props;
+      const mForm = vue.inject("mForm");
+      const expand = vue.ref(props.config.expand !== false);
+      const items = vue.computed(() => props.config.items);
+      const filter = (config) => filterFunction(mForm, config, props);
+      const changeHandler = () => emit("change", props.model);
+      return (_ctx, _cache) => {
+        return vue.unref(items) && vue.unref(items).length ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicCard), {
+          key: 0,
+          class: "box-card m-form-panel",
+          "body-style": { display: expand.value ? "block" : "none" }
+        }, {
+          header: vue.withCtx(() => [
+            vue.createElementVNode("div", _hoisted_1$7, [
+              vue.createElementVNode("a", {
+                href: "javascript:",
+                style: { "width": "100%", "display": "block" },
+                onClick: _cache[0] || (_cache[0] = ($event) => expand.value = !expand.value)
+              }, [
+                vue.createVNode(vue.unref(design.TMagicIcon), null, {
+                  default: vue.withCtx(() => [
+                    expand.value ? (vue.openBlock(), vue.createBlock(vue.unref(iconsVue.CaretBottom), { key: 0 })) : (vue.openBlock(), vue.createBlock(vue.unref(iconsVue.CaretRight), { key: 1 }))
+                  ]),
+                  _: 1
+                }),
+                vue.createTextVNode(" " + vue.toDisplayString(filter(__props.config.title)) + " ", 1),
+                __props.config && __props.config.extra ? (vue.openBlock(), vue.createElementBlock("span", {
+                  key: 0,
+                  innerHTML: __props.config.extra,
+                  class: "m-form-tip"
+                }, null, 8, _hoisted_2$3)) : vue.createCommentVNode("", true)
+              ])
+            ])
+          ]),
+          default: vue.withCtx(() => [
+            vue.createElementVNode("div", null, [
+              vue.renderSlot(_ctx.$slots, "default"),
+              __props.config.schematic ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$3, [
+                vue.createElementVNode("div", _hoisted_4$2, [
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(items), (item, index) => {
+                    return vue.openBlock(), vue.createBlock(_sfc_main$v, {
+                      key: item[vue.unref(mForm)?.keyProp || "__key"] ?? index,
+                      config: item,
+                      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", "disabled", "label-width"]);
+                  }), 128))
+                ]),
+                vue.createElementVNode("img", {
+                  class: "m-form-schematic",
+                  src: __props.config.schematic
+                }, null, 8, _hoisted_5$1)
+              ])) : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(vue.unref(items), (item, index) => {
+                return vue.openBlock(), vue.createBlock(_sfc_main$v, {
+                  key: item[vue.unref(mForm)?.keyProp || "__key"] ?? index,
+                  config: item,
+                  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", "disabled", "label-width"]);
+              }), 128))
+            ])
+          ]),
+          _: 3
+        }, 8, ["body-style"])) : vue.createCommentVNode("", true);
+      };
+    }
+  });
+
+  const __default__$q = vue.defineComponent({
+    name: "MFormCol"
+  });
+  const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$q,
+    props: {
+      model: null,
+      config: null,
+      labelWidth: null,
+      expandMore: { type: Boolean },
+      span: null,
+      size: null,
+      prop: null,
+      disabled: { type: Boolean }
+    },
+    emits: ["change"],
+    setup(__props, { emit }) {
+      const props = __props;
+      const mForm = vue.inject("mForm");
+      const display$1 = vue.computed(() => display(mForm, props.config.display, props));
+      const changeHandler = () => emit("change", props.model);
+      return (_ctx, _cache) => {
+        return vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(design.TMagicCol), { span: __props.span }, {
+          default: vue.withCtx(() => [
+            vue.createVNode(_sfc_main$v, {
+              model: __props.model,
+              config: __props.config,
+              prop: __props.prop,
+              "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", "disabled"])
+          ]),
+          _: 1
+        }, 8, ["span"])), [
+          [vue.vShow, vue.unref(display$1) && __props.config.type !== "hidden"]
+        ]);
+      };
+    }
+  });
+
+  const __default__$p = vue.defineComponent({
+    name: "MFormRow"
+  });
+  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$p,
+    props: {
+      model: null,
+      config: null,
+      name: null,
+      labelWidth: null,
+      prop: null,
+      size: null,
+      expandMore: { type: Boolean },
+      disabled: { type: Boolean }
+    },
+    emits: ["change"],
+    setup(__props, { emit }) {
+      const props = __props;
+      const mForm = vue.inject("mForm");
+      const changeHandler = () => emit("change", props.name ? props.model[props.name] : props.model);
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicRow), { gutter: 10 }, {
+          default: vue.withCtx(() => [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.config.items, (col, index) => {
+              return vue.openBlock(), vue.createBlock(_sfc_main$q, {
+                key: col[vue.unref(mForm)?.keyProp || "__key"] ?? index,
+                span: col.span || __props.config.span || 24 / __props.config.items.length,
+                config: col,
+                labelWidth: __props.config.labelWidth || __props.labelWidth,
+                expandMore: __props.expandMore,
+                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", "disabled"]);
+            }), 128))
+          ]),
+          _: 1
+        });
+      };
+    }
+  });
+
+  const __default__$o = vue.defineComponent({
+    name: "MFormStep"
+  });
+  const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$o,
+    props: {
+      model: null,
+      config: null,
+      stepActive: { default: 1 },
+      labelWidth: null,
+      size: null,
+      disabled: { type: Boolean }
+    },
+    emits: ["change"],
+    setup(__props, { emit }) {
+      const props = __props;
+      const mForm = vue.inject("mForm");
+      const active = vue.ref(1);
+      vue.watchEffect(() => {
+        active.value = props.stepActive;
+      });
+      const stepClick = (index) => {
+        active.value = index + 1;
+        mForm?.$emit("update:stepActive", active.value);
+      };
+      const changeHandler = () => {
+        emit("change", props.model);
+      };
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", null, [
+          vue.createVNode(vue.unref(design.TMagicSteps), {
+            active: active.value,
+            "align-center": "",
+            space: __props.config.space
+          }, {
+            default: vue.withCtx(() => [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.config.items, (item, index) => {
+                return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicStep), {
+                  key: item.__key,
+                  title: item.title,
+                  active: active.value,
+                  onClick: ($event) => stepClick(index)
+                }, null, 8, ["title", "active", "onClick"]);
+              }), 128))
+            ]),
+            _: 1
+          }, 8, ["active", "space"]),
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.config.items, (step, index) => {
+            return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(step.items, (item) => {
+                return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+                  item ? vue.withDirectives((vue.openBlock(), vue.createBlock(_sfc_main$v, {
+                    key: item[vue.unref(mForm)?.keyProp || "__key"],
+                    config: item,
+                    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", "disabled", "label-width"])), [
+                    [vue.vShow, active.value - 1 === index]
+                  ]) : vue.createCommentVNode("", true)
+                ], 64);
+              }), 256))
+            ], 64);
+          }), 256))
+        ]);
+      };
+    }
+  });
+
+  const _hoisted_1$6 = ["innerHTML"];
+  const _hoisted_2$2 = { class: "el-form-item__content" };
+  const _hoisted_3$2 = ["innerHTML"];
+  const _hoisted_4$1 = /* @__PURE__ */ vue.createTextVNode("\u6DFB\u52A0");
+  const _hoisted_5 = /* @__PURE__ */ vue.createTextVNode(" \xA0 ");
+  const _hoisted_6 = /* @__PURE__ */ vue.createTextVNode("\u5C55\u5F00\u914D\u7F6E");
+  const _hoisted_7 = /* @__PURE__ */ vue.createTextVNode("\u5BFC\u5165EXCEL");
+  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({
+    ...__default__$n,
+    props: {
+      model: null,
+      config: null,
+      name: null,
+      prop: { default: "" },
+      labelWidth: null,
+      sort: { type: Boolean },
+      disabled: { type: Boolean },
+      sortKey: { default: "" },
+      text: null,
+      size: null,
+      enableToggleMode: { type: Boolean, default: true },
+      showIndex: { type: Boolean, default: true }
+    },
+    emits: ["change", "select"],
+    setup(__props, { expose, emit }) {
+      const props = __props;
+      let timer = null;
+      const mForm = vue.inject("mForm");
+      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 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]);
+        } else if (order === "descending") {
+          props.model[modelName.value] = props.model[modelName.value].sort((a, b) => b[prop] - a[prop]);
+        }
+      };
+      const foreUpdate = () => {
+        updateKey.value += 1;
+        setTimeout(() => rowDrop());
+      };
+      const swapArray = (index1, index2) => {
+        [props.model[modelName.value][index1]] = props.model[modelName.value].splice(
+          index2,
+          1,
+          props.model[modelName.value][index1]
+        );
+        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;
+          }
+        }
+        mForm?.$emit("field-change", props.prop, props.model[modelName.value]);
+      };
+      const rowDrop = () => {
+        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;
+              if (typeof oldIndex === "undefined")
+                return;
+              swapArray(newIndex, oldIndex);
+              emit("change", props.model[modelName.value]);
+              foreUpdate();
+              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)";
+                  utils.sleep(1e3).then(() => {
+                    elTrs[newIndex].style.backgroundColor = "";
+                  });
+                }
+              });
+            }
+          });
+        }
+      };
+      const newHandler = async (row) => {
+        if (props.config.max && props.model[modelName.value].length >= props.config.max) {
+          design.tMagicMessage.error(`\u6700\u591A\u65B0\u589E\u914D\u7F6E\u4E0D\u80FD\u8D85\u8FC7${props.config.max}\u6761`);
+          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]);
+          });
+        } 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;
+          }
+          inputs = await initValue(mForm, {
+            config: columns,
+            initValues: inputs
+          });
+        }
+        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]);
+      };
+      if (!globalThis.XLSX) {
+        utils.asyncLoadJs("https://cdn.bootcdn.net/ajax/libs/xlsx/0.17.0/xlsx.full.min.js");
+      }
+      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
+          });
+        }
+        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]
+          });
+        }
+        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,
+            model: props.model,
+            formValue: mForm ? mForm.values : props.model,
+            prop: props.prop,
+            index
+          });
+        }
+        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 });
+        }
+      };
+      const toggleRowSelection = (row, selected) => {
+        tMagicTable.value?.toggleRowSelection.call(tMagicTable.value, row, selected);
+      };
+      const makeConfig = (config, row) => {
+        const newConfig = lodashEs.cloneDeep(config);
+        if (typeof config.itemsFunction === "function") {
+          newConfig.items = config.itemsFunction(row);
+        }
+        delete newConfig.display;
+        return newConfig;
+      };
+      const upHandler = (index) => {
+        if (timer) {
+          clearTimeout(timer);
+        }
+        timer = setTimeout(() => {
+          swapArray(index, index - 1);
+        }, 300);
+      };
+      const topHandler = (index) => {
+        if (timer) {
+          clearTimeout(timer);
+        }
+        const moveNum = index;
+        for (let i = 0; i < moveNum; i++) {
+          swapArray(index, index - 1);
+          index -= 1;
+        }
+      };
+      const downHandler = (index) => {
+        if (timer) {
+          clearTimeout(timer);
+        }
+        timer = setTimeout(() => {
+          swapArray(index, index + 1);
+        }, 300);
+      };
+      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 showDelete = (index) => {
+        const deleteFunc = props.config.delete;
+        if (deleteFunc && typeof deleteFunc === "function") {
+          return deleteFunc(props.model[modelName.value], index, mForm?.values);
+        }
+        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 = (file) => {
+        if (!file || !file.raw) {
+          return false;
+        }
+        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 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 (isFullscreen.value) {
+          mTable.value?.classList.remove("fixed");
+          isFullscreen.value = false;
+        } else {
+          mTable.value?.classList.add("fixed");
+          isFullscreen.value = true;
+        }
+      };
+      const getProp = (index) => {
+        const { prop } = vue.toRefs(props);
+        return `${prop.value}${prop.value ? "." : ""}${index + 1 + pagecontext.value * pagesize.value - 1}`;
+      };
+      expose({
+        toggleRowSelection
+      });
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("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_1$6)) : vue.createCommentVNode("", true),
+          vue.createElementVNode("div", _hoisted_2$2, [
+            vue.createVNode(vue.unref(design.TMagicTooltip), {
+              content: "\u62D6\u62FD\u53EF\u6392\u5E8F",
+              placement: "left-start",
+              disabled: __props.config.dropSort !== true
+            }, {
+              default: vue.withCtx(() => [
+                __props.model[vue.unref(modelName)] ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTable), {
+                  ref_key: "tMagicTable",
+                  ref: tMagicTable,
+                  style: { "width": "100%" },
+                  "row-key": __props.config.rowKey || "id",
+                  data: vue.unref(data),
+                  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 ? (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$2)
+                      ]),
+                      _: 1
+                    })) : vue.createCommentVNode("", true),
+                    vue.createVNode(vue.unref(design.TMagicTableColumn), {
+                      label: "\u64CD\u4F5C",
+                      width: "55",
+                      align: "center",
+                      fixed: __props.config.fixed === false ? void 0 : "left"
+                    }, {
+                      default: vue.withCtx((scope) => [
+                        vue.withDirectives(vue.createVNode(vue.unref(design.TMagicIcon), {
+                          class: "m-table-delete-icon",
+                          onClick: ($event) => removeHandler(scope.$index + 1 + pagecontext.value * pagesize.value - 1)
+                        }, {
+                          default: vue.withCtx(() => [
+                            vue.createVNode(vue.unref(iconsVue.Delete))
+                          ]),
+                          _: 2
+                        }, 1032, ["onClick"]), [
+                          [vue.vShow, showDelete(scope.$index + 1 + pagecontext.value * pagesize.value - 1)]
+                        ])
+                      ]),
+                      _: 1
+                    }, 8, ["fixed"]),
+                    __props.sort && __props.model[vue.unref(modelName)] && __props.model[vue.unref(modelName)].length > 1 ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTableColumn), {
+                      key: 1,
+                      label: "\u6392\u5E8F",
+                      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: "\u70B9\u51FB\u4E0A\u79FB\uFF0C\u53CC\u51FB\u7F6E\u9876",
+                          placement: "top"
+                        }, {
+                          default: vue.withCtx(() => [
+                            vue.createVNode(vue.unref(design.TMagicButton), {
+                              plain: "",
+                              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", "disabled", "onClick", "onDblclick"])
+                          ]),
+                          _: 2
+                        }, 1024)) : vue.createCommentVNode("", true),
+                        scope.$index + 1 + pagecontext.value * pagesize.value - 1 !== __props.model[vue.unref(modelName)].length - 1 ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
+                          key: 1,
+                          content: "\u70B9\u51FB\u4E0B\u79FB\uFF0C\u53CC\u51FB\u7F6E\u5E95",
+                          placement: "top"
+                        }, {
+                          default: vue.withCtx(() => [
+                            vue.createVNode(vue.unref(design.TMagicButton), {
+                              plain: "",
+                              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", "disabled", "onClick", "onDblclick"])
+                          ]),
+                          _: 2
+                        }, 1024)) : vue.createCommentVNode("", true)
+                      ]),
+                      _: 1
+                    })) : vue.createCommentVNode("", true),
+                    vue.unref(selection) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTableColumn), {
+                      key: 2,
+                      align: "center",
+                      "header-align": "center",
+                      type: "selection",
+                      width: "45"
+                    })) : vue.createCommentVNode("", true),
+                    __props.showIndex && __props.config.showIndex ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTableColumn), {
+                      key: 3,
+                      width: "60",
+                      label: "\u5E8F\u53F7"
+                    }, {
+                      default: vue.withCtx((scope) => [
+                        vue.createTextVNode(vue.toDisplayString(scope.$index + 1 + pagecontext.value * pagesize.value), 1)
+                      ]),
+                      _: 1
+                    })) : vue.createCommentVNode("", 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$v, {
+                              key: 0,
+                              labelWidth: "0",
+                              disabled: __props.disabled,
+                              prop: getProp(scope.$index),
+                              rules: column.rules,
+                              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, ["disabled", "prop", "rules", "config", "model", "size"])) : vue.createCommentVNode("", true)
+                          ]),
+                          _: 2
+                        }, 1032, ["prop", "width", "label", "sortable", "class-name"])) : vue.createCommentVNode("", true)
+                      ], 64);
+                    }), 256))
+                  ]),
+                  _: 1
+                }, 8, ["row-key", "data", "border", "max-height"])) : vue.createCommentVNode("", true)
+              ]),
+              _: 1
+            }, 8, ["disabled"]),
+            vue.renderSlot(_ctx.$slots, "default"),
+            vue.unref(addable) ? (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(() => [
+                _hoisted_4$1
+              ]),
+              _: 1
+            }, 8, ["disabled"])) : vue.createCommentVNode("", true),
+            _hoisted_5,
+            __props.enableToggleMode && !isFullscreen.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+              key: 1,
+              icon: vue.unref(iconsVue.Grid),
+              size: "small",
+              type: "primary",
+              onClick: toggleMode
+            }, {
+              default: vue.withCtx(() => [
+                _hoisted_6
+              ]),
+              _: 1
+            }, 8, ["icon"])) : vue.createCommentVNode("", true),
+            __props.config.enableFullscreen !== false ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+              key: 2,
+              icon: vue.unref(iconsVue.FullScreen),
+              size: "small",
+              type: "primary",
+              onClick: toggleFullscreen
+            }, {
+              default: vue.withCtx(() => [
+                vue.createTextVNode(vue.toDisplayString(isFullscreen.value ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F\u7F16\u8F91"), 1)
+              ]),
+              _: 1
+            }, 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
+            }, {
+              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
+            }, 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())
+            }, {
+              default: vue.withCtx(() => [
+                _hoisted_9
+              ]),
+              _: 1
+            }, 8, ["disabled"])) : vue.createCommentVNode("", true)
+          ]),
+          __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,
+              "current-page": pagecontext.value + 1,
+              "page-sizes": [pagesize.value, 60, 120, 300],
+              "page-size": pagesize.value,
+              total: __props.model[vue.unref(modelName)].length,
+              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({
+    ...__default__$m,
+    props: {
+      model: null,
+      config: null,
+      name: null,
+      size: null,
+      labelWidth: null,
+      prop: null,
+      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;
+        if (typeof active === "function")
+          return active(mForm2, { model, formValue: mForm2?.values, prop });
+        if (+activeTabName2 >= 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 mForm = vue.inject("mForm");
+      const activeTabName = vue.ref(getActive(mForm, props, ""));
+      const tabs = vue.computed(() => {
+        if (props.config.dynamic) {
+          if (!props.config.name)
+            throw new Error("dynamic tab \u5FC5\u987B\u914D\u7F6Ename");
+          return props.model[props.config.name] || [];
+        }
+        return props.config.items;
+      });
+      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 = () => {
+        if (!props.config.name)
+          throw new Error("dynamic tab \u5FC5\u987B\u914D\u7F6Ename");
+        if (typeof props.config.onTabAdd === "function") {
+          props.config.onTabAdd(mForm, {
+            model: props.model,
+            prop: props.prop,
+            config: props.config
+          });
+        } else if (tabs.value.length > 0) {
+          const newObj = lodashEs.cloneDeep(tabs.value[0]);
+          newObj.title = `\u6807\u7B7E${tabs.value.length + 1}`;
+          props.model[props.config.name].push(newObj);
+        }
+        emit("change", props.model);
+        mForm?.$emit("field-change", props.prop, props.model[props.config.name]);
+      };
+      const onTabRemove = (tabName) => {
+        if (!props.config.name)
+          throw new Error("dynamic tab \u5FC5\u987B\u914D\u7F6Ename");
+        if (typeof props.config.onTabRemove === "function") {
+          props.config.onTabRemove(mForm, tabName, {
+            model: props.model,
+            prop: props.prop,
+            config: props.config
+          });
+        } else {
+          props.model[props.config.name].splice(+tabName, 1);
+          if (tabName < activeTabName.value || activeTabName.value >= props.model[props.config.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.config.name]);
+      };
+      const display$1 = (displayConfig) => display(mForm, displayConfig, props);
+      const changeHandler = () => {
+        emit("change", props.model);
+        if (typeof props.config.onChange === "function") {
+          props.config.onChange(mForm, { model: props.model, prop: props.prop, config: props.config });
+        }
+      };
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTabs), {
+          modelValue: activeTabName.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => activeTabName.value = $event),
+          class: vue.normalizeClass(__props.config.dynamic ? "magic-form-dynamic-tab" : "magic-form-tab"),
+          type: __props.config.tabType,
+          editable: __props.config.editable || false,
+          "tab-position": __props.config.tabPosition || "top",
+          onTabClick: tabClickHandler,
+          onTabAdd,
+          onTabRemove
+        }, {
+          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.resolveDynamicComponent(vue.unref(uiComponent).component), {
+                  key: tab[vue.unref(mForm)?.keyProp || "__key"] ?? tabIndex,
+                  name: filter(tab.status) || tabIndex.toString(),
+                  label: filter(tab.title),
+                  lazy: tab.lazy || false
+                }, {
+                  default: vue.withCtx(() => [
+                    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(tabItems(tab), (item) => {
+                      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", "disabled", "model", "prop", "size", "label-width", "expand-more"]);
+                    }), 128))
+                  ]),
+                  _: 2
+                }, 1032, ["name", "label", "lazy"])) : vue.createCommentVNode("", true)
+              ], 64);
+            }), 256))
+          ]),
+          _: 1
+        }, 8, ["modelValue", "class", "type", "editable", "tab-position"]);
+      };
+    }
+  });
+
+  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 __default__$l = vue.defineComponent({
+    name: "MFormCascader"
+  });
+  const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$l,
+    props: {
+      config: null,
+      model: null,
+      initValues: null,
+      values: null,
+      name: null,
+      prop: null,
+      disabled: { type: Boolean },
+      size: null
+    },
+    emits: ["change"],
+    setup(__props, { emit }) {
+      const props = __props;
+      const mForm = vue.inject("mForm");
+      useAddField(props.prop);
+      const requestFunc = getConfig("request");
+      const tMagicCascader = vue.ref();
+      const options = Array.isArray(props.config.options) ? vue.ref(props.config.options) : vue.ref([]);
+      const remoteData = vue.ref(null);
+      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]);
+        }
+      };
+      if (typeof props.config.options === "function" && props.model && mForm) {
+        vue.watchEffect(
+          () => options.value = props.config.options(mForm, { model: props.model, formValues: mForm.values })
+        );
+      } else if (!props.config.options || !props.config.options.length || props.config.remote) {
+        Promise.resolve(setRemoteOptions());
+      }
+      const changeHandler = (value) => {
+        if (!tMagicCascader.value)
+          return;
+        tMagicCascader.value.setQuery("");
+        tMagicCascader.value.setPreviousQuery(null);
+        emit("change", value);
+      };
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicCascader), {
+          modelValue: __props.model[__props.name],
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => __props.model[__props.name] = $event),
+          ref_key: "tMagicCascader",
+          ref: tMagicCascader,
+          style: { "width": "100%" },
+          clearable: "",
+          filterable: "",
+          size: __props.size,
+          placeholder: __props.config.placeholder,
+          disabled: __props.disabled,
+          options: vue.unref(options),
+          props: { multiple: __props.config.multiple },
+          onChange: changeHandler
+        }, null, 8, ["modelValue", "size", "placeholder", "disabled", "options", "props"]);
+      };
+    }
+  });
+
+  const __default__$k = vue.defineComponent({
+    name: "MFormCheckbox"
+  });
+  const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$k,
+    props: {
+      config: null,
+      model: null,
+      initValues: null,
+      values: null,
+      name: null,
+      prop: null,
+      disabled: { type: Boolean },
+      size: null
+    },
+    emits: ["change"],
+    setup(__props, { emit }) {
+      const props = __props;
+      useAddField(props.prop);
+      const activeValue = vue.computed(() => {
+        if (typeof props.config.activeValue === "undefined") {
+          if (props.config.filter === "number") {
+            return 1;
+          }
+        } else {
+          return props.config.activeValue;
+        }
+        return void 0;
+      });
+      const inactiveValue = vue.computed(() => {
+        if (typeof props.config.inactiveValue === "undefined") {
+          if (props.config.filter === "number") {
+            return 0;
+          }
+        } else {
+          return props.config.inactiveValue;
+        }
+        return void 0;
+      });
+      const changeHandler = (value) => {
+        emit("change", value);
+      };
+      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),
+          size: __props.size,
+          trueLabel: vue.unref(activeValue),
+          falseLabel: vue.unref(inactiveValue),
+          disabled: __props.disabled,
+          onChange: changeHandler
+        }, {
+          default: vue.withCtx(() => [
+            vue.createTextVNode(vue.toDisplayString(__props.config.text), 1)
+          ]),
+          _: 1
+        }, 8, ["modelValue", "size", "trueLabel", "falseLabel", "disabled"]);
+      };
+    }
+  });
+
+  const __default__$j = vue.defineComponent({
+    name: "MFormCheckGroup"
+  });
+  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$j,
+    props: {
+      config: null,
+      model: null,
+      initValues: null,
+      values: null,
+      name: null,
+      prop: null,
+      disabled: { type: Boolean },
+      size: null
+    },
+    emits: ["change"],
+    setup(__props, { emit }) {
+      const props = __props;
+      useAddField(props.prop);
+      if (props.model && !props.model[props.name]) {
+        props.model[props.name] = [];
+      }
+      const changeHandler = (v) => {
+        emit("change", v);
+      };
+      const mForm = vue.inject("mForm");
+      const options = vue.computed(() => {
+        if (Array.isArray(props.config.options))
+          return props.config.options;
+        if (typeof props.config.options === "function")
+          return filterFunction(mForm, props.config.options, props);
+        return [];
+      });
+      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),
+          size: __props.size,
+          disabled: __props.disabled,
+          onChange: changeHandler
+        }, {
+          default: vue.withCtx(() => [
+            (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,
+                key: option.value,
+                disabled: option.disabled
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createTextVNode(vue.toDisplayString(option.text), 1)
+                ]),
+                _: 2
+              }, 1032, ["label", "disabled"]);
+            }), 128))
+          ]),
+          _: 1
+        }, 8, ["modelValue", "size", "disabled"]);
+      };
+    }
+  });
+
+  const __default__$i = vue.defineComponent({
+    name: "MFormColorPicker"
+  });
+  const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$i,
+    props: {
+      config: null,
+      model: null,
+      initValues: null,
+      values: null,
+      name: null,
+      prop: null,
+      disabled: { type: Boolean },
+      size: null
+    },
+    emits: ["change"],
+    setup(__props, { emit }) {
+      const props = __props;
+      useAddField(props.prop);
+      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),
+          size: __props.size,
+          disabled: __props.disabled,
+          showAlpha: true,
+          onChange: changeHandler
+        }, null, 8, ["modelValue", "size", "disabled"]);
+      };
+    }
+  });
+
+  const __default__$h = vue.defineComponent({
+    name: "MFormDate"
+  });
+  const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$h,
+    props: {
+      config: null,
+      model: null,
+      initValues: null,
+      values: null,
+      name: null,
+      prop: null,
+      disabled: { type: Boolean },
+      size: null
+    },
+    emits: ["change"],
+    setup(__props, { emit }) {
+      const props = __props;
+      useAddField(props.prop);
+      props.model[props.name] = utils.datetimeFormatter(props.model[props.name], "");
+      const changeHandler = (v) => {
+        emit("change", v);
+      };
+      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),
+          type: "date",
+          size: __props.size,
+          placeholder: __props.config.placeholder,
+          disabled: __props.disabled,
+          format: __props.config.format,
+          "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({
+    ...__default__$g,
+    props: {
+      config: null,
+      model: null,
+      initValues: null,
+      values: null,
+      name: null,
+      prop: null,
+      disabled: { type: Boolean },
+      size: null
+    },
+    emits: ["change"],
+    setup(__props, { emit }) {
+      const props = __props;
+      useAddField(props.prop);
+      const { names } = props.config;
+      const value = vue.ref([]);
+      if (props.model !== void 0) {
+        if (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] = new Date(start);
+              if (end !== preEnd)
+                value.value[1] = new Date(end);
+            },
+            {
+              immediate: true
+            }
+          );
+        } else if (props.name && props.model[props.name]) {
+          vue.watch(
+            () => props.model[props.name],
+            (start, preStart) => {
+              if (start !== preStart)
+                value.value = start.map((item) => item ? new Date(item) : void 0);
+            },
+            {
+              immediate: true
+            }
+          );
+        }
+      }
+      const setValue = (v) => {
+        names?.forEach((item, index) => {
+          if (!props.model) {
+            return;
+          }
+          if (Array.isArray(v)) {
+            props.model[item] = utils.datetimeFormatter(v[index]?.toString(), "");
+          } else {
+            props.model[item] = void 0;
+          }
+        });
+      };
+      const changeHandler = (v) => {
+        const value2 = v || [];
+        if (props.name) {
+          emit(
+            "change",
+            value2.map((item) => {
+              if (item)
+                return utils.datetimeFormatter(item, "");
+              return void 0;
+            })
+          );
+        } else {
+          if (names?.length) {
+            setValue(value2);
+          }
+          emit("change", value2);
+        }
+      };
+      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),
+          type: "datetimerange",
+          "range-separator": "-",
+          "start-placeholder": "\u5F00\u59CB\u65E5\u671F",
+          "end-placeholder": "\u7ED3\u675F\u65E5\u671F",
+          size: __props.size,
+          "unlink-panels": true,
+          disabled: __props.disabled,
+          "default-time": __props.config.defaultTime,
+          onChange: changeHandler
+        }, null, 8, ["modelValue", "size", "disabled", "default-time"]);
+      };
+    }
+  });
+
+  const __default__$f = vue.defineComponent({
+    name: "MFormDateTime"
+  });
+  const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$f,
+    props: {
+      config: null,
+      model: null,
+      initValues: null,
+      values: null,
+      name: null,
+      prop: null,
+      disabled: { type: Boolean },
+      size: null
+    },
+    emits: ["change"],
+    setup(__props, { emit }) {
+      const props = __props;
+      useAddField(props.prop);
+      const value = props.model?.[props.name].toString();
+      if (props.model) {
+        if (value === "Invalid Date") {
+          props.model[props.name] = "";
+        } else {
+          props.model[props.name] = utils.datetimeFormatter(props.model[props.name], "", props.config.valueFormat);
+        }
+      }
+      const changeHandler = (v) => {
+        emit("change", v);
+      };
+      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),
+          "popper-class": "magic-datetime-picker-popper",
+          type: "datetime",
+          size: __props.size,
+          placeholder: __props.config.placeholder,
+          disabled: __props.disabled,
+          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"]);
+      };
+    }
+  });
+
+  const _hoisted_1$5 = { key: 0 };
+  const __default__$e = vue.defineComponent({
+    name: "MFormDisplay"
+  });
+  const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$e,
+    props: {
+      config: null,
+      model: null,
+      initValues: null,
+      values: null,
+      name: null,
+      prop: null
+    },
+    setup(__props) {
+      const props = __props;
+      if (props.config.initValue && props.model) {
+        props.model[props.name] = props.config.initValue;
+      }
+      useAddField(props.prop);
+      return (_ctx, _cache) => {
+        return __props.model ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$5, vue.toDisplayString(__props.model[__props.name]), 1)) : vue.createCommentVNode("", true);
+      };
+    }
+  });
+
+  const _hoisted_1$4 = { class: "m-fields-dynamic-field" };
+  const __default__$d = vue.defineComponent({
+    name: "MFormDynamicField"
+  });
+  const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$d,
+    props: {
+      config: null,
+      model: null,
+      initValues: null,
+      values: null,
+      name: null,
+      prop: null,
+      disabled: { type: Boolean },
+      size: null
+    },
+    emits: ["change"],
+    setup(__props, { emit }) {
+      const props = __props;
+      useAddField(props.prop);
+      const request = getConfig("request");
+      const fieldMap = vue.reactive({
+        value: {}
+      });
+      const fieldLabelMap = vue.reactive({
+        value: {}
+      });
+      const changeFieldMap = async () => {
+        if (typeof props.config.returnFields !== "function" || !props.model)
+          return;
+        const fields = await props.config.returnFields(props.config, props.model, request);
+        fieldMap.value = {};
+        fieldLabelMap.value = {};
+        fields.forEach((v) => {
+          if (typeof v !== "object" || v.name === void 0)
+            return;
+          let oldVal = props.model?.[v.name] || "";
+          if (!oldVal && v.defaultValue !== void 0) {
+            oldVal = v.defaultValue;
+            emit("change", oldVal, v.name);
+          }
+          fieldMap.value[v.name] = oldVal;
+          fieldLabelMap.value[v.name] = v.label || "";
+        });
+      };
+      const unwatch = vue.watch(
+        () => props.model?.[props.config.dynamicKey],
+        (val) => {
+          if (val !== "") {
+            changeFieldMap();
+          }
+        },
+        {
+          immediate: true
+        }
+      );
+      vue.onBeforeUnmount(() => {
+        if (typeof unwatch === "function") {
+          unwatch();
+        }
+      });
+      const inputChangeHandler = (key) => {
+        emit("change", fieldMap.value[key], key);
+      };
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
+          vue.createVNode(vue.unref(design.TMagicForm), { size: "small" }, {
+            default: vue.withCtx(() => [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(Object.keys(fieldMap.value), (key) => {
+                return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicFormItem), {
+                  key,
+                  label: fieldLabelMap.value[key]
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(vue.unref(design.TMagicInput), {
+                      modelValue: fieldMap.value[key],
+                      "onUpdate:modelValue": ($event) => fieldMap.value[key] = $event,
+                      placeholder: fieldLabelMap.value[key],
+                      onChange: ($event) => inputChangeHandler(key)
+                    }, null, 8, ["modelValue", "onUpdate:modelValue", "placeholder", "onChange"])
+                  ]),
+                  _: 2
+                }, 1032, ["label"]);
+              }), 128))
+            ]),
+            _: 1
+          })
+        ]);
+      };
+    }
+  });
+
+  const __default__$c = vue.defineComponent({
+    name: "MFormHidden"
+  });
+  const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$c,
+    props: {
+      config: null,
+      model: null,
+      initValues: null,
+      values: null,
+      name: null,
+      prop: null
+    },
+    setup(__props) {
+      const props = __props;
+      useAddField(props.prop);
+      return (_ctx, _cache) => {
+        return __props.model ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
+          key: 0,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => __props.model[__props.name] = $event),
+          type: "hidden"
+        }, null, 512)), [
+          [vue.vModelText, __props.model[__props.name]]
+        ]) : vue.createCommentVNode("", true);
+      };
+    }
+  });
+
+  const __default__$b = vue.defineComponent({
+    name: "MForm"
+  });
+  const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$b,
+    props: {
+      config: { default: () => [] },
+      initValues: { default: () => ({}) },
+      parentValues: { default: () => ({}) },
+      labelWidth: { default: "200px" },
+      disabled: { type: Boolean, default: false },
+      height: { default: "auto" },
+      stepActive: { default: 1 },
+      size: null,
+      inline: { type: Boolean, default: false },
+      labelPosition: { default: "right" },
+      keyProp: { default: "__key" },
+      popperClass: null
+    },
+    emits: ["change", "field-input", "field-change"],
+    setup(__props, { expose, emit }) {
+      const props = __props;
+      const tMagicForm = vue.ref();
+      const initialized = vue.ref(false);
+      const values = vue.ref({});
+      const fields = /* @__PURE__ */ new Map();
+      const requestFuc = getConfig("request");
+      const formState = vue.reactive({
+        keyProp: props.keyProp,
+        popperClass: props.popperClass,
+        config: props.config,
+        initValues: props.initValues,
+        parentValues: props.parentValues,
+        values,
+        $emit: emit,
+        fields,
+        setField: (prop, field) => fields.set(prop, field),
+        getField: (prop) => fields.get(prop),
+        deleteField: (prop) => fields.delete(prop),
+        post: (options) => {
+          if (requestFuc) {
+            return requestFuc({
+              ...options,
+              method: "POST"
+            });
+          }
+        }
+      });
+      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],
+        ([config], [preConfig]) => {
+          if (!isEqual__default.default(vue.toRaw(config), vue.toRaw(preConfig))) {
+            initialized.value = false;
+          }
+          initValue(formState, {
+            initValues: props.initValues,
+            config: props.config
+          }).then((value) => {
+            values.value = value;
+            initialized.value = true;
+          });
+        },
+        { immediate: true }
+      );
+      const changeHandler = () => {
+        emit("change", values.value);
+      };
+      expose({
+        values,
+        formState,
+        initialized,
+        changeHandler,
+        resetForm: () => tMagicForm.value?.resetFields(),
+        submitForm: async (native) => {
+          try {
+            await tMagicForm.value?.validate();
+            return native ? values.value : cloneDeep__default.default(vue.toRaw(values.value));
+          } catch (invalidFields) {
+            const error = [];
+            Object.entries(invalidFields).forEach(([, ValidateError]) => {
+              ValidateError.forEach(({ field, message }) => {
+                if (field && message)
+                  error.push(`${field} -> ${message}`);
+                if (field && !message)
+                  error.push(`${field} -> \u51FA\u73B0\u9519\u8BEF`);
+                if (!field && message)
+                  error.push(`${message}`);
+              });
+            });
+            throw new Error(error.join("<br>"));
+          }
+        }
+      });
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicForm), {
+          class: "m-form",
+          ref_key: "tMagicForm",
+          ref: tMagicForm,
+          model: values.value,
+          "label-width": __props.labelWidth,
+          style: vue.normalizeStyle(`height: ${__props.height}`),
+          inline: __props.inline,
+          "label-position": __props.labelPosition
+        }, {
+          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,
+                "label-width": item.labelWidth || __props.labelWidth,
+                "step-active": __props.stepActive,
+                size: __props.size,
+                onChange: changeHandler
+              }, null, 8, ["disabled", "config", "model", "label-width", "step-active", "size"]);
+            }), 128)) : vue.createCommentVNode("", true)
+          ]),
+          _: 1
+        }, 8, ["model", "label-width", "style", "inline", "label-position"]);
+      };
+    }
+  });
+
+  const _hoisted_1$3 = { style: { "min-height": "1px" } };
+  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({
+    ...__default__$a,
+    props: {
+      config: { default: () => [] },
+      values: { default: () => ({}) },
+      parentValues: null,
+      width: null,
+      labelWidth: null,
+      fullscreen: { type: Boolean },
+      disabled: { type: Boolean },
+      title: null,
+      zIndex: null,
+      size: null,
+      confirmText: { default: "\u786E\u5B9A" }
+    },
+    emits: ["close", "submit", "error", "change"],
+    setup(__props, { expose, emit }) {
+      const props = __props;
+      const form = vue.ref();
+      const dialogVisible = vue.ref(false);
+      const saveFetch = vue.ref(false);
+      const stepActive = vue.ref(1);
+      const bodyHeight = vue.ref(`${document.body.clientHeight - 194}px`);
+      const stepCount = vue.computed(() => {
+        const { length } = props.config;
+        for (let index = 0; index < length; index++) {
+          if (props.config[index].type === "step") {
+            return props.config[index].items.length;
+          }
+        }
+        return 0;
+      });
+      const hasStep = vue.computed(() => {
+        const { length } = props.config;
+        for (let index = 0; index < length; index++) {
+          if (props.config[index].type === "step") {
+            return true;
+          }
+        }
+        return false;
+      });
+      const cancel = () => {
+        dialogVisible.value = false;
+      };
+      const closeHandler = () => {
+        stepActive.value = 1;
+        emit("close");
+      };
+      const save = async () => {
+        try {
+          const values = await form.value?.submitForm();
+          emit("submit", values);
+        } catch (e) {
+          emit("error", e);
+        }
+      };
+      const preStep = () => {
+        stepActive.value -= 1;
+      };
+      const nextStep = () => {
+        stepActive.value += 1;
+      };
+      const changeHandler = (value) => {
+        emit("change", value);
+      };
+      expose({
+        form,
+        saveFetch,
+        dialogVisible,
+        cancel,
+        save
+      });
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDialog), {
+          modelValue: dialogVisible.value,
+          "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => dialogVisible.value = $event),
+          class: "m-form-dialog",
+          top: "20px",
+          "append-to-body": "",
+          title: __props.title,
+          width: __props.width,
+          zIndex: __props.zIndex,
+          fullscreen: __props.fullscreen,
+          "close-on-click-modal": false,
+          onClose: closeHandler
+        }, {
+          footer: vue.withCtx(() => [
+            vue.createVNode(vue.unref(design.TMagicRow), { class: "dialog-footer" }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(vue.unref(design.TMagicCol), {
+                  span: 12,
+                  style: { "text-align": "left" }
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createElementVNode("div", _hoisted_1$3, [
+                      vue.renderSlot(_ctx.$slots, "left")
+                    ])
+                  ]),
+                  _: 3
+                }),
+                vue.createVNode(vue.unref(design.TMagicCol), { span: 12 }, {
+                  default: vue.withCtx(() => [
+                    vue.renderSlot(_ctx.$slots, "footer", {}, () => [
+                      vue.createVNode(vue.unref(design.TMagicButton), {
+                        onClick: cancel,
+                        size: "small"
+                      }, {
+                        default: vue.withCtx(() => [
+                          _hoisted_2$1
+                        ]),
+                        _: 1
+                      }),
+                      vue.unref(hasStep) && stepActive.value > 1 ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+                        key: 0,
+                        type: "info",
+                        size: "small",
+                        onClick: preStep
+                      }, {
+                        default: vue.withCtx(() => [
+                          _hoisted_3$1
+                        ]),
+                        _: 1
+                      })) : vue.createCommentVNode("", true),
+                      vue.unref(hasStep) && vue.unref(stepCount) > stepActive.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+                        key: 1,
+                        type: "info",
+                        size: "small",
+                        onClick: nextStep
+                      }, {
+                        default: vue.withCtx(() => [
+                          _hoisted_4
+                        ]),
+                        _: 1
+                      })) : (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+                        key: 2,
+                        type: "primary",
+                        size: "small",
+                        loading: saveFetch.value,
+                        onClick: save
+                      }, {
+                        default: vue.withCtx(() => [
+                          vue.createTextVNode(vue.toDisplayString(__props.confirmText), 1)
+                        ]),
+                        _: 1
+                      }, 8, ["loading"]))
+                    ])
+                  ]),
+                  _: 3
+                })
+              ]),
+              _: 3
+            })
+          ]),
+          default: vue.withCtx(() => [
+            dialogVisible.value ? (vue.openBlock(), vue.createElementBlock("div", {
+              key: 0,
+              class: "m-dialog-body",
+              style: vue.normalizeStyle(`max-height: ${bodyHeight.value}; overflow-y: auto; overflow-x: hidden;`)
+            }, [
+              vue.createVNode(_sfc_main$b, {
+                modelValue: stepActive.value,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => stepActive.value = $event),
+                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", "disabled", "config", "init-values", "parent-values", "label-width"]),
+              vue.renderSlot(_ctx.$slots, "default")
+            ], 4)) : vue.createCommentVNode("", true)
+          ]),
+          _: 3
+        }, 8, ["modelValue", "title", "width", "zIndex", "fullscreen"]);
+      };
+    }
+  });
+
+  const _hoisted_1$2 = ["href"];
+  const _hoisted_2 = {
+    key: 2,
+    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({
+    ...__default__$9,
+    props: {
+      config: null,
+      model: null,
+      initValues: null,
+      values: null,
+      name: null,
+      prop: null,
+      disabled: { type: Boolean },
+      size: null
+    },
+    emits: ["change"],
+    setup(__props, { emit }) {
+      const props = __props;
+      useAddField(props.prop);
+      const formValue = vue.ref({});
+      const editor = vue.ref();
+      const mForm = vue.inject("mForm");
+      const href = vue.computed(() => {
+        if (typeof props.config.href === "function" && props.model) {
+          return props.config.href(props.model);
+        }
+        return props.config.href || props.model?.[props.name];
+      });
+      const init = () => {
+        formValue.value = props.model?.[props.name] || {};
+      };
+      const formConfig = vue.computed(() => {
+        if (typeof props.config.form === "function") {
+          return props.config.form(mForm, {
+            model: props.model || {},
+            values: props.values || {}
+          });
+        }
+        return props.config.form;
+      });
+      const displayText = vue.computed(() => {
+        if (typeof props.config.displayText === "function") {
+          return props.config.displayText(mForm, { model: props.model || {} });
+        }
+        if (props.config.displayText) {
+          return props.config.displayText;
+        }
+        return "\u8DF3\u8F6C";
+      });
+      const editHandler = () => {
+        init();
+        editor.value && (editor.value.dialogVisible = true);
+      };
+      const action = (data) => {
+        if (props.model) {
+          props.model[props.name] = data;
+          formValue.value = data;
+          emit("change", props.model[props.name]);
+        }
+        editor.value && (editor.value.dialogVisible = false);
+      };
+      return (_ctx, _cache) => {
+        return __props.config.href && !__props.disabled ? (vue.openBlock(), vue.createElementBlock("a", {
+          key: 0,
+          target: "_blank",
+          href: vue.unref(href),
+          style: vue.normalizeStyle(__props.config.css || {})
+        }, vue.toDisplayString(vue.unref(displayText)), 13, _hoisted_1$2)) : __props.config.href && __props.disabled ? (vue.openBlock(), vue.createElementBlock("span", {
+          key: 1,
+          style: vue.normalizeStyle(__props.config.disabledCss || {})
+        }, vue.toDisplayString(vue.unref(displayText)), 5)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+          vue.createVNode(vue.unref(design.TMagicButton), {
+            text: true,
+            type: "primary",
+            onClick: editHandler
+          }, {
+            default: vue.withCtx(() => [
+              _hoisted_3
+            ]),
+            _: 1
+          }),
+          vue.createVNode(_sfc_main$a, {
+            ref_key: "editor",
+            ref: editor,
+            title: __props.config.formTitle || "\u7F16\u8F91\u6269\u5C55\u914D\u7F6E",
+            width: __props.config.formWidth,
+            values: formValue.value,
+            config: vue.unref(formConfig),
+            parentValues: __props.values,
+            fullscreen: __props.config.fullscreen,
+            onSubmit: action
+          }, null, 8, ["title", "width", "values", "config", "parentValues", "fullscreen"])
+        ]));
+      };
+    }
+  });
+
+  const __default__$8 = vue.defineComponent({
+    name: "MFormNumber"
+  });
+  const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$8,
+    props: {
+      config: null,
+      model: null,
+      initValues: null,
+      values: null,
+      name: null,
+      prop: null,
+      disabled: { type: Boolean },
+      size: null
+    },
+    emits: ["change", "input"],
+    setup(__props, { emit }) {
+      const props = __props;
+      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 __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),
+          clearable: "",
+          "controls-position": "right",
+          size: __props.size,
+          max: __props.config.max,
+          min: __props.config.min,
+          step: __props.config.step,
+          placeholder: __props.config.placeholder,
+          disabled: __props.disabled,
+          onChange: changeHandler,
+          onInput: inputHandler
+        }, null, 8, ["modelValue", "size", "max", "min", "step", "placeholder", "disabled"])) : vue.createCommentVNode("", true);
+      };
+    }
+  });
+
+  const __default__$7 = vue.defineComponent({
+    name: "MFormRadioGroup"
+  });
+  const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$7,
+    props: {
+      config: null,
+      model: null,
+      initValues: null,
+      values: null,
+      name: null,
+      prop: null,
+      disabled: { type: Boolean },
+      size: null
+    },
+    emits: ["change"],
+    setup(__props, { emit }) {
+      const props = __props;
+      const changeHandler = (value) => {
+        emit("change", value);
+      };
+      useAddField(props.prop);
+      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),
+          size: __props.size,
+          disabled: __props.disabled,
+          onChange: changeHandler
+        }, {
+          default: vue.withCtx(() => [
+            (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,
+                key: `${option.value}`
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createTextVNode(vue.toDisplayString(option.text), 1)
+                ]),
+                _: 2
+              }, 1032, ["label"]);
+            }), 128))
+          ]),
+          _: 1
+        }, 8, ["modelValue", "size", "disabled"])) : vue.createCommentVNode("", true);
+      };
+    }
+  });
+
+  const __default__$6 = vue.defineComponent({
+    name: "MFormSelectOptionGroups"
+  });
+  const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$6,
+    props: {
+      options: null
+    },
+    setup(__props) {
+      const uiComponent = design.getConfig("components").option;
+      return (_ctx, _cache) => {
+        return vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.options, (group, index) => {
+          return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicOptionGroup), {
+            key: index,
+            label: group.label,
+            disabled: group.disabled
+          }, {
+            default: vue.withCtx(() => [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(group.options, (item, index2) => {
+                return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(uiComponent).component), {
+                  key: index2,
+                  label: item.label || item.text,
+                  value: item.value,
+                  disabled: item.disabled
+                }, null, 8, ["label", "value", "disabled"]);
+              }), 128))
+            ]),
+            _: 2
+          }, 1032, ["label", "disabled"]);
+        }), 128);
+      };
+    }
+  });
+
+  const __default__$5 = vue.defineComponent({
+    name: "MFormSelectOptions"
+  });
+  const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$5,
+    props: {
+      options: null,
+      valueKey: null
+    },
+    setup(__props) {
+      return (_ctx, _cache) => {
+        return vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.options, (option) => {
+          return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicOption), {
+            label: option.text,
+            value: option.value,
+            key: __props.valueKey ? option.value[__props.valueKey] : option.value,
+            disabled: option.disabled
+          }, null, 8, ["label", "value", "disabled"]);
+        }), 128);
+      };
+    }
+  });
+
+  const _hoisted_1$1 = { key: 2 };
+  const __default__$4 = vue.defineComponent({
+    name: "MFormSelect"
+  });
+  const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$4,
+    props: {
+      config: null,
+      model: null,
+      initValues: null,
+      values: null,
+      name: null,
+      prop: null,
+      disabled: { type: Boolean },
+      size: null
+    },
+    emits: ["change"],
+    setup(__props, { emit }) {
+      const props = __props;
+      if (!props.model)
+        throw new Error("\u4E0D\u80FD\u6CA1\u6709model");
+      useAddField(props.prop);
+      const tMagicSelect = vue.ref();
+      const mForm = vue.inject("mForm");
+      const options = vue.ref([]);
+      const localOptions = vue.ref([]);
+      const loading = vue.ref(false);
+      const moreLoadingVisible = vue.ref(false);
+      const total = vue.ref(0);
+      const pgIndex = vue.ref(0);
+      const pgSize = vue.ref(20);
+      const query = vue.ref("");
+      const remoteData = vue.ref([]);
+      const remote = vue.ref(true);
+      const equalValue = (value, v) => {
+        if (typeof v === "object") {
+          const key = props.config.valueKey || "value";
+          return v[key] === value[key];
+        }
+        return value === v;
+      };
+      const mapOptions = (data) => {
+        const { option } = props.config;
+        const { text } = option;
+        const { value } = option;
+        return data.map((item) => ({
+          text: typeof text === "function" ? text(item) : item[text || "text"],
+          value: typeof value === "function" ? value(item) : item[value || "value"]
+        }));
+      };
+      const getOptions = async () => {
+        if (!props.model)
+          return [];
+        if (localOptions.value.length) {
+          return localOptions.value;
+        }
+        loading.value = true;
+        let items = [];
+        const { config } = props;
+        const { option } = config;
+        let { body } = option;
+        let postOptions = {
+          method: option.method || "POST",
+          url: option.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;
+        }
+        const requestFuc = getConfig("request");
+        if (typeof option.beforeRequest === "function") {
+          postOptions = option.beforeRequest(mForm, postOptions, {
+            model: props.model,
+            formValue: mForm?.values
+          });
+        }
+        if (option.method?.toLocaleLowerCase() === "jsonp") {
+          postOptions.jsonpCallback = option.jsonpCallback || "callback";
+        }
+        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
+          });
+        }
+        const optionsData = res[option.root];
+        if (res.total > 0) {
+          total.value = res.total;
+        }
+        remoteData.value = remoteData.value.concat(optionsData);
+        if (optionsData) {
+          if (typeof option.item === "function") {
+            items = option.item(optionsData);
+          } else if (optionsData.map) {
+            items = mapOptions(optionsData);
+          }
+        }
+        loading.value = false;
+        const selectedOptions = [];
+        if (props.config.multiple && props.model[props.name]) {
+          options.value.forEach((o) => {
+            const isInclude = props.model?.[props.name].includes(o.value);
+            if (isInclude && !items.find((op) => op.value === o.value)) {
+              selectedOptions.push(o);
+            }
+          });
+        }
+        return pgIndex.value === 0 ? selectedOptions.concat(items) : options.value.concat(items);
+      };
+      const getInitLocalOption = async () => {
+        if (!props.model)
+          return [];
+        const value = props.model[props.name];
+        const { config } = props;
+        localOptions.value = await getOptions();
+        remote.value = false;
+        if (config.group) {
+          if (config.multiple && value.findIndex) {
+            return localOptions.value.filter(
+              (group) => group.options.findIndex((item) => value.find((v) => equalValue(item.value, v)) > -1) > -1
+            );
+          }
+          return localOptions.value.filter(
+            (group) => group.options.findIndex((item) => equalValue(item.value, value)) > -1
+          );
+        }
+        if (config.multiple && value.findIndex) {
+          return localOptions.value.filter((item) => value.findIndex((v) => equalValue(item.value, v)) > -1);
+        }
+        return localOptions.value.filter((item) => equalValue(item.value, value));
+      };
+      const getInitOption = async () => {
+        if (!props.model)
+          return [];
+        const { config } = props;
+        const { option } = config;
+        let options2 = [];
+        let url = option.initUrl;
+        if (!url) {
+          return getInitLocalOption();
+        }
+        if (typeof url === "function") {
+          url = await url(mForm, { model: props.model, formValue: mForm?.values });
+        }
+        const postOptions = {
+          method: option.method || "POST",
+          url,
+          data: {
+            id: props.model[props.name]
+          },
+          mode: option.mode,
+          headers: option.headers || {},
+          json: option.json || false
+        };
+        if (option.method?.toLocaleLowerCase() === "jsonp") {
+          postOptions.jsonpCallback = option.jsonpCallback || "callback";
+        }
+        const requestFuc = getConfig("request");
+        const res = await requestFuc(postOptions);
+        let initData = res[option.root];
+        if (initData) {
+          if (!Array.isArray(initData)) {
+            initData = [initData];
+          }
+          if (typeof option.item === "function") {
+            options2 = option.item(initData);
+          } else if (initData.map) {
+            options2 = mapOptions(initData);
+          }
+        }
+        return options2;
+      };
+      if (typeof props.config.options === "function") {
+        vue.watchEffect(() => {
+          typeof props.config.options === "function" && Promise.resolve(
+            props.config.options(mForm, {
+              model: props.model,
+              prop: props.prop,
+              formValues: mForm?.values,
+              formValue: mForm?.values,
+              config: props.config
+            })
+          ).then((data) => {
+            options.value = data;
+          });
+        });
+      } else if (Array.isArray(props.config.options)) {
+        vue.watchEffect(() => {
+          options.value = props.config.options;
+        });
+      } else if (props.config.option) {
+        vue.onBeforeMount(() => {
+          if (!props.model)
+            return;
+          const v = props.model[props.name];
+          if (Array.isArray(v) ? v.length : typeof v !== "undefined") {
+            getInitOption().then((data) => {
+              options.value = data;
+            });
+          }
+        });
+      }
+      props.config.remote && vue.onMounted(async () => {
+        await vue.nextTick();
+        tMagicSelect.value?.scrollbarWrap?.addEventListener("scroll", async (e) => {
+          const el = e.currentTarget;
+          if (moreLoadingVisible.value) {
+            return;
+          }
+          if (el.scrollHeight - el.clientHeight - el.scrollTop > 1) {
+            return;
+          }
+          if (total.value <= options.value.length) {
+            return;
+          }
+          moreLoadingVisible.value = true;
+          pgIndex.value += 1;
+          options.value = await getOptions();
+          moreLoadingVisible.value = false;
+        });
+      });
+      const popperClass = mForm?.popperClass;
+      const changeHandler = (value) => {
+        emit("change", value);
+      };
+      const visibleHandler = async (visible) => {
+        if (!visible)
+          return;
+        if (!props.config.remote)
+          return;
+        if (query.value && tMagicSelect.value) {
+          tMagicSelect.value.setQuery(query.value);
+          tMagicSelect.value.setPreviousQuery(query.value);
+          tMagicSelect.value.setSelectedLabel(query.value);
+        } else if (options.value.length <= (props.config.multiple ? props.model?.[props.name].length : 1)) {
+          options.value = await getOptions();
+        }
+      };
+      const remoteMethod = async (q) => {
+        if (!localOptions.value.length) {
+          query.value = q;
+          pgIndex.value = 0;
+          options.value = await getOptions();
+          if (props.config.multiple)
+            setTimeout(() => {
+              tMagicSelect.value?.setSelected();
+            }, 0);
+        }
+      };
+      const itemOptions = options;
+      const groupOptions = options;
+      return (_ctx, _cache) => {
+        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),
+          class: "m-select",
+          ref_key: "tMagicSelect",
+          ref: tMagicSelect,
+          clearable: "",
+          filterable: "",
+          "popper-class": `m-select-popper ${vue.unref(popperClass)}`,
+          size: __props.size,
+          remote: remote.value,
+          placeholder: __props.config.placeholder,
+          multiple: __props.config.multiple,
+          "value-key": __props.config.valueKey || "value",
+          "allow-create": __props.config.allowCreate,
+          disabled: __props.disabled,
+          "remote-method": __props.config.remote && remoteMethod,
+          onChange: changeHandler,
+          onVisibleChange: visibleHandler
+        }, {
+          default: vue.withCtx(() => [
+            __props.config.group ? (vue.openBlock(), vue.createBlock(_sfc_main$6, {
+              key: 0,
+              options: vue.unref(groupOptions)
+            }, null, 8, ["options"])) : (vue.openBlock(), vue.createBlock(_sfc_main$5, {
+              key: 1,
+              options: vue.unref(itemOptions)
+            }, null, 8, ["options"])),
+            moreLoadingVisible.value ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, null, 512)), [
+              [_directive_loading, true]
+            ]) : vue.createCommentVNode("", true)
+          ]),
+          _: 1
+        }, 8, ["modelValue", "popper-class", "size", "remote", "placeholder", "multiple", "value-key", "allow-create", "disabled", "remote-method"])), [
+          [_directive_loading, loading.value]
+        ]) : vue.createCommentVNode("", true);
+      };
+    }
+  });
+
+  const __default__$3 = vue.defineComponent({
+    name: "MFormSwitch"
+  });
+  const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$3,
+    props: {
+      config: null,
+      model: null,
+      initValues: null,
+      values: null,
+      name: null,
+      prop: null,
+      disabled: { type: Boolean },
+      size: null
+    },
+    emits: ["change"],
+    setup(__props, { emit }) {
+      const props = __props;
+      useAddField(props.prop);
+      const changeHandler = (value) => {
+        emit("change", value);
+      };
+      const activeValue = vue.computed(() => {
+        if (typeof props.config.activeValue === "undefined") {
+          if (props.config.filter === "number") {
+            return 1;
+          }
+        } else {
+          return props.config.activeValue;
+        }
+        return true;
+      });
+      const inactiveValue = vue.computed(() => {
+        if (typeof props.config.inactiveValue === "undefined") {
+          if (props.config.filter === "number") {
+            return 0;
+          }
+        } else {
+          return props.config.inactiveValue;
+        }
+        return false;
+      });
+      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),
+          size: __props.size,
+          activeValue: vue.unref(activeValue),
+          inactiveValue: vue.unref(inactiveValue),
+          disabled: __props.disabled,
+          onChange: changeHandler
+        }, null, 8, ["modelValue", "size", "activeValue", "inactiveValue", "disabled"]);
+      };
+    }
+  });
+
+  const _hoisted_1 = { key: 0 };
+  const __default__$2 = vue.defineComponent({
+    name: "MFormText"
+  });
+  const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$2,
+    props: {
+      config: null,
+      model: null,
+      initValues: null,
+      values: null,
+      name: null,
+      prop: null,
+      disabled: { type: Boolean },
+      size: null
+    },
+    emits: ["change", "input"],
+    setup(__props, { emit }) {
+      const props = __props;
+      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);
+      };
+      const buttonClickHandler = () => {
+        if (typeof props.config.append === "string")
+          return;
+        if (props.config.append?.handler) {
+          props.config.append.handler(mForm, {
+            model: props.model,
+            values: mForm?.values
+          });
+        }
+      };
+      const keyUpHandler = ($event) => {
+        if (!props.model)
+          return;
+        if (!props.name)
+          return;
+        const arrowUp = $event.key === "ArrowUp";
+        const arrowDown = $event.key === "ArrowDown";
+        if (!arrowUp && !arrowDown) {
+          return;
+        }
+        const value = props.model[props.name];
+        let num;
+        let unit;
+        if (utils.isNumber(value)) {
+          num = +value;
+        } else {
+          value.replace(/^([0-9.]+)([a-z%]+)$/, ($0, $1, $2) => {
+            num = +$1;
+            unit = $2;
+          });
+        }
+        if (num === void 0) {
+          return;
+        }
+        const ctrl = navigator.platform.match("Mac") ? $event.metaKey : $event.ctrlKey;
+        const shift = $event.shiftKey;
+        const alt = $event.altKey;
+        if (arrowUp) {
+          if (ctrl) {
+            num += 100;
+          } else if (alt) {
+            num = (num * 1e4 + 1e3) / 1e4;
+          } else if (shift) {
+            num = num + 10;
+          } else {
+            num += 1;
+          }
+        } else if (arrowDown) {
+          if (ctrl) {
+            num -= 100;
+          } else if (alt) {
+            num = (num * 1e4 - 1e3) / 1e4;
+          } else if (shift) {
+            num -= 10;
+          } else {
+            num -= 1;
+          }
+        }
+        props.model[props.name] = `${num}${unit || ""}`;
+        emit("change", props.model[props.name]);
+      };
+      return (_ctx, _cache) => {
+        const _component_el_button = vue.resolveComponent("el-button");
+        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),
+          clearable: "",
+          size: __props.size,
+          placeholder: __props.config.placeholder,
+          disabled: __props.disabled,
+          onChange: changeHandler,
+          onInput: inputHandler,
+          onKeyup: _cache[1] || (_cache[1] = ($event) => keyUpHandler($event))
+        }, vue.createSlots({ _: 2 }, [
+          __props.config.append ? {
+            name: "append",
+            fn: vue.withCtx(() => [
+              typeof __props.config.append === "string" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1, vue.toDisplayString(__props.config.append), 1)) : vue.createCommentVNode("", true),
+              typeof __props.config.append === "object" && __props.config.append.type === "button" ? (vue.openBlock(), vue.createBlock(_component_el_button, {
+                key: 1,
+                style: { "color": "#409eff" },
+                size: __props.size,
+                onClick: vue.withModifiers(buttonClickHandler, ["prevent"])
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createTextVNode(vue.toDisplayString(__props.config.append.text), 1)
+                ]),
+                _: 1
+              }, 8, ["size", "onClick"])) : vue.createCommentVNode("", true)
+            ])
+          } : void 0
+        ]), 1032, ["modelValue", "size", "placeholder", "disabled"]);
+      };
+    }
+  });
+
+  const __default__$1 = vue.defineComponent({
+    name: "MFormTextarea"
+  });
+  const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$1,
+    props: {
+      config: null,
+      model: null,
+      initValues: null,
+      values: null,
+      name: null,
+      prop: null,
+      disabled: { type: Boolean },
+      size: null
+    },
+    emits: ["change", "input"],
+    setup(__props, { emit }) {
+      const props = __props;
+      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), {
+          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"]);
+      };
+    }
+  });
+
+  const __default__ = vue.defineComponent({
+    name: "MFormTime"
+  });
+  const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+    ...__default__,
+    props: {
+      config: null,
+      model: null,
+      initValues: null,
+      values: null,
+      name: null,
+      prop: null,
+      disabled: { type: Boolean },
+      size: null
+    },
+    emits: ["change"],
+    setup(__props, { emit }) {
+      const props = __props;
+      useAddField(props.prop);
+      const changeHandler = (v) => {
+        emit("change", v);
+      };
+      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"]);
+      };
+    }
+  });
+
+  const index$1 = '';
+
+  const defaultInstallOpt = {};
+  const install = (app, opt) => {
+    const option = Object.assign(defaultInstallOpt, opt);
+    app.config.globalProperties.$MAGIC_FORM = option;
+    setConfig(option);
+    app.component("m-form", _sfc_main$b);
+    app.component("m-form-dialog", _sfc_main$a);
+    app.component("m-form-container", _sfc_main$v);
+    app.component("m-form-fieldset", _sfc_main$u);
+    app.component("m-form-group-list", _sfc_main$s);
+    app.component("m-form-panel", _sfc_main$r);
+    app.component("m-form-row", _sfc_main$p);
+    app.component("m-form-step", _sfc_main$o);
+    app.component("m-form-table", _sfc_main$n);
+    app.component("m-form-tab", _sfc_main$m);
+    app.component("m-fields-text", _sfc_main$2);
+    app.component("m-fields-number", _sfc_main$8);
+    app.component("m-fields-textarea", _sfc_main$1);
+    app.component("m-fields-hidden", _sfc_main$c);
+    app.component("m-fields-date", _sfc_main$h);
+    app.component("m-fields-datetime", _sfc_main$f);
+    app.component("m-fields-daterange", _sfc_main$g);
+    app.component("m-fields-time", _sfc_main);
+    app.component("m-fields-checkbox", _sfc_main$k);
+    app.component("m-fields-switch", _sfc_main$3);
+    app.component("m-fields-color-picker", _sfc_main$i);
+    app.component("m-fields-checkbox-group", _sfc_main$j);
+    app.component("m-fields-radio-group", _sfc_main$7);
+    app.component("m-fields-display", _sfc_main$e);
+    app.component("m-fields-link", _sfc_main$9);
+    app.component("m-fields-select", _sfc_main$4);
+    app.component("m-fields-cascader", _sfc_main$l);
+    app.component("m-fields-dynamic-field", _sfc_main$d);
+  };
+  const index = {
+    install
+  };
+
+  exports.MCascader = _sfc_main$l;
+  exports.MCheckbox = _sfc_main$k;
+  exports.MCheckboxGroup = _sfc_main$j;
+  exports.MColorPicker = _sfc_main$i;
+  exports.MContainer = _sfc_main$v;
+  exports.MDate = _sfc_main$h;
+  exports.MDateTime = _sfc_main$f;
+  exports.MDaterange = _sfc_main$g;
+  exports.MDisplay = _sfc_main$e;
+  exports.MDynamicField = _sfc_main$d;
+  exports.MFieldset = _sfc_main$u;
+  exports.MForm = _sfc_main$b;
+  exports.MFormDialog = _sfc_main$a;
+  exports.MGroupList = _sfc_main$s;
+  exports.MHidden = _sfc_main$c;
+  exports.MLink = _sfc_main$9;
+  exports.MNumber = _sfc_main$8;
+  exports.MPanel = _sfc_main$r;
+  exports.MRadioGroup = _sfc_main$7;
+  exports.MRow = _sfc_main$p;
+  exports.MSelect = _sfc_main$4;
+  exports.MSwitch = _sfc_main$3;
+  exports.MTable = _sfc_main$n;
+  exports.MTabs = _sfc_main$m;
+  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;
+  exports.getRules = getRules;
+  exports.initValue = initValue;
+  exports.useAddField = useAddField;
+
+  Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+}));
+//# sourceMappingURL=tmagic-form.umd.cjs.map