@tmagic/form 1.5.0-beta.0 → 1.5.0-beta.10

package/dist/tmagic-form.umd.cjs

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('@element-plus/icons-vue'), require('lodash-es'), require('@tmagic/design'), require('sortablejs'), require('@tmagic/utils')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'vue', '@element-plus/icons-vue', 'lodash-es', '@tmagic/design', 'sortablejs', '@tmagic/utils'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicForm = {}, global.Vue, global.iconsVue, global.lodashEs, global.design, global.Sortable, global.utils));
-})(this, (function (exports, vue, iconsVue, lodashEs, design, Sortable, utils) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('@element-plus/icons-vue'), require('lodash-es'), require('@tmagic/design'), require('dayjs'), require('dayjs/plugin/utc'), require('sortablejs'), require('@tmagic/utils')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue', '@element-plus/icons-vue', 'lodash-es', '@tmagic/design', 'dayjs', 'dayjs/plugin/utc', 'sortablejs', '@tmagic/utils'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicForm = {}, global.Vue, global.iconsVue, global.lodashEs, global.design, global.dayjs, global.utc, global.Sortable, global.utils));
+})(this, (function (exports, vue, iconsVue, lodashEs, design, dayjs, utc, Sortable, utils) { 'use strict';
 
   const isTableSelect = (type) => typeof type === "string" && ["table-select", "tableSelect"].includes(type);
   const asyncLoadConfig = (value, initValue2, { asyncLoad, name, type }) => {
@@ -163,12 +163,30 @@
     }
     return valuesTmp || {};
   };
+  const datetimeFormatter = (v, defaultValue = "-", format = "YYYY-MM-DD HH:mm:ss") => {
+    if (v) {
+      let time;
+      if (["x", "timestamp"].includes(format)) {
+        time = dayjs(v).valueOf();
+      } else if (typeof v === "string" && v.includes("Z") || v.constructor === Date) {
+        dayjs.extend(utc);
+        time = dayjs(v).utcOffset(8).format(format);
+      } else {
+        time = dayjs(v).format(format);
+      }
+      if (time !== "Invalid Date") {
+        return time;
+      }
+      return defaultValue;
+    }
+    return defaultValue;
+  };
 
-  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"];
+  const _hoisted_1$d = ["data-tmagic-id", "data-tmagic-form-item-prop"];
+  const _hoisted_2$7 = ["innerHTML", "title"];
+  const _hoisted_3$4 = ["innerHTML"];
+  const _hoisted_4$3 = ["innerHTML"];
+  const _hoisted_5$3 = ["innerHTML"];
   const _hoisted_6$2 = ["innerHTML", "title"];
   const _hoisted_7$1 = ["innerHTML"];
   const _hoisted_8$1 = ["innerHTML"];
@@ -318,8 +336,8 @@
         const _component_Container = vue.resolveComponent("Container", true);
         return _ctx.config ? (vue.openBlock(), vue.createElementBlock("div", {
           key: 0,
-          id: _ctx.config.id,
-          "data-magic-id": _ctx.config.id,
+          "data-tmagic-id": _ctx.config.id,
+          "data-tmagic-form-item-prop": itemProp.value,
           style: vue.normalizeStyle(_ctx.config.tip ? "display: flex;align-items: baseline;" : ""),
           class: vue.normalizeClass(`m-form-container m-container-${type.value || ""} ${_ctx.config.className || ""}`)
         }, [
@@ -348,7 +366,7 @@
           }, 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" || !text.value }),
+              class: vue.normalizeClass({ "tmagic-form-hidden": `${itemLabelWidth.value}` === "0" || !text.value }),
               prop: itemProp.value,
               "label-width": itemLabelWidth.value,
               rules: rule.value
@@ -357,12 +375,12 @@
                 vue.createElementVNode("span", {
                   innerHTML: type.value === "checkbox" ? "" : text.value,
                   title: _ctx.config.labelTitle
-                }, null, 8, _hoisted_2$8)
+                }, null, 8, _hoisted_2$7)
               ]),
               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_3$5)
+                    vue.createElementVNode("div", { innerHTML: tooltip.value }, null, 8, _hoisted_3$4)
                   ]),
                   default: vue.withCtx(() => [
                     (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tagName.value), {
@@ -395,7 +413,7 @@
                   key: 2,
                   innerHTML: extra.value,
                   class: "m-form-tip"
-                }, null, 8, _hoisted_4$4)) : vue.createCommentVNode("", true)
+                }, null, 8, _hoisted_4$3)) : vue.createCommentVNode("", true)
               ]),
               _: 1
             }, 8, ["style", "class", "prop", "label-width", "rules"]),
