@zeedhi/vuetify 3.0.11 → 3.2.0

package/src/directives/v-tooltip-overflow.ts

@@ -0,0 +1,97 @@
+import { Directive } from 'vue';
+import { useTooltipManager } from '../composables/useTooltipManager';
+
+type OverflowType = 'hidden' | 'wrap' | 'ellipsis' | number;
+
+interface DirectiveBinding {
+	value: string | number | boolean;
+	modifiers: {
+		hidden?: boolean;
+		wrap?: boolean;
+		ellipsis?: boolean;
+	};
+	arg?: string;
+}
+
+export const vTooltipOverflow: Directive<HTMLElement, DirectiveBinding> = {
+	mounted(el: HTMLElement, binding) {
+		const tooltipManager = useTooltipManager();
+		
+		// Determine overflow type from modifiers or arg
+		let overflowType: OverflowType = 'ellipsis'; // default
+		
+		if (binding.modifiers.hidden) {
+			overflowType = 'hidden';
+		} else if (binding.modifiers.wrap) {
+			overflowType = 'wrap';
+		} else if (binding.modifiers.ellipsis) {
+			overflowType = 'ellipsis';
+		} else if (binding.arg && !Number.isNaN(Number(binding.arg))) {
+			overflowType = Number(binding.arg);
+		}
+
+		// Apply overflow styles
+		applyOverflowStyles(el, overflowType);
+
+		// Get tooltip text
+		const tooltipText = String(binding.value);
+
+		// Handle mouse enter
+		const onMouseEnter = () => {
+			// Check if element is overflowing
+			const isOverflowing = checkOverflow(el, overflowType);
+			
+			if (isOverflowing) {
+				tooltipManager.showTooltip(el, tooltipText);
+			}
+		};
+
+		// Handle mouse leave
+		const onMouseLeave = () => {
+			tooltipManager.hideTooltip();
+		};
+
+		// Store handlers on element for cleanup
+		(el as any)._tooltipOverflowHandlers = {
+			mouseenter: onMouseEnter,
+			mouseleave: onMouseLeave,
+		};
+
+		el.addEventListener('mouseenter', onMouseEnter);
+		el.addEventListener('mouseleave', onMouseLeave);
+	},
+
+	unmounted(el: HTMLElement) {
+		// Remove event listeners
+		const handlers = (el as any)._tooltipOverflowHandlers;
+		if (handlers) {
+			el.removeEventListener('mouseenter', handlers.mouseenter);
+			el.removeEventListener('mouseleave', handlers.mouseleave);
+			delete (el as any)._tooltipOverflowHandlers;
+		}
+	},
+};
+
+function applyOverflowStyles(el: HTMLElement, overflowType: OverflowType): void {
+	el.classList.add('zd-tooltip-overflow');
+
+	if (overflowType === 'hidden') {
+		el.classList.add('zd-tooltip-overflow--hidden');
+	} else if (overflowType === 'wrap') {
+		el.classList.add('zd-tooltip-overflow--wrap');
+	} else if (overflowType === 'ellipsis') {
+		el.classList.add('zd-tooltip-overflow--ellipsis');
+	} else if (typeof overflowType === 'number') {
+		el.classList.add('zd-tooltip-overflow--clamp', `zd-tooltip-overflow--clamp-${overflowType}`);
+	}
+}
+
+function checkOverflow(el: HTMLElement, overflowType: OverflowType): boolean {
+	// If it's a clamp value, always show tooltip
+	if (typeof overflowType === 'number') {
+		return true;
+	}
+
+	// Check if element is overflowing
+	return el.scrollWidth > el.clientWidth;
+}

package/src/index.ts

@@ -11,6 +11,8 @@ import { SlVueTreeNext } from 'sl-vue-tree-next';
 import { RegisterComponents } from './components';
 import './styles/index.scss';
 import { formatSizePlugin, getIconPlugin, styleObjectPlugin } from './utils/plugins';
+import { vTooltipOverflow } from './directives';
+import { installTooltipOverflow, setupTooltipOverflowCleanup } from './utils/tooltip-overflow';
 
 interface IDisplayOptions {
 	mobileBreakpoint?: number | DisplayBreakpoint;
@@ -56,6 +58,14 @@ const ZeedhiVuetify = {
 		// styleObject
 		// eslint-disable-next-line no-param-reassign
 		app.config.globalProperties.$styleObject = styleObjectPlugin;
+
+		app.directive('tooltip-overflow', vTooltipOverflow);
+		
+		// Install the root ZdTooltipOverflow component
+		const tooltipData = installTooltipOverflow(app);
+		
+		// Setup cleanup on app unmount
+		setupTooltipOverflowCleanup(app, tooltipData);
 	},
 };
 
@@ -63,4 +73,5 @@ export * from './errors';
 export * from './utils';
 export * from './components';
 export * from './composables';
+export * from './propsMixins';
 export default ZeedhiVuetify;

package/src/styles/_zd-input.scss

