@tmagic/form 1.3.0-alpha.9 → 1.3.0-beta.1

package/dist/tmagic-form.umd.cjs

@@ -90,7 +90,7 @@
     if (["switch", "checkbox"].includes(type)) {
       return false;
     }
-    if (multiple) {
+    if (multiple || type === "number-range") {
       return [];
     }
     return "";
@@ -105,7 +105,8 @@
       parent: mForm?.parentValues || {},
       formValue: mForm?.values || props.model,
       prop: props.prop,
-      config: props.config
+      config: props.config,
+      index: props.index
     });
   };
   const display = function(mForm, config, props) {
@@ -164,10 +165,10 @@
     return valuesTmp || {};
   };
 
-  const _hoisted_1$b = ["innerHTML"];
-  const _hoisted_2$6 = ["innerHTML"];
+  const _hoisted_1$d = ["innerHTML"];
+  const _hoisted_2$7 = ["innerHTML"];
   const _hoisted_3$4 = ["innerHTML"];
-  const _hoisted_4$4 = ["innerHTML"];
+  const _hoisted_4$3 = ["innerHTML"];
   const _hoisted_5$3 = ["innerHTML"];
   const _hoisted_6$1 = ["innerHTML"];
   const _hoisted_7$1 = ["innerHTML"];
@@ -180,7 +181,7 @@
     key: 5,
     style: { "text-align": "center" }
   };
-  const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormContainer"
     },
@@ -230,6 +231,7 @@
         return "m-fields-text";
       });
       const disabled = vue.computed(() => props.disabled || filterFunction(mForm, props.config.disabled, props));
+      const text = vue.computed(() => filterFunction(mForm, props.config.text, props));
       const tooltip = vue.computed(() => filterFunction(mForm, props.config.tooltip, props));
       const extra = vue.computed(() => filterFunction(mForm, props.config.extra, props));
       const rule = vue.computed(() => getRules(mForm, props.config.rules, props));
@@ -260,7 +262,7 @@
         (showDiff2) => {
           if (type.value === "hidden")
             return;
-          if (items.value && !props.config.text && type.value && display$1.value)
+          if (items.value && !text.value && type.value && display$1.value)
             return;
           if (display$1.value && showDiff2 && type.value) {
             emit("addDiffCount");
@@ -328,7 +330,7 @@
         return _ctx.config ? (vue.openBlock(), vue.createElementBlock("div", {
           key: 0,
           style: vue.normalizeStyle(_ctx.config.tip ? "display: flex;align-items: baseline;" : ""),
-          class: vue.normalizeClass([_ctx.config.className, "m-form-container"])
+          class: vue.normalizeClass(`m-form-container m-container-${type.value || ""} ${_ctx.config.className || ""}`)
         }, [
           type.value === "hidden" ? (vue.openBlock(), vue.createBlock(_component_m_fields_hidden, {
             key: 0,
@@ -337,7 +339,7 @@
             name: _ctx.config.name,
             disabled: disabled.value,
             prop: itemProp.value
-          }, null, 8, ["model", "config", "name", "disabled", "prop"])) : items.value && !_ctx.config.text && type.value && display$1.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tagName.value), {
+          }, null, 8, ["model", "config", "name", "disabled", "prop"])) : items.value && !text.value && type.value && display$1.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tagName.value), {
             key: key(_ctx.config),
             size: _ctx.size,
             model: _ctx.model,
@@ -355,20 +357,20 @@
           }, null, 40, ["size", "model", "last-values", "is-compare", "config", "disabled", "name", "prop", "step-active", "expand-more", "label-width"])) : type.value && display$1.value && !showDiff.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
             vue.createVNode(vue.unref(design.TMagicFormItem), {
               style: vue.normalizeStyle(_ctx.config.tip ? "flex: 1" : ""),
-              class: vue.normalizeClass({ hidden: `${itemLabelWidth.value}` === "0" || !_ctx.config.text }),
+              class: vue.normalizeClass({ hidden: `${itemLabelWidth.value}` === "0" || !text.value }),
               prop: itemProp.value,
               "label-width": itemLabelWidth.value,
               rules: rule.value
             }, {
               label: vue.withCtx(() => [
                 vue.createElementVNode("span", {
-                  innerHTML: type.value === "checkbox" ? "" : _ctx.config.text
-                }, null, 8, _hoisted_1$b)
+                  innerHTML: type.value === "checkbox" ? "" : text.value
+                }, null, 8, _hoisted_1$d)
               ]),
               default: vue.withCtx(() => [
                 tooltip.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), { key: 0 }, {
                   content: vue.withCtx(() => [
-                    vue.createElementVNode("div", { innerHTML: tooltip.value }, null, 8, _hoisted_2$6)
+                    vue.createElementVNode("div", { innerHTML: tooltip.value }, null, 8, _hoisted_2$7)
                   ]),
                   default: vue.withCtx(() => [
                     (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tagName.value), {
@@ -412,7 +414,7 @@
               content: vue.withCtx(() => [
                 vue.createElementVNode("div", {
                   innerHTML: _ctx.config.tip
-                }, null, 8, _hoisted_4$4)
+                }, null, 8, _hoisted_4$3)
               ]),
               default: vue.withCtx(() => [
                 vue.createVNode(vue.unref(design.TMagicIcon), { style: { "line-height": "40px", "margin-left": "5px" } }, {
@@ -427,14 +429,14 @@
           ], 64)) : type.value && display$1.value && showDiff.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 3 }, [
             vue.createVNode(vue.unref(design.TMagicFormItem), {
               style: vue.normalizeStyle([_ctx.config.tip ? "flex: 1" : "", { "background": "#f7dadd" }]),
-              class: vue.normalizeClass({ hidden: `${itemLabelWidth.value}` === "0" || !_ctx.config.text }),
+              class: vue.normalizeClass({ hidden: `${itemLabelWidth.value}` === "0" || !text.value }),
               prop: itemProp.value,
               "label-width": itemLabelWidth.value,
               rules: rule.value
             }, {
               label: vue.withCtx(() => [
                 vue.createElementVNode("span", {
-                  innerHTML: type.value === "checkbox" ? "" : _ctx.config.text
+                  innerHTML: type.value === "checkbox" ? "" : text.value
                 }, null, 8, _hoisted_5$3)
               ]),
               default: vue.withCtx(() => [
@@ -494,14 +496,14 @@
             })) : vue.createCommentVNode("", true),
             vue.createVNode(vue.unref(design.TMagicFormItem), {
               style: vue.normalizeStyle([_ctx.config.tip ? "flex: 1" : "", { "background": "#def7da" }]),
-              class: vue.normalizeClass({ hidden: `${itemLabelWidth.value}` === "0" || !_ctx.config.text }),
+              class: vue.normalizeClass({ hidden: `${itemLabelWidth.value}` === "0" || !text.value }),
               prop: itemProp.value,
               "label-width": itemLabelWidth.value,
               rules: rule.value
             }, {
               label: vue.withCtx(() => [
                 vue.createElementVNode("span", {
-                  innerHTML: type.value === "checkbox" ? "" : _ctx.config.text
+                  innerHTML: type.value === "checkbox" ? "" : text.value
                 }, null, 8, _hoisted_9)
               ]),
               default: vue.withCtx(() => [
@@ -597,10 +599,10 @@
     }
   });
 
-  const _hoisted_1$a = ["innerHTML"];
-  const _hoisted_2$5 = ["innerHTML"];
+  const _hoisted_1$c = ["innerHTML"];
+  const _hoisted_2$6 = ["innerHTML"];
   const _hoisted_3$3 = { key: 1 };
-  const _hoisted_4$3 = ["innerHTML"];
+  const _hoisted_4$2 = ["innerHTML"];
   const _hoisted_5$2 = ["innerHTML"];
   const _hoisted_6 = {
     key: 2,
@@ -608,7 +610,7 @@
   };
   const _hoisted_7 = { style: { "flex": "1" } };
   const _hoisted_8 = ["src"];
-  const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormFieldset"
     },
@@ -667,12 +669,12 @@
                 default: vue.withCtx(() => [
                   vue.createElementVNode("span", {
                     innerHTML: _ctx.config.legend
-                  }, null, 8, _hoisted_1$a),
+                  }, null, 8, _hoisted_1$c),
                   _ctx.config.extra ? (vue.openBlock(), vue.createElementBlock("span", {
                     key: 0,
                     innerHTML: _ctx.config.extra,
                     class: "m-form-tip"
-                  }, null, 8, _hoisted_2$5)) : vue.createCommentVNode("", true)
+                  }, null, 8, _hoisted_2$6)) : vue.createCommentVNode("", true)
                 ]),
                 _: 1
               }, 8, ["modelValue", "prop"])
