@tmagic/form 1.3.0-alpha.12 → 1.3.0-alpha.14

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, toRefs, mergeProps, getCurrentInstance, reactive, onBeforeUnmount, vModelText, provide, onBeforeMount, 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, TMagicTable, TMagicTableColumn, TMagicUpload, TMagicPagination, tMagicMessage, getConfig as getConfig$1, TMagicBadge, TMagicCascader, TMagicCheckboxGroup, TMagicColorPicker, TMagicDatePicker, TMagicForm, TMagicInput, TMagicDialog, TMagicInputNumber, TMagicRadioGroup, TMagicRadio, TMagicOptionGroup, TMagicOption, TMagicSelect, TMagicSwitch, TMagicTimePicker } from '@tmagic/design';
+import { TMagicFormItem, TMagicTooltip, TMagicIcon, TMagicButton, TMagicCheckbox, TMagicCard, TMagicCol, TMagicRow, TMagicSteps, TMagicStep, TMagicTable, TMagicTableColumn, TMagicUpload, TMagicPagination, tMagicMessage, getConfig as getConfig$1, TMagicBadge, TMagicCascader, TMagicCheckboxGroup, TMagicColorPicker, TMagicDatePicker, TMagicForm, TMagicInput, TMagicDialog, TMagicInputNumber, TMagicRadioGroup, TMagicRadio, TMagicOptionGroup, TMagicOption, TMagicSelect, TMagicSwitch, TMagicTimePicker, TMagicDrawer } from '@tmagic/design';
 import Sortable from 'sortablejs';
 import { asyncLoadJs, sleep, datetimeFormatter, getValueByKeyPath, isNumber } from '@tmagic/utils';
 import cloneDeep$1 from 'lodash-es/cloneDeep';
@@ -166,7 +166,7 @@ const initValue = async (mForm, { initValues, config }) => {
   return valuesTmp || {};
 };
 
-const _hoisted_1$b = ["innerHTML"];
+const _hoisted_1$c = ["innerHTML"];
 const _hoisted_2$6 = ["innerHTML"];
 const _hoisted_3$4 = ["innerHTML"];
 const _hoisted_4$4 = ["innerHTML"];
@@ -182,7 +182,7 @@ const _hoisted_13 = {
   key: 5,
   style: { "text-align": "center" }
 };
