fix(form): text组件配置了tooltip无效

packages/form/package.json

@@ -43,6 +43,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
+    "@popperjs/core": "^2.11.8",
     "lodash-es": "^4.17.21",
     "sortablejs": "^1.15.2"
   },
@@ -61,8 +62,8 @@
   "peerDependencies": {
     "@tmagic/design": "workspace:*",
     "@tmagic/utils": "workspace:*",
-    "vue": "^3.4.35",
-    "typescript": "*"
+    "typescript": "*",
+    "vue": "^3.4.35"
   },
   "peerDependenciesMeta": {
     "typescript": {

packages/form/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 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>
 
-    <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>
+    <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>

packages/form/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);
+}

pnpm-lock.yaml

@@ -426,6 +426,9 @@ importers:
       '@element-plus/icons-vue':
         specifier: ^2.3.1
         version: 2.3.1(vue@3.4.35(typescript@5.5.4))
+      '@popperjs/core':
+        specifier: ^2.11.8
+        version: 2.11.8
       '@tmagic/design':
         specifier: workspace:*
         version: link:../design
@@ -3932,6 +3935,7 @@ packages:
   eslint@8.57.0:
     resolution: {integrity: sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options.
     hasBin: true
 
   espree@9.6.1: