feat(vueltip): allow to control which direction to detect for trunction via modifiers

Author: vinpogo

.changeset/clean-meals-invite.md

@@ -0,0 +1,5 @@
+---
+"@vingy/vueltip": minor
+---
+
+allow to control which direction to detect for truncation

packages/vueltip/src/directive.ts

@@ -8,6 +8,7 @@ import {
 import type {
   Binding,
   Content,
+  Modifier,
   TooltipDirective,
 } from './types.ts'
 import { ensureKey } from './utils'
@@ -22,6 +23,17 @@ const toContent = (value: Binding): Content =>
 const extractPlacement = (value: Binding) =>
   typeof value === 'string' ? 'top' : value.placement
 
+const truncationDirection = (
+  modifiers: Partial<Record<Modifier, boolean | undefined>>,
+) => {
+  if (modifiers.none) return 'none'
+  if (modifiers.both) return 'both'
+  if (modifiers.x && modifiers.y) return 'both'
+  if (modifiers.x) return 'x'
+  if (modifiers.y) return 'y'
+  return options.defaultTruncateDetection
+}
+
 export const vueltipDirective = {
   updated: (el, binding) => {
     ensureKey(el, (key) =>
@@ -37,6 +49,10 @@ export const vueltipDirective = {
       options.placementAttribute,
       extractPlacement(binding.value),
     )
+    el.setAttribute(
+      options.truncateAttribute,
+      truncationDirection(binding.modifiers ?? {}),
+    )
 
     el.addEventListener('mouseenter', onMouseover)
     el.addEventListener('focus', onMouseover)

packages/vueltip/src/options.ts

@@ -3,9 +3,11 @@ import type { Options } from './types'
 export let options: Options = {
   placementAttribute: 'vueltip-placement',
   keyAttribute: 'vueltip-key',
+  truncateAttribute: 'vueltip-truncate',
   showDelay: 0,
   hideDelay: 200,
   handleDialogModals: false,
+  defaultTruncateDetection: 'both',
 }
 
 export const setOptions = (opts?: Partial<Options>) => {

packages/vueltip/src/types.ts

@@ -13,22 +13,29 @@ export type Binding =
       content: string | Content
       placement: Placement
     }
+export type Modifier = 'x' | 'y' | 'none' | 'both'
 
 export type TooltipDirective = Directive<
   HTMLElement,
-  Binding
+  Binding,
+  Modifier
 >
+
 export type Options = {
   /** @default 'vueltip-placement' */
   placementAttribute: string
   /** @default 'vueltip-key' */
   keyAttribute: string
+  /** @default 'vueltip-truncate' */
+  truncateAttribute: string
   /** @default 0 */
   showDelay: number
   /** @default 200 */
   hideDelay: number
   /** @default false */
   handleDialogModals: boolean
+  /** @default 'both' */
+  defaultTruncateDetection: Modifier
 }
 export type UseTooltipOptions = {
   tooltipElement: Readonly<ShallowRef<HTMLElement | null>>

packages/vueltip/src/utils.ts

@@ -1,10 +1,29 @@
 import { options } from './options'
+import { Modifier } from './types'
 
 export function isTruncated(el: HTMLElement) {
+  const direction = getTruncationDirection(el)
+
+  const x = el.offsetWidth < el.scrollWidth - 1
+  const y = el.offsetHeight < el.scrollHeight - 1
+
+  switch (direction) {
+    case 'x':
+      return x
+    case 'y':
+      return y
+    case 'both':
+      return x || y
+    case 'none':
+      return true
+  }
+}
+
+function getTruncationDirection(el: HTMLElement) {
   return (
-    // offset is rounded down, scroll is rounded up
-    el.offsetWidth < el.scrollWidth - 1 ||
-    el.offsetHeight < el.scrollHeight - 1
+    (el.getAttribute(
+      options.truncateAttribute,
+    ) as Modifier) ?? options.defaultTruncateDetection
   )
 }