@tmagic/form 1.4.0-beta.1 → 1.4.0-beta.2

package/dist/style.css

@@ -221,17 +221,12 @@ fieldset.m-fieldset .m-form-tip {
 .m-form-box {
   display: flex;
   flex-direction: column;
-  padding: 16px;
-  box-sizing: border-box;
 }
 .m-form-box .el-box__header {
   margin: 0;
 }
-.m-form-box .m-box-body {
-  flex: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
-}
 .m-form-box .dialog-footer {
-  margin-top: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }

package/dist/tmagic-form.js

@@ -1,7 +1,7 @@
 import { toRaw, defineComponent, inject, ref, computed, resolveComponent, watchEffect, watch, openBlock, createElementBlock, normalizeStyle, normalizeClass, createBlock, resolveDynamicComponent, Fragment, createVNode, unref, withCtx, createElementVNode, createCommentVNode, renderList, createTextVNode, toDisplayString, withDirectives, vShow, renderSlot, onMounted, Teleport, toRefs, mergeProps, getCurrentInstance, reactive, onBeforeUnmount, vModelText, provide, onBeforeMount, nextTick, resolveDirective, createSlots, withModifiers } from 'vue';
 import { WarningFilled, CaretBottom, CaretRight, Delete, CaretTop, Grid, ArrowUp, ArrowDown, FullScreen } from '@element-plus/icons-vue';
 import { cloneDeep, isEqual, isEmpty } from 'lodash-es';
-import { TMagicFormItem, TMagicTooltip, TMagicIcon, TMagicButton, TMagicCheckbox, TMagicCard, TMagicCol, TMagicRow, TMagicSteps, TMagicStep, useZIndex, TMagicTable, TMagicTableColumn, TMagicUpload, TMagicPagination, tMagicMessage, getConfig as getConfig$1, TMagicBadge, TMagicCascader, TMagicCheckboxGroup, TMagicColorPicker, TMagicDatePicker, TMagicForm, TMagicInput, TMagicDialog, TMagicInputNumber, TMagicRadioGroup, TMagicRadio, TMagicOptionGroup, TMagicOption, TMagicSelect, TMagicSwitch, TMagicPopover, TMagicTimePicker, TMagicDrawer } from '@tmagic/design';
+import { TMagicFormItem, TMagicTooltip, TMagicIcon, TMagicButton, TMagicCheckbox, TMagicCard, TMagicCol, TMagicRow, TMagicSteps, TMagicStep, useZIndex, TMagicTable, TMagicTableColumn, TMagicUpload, TMagicPagination, tMagicMessage, getConfig as getConfig$1, TMagicBadge, TMagicCascader, TMagicCheckboxGroup, TMagicColorPicker, TMagicDatePicker, TMagicForm, TMagicInput, TMagicDialog, TMagicInputNumber, TMagicRadioGroup, TMagicRadio, TMagicOptionGroup, TMagicOption, TMagicSelect, TMagicSwitch, TMagicPopover, TMagicTimePicker, TMagicDrawer, TMagicScrollbar } from '@tmagic/design';
 import Sortable from 'sortablejs';
 import { sleep, asyncLoadJs, datetimeFormatter, getValueByKeyPath, isNumber } from '@tmagic/utils';
 
@@ -166,8 +166,8 @@ const initValue = async (mForm, { initValues, config }) => {
   return valuesTmp || {};
 };
 
-const _hoisted_1$e = ["id", "data-magic-id"];
-const _hoisted_2$9 = ["innerHTML", "title"];
+const _hoisted_1$d = ["id", "data-magic-id"];
+const _hoisted_2$8 = ["innerHTML", "title"];
 const _hoisted_3$5 = ["innerHTML"];
 const _hoisted_4$4 = ["innerHTML"];
 const _hoisted_5$4 = ["innerHTML"];
@@ -373,7 +373,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
               createElementVNode("span", {
                 innerHTML: type.value === "checkbox" ? "" : text.value,
                 title: _ctx.config.labelTitle
-              }, null, 8, _hoisted_2$9)
+              }, null, 8, _hoisted_2$8)
             ]),
             default: withCtx(() => [
               tooltip.value ? (openBlock(), createBlock(unref(TMagicTooltip), { key: 0 }, {
@@ -604,13 +604,13 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
             _: 1
           })
         ])) : createCommentVNode("", true)
-      ], 14, _hoisted_1$e)) : createCommentVNode("", true);
+      ], 14, _hoisted_1$d)) : createCommentVNode("", true);
     };
   }
 });
 
-const _hoisted_1$d = ["innerHTML"];
-const _hoisted_2$8 = ["innerHTML"];
+const _hoisted_1$c = ["innerHTML"];
+const _hoisted_2$7 = ["innerHTML"];
 const _hoisted_3$4 = { key: 1 };
 const _hoisted_4$3 = ["innerHTML"];
 const _hoisted_5$3 = ["innerHTML"];
@@ -674,18 +674,18 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
                 change
               ],
               prop: `${_ctx.prop}${_ctx.prop ? "." : ""}${_ctx.config.name}.value`,
-              "true-label": 1,
-              "false-label": 0
+              "true-value": 1,
+              "false-value": 0
             }, {
               default: withCtx(() => [
                 createElementVNode("span", {
                   innerHTML: _ctx.config.legend
-                }, null, 8, _hoisted_1$d),
+                }, null, 8, _hoisted_1$c),
                 _ctx.config.extra ? (openBlock(), createElementBlock("span", {
                   key: 0,
                   innerHTML: _ctx.config.extra,
                   class: "m-form-tip"
-                }, null, 8, _hoisted_2$8)) : createCommentVNode("", true)
+                }, null, 8, _hoisted_2$7)) : createCommentVNode("", true)
               ]),
               _: 1
             }, 8, ["modelValue", "prop"])
@@ -745,8 +745,8 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$c = { class: "m-fields-group-list-item" };
-const _hoisted_2$7 = ["innerHTML"];
+const _hoisted_1$b = { class: "m-fields-group-list-item" };
+const _hoisted_2$6 = ["innerHTML"];
 const _sfc_main$x = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormGroupListItem"
@@ -813,7 +813,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     };
     const onAddDiffCount = () => emit("addDiffCount");
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$c, [
+      return openBlock(), createElementBlock("div", _hoisted_1$b, [
         createElementVNode("div", null, [
           createVNode(unref(TMagicButton), {
             link: "",
@@ -879,7 +879,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
             key: 1,
             innerHTML: itemExtra.value,
             class: "m-form-tip"
-          }, null, 8, _hoisted_2$7)) : createCommentVNode("", true)
+          }, null, 8, _hoisted_2$6)) : createCommentVNode("", true)
         ]),
         expand.value ? (openBlock(), createBlock(_sfc_main$z, {
           key: 0,
@@ -899,8 +899,8 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$b = { class: "m-fields-group-list" };
-const _hoisted_2$6 = ["innerHTML"];
+const _hoisted_1$a = { class: "m-fields-group-list" };
+const _hoisted_2$5 = ["innerHTML"];
 const _hoisted_3$3 = {
   key: 1,
   class: "el-table__empty-block"
@@ -993,12 +993,12 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     const onAddDiffCount = () => emit("addDiffCount");
     const getLastValues = (item, index) => item?.[index] || {};
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$b, [
+      return openBlock(), createElementBlock("div", _hoisted_1$a, [
         _ctx.config.extra ? (openBlock(), createElementBlock("div", {
           key: 0,
           innerHTML: _ctx.config.extra,
           style: { "color": "rgba(0, 0, 0, 0.45)" }
-        }, null, 8, _hoisted_2$6)) : createCommentVNode("", true),
+        }, null, 8, _hoisted_2$5)) : createCommentVNode("", true),
         !_ctx.model[_ctx.name] || !_ctx.model[_ctx.name].length ? (openBlock(), createElementBlock("div", _hoisted_3$3, _hoisted_5$2)) : (openBlock(true), createElementBlock(Fragment, { key: 2 }, renderList(_ctx.model[_ctx.name], (item, index) => {
           return openBlock(), createBlock(_sfc_main$x, {
             key: index,
@@ -1045,8 +1045,8 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$a = { style: { "width": "100%", "display": "flex", "align-items": "center" } };
-const _hoisted_2$5 = ["innerHTML"];
+const _hoisted_1$9 = { style: { "width": "100%", "display": "flex", "align-items": "center" } };
+const _hoisted_2$4 = ["innerHTML"];
 const _hoisted_3$2 = {
   key: 0,
   style: { "display": "flex" }
@@ -1086,7 +1086,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
         "body-style": { display: expand.value ? "block" : "none" }
       }, {
         header: withCtx(() => [
-          createElementVNode("div", _hoisted_1$a, [
+          createElementVNode("div", _hoisted_1$9, [
             createVNode(unref(TMagicButton), {
               style: { "padding": "0" },
               link: "",
@@ -1097,7 +1097,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
               key: 0,
               innerHTML: _ctx.config.extra,
               class: "m-form-tip"
-            }, null, 8, _hoisted_2$5)) : createCommentVNode("", true),
+            }, null, 8, _hoisted_2$4)) : createCommentVNode("", true),
             renderSlot(_ctx.$slots, "header", {}, () => [
               createTextVNode(toDisplayString(filter(_ctx.config.title)), 1)
             ])
@@ -1331,8 +1331,8 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$9 = { class: "m-fields-table-wrap" };
-const _hoisted_2$4 = ["innerHTML"];
+const _hoisted_1$8 = { class: "m-fields-table-wrap" };
+const _hoisted_2$3 = ["innerHTML"];
 const _hoisted_3$1 = ["innerHTML"];
 const _hoisted_4 = { style: { "display": "flex", "justify-content": "space-between", "margin": "10px 0" } };
 const _hoisted_5 = { style: { "display": "flex" } };
@@ -1701,7 +1701,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
       toggleRowSelection
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$9, [
+      return openBlock(), createElementBlock("div", _hoisted_1$8, [
         (openBlock(), createBlock(Teleport, {
           to: "body",
           disabled: !isFullscreen.value
@@ -1715,7 +1715,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
               key: 0,
               style: { "color": "rgba(0, 0, 0, 0.45)" },
               innerHTML: _ctx.config.extra
-            }, null, 8, _hoisted_2$4)) : createCommentVNode("", true),
+            }, null, 8, _hoisted_2$3)) : createCommentVNode("", true),
             createVNode(unref(TMagicTooltip), {
               content: "拖拽可排序",
               placement: "left-start",
@@ -2633,7 +2633,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$8 = { key: 0 };
+const _hoisted_1$7 = { key: 0 };
 const _sfc_main$i = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormDisplay"
@@ -2657,12 +2657,12 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     }
     useAddField(props.prop);
     return (_ctx, _cache) => {
-      return _ctx.model ? (openBlock(), createElementBlock("span", _hoisted_1$8, toDisplayString(_ctx.model[_ctx.name]), 1)) : createCommentVNode("", true);
+      return _ctx.model ? (openBlock(), createElementBlock("span", _hoisted_1$7, toDisplayString(_ctx.model[_ctx.name]), 1)) : createCommentVNode("", true);
     };
   }
 });
 
-const _hoisted_1$7 = { class: "m-fields-dynamic-field" };
+const _hoisted_1$6 = { class: "m-fields-dynamic-field" };
 const _sfc_main$h = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormDynamicField"
@@ -2729,7 +2729,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       emit("change", fieldMap.value[key], key);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$7, [
+      return openBlock(), createElementBlock("div", _hoisted_1$6, [
         createVNode(unref(TMagicForm), { size: "small" }, {
           default: withCtx(() => [
             (openBlock(true), createElementBlock(Fragment, null, renderList(Object.keys(fieldMap.value), (key) => {
@@ -2948,7 +2948,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$6 = { style: { "min-height": "1px" } };
+const _hoisted_1$5 = { style: { "min-height": "1px" } };
 const _sfc_main$e = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormDialog"
@@ -3057,7 +3057,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                 style: { "text-align": "left" }
               }, {
                 default: withCtx(() => [
-                  createElementVNode("div", _hoisted_1$6, [
+                  createElementVNode("div", _hoisted_1$5, [
                     renderSlot(_ctx.$slots, "left")
                   ])
                 ]),
@@ -3147,8 +3147,8 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$5 = ["href"];
-const _hoisted_2$3 = {
+const _hoisted_1$4 = ["href"];
+const _hoisted_2$2 = {
   key: 2,
   class: "m-fields-link"
 };
@@ -3221,10 +3221,10 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
         target: "_blank",
         href: href.value,
         style: normalizeStyle(_ctx.config.css || {})
-      }, toDisplayString(displayText.value), 13, _hoisted_1$5)) : _ctx.config.href && _ctx.disabled ? (openBlock(), createElementBlock("span", {
+      }, toDisplayString(displayText.value), 13, _hoisted_1$4)) : _ctx.config.href && _ctx.disabled ? (openBlock(), createElementBlock("span", {
         key: 1,
         style: normalizeStyle(_ctx.config.disabledCss || {})
-      }, toDisplayString(displayText.value), 5)) : (openBlock(), createElementBlock("div", _hoisted_2$3, [
+      }, toDisplayString(displayText.value), 5)) : (openBlock(), createElementBlock("div", _hoisted_2$2, [
         createVNode(unref(TMagicButton), {
           link: "",
           type: "primary",
@@ -3300,8 +3300,8 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$4 = { class: "m-fields-number-range" };
-const _hoisted_2$2 = /* @__PURE__ */ createElementVNode("span", { class: "split-tag" }, "-", -1);
+const _hoisted_1$3 = { class: "m-fields-number-range" };
+const _hoisted_2$1 = /* @__PURE__ */ createElementVNode("span", { class: "split-tag" }, "-", -1);
 const _sfc_main$b = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormNumberRange"
@@ -3333,7 +3333,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       emit("change", [props.model[props.name][0], Number(v)]);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$4, [
+      return openBlock(), createElementBlock("div", _hoisted_1$3, [
         createVNode(unref(TMagicInput), {
           modelValue: _ctx.model[_ctx.name][0],
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.model[_ctx.name][0] = $event),
@@ -3342,7 +3342,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
           disabled: _ctx.disabled,
           onChange: minChangeHandler
         }, null, 8, ["modelValue", "size", "disabled"]),
-        _hoisted_2$2,
+        _hoisted_2$1,
         createVNode(unref(TMagicInput), {
           modelValue: _ctx.model[_ctx.name][1],
           "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.model[_ctx.name][1] = $event),
@@ -3465,7 +3465,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$3 = { key: 2 };
+const _hoisted_1$2 = { key: 2 };
 const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormSelect"
@@ -3814,7 +3814,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
             key: 1,
             options: unref(itemOptions)
           }, null, 8, ["options"])),
-          moreLoadingVisible.value ? withDirectives((openBlock(), createElementBlock("div", _hoisted_1$3, null, 512)), [
+          moreLoadingVisible.value ? withDirectives((openBlock(), createElementBlock("div", _hoisted_1$2, null, 512)), [
             [_directive_loading, true]
           ]) : createCommentVNode("", true)
         ]),
@@ -3884,8 +3884,8 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$2 = { class: "m-form-item__content" };
-const _hoisted_2$1 = /* @__PURE__ */ createElementVNode("div", { class: "m-form-validate__warning" }, "输入内容前后有空格，是否移除空格？", -1);
+const _hoisted_1$1 = { class: "m-form-item__content" };
+const _hoisted_2 = /* @__PURE__ */ createElementVNode("div", { class: "m-form-validate__warning" }, "输入内容前后有空格，是否移除空格？", -1);
 const _hoisted_3 = { style: { "display": "flex", "justify-content": "flex-end" } };
 const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   ...{
@@ -4041,8 +4041,8 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
           ]), 1032, ["modelValue", "size", "placeholder", "disabled"])
         ]),
         default: withCtx(() => [
-          createElementVNode("div", _hoisted_1$2, [
-            _hoisted_2$1,
+          createElementVNode("div", _hoisted_1$1, [
+            _hoisted_2,
             createElementVNode("div", _hoisted_3, [
               createVNode(unref(TMagicButton), {
                 link: "",
@@ -4236,7 +4236,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$1 = { style: { "min-height": "1px" } };
+const _hoisted_1 = { style: { "min-height": "1px" } };
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormDialog"
@@ -4340,7 +4340,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                 style: { "text-align": "left" }
               }, {
                 default: withCtx(() => [
-                  createElementVNode("div", _hoisted_1$1, [
+                  createElementVNode("div", _hoisted_1, [
                     renderSlot(_ctx.$slots, "left")
                   ])
                 ]),
@@ -4403,11 +4403,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1 = { class: "m-form-box" };
-const _hoisted_2 = { style: { "min-height": "1px" } };
+const footerHeight = 60;
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
-    name: "MFormDialog"
+    name: "MFormBox"
   },
   __name: "FormBox",
   props: {
@@ -4415,6 +4414,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     values: { default: () => ({}) },
     parentValues: {},
     width: {},
+    height: {},
     labelWidth: {},
     disabled: { type: Boolean },
     size: {},
@@ -4424,15 +4424,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   emits: ["submit", "change", "error"],
   setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
     const emit = __emit;
+    const style = computed(() => {
+      const style2 = {};
+      if (typeof props.width === "number") {
+        style2.width = `${props.width}px`;
+      }
+      if (typeof props.height === "number") {
+        style2.height = `${props.height}px`;
+      }
+      return style2;
+    });
     const form = ref();
-    const boxBody = ref();
     const saveFetch = ref(false);
     const bodyHeight = ref(0);
     watchEffect(() => {
-      if (boxBody.value) {
-        bodyHeight.value = boxBody.value.clientHeight;
+      if (!props.height) {
+        return;
       }
+      bodyHeight.value = props.height - footerHeight;
     });
     const submitHandler = async () => {
       try {
@@ -4452,67 +4463,63 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     __expose({
       form,
       saveFetch,
-      bodyHeight,
       show,
       hide
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
+      return openBlock(), createElementBlock("div", {
+        class: "m-form-box",
+        style: normalizeStyle(style.value)
+      }, [
         createElementVNode("div", {
-          ref_key: "boxBody",
-          ref: boxBody,
-          class: "m-box-body"
+          class: "m-box-body",
+          style: normalizeStyle(bodyHeight.value ? { height: `${bodyHeight.value}px` } : {})
         }, [
-          createVNode(_sfc_main$f, {
-            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"]),
-          renderSlot(_ctx.$slots, "default")
-        ], 512),
-        createVNode(unref(TMagicRow), { class: "dialog-footer" }, {
-          default: withCtx(() => [
-            createVNode(unref(TMagicCol), {
-              span: 12,
-              style: { "text-align": "left" }
-            }, {
-              default: withCtx(() => [
-                createElementVNode("div", _hoisted_2, [
-                  renderSlot(_ctx.$slots, "left")
-                ])
-              ]),
-              _: 3
-            }),
-            createVNode(unref(TMagicCol), { span: 12 }, {
-              default: withCtx(() => [
-                renderSlot(_ctx.$slots, "footer", {}, () => [
-                  createVNode(unref(TMagicButton), {
-                    type: "primary",
-                    disabled: _ctx.disabled,
-                    loading: saveFetch.value,
-                    onClick: submitHandler
-                  }, {
-                    default: withCtx(() => [
-                      createTextVNode(toDisplayString(_ctx.confirmText), 1)
-                    ]),
-                    _: 1
-                  }, 8, ["disabled", "loading"])
-                ])
-              ]),
-              _: 3
-            })
+          createVNode(unref(TMagicScrollbar), null, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$f, {
+                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"]),
+              renderSlot(_ctx.$slots, "default")
+            ]),
+            _: 3
+          })
+        ], 4),
+        createElementVNode("div", {
+          class: "dialog-footer",
+          style: normalizeStyle(`height: ${footerHeight}px`)
+        }, [
+          createElementVNode("div", null, [
+            renderSlot(_ctx.$slots, "left")
           ]),
-          _: 3
-        })
-      ]);
+          createElementVNode("div", null, [
+            renderSlot(_ctx.$slots, "footer", {}, () => [
+              createVNode(unref(TMagicButton), {
+                type: "primary",
+                size: _ctx.size,
+                disabled: _ctx.disabled,
+                loading: saveFetch.value,
+                onClick: submitHandler
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(_ctx.confirmText), 1)
+                ]),
+                _: 1
+              }, 8, ["size", "disabled", "loading"])
+            ])
+          ])
+        ], 4)
+      ], 4);
     };
   }
 });

package/dist/tmagic-form.umd.cjs

@@ -165,8 +165,8 @@
     return valuesTmp || {};
   };
 
-  const _hoisted_1$e = ["id", "data-magic-id"];
-  const _hoisted_2$9 = ["innerHTML", "title"];
+  const _hoisted_1$d = ["id", "data-magic-id"];
+  const _hoisted_2$8 = ["innerHTML", "title"];
   const _hoisted_3$5 = ["innerHTML"];
   const _hoisted_4$4 = ["innerHTML"];
   const _hoisted_5$4 = ["innerHTML"];
@@ -372,7 +372,7 @@
                 vue.createElementVNode("span", {
                   innerHTML: type.value === "checkbox" ? "" : text.value,
                   title: _ctx.config.labelTitle
-                }, null, 8, _hoisted_2$9)
+                }, null, 8, _hoisted_2$8)
               ]),
               default: vue.withCtx(() => [
                 tooltip.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), { key: 0 }, {
@@ -603,13 +603,13 @@
               _: 1
             })
           ])) : vue.createCommentVNode("", true)
-        ], 14, _hoisted_1$e)) : vue.createCommentVNode("", true);
+        ], 14, _hoisted_1$d)) : vue.createCommentVNode("", true);
       };
     }
   });
 
-  const _hoisted_1$d = ["innerHTML"];
-  const _hoisted_2$8 = ["innerHTML"];
+  const _hoisted_1$c = ["innerHTML"];
+  const _hoisted_2$7 = ["innerHTML"];
   const _hoisted_3$4 = { key: 1 };
   const _hoisted_4$3 = ["innerHTML"];
   const _hoisted_5$3 = ["innerHTML"];
@@ -673,18 +673,18 @@
                   change
                 ],
                 prop: `${_ctx.prop}${_ctx.prop ? "." : ""}${_ctx.config.name}.value`,
-                "true-label": 1,
-                "false-label": 0
+                "true-value": 1,
+                "false-value": 0
               }, {
                 default: vue.withCtx(() => [
                   vue.createElementVNode("span", {
                     innerHTML: _ctx.config.legend
-                  }, null, 8, _hoisted_1$d),
+                  }, 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$8)) : vue.createCommentVNode("", true)
+                  }, null, 8, _hoisted_2$7)) : vue.createCommentVNode("", true)
                 ]),
                 _: 1
               }, 8, ["modelValue", "prop"])
@@ -744,8 +744,8 @@
     }
   });
 
-  const _hoisted_1$c = { class: "m-fields-group-list-item" };
-  const _hoisted_2$7 = ["innerHTML"];
+  const _hoisted_1$b = { class: "m-fields-group-list-item" };
+  const _hoisted_2$6 = ["innerHTML"];
   const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormGroupListItem"
@@ -812,7 +812,7 @@
       };
       const onAddDiffCount = () => emit("addDiffCount");
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
           vue.createElementVNode("div", null, [
             vue.createVNode(vue.unref(design.TMagicButton), {
               link: "",
@@ -878,7 +878,7 @@
               key: 1,
               innerHTML: itemExtra.value,
               class: "m-form-tip"
-            }, null, 8, _hoisted_2$7)) : vue.createCommentVNode("", true)
+            }, null, 8, _hoisted_2$6)) : vue.createCommentVNode("", true)
           ]),
           expand.value ? (vue.openBlock(), vue.createBlock(_sfc_main$z, {
             key: 0,
@@ -898,8 +898,8 @@
     }
   });
 
-  const _hoisted_1$b = { class: "m-fields-group-list" };
-  const _hoisted_2$6 = ["innerHTML"];
+  const _hoisted_1$a = { class: "m-fields-group-list" };
+  const _hoisted_2$5 = ["innerHTML"];
   const _hoisted_3$3 = {
     key: 1,
     class: "el-table__empty-block"
@@ -992,12 +992,12 @@
       const onAddDiffCount = () => emit("addDiffCount");
       const getLastValues = (item, index) => item?.[index] || {};
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
           _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$6)) : vue.createCommentVNode("", true),
+          }, null, 8, _hoisted_2$5)) : vue.createCommentVNode("", true),
           !_ctx.model[_ctx.name] || !_ctx.model[_ctx.name].length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$3, _hoisted_5$2)) : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 2 }, vue.renderList(_ctx.model[_ctx.name], (item, index) => {
             return vue.openBlock(), vue.createBlock(_sfc_main$x, {
               key: index,
@@ -1044,8 +1044,8 @@
     }
   });
 
-  const _hoisted_1$a = { style: { "width": "100%", "display": "flex", "align-items": "center" } };
-  const _hoisted_2$5 = ["innerHTML"];
+  const _hoisted_1$9 = { style: { "width": "100%", "display": "flex", "align-items": "center" } };
+  const _hoisted_2$4 = ["innerHTML"];
   const _hoisted_3$2 = {
     key: 0,
     style: { "display": "flex" }
@@ -1085,7 +1085,7 @@
           "body-style": { display: expand.value ? "block" : "none" }
         }, {
           header: vue.withCtx(() => [
-            vue.createElementVNode("div", _hoisted_1$a, [
+            vue.createElementVNode("div", _hoisted_1$9, [
               vue.createVNode(vue.unref(design.TMagicButton), {
                 style: { "padding": "0" },
                 link: "",
@@ -1096,7 +1096,7 @@
                 key: 0,
                 innerHTML: _ctx.config.extra,
                 class: "m-form-tip"
-              }, null, 8, _hoisted_2$5)) : vue.createCommentVNode("", true),
+              }, null, 8, _hoisted_2$4)) : vue.createCommentVNode("", true),
               vue.renderSlot(_ctx.$slots, "header", {}, () => [
                 vue.createTextVNode(vue.toDisplayString(filter(_ctx.config.title)), 1)
               ])
@@ -1330,8 +1330,8 @@
     }
   });
 
-  const _hoisted_1$9 = { class: "m-fields-table-wrap" };
-  const _hoisted_2$4 = ["innerHTML"];
+  const _hoisted_1$8 = { class: "m-fields-table-wrap" };
+  const _hoisted_2$3 = ["innerHTML"];
   const _hoisted_3$1 = ["innerHTML"];
   const _hoisted_4 = { style: { "display": "flex", "justify-content": "space-between", "margin": "10px 0" } };
   const _hoisted_5 = { style: { "display": "flex" } };
@@ -1700,7 +1700,7 @@
         toggleRowSelection
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [
           (vue.openBlock(), vue.createBlock(vue.Teleport, {
             to: "body",
             disabled: !isFullscreen.value
@@ -1714,7 +1714,7 @@
                 key: 0,
                 style: { "color": "rgba(0, 0, 0, 0.45)" },
                 innerHTML: _ctx.config.extra
-              }, null, 8, _hoisted_2$4)) : vue.createCommentVNode("", true),
+              }, null, 8, _hoisted_2$3)) : vue.createCommentVNode("", true),
               vue.createVNode(vue.unref(design.TMagicTooltip), {
                 content: "拖拽可排序",
                 placement: "left-start",
@@ -2632,7 +2632,7 @@
     }
   });
 
-  const _hoisted_1$8 = { key: 0 };
+  const _hoisted_1$7 = { key: 0 };
   const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormDisplay"
@@ -2656,12 +2656,12 @@
       }
       useAddField(props.prop);
       return (_ctx, _cache) => {
-        return _ctx.model ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$8, 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$7 = { class: "m-fields-dynamic-field" };
+  const _hoisted_1$6 = { class: "m-fields-dynamic-field" };
   const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormDynamicField"
@@ -2728,7 +2728,7 @@
         emit("change", fieldMap.value[key], key);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$7, [
+        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) => {
@@ -2947,7 +2947,7 @@
     }
   });
 
-  const _hoisted_1$6 = { style: { "min-height": "1px" } };
+  const _hoisted_1$5 = { style: { "min-height": "1px" } };
   const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormDialog"
@@ -3056,7 +3056,7 @@
                   style: { "text-align": "left" }
                 }, {
                   default: vue.withCtx(() => [
-                    vue.createElementVNode("div", _hoisted_1$6, [
+                    vue.createElementVNode("div", _hoisted_1$5, [
                       vue.renderSlot(_ctx.$slots, "left")
                     ])
                   ]),
@@ -3146,8 +3146,8 @@
     }
   });
 
-  const _hoisted_1$5 = ["href"];
-  const _hoisted_2$3 = {
+  const _hoisted_1$4 = ["href"];
+  const _hoisted_2$2 = {
     key: 2,
     class: "m-fields-link"
   };
@@ -3220,10 +3220,10 @@
           target: "_blank",
           href: href.value,
           style: vue.normalizeStyle(_ctx.config.css || {})
-        }, vue.toDisplayString(displayText.value), 13, _hoisted_1$5)) : _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$3, [
+        }, vue.toDisplayString(displayText.value), 5)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$2, [
           vue.createVNode(vue.unref(design.TMagicButton), {
             link: "",
             type: "primary",
@@ -3299,8 +3299,8 @@
     }
   });
 
