@vingy/vueltip 1.0.0 → 1.1.0

package/dist/index.d.mts

@@ -252,13 +252,16 @@ type Binding = string | {
   content: string | Content;
   placement: Placement;
 };
-type TooltipDirective = Directive<HTMLElement, Binding>;
+type Modifier = 'x' | 'y' | 'none' | 'both';
+type TooltipDirective = Directive<HTMLElement, Binding, Modifier>;
 type Options = {
-  /** @default 'tooltip-placement' */placementAttribute: string; /** @default 'tooltip-key' */
-  keyAttribute: string; /** @default 0 */
+  /** @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;
+  handleDialogModals: boolean; /** @default 'both' */
+  defaultTruncateDetection: Modifier;
 };
 type UseTooltipOptions = {
   tooltipElement: Readonly<ShallowRef<HTMLElement | null>>;
@@ -307,8 +310,8 @@ declare const useVueltip: ({
 //#endregion
 //#region src/directive.d.ts
 declare const vueltipDirective: {
-  updated: (el: HTMLElement, binding: Vue.DirectiveBinding<Binding, string, any>) => void;
-  created: (el: HTMLElement, binding: Vue.DirectiveBinding<Binding, string, any>) => void;
+  updated: (el: HTMLElement, binding: Vue.DirectiveBinding<Binding, Modifier, any>) => void;
+  created: (el: HTMLElement, binding: Vue.DirectiveBinding<Binding, Modifier, any>) => void;
   beforeUnmount: (el: HTMLElement) => void;
 };
 //#endregion

package/dist/index.mjs

@@ -1392,9 +1392,11 @@ function useFloating(reference, floating, options) {
 let options = {
 	placementAttribute: "vueltip-placement",
 	keyAttribute: "vueltip-key",
+	truncateAttribute: "vueltip-truncate",
 	showDelay: 0,
 	hideDelay: 200,
-	handleDialogModals: false
+	handleDialogModals: false,
+	defaultTruncateDetection: "both"
 };
 const setOptions = (opts) => {
 	options = {
@@ -1497,7 +1499,18 @@ const useVueltip = ({ tooltipElement, arrowElement, offset: _offset, padding, ar
 //#endregion
 //#region src/utils.ts
 function isTruncated(el) {
-	return el.offsetWidth < el.scrollWidth - 1 || el.offsetHeight < el.scrollHeight - 1;
+	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) {
+	return el.getAttribute(options.truncateAttribute) ?? options.defaultTruncateDetection;
 }
 function elementContainsText(el, text) {
 	if (isInputElement(el) || isTextAreaElement(el)) return getInputValue(el).includes(text);
@@ -1547,6 +1560,14 @@ const onMouseout = ensureEventTarget((target) => {
 //#region src/directive.ts
 const toContent = (value) => typeof value === "string" ? { text: value } : typeof value.content === "string" ? { text: value.content } : value.content;
 const extractPlacement = (value) => typeof value === "string" ? "top" : value.placement;
+const truncationDirection = (modifiers) => {
+	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;
+};
 const vueltipDirective = {
 	updated: (el, binding) => {
 		ensureKey(el, (key) => setContent(key, toContent(binding.value)));
@@ -1556,6 +1577,7 @@ const vueltipDirective = {
 		setContent(key, toContent(binding.value));
 		el.setAttribute(options.keyAttribute, key);
 		el.setAttribute(options.placementAttribute, extractPlacement(binding.value));
+		el.setAttribute(options.truncateAttribute, truncationDirection(binding.modifiers ?? {}));
 		el.addEventListener("mouseenter", onMouseover);
 		el.addEventListener("focus", onMouseover);
 		el.addEventListener("mouseleave", onMouseout);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vingy/vueltip",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Headless tooltip which only shows when necessary.",
   "keywords": [
     "composition-api",