@tmagic/form 1.4.18 → 1.4.19

package/dist/style.css

@@ -64,6 +64,57 @@
   line-height: 1.4;
 }
 
+.tmagic-form-text-popper {
+  min-width: 150px;
+  line-height: 1.4;
+  background-color: #fff;
+  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
+  color: #606266;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  font-size: 14px;
+  overflow-wrap: break-word;
+  box-sizing: border-box;
+  padding: 10px;
+}
+.tmagic-form-text-popper:focus {
+  outline: none;
+}
+
+.tmagic-form-text-popper[data-popper-placement^=top] > .tmagic-form-text-popper-arrow {
+  bottom: -4px;
+}
+
+.tmagic-form-text-popper[data-popper-placement^=bottom] > .tmagic-form-text-popper-arrow {
+  top: -4px;
+}
+
+.tmagic-form-text-popper[data-popper-placement^=left] > .tmagic-form-text-popper-arrow {
+  right: -4px;
+}
+
+.tmagic-form-text-popper[data-popper-placement^=right] > .tmagic-form-text-popper-arrow {
+  left: -4px;
+}
+
+.tmagic-form-text-popper-arrow,
+.tmagic-form-text-popper-arrow::before {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: inherit;
+}
+
+.tmagic-form-text-popper-arrow {
+  visibility: hidden;
+}
+
+.tmagic-form-text-popper-arrow::before {
+  visibility: visible;
+  content: "";
+  transform: rotate(45deg);
+}
+
 div.m-fields-link {
   width: fit-content;
 }

package/dist/tmagic-form.js

@@ -1,9 +1,10 @@
-import { toRaw, defineComponent, inject, ref, computed, watchEffect, watch, resolveComponent, 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 { toRaw, defineComponent, inject, ref, computed, watchEffect, watch, resolveComponent, 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, shallowRef, createSlots, withModifiers } from 'vue';
 import { WarningFilled, CaretBottom, CaretRight, Delete, CaretTop, Grid, ArrowUp, ArrowDown, FullScreen } from '@element-plus/icons-vue';
-import { cloneDeep, isEqual, isEmpty } from 'lodash-es';
-import { TMagicFormItem, TMagicTooltip, TMagicIcon, TMagicButton, TMagicCheckbox, TMagicCard, TMagicCol, TMagicRow, TMagicSteps, TMagicStep, useZIndex, TMagicTable, TMagicTableColumn, TMagicUpload, TMagicPagination, tMagicMessage, getConfig as getConfig$1, TMagicBadge, TMagicCascader, TMagicCheckboxGroup, TMagicColorPicker, TMagicDatePicker, TMagicForm, TMagicInput, TMagicDialog, TMagicInputNumber, TMagicRadioGroup, TMagicRadio, TMagicSelect, TMagicSwitch, TMagicPopover, TMagicTimePicker, TMagicDrawer, TMagicScrollbar } from '@tmagic/design';
+import { cloneDeep, isEqual, isEmpty, debounce } from 'lodash-es';
+import { TMagicFormItem, TMagicTooltip, TMagicIcon, TMagicButton, TMagicCheckbox, TMagicCard, TMagicCol, TMagicRow, TMagicSteps, TMagicStep, useZIndex, TMagicTable, TMagicTableColumn, TMagicUpload, TMagicPagination, tMagicMessage, getConfig as getConfig$1, TMagicBadge, TMagicCascader, TMagicCheckboxGroup, TMagicColorPicker, TMagicDatePicker, TMagicForm, TMagicInput, TMagicDialog, TMagicInputNumber, TMagicRadioGroup, TMagicRadio, TMagicSelect, TMagicSwitch, TMagicTimePicker, TMagicDrawer, TMagicScrollbar } from '@tmagic/design';
 import Sortable from 'sortablejs';
 import { sleep, asyncLoadJs, datetimeFormatter, getValueByKeyPath, isNumber } from '@tmagic/utils';
+import { createPopper } from '@popperjs/core';
 
 const isTableSelect = (type) => typeof type === "string" && ["table-select", "tableSelect"].includes(type);
 const asyncLoadConfig = (value, initValue2, { asyncLoad, name, type }) => {
@@ -168,7 +169,7 @@ const initValue = async (mForm, { initValues, config }) => {
 const _hoisted_1$d = ["data-tmagic-id", "data-tmagic-form-item-prop"];
 const _hoisted_2$8 = ["innerHTML", "title"];
 const _hoisted_3$5 = ["innerHTML"];
-const _hoisted_4$4 = ["innerHTML"];
+const _hoisted_4$5 = ["innerHTML"];
 const _hoisted_5$4 = ["innerHTML"];
 const _hoisted_6$2 = ["innerHTML", "title"];
 const _hoisted_7$1 = ["innerHTML"];
@@ -396,7 +397,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                 key: 2,
                 innerHTML: extra.value,
                 class: "m-form-tip"
-              }, null, 8, _hoisted_4$4)) : createCommentVNode("", true)
+              }, null, 8, _hoisted_4$5)) : createCommentVNode("", true)
             ]),
             _: 1
           }, 8, ["style", "class", "prop", "label-width", "rules"]),