@@ -406,7 +424,7 @@
               content: vue.withCtx(() => [
                 vue.createElementVNode("div", {
                   innerHTML: _ctx.config.tip
-                }, null, 8, _hoisted_5$4)
+                }, null, 8, _hoisted_5$3)
               ]),
               default: vue.withCtx(() => [
                 vue.createVNode(vue.unref(design.TMagicIcon), { style: { "line-height": "40px", "margin-left": "5px" } }, {
@@ -421,7 +439,7 @@
           ], 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" || !text.value }),
+              class: vue.normalizeClass({ "tmagic-form-hidden": `${itemLabelWidth.value}` === "0" || !text.value }),
               prop: itemProp.value,
               "label-width": itemLabelWidth.value,
               rules: rule.value
@@ -489,7 +507,7 @@
             })) : 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" || !text.value }),
+              class: vue.normalizeClass({ "tmagic-form-hidden": `${itemLabelWidth.value}` === "0" || !text.value }),
               prop: itemProp.value,
               "label-width": itemLabelWidth.value,
               rules: rule.value
@@ -594,10 +612,10 @@
   });
 
   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"];
+  const _hoisted_2$6 = ["innerHTML"];
+  const _hoisted_3$3 = { key: 1 };
+  const _hoisted_4$2 = ["innerHTML"];
+  const _hoisted_5$2 = ["innerHTML"];
   const _hoisted_6$1 = {
     key: 2,
     style: { "display": "flex" }
@@ -669,21 +687,21 @@
                     key: 0,
                     innerHTML: _ctx.config.extra,
                     class: "m-form-tip"
-                  }, null, 8, _hoisted_2$7)) : vue.createCommentVNode("", true)
+                  }, null, 8, _hoisted_2$6)) : vue.createCommentVNode("", true)
                 ]),
                 _: 1
               }, 8, ["modelValue", "prop"])
             ]),
             _: 1
-          })) : (vue.openBlock(), vue.createElementBlock("legend", _hoisted_3$4, [
+          })) : (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,
               class: "m-form-tip"
-            }, null, 8, _hoisted_5$3)) : vue.createCommentVNode("", true)
+            }, null, 8, _hoisted_5$2)) : vue.createCommentVNode("", true)
           ])),
           _ctx.config.schematic && show.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$1, [
             vue.createElementVNode("div", _hoisted_7, [
@@ -730,7 +748,7 @@
   });
 
   const _hoisted_1$b = { class: "m-fields-group-list-item" };
-  const _hoisted_2$6 = ["innerHTML"];
+  const _hoisted_2$5 = ["innerHTML"];
   const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormGroupListItem"
@@ -831,7 +849,7 @@
                 onClick: _cache[0] || (_cache[0] = ($event) => changeOrder(-1))
               }, {
                 default: vue.withCtx(() => [
-                  vue.createTextVNode("上移"),
+                  _cache[3] || (_cache[3] = vue.createTextVNode("上移")),
                   vue.createVNode(vue.unref(design.TMagicIcon), null, {
                     default: vue.withCtx(() => [
                       vue.createVNode(vue.unref(iconsVue.CaretTop))
@@ -850,7 +868,7 @@
                 onClick: _cache[1] || (_cache[1] = ($event) => changeOrder(1))
               }, {
                 default: vue.withCtx(() => [
-                  vue.createTextVNode("下移"),
+                  _cache[4] || (_cache[4] = vue.createTextVNode("下移")),
                   vue.createVNode(vue.unref(design.TMagicIcon), null, {
                     default: vue.withCtx(() => [
                       vue.createVNode(vue.unref(iconsVue.CaretBottom))
@@ -867,7 +885,7 @@
               key: 1,
               innerHTML: itemExtra.value,
               class: "m-form-tip"
-            }, null, 8, _hoisted_2$6)) : vue.createCommentVNode("", true)
+            }, null, 8, _hoisted_2$5)) : vue.createCommentVNode("", true)
           ]),
           expand.value ? (vue.openBlock(), vue.createBlock(_sfc_main$x, {
             key: 0,
@@ -888,15 +906,11 @@
   });
 
   const _hoisted_1$a = { class: "m-fields-group-list" };
-  const _hoisted_2$5 = ["innerHTML"];
-  const _hoisted_3$3 = {
+  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_5$2 = [
-    _hoisted_4$2
-  ];
   const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormGroupList"
@@ -982,8 +996,10 @@
             key: 0,
             innerHTML: _ctx.config.extra,
             style: { "color": "rgba(0, 0, 0, 0.45)" }
-          }, 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) => {
+          }, 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, _cache[1] || (_cache[1] = [
+            vue.createElementVNode("span", { class: "el-table__empty-text" }, "暂无数据", -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$v, {
               key: index,
               model: item,
@@ -1008,9 +1024,9 @@
             size: "small",
             disabled: _ctx.disabled
           }, {
-            default: vue.withCtx(() => [
+            default: vue.withCtx(() => _cache[2] || (_cache[2] = [
               vue.createTextVNode("新增")
-            ]),
+            ])),
             _: 1
           }, 8, ["disabled"])) : vue.createCommentVNode("", true),
           _ctx.config.enableToggleMode ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
@@ -1019,9 +1035,9 @@
             size: "small",
             onClick: toggleMode
           }, {
-            default: vue.withCtx(() => [
+            default: vue.withCtx(() => _cache[3] || (_cache[3] = [
               vue.createTextVNode("切换为表格")
-            ]),
+            ])),
             _: 1
           }, 8, ["icon"])) : vue.createCommentVNode("", true)
         ]);
@@ -1030,8 +1046,8 @@
   });
 
   const _hoisted_1$9 = { style: { "width": "100%", "display": "flex", "align-items": "center" } };
