@zeedhi/vuetify 3.0.11 → 3.1.0

package/types/directives/v-tooltip-overflow.d.ts

@@ -0,0 +1,12 @@
+import { Directive } from 'vue';
+interface DirectiveBinding {
+    value: string | number | boolean;
+    modifiers: {
+        hidden?: boolean;
+        wrap?: boolean;
+        ellipsis?: boolean;
+    };
+    arg?: string;
+}
+export declare const vTooltipOverflow: Directive<HTMLElement, DirectiveBinding>;
+export {};

package/types/index.d.ts

@@ -19,4 +19,5 @@ export * from './errors';
 export * from './utils';
 export * from './components';
 export * from './composables';
+export * from './propsMixins';
 export default ZeedhiVuetify;

package/types/utils/fillHeight.d.ts

@@ -1 +1 @@
-export declare function setFillHeight(element: HTMLElement): void;
+export declare function setFillHeight(element: HTMLElement, fillHeight?: boolean | string): void;

package/types/utils/index.d.ts

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

package/types/utils/tooltip-overflow/index.d.ts

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

package/types/utils/tooltip-overflow/install.d.ts

@@ -0,0 +1,13 @@
+import { App, VNode } from '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 declare function installTooltipOverflow(app: App): {
+    container: HTMLDivElement;
+    vNode: VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>;
+};

package/types/utils/tooltip-overflow/uninstall.d.ts

@@ -0,0 +1,14 @@
+import { App, VNode } 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 declare function setupTooltipOverflowCleanup(app: App, cleanupData: TooltipCleanupData): void;
+export {};

package/src/components/tooltip-overflow/ZdTooltipOverflow.ts

@@ -1,63 +0,0 @@
-import { computed, defineComponent, onMounted, onUnmounted, ref, useTemplateRef } from 'vue';
-
-export default defineComponent({
-	props: {
-		overflow: {
-			type: [String, Number],
-		},
-		value: {
-			type: [String, Number, Boolean],
-		},
-		classes: {
-			type: Array,
-			default: () => [],
-		},
-		styles: {
-			type: Array,
-			default: () => [],
-		},
-		tag: {
-			type: String,
-			default: 'span',
-		},
-	},
-	emits: ['click'],
-	setup(props, { emit }) {
-		let observer: ResizeObserver;
-
-		const labelRef = useTemplateRef<HTMLElement | null>('value');
-		const clientWidth = ref(0);
-
-		onMounted(() => {
-			observer = new ResizeObserver(() => {
-				if (labelRef.value) {
-					clientWidth.value = labelRef.value.clientWidth;
-				}
-			});
-			if (labelRef.value) observer.observe(labelRef.value);
-		});
-
-		onUnmounted(() => {
-			if (observer) observer.disconnect();
-		});
-
-		const tooltipDisabled = computed(() => {
-			const labelEl = labelRef.value;
-			if (!labelEl) return true;
-
-			const overflow = clientWidth.value < labelEl.scrollWidth;
-
-			return !(overflow || Number.isInteger(props.overflow));
-		});
-
-		const click = (event: Event) => {
-			emit('click', event);
-		};
-
-		const isNumber = (overflow?: string | number) => {
-			return typeof overflow === 'number' || !Number.isNaN(Number(overflow));
-		};
-
-		return { tooltipDisabled, click, isNumber };
-	},
-});

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

@@ -1,63 +0,0 @@
-<template>
-  <component
-    :is="tag"
-    v-bind="{
-      ref: 'value'
-    }"
-    :class="[
-      'zd-tooltip-overflow',
-      {
-        'zd-tooltip-overflow--hidden': overflow === 'hidden',
-        'zd-tooltip-overflow--wrap': overflow === 'wrap',
-        'zd-tooltip-overflow--ellipsis': overflow === 'ellipsis',
-      },
-      isNumber(overflow)
-        ? `zd-tooltip-overflow--clamp zd-tooltip-overflow--clamp-${overflow}`
-        : '',
-      ...classes,
-    ]"
-    :style="styles"
-    @click="click($event)"
-  >
-    <v-tooltip
-      location="bottom"
-      :openOnClick="false"
-      :text="$t(String(value))"
-      :disabled="tooltipDisabled"
-      activator="parent"
-    ></v-tooltip>
-    <slot></slot>
-  </component>
-</template>
-
-<script lang="ts" src="./ZdTooltipOverflow.ts"></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; }
-    &-3 { -webkit-line-clamp: 3; }
-    &-4 { -webkit-line-clamp: 4; }
-    &-5 { -webkit-line-clamp: 5; }
-  }
-
-  &--ellipsis {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    overflow-wrap: break-word;
-    white-space: pre;
-  }
-}
-</style>