@vingy/vueltip 0.3.0 → 1.1.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, ShallowRef, StyleValue } from "vue";
+import { App, Component, Directive, 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}`;
@@ -248,12 +248,20 @@ declare type UseFloatingOptions<T extends ReferenceElement = ReferenceElement> =
 interface Content {
   text: string;
 }
+type Binding = string | {
+  content: string | Content;
+  placement: Placement;
+};
+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>>;
@@ -263,9 +271,18 @@ type UseTooltipOptions = {
   arrowSize?: number;
   floatingOptions?: UseFloatingOptions<HTMLElement>;
 };
+declare module 'vue' {
+  interface GlobalDirectives {
+    vTooltip: TooltipDirective;
+  }
+}
+//#endregion
+//#region ../shared/dist/types.d.mts
+//#region src/types.d.ts
+type Maybe<T> = T | null | undefined; //#endregion
 //#endregion
 //#region src/composables.d.ts
-declare const useTooltip: ({
+declare const useVueltip: ({
   tooltipElement,
   arrowElement,
   offset: _offset,
@@ -291,11 +308,21 @@ declare const useTooltip: ({
   content: Vue.Ref<Maybe<Content>, Maybe<Content>>;
 };
 //#endregion
+//#region src/directive.d.ts
+declare const vueltipDirective: {
+  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
+//#region src/options.d.ts
+declare const setOptions: (opts?: Partial<Options>) => void;
+//#endregion
 //#region src/plugin.d.ts
-declare const tooltipPlugin: {
-  install: (app: App, options: Partial<Options> & {
+declare const vueltipPlugin: {
+  install: (app: App, options: Partial<Options & {
     component: Component;
-  }) => void;
+  }>) => void;
 };
 //#endregion
-export { type Content, tooltipPlugin, useTooltip };
+export { type Content, setOptions, useVueltip, vueltipDirective, vueltipPlugin };

package/dist/index.mjs

@@ -1390,11 +1390,13 @@ function useFloating(reference, floating, options) {
 //#endregion
 //#region src/options.ts
 let options = {
-	placementAttribute: "tooltip-placement",
-	keyAttribute: "tooltip-key",
+	placementAttribute: "vueltip-placement",
+	keyAttribute: "vueltip-key",
+	truncateAttribute: "vueltip-truncate",
 	showDelay: 0,
 	hideDelay: 200,
-	handleDialogModals: false
+	handleDialogModals: false,
+	defaultTruncateDetection: "both"
 };
 const setOptions = (opts) => {
 	options = {
@@ -1441,7 +1443,7 @@ const sideMap = {
 	bottom: "top",
 	left: "right"
 };
-const useTooltip = ({ tooltipElement, arrowElement, offset: _offset, padding, arrowSize, floatingOptions }) => {
+const useVueltip = ({ tooltipElement, arrowElement, offset: _offset, padding, arrowSize, floatingOptions }) => {
 	let initialParent;
 	onMounted(() => {
 		initialParent = tooltipElement.value?.parentElement;
@@ -1497,7 +1499,18 @@ const useTooltip = ({ 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,7 +1560,15 @@ 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 tooltipDirective = {
+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 tooltipDirective = {
 		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);
@@ -1572,16 +1594,17 @@ const tooltipDirective = {
 
 //#endregion
 //#region src/plugin.ts
-const tooltipPlugin = { install: (app, options) => {
-	setOptions(options);
-	app.directive("tooltip", tooltipDirective);
+const vueltipPlugin = { install: (app, options) => {
+	const { component, ...rest } = options;
+	setOptions(rest);
+	if (!component) return;
 	const container = document.createElement("div");
 	container.id = "__vueltip_root__";
 	document.body.appendChild(container);
-	const tooltipApp = createApp(options.component);
+	const tooltipApp = createApp(component);
 	tooltipApp._context = app._context;
 	tooltipApp.mount(container);
 } };
 
 //#endregion
-export { tooltipPlugin, useTooltip };
+export { setOptions, useVueltip, vueltipDirective, vueltipPlugin };

package/package.json

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