-  const _hoisted_2$4 = ["innerHTML"];
-  const _hoisted_3$2 = {
+  const _hoisted_2$3 = ["innerHTML"];
+  const _hoisted_3$1 = {
     key: 0,
     style: { "display": "flex" }
   };
@@ -1081,7 +1097,7 @@
                 key: 0,
                 innerHTML: _ctx.config.extra,
                 class: "m-form-tip"
-              }, null, 8, _hoisted_2$4)) : 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)
               ])
@@ -1090,7 +1106,7 @@
           default: vue.withCtx(() => [
             vue.createElementVNode("div", null, [
               vue.renderSlot(_ctx.$slots, "default"),
-              _ctx.config.schematic ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$2, [
+              _ctx.config.schematic ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$1, [
                 vue.createElementVNode("div", _hoisted_4$1, [
                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(items.value, (item, index) => {
                     return vue.openBlock(), vue.createBlock(_sfc_main$x, {
@@ -1316,8 +1332,8 @@
   });
 
   const _hoisted_1$8 = { class: "m-fields-table-wrap" };
-  const _hoisted_2$3 = ["innerHTML"];
-  const _hoisted_3$1 = ["innerHTML"];
+  const _hoisted_2$2 = ["innerHTML"];
+  const _hoisted_3 = ["innerHTML"];
   const _hoisted_4 = { style: { "display": "flex", "justify-content": "space-between", "margin": "10px 0" } };
   const _hoisted_5 = { style: { "display": "flex" } };
   const _hoisted_6 = {
@@ -1564,6 +1580,7 @@
         }
         timer = setTimeout(() => {
           swapArray(index, index - 1);
+          timer = void 0;
         }, 300);
       };
       const topHandler = (index) => {
@@ -1582,6 +1599,7 @@
         }
         timer = setTimeout(() => {
           swapArray(index, index + 1);
+          timer = void 0;
         }, 300);
       };
       const bottomHandler = (index) => {
@@ -1693,7 +1711,7 @@
                 key: 0,
                 style: { "color": "rgba(0, 0, 0, 0.45)" },
                 innerHTML: _ctx.config.extra
-              }, null, 8, _hoisted_2$3)) : vue.createCommentVNode("", true),
+              }, null, 8, _hoisted_2$2)) : vue.createCommentVNode("", true),
               vue.createVNode(vue.unref(design.TMagicTooltip), {
                 content: "拖拽可排序",
                 placement: "left-start",
@@ -1725,7 +1743,7 @@
                           vue.createElementVNode("span", {
                             innerHTML: itemExtra(_ctx.config.itemExtra, scope.$index),
                             class: "m-form-tip"
-                          }, null, 8, _hoisted_3$1)
+                          }, null, 8, _hoisted_3)
                         ]),
                         _: 1
                       })) : vue.createCommentVNode("", true),