-  const _hoisted_1$4 = { class: "m-fields-number-range" };
-  const _hoisted_2$2 = /* @__PURE__ */ vue.createElementVNode("span", { class: "split-tag" }, "-", -1);
+  const _hoisted_1$3 = { class: "m-fields-number-range" };
+  const _hoisted_2$1 = /* @__PURE__ */ vue.createElementVNode("span", { class: "split-tag" }, "-", -1);
   const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormNumberRange"
@@ -3332,7 +3332,7 @@
         emit("change", [props.model[props.name][0], Number(v)]);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
+        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),
@@ -3341,7 +3341,7 @@
             disabled: _ctx.disabled,
             onChange: minChangeHandler
           }, null, 8, ["modelValue", "size", "disabled"]),
-          _hoisted_2$2,
+          _hoisted_2$1,
           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),
@@ -3464,7 +3464,7 @@
     }
   });
 
-  const _hoisted_1$3 = { key: 2 };
+  const _hoisted_1$2 = { key: 2 };
   const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormSelect"
@@ -3813,7 +3813,7 @@
               key: 1,
               options: vue.unref(itemOptions)
             }, null, 8, ["options"])),
-            moreLoadingVisible.value ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, null, 512)), [
+            moreLoadingVisible.value ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, null, 512)), [
               [_directive_loading, true]
             ]) : vue.createCommentVNode("", true)
           ]),