-const _sfc_main$v = /* @__PURE__ */ defineComponent({
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormContainer"
   },
@@ -330,7 +330,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
       return _ctx.config ? (openBlock(), createElementBlock("div", {
         key: 0,
         style: normalizeStyle(_ctx.config.tip ? "display: flex;align-items: baseline;" : ""),
-        class: normalizeClass([_ctx.config.className, "m-form-container"])
+        class: normalizeClass(`m-form-container m-container-${type.value || ""} ${_ctx.config.className || ""}`)
       }, [
         type.value === "hidden" ? (openBlock(), createBlock(_component_m_fields_hidden, {
           key: 0,
@@ -365,7 +365,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
             label: withCtx(() => [
               createElementVNode("span", {
                 innerHTML: type.value === "checkbox" ? "" : _ctx.config.text
-              }, null, 8, _hoisted_1$b)
+              }, null, 8, _hoisted_1$c)
             ]),
             default: withCtx(() => [
               tooltip.value ? (openBlock(), createBlock(unref(TMagicTooltip), { key: 0 }, {
@@ -599,7 +599,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$a = ["innerHTML"];
+const _hoisted_1$b = ["innerHTML"];
 const _hoisted_2$5 = ["innerHTML"];
 const _hoisted_3$3 = { key: 1 };
 const _hoisted_4$3 = ["innerHTML"];
@@ -610,7 +610,7 @@ const _hoisted_6 = {
 };
 const _hoisted_7 = { style: { "flex": "1" } };
 const _hoisted_8 = ["src"];
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormFieldset"
   },
@@ -669,7 +669,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
               default: withCtx(() => [
                 createElementVNode("span", {
                   innerHTML: _ctx.config.legend
-                }, null, 8, _hoisted_1$a),
+                }, null, 8, _hoisted_1$b),
                 _ctx.config.extra ? (openBlock(), createElementBlock("span", {
                   key: 0,
                   innerHTML: _ctx.config.extra,
@@ -693,7 +693,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
         _ctx.config.schematic && show.value ? (openBlock(), createElementBlock("div", _hoisted_6, [
           createElementVNode("div", _hoisted_7, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.config.items, (item, index) => {
-              return openBlock(), createBlock(_sfc_main$v, {
+              return openBlock(), createBlock(_sfc_main$w, {
                 key: key(item, index),
                 model: name.value ? _ctx.model[name.value] : _ctx.model,
                 lastValues: name.value ? _ctx.lastValues[name.value] : _ctx.lastValues,
@@ -714,7 +714,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
             src: _ctx.config.schematic
           }, null, 8, _hoisted_8)
         ])) : show.value ? (openBlock(true), createElementBlock(Fragment, { key: 3 }, renderList(_ctx.config.items, (item, index) => {
-          return openBlock(), createBlock(_sfc_main$v, {
+          return openBlock(), createBlock(_sfc_main$w, {
             key: key(item, index),
             model: name.value ? _ctx.model[name.value] : _ctx.model,
             lastValues: name.value ? _ctx.lastValues[name.value] : _ctx.lastValues,
@@ -734,9 +734,9 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$9 = { class: "m-fields-group-list-item" };
+const _hoisted_1$a = { class: "m-fields-group-list-item" };
 const _hoisted_2$4 = ["innerHTML"];
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormGroupListItem"
   },
@@ -797,7 +797,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     };
     const onAddDiffCount = () => emit("addDiffCount");
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$9, [
+      return openBlock(), createElementBlock("div", _hoisted_1$a, [
         createElementVNode("div", null, [
           createVNode(unref(TMagicButton), {
             text: "",
@@ -865,7 +865,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
             class: "m-form-tip"
           }, null, 8, _hoisted_2$4)) : createCommentVNode("", true)
         ]),
-        expand.value ? (openBlock(), createBlock(_sfc_main$v, {
+        expand.value ? (openBlock(), createBlock(_sfc_main$w, {
           key: 0,
           config: rowConfig.value,
           model: _ctx.model,
@@ -883,7 +883,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$8 = { class: "m-fields-group-list" };
+const _hoisted_1$9 = { class: "m-fields-group-list" };
 const _hoisted_2$3 = ["innerHTML"];
 const _hoisted_3$2 = {
   key: 1,
@@ -893,7 +893,7 @@ const _hoisted_4$2 = /* @__PURE__ */ createElementVNode("span", { class: "el-tab
 const _hoisted_5$1 = [
   _hoisted_4$2
 ];
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormGroupList"
   },
@@ -976,14 +976,14 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     const onAddDiffCount = () => emit("addDiffCount");
     const getLastValues = (item, index) => item?.[index] || {};
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$8, [
+      return openBlock(), createElementBlock("div", _hoisted_1$9, [
         _ctx.config.extra ? (openBlock(), createElementBlock("div", {
           key: 0,
           innerHTML: _ctx.config.extra,
           style: { "color": "rgba(0, 0, 0, 0.45)" }
         }, null, 8, _hoisted_2$3)) : createCommentVNode("", true),
         !_ctx.model[_ctx.name] || !_ctx.model[_ctx.name].length ? (openBlock(), createElementBlock("div", _hoisted_3$2, _hoisted_5$1)) : (openBlock(true), createElementBlock(Fragment, { key: 2 }, renderList(_ctx.model[_ctx.name], (item, index) => {
-          return openBlock(), createBlock(_sfc_main$t, {
+          return openBlock(), createBlock(_sfc_main$u, {
             key: index,
             model: item,
             lastValues: getLastValues(_ctx.lastValues[_ctx.name], index),
@@ -1028,7 +1028,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$7 = { style: { "width": "100%", "display": "flex", "align-items": "center" } };
+const _hoisted_1$8 = { style: { "width": "100%", "display": "flex", "align-items": "center" } };
 const _hoisted_2$2 = ["innerHTML"];
 const _hoisted_3$1 = {
   key: 0,
@@ -1036,7 +1036,7 @@ const _hoisted_3$1 = {
 };
 const _hoisted_4$1 = { style: { "flex": "1" } };
 const _hoisted_5 = ["src"];
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormPanel"
   },
@@ -1068,7 +1068,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
         "body-style": { display: expand.value ? "block" : "none" }
       }, {
         header: withCtx(() => [
-          createElementVNode("div", _hoisted_1$7, [
+          createElementVNode("div", _hoisted_1$8, [
             createVNode(unref(TMagicButton), {
               style: { "padding": "0" },
               text: "",
@@ -1091,7 +1091,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
             _ctx.config.schematic ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
               createElementVNode("div", _hoisted_4$1, [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(items.value, (item, index) => {
-                  return openBlock(), createBlock(_sfc_main$v, {
+                  return openBlock(), createBlock(_sfc_main$w, {
                     key: item[unref(mForm)?.keyProp || "__key"] ?? index,
                     config: item,
                     model: _ctx.name ? _ctx.model[_ctx.name] : _ctx.model,
@@ -1111,7 +1111,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
                 src: _ctx.config.schematic
               }, null, 8, _hoisted_5)
             ])) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(items.value, (item, index) => {
-              return openBlock(), createBlock(_sfc_main$v, {
+              return openBlock(), createBlock(_sfc_main$w, {
                 key: item[unref(mForm)?.keyProp || "__key"] ?? index,
                 config: item,
                 model: _ctx.name ? _ctx.model[_ctx.name] : _ctx.model,
@@ -1133,7 +1133,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormCol"
   },
@@ -1160,7 +1160,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return withDirectives((openBlock(), createBlock(unref(TMagicCol), { span: _ctx.span }, {
         default: withCtx(() => [
-          createVNode(_sfc_main$v, {
+          createVNode(_sfc_main$w, {
             model: _ctx.model,
             lastValues: _ctx.lastValues,
             "is-compare": _ctx.isCompare,
@@ -1182,7 +1182,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormRow"
   },
@@ -1209,7 +1209,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(unref(TMagicRow), { gutter: 10 }, {
         default: withCtx(() => [
           (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.config.items, (col, index) => {
-            return openBlock(), createBlock(_sfc_main$q, {
+            return openBlock(), createBlock(_sfc_main$r, {
               key: col[unref(mForm)?.keyProp || "__key"] ?? index,
               span: col.span || _ctx.config.span || 24 / _ctx.config.items.length,
               config: col,
@@ -1232,7 +1232,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormStep"
   },
@@ -1286,7 +1286,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
           return openBlock(), createElementBlock(Fragment, null, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(step.items, (item) => {
               return openBlock(), createElementBlock(Fragment, null, [
-                item ? withDirectives((openBlock(), createBlock(_sfc_main$v, {
+                item ? withDirectives((openBlock(), createBlock(_sfc_main$w, {
                   key: item[unref(mForm)?.keyProp || "__key"],
                   config: item,
                   model: step.name ? _ctx.model[step.name] : _ctx.model,
@@ -1310,7 +1310,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$6 = ["innerHTML"];
+const _hoisted_1$7 = ["innerHTML"];
 const _hoisted_2$1 = { class: "el-form-item__content" };
 const _hoisted_3 = ["innerHTML"];
 const _hoisted_4 = {
@@ -1318,7 +1318,7 @@ const _hoisted_4 = {
   class: "bottom",
   style: { "text-align": "right" }
 };
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormTable"
   },
@@ -1673,7 +1673,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
           key: 0,
           style: { "color": "rgba(0, 0, 0, 0.45)" },
           innerHTML: _ctx.config.extra
-        }, null, 8, _hoisted_1$6)) : createCommentVNode("", true),
+        }, null, 8, _hoisted_1$7)) : createCommentVNode("", true),
         createElementVNode("div", _hoisted_2$1, [
           createVNode(unref(TMagicTooltip), {
             content: "拖拽可排序",
@@ -1808,7 +1808,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                         "class-name": _ctx.config.dropSort === true ? "el-table__column--dropable" : ""
                       }, {
                         default: withCtx((scope) => [
-                          scope.$index > -1 ? (openBlock(), createBlock(_sfc_main$v, {
+                          scope.$index > -1 ? (openBlock(), createBlock(_sfc_main$w, {
                             key: 0,
                             labelWidth: "0",
                             disabled: _ctx.disabled,
@@ -1929,7 +1929,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormTabs"
   },
@@ -2083,7 +2083,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
               ]),
               default: withCtx(() => [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(tabItems(tab), (item) => {
-                  return openBlock(), createBlock(_sfc_main$v, {
+                  return openBlock(), createBlock(_sfc_main$w, {
                     key: item[unref(mForm)?.keyProp || "__key"],
                     config: item,
                     disabled: _ctx.disabled,
@@ -2135,7 +2135,7 @@ const useAddField = (prop) => {
   );
 };
 
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormCascader"
   },
@@ -2223,7 +2223,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormCheckbox"
   },
@@ -2285,7 +2285,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormCheckGroup"
   },
@@ -2348,7 +2348,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormColorPicker"
   },
@@ -2382,7 +2382,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormDate"
   },
@@ -2422,7 +2422,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormDateRange"
   },
@@ -2524,7 +2524,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormDateTime"
   },
@@ -2573,8 +2573,8 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$5 = { key: 0 };
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _hoisted_1$6 = { key: 0 };
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormDisplay"
   },
@@ -2595,13 +2595,13 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     }
     useAddField(props.prop);
     return (_ctx, _cache) => {
-      return _ctx.model ? (openBlock(), createElementBlock("span", _hoisted_1$5, toDisplayString(_ctx.model[_ctx.name]), 1)) : createCommentVNode("", true);
+      return _ctx.model ? (openBlock(), createElementBlock("span", _hoisted_1$6, toDisplayString(_ctx.model[_ctx.name]), 1)) : createCommentVNode("", true);
     };
   }
 });
 
-const _hoisted_1$4 = { class: "m-fields-dynamic-field" };
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _hoisted_1$5 = { class: "m-fields-dynamic-field" };
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormDynamicField"
   },
@@ -2666,7 +2666,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       emit("change", fieldMap.value[key], key);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$4, [
+      return openBlock(), createElementBlock("div", _hoisted_1$5, [
         createVNode(unref(TMagicForm), { size: "small" }, {
           default: withCtx(() => [
             (openBlock(true), createElementBlock(Fragment, null, renderList(Object.keys(fieldMap.value), (key) => {
@@ -2693,7 +2693,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormHidden"
   },
@@ -2722,7 +2722,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   ...{
     name: "MForm"
   },
@@ -2861,7 +2861,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       }, {
         default: withCtx(() => [
           initialized.value && Array.isArray(_ctx.config) ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.config, (item, index) => {
-            return openBlock(), createBlock(_sfc_main$v, {
+            return openBlock(), createBlock(_sfc_main$w, {
               disabled: _ctx.disabled,
               key: item[_ctx.keyProp] ?? index,
               config: item,
@@ -2881,8 +2881,8 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$3 = { style: { "min-height": "1px" } };
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _hoisted_1$4 = { style: { "min-height": "1px" } };
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormDialog"
   },
@@ -2926,9 +2926,6 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       }
       return false;
     });
-    const cancel = () => {
-      dialogVisible.value = false;
-    };
     const closeHandler = () => {
       stepActive.value = 1;
       emit("close");
@@ -2950,12 +2947,23 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     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 openBlock(), createBlock(unref(TMagicDialog), {
@@ -2979,7 +2987,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                 style: { "text-align": "left" }
               }, {
                 default: withCtx(() => [
-                  createElementVNode("div", _hoisted_1$3, [
+                  createElementVNode("div", _hoisted_1$4, [
                     renderSlot(_ctx.$slots, "left")
                   ])
                 ]),
@@ -3044,7 +3052,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
             class: "m-dialog-body",
             style: normalizeStyle(`max-height: ${bodyHeight.value}; overflow-y: auto; overflow-x: hidden;`)
           }, [
-            createVNode(_sfc_main$b, {
+            createVNode(_sfc_main$c, {
               modelValue: stepActive.value,
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => stepActive.value = $event),
               ref_key: "form",
@@ -3066,12 +3074,12 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$2 = ["href"];
+const _hoisted_1$3 = ["href"];
 const _hoisted_2 = {
   key: 2,
   class: "m-fields-link"
 };
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormLink"
   },
@@ -3139,7 +3147,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
         target: "_blank",
         href: href.value,
         style: normalizeStyle(_ctx.config.css || {})
-      }, toDisplayString(displayText.value), 13, _hoisted_1$2)) : _ctx.config.href && _ctx.disabled ? (openBlock(), createElementBlock("span", {
+      }, toDisplayString(displayText.value), 13, _hoisted_1$3)) : _ctx.config.href && _ctx.disabled ? (openBlock(), createElementBlock("span", {
         key: 1,
         style: normalizeStyle(_ctx.config.disabledCss || {})
       }, toDisplayString(displayText.value), 5)) : (openBlock(), createElementBlock("div", _hoisted_2, [
@@ -3153,7 +3161,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         }),
-        createVNode(_sfc_main$a, {
+        createVNode(_sfc_main$b, {
           ref_key: "editor",
           ref: editor,
           title: _ctx.config.formTitle || "编辑扩展配置",
@@ -3169,7 +3177,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormNumber"
   },
@@ -3217,7 +3225,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormRadioGroup"
   },
@@ -3269,7 +3277,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormSelectOptionGroups"
   },
@@ -3303,7 +3311,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormSelectOptions"
   },
@@ -3326,8 +3334,8 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$1 = { key: 2 };
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$2 = { key: 2 };
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormSelect"
   },
@@ -3667,14 +3675,14 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         onVisibleChange: visibleHandler
       }, {
         default: withCtx(() => [
-          _ctx.config.group ? (openBlock(), createBlock(_sfc_main$6, {
+          _ctx.config.group ? (openBlock(), createBlock(_sfc_main$7, {
             key: 0,
             options: unref(groupOptions)
-          }, null, 8, ["options"])) : (openBlock(), createBlock(_sfc_main$5, {
+          }, null, 8, ["options"])) : (openBlock(), createBlock(_sfc_main$6, {
             key: 1,
             options: unref(itemOptions)
           }, null, 8, ["options"])),
-          moreLoadingVisible.value ? withDirectives((openBlock(), createElementBlock("div", _hoisted_1$1, null, 512)), [
+          moreLoadingVisible.value ? withDirectives((openBlock(), createElementBlock("div", _hoisted_1$2, null, 512)), [
             [_directive_loading, true]
           ]) : createCommentVNode("", true)
         ]),
@@ -3686,7 +3694,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormSwitch"
   },
@@ -3743,8 +3751,8 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1 = { key: 0 };
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$1 = { key: 0 };
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormText"
   },
@@ -3848,7 +3856,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         _ctx.config.append ? {
           name: "append",
           fn: withCtx(() => [
-            typeof _ctx.config.append === "string" ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(_ctx.config.append), 1)) : createCommentVNode("", true),
+            typeof _ctx.config.append === "string" ? (openBlock(), createElementBlock("span", _hoisted_1$1, toDisplayString(_ctx.config.append), 1)) : createCommentVNode("", true),
             typeof _ctx.config.append === "object" && _ctx.config.append.type === "button" ? (openBlock(), createBlock(unref(TMagicButton), {
               key: 1,
               style: { "color": "#409eff" },
@@ -3868,7 +3876,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormTextarea"
   },
@@ -3912,7 +3920,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main = /* @__PURE__ */ defineComponent({
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormTime"
   },
@@ -3952,42 +3960,185 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 
 const index$1 = '';
 
+const _hoisted_1 = { style: { "min-height": "1px" } };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MFormDialog"
+  },
+  __name: "FormDrawer",
+  props: {
+    config: { default: () => [] },
+    values: { default: () => ({}) },
+    parentValues: {},
+    width: {},
+    labelWidth: {},
+    disabled: { type: Boolean },
+    title: {},
+    zIndex: {},
+    size: {},
+    confirmText: { default: "确定" }
+  },
+  emits: ["close", "submit", "error", "change", "open", "opened"],
+  setup(__props, { expose: __expose, emit }) {
+    const form = ref();
+    const drawerBody = ref();
+    const visible = ref(false);
+    const saveFetch = ref(false);
+    const bodyHeight = ref(0);
+    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 = (value) => {
+      emit("open", value);
+    };
+    const openedHandler = (value) => {
+      emit("opened", value);
+    };
+    const show = () => {
+      visible.value = true;
+    };
+    const hide = () => {
+      visible.value = false;
+    };
+    __expose({
+      form,
+      saveFetch,
+      bodyHeight,
+      show,
+      hide
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(TMagicDrawer), {
+        class: "m-form-drawer",
+        modelValue: visible.value,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => visible.value = $event),
+        title: _ctx.title,
+        "close-on-press-escape": true,
+        "append-to-body": true,
+        "show-close": true,
+        "close-on-click-modal": true,
+        size: _ctx.width,
+        zIndex: _ctx.zIndex,
+        onOpen: openHandler,
+        onOpened: openedHandler
+      }, {
+        footer: withCtx(() => [
+          createVNode(unref(TMagicRow), { class: "dialog-footer" }, {
+            default: withCtx(() => [
+              createVNode(unref(TMagicCol), {
+                span: 12,
+                style: { "text-align": "left" }
+              }, {
+                default: withCtx(() => [
+                  createElementVNode("div", _hoisted_1, [
+                    renderSlot(_ctx.$slots, "left")
+                  ])
+                ]),
+                _: 3
+              }),
+              createVNode(unref(TMagicCol), { span: 12 }, {
+                default: withCtx(() => [
+                  renderSlot(_ctx.$slots, "footer", {}, () => [
+                    createVNode(unref(TMagicButton), { onClick: hide }, {
+                      default: withCtx(() => [
+                        createTextVNode("关闭")
+                      ]),
+                      _: 1
+                    }),
+                    createVNode(unref(TMagicButton), {
+                      type: "primary",
+                      onClick: submitHandler,
+                      loading: saveFetch.value
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(_ctx.confirmText), 1)
+                      ]),
+                      _: 1
+                    }, 8, ["loading"])
+                  ])
+                ]),
+                _: 3
+              })
+            ]),
+            _: 3
+          })
+        ]),
+        default: withCtx(() => [
+          visible.value ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            ref_key: "drawerBody",
+            ref: drawerBody,
+            class: "m-drawer-body"
+          }, [
+            createVNode(_sfc_main$c, {
+              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,
+              onChange: changeHandler
+            }, null, 8, ["size", "disabled", "config", "init-values", "parent-values", "label-width"]),
+            renderSlot(_ctx.$slots, "default")
+          ], 512)) : createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 8, ["modelValue", "title", "size", "zIndex"]);
+    };
+  }
+});
+
 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$c);
+    app.component("m-form-dialog", _sfc_main$b);
+    app.component("m-form-container", _sfc_main$w);
+    app.component("m-form-fieldset", _sfc_main$v);
+    app.component("m-form-group-list", _sfc_main$t);
+    app.component("m-form-panel", _sfc_main$s);
+    app.component("m-form-row", _sfc_main$q);
+    app.component("m-form-step", _sfc_main$p);
+    app.component("m-form-table", _sfc_main$o);
+    app.component("m-form-tab", _sfc_main$n);
+    app.component("m-fields-text", _sfc_main$3);
+    app.component("m-fields-number", _sfc_main$9);
+    app.component("m-fields-textarea", _sfc_main$2);
+    app.component("m-fields-hidden", _sfc_main$d);
+    app.component("m-fields-date", _sfc_main$i);
+    app.component("m-fields-datetime", _sfc_main$g);
+    app.component("m-fields-daterange", _sfc_main$h);
+    app.component("m-fields-time", _sfc_main$1);
+    app.component("m-fields-checkbox", _sfc_main$l);
+    app.component("m-fields-switch", _sfc_main$4);
+    app.component("m-fields-color-picker", _sfc_main$j);
+    app.component("m-fields-checkbox-group", _sfc_main$k);
+    app.component("m-fields-radio-group", _sfc_main$8);
+    app.component("m-fields-display", _sfc_main$f);
+    app.component("m-fields-link", _sfc_main$a);
+    app.component("m-fields-select", _sfc_main$5);
+    app.component("m-fields-cascader", _sfc_main$m);
+    app.component("m-fields-dynamic-field", _sfc_main$e);
   }
 };
 
-export { _sfc_main$l as MCascader, _sfc_main$k as MCheckbox, _sfc_main$j as MCheckboxGroup, _sfc_main$i as MColorPicker, _sfc_main$v as MContainer, _sfc_main$h as MDate, _sfc_main$f as MDateTime, _sfc_main$g as MDaterange, _sfc_main$e as MDisplay, _sfc_main$d as MDynamicField, _sfc_main$u as MFieldset, _sfc_main$b as MForm, _sfc_main$a as MFormDialog, _sfc_main$s as MGroupList, _sfc_main$c as MHidden, _sfc_main$9 as MLink, _sfc_main$8 as MNumber, _sfc_main$r as MPanel, _sfc_main$7 as MRadioGroup, _sfc_main$p as MRow, _sfc_main$4 as MSelect, _sfc_main$3 as MSwitch, _sfc_main$n as MTable, _sfc_main$m as MTabs, _sfc_main$2 as MText, _sfc_main$1 as MTextarea, _sfc_main as MTime, createValues, index as default, display, filterFunction, getRules, initValue, useAddField };
+export { _sfc_main$m as MCascader, _sfc_main$l as MCheckbox, _sfc_main$k as MCheckboxGroup, _sfc_main$j as MColorPicker, _sfc_main$w as MContainer, _sfc_main$i as MDate, _sfc_main$g as MDateTime, _sfc_main$h as MDaterange, _sfc_main$f as MDisplay, _sfc_main$e as MDynamicField, _sfc_main$v as MFieldset, _sfc_main$c as MForm, _sfc_main$b as MFormDialog, _sfc_main as MFormDrawer, _sfc_main$t as MGroupList, _sfc_main$d as MHidden, _sfc_main$a as MLink, _sfc_main$9 as MNumber, _sfc_main$s as MPanel, _sfc_main$8 as MRadioGroup, _sfc_main$q as MRow, _sfc_main$5 as MSelect, _sfc_main$4 as MSwitch, _sfc_main$o as MTable, _sfc_main$n as MTabs, _sfc_main$3 as MText, _sfc_main$2 as MTextarea, _sfc_main$1 as MTime, createValues, index as default, display, filterFunction, getRules, initValue, useAddField };
 //# sourceMappingURL=tmagic-form.js.map