@@ -597,7 +598,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
 const _hoisted_1$c = ["innerHTML"];
 const _hoisted_2$7 = ["innerHTML"];
 const _hoisted_3$4 = { key: 1 };
-const _hoisted_4$3 = ["innerHTML"];
+const _hoisted_4$4 = ["innerHTML"];
 const _hoisted_5$3 = ["innerHTML"];
 const _hoisted_6$1 = {
   key: 2,
@@ -679,7 +680,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
         })) : (openBlock(), createElementBlock("legend", _hoisted_3$4, [
           createElementVNode("span", {
             innerHTML: _ctx.config.legend
-          }, null, 8, _hoisted_4$3),
+          }, null, 8, _hoisted_4$4),
           _ctx.config.extra ? (openBlock(), createElementBlock("span", {
             key: 0,
             innerHTML: _ctx.config.extra,
@@ -894,9 +895,9 @@ const _hoisted_3$3 = {
   key: 1,
   class: "el-table__empty-block"
 };
-const _hoisted_4$2 = /* @__PURE__ */ createElementVNode("span", { class: "el-table__empty-text" }, "暂无数据", -1);
+const _hoisted_4$3 = /* @__PURE__ */ createElementVNode("span", { class: "el-table__empty-text" }, "暂无数据", -1);
 const _hoisted_5$2 = [
-  _hoisted_4$2
+  _hoisted_4$3
 ];
 const _sfc_main$u = /* @__PURE__ */ defineComponent({
   ...{
@@ -1036,7 +1037,7 @@ const _hoisted_3$2 = {
   key: 0,
   style: { "display": "flex" }
 };
-const _hoisted_4$1 = { style: { "flex": "1" } };
+const _hoisted_4$2 = { style: { "flex": "1" } };
 const _hoisted_5$1 = ["src"];
 const _sfc_main$t = /* @__PURE__ */ defineComponent({
   ...{
@@ -1092,7 +1093,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
           createElementVNode("div", null, [
             renderSlot(_ctx.$slots, "default"),
             _ctx.config.schematic ? (openBlock(), createElementBlock("div", _hoisted_3$2, [
-              createElementVNode("div", _hoisted_4$1, [
+              createElementVNode("div", _hoisted_4$2, [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(items.value, (item, index) => {
                   return openBlock(), createBlock(_sfc_main$x, {
                     key: item[unref(mForm)?.keyProp || "__key"] ?? index,
@@ -1319,7 +1320,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
 const _hoisted_1$8 = { class: "m-fields-table-wrap" };
 const _hoisted_2$3 = ["innerHTML"];
 const _hoisted_3$1 = ["innerHTML"];
-const _hoisted_4 = { style: { "display": "flex", "justify-content": "space-between", "margin": "10px 0" } };
+const _hoisted_4$1 = { style: { "display": "flex", "justify-content": "space-between", "margin": "10px 0" } };
 const _hoisted_5 = { style: { "display": "flex" } };
 const _hoisted_6 = {
   key: 1,
@@ -1854,7 +1855,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
               _: 3
             }, 8, ["disabled"]),
             renderSlot(_ctx.$slots, "default"),
-            createElementVNode("div", _hoisted_4, [
+            createElementVNode("div", _hoisted_4$1, [
               addable.value ? (openBlock(), createBlock(unref(TMagicButton), {
                 key: 0,
                 size: "small",
@@ -3860,9 +3861,13 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$1 = { class: "m-form-item__content" };
+const _hoisted_1$1 = { style: { "width": "100%" } };
 const _hoisted_2 = /* @__PURE__ */ createElementVNode("div", { class: "m-form-validate__warning" }, "输入内容前后有空格，是否移除空格？", -1);
 const _hoisted_3 = { style: { "display": "flex", "justify-content": "flex-end" } };
+const _hoisted_4 = /* @__PURE__ */ createElementVNode("span", {
+  class: "tmagic-form-text-popper-arrow",
+  "data-popper-arrow": ""
+}, null, -1);
 const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFormText"
@@ -3906,11 +3911,11 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       emit("change", props.model[props.name].trim() || "");
       popoverVisible.value = false;
     };
-    const checkWhiteSpace = (value) => {
+    const checkWhiteSpace = debounce((value) => {
       if (typeof value === "string" && !props.config.trim) {
         popoverVisible.value = value.trim() !== value;
       }
-    };
+    }, 300);
     const changeHandler = (value) => {
       emit("change", value);
     };
@@ -3977,44 +3982,70 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       props.model[props.name] = `${num}${unit || ""}`;
       emit("change", props.model[props.name]);
     };
+    const popoverEl = ref();
+    const input = ref();
+    const instanceRef = shallowRef();
+    watch(popoverEl, (el) => {
+      destroyPopover();
+      if (!input.value?.$el || !el) return;
+      instanceRef.value = createPopper(input.value.$el, el, {
+        placement: props.config.tooltip ? "top" : "bottom",
+        strategy: "absolute",
+        modifiers: [
+          {
+            name: "offset",
+            options: {
+              offset: [0, 10]
+            }
+          }
+        ]
+      });
+    });
+    const destroyPopover = () => {
+      if (!instanceRef.value) return;
+      instanceRef.value.destroy();
+      instanceRef.value = void 0;
+    };
     return (_ctx, _cache) => {
-      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"])) : createCommentVNode("", true)
-              ]),
-              key: "0"
-            } : void 0
-          ]), 1032, ["modelValue", "size", "placeholder", "disabled"])
-        ]),
-        default: withCtx(() => [
-          createElementVNode("div", _hoisted_1$1, [
+      return openBlock(), createElementBlock("div", _hoisted_1$1, [
+        createVNode(unref(TMagicInput), {
+          modelValue: _ctx.model[_ctx.name],
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.model[_ctx.name] = $event),
+          ref_key: "input",
+          ref: input,
+          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"])) : createCommentVNode("", true)
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["modelValue", "size", "placeholder", "disabled"]),
+        (openBlock(), createBlock(Teleport, { to: "body" }, [
+          popoverVisible.value ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: "tmagic-form-text-popper m-form-item__content",
+            ref_key: "popoverEl",
+            ref: popoverEl
+          }, [
             _hoisted_2,
             createElementVNode("div", _hoisted_3, [
               createVNode(unref(TMagicButton), {
@@ -4037,11 +4068,11 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                 ]),
                 _: 1
               })
-            ])
-          ])
-        ]),
-        _: 1
-      }, 8, ["visible"]);
+            ]),
+            _hoisted_4
+          ], 512)) : createCommentVNode("", true)
+        ]))
+      ]);
     };
   }
 });

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('sortablejs'), require('@tmagic/utils'), require('@popperjs/core')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue', '@element-plus/icons-vue', 'lodash-es', '@tmagic/design', 'sortablejs', '@tmagic/utils', '@popperjs/core'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicForm = {}, global.Vue, global.iconsVue, global.lodashEs, global.design, global.Sortable, global.utils, global.core));
+})(this, (function (exports, vue, iconsVue, lodashEs, design, Sortable, utils, core) { 'use strict';
 
   const isTableSelect = (type) => typeof type === "string" && ["table-select", "tableSelect"].includes(type);
   const asyncLoadConfig = (value, initValue2, { asyncLoad, name, type }) => {
@@ -167,7 +167,7 @@
   const _hoisted_1$d = ["data-tmagic-id", "data-tmagic-form-item-prop"];
   const _hoisted_2$8 = ["innerHTML", "title"];
   const _hoisted_3$5 = ["innerHTML"];
-  const _hoisted_4$4 = ["innerHTML"];
+  const _hoisted_4$5 = ["innerHTML"];
   const _hoisted_5$4 = ["innerHTML"];
   const _hoisted_6$2 = ["innerHTML", "title"];
   const _hoisted_7$1 = ["innerHTML"];
@@ -395,7 +395,7 @@
                   key: 2,
                   innerHTML: extra.value,
                   class: "m-form-tip"
-                }, null, 8, _hoisted_4$4)) : vue.createCommentVNode("", true)
+                }, null, 8, _hoisted_4$5)) : vue.createCommentVNode("", true)
               ]),
               _: 1
             }, 8, ["style", "class", "prop", "label-width", "rules"]),