@@ -681,7 +683,7 @@
           })) : (vue.openBlock(), vue.createElementBlock("legend", _hoisted_3$3, [
             vue.createElementVNode("span", {
               innerHTML: _ctx.config.legend
-            }, null, 8, _hoisted_4$3),
+            }, null, 8, _hoisted_4$2),
             _ctx.config.extra ? (vue.openBlock(), vue.createElementBlock("span", {
               key: 0,
               innerHTML: _ctx.config.extra,
@@ -691,7 +693,7 @@
           _ctx.config.schematic && show.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
             vue.createElementVNode("div", _hoisted_7, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.config.items, (item, index) => {
-                return vue.openBlock(), vue.createBlock(_sfc_main$v, {
+                return vue.openBlock(), vue.createBlock(_sfc_main$y, {
                   key: key(item, index),
                   model: name.value ? _ctx.model[name.value] : _ctx.model,
                   lastValues: name.value ? _ctx.lastValues[name.value] : _ctx.lastValues,
@@ -712,7 +714,7 @@
               src: _ctx.config.schematic
             }, null, 8, _hoisted_8)
           ])) : show.value ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 3 }, vue.renderList(_ctx.config.items, (item, index) => {
-            return vue.openBlock(), vue.createBlock(_sfc_main$v, {
+            return vue.openBlock(), vue.createBlock(_sfc_main$y, {
               key: key(item, index),
               model: name.value ? _ctx.model[name.value] : _ctx.model,
               lastValues: name.value ? _ctx.lastValues[name.value] : _ctx.lastValues,
@@ -732,9 +734,9 @@
     }
   });
 
-  const _hoisted_1$9 = { class: "m-fields-group-list-item" };
-  const _hoisted_2$4 = ["innerHTML"];
-  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$b = { class: "m-fields-group-list-item" };
+  const _hoisted_2$5 = ["innerHTML"];
+  const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormGroupListItem"
     },
@@ -767,7 +769,11 @@
         if (props.config.titleKey && props.model[props.config.titleKey]) {
           return props.model[props.config.titleKey];
         }
-        return `组 ${String(props.index)}`;
+        if (props.config.title) {
+          return filterFunction(mForm, props.config.title, props);
+        }
+        const titlePrefix = props.config.titlePrefix || "组";
+        return `${titlePrefix} ${String(props.index + 1)}`;
       });
       const length = vue.computed(() => props.groupModel?.length || 0);
       const itemExtra = vue.computed(() => filterFunction(mForm, props.config.itemExtra, props));
@@ -783,7 +789,7 @@
         }
         return true;
       };
-      const changeOrder = (offset = 0) => emit("swap-item", props.index, `${String(props.index)}${offset}`);
+      const changeOrder = (offset = 0) => emit("swap-item", props.index, props.index + offset);
       const movable = () => {
         const { movable: movable2 } = props.config;
         if (movable2 === void 0)
@@ -795,7 +801,7 @@
       };
       const onAddDiffCount = () => emit("addDiffCount");
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
           vue.createElementVNode("div", null, [
             vue.createVNode(vue.unref(design.TMagicButton), {
               text: "",
@@ -861,9 +867,9 @@
               key: 1,
               innerHTML: itemExtra.value,
               class: "m-form-tip"
-            }, null, 8, _hoisted_2$4)) : vue.createCommentVNode("", true)
+            }, null, 8, _hoisted_2$5)) : vue.createCommentVNode("", true)
           ]),
