@zeedhi/vuetify 3.0.11 → 3.1.0

package/src/components/zd-tabs/ZdTabs.vue

@@ -1,5 +1,5 @@
 <template>
-  <div  
+  <div
     ref="root"
     :id="instance.name"
     v-show="instance.isVisible"
@@ -14,7 +14,7 @@
     <v-tabs
       v-model="instance.activeTab"
       show-arrows
-      @change="change($event)"
+      @update:model-value="change"
       :theme="instance.theme"
       :color="instance.color"
       :bg-color="instance.backgroudColor"
@@ -37,7 +37,7 @@
       >
       </zd-tab>
     </v-tabs>
-    
+
     <v-window
       v-model="instance.activeTab"
     >
@@ -94,13 +94,22 @@
 
   .v-tabs{
     flex-grow: 0;
+    flex-shrink: 0;
   }
 
-  .v-tabs-items {
+  .v-window {
     flex-grow: 1;
     overflow-y: auto;
 
-    .v-window__container {
+    &__container {
+      height: 100%;
+    }
+  }
+
+  .v-tabs-window-item {
+    height: 100%;
+
+    > .v-container {
       height:100% !important;
     }
   }

package/src/components/zd-tag/ZdTag.ts

@@ -20,7 +20,7 @@ const tagComponent = defineComponent({
 	props: ZdTagProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<Tag>(props, ctx, Tag);
+		const { instance, root } = useCreateInstance<Tag>(props, ctx, Tag, ZdTagProps);
 
 		const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root);
 

package/src/components/zd-text/ZdText.ts

@@ -24,7 +24,7 @@ const textComponent = defineComponent({
 	props: ZdTextProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<Text>(props, ctx, Text);
+		const { instance, root } = useCreateInstance<Text>(props, ctx, Text, ZdTextProps);
 
 		const { click, mouseenter, mouseleave } = useGetMethods(instance, root);
 

package/src/components/zd-text-input/ZdTextInput.ts

@@ -72,7 +72,7 @@ const textInputComponent = defineComponent({
 	props: ZdTextInputProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<TextInput>(props, ctx, TextInput);
+		const { instance, root } = useCreateInstance<TextInput>(props, ctx, TextInput, ZdTextInputProps);
 
 		const textInputScope = useTextInput(instance, ctx, root);
 		const { maskOptions } = useMaska(instance, { disable: props.disableMaska });

package/src/components/zd-text-input/ZdTextInput.vue

@@ -19,8 +19,8 @@
           !instance.showHelper &&
           !(
             instance.alwaysShowError &&
-            $refs.instance &&
-            $refs.instance.errorBucket.length
+            $refs.root &&
+            $refs.root.errorMessages.length
           ),
         'zd-no-label': !instance.showLabel,
         'zd-text-input--suffix': !!instance.suffix,

package/src/components/zd-textarea/ZdTextarea.ts

@@ -46,6 +46,10 @@ export const ZdTextareaProps = buildProps({
 		type: [Number, String],
 		default: 5,
 	},
+	maxRows: {
+		type: [Number, String],
+		default: 10,
+	},
 	height: {
 		type: [String, Number],
 		default: 'auto',
@@ -60,7 +64,7 @@ const textareaComponent = defineComponent({
 	props: ZdTextareaProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<Textarea>(props, ctx, Textarea);
+		const { instance, root } = useCreateInstance<Textarea>(props, ctx, Textarea, ZdTextareaProps);
 
 		const { click, mouseenter, mouseleave, focus, blur } = useGetMethods(instance, root);
 

package/src/components/zd-textarea/ZdTextarea.vue

@@ -17,8 +17,8 @@
           !instance.showHelper &&
           !(
             instance.alwaysShowError &&
-            $refs.instance &&
-            $refs.instance.errorBucket.length
+            $refs.root &&
+            $refs.root.errorMessages.length
           ),
         'zd-no-label': !instance.showLabel,
         'zd-text-input--prepend-icon':
@@ -75,6 +75,7 @@
       rounded: instance.rounded,
       rowHeight: instance.rowHeight,
       rows: instance.rows,
+      maxRows: instance.maxRows,
       rules: instance.rules,
       singleLine: true,
       type: instance.type,
@@ -109,6 +110,8 @@
   textarea {
     padding: var(--spacing-2);
     line-height: unset;
+    -webkit-mask-image: none;
+    mask-image: none;
   }
 
   &.zd-text-align-left {

package/src/components/zd-time/ZdTime.ts

@@ -79,7 +79,7 @@ export default defineComponent({
 	name: 'ZdTime',
 	props: ZdTimeProps,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<Time>(props, ctx, Time);
+		const { instance, root } = useCreateInstance<Time>(props, ctx, Time, ZdTimeProps);
 		const { isMobile } = useIsMobile();
 		const textInputInstance = ref<any>(null);
 		const pickerRef = ref<any>(null);

package/src/components/zd-tooltip/ZdTooltip.ts

@@ -69,7 +69,7 @@ const tooltipComponent = defineComponent({
 		ZdActivatorWrapper,
 	},
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<Tooltip>(props, ctx, Tooltip);
+		const { instance, root } = useCreateInstance<Tooltip>(props, ctx, Tooltip, ZdTooltipProps);
 
 		const getLocation = (): any => {
 			if (instance.right) return 'right';

package/src/components/zd-tooltip-overflow/ZdTooltipOverflow.vue

@@ -0,0 +1,45 @@
+<template>
+  <v-tooltip
+    :model-value="isVisible"
+    :activator="targetElement"
+    :text="text"
+    location="bottom"
+    :openOnClick="false"
+  />
+</template>
+
+<script lang="ts" setup>
+import { useTooltipManager } from '../../composables/useTooltipManager';
+
+const { isVisible, text, targetElement} = useTooltipManager();
+</script>
+
+<style lang="scss">
+.zd-tooltip-overflow {
+  &--hidden {
+    text-overflow: unset;
+  }
+
+  &--wrap {
+    white-space: pre-wrap;
+  }
+
+  &--clamp {
+    white-space: normal;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+
+    &-2 { -webkit-line-clamp: 2; line-clamp: 2; }
+    &-3 { -webkit-line-clamp: 3; line-clamp: 3; }
+    &-4 { -webkit-line-clamp: 4; line-clamp: 4; }
+    &-5 { -webkit-line-clamp: 5; line-clamp: 5; }
+  }
+
+  &--ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    overflow-wrap: break-word;
+    white-space: pre;
+  }
+}
+</style>

package/src/components/zd-tree/ZdTree.ts

@@ -48,18 +48,22 @@ export const ZdTreeProps = buildProps({
 	afterTitleSlot: {
 		type: [String, Object] as PropType<ITreeConditionComponent>,
 		default: () => [],
+		watch: false,
 	},
 	toolbarSlot: {
 		type: Array as PropType<IComponentRender[]>,
 		default: () => [],
+		watch: false,
 	},
 	titleSlot: {
 		type: Array as PropType<ITreeConditionComponent[]>,
 		default: () => [],
+		watch: false,
 	},
 	datasource: {
 		type: Object as PropType<IDatasource>,
 		default: () => ({}),
+		watch: false,
 	},
 	parentField: {
 		type: String,
@@ -125,7 +129,7 @@ export default defineComponent({
 	props: ZdTreeProps,
 	setup(props, ctx) {
 		const treeRef = ref<any>();
-		const { instance, root } = useCreateInstance<Tree>(props, ctx, Tree);
+		const { instance, root } = useCreateInstance<Tree>(props, ctx, Tree, ZdTreeProps);
 		const selectedNodesTitle = ref('');
 		const beforeNodeState = ref<IDictionary>({});
 		const proxy = getCurrentInstance()?.proxy;

package/src/components/zd-tree-grid/ZdTreeGrid.ts

@@ -38,6 +38,7 @@ export const ZdTreeGridProps = buildProps({
 	footerSlot: {
 		type: Array,
 		default: () => [],
+		watch: false,
 	},
 });
 
@@ -45,7 +46,7 @@ const treeGridComponent = defineComponent({
 	props: ZdTreeGridProps,
 	inheritAttrs: false,
 	setup(props, ctx) {
-		const { instance, root } = useCreateInstance<TreeGrid, ComponentPublicInstance>(props, ctx, TreeGrid);
+		const { instance, root } = useCreateInstance<TreeGrid, ComponentPublicInstance>(props, ctx, TreeGrid, ZdTreeGridProps);
 
 		const gridScope = useGridInstance({ instance, root });
 

package/src/composables/columnDrag.ts

@@ -1,6 +1,6 @@
 import { GridColumn, IGrid } from '@zeedhi/common';
 import Sortable, { MoveEvent, SortableEvent } from 'sortablejs';
-import { ComputedRef, UnwrapNestedRefs, UnwrapRef, onMounted, watch } from 'vue';
+import { ComputedRef, UnwrapNestedRefs, UnwrapRef, onMounted, onUnmounted, watch } from 'vue';
 
 /**
  * Composable for components that can have their columns dragged
@@ -33,10 +33,12 @@ export function useColumnDrag<T extends IGrid>({
 		return event.related.classList.contains('sort-handle');
 	};
 
+	let sortableInstance: Sortable | null = null;
+
 	const initDragColumns = () => {
 		const tr = rootEl.value?.querySelector<HTMLElement>('thead tr');
 		if (tr) {
-			Sortable.create(tr, {
+			sortableInstance = Sortable.create(tr, {
 				onEnd: sortColumns,
 				onMove: checkMove,
 				handle: '.sort-handle',
@@ -46,15 +48,7 @@ export function useColumnDrag<T extends IGrid>({
 	};
 
 	const destroyDragColumns = () => {
-		const tr = rootEl.value?.querySelector<HTMLElement>('thead tr');
-		if (tr) {
-			Sortable.create(tr, {
-				onEnd: sortColumns,
-				onMove: checkMove,
-				handle: '.sort-handle',
-				scroll: false,
-			}).destroy();
-		}
+		sortableInstance?.destroy();
 	};
 
 	const sortColumns = (event: SortableEvent) => {
@@ -101,5 +95,9 @@ export function useColumnDrag<T extends IGrid>({
 		return orderHeaders(instance.columns);
 	};
 
+	onUnmounted(() => {
+		destroyDragColumns();
+	});
+
 	return {};
 }

package/src/composables/tableNavigation.ts

@@ -7,9 +7,11 @@ import { ComputedRef, UnwrapNestedRefs } from 'vue';
 export function useTableNavigation<T extends IDataNavigator & IViewNavigator>({
 	instance,
 	rootEl,
+	isNavigableRow,
 }: {
 	instance: UnwrapNestedRefs<T>;
 	rootEl: ComputedRef<HTMLElement | undefined>;
+	isNavigableRow?: (element: Element) => boolean;
 }) {
 	const navigate = (direction: 'up' | 'down' | 'left' | 'right', event?: Event) => {
 		if (direction === 'up' || direction === 'down') {
@@ -115,7 +117,9 @@ export function useTableNavigation<T extends IDataNavigator & IViewNavigator>({
 	};
 
 	const getArrayFromTrElement = (node: Element | HTMLElement | null) => {
-		return getArrayFromElementTag('TR', node).filter(isElementVisible);
+		return getArrayFromElementTag('TR', node).filter(
+			(element) => isElementVisible(element) && (isNavigableRow?.(element) ?? true),
+		);
 	};
 
 	const findNextTd = (

package/src/composables/useTooltipManager.ts

@@ -0,0 +1,24 @@
+import { computed, ref } from 'vue';
+
+export interface TooltipManager {
+	text: string;
+	targetElement: HTMLElement | null;
+	showTooltip: (element: HTMLElement, text: string) => void;
+	hideTooltip: () => void;
+}
+
+const text = ref('');
+
+const targetElement = ref<HTMLElement | null>(null);
+
+export function useTooltipManager() {
+	const showTooltip = (element: HTMLElement, content: string) => {
+		targetElement.value = element;
+		text.value = content;
+	}
+	const hideTooltip = () => {
+		targetElement.value = null;
+	}
+	const isVisible = computed(() => (targetElement.value !== null));
+	return { isVisible, text, targetElement, showTooltip, hideTooltip };
+}

package/src/directives/index.ts

@@ -0,0 +1 @@
+export { vTooltipOverflow } from './v-tooltip-overflow';

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();
+	};
+}