@@ -596,7 +596,7 @@
   const _hoisted_1$c = ["innerHTML"];
   const _hoisted_2$7 = ["innerHTML"];
   const _hoisted_3$4 = { key: 1 };
-  const _hoisted_4$3 = ["innerHTML"];
+  const _hoisted_4$4 = ["innerHTML"];
   const _hoisted_5$3 = ["innerHTML"];
   const _hoisted_6$1 = {
     key: 2,
@@ -678,7 +678,7 @@
           })) : (vue.openBlock(), vue.createElementBlock("legend", _hoisted_3$4, [
             vue.createElementVNode("span", {
               innerHTML: _ctx.config.legend
-            }, null, 8, _hoisted_4$3),
+            }, null, 8, _hoisted_4$4),
             _ctx.config.extra ? (vue.openBlock(), vue.createElementBlock("span", {
               key: 0,
               innerHTML: _ctx.config.extra,
@@ -893,9 +893,9 @@
     key: 1,
     class: "el-table__empty-block"
   };
-  const _hoisted_4$2 = /* @__PURE__ */ vue.createElementVNode("span", { class: "el-table__empty-text" }, "暂无数据", -1);
+  const _hoisted_4$3 = /* @__PURE__ */ vue.createElementVNode("span", { class: "el-table__empty-text" }, "暂无数据", -1);
   const _hoisted_5$2 = [
-    _hoisted_4$2
+    _hoisted_4$3
   ];
   const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
     ...{
@@ -1035,7 +1035,7 @@
     key: 0,
     style: { "display": "flex" }
   };
-  const _hoisted_4$1 = { style: { "flex": "1" } };
+  const _hoisted_4$2 = { style: { "flex": "1" } };
   const _hoisted_5$1 = ["src"];
   const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     ...{
@@ -1091,7 +1091,7 @@
             vue.createElementVNode("div", null, [
               vue.renderSlot(_ctx.$slots, "default"),
               _ctx.config.schematic ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$2, [
-                vue.createElementVNode("div", _hoisted_4$1, [
+                vue.createElementVNode("div", _hoisted_4$2, [
                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(items.value, (item, index) => {
                     return vue.openBlock(), vue.createBlock(_sfc_main$x, {
                       key: item[vue.unref(mForm)?.keyProp || "__key"] ?? index,
@@ -1318,7 +1318,7 @@
   const _hoisted_1$8 = { class: "m-fields-table-wrap" };
   const _hoisted_2$3 = ["innerHTML"];
   const _hoisted_3$1 = ["innerHTML"];
-  const _hoisted_4 = { style: { "display": "flex", "justify-content": "space-between", "margin": "10px 0" } };
+  const _hoisted_4$1 = { style: { "display": "flex", "justify-content": "space-between", "margin": "10px 0" } };
   const _hoisted_5 = { style: { "display": "flex" } };
   const _hoisted_6 = {
     key: 1,
@@ -1853,7 +1853,7 @@
                 _: 3
               }, 8, ["disabled"]),
               vue.renderSlot(_ctx.$slots, "default"),
-              vue.createElementVNode("div", _hoisted_4, [
+              vue.createElementVNode("div", _hoisted_4$1, [
                 addable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
                   key: 0,
                   size: "small",
@@ -3859,9 +3859,13 @@
     }
   });
 
-  const _hoisted_1$1 = { class: "m-form-item__content" };
+  const _hoisted_1$1 = { style: { "width": "100%" } };
   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_4 = /* @__PURE__ */ vue.createElementVNode("span", {
+    class: "tmagic-form-text-popper-arrow",
+    "data-popper-arrow": ""
+  }, null, -1);
   const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFormText"
@@ -3905,11 +3909,11 @@
         emit("change", props.model[props.name].trim() || "");
         popoverVisible.value = false;
       };
-      const checkWhiteSpace = (value) => {
+      const checkWhiteSpace = lodashEs.debounce((value) => {
         if (typeof value === "string" && !props.config.trim) {
           popoverVisible.value = value.trim() !== value;
         }
-      };
+      }, 300);
       const changeHandler = (value) => {
         emit("change", value);
       };
@@ -3976,44 +3980,70 @@
         props.model[props.name] = `${num}${unit || ""}`;
         emit("change", props.model[props.name]);
       };
+      const popoverEl = vue.ref();
+      const input = vue.ref();
+      const instanceRef = vue.shallowRef();
+      vue.watch(popoverEl, (el) => {
+        destroyPopover();
+        if (!input.value?.$el || !el) return;
+        instanceRef.value = core.createPopper(input.value.$el, el, {
+          placement: props.config.tooltip ? "top" : "bottom",
+          strategy: "absolute",
+          modifiers: [
+            {
+              name: "offset",
+              options: {
+                offset: [0, 10]
+              }
+            }
+          ]
+        });
+      });
+      const destroyPopover = () => {
+        if (!instanceRef.value) return;
+        instanceRef.value.destroy();
+        instanceRef.value = void 0;
+      };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicPopover), {
-          visible: popoverVisible.value,
-          width: "220px"
-        }, {
-          reference: vue.withCtx(() => [
-            vue.createVNode(vue.unref(design.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))
-            }, vue.createSlots({ _: 2 }, [
-              appendConfig.value ? {
-                name: "append",
-                fn: vue.withCtx(() => [
-                  appendConfig.value.type === "button" ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
-                    key: 0,
-                    style: { "color": "#409eff" },
-                    size: _ctx.size,
-                    onClick: vue.withModifiers(buttonClickHandler, ["prevent"])
-                  }, {
-                    default: vue.withCtx(() => [
-                      vue.createTextVNode(vue.toDisplayString(appendConfig.value.text), 1)
-                    ]),
-                    _: 1
-                  }, 8, ["size"])) : vue.createCommentVNode("", true)
-                ]),
-                key: "0"
-              } : void 0
-            ]), 1032, ["modelValue", "size", "placeholder", "disabled"])
-          ]),
-          default: vue.withCtx(() => [
-            vue.createElementVNode("div", _hoisted_1$1, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
+          vue.createVNode(vue.unref(design.TMagicInput), {
+            modelValue: _ctx.model[_ctx.name],
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.model[_ctx.name] = $event),
+            ref_key: "input",
+            ref: input,
+            clearable: "",
+            size: _ctx.size,
+            placeholder: _ctx.config.placeholder,
+            disabled: _ctx.disabled,
+            onChange: changeHandler,
+            onInput: inputHandler,
+            onKeyup: _cache[1] || (_cache[1] = ($event) => keyUpHandler($event))
+          }, vue.createSlots({ _: 2 }, [
+            appendConfig.value ? {
+              name: "append",
+              fn: vue.withCtx(() => [
+                appendConfig.value.type === "button" ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+                  key: 0,
+                  style: { "color": "#409eff" },
+                  size: _ctx.size,
+                  onClick: vue.withModifiers(buttonClickHandler, ["prevent"])
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createTextVNode(vue.toDisplayString(appendConfig.value.text), 1)
+                  ]),
+                  _: 1
+                }, 8, ["size"])) : vue.createCommentVNode("", true)
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1032, ["modelValue", "size", "placeholder", "disabled"]),
+          (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
+            popoverVisible.value ? (vue.openBlock(), vue.createElementBlock("div", {
+              key: 0,
+              class: "tmagic-form-text-popper m-form-item__content",
+              ref_key: "popoverEl",
+              ref: popoverEl
+            }, [
               _hoisted_2,
               vue.createElementVNode("div", _hoisted_3, [
                 vue.createVNode(vue.unref(design.TMagicButton), {
@@ -4036,11 +4066,11 @@
                   ]),
                   _: 1
                 })
-              ])
-            ])
-          ]),
-          _: 1
-        }, 8, ["visible"]);
+              ]),
+              _hoisted_4
+            ], 512)) : vue.createCommentVNode("", true)
+          ]))
+        ]);
       };
     }
   });

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.18",
+  "version": "1.4.19",
   "name": "@tmagic/form",
   "type": "module",
   "sideEffects": [
@@ -37,6 +37,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
+    "@popperjs/core": "^2.11.8",
     "lodash-es": "^4.17.21",
     "sortablejs": "^1.15.2"
   },