-          expand.value ? (vue.openBlock(), vue.createBlock(_sfc_main$v, {
+          expand.value ? (vue.openBlock(), vue.createBlock(_sfc_main$y, {
             key: 0,
             config: rowConfig.value,
             model: _ctx.model,
@@ -881,17 +887,17 @@
     }
   });
 
-  const _hoisted_1$8 = { class: "m-fields-group-list" };
-  const _hoisted_2$3 = ["innerHTML"];
+  const _hoisted_1$a = { class: "m-fields-group-list" };
+  const _hoisted_2$4 = ["innerHTML"];
   const _hoisted_3$2 = {
     key: 1,
     class: "el-table__empty-block"
   };
-  const _hoisted_4$2 = /* @__PURE__ */ vue.createElementVNode("span", { class: "el-table__empty-text" }, "暂无数据", -1);
+  const _hoisted_4$1 = /* @__PURE__ */ vue.createElementVNode("span", { class: "el-table__empty-text" }, "暂无数据", -1);
   const _hoisted_5$1 = [
-    _hoisted_4$2
+    _hoisted_4$1
   ];
-  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormGroupList"
     },
@@ -974,14 +980,14 @@
       const onAddDiffCount = () => emit("addDiffCount");
       const getLastValues = (item, index) => item?.[index] || {};
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
           _ctx.config.extra ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 0,
             innerHTML: _ctx.config.extra,
             style: { "color": "rgba(0, 0, 0, 0.45)" }
-          }, null, 8, _hoisted_2$3)) : vue.createCommentVNode("", true),
+          }, null, 8, _hoisted_2$4)) : vue.createCommentVNode("", true),
           !_ctx.model[_ctx.name] || !_ctx.model[_ctx.name].length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$2, _hoisted_5$1)) : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 2 }, vue.renderList(_ctx.model[_ctx.name], (item, index) => {
-            return vue.openBlock(), vue.createBlock(_sfc_main$t, {
+            return vue.openBlock(), vue.createBlock(_sfc_main$w, {
               key: index,
               model: item,
               lastValues: getLastValues(_ctx.lastValues[_ctx.name], index),
@@ -1026,15 +1032,15 @@
     }
   });
 
-  const _hoisted_1$7 = { style: { "width": "100%", "display": "flex", "align-items": "center" } };
-  const _hoisted_2$2 = ["innerHTML"];
+  const _hoisted_1$9 = { style: { "width": "100%", "display": "flex", "align-items": "center" } };
+  const _hoisted_2$3 = ["innerHTML"];
   const _hoisted_3$1 = {
     key: 0,
     style: { "display": "flex" }
   };
-  const _hoisted_4$1 = { style: { "flex": "1" } };
+  const _hoisted_4 = { style: { "flex": "1" } };
   const _hoisted_5 = ["src"];
-  const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormPanel"
     },
@@ -1066,7 +1072,7 @@
           "body-style": { display: expand.value ? "block" : "none" }
         }, {
           header: vue.withCtx(() => [
-            vue.createElementVNode("div", _hoisted_1$7, [
+            vue.createElementVNode("div", _hoisted_1$9, [
               vue.createVNode(vue.unref(design.TMagicButton), {
                 style: { "padding": "0" },
                 text: "",
@@ -1077,7 +1083,7 @@
                 key: 0,
                 innerHTML: _ctx.config.extra,
                 class: "m-form-tip"
-              }, null, 8, _hoisted_2$2)) : vue.createCommentVNode("", true),
+              }, null, 8, _hoisted_2$3)) : vue.createCommentVNode("", true),
               vue.renderSlot(_ctx.$slots, "header", {}, () => [
                 vue.createTextVNode(vue.toDisplayString(filter(_ctx.config.title)), 1)
               ])
@@ -1087,9 +1093,9 @@
             vue.createElementVNode("div", null, [
               vue.renderSlot(_ctx.$slots, "default"),
               _ctx.config.schematic ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$1, [
-                vue.createElementVNode("div", _hoisted_4$1, [
+                vue.createElementVNode("div", _hoisted_4, [
                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(items.value, (item, index) => {
-                    return vue.openBlock(), vue.createBlock(_sfc_main$v, {
+                    return vue.openBlock(), vue.createBlock(_sfc_main$y, {
                       key: item[vue.unref(mForm)?.keyProp || "__key"] ?? index,
                       config: item,
                       model: _ctx.name ? _ctx.model[_ctx.name] : _ctx.model,
@@ -1109,7 +1115,7 @@
                   src: _ctx.config.schematic
                 }, null, 8, _hoisted_5)
               ])) : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(items.value, (item, index) => {
-                return vue.openBlock(), vue.createBlock(_sfc_main$v, {
+                return vue.openBlock(), vue.createBlock(_sfc_main$y, {
                   key: item[vue.unref(mForm)?.keyProp || "__key"] ?? index,
                   config: item,
                   model: _ctx.name ? _ctx.model[_ctx.name] : _ctx.model,
@@ -1131,7 +1137,7 @@
     }
   });
 
-  const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormCol"
     },
@@ -1158,7 +1164,7 @@
       return (_ctx, _cache) => {
         return vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(design.TMagicCol), { span: _ctx.span }, {
           default: vue.withCtx(() => [
-            vue.createVNode(_sfc_main$v, {
+            vue.createVNode(_sfc_main$y, {
               model: _ctx.model,
               lastValues: _ctx.lastValues,
               "is-compare": _ctx.isCompare,
@@ -1180,7 +1186,7 @@
     }
   });
 
-  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormRow"
     },
@@ -1207,7 +1213,7 @@
         return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicRow), { gutter: 10 }, {
           default: vue.withCtx(() => [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.config.items, (col, index) => {
-              return vue.openBlock(), vue.createBlock(_sfc_main$q, {
+              return vue.openBlock(), vue.createBlock(_sfc_main$t, {
                 key: col[vue.unref(mForm)?.keyProp || "__key"] ?? index,
                 span: col.span || _ctx.config.span || 24 / _ctx.config.items.length,
                 config: col,
@@ -1230,7 +1236,7 @@
     }
   });
 
-  const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormStep"
     },
@@ -1284,7 +1290,7 @@
             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, {
+                  item ? vue.withDirectives((vue.openBlock(), vue.createBlock(_sfc_main$y, {
                     key: item[vue.unref(mForm)?.keyProp || "__key"],
                     config: item,
                     model: step.name ? _ctx.model[step.name] : _ctx.model,
@@ -1308,15 +1314,14 @@
     }
   });
 
-  const _hoisted_1$6 = ["innerHTML"];
-  const _hoisted_2$1 = { class: "el-form-item__content" };
-  const _hoisted_3 = ["innerHTML"];
-  const _hoisted_4 = {
-    key: 1,
+  const _hoisted_1$8 = ["innerHTML"];
+  const _hoisted_2$2 = ["innerHTML"];
+  const _hoisted_3 = {
+    key: 6,
     class: "bottom",
     style: { "text-align": "right" }
   };
-  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormTable"
     },
@@ -1671,246 +1676,244 @@
             key: 0,
             style: { "color": "rgba(0, 0, 0, 0.45)" },
             innerHTML: _ctx.config.extra
-          }, null, 8, _hoisted_1$6)) : vue.createCommentVNode("", true),
-          vue.createElementVNode("div", _hoisted_2$1, [
-            vue.createVNode(vue.unref(design.TMagicTooltip), {
-              content: "拖拽可排序",
-              placement: "left-start",
-              disabled: _ctx.config.dropSort !== true
-            }, {
-              default: vue.withCtx(() => [
-                _ctx.model[modelName.value] ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTable), {
-                  ref_key: "tMagicTable",
-                  ref: tMagicTable,
-                  style: { "width": "100%" },
-                  "row-key": _ctx.config.rowKey || "id",
-                  data: data.value,
-                  lastData: lastData.value,
-                  border: _ctx.config.border,
-                  "max-height": _ctx.config.maxHeight,
-                  "default-expand-all": true,
-                  key: updateKey.value,
-                  onSelect: selectHandle,
-                  onSortChange: sortChange
-                }, {
-                  default: vue.withCtx(() => [
-                    _ctx.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(_ctx.config.itemExtra, scope.$index),
-                          class: "m-form-tip"
-                        }, null, 8, _hoisted_3)
-                      ]),
-                      _: 1
-                    })) : vue.createCommentVNode("", true),
-                    vue.createVNode(vue.unref(design.TMagicTableColumn), {
-                      label: "操作",
-                      width: _ctx.config.operateColWidth || 55,
-                      align: "center",
-                      fixed: _ctx.config.fixed === false ? void 0 : "left"
-                    }, {
-                      default: vue.withCtx((scope) => [
-                        vue.renderSlot(_ctx.$slots, "operateCol", { 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)]
-                        ])
-                      ]),
-                      _: 3
-                    }, 8, ["width", "fixed"]),
-                    _ctx.sort && _ctx.model[modelName.value] && _ctx.model[modelName.value].length > 1 ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTableColumn), {
-                      key: 1,
-                      label: "排序",
-                      width: "60"
-                    }, {
-                      default: vue.withCtx((scope) => [
-                        scope.$index + 1 + pagecontext.value * pagesize.value - 1 !== 0 ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
-                          key: 0,
-                          content: "点击上移，双击置顶",
-                          placement: "top"
-                        }, {
-                          default: vue.withCtx(() => [
-                            vue.createVNode(vue.unref(design.TMagicButton), {
-                              plain: "",
-                              size: "small",
-                              type: "primary",
-                              icon: vue.unref(iconsVue.ArrowUp),
-                              disabled: _ctx.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 !== _ctx.model[modelName.value].length - 1 ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
-                          key: 1,
-                          content: "点击下移，双击置底",
-                          placement: "top"
-                        }, {
-                          default: vue.withCtx(() => [
-                            vue.createVNode(vue.unref(design.TMagicButton), {
-                              plain: "",
-                              size: "small",
-                              type: "primary",
-                              icon: vue.unref(iconsVue.ArrowDown),
-                              disabled: _ctx.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),
-                    selection.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTableColumn), {
-                      key: 2,
-                      align: "center",
-                      "header-align": "center",
-                      type: "selection",
-                      width: "45"
-                    })) : vue.createCommentVNode("", true),
-                    _ctx.showIndex && _ctx.config.showIndex ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTableColumn), {
-                      key: 3,
-                      width: "60",
-                      label: "序号"
-                    }, {
-                      default: vue.withCtx((scope) => [
-                        vue.createTextVNode(vue.toDisplayString(scope.$index + 1 + pagecontext.value * pagesize.value), 1)
-                      ]),
-                      _: 1
-                    })) : vue.createCommentVNode("", true),
-                    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.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": _ctx.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: _ctx.disabled,
-                              prop: getProp(scope.$index),
-                              rules: column.rules,
-                              config: makeConfig(column, scope.row),
-                              model: scope.row,
-                              lastValues: lastData.value[scope.$index],
-                              "is-compare": _ctx.isCompare,
-                              size: _ctx.size,
-                              onChange: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("change", _ctx.model[modelName.value])),
-                              onAddDiffCount: _cache[1] || (_cache[1] = ($event) => onAddDiffCount())
-                            }, null, 8, ["disabled", "prop", "rules", "config", "model", "lastValues", "is-compare", "size"])) : vue.createCommentVNode("", true)
-                          ]),
-                          _: 2
-                        }, 1032, ["prop", "width", "label", "sortable", "class-name"])) : vue.createCommentVNode("", true)
-                      ], 64);
-                    }), 256))
-                  ]),
-                  _: 3
-                }, 8, ["row-key", "data", "lastData", "border", "max-height"])) : vue.createCommentVNode("", true)
-              ]),
-              _: 3
-            }, 8, ["disabled"]),
-            vue.renderSlot(_ctx.$slots, "default"),
-            addable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
-              key: 0,
-              size: "small",
-              type: "primary",
-              disabled: _ctx.disabled,
-              plain: "",
-              onClick: _cache[2] || (_cache[2] = ($event) => newHandler())
-            }, {
-              default: vue.withCtx(() => [
-                vue.createTextVNode("新增一行")
-              ]),
-              _: 1
-            }, 8, ["disabled"])) : vue.createCommentVNode("", true),
-            vue.createTextVNode("   "),
-            _ctx.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(() => [
-                vue.createTextVNode("展开配置")
-              ]),
-              _: 1
-            }, 8, ["icon"])) : vue.createCommentVNode("", true),
-            _ctx.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 ? "退出全屏" : "全屏编辑"), 1)
-              ]),
-              _: 1
-            }, 8, ["icon"])) : vue.createCommentVNode("", true),
-            importable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicUpload), {
-              key: 3,
-              style: { "display": "inline-block" },
-              ref_key: "excelBtn",
-              ref: excelBtn,
-              action: "/noop",
-              disabled: _ctx.disabled,
-              "on-change": excelHandler,
-              "auto-upload": false
-            }, {
-              default: vue.withCtx(() => [
-                vue.createVNode(vue.unref(design.TMagicButton), {
-                  size: "small",
-                  type: "success",
-                  disabled: _ctx.disabled,
-                  plain: ""
-                }, {
-                  default: vue.withCtx(() => [
-                    vue.createTextVNode("导入EXCEL")
-                  ]),
-                  _: 1
-                }, 8, ["disabled"])
-              ]),
-              _: 1
-            }, 8, ["disabled"])) : vue.createCommentVNode("", true),
-            vue.createTextVNode("  "),
-            importable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
-              key: 4,
-              size: "small",
-              type: "warning",
-              disabled: _ctx.disabled,
-              plain: "",
-              onClick: _cache[3] || (_cache[3] = ($event) => clearHandler())
-            }, {
-              default: vue.withCtx(() => [
-                vue.createTextVNode("清空")
-              ]),
-              _: 1
-            }, 8, ["disabled"])) : vue.createCommentVNode("", true)
-          ]),
-          _ctx.config.pagination ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
+          }, null, 8, _hoisted_1$8)) : vue.createCommentVNode("", true),
+          vue.createVNode(vue.unref(design.TMagicTooltip), {
+            content: "拖拽可排序",
+            placement: "left-start",
+            disabled: _ctx.config.dropSort !== true
+          }, {
+            default: vue.withCtx(() => [
+              _ctx.model[modelName.value] ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTable), {
+                ref_key: "tMagicTable",
+                ref: tMagicTable,
+                style: { "width": "100%" },
+                "row-key": _ctx.config.rowKey || "id",
+                data: data.value,
+                lastData: lastData.value,
+                border: _ctx.config.border,
+                "max-height": _ctx.config.maxHeight,
+                "default-expand-all": true,
+                key: updateKey.value,
+                onSelect: selectHandle,
+                onSortChange: sortChange
+              }, {
+                default: vue.withCtx(() => [
+                  _ctx.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(_ctx.config.itemExtra, scope.$index),
+                        class: "m-form-tip"
+                      }, null, 8, _hoisted_2$2)
+                    ]),
+                    _: 1
+                  })) : vue.createCommentVNode("", true),
+                  vue.createVNode(vue.unref(design.TMagicTableColumn), {
+                    label: "操作",
+                    width: _ctx.config.operateColWidth || 55,
+                    align: "center",
+                    fixed: _ctx.config.fixed === false ? void 0 : "left"
+                  }, {
+                    default: vue.withCtx((scope) => [
+                      vue.renderSlot(_ctx.$slots, "operateCol", { 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)]
+                      ])
+                    ]),
+                    _: 3
+                  }, 8, ["width", "fixed"]),
+                  _ctx.sort && _ctx.model[modelName.value] && _ctx.model[modelName.value].length > 1 ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTableColumn), {
+                    key: 1,
+                    label: "排序",
+                    width: "60"
+                  }, {
+                    default: vue.withCtx((scope) => [
+                      scope.$index + 1 + pagecontext.value * pagesize.value - 1 !== 0 ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
+                        key: 0,
+                        content: "点击上移，双击置顶",
+                        placement: "top"
+                      }, {
+                        default: vue.withCtx(() => [
+                          vue.createVNode(vue.unref(design.TMagicButton), {
+                            plain: "",
+                            size: "small",
+                            type: "primary",
+                            icon: vue.unref(iconsVue.ArrowUp),
+                            disabled: _ctx.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 !== _ctx.model[modelName.value].length - 1 ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
+                        key: 1,
+                        content: "点击下移，双击置底",
+                        placement: "top"
+                      }, {
+                        default: vue.withCtx(() => [
+                          vue.createVNode(vue.unref(design.TMagicButton), {
+                            plain: "",
+                            size: "small",
+                            type: "primary",
+                            icon: vue.unref(iconsVue.ArrowDown),
+                            disabled: _ctx.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),
+                  selection.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTableColumn), {
+                    key: 2,
+                    align: "center",
+                    "header-align": "center",
+                    type: "selection",
+                    width: "45"
+                  })) : vue.createCommentVNode("", true),
+                  _ctx.showIndex && _ctx.config.showIndex ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTableColumn), {
+                    key: 3,
+                    width: "60",
+                    label: "序号"
+                  }, {
+                    default: vue.withCtx((scope) => [
+                      vue.createTextVNode(vue.toDisplayString(scope.$index + 1 + pagecontext.value * pagesize.value), 1)
+                    ]),
+                    _: 1
+                  })) : vue.createCommentVNode("", true),
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.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": _ctx.config.dropSort === true ? "el-table__column--dropable" : ""
+                      }, {
+                        default: vue.withCtx((scope) => [
+                          scope.$index > -1 ? (vue.openBlock(), vue.createBlock(_sfc_main$y, {
+                            key: 0,
+                            labelWidth: "0",
+                            disabled: _ctx.disabled,
+                            prop: getProp(scope.$index),
+                            rules: column.rules,
+                            config: makeConfig(column, scope.row),
+                            model: scope.row,
+                            lastValues: lastData.value[scope.$index],
+                            "is-compare": _ctx.isCompare,
+                            size: _ctx.size,
+                            onChange: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("change", _ctx.model[modelName.value])),
+                            onAddDiffCount: _cache[1] || (_cache[1] = ($event) => onAddDiffCount())
+                          }, null, 8, ["disabled", "prop", "rules", "config", "model", "lastValues", "is-compare", "size"])) : vue.createCommentVNode("", true)
+                        ]),
+                        _: 2
+                      }, 1032, ["prop", "width", "label", "sortable", "class-name"])) : vue.createCommentVNode("", true)
+                    ], 64);
+                  }), 256))
+                ]),
+                _: 3
+              }, 8, ["row-key", "data", "lastData", "border", "max-height"])) : vue.createCommentVNode("", true)
+            ]),
+            _: 3
+          }, 8, ["disabled"]),
+          vue.renderSlot(_ctx.$slots, "default"),
+          addable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+            key: 1,
+            size: "small",
+            type: "primary",
+            disabled: _ctx.disabled,
+            plain: "",
+            onClick: _cache[2] || (_cache[2] = ($event) => newHandler())
+          }, {
+            default: vue.withCtx(() => [
+              vue.createTextVNode("新增一行")
+            ]),
+            _: 1
+          }, 8, ["disabled"])) : vue.createCommentVNode("", true),
+          vue.createTextVNode("   "),
+          _ctx.enableToggleMode && _ctx.config.enableToggleMode !== false && !isFullscreen.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+            key: 2,
+            icon: vue.unref(iconsVue.Grid),
+            size: "small",
+            type: "primary",
+            onClick: toggleMode
+          }, {
+            default: vue.withCtx(() => [
+              vue.createTextVNode("展开配置")
+            ]),
+            _: 1
+          }, 8, ["icon"])) : vue.createCommentVNode("", true),
+          _ctx.config.enableFullscreen !== false ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+            key: 3,
+            icon: vue.unref(iconsVue.FullScreen),
+            size: "small",
+            type: "primary",
+            onClick: toggleFullscreen
+          }, {
+            default: vue.withCtx(() => [
+              vue.createTextVNode(vue.toDisplayString(isFullscreen.value ? "退出全屏" : "全屏编辑"), 1)
+            ]),
+            _: 1
+          }, 8, ["icon"])) : vue.createCommentVNode("", true),
+          importable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicUpload), {
+            key: 4,
+            style: { "display": "inline-block" },
+            ref_key: "excelBtn",
+            ref: excelBtn,
+            action: "/noop",
+            disabled: _ctx.disabled,
+            "on-change": excelHandler,
+            "auto-upload": false
+          }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(vue.unref(design.TMagicButton), {
+                size: "small",
+                type: "success",
+                disabled: _ctx.disabled,
+                plain: ""
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createTextVNode("导入EXCEL")
+                ]),
+                _: 1
+              }, 8, ["disabled"])
+            ]),
+            _: 1
+          }, 8, ["disabled"])) : vue.createCommentVNode("", true),
+          vue.createTextVNode("  "),
+          importable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+            key: 5,
+            size: "small",
+            type: "warning",
+            disabled: _ctx.disabled,
+            plain: "",
+            onClick: _cache[3] || (_cache[3] = ($event) => clearHandler())
+          }, {
+            default: vue.withCtx(() => [
+              vue.createTextVNode("清空")
+            ]),
+            _: 1
+          }, 8, ["disabled"])) : vue.createCommentVNode("", true),
+          _ctx.config.pagination ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
             vue.createVNode(vue.unref(design.TMagicPagination), {
               layout: "total, sizes, prev, pager, next, jumper",
               "hide-on-single-page": _ctx.model[modelName.value].length < pagesize.value,
@@ -1927,7 +1930,7 @@
     }
   });
 