@@ -1862,9 +1880,9 @@
                   plain: "",
                   onClick: _cache[2] || (_cache[2] = ($event) => newHandler())
                 }, {
-                  default: vue.withCtx(() => [
+                  default: vue.withCtx(() => _cache[4] || (_cache[4] = [
                     vue.createTextVNode("新增一行")
-                  ]),
+                  ])),
                   _: 1
                 }, 8, ["disabled"])) : vue.createCommentVNode("", true),
                 vue.createElementVNode("div", _hoisted_5, [
@@ -1875,9 +1893,9 @@
                     type: "primary",
                     onClick: toggleMode
                   }, {
-                    default: vue.withCtx(() => [
+                    default: vue.withCtx(() => _cache[5] || (_cache[5] = [
                       vue.createTextVNode("展开配置")
-                    ]),
+                    ])),
                     _: 1
                   }, 8, ["icon"])) : vue.createCommentVNode("", true),
                   _ctx.config.enableFullscreen !== false ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
@@ -1909,9 +1927,9 @@
                         disabled: _ctx.disabled,
                         plain: ""
                       }, {
-                        default: vue.withCtx(() => [
+                        default: vue.withCtx(() => _cache[6] || (_cache[6] = [
                           vue.createTextVNode("导入EXCEL")
-                        ]),
+                        ])),
                         _: 1
                       }, 8, ["disabled"])
                     ]),
@@ -1925,9 +1943,9 @@
                     plain: "",
                     onClick: _cache[3] || (_cache[3] = ($event) => clearHandler())
                   }, {
-                    default: vue.withCtx(() => [
+                    default: vue.withCtx(() => _cache[7] || (_cache[7] = [
                       vue.createTextVNode("清空")
-                    ]),
+                    ])),
                     _: 1
                   }, 8, ["disabled"])) : vue.createCommentVNode("", true)
                 ])
@@ -1970,8 +1988,8 @@
     },
     emits: ["change", "addDiffCount"],
     setup(__props, { emit: __emit }) {
-      const tabPaneComponent = design.getConfig("components")?.tabPane;
-      const tabsComponent = design.getConfig("components")?.tabs;
+      const tabPaneComponent = design.getDesignConfig("components")?.tabPane;
+      const tabsComponent = design.getDesignConfig("components")?.tabs;
       const getActive = (mForm2, props2, activeTabName2) => {
         const { config, model, prop } = props2;
         const { active } = config;
@@ -2454,7 +2472,7 @@
       const props = __props;
       const emit = __emit;
       useAddField(props.prop);
-      props.model[props.name] = utils.datetimeFormatter(props.model[props.name], "");
+      props.model[props.name] = datetimeFormatter(props.model[props.name], "", props.config.valueFormat || "YYYY/MM/DD");
       const changeHandler = (v) => {
         emit("change", v);
       };
@@ -2466,8 +2484,8 @@
           size: _ctx.size,
           placeholder: _ctx.config.placeholder,
           disabled: _ctx.disabled,
-          format: _ctx.config.format,
-          "value-format": _ctx.config.valueFormat || "YYYY/MM/DD HH:mm:ss",
+          format: _ctx.config.format || "YYYY/MM/DD",
+          "value-format": _ctx.config.valueFormat || "YYYY/MM/DD",
           onChange: changeHandler
         }, null, 8, ["modelValue", "size", "placeholder", "disabled", "format", "value-format"]);
       };
@@ -2505,9 +2523,10 @@
               if (!value.value) {
                 value.value = [];
               }
+              const format = `${props.config.dateFormat || "YYYY/MM/DD"} ${props.config.timeFormat || "HH:mm:ss"}`;
               if (!start || !end) value.value = [];
-              if (start !== preStart) value.value[0] = new Date(start);
-              if (end !== preEnd) value.value[1] = new Date(end);
+              if (start !== preStart) value.value[0] = datetimeFormatter(start, "", format);
+              if (end !== preEnd) value.value[1] = datetimeFormatter(end, "", format);
             },
             {
               immediate: true
@@ -2517,7 +2536,11 @@
           vue.watch(
             () => props.model[props.name],
             (start, preStart) => {
-              if (start !== preStart) value.value = start.map((item) => item ? new Date(item) : void 0);
+              const format = `${props.config.dateFormat || "YYYY/MM/DD"} ${props.config.timeFormat || "HH:mm:ss"}`;
+              if (start !== preStart)
+                value.value = start.map(
+                  (item) => item ? datetimeFormatter(item, "", format) : void 0
+                );
             },
             {
               immediate: true
@@ -2531,7 +2554,7 @@
             return;
           }
           if (Array.isArray(v)) {
-            props.model[item] = utils.datetimeFormatter(v[index]?.toString(), "");
+            props.model[item] = v[index];
           } else {
             props.model[item] = void 0;
           }
@@ -2540,18 +2563,12 @@
       const changeHandler = (v) => {
         const value2 = v || [];
         if (props.name) {
-          emit(
-            "change",
-            value2.map((item) => {
-              if (item) return utils.datetimeFormatter(item, "");
-              return void 0;
-            })
-          );
+          emit("change", value2);
         } else {
           if (names?.length) {
             setValue(value2);
           }
-          emit("change", value2);
+          emit("change", props.model);
         }
       };
       return (_ctx, _cache) => {
@@ -2566,8 +2583,11 @@
           "unlink-panels": true,
           disabled: _ctx.disabled,
           "default-time": _ctx.config.defaultTime,
+          "value-format": _ctx.config.valueFormat || "YYYY/MM/DD HH:mm:ss",
+          "date-format": _ctx.config.dateFormat || "YYYY/MM/DD",
+          "time-format": _ctx.config.timeFormat || "HH:mm:ss",
           onChange: changeHandler
-        }, null, 8, ["modelValue", "size", "disabled", "default-time"]);
+        }, null, 8, ["modelValue", "size", "disabled", "default-time", "value-format", "date-format", "time-format"]);
       };
     }
   });
@@ -2598,7 +2618,11 @@
         if (value === "Invalid Date") {
           props.model[props.name] = "";
         } else {
-          props.model[props.name] = utils.datetimeFormatter(props.model[props.name], "", props.config.valueFormat);
+          props.model[props.name] = datetimeFormatter(
+            props.model[props.name],
+            "",
+            props.config.valueFormat || "YYYY/MM/DD HH:mm:ss"
+          );
         }
       }
       const changeHandler = (v) => {
@@ -3054,9 +3078,9 @@
                         onClick: cancel,
                         size: "small"
                       }, {
-                        default: vue.withCtx(() => [
+                        default: vue.withCtx(() => _cache[2] || (_cache[2] = [
                           vue.createTextVNode("取 消")
-                        ]),
+                        ])),
                         _: 1
                       }),
                       hasStep.value && stepActive.value > 1 ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
@@ -3065,9 +3089,9 @@
                         size: "small",
                         onClick: preStep
                       }, {
-                        default: vue.withCtx(() => [
+                        default: vue.withCtx(() => _cache[3] || (_cache[3] = [
                           vue.createTextVNode("上一步")
-                        ]),
+                        ])),
                         _: 1
                       })) : vue.createCommentVNode("", true),
                       hasStep.value && stepCount.value > stepActive.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
@@ -3076,9 +3100,9 @@
                         size: "small",
                         onClick: nextStep
                       }, {
-                        default: vue.withCtx(() => [
+                        default: vue.withCtx(() => _cache[4] || (_cache[4] = [
                           vue.createTextVNode("下一步")
-                        ]),
+                        ])),
                         _: 1
                       })) : (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
                         key: 2,
@@ -3132,7 +3156,7 @@
   });
 
   const _hoisted_1$4 = ["href"];
-  const _hoisted_2$2 = {
+  const _hoisted_2$1 = {
     key: 2,
     class: "m-fields-link"
   };
@@ -3208,15 +3232,15 @@
         }, 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$2, [
+        }, vue.toDisplayString(displayText.value), 5)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$1, [
           vue.createVNode(vue.unref(design.TMagicButton), {
             link: "",
             type: "primary",
             onClick: editHandler
           }, {
-            default: vue.withCtx(() => [
+            default: vue.withCtx(() => _cache[0] || (_cache[0] = [
               vue.createTextVNode("点击编辑")
-            ]),
+            ])),
             _: 1
           }),
           vue.createVNode(_sfc_main$c, {
@@ -3285,7 +3309,6 @@
   });
 
   const _hoisted_1$3 = { class: "m-fields-number-range" };
-  const _hoisted_2$1 = /* @__PURE__ */ vue.createElementVNode("span", { class: "split-tag" }, "-", -1);
   const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormNumberRange"
@@ -3326,7 +3349,7 @@
             disabled: _ctx.disabled,
             onChange: minChangeHandler
           }, null, 8, ["modelValue", "size", "disabled"]),