@@ -53,10 +54,10 @@
     "vue-tsc": "^2.0.19"
   },
   "peerDependencies": {
-    "vue": "^3.4.35",
     "typescript": "*",
-    "@tmagic/design": "1.4.18",
-    "@tmagic/utils": "1.4.18"
+    "vue": "^3.4.35",
+    "@tmagic/design": "1.4.19",
+    "@tmagic/utils": "1.4.19"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/fields/Text.vue

@@ -1,43 +1,48 @@
 <template>
-  <TMagicPopover :visible="popoverVisible" width="220px">
-    <template #reference>
-      <TMagicInput
-        v-model="model[name]"
-        clearable
-        :size="size"
-        :placeholder="config.placeholder"
-        :disabled="disabled"
-        @change="changeHandler"
-        @input="inputHandler"
-        @keyup="keyUpHandler($event)"
-      >
-        <template #append v-if="appendConfig">
-          <TMagicButton
-            v-if="appendConfig.type === 'button'"
-            style="color: #409eff"
-            :size="size"
-            @click.prevent="buttonClickHandler"
-          >
-            {{ appendConfig.text }}
-          </TMagicButton>
-        </template>
-      </TMagicInput>
-    </template>
-
-    <div class="m-form-item__content">
-      <div class="m-form-validate__warning">输入内容前后有空格，是否移除空格？</div>
-      <div style="display: flex; justify-content: flex-end">
-        <TMagicButton link size="small" @click="popoverVisible = false">保持原样</TMagicButton>
-        <TMagicButton type="primary" size="small" @click="confirmTrimHandler">移除空格</TMagicButton>
+  <div style="width: 100%">
+    <TMagicInput
+      v-model="model[name]"
+      ref="input"
+      clearable
+      :size="size"
+      :placeholder="config.placeholder"
+      :disabled="disabled"
+      @change="changeHandler"
+      @input="inputHandler"
+      @keyup="keyUpHandler($event)"
+    >
+      <template #append v-if="appendConfig">
+        <TMagicButton
+          v-if="appendConfig.type === 'button'"
+          style="color: #409eff"
+          :size="size"
+          @click.prevent="buttonClickHandler"
+        >
+          {{ appendConfig.text }}
+        </TMagicButton>
+      </template>
+    </TMagicInput>
+
+    <Teleport to="body">
+      <div v-if="popoverVisible" class="tmagic-form-text-popper m-form-item__content" ref="popoverEl">
+        <div class="m-form-validate__warning">输入内容前后有空格，是否移除空格？</div>
+        <div style="display: flex; justify-content: flex-end">
+          <TMagicButton link size="small" @click="popoverVisible = false">保持原样</TMagicButton>
+          <TMagicButton type="primary" size="small" @click="confirmTrimHandler">移除空格</TMagicButton>
+        </div>
+        <span class="tmagic-form-text-popper-arrow" data-popper-arrow></span>
       </div>
-    </div>
-  </TMagicPopover>
+    </Teleport>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, ref } from 'vue';
+import { computed, inject, ref, shallowRef, watch } from 'vue';
+import type { Instance } from '@popperjs/core';
+import { createPopper } from '@popperjs/core';
+import { debounce } from 'lodash-es';
 