-  const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormTabs"
     },
@@ -2081,7 +2084,7 @@
                 ]),
                 default: vue.withCtx(() => [
                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(tabItems(tab), (item) => {
-                    return vue.openBlock(), vue.createBlock(_sfc_main$v, {
+                    return vue.openBlock(), vue.createBlock(_sfc_main$y, {
                       key: item[vue.unref(mForm)?.keyProp || "__key"],
                       config: item,
                       disabled: _ctx.disabled,
@@ -2133,7 +2136,7 @@
     );
   };
 
-  const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormCascader"
     },
@@ -2221,7 +2224,7 @@
     }
   });
 
-  const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormCheckbox"
     },
@@ -2283,7 +2286,7 @@
     }
   });
 
-  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormCheckGroup"
     },
@@ -2346,7 +2349,7 @@
     }
   });
 
-  const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormColorPicker"
     },
@@ -2380,7 +2383,7 @@
     }
   });
 
-  const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormDate"
     },
@@ -2413,14 +2416,14 @@
           placeholder: _ctx.config.placeholder,
           disabled: _ctx.disabled,
           format: _ctx.config.format,
-          "value-format": _ctx.config.valueFormat || "YYYY-MM-DD HH:mm:ss",
+          "value-format": _ctx.config.valueFormat || "YYYY/MM/DD HH:mm:ss",
           onChange: changeHandler
         }, null, 8, ["modelValue", "size", "placeholder", "disabled", "format", "value-format"]);
       };
     }
   });
 