-          _hoisted_2$1,
+          _cache[2] || (_cache[2] = vue.createElementVNode("span", { class: "split-tag" }, "-", -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),
@@ -3413,8 +3436,8 @@
     setup(__props, { emit: __emit }) {
       const props = __props;
       const emit = __emit;
-      const optionComponent = design.getConfig("components")?.option;
-      const optionGroupComponent = design.getConfig("components")?.optionGroup;
+      const optionComponent = design.getDesignConfig("components")?.option;
+      const optionGroupComponent = design.getDesignConfig("components")?.optionGroup;
       if (!props.model) throw new Error("不能没有model");
       useAddField(props.prop);
       const tMagicSelect = vue.ref();
@@ -3849,8 +3872,7 @@
   });
 
   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 _hoisted_2 = { style: { "display": "flex", "justify-content": "flex-end" } };
   const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormText"
@@ -3967,8 +3989,9 @@
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicPopover), {
+          width: "220px",
           visible: popoverVisible.value,
-          width: "220px"
+          "destroy-on-close": true
         }, {
           reference: vue.withCtx(() => [
             vue.createVNode(vue.unref(design.TMagicInput), {
@@ -4003,16 +4026,16 @@
           ]),
           default: vue.withCtx(() => [
             vue.createElementVNode("div", _hoisted_1$1, [
-              _hoisted_2,
-              vue.createElementVNode("div", _hoisted_3, [
+              _cache[5] || (_cache[5] = vue.createElementVNode("div", { class: "m-form-validate__warning" }, "输入内容前后有空格，是否移除空格？", -1)),
+              vue.createElementVNode("div", _hoisted_2, [
                 vue.createVNode(vue.unref(design.TMagicButton), {
                   link: "",
                   size: "small",
                   onClick: _cache[2] || (_cache[2] = ($event) => popoverVisible.value = false)
                 }, {
-                  default: vue.withCtx(() => [
+                  default: vue.withCtx(() => _cache[3] || (_cache[3] = [
                     vue.createTextVNode("保持原样")
-                  ]),
+                  ])),
                   _: 1
                 }),
                 vue.createVNode(vue.unref(design.TMagicButton), {
@@ -4020,9 +4043,9 @@
                   size: "small",
                   onClick: confirmTrimHandler
                 }, {
-                  default: vue.withCtx(() => [
+                  default: vue.withCtx(() => _cache[4] || (_cache[4] = [
                     vue.createTextVNode("移除空格")
-                  ]),
+                  ])),
                   _: 1
                 })
               ])
@@ -4163,7 +4186,7 @@
             return;
           }
           if (Array.isArray(v)) {
-            props.model[item] = utils.datetimeFormatter(v[index]?.toString(), "");
+            props.model[item] = v[index];
           } else {
             props.model[item] = void 0;
           }
@@ -4308,9 +4331,9 @@
                   default: vue.withCtx(() => [
                     vue.renderSlot(_ctx.$slots, "footer", {}, () => [
                       vue.createVNode(vue.unref(design.TMagicButton), { onClick: handleClose }, {
-                        default: vue.withCtx(() => [
+                        default: vue.withCtx(() => _cache[1] || (_cache[1] = [
                           vue.createTextVNode("关闭")
-                        ]),
+                        ])),
                         _: 1
                       }),
                       vue.createVNode(vue.unref(design.TMagicButton), {
@@ -4485,8 +4508,8 @@
   const createForm = (config) => config;
   const defaultInstallOpt = {};
   const index = {
-    install(app, opt = {}) {
-      const option = Object.assign(defaultInstallOpt, opt);
+    install(app, opt) {
+      const option = Object.assign(defaultInstallOpt, opt || {});
       app.config.globalProperties.$MAGIC_FORM = option;
       setConfig(option);
       app.component("m-form", _sfc_main$d);
@@ -4555,6 +4578,7 @@
   exports.MTimerange = _sfc_main$2;
   exports.createForm = createForm;
   exports.createValues = createValues;
+  exports.datetimeFormatter = datetimeFormatter;
   exports.default = index;
   exports.display = display;
   exports.filterFunction = filterFunction;