@@ -3883,8 +3883,8 @@
     }
   });
 
-  const _hoisted_1$2 = { class: "m-form-item__content" };
-  const _hoisted_2$1 = /* @__PURE__ */ vue.createElementVNode("div", { class: "m-form-validate__warning" }, "输入内容前后有空格，是否移除空格？", -1);
+  const _hoisted_1$1 = { class: "m-form-item__content" };
+  const _hoisted_2 = /* @__PURE__ */ vue.createElementVNode("div", { class: "m-form-validate__warning" }, "输入内容前后有空格，是否移除空格？", -1);
   const _hoisted_3 = { style: { "display": "flex", "justify-content": "flex-end" } };
   const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     ...{
@@ -4040,8 +4040,8 @@
             ]), 1032, ["modelValue", "size", "placeholder", "disabled"])
           ]),
           default: vue.withCtx(() => [
-            vue.createElementVNode("div", _hoisted_1$2, [
-              _hoisted_2$1,
+            vue.createElementVNode("div", _hoisted_1$1, [
+              _hoisted_2,
               vue.createElementVNode("div", _hoisted_3, [
                 vue.createVNode(vue.unref(design.TMagicButton), {
                   link: "",
@@ -4235,7 +4235,7 @@
     }
   });
 
-  const _hoisted_1$1 = { style: { "min-height": "1px" } };
+  const _hoisted_1 = { style: { "min-height": "1px" } };
   const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormDialog"
@@ -4339,7 +4339,7 @@
                   style: { "text-align": "left" }
                 }, {
                   default: vue.withCtx(() => [
-                    vue.createElementVNode("div", _hoisted_1$1, [
+                    vue.createElementVNode("div", _hoisted_1, [
                       vue.renderSlot(_ctx.$slots, "left")
                     ])
                   ]),
@@ -4402,11 +4402,10 @@
     }
   });
 
-  const _hoisted_1 = { class: "m-form-box" };
-  const _hoisted_2 = { style: { "min-height": "1px" } };
+  const footerHeight = 60;
   const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     ...{
-      name: "MFormDialog"
+      name: "MFormBox"
     },
     __name: "FormBox",
     props: {
@@ -4414,6 +4413,7 @@
       values: { default: () => ({}) },
       parentValues: {},
       width: {},
+      height: {},
       labelWidth: {},
       disabled: { type: Boolean },
       size: {},
@@ -4423,15 +4423,26 @@
     },
     emits: ["submit", "change", "error"],
     setup(__props, { expose: __expose, emit: __emit }) {
+      const props = __props;
       const emit = __emit;
+      const style = vue.computed(() => {
+        const style2 = {};
+        if (typeof props.width === "number") {
+          style2.width = `${props.width}px`;
+        }
+        if (typeof props.height === "number") {
+          style2.height = `${props.height}px`;
+        }
+        return style2;
+      });
       const form = vue.ref();
-      const boxBody = vue.ref();
       const saveFetch = vue.ref(false);
       const bodyHeight = vue.ref(0);
       vue.watchEffect(() => {
-        if (boxBody.value) {
-          bodyHeight.value = boxBody.value.clientHeight;
+        if (!props.height) {
+          return;
         }
+        bodyHeight.value = props.height - footerHeight;
       });
       const submitHandler = async () => {
         try {
@@ -4451,67 +4462,63 @@
       __expose({
         form,
         saveFetch,
-        bodyHeight,
         show,
         hide
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        return vue.openBlock(), vue.createElementBlock("div", {
+          class: "m-form-box",
+          style: vue.normalizeStyle(style.value)
+        }, [
           vue.createElementVNode("div", {
-            ref_key: "boxBody",
-            ref: boxBody,
-            class: "m-box-body"
+            class: "m-box-body",
+            style: vue.normalizeStyle(bodyHeight.value ? { height: `${bodyHeight.value}px` } : {})
           }, [
-            vue.createVNode(_sfc_main$f, {
-              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.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_2, [
-                    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), {
-                      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
-              })
+            vue.createVNode(vue.unref(design.TMagicScrollbar), null, {
+              default: vue.withCtx(() => [
+                vue.createVNode(_sfc_main$f, {
+                  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")
+              ]),
+              _: 3
+            })
+          ], 4),
+          vue.createElementVNode("div", {
+            class: "dialog-footer",
+            style: vue.normalizeStyle(`height: ${footerHeight}px`)
+          }, [
+            vue.createElementVNode("div", null, [
+              vue.renderSlot(_ctx.$slots, "left")
             ]),
-            _: 3
-          })
-        ]);
+            vue.createElementVNode("div", null, [
+              vue.renderSlot(_ctx.$slots, "footer", {}, () => [
+                vue.createVNode(vue.unref(design.TMagicButton), {
+                  type: "primary",
+                  size: _ctx.size,
+                  disabled: _ctx.disabled,
+                  loading: saveFetch.value,
+                  onClick: submitHandler
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createTextVNode(vue.toDisplayString(_ctx.confirmText), 1)
+                  ]),
+                  _: 1
+                }, 8, ["size", "disabled", "loading"])
+              ])
+            ])
+          ], 4)
+        ], 4);
       };
     }
   });

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.0-beta.1",
+  "version": "1.4.0-beta.2",
   "name": "@tmagic/form",
   "type": "module",
   "sideEffects": [
@@ -32,8 +32,8 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
-    "@tmagic/design": "1.4.0-beta.1",
-    "@tmagic/utils": "1.4.0-beta.1",
+    "@tmagic/design": "1.4.0-beta.2",
+    "@tmagic/utils": "1.4.0-beta.2",
     "lodash-es": "^4.17.21",
     "sortablejs": "^1.14.0",
     "vue": "^3.4.21"

package/src/FormBox.vue

@@ -1,56 +1,57 @@
 <template>
-  <div class="m-form-box">
-    <div ref="boxBody" class="m-box-body">
-      <Form
-        ref="form"
-        :size="size"
-        :disabled="disabled"
-        :config="config"
-        :init-values="values"
-        :parent-values="parentValues"
-        :label-width="labelWidth"
-        :label-position="labelPosition"
-        :inline="inline"
-        @change="changeHandler"
-      ></Form>
-      <slot></slot>
+  <div class="m-form-box" :style="style">
+    <div class="m-box-body" :style="bodyHeight ? { height: `${bodyHeight}px` } : {}">
+      <TMagicScrollbar>
+        <Form
+          ref="form"
+          :size="size"
+          :disabled="disabled"
+          :config="config"
+          :init-values="values"
+          :parent-values="parentValues"
+          :label-width="labelWidth"
+          :label-position="labelPosition"
+          :inline="inline"
+          @change="changeHandler"
+        ></Form>
+        <slot></slot>
+      </TMagicScrollbar>
     </div>
 
-    <TMagicRow class="dialog-footer">
-      <TMagicCol :span="12" style="text-align: left">
-        <div style="min-height: 1px">
-          <slot name="left"></slot>
-        </div>
-      </TMagicCol>
-      <TMagicCol :span="12">
+    <div class="dialog-footer" :style="`height: ${footerHeight}px`">
+      <div>
+        <slot name="left"></slot>
+      </div>
+      <div>
         <slot name="footer">
-          <TMagicButton type="primary" :disabled="disabled" :loading="saveFetch" @click="submitHandler">{{
+          <TMagicButton type="primary" :size="size" :disabled="disabled" :loading="saveFetch" @click="submitHandler">{{
             confirmText
           }}</TMagicButton>
         </slot>
-      </TMagicCol>
-    </TMagicRow>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, watchEffect } from 'vue';
+import { computed, ref, watchEffect } from 'vue';
 
-import { TMagicButton, TMagicCol, TMagicRow } from '@tmagic/design';
+import { TMagicButton, TMagicScrollbar } from '@tmagic/design';
 
 import Form from './Form.vue';
 import type { FormConfig } from './schema';
 
 defineOptions({
-  name: 'MFormDialog',
+  name: 'MFormBox',
 });
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     config?: FormConfig;
     values?: Object;
     parentValues?: Object;
-    width?: string | number;
+    width?: number;
+    height?: number;
     labelWidth?: string;
     disabled?: boolean;
     size?: 'small' | 'default' | 'large';
@@ -67,15 +68,29 @@ withDefaults(
 
 const emit = defineEmits(['submit', 'change', 'error']);
 
+const footerHeight = 60;
+
+const style = computed(() => {
+  const style: { width?: string; height?: string } = {};
+  if (typeof props.width === 'number') {
+    style.width = `${props.width}px`;
+  }
+  if (typeof props.height === 'number') {
+    style.height = `${props.height}px`;
+  }
+  return style;
+});
+
 const form = ref<InstanceType<typeof Form>>();
-const boxBody = ref<HTMLDivElement>();
 const saveFetch = ref(false);
+
 const bodyHeight = ref(0);
 
 watchEffect(() => {
-  if (boxBody.value) {
-    bodyHeight.value = boxBody.value.clientHeight;
+  if (!props.height) {
+    return;
   }
+  bodyHeight.value = props.height - footerHeight;
 });
 
 const submitHandler = async () => {
@@ -98,7 +113,6 @@ const hide = () => {};
 defineExpose({
   form,
   saveFetch,
-  bodyHeight,
 
   show,
   hide,

package/src/containers/Fieldset.vue

@@ -8,8 +8,8 @@
       <TMagicCheckbox
         v-model="model[name].value"
         :prop="`${prop}${prop ? '.' : ''}${config.name}.value`"
-        :true-label="1"
-        :false-label="0"
+        :true-value="1"
+        :false-value="0"
         @update:modelValue="change"
         ><span v-html="config.legend"></span><span v-if="config.extra" v-html="config.extra" class="m-form-tip"></span
       ></TMagicCheckbox>

package/src/theme/form-box.scss

@@ -1,18 +1,13 @@
 .m-form-box {
   display: flex;
   flex-direction: column;
-  padding: 16px;
-  box-sizing: border-box;
   .el-box__header {
     margin: 0;
   }
 
-  .m-box-body {
-    flex: 1;
-    overflow-y: auto;
-    overflow-x: hidden;
-  }
   .dialog-footer {
-    margin-top: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
   }
 }

package/types/FormBox.vue.d.ts

@@ -3,7 +3,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     config?: FormConfig | undefined;
     values?: Object | undefined;
     parentValues?: Object | undefined;
-    width?: string | number | undefined;
+    width?: number | undefined;
+    height?: number | undefined;
     labelWidth?: string | undefined;
     disabled?: boolean | undefined;
     size?: "large" | "default" | "small" | undefined;
@@ -266,7 +267,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
         labelPosition: string;
     }> | undefined>;
     saveFetch: import("vue").Ref<boolean>;
-    bodyHeight: import("vue").Ref<number>;
     show: () => void;
     hide: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -277,7 +277,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     config?: FormConfig | undefined;
     values?: Object | undefined;
     parentValues?: Object | undefined;
-    width?: string | number | undefined;
+    width?: number | undefined;
+    height?: number | undefined;
     labelWidth?: string | undefined;
     disabled?: boolean | undefined;
     size?: "large" | "default" | "small" | undefined;