-import { TMagicButton, TMagicInput, TMagicPopover } from '@tmagic/design';
+import { TMagicButton, TMagicInput } from '@tmagic/design';
 import { isNumber } from '@tmagic/utils';
 
 import type { FieldProps, FormState, TextConfig } from '../schema';
@@ -85,11 +90,11 @@ const confirmTrimHandler = () => {
   popoverVisible.value = false;
 };
 
-const checkWhiteSpace = (value: unknown) => {
+const checkWhiteSpace = debounce((value: unknown) => {
   if (typeof value === 'string' && !props.config.trim) {
     popoverVisible.value = value.trim() !== value;
   }
-};
+}, 300);
 
 const changeHandler = (value: string) => {
   emit('change', value);
@@ -167,4 +172,34 @@ const keyUpHandler = ($event: KeyboardEvent) => {
   props.model[props.name] = `${num}${unit || ''}`;
   emit('change', props.model[props.name]);
 };
+
+const popoverEl = ref<HTMLDivElement>();
+const input = ref<InstanceType<typeof TMagicInput>>();
+const instanceRef = shallowRef<Instance | undefined>();
+
+watch(popoverEl, (el) => {
+  destroyPopover();
+
+  if (!input.value?.$el || !el) return;
+
+  instanceRef.value = createPopper(input.value.$el, el, {
+    placement: props.config.tooltip ? 'top' : 'bottom',
+    strategy: 'absolute',
+    modifiers: [
+      {
+        name: 'offset',
+        options: {
+          offset: [0, 10],
+        },
+      },
+    ],
+  });
+});
+
+const destroyPopover = () => {
+  if (!instanceRef.value) return;
+
+  instanceRef.value.destroy();
+  instanceRef.value = undefined;
+};
 </script>

package/src/theme/text.scss

@@ -4,3 +4,59 @@
   width: 100%;
   line-height: 1.4;
 }
+
+.tmagic-form-text-popper {
+  min-width: 150px;
+  line-height: 1.4;
+  background-color: #fff;
+  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
+  color: #606266;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  font-size: 14px;
+  overflow-wrap: break-word;
+  box-sizing: border-box;
+  padding: 10px;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.tmagic-form-text-popper[data-popper-placement^="top"]
+  > .tmagic-form-text-popper-arrow {
+  bottom: -4px;
+}
+
+.tmagic-form-text-popper[data-popper-placement^="bottom"]
+  > .tmagic-form-text-popper-arrow {
+  top: -4px;
+}
+
+.tmagic-form-text-popper[data-popper-placement^="left"]
+  > .tmagic-form-text-popper-arrow {
+  right: -4px;
+}
+
+.tmagic-form-text-popper[data-popper-placement^="right"]
+  > .tmagic-form-text-popper-arrow {
+  left: -4px;
+}
+
+.tmagic-form-text-popper-arrow,
+.tmagic-form-text-popper-arrow::before {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: inherit;
+}
+
+.tmagic-form-text-popper-arrow {
+  visibility: hidden;
+}
+
+.tmagic-form-text-popper-arrow::before {
+  visibility: visible;
+  content: "";
+  transform: rotate(45deg);
+}