@tmagic/form 1.3.9 → 1.3.11

package/dist/style.css

@@ -53,6 +53,13 @@
   display: none;
 }
 
+.m-form-validate__warning {
+  color: var(--el-color-warning);
+  font-size: 12px;
+  width: 100%;
+  line-height: 1.4;
+}
+
 div.m-fields-link {
   width: fit-content;
 }
@@ -119,6 +126,10 @@ fieldset.m-fieldset .m-form-tip {
   margin-bottom: 20px;
 }
 
+.m-fields-table-wrap {
+  width: 100%;
+}
+
 .m-fields-table {
   width: 100%;
 }

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, 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 { 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 Sortable from 'sortablejs';
 import { sleep, asyncLoadJs, datetimeFormatter, getValueByKeyPath, isNumber } from '@tmagic/utils';
 
@@ -167,11 +167,11 @@ const initValue = async (mForm, { initValues, config }) => {
 };
 
 const _hoisted_1$e = ["id", "data-magic-id"];
-const _hoisted_2$8 = ["innerHTML"];
-const _hoisted_3$4 = ["innerHTML"];
+const _hoisted_2$9 = ["innerHTML"];
+const _hoisted_3$5 = ["innerHTML"];
 const _hoisted_4$4 = ["innerHTML"];
 const _hoisted_5$4 = ["innerHTML"];
-const _hoisted_6$1 = ["innerHTML"];
+const _hoisted_6$2 = ["innerHTML"];
 const _hoisted_7$1 = ["innerHTML"];
 const _hoisted_8$1 = ["innerHTML"];
 const _hoisted_9 = ["innerHTML"];
@@ -247,6 +247,8 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
       }
       if (type2 === "form")
         return "";
+      if (type2 === "container")
+        return "";
       return type2?.replace(/([A-Z])/g, "-$1").toLowerCase() || (items.value ? "" : "text");
     });
     const display$1 = computed(() => {
@@ -370,12 +372,12 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
             label: withCtx(() => [
               createElementVNode("span", {
                 innerHTML: type.value === "checkbox" ? "" : text.value
-              }, null, 8, _hoisted_2$8)
+              }, null, 8, _hoisted_2$9)
             ]),
             default: withCtx(() => [
               tooltip.value ? (openBlock(), createBlock(unref(TMagicTooltip), { key: 0 }, {
                 content: withCtx(() => [
-                  createElementVNode("div", { innerHTML: tooltip.value }, null, 8, _hoisted_3$4)
+                  createElementVNode("div", { innerHTML: tooltip.value }, null, 8, _hoisted_3$5)
                 ]),
                 default: withCtx(() => [
                   (openBlock(), createBlock(resolveDynamicComponent(tagName.value), {
@@ -442,7 +444,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
             label: withCtx(() => [
               createElementVNode("span", {
                 innerHTML: type.value === "checkbox" ? "" : text.value
-              }, null, 8, _hoisted_6$1)
+              }, null, 8, _hoisted_6$2)
             ]),
             default: withCtx(() => [
               tooltip.value ? (openBlock(), createBlock(unref(TMagicTooltip), { key: 0 }, {
@@ -590,7 +592,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
             type: "primary",
             size: "small",
             disabled: false,
-            text: "",
+            link: "",
             onClick: expandHandler
           }, {
             default: withCtx(() => [
@@ -605,11 +607,11 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$d = ["innerHTML"];
-const _hoisted_2$7 = ["innerHTML"];
-const _hoisted_3$3 = { key: 1 };
+const _hoisted_2$8 = ["innerHTML"];
+const _hoisted_3$4 = { key: 1 };
 const _hoisted_4$3 = ["innerHTML"];
 const _hoisted_5$3 = ["innerHTML"];
-const _hoisted_6 = {
+const _hoisted_6$1 = {
   key: 2,
   style: { "display": "flex" }
 };
@@ -680,13 +682,13 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
                   key: 0,
                   innerHTML: _ctx.config.extra,
                   class: "m-form-tip"
-                }, null, 8, _hoisted_2$7)) : createCommentVNode("", true)
+                }, null, 8, _hoisted_2$8)) : createCommentVNode("", true)
               ]),
               _: 1
             }, 8, ["modelValue", "prop"])
           ]),
           _: 1
-        })) : (openBlock(), createElementBlock("legend", _hoisted_3$3, [
+        })) : (openBlock(), createElementBlock("legend", _hoisted_3$4, [
           createElementVNode("span", {
             innerHTML: _ctx.config.legend
           }, null, 8, _hoisted_4$3),
@@ -696,7 +698,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
             class: "m-form-tip"
           }, null, 8, _hoisted_5$3)) : createCommentVNode("", true)
         ])),
