@vingy/vueltip 1.0.0 → 1.2.0

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import { n as __reExport, t as __exportAll } from "./chunk-CtajNgzt.mjs";
 import * as Vue from "vue";
-import { App, Component, Directive, ShallowRef, StyleValue } from "vue";
+import { App, Component, Directive, DirectiveBinding, ShallowRef, StyleValue } from "vue";
 
 //#region ../../node_modules/.pnpm/@floating-ui+utils@0.2.10/node_modules/@floating-ui/utils/dist/floating-ui.utils.d.mts
 declare type AlignedPlacement = `${Side}-${Alignment}`;
@@ -252,13 +252,17 @@ 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, Placement>;
 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; /** @default 'top' */
+  defaultPlacement: Placement;
 };
 type UseTooltipOptions = {
   tooltipElement: Readonly<ShallowRef<HTMLElement | null>>;
@@ -307,8 +311,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: DirectiveBinding<Binding, Modifier, Placement>) => void;
+  created: (el: HTMLElement, binding: DirectiveBinding<Binding, Modifier, Placement>) => void;
   beforeUnmount: (el: HTMLElement) => void;
 };
 //#endregion

package/dist/index.mjs

@@ -1392,9 +1392,12 @@ 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",
+	defaultPlacement: "top"
 };
 const setOptions = (opts) => {
 	options = {
@@ -1402,6 +1405,7 @@ const setOptions = (opts) => {
 		...opts
 	};
 };
+const getOption = (key) => options[key];
 
 //#endregion
 //#region src/state.ts
@@ -1409,10 +1413,10 @@ const tooltipPlacement = ref("top");
 const debouncedTooltipPlacement = ref("top");
 const hoveredElement = ref();
 const debouncedHoveredElement = ref();
-const contentMap = /* @__PURE__ */ new Map();
-const getContent = (key) => contentMap.get(key);
-const setContent = (key, value) => contentMap.set(key, value);
-const deleteContent = (key) => contentMap.delete(key);
+const contentMap = ref(/* @__PURE__ */ new Map());
+const getContent = (key) => contentMap.value.get(key);
+const setContent = (key, value) => contentMap.value.set(key, value);
+const deleteContent = (key) => contentMap.value.delete(key);
 const generateKey = () => crypto.randomUUID();
 const tooltipKey = ref();
 const tooltipContent = ref();
@@ -1420,11 +1424,12 @@ let timerId;
 watch([
 	tooltipKey,
 	hoveredElement,
-	tooltipPlacement
+	tooltipPlacement,
+	() => getContent(tooltipKey.value ?? "")
 ], ([key, el, placement]) => {
 	if (!key) return;
 	if (timerId) clearTimeout(timerId);
-	const timeout = el ? options.showDelay : options.hideDelay;
+	const timeout = el ? getOption("showDelay") : getOption("hideDelay");
 	timerId = setTimeout(() => {
 		tooltipContent.value = getContent(key);
 		debouncedHoveredElement.value = el;
@@ -1477,7 +1482,7 @@ const useVueltip = ({ tooltipElement, arrowElement, offset: _offset, padding, ar
 		};
 	});
 	const show = computed(() => !!debouncedHoveredElement.value);
-	if (options.handleDialogModals) watch(show, (value) => {
+	if (getOption("handleDialogModals")) watch(show, (value) => {
 		if (!value || !tooltipElement.value || !debouncedHoveredElement.value || !initialParent) return;
 		const dialogEl = debouncedHoveredElement.value.closest("dialog");
 		if (!dialogEl) {
@@ -1497,7 +1502,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(getOption("truncateAttribute")) ?? getOption("defaultTruncateDetection");
 }
 function elementContainsText(el, text) {
 	if (isInputElement(el) || isTextAreaElement(el)) return getInputValue(el).includes(text);
@@ -1516,7 +1532,7 @@ function getInputValue(el) {
 	return el.value;
 }
 const ensureKey = (el, fn) => {
-	const key = el.getAttribute(options.keyAttribute);
+	const key = el.getAttribute(getOption("keyAttribute"));
 	if (!key) return;
 	return fn(key);
 };
@@ -1533,7 +1549,7 @@ const onMouseover = ensureEventTarget((target) => ensureKey(target, (key) => {
 	if (!content) return;
 	const { text } = content;
 	if (elementContainsText(target, text) && !isTruncated(target)) return;
-	const placement = target.getAttribute(options.placementAttribute);
+	const placement = target.getAttribute(getOption("placementAttribute"));
 	tooltipKey.value = key;
 	hoveredElement.value = target;
 	tooltipPlacement.value = placement;
@@ -1546,16 +1562,34 @@ const onMouseout = ensureEventTarget((target) => {
 //#endregion
 //#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 extractPlacement = (binding) => {
+	const { value, arg } = binding;
+	if (typeof value !== "string" && "placement" in value) return value.placement;
+	if (!arg) return getOption("defaultPlacement");
+	return arg;
+};
+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 getOption("defaultTruncateDetection");
+};
 const vueltipDirective = {
 	updated: (el, binding) => {
-		ensureKey(el, (key) => setContent(key, toContent(binding.value)));
+		ensureKey(el, (key) => {
+			el.setAttribute(getOption("placementAttribute"), extractPlacement(binding));
+			el.setAttribute(getOption("truncateAttribute"), truncationDirection(binding.modifiers ?? {}));
+			setContent(key, toContent(binding.value));
+		});
 	},
 	created: (el, binding) => {
 		const key = generateKey();
 		setContent(key, toContent(binding.value));
-		el.setAttribute(options.keyAttribute, key);
-		el.setAttribute(options.placementAttribute, extractPlacement(binding.value));
+		el.setAttribute(getOption("keyAttribute"), key);
+		el.setAttribute(getOption("placementAttribute"), extractPlacement(binding));
+		el.setAttribute(getOption("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.2.0",
   "description": "Headless tooltip which only shows when necessary.",
   "keywords": [
     "composition-api",