-  const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormDateRange"
     },
@@ -2522,7 +2525,7 @@
     }
   });
 
-  const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormDateTime"
     },
@@ -2562,8 +2565,8 @@
           size: _ctx.size,
           placeholder: _ctx.config.placeholder,
           disabled: _ctx.disabled,
-          format: _ctx.config.format || "YYYY-MM-DD HH:mm:ss",
-          "value-format": _ctx.config.valueFormat || "YYYY-MM-DD HH:mm:ss",
+          format: _ctx.config.format || "YYYY/MM/DD HH:mm:ss",
+          "value-format": _ctx.config.valueFormat || "YYYY/MM/DD HH:mm:ss",
           "default-time": _ctx.config.defaultTime,
           onChange: changeHandler
         }, null, 8, ["modelValue", "size", "placeholder", "disabled", "format", "value-format", "default-time"]);
@@ -2571,8 +2574,8 @@
     }
   });
 
-  const _hoisted_1$5 = { key: 0 };
-  const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$7 = { key: 0 };
+  const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormDisplay"
     },
@@ -2584,6 +2587,8 @@
       values: {},
       name: {},
       prop: {},
+      disabled: { type: Boolean },
+      size: {},
       lastValues: {}
     },
     setup(__props) {
@@ -2593,13 +2598,13 @@
       }
       useAddField(props.prop);
       return (_ctx, _cache) => {
-        return _ctx.model ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$5, vue.toDisplayString(_ctx.model[_ctx.name]), 1)) : vue.createCommentVNode("", true);
+        return _ctx.model ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$7, vue.toDisplayString(_ctx.model[_ctx.name]), 1)) : vue.createCommentVNode("", true);
       };
     }
   });
 