@@ -147,6 +147,7 @@
 
       >.v-input__details {
         min-height: 11px;
+        padding: 2px 4px;
 
         .v-messages {
           min-height: 11px;
@@ -191,11 +192,11 @@
     }
   }
 
-  &.error--text {
+  &.v-input--error:not(.v-input--focused) {
     &.v-input {
       >.v-input__control {
         >.v-field {
-          border: solid var(--regular) var(--v-error-base);
+          border-color: rgb(var(--v-theme-error));;
         }
       }
     }

package/src/utils/fillHeight.ts

@@ -1,4 +1,4 @@
-export function setFillHeight(element: HTMLElement) {
+export function setFillHeight(element: HTMLElement, fillHeight: boolean | string = false) {
 	const parent = element.parentElement;
 	if (parent) {
 		parent.style.display = 'flex';
@@ -7,7 +7,8 @@ export function setFillHeight(element: HTMLElement) {
 		Array.from(parent.children).forEach((child) => {
 			const childElement = child as HTMLElement;
 			if (childElement === element) {
-				(childElement as HTMLElement).style.flex = '1 1 0';
+				const flexBasis = typeof fillHeight === 'string' ? fillHeight : '0';
+				(childElement as HTMLElement).style.flex = `1 1 ${flexBasis}`;
 				(childElement as HTMLElement).style.overflowY = 'auto';
 			} else {
 				(childElement as HTMLElement).style.flex = '0 0 auto';

package/src/utils/index.ts

@@ -4,3 +4,4 @@ export * from './plugins';
 export * from './fillHeight';
 export * from './mergeDictionaries';
 export * from './buildProps';
+export * from './tooltip-overflow';

package/src/utils/plugins/getIconPlugin.ts

@@ -16,10 +16,11 @@ export default function getIconPlugin(name?: string) {
 	/**
 	 * Converte uma string para camelCase (ex: "hello-world" -> "helloWorld")
 	 */
-	const toCamelCase = (str: string) => {
+	const toCamelCase = (str: string): string => {
 		return str
-			.toLowerCase()
-			.replace(/[^a-zA-Z0-9]+(.)/g, (_m, chr) => chr.toUpperCase());
+			.replace(/[^a-zA-Z0-9]+(.)/g, (_m, chr) => chr.toUpperCase()) // Remove símbolos e capitaliza a letra seguinte
+			.replace(/^[A-Z]/, (m) => m.toLowerCase()) // Garante que a primeira letra seja minúscula
+			.replace(/[^a-zA-Z0-9]/g, ''); // Limpa qualquer resíduo
 	};
 
 	const camelizedName = toCamelCase(name);

package/src/utils/tooltip-overflow/index.ts

@@ -0,0 +1,2 @@
+export * from './install';
+export * from './uninstall';

package/src/utils/tooltip-overflow/install.ts

@@ -0,0 +1,27 @@
+import { App, VNode, createVNode, render } from 'vue';
+import ZdTooltipOverflow from '../../components/zd-tooltip-overflow/ZdTooltipOverflow.vue';
+
+/**
+ * Mounts a root instance of ZdTooltipOverflow component
+ * 
+ * @param app - The Vue application instance
+ * @returns An object containing the container element and tooltip VNode for cleanup
+ */
+export function installTooltipOverflow(app: App) {
+	// Create the container
+	const tooltipContainer = document.createElement('div');
+	tooltipContainer.id = 'zeedhi-tooltip-container';
+
+	// Create VNode and inherit context
+	const tooltipVNode: VNode = createVNode(ZdTooltipOverflow);
+	tooltipVNode.appContext = app._context;
+
+	// Render and append
+	render(tooltipVNode, tooltipContainer);
+	document.body.appendChild(tooltipContainer);
+
+	return {
+		container: tooltipContainer,
+		vNode: tooltipVNode,
+	};
+}

package/src/utils/tooltip-overflow/uninstall.ts

@@ -0,0 +1,32 @@
+import { App, VNode, render } from 'vue';
+
+interface TooltipCleanupData {
+	container: HTMLElement;
+	vNode: VNode;
+}
+
+/**
+ * Unmounts the ZdTooltipOverflow component and removes it from the DOM
+ * Also patches the app.unmount method to ensure cleanup happens
+ * 
+ * @param app - The Vue application instance
+ * @param cleanupData - Object containing the container and VNode to cleanup
+ */
+export function setupTooltipOverflowCleanup(app: App, cleanupData: TooltipCleanupData): void {
+	const { container } = cleanupData;
+
+	const originalUnmount = app.unmount;
+
+	app.unmount = () => {
+		// 1. Unmount our manual component (triggers onUnmounted inside ZdTooltipOverflow)
+		render(null, container);
+
+		// 2. Remove the container from the DOM
+		if (container.parentNode) {
+			container.parentNode.removeChild(container);
+		}
+
+		// 3. Proceed with the normal app unmount
+		originalUnmount();
+	};
+}