-        _ctx.config.schematic && show.value ? (openBlock(), createElementBlock("div", _hoisted_6, [
+        _ctx.config.schematic && show.value ? (openBlock(), createElementBlock("div", _hoisted_6$1, [
           createElementVNode("div", _hoisted_7, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.config.items, (item, index) => {
               return openBlock(), createBlock(_sfc_main$z, {
@@ -741,7 +743,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$c = { class: "m-fields-group-list-item" };
-const _hoisted_2$6 = ["innerHTML"];
+const _hoisted_2$7 = ["innerHTML"];
 const _sfc_main$x = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormGroupListItem"
@@ -811,7 +813,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", _hoisted_1$c, [
         createElementVNode("div", null, [
           createVNode(unref(TMagicButton), {
-            text: "",
+            link: "",
             disabled: _ctx.disabled,
             icon: expand.value ? unref(CaretBottom) : unref(CaretRight),
             onClick: expandHandler
@@ -823,7 +825,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
           }, 8, ["disabled", "icon"]),
           withDirectives(createVNode(unref(TMagicButton), {
             style: { "color": "#f56c6c" },
-            text: "",
+            link: "",
             icon: unref(Delete),
             disabled: _ctx.disabled,
             onClick: removeHandler
@@ -832,7 +834,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
           ]),
           movable() ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
             withDirectives(createVNode(unref(TMagicButton), {
-              text: "",
+              link: "",
               disabled: _ctx.disabled,
               size: "small",
               onClick: _cache[0] || (_cache[0] = ($event) => changeOrder(-1))
@@ -852,7 +854,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
             ]),
             withDirectives(createVNode(unref(TMagicButton), {
               disabled: _ctx.disabled,
-              text: "",
+              link: "",
               size: "small",
               onClick: _cache[1] || (_cache[1] = ($event) => changeOrder(1))
             }, {
@@ -874,7 +876,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
             key: 1,
             innerHTML: itemExtra.value,
             class: "m-form-tip"
-          }, null, 8, _hoisted_2$6)) : createCommentVNode("", true)
+          }, null, 8, _hoisted_2$7)) : createCommentVNode("", true)
         ]),
         expand.value ? (openBlock(), createBlock(_sfc_main$z, {
           key: 0,
@@ -895,8 +897,8 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$b = { class: "m-fields-group-list" };
-const _hoisted_2$5 = ["innerHTML"];
-const _hoisted_3$2 = {
+const _hoisted_2$6 = ["innerHTML"];
+const _hoisted_3$3 = {
   key: 1,
   class: "el-table__empty-block"
 };
@@ -993,8 +995,8 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
           key: 0,
           innerHTML: _ctx.config.extra,
           style: { "color": "rgba(0, 0, 0, 0.45)" }
-        }, null, 8, _hoisted_2$5)) : createCommentVNode("", true),
-        !_ctx.model[_ctx.name] || !_ctx.model[_ctx.name].length ? (openBlock(), createElementBlock("div", _hoisted_3$2, _hoisted_5$2)) : (openBlock(true), createElementBlock(Fragment, { key: 2 }, renderList(_ctx.model[_ctx.name], (item, index) => {
+        }, null, 8, _hoisted_2$6)) : 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,
             model: item,
@@ -1041,8 +1043,8 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$a = { style: { "width": "100%", "display": "flex", "align-items": "center" } };
-const _hoisted_2$4 = ["innerHTML"];
-const _hoisted_3$1 = {
+const _hoisted_2$5 = ["innerHTML"];
+const _hoisted_3$2 = {
   key: 0,
   style: { "display": "flex" }
 };
@@ -1084,7 +1086,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
           createElementVNode("div", _hoisted_1$a, [
             createVNode(unref(TMagicButton), {
               style: { "padding": "0" },
-              text: "",
+              link: "",
               icon: expand.value ? unref(CaretBottom) : unref(CaretRight),
               onClick: _cache[0] || (_cache[0] = ($event) => expand.value = !expand.value)
             }, null, 8, ["icon"]),
@@ -1092,7 +1094,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
               key: 0,
               innerHTML: _ctx.config.extra,
               class: "m-form-tip"
-            }, null, 8, _hoisted_2$4)) : createCommentVNode("", true),
+            }, null, 8, _hoisted_2$5)) : createCommentVNode("", true),
             renderSlot(_ctx.$slots, "header", {}, () => [
               createTextVNode(toDisplayString(filter(_ctx.config.title)), 1)
             ])
@@ -1101,7 +1103,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
         default: withCtx(() => [
           createElementVNode("div", null, [
             renderSlot(_ctx.$slots, "default"),
-            _ctx.config.schematic ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
+            _ctx.config.schematic ? (openBlock(), createElementBlock("div", _hoisted_3$2, [
               createElementVNode("div", _hoisted_4$1, [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(items.value, (item, index) => {
                   return openBlock(), createBlock(_sfc_main$z, {
@@ -1326,11 +1328,12 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$9 = ["innerHTML"];
-const _hoisted_2$3 = ["innerHTML"];
-const _hoisted_3 = { style: { "display": "flex", "justify-content": "space-between", "margin": "10px 0" } };
-const _hoisted_4 = { style: { "display": "flex" } };
-const _hoisted_5 = {
+const _hoisted_1$9 = { class: "m-fields-table-wrap" };
+const _hoisted_2$4 = ["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" } };
+const _hoisted_6 = {
   key: 1,
   class: "bottom",
   style: { "text-align": "right" }
@@ -1362,6 +1365,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     const emit = __emit;
     let timer = null;
     const mForm = inject("mForm");
+    const { nextZIndex } = useZIndex();
     const tMagicTable = ref();
     const excelBtn = ref();
     const mTable = ref();
@@ -1674,11 +1678,14 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
       });
     };
     const toggleFullscreen = () => {
+      if (!mTable.value)
+        return;
       if (isFullscreen.value) {
-        mTable.value?.classList.remove("fixed");
+        mTable.value.classList.remove("fixed");
         isFullscreen.value = false;
       } else {
-        mTable.value?.classList.add("fixed");
+        mTable.value.classList.add("fixed");
+        mTable.value.style.zIndex = `${nextZIndex()}`;
         isFullscreen.value = true;
       }
     };
@@ -1691,7 +1698,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
       toggleRowSelection
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", null, [
+      return openBlock(), createElementBlock("div", _hoisted_1$9, [
         (openBlock(), createBlock(Teleport, {
           to: "body",
           disabled: !isFullscreen.value
@@ -1705,7 +1712,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
               key: 0,
               style: { "color": "rgba(0, 0, 0, 0.45)" },
               innerHTML: _ctx.config.extra
-            }, null, 8, _hoisted_1$9)) : createCommentVNode("", true),
+            }, null, 8, _hoisted_2$4)) : createCommentVNode("", true),
             createVNode(unref(TMagicTooltip), {
               content: "拖拽可排序",
               placement: "left-start",
@@ -1737,7 +1744,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
                         createElementVNode("span", {
                           innerHTML: itemExtra(_ctx.config.itemExtra, scope.$index),
                           class: "m-form-tip"
-                        }, null, 8, _hoisted_2$3)
+                        }, null, 8, _hoisted_3$1)
                       ]),
                       _: 1
                     })) : createCommentVNode("", true),
@@ -1781,7 +1788,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
                               type: "primary",
                               icon: unref(ArrowUp),
                               disabled: _ctx.disabled,
-                              text: "",
+                              link: "",
                               onClick: ($event) => upHandler(scope.$index + 1 + pagecontext.value * pagesize.value - 1),
                               onDblclick: ($event) => topHandler(scope.$index + 1 + pagecontext.value * pagesize.value - 1)
                             }, null, 8, ["icon", "disabled", "onClick", "onDblclick"])
@@ -1800,7 +1807,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
                               type: "primary",
                               icon: unref(ArrowDown),
                               disabled: _ctx.disabled,
-                              text: "",
+                              link: "",
                               onClick: ($event) => downHandler(scope.$index + 1 + pagecontext.value * pagesize.value - 1),
                               onDblclick: ($event) => bottomHandler(scope.$index + 1 + pagecontext.value * pagesize.value - 1)
                             }, null, 8, ["icon", "disabled", "onClick", "onDblclick"])
@@ -1865,7 +1872,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
               _: 3
             }, 8, ["disabled"]),
             renderSlot(_ctx.$slots, "default"),
-            createElementVNode("div", _hoisted_3, [
+            createElementVNode("div", _hoisted_4, [
               addable.value ? (openBlock(), createBlock(unref(TMagicButton), {
                 key: 0,
                 size: "small",
@@ -1879,7 +1886,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
                 ]),
                 _: 1
               }, 8, ["disabled"])) : createCommentVNode("", true),
-              createElementVNode("div", _hoisted_4, [
+              createElementVNode("div", _hoisted_5, [
                 _ctx.enableToggleMode && _ctx.config.enableToggleMode !== false && !isFullscreen.value ? (openBlock(), createBlock(unref(TMagicButton), {
                   key: 0,
                   icon: unref(Grid),
@@ -1944,7 +1951,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
                 }, 8, ["disabled"])) : createCommentVNode("", true)
               ])
             ]),
-            _ctx.config.pagination ? (openBlock(), createElementBlock("div", _hoisted_5, [
+            _ctx.config.pagination ? (openBlock(), createElementBlock("div", _hoisted_6, [
               createVNode(unref(TMagicPagination), {
                 layout: "total, sizes, prev, pager, next, jumper",
                 "hide-on-single-page": _ctx.model[modelName.value].length < pagesize.value,
@@ -3138,7 +3145,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$5 = ["href"];
-const _hoisted_2$2 = {
+const _hoisted_2$3 = {
   key: 2,
   class: "m-fields-link"
 };
@@ -3214,9 +3221,9 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       }, toDisplayString(displayText.value), 13, _hoisted_1$5)) : _ctx.config.href && _ctx.disabled ? (openBlock(), createElementBlock("span", {
         key: 1,
         style: normalizeStyle(_ctx.config.disabledCss || {})
-      }, toDisplayString(displayText.value), 5)) : (openBlock(), createElementBlock("div", _hoisted_2$2, [
+      }, toDisplayString(displayText.value), 5)) : (openBlock(), createElementBlock("div", _hoisted_2$3, [
         createVNode(unref(TMagicButton), {
-          text: true,
+          link: "",
           type: "primary",
           onClick: editHandler
         }, {
@@ -3291,7 +3298,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$4 = { class: "m-fields-number-range" };
-const _hoisted_2$1 = /* @__PURE__ */ createElementVNode("span", { class: "split-tag" }, "-", -1);
+const _hoisted_2$2 = /* @__PURE__ */ createElementVNode("span", { class: "split-tag" }, "-", -1);
 const _sfc_main$b = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormNumberRange"
@@ -3332,7 +3339,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
           disabled: _ctx.disabled,
           onChange: minChangeHandler
         }, null, 8, ["modelValue", "size", "disabled"]),
-        _hoisted_2$1,
+        _hoisted_2$2,
         createVNode(unref(TMagicInput), {
           modelValue: _ctx.model[_ctx.name][1],
           "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.model[_ctx.name][1] = $event),
@@ -3875,7 +3882,9 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$2 = { key: 0 };
+const _hoisted_1$2 = { class: "m-form-item__content" };
+const _hoisted_2$1 = /* @__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({
   ...{
     name: "MFormText"
@@ -3898,18 +3907,45 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     const emit = __emit;
     useAddField(props.prop);
     const mForm = inject("mForm");
+    const appendConfig = computed(() => {
+      if (typeof props.config.append === "string") {
+        return {
+          text: props.config.append,
+          type: "button",
+          handler: void 0
+        };
+      }
+      if (props.config.append && typeof props.config.append === "object") {
+        if (props.config.append.value === 0) {
+          return false;
+        }
+        return props.config.append;
+      }
+      return false;
+    });
+    const popoverVisible = ref(false);
+    const confirmTrimHandler = () => {
+      emit("change", props.model[props.name].trim() || "");
+      popoverVisible.value = false;
+    };
+    const checkWhiteSpace = (value) => {
+      if (typeof value === "string" && !props.config.trim) {
+        popoverVisible.value = value.trim() !== value;
+      }
+    };
     const changeHandler = (value) => {
       emit("change", value);
     };
     const inputHandler = (v) => {
+      checkWhiteSpace(v);
       emit("input", v);
       mForm?.$emit("field-input", props.prop, v);
     };
     const buttonClickHandler = () => {
-      if (typeof props.config.append === "string")
+      if (!appendConfig.value)
         return;
-      if (props.config.append?.handler) {
-        props.config.append.handler(mForm, {
+      if (typeof appendConfig.value.handler === "function") {
+        appendConfig.value.handler(mForm, {
           model: props.model,
           values: mForm?.values
         });
@@ -3967,36 +4003,70 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       emit("change", props.model[props.name]);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(TMagicInput), {
-        modelValue: _ctx.model[_ctx.name],
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.model[_ctx.name] = $event),
-        clearable: "",
-        size: _ctx.size,
-        placeholder: _ctx.config.placeholder,
-        disabled: _ctx.disabled,
-        onChange: changeHandler,
-        onInput: inputHandler,
-        onKeyup: _cache[1] || (_cache[1] = ($event) => keyUpHandler($event))
-      }, createSlots({ _: 2 }, [
-        _ctx.config.append ? {
-          name: "append",
-          fn: withCtx(() => [
-            typeof _ctx.config.append === "string" ? (openBlock(), createElementBlock("span", _hoisted_1$2, 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" },
-              size: _ctx.size,
-              onClick: withModifiers(buttonClickHandler, ["prevent"])
-            }, {
-              default: withCtx(() => [
-                createTextVNode(toDisplayString(_ctx.config.append.text), 1)
+      return openBlock(), createBlock(unref(TMagicPopover), {
+        visible: popoverVisible.value,
+        width: "220px"
+      }, {
+        reference: withCtx(() => [
+          createVNode(unref(TMagicInput), {
+            modelValue: _ctx.model[_ctx.name],
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.model[_ctx.name] = $event),
+            clearable: "",
+            size: _ctx.size,
+            placeholder: _ctx.config.placeholder,
+            disabled: _ctx.disabled,
+            onChange: changeHandler,
+            onInput: inputHandler,
+            onKeyup: _cache[1] || (_cache[1] = ($event) => keyUpHandler($event))
+          }, createSlots({ _: 2 }, [
+            appendConfig.value ? {
+              name: "append",
+              fn: withCtx(() => [
+                appendConfig.value.type === "button" ? (openBlock(), createBlock(unref(TMagicButton), {
+                  key: 0,
+                  style: { "color": "#409eff" },
+                  size: _ctx.size,
+                  onClick: withModifiers(buttonClickHandler, ["prevent"])
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(appendConfig.value.text), 1)
+                  ]),
+                  _: 1
+                }, 8, ["size", "onClick"])) : createCommentVNode("", true)
               ]),
-              _: 1
-            }, 8, ["size", "onClick"])) : createCommentVNode("", true)
-          ]),
-          key: "0"
-        } : void 0
-      ]), 1032, ["modelValue", "size", "placeholder", "disabled"]);
+              key: "0"
+            } : void 0
+          ]), 1032, ["modelValue", "size", "placeholder", "disabled"])
+        ]),
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1$2, [
+            _hoisted_2$1,
+            createElementVNode("div", _hoisted_3, [
+              createVNode(unref(TMagicButton), {
+                link: "",
+                size: "small",
+                onClick: _cache[2] || (_cache[2] = ($event) => popoverVisible.value = false)
+              }, {
+                default: withCtx(() => [
+                  createTextVNode("保持原样")
+                ]),
+                _: 1
+              }),
+              createVNode(unref(TMagicButton), {
+                type: "primary",
+                size: "small",
+                onClick: confirmTrimHandler
+              }, {
+                default: withCtx(() => [
+                  createTextVNode("移除空格")
+                ]),
+                _: 1
+              })
+            ])
+          ])
+        ]),
+        _: 1
+      }, 8, ["visible"]);
     };
   }
 });
@@ -4445,6 +4515,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   }
 });
 
+const createForm = function(config) {
+  return config;
+};
 const defaultInstallOpt = {};
 const index = {
   install(app, opt = {}) {
@@ -4484,5 +4557,4 @@ const index = {
   }
 };
 
-export { _sfc_main$p as MCascader, _sfc_main$o as MCheckbox, _sfc_main$n as MCheckboxGroup, _sfc_main$m as MColorPicker, _sfc_main$z as MContainer, _sfc_main$l as MDate, _sfc_main$j as MDateTime, _sfc_main$k as MDaterange, _sfc_main$i as MDisplay, _sfc_main$h as MDynamicField, _sfc_main$y as MFieldset, _sfc_main$f as MForm, _sfc_main as MFormBox, _sfc_main$e as MFormDialog, _sfc_main$1 as MFormDrawer, _sfc_main$w as MGroupList, _sfc_main$g as MHidden, _sfc_main$d as MLink, _sfc_main$c as MNumber, _sfc_main$b as MNumberRange, _sfc_main$v as MPanel, _sfc_main$a as MRadioGroup, _sfc_main$t as MRow, _sfc_main$7 as MSelect, _sfc_main$6 as MSwitch, _sfc_main$r as MTable, _sfc_main$q as MTabs, _sfc_main$5 as MText, _sfc_main$4 as MTextarea, _sfc_main$3 as MTime, _sfc_main$2 as MTimerange, createValues, index as default, display, filterFunction, getRules, initValue, useAddField };
-//# sourceMappingURL=tmagic-form.js.map
+export { _sfc_main$p as MCascader, _sfc_main$o as MCheckbox, _sfc_main$n as MCheckboxGroup, _sfc_main$m as MColorPicker, _sfc_main$z as MContainer, _sfc_main$l as MDate, _sfc_main$j as MDateTime, _sfc_main$k as MDaterange, _sfc_main$i as MDisplay, _sfc_main$h as MDynamicField, _sfc_main$y as MFieldset, _sfc_main$f as MForm, _sfc_main as MFormBox, _sfc_main$e as MFormDialog, _sfc_main$1 as MFormDrawer, _sfc_main$w as MGroupList, _sfc_main$g as MHidden, _sfc_main$d as MLink, _sfc_main$c as MNumber, _sfc_main$b as MNumberRange, _sfc_main$v as MPanel, _sfc_main$a as MRadioGroup, _sfc_main$t as MRow, _sfc_main$7 as MSelect, _sfc_main$6 as MSwitch, _sfc_main$r as MTable, _sfc_main$q as MTabs, _sfc_main$5 as MText, _sfc_main$4 as MTextarea, _sfc_main$3 as MTime, _sfc_main$2 as MTimerange, createForm, createValues, index as default, display, filterFunction, getRules, initValue, useAddField };