-  const _hoisted_1$4 = { class: "m-fields-dynamic-field" };
-  const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$6 = { class: "m-fields-dynamic-field" };
+  const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormDynamicField"
     },
@@ -2664,7 +2669,7 @@
         emit("change", fieldMap.value[key], key);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, [
           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) => {
@@ -2691,7 +2696,7 @@
     }
   });
 
-  const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormHidden"
     },
@@ -2703,6 +2708,8 @@
       values: {},
       name: {},
       prop: {},
+      disabled: { type: Boolean },
+      size: {},
       lastValues: {}
     },
     setup(__props) {
@@ -2720,7 +2727,7 @@
     }
   });
 
-  const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MForm"
     },
@@ -2739,7 +2746,8 @@
       inline: { type: Boolean, default: false },
       labelPosition: { default: "right" },
       keyProp: { default: "__key" },
-      popperClass: {}
+      popperClass: {},
+      extendState: {}
     },
     emits: ["change", "field-input", "field-change"],
     setup(__props, { expose: __expose, emit }) {
@@ -2774,7 +2782,7 @@
           }
         }
       });
-      vue.watchEffect(() => {
+      vue.watchEffect(async () => {
         formState.initValues = props.initValues;
         formState.lastValues = props.lastValues;
         formState.isCompare = props.isCompare;
@@ -2782,6 +2790,12 @@
         formState.keyProp = props.keyProp;
         formState.popperClass = props.popperClass;
         formState.parentValues = props.parentValues;
+        if (typeof props.extendState === "function") {
+          const state = await props.extendState(formState) || {};
+          Object.entries(state).forEach(([key, value]) => {
+            formState[key] = value;
+          });
+        }
       });
       vue.provide("mForm", formState);
       vue.watch(
@@ -2852,7 +2866,7 @@
         }, {
           default: vue.withCtx(() => [
             initialized.value && Array.isArray(_ctx.config) ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(_ctx.config, (item, index) => {
-              return vue.openBlock(), vue.createBlock(_sfc_main$v, {
+              return vue.openBlock(), vue.createBlock(_sfc_main$y, {
                 disabled: _ctx.disabled,
                 key: item[_ctx.keyProp] ?? index,
                 config: item,
@@ -2872,8 +2886,8 @@
     }
   });
 
-  const _hoisted_1$3 = { style: { "min-height": "1px" } };
-  const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$5 = { style: { "min-height": "1px" } };
+  const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormDialog"
     },
@@ -2887,6 +2901,8 @@
       fullscreen: { type: Boolean },
       disabled: { type: Boolean },
       title: {},
+      inline: { type: Boolean },
+      labelPosition: {},
       zIndex: {},
       size: {},
       confirmText: { default: "确定" }
@@ -2917,9 +2933,6 @@
         }
         return false;
       });
-      const cancel = () => {
-        dialogVisible.value = false;
-      };
       const closeHandler = () => {
         stepActive.value = 1;
         emit("close");
@@ -2941,12 +2954,23 @@
       const changeHandler = (value) => {
         emit("change", value);
       };
+      const show = () => {
+        dialogVisible.value = true;
+      };
+      const hide = () => {
+        dialogVisible.value = false;
+      };
+      const cancel = () => {
+        hide();
+      };
       __expose({
         form,
         saveFetch,
         dialogVisible,
         cancel,
-        save
+        save,
+        show,
+        hide
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDialog), {
@@ -2970,7 +2994,7 @@
                   style: { "text-align": "left" }
                 }, {
                   default: vue.withCtx(() => [
-                    vue.createElementVNode("div", _hoisted_1$3, [
+                    vue.createElementVNode("div", _hoisted_1$5, [
                       vue.renderSlot(_ctx.$slots, "left")
                     ])
                   ]),
@@ -3013,6 +3037,7 @@
                         key: 2,
                         type: "primary",
                         size: "small",
+                        disabled: _ctx.disabled,
                         loading: saveFetch.value,
                         onClick: save
                       }, {
@@ -3020,7 +3045,7 @@
                           vue.createTextVNode(vue.toDisplayString(_ctx.confirmText), 1)
                         ]),
                         _: 1
-                      }, 8, ["loading"]))
+                      }, 8, ["disabled", "loading"]))
                     ])
                   ]),
                   _: 3
@@ -3035,7 +3060,7 @@
               class: "m-dialog-body",
               style: vue.normalizeStyle(`max-height: ${bodyHeight.value}; overflow-y: auto; overflow-x: hidden;`)
             }, [
-              vue.createVNode(_sfc_main$b, {
+              vue.createVNode(_sfc_main$e, {
                 modelValue: stepActive.value,
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => stepActive.value = $event),
                 ref_key: "form",
@@ -3046,8 +3071,10 @@
                 "init-values": _ctx.values,
                 "parent-values": _ctx.parentValues,
                 "label-width": _ctx.labelWidth,
+                "label-position": _ctx.labelPosition,
+                inline: _ctx.inline,
                 onChange: changeHandler
-              }, null, 8, ["modelValue", "size", "disabled", "config", "init-values", "parent-values", "label-width"]),
+              }, null, 8, ["modelValue", "size", "disabled", "config", "init-values", "parent-values", "label-width", "label-position", "inline"]),
               vue.renderSlot(_ctx.$slots, "default")
             ], 4)) : vue.createCommentVNode("", true)
           ]),
@@ -3057,12 +3084,12 @@
     }
   });
 
-  const _hoisted_1$2 = ["href"];
-  const _hoisted_2 = {
+  const _hoisted_1$4 = ["href"];
+  const _hoisted_2$1 = {
     key: 2,
     class: "m-fields-link"
   };
-  const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormLink"
     },
@@ -3130,10 +3157,10 @@
           target: "_blank",
           href: href.value,
           style: vue.normalizeStyle(_ctx.config.css || {})
-        }, vue.toDisplayString(displayText.value), 13, _hoisted_1$2)) : _ctx.config.href && _ctx.disabled ? (vue.openBlock(), vue.createElementBlock("span", {
+        }, vue.toDisplayString(displayText.value), 13, _hoisted_1$4)) : _ctx.config.href && _ctx.disabled ? (vue.openBlock(), vue.createElementBlock("span", {
           key: 1,
           style: vue.normalizeStyle(_ctx.config.disabledCss || {})
-        }, vue.toDisplayString(displayText.value), 5)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+        }, vue.toDisplayString(displayText.value), 5)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$1, [
           vue.createVNode(vue.unref(design.TMagicButton), {
             text: true,
             type: "primary",
@@ -3144,7 +3171,7 @@
             ]),
             _: 1
           }),
