init

components/ShortText.vue

@@ -8,7 +8,7 @@
       :disabled="!tooltipEnabled"
       :ui="{ text: 'whitespace-normal break-words', content: 'max-w-50 h-auto' }"
     >
-      <span :ref="checkSize" :class="textPrimary ? 'short-text--primary' : ''">{{ text }}</span>
+      <span :class="textPrimary ? 'short-text--primary' : ''">{{ truncate(text, 20) }}</span>
       <Icon
         v-if="tooltipEnabled"
         name="heroicons:information-circle"
@@ -24,13 +24,13 @@
       :disabled="!tooltipEnabled"
       :ui="{ text: 'whitespace-normal break-words', content: 'max-w-80 h-auto' }"
     >
-      <span :ref="checkSize" :class="textPrimary ? 'short-text--primary' : ''">{{ text }}</span>
+      <span :class="textPrimary ? 'short-text--primary' : ''">{{ truncate(text, 20) }}</span>
     </UTooltip>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onClickOutside, unrefElement } from '@vueuse/core'
+import { onClickOutside } from '@vueuse/core'
 
 defineProps<{ text: string, textPrimary?: boolean }>()
 
@@ -44,10 +44,19 @@ onClickOutside(wrapper, () => {
   open.value = false
 })
 
-function checkSize(_el: HTMLElement) {
-  const el = unrefElement(_el)
+const truncate = function (text = '', length = 15, clamp = '...') {
+  const node = document.createElement('div')
+  node.innerHTML = text
+  const content = node.textContent
 
-  tooltipEnabled.value = el ? el.scrollWidth > el.clientWidth : false
+  if (content.length > length) {
+    tooltipEnabled.value = true
+    return content.slice(0, length) + clamp
+  }
+  else {
+    tooltipEnabled.value = false
+    return content
+  }
 }
 </script>