-          vue.createVNode(_sfc_main$a, {
+          vue.createVNode(_sfc_main$d, {
             ref_key: "editor",
             ref: editor,
             title: _ctx.config.formTitle || "编辑扩展配置",
@@ -3160,7 +3187,7 @@
     }
   });
 
-  const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormNumber"
     },
@@ -3208,7 +3235,62 @@
     }
   });
 
-  const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$3 = { class: "m-fields-number-range" };
+  const _hoisted_2 = /* @__PURE__ */ vue.createElementVNode("span", { class: "split-tag" }, "-", -1);
+  const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MFormNumberRange"
+    },
+    __name: "NumberRange",
+    props: {
+      config: {},
+      model: {},
+      initValues: {},
+      values: {},
+      name: {},
+      prop: {},
+      disabled: { type: Boolean },
+      size: {},
+      lastValues: {}
+    },
+    emits: ["change"],
+    setup(__props, { emit }) {
+      const props = __props;
+      useAddField(props.prop);
+      if (!Array.isArray(props.model[props.name])) {
+        props.model[props.name] = [];
+      }
+      const minChangeHandler = (v) => {
+        emit("change", [Number(v), props.model[props.name][1]]);
+      };
+      const maxChangeHandler = (v) => {
+        emit("change", [props.model[props.name][0], Number(v)]);
+      };
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
+          vue.createVNode(vue.unref(design.TMagicInput), {
+            modelValue: _ctx.model[_ctx.name][0],
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.model[_ctx.name][0] = $event),
+            clearable: "",
+            size: _ctx.size,
+            disabled: _ctx.disabled,
+            onChange: minChangeHandler
+          }, null, 8, ["modelValue", "size", "disabled"]),
+          _hoisted_2,
+          vue.createVNode(vue.unref(design.TMagicInput), {
+            modelValue: _ctx.model[_ctx.name][1],
+            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.model[_ctx.name][1] = $event),
+            clearable: "",
+            size: _ctx.size,
+            disabled: _ctx.disabled,
+            onChange: maxChangeHandler
+          }, null, 8, ["modelValue", "size", "disabled"])
+        ]);
+      };
+    }
+  });
+
+  const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormRadioGroup"
     },
@@ -3260,7 +3342,7 @@
     }
   });
 
-  const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormSelectOptionGroups"
     },
@@ -3294,7 +3376,7 @@
     }
   });
 
-  const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormSelectOptions"
     },
@@ -3317,8 +3399,8 @@
     }
   });
 
-  const _hoisted_1$1 = { key: 2 };
-  const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$2 = { key: 2 };
+  const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormSelect"
     },
@@ -3658,14 +3740,14 @@
           onVisibleChange: visibleHandler
         }, {
           default: vue.withCtx(() => [
-            _ctx.config.group ? (vue.openBlock(), vue.createBlock(_sfc_main$6, {
+            _ctx.config.group ? (vue.openBlock(), vue.createBlock(_sfc_main$8, {
               key: 0,
               options: vue.unref(groupOptions)
-            }, null, 8, ["options"])) : (vue.openBlock(), vue.createBlock(_sfc_main$5, {
+            }, null, 8, ["options"])) : (vue.openBlock(), vue.createBlock(_sfc_main$7, {
               key: 1,
               options: vue.unref(itemOptions)
             }, null, 8, ["options"])),
-            moreLoadingVisible.value ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, null, 512)), [
+            moreLoadingVisible.value ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, null, 512)), [
               [_directive_loading, true]
             ]) : vue.createCommentVNode("", true)
           ]),
@@ -3677,7 +3759,7 @@
     }
   });
 
-  const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormSwitch"
     },
@@ -3734,8 +3816,8 @@
     }
   });
 
-  const _hoisted_1 = { key: 0 };
-  const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$1 = { key: 0 };
+  const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormText"
     },
@@ -3839,7 +3921,7 @@
           _ctx.config.append ? {
             name: "append",
             fn: vue.withCtx(() => [
-              typeof _ctx.config.append === "string" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1, vue.toDisplayString(_ctx.config.append), 1)) : vue.createCommentVNode("", true),
+              typeof _ctx.config.append === "string" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$1, vue.toDisplayString(_ctx.config.append), 1)) : vue.createCommentVNode("", true),
               typeof _ctx.config.append === "object" && _ctx.config.append.type === "button" ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
                 key: 1,
                 style: { "color": "#409eff" },
@@ -3859,7 +3941,7 @@
     }
   });
 
-  const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormTextarea"
     },
@@ -3903,7 +3985,7 @@
     }
   });
 
-  const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormTime"
     },
@@ -3941,72 +4023,321 @@
     }
   });
 
+  const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MFormTimeRange"
+    },
+    __name: "Timerange",
+    props: {
+      config: {},
+      model: {},
+      initValues: {},
+      values: {},
+      name: {},
+      prop: {},
+      disabled: { type: Boolean },
+      size: {},
+      lastValues: {}
+    },
+    emits: ["change"],
+    setup(__props, { emit }) {
+      const props = __props;
+      useAddField(props.prop);
+      const { names } = props.config;
+      const value = vue.ref([]);
+      if (props.model !== void 0 && names?.length) {
+        vue.watch(
+          [() => props.model[names[0]], () => props.model[names[1]]],
+          ([start, end], [preStart, preEnd]) => {
+            if (!value.value) {
+              value.value = [];
+            }
+            if (!start || !end)
+              value.value = [];
+            if (start !== preStart)
+              value.value[0] = start;
+            if (end !== preEnd)
+              value.value[1] = end;
+          },
+          {
+            immediate: true
+          }
+        );
+      }
+      const setValue = (v) => {
+        names?.forEach((item, index) => {
+          if (!props.model) {
+            return;
+          }
+          if (Array.isArray(v)) {
+            props.model[item] = utils.datetimeFormatter(v[index]?.toString(), "");
+          } else {
+            props.model[item] = void 0;
+          }
+        });
+      };
+      const changeHandler = (v) => {
+        const value2 = v || [];
+        if (names?.length) {
+          setValue(value2);
+        }
+        emit("change", value2);
+      };
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTimePicker), {
+          modelValue: value.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => value.value = $event),
+          "is-range": "",
+          "range-separator": "-",
+          "start-placeholder": "开始时间",
+          "end-placeholder": "结束时间",
+          size: _ctx.size,
+          "unlink-panels": true,
+          disabled: _ctx.disabled,
+          "default-time": _ctx.config.defaultTime,
+          onChange: changeHandler
+        }, null, 8, ["modelValue", "size", "disabled", "default-time"]);
+      };
+    }
+  });
+
   const index$1 = '';
 
+  const _hoisted_1 = { style: { "min-height": "1px" } };
+  const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MFormDialog"
+    },
+    __name: "FormDrawer",
+    props: {
+      config: { default: () => [] },
+      values: { default: () => ({}) },
+      parentValues: {},
+      width: {},
+      labelWidth: {},
+      disabled: { type: Boolean },
+      closeOnPressEscape: { type: Boolean, default: true },
+      title: {},
+      zIndex: {},
+      size: {},
+      confirmText: { default: "确定" },
+      inline: { type: Boolean },
+      labelPosition: {},
+      beforeClose: {}
+    },
+    emits: ["close", "closed", "submit", "error", "change", "open", "opened"],
+    setup(__props, { expose: __expose, emit }) {
+      const drawer = vue.ref();
+      const form = vue.ref();
+      const drawerBody = vue.ref();
+      const visible = vue.ref(false);
+      const saveFetch = vue.ref(false);
+      const bodyHeight = vue.ref(0);
+      vue.watchEffect(() => {
+        if (drawerBody.value) {
+          bodyHeight.value = drawerBody.value.clientHeight;
+        }
+      });
+      const submitHandler = async () => {
+        try {
+          const values = await form.value?.submitForm();
+          emit("submit", values);
+        } catch (e) {
+          emit("error", e);
+        }
+      };
+      const changeHandler = (value) => {
+        emit("change", value);
+      };
+      const openHandler = () => {
+        emit("open");
+      };
+      const openedHandler = () => {
+        emit("opened");
+      };
+      const closeHandler = () => {
+        emit("close");
+      };
+      const closedHandler = () => {
+        emit("closed");
+      };
+      const show = () => {
+        visible.value = true;
+      };
+      const hide = () => {
+        visible.value = false;
+      };
+      const handleClose = () => {
+        drawer.value?.handleClose();
+      };
+      __expose({
+        form,
+        saveFetch,
+        bodyHeight,
+        show,
+        hide,
+        handleClose
+      });
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDrawer), {
+          class: "m-form-drawer",
+          ref_key: "drawer",
+          ref: drawer,
+          modelValue: visible.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => visible.value = $event),
+          title: _ctx.title,
+          "close-on-press-escape": _ctx.closeOnPressEscape,
+          "append-to-body": true,
+          "show-close": true,
+          "close-on-click-modal": true,
+          size: _ctx.width,
+          zIndex: _ctx.zIndex,
+          "before-close": _ctx.beforeClose,
+          onOpen: openHandler,
+          onOpened: openedHandler,
+          onClose: closeHandler,
+          onClosed: closedHandler
+        }, {
+          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, [
+                      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: handleClose }, {
+                        default: vue.withCtx(() => [
+                          vue.createTextVNode("关闭")
+                        ]),
+                        _: 1
+                      }),
+                      vue.createVNode(vue.unref(design.TMagicButton), {
+                        type: "primary",
+                        disabled: _ctx.disabled,
+                        loading: saveFetch.value,
+                        onClick: submitHandler
+                      }, {
+                        default: vue.withCtx(() => [
+                          vue.createTextVNode(vue.toDisplayString(_ctx.confirmText), 1)
+                        ]),
+                        _: 1
+                      }, 8, ["disabled", "loading"])
+                    ])
+                  ]),
+                  _: 3
+                })
+              ]),
+              _: 3
+            })
+          ]),
+          default: vue.withCtx(() => [
+            visible.value ? (vue.openBlock(), vue.createElementBlock("div", {
+              key: 0,
+              ref_key: "drawerBody",
+              ref: drawerBody,
+              class: "m-drawer-body"
+            }, [
+              vue.createVNode(_sfc_main$e, {
+                ref_key: "form",
+                ref: form,
+                size: _ctx.size,
+                disabled: _ctx.disabled,
+                config: _ctx.config,
+                "init-values": _ctx.values,
+                "parent-values": _ctx.parentValues,
+                "label-width": _ctx.labelWidth,
+                "label-position": _ctx.labelPosition,
+                inline: _ctx.inline,
+                onChange: changeHandler
+              }, null, 8, ["size", "disabled", "config", "init-values", "parent-values", "label-width", "label-position", "inline"]),
+              vue.renderSlot(_ctx.$slots, "default")
+            ], 512)) : vue.createCommentVNode("", true)
+          ]),
+          _: 3
+        }, 8, ["modelValue", "title", "close-on-press-escape", "size", "zIndex", "before-close"]);
+      };
+    }
+  });
+
   const defaultInstallOpt = {};
   const index = {
     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);
+      app.component("m-form", _sfc_main$e);
+      app.component("m-form-dialog", _sfc_main$d);
+      app.component("m-form-container", _sfc_main$y);
+      app.component("m-form-fieldset", _sfc_main$x);
+      app.component("m-form-group-list", _sfc_main$v);
+      app.component("m-form-panel", _sfc_main$u);
+      app.component("m-form-row", _sfc_main$s);
+      app.component("m-form-step", _sfc_main$r);
+      app.component("m-form-table", _sfc_main$q);
+      app.component("m-form-tab", _sfc_main$p);
+      app.component("m-fields-text", _sfc_main$4);
+      app.component("m-fields-number", _sfc_main$b);
+      app.component("m-fields-number-range", _sfc_main$a);
+      app.component("m-fields-textarea", _sfc_main$3);
+      app.component("m-fields-hidden", _sfc_main$f);
+      app.component("m-fields-date", _sfc_main$k);
+      app.component("m-fields-datetime", _sfc_main$i);
+      app.component("m-fields-daterange", _sfc_main$j);
+      app.component("m-fields-timerange", _sfc_main$1);
+      app.component("m-fields-time", _sfc_main$2);
+      app.component("m-fields-checkbox", _sfc_main$n);
+      app.component("m-fields-switch", _sfc_main$5);
+      app.component("m-fields-color-picker", _sfc_main$l);
+      app.component("m-fields-checkbox-group", _sfc_main$m);
+      app.component("m-fields-radio-group", _sfc_main$9);
+      app.component("m-fields-display", _sfc_main$h);
+      app.component("m-fields-link", _sfc_main$c);
+      app.component("m-fields-select", _sfc_main$6);
+      app.component("m-fields-cascader", _sfc_main$o);
+      app.component("m-fields-dynamic-field", _sfc_main$g);
     }
   };
 
-  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.MCascader = _sfc_main$o;
+  exports.MCheckbox = _sfc_main$n;
+  exports.MCheckboxGroup = _sfc_main$m;
+  exports.MColorPicker = _sfc_main$l;
+  exports.MContainer = _sfc_main$y;
+  exports.MDate = _sfc_main$k;
+  exports.MDateTime = _sfc_main$i;
+  exports.MDaterange = _sfc_main$j;
+  exports.MDisplay = _sfc_main$h;
+  exports.MDynamicField = _sfc_main$g;
+  exports.MFieldset = _sfc_main$x;
+  exports.MForm = _sfc_main$e;
+  exports.MFormDialog = _sfc_main$d;
+  exports.MFormDrawer = _sfc_main;
+  exports.MGroupList = _sfc_main$v;
+  exports.MHidden = _sfc_main$f;
+  exports.MLink = _sfc_main$c;
+  exports.MNumber = _sfc_main$b;
+  exports.MNumberRange = _sfc_main$a;
+  exports.MPanel = _sfc_main$u;
+  exports.MRadioGroup = _sfc_main$9;
+  exports.MRow = _sfc_main$s;
+  exports.MSelect = _sfc_main$6;
+  exports.MSwitch = _sfc_main$5;
+  exports.MTable = _sfc_main$q;
+  exports.MTabs = _sfc_main$p;
+  exports.MText = _sfc_main$4;
+  exports.MTextarea = _sfc_main$3;
+  exports.MTime = _sfc_main$2;
+  exports.MTimerange = _sfc_main$1;
   exports.createValues = createValues;
   exports.default = index;
   exports.display = display;