zero-tooltip 1.4.3 → 2.0.0

package/src/composables/useHideOnResize.ts

@@ -1,38 +1,38 @@
-export default function useHideOnResize() {
-    const anchorElementResizeObservers: Record<string, ResizeObserver>  = {}
-    const anchorElementRects: Record<string, DOMRect>  = {}
-
-    const handleHideOnResize = (tooltipUuid: string, anchorElement: HTMLElement, hideOverlay: () => void) => {
-        let anchorElementResizeObserver = new ResizeObserver((entries) => {
-            const targetElement = entries[0].target
-
-            if (!anchorElementRects[tooltipUuid]) {
-                // On initial trigger set initial values
-                anchorElementRects[tooltipUuid] = anchorElement.getBoundingClientRect()
-            } else {
-                const targetElementRect = targetElement.getBoundingClientRect()
-
-                // Check if anchor element has moved or resized
-                if (targetElementRect.left !== anchorElementRects[tooltipUuid].left
-                    || targetElementRect.top !== anchorElementRects[tooltipUuid].top
-                    || targetElementRect.width !== anchorElementRects[tooltipUuid].width
-                    || targetElementRect.height !== anchorElementRects[tooltipUuid].height) {
-                        hideOverlay()
-                    }
-            }
-        })
-
-        anchorElementResizeObservers[tooltipUuid] = anchorElementResizeObserver
-
-        anchorElementResizeObserver.observe(anchorElement)
-    }
-
-    const resetResizeReferences = (tooltipUuid: string) => {
-        if (anchorElementResizeObservers[tooltipUuid]) anchorElementResizeObservers[tooltipUuid].disconnect()
-
-        delete anchorElementResizeObservers[tooltipUuid]
-        delete anchorElementRects[tooltipUuid]
-    }
-
-    return { handleHideOnResize, resetResizeReferences }
-}
+export default function useHideOnResize() {
+    const anchorElementResizeObservers: Record<string, ResizeObserver>  = {}
+    const anchorElementRects: Record<string, DOMRect>  = {}
+
+    const handleHideOnResize = (tooltipUuid: string, anchorElement: HTMLElement, hideOverlay: () => void) => {
+        let anchorElementResizeObserver = new ResizeObserver((entries) => {
+            const targetElement = entries[0].target
+
+            if (!anchorElementRects[tooltipUuid]) {
+                // On initial trigger set initial values
+                anchorElementRects[tooltipUuid] = anchorElement.getBoundingClientRect()
+            } else {
+                const targetElementRect = targetElement.getBoundingClientRect()
+
+                // Check if anchor element has moved or resized
+                if (targetElementRect.left !== anchorElementRects[tooltipUuid].left
+                    || targetElementRect.top !== anchorElementRects[tooltipUuid].top
+                    || targetElementRect.width !== anchorElementRects[tooltipUuid].width
+                    || targetElementRect.height !== anchorElementRects[tooltipUuid].height) {
+                        hideOverlay()
+                    }
+            }
+        })
+
+        anchorElementResizeObservers[tooltipUuid] = anchorElementResizeObserver
+
+        anchorElementResizeObserver.observe(anchorElement)
+    }
+
+    const resetResizeReferences = (tooltipUuid: string) => {
+        if (anchorElementResizeObservers[tooltipUuid]) anchorElementResizeObservers[tooltipUuid].disconnect()
+
+        delete anchorElementResizeObservers[tooltipUuid]
+        delete anchorElementRects[tooltipUuid]
+    }
+
+    return { handleHideOnResize, resetResizeReferences }
+}

package/src/composables/useHideOnScroll.ts

@@ -1,60 +1,60 @@
-
-import type { ScrollContainers, ScrollContainer } from '@/types/scrollContainer'
-
-export default function useHideOnScroll() {
-    let scrollContainers: ScrollContainers = []
-
-    const handleHideOnScroll = (anchorElement: HTMLElement, hideOverlay: () => void) => {
-        getScrollContainers(anchorElement)
-
-        for (const scrollContainer of scrollContainers) {
-            scrollContainer.element.addEventListener(
-                'scroll', 
-                () => {
-                    hideOverlay()
-                    removeHideOnScrollListeners()
-                }, 
-                { signal: scrollContainer.eventController.signal }
-            )
-        }
-    }
-
-    const getScrollContainers = (anchorElement: HTMLElement) => {
-        let currentElement: HTMLElement | null = anchorElement
-
-        while (currentElement !== null && currentElement.tagName !== 'HTML') {
-            if (currentElement.scrollHeight !== currentElement.clientHeight) {
-                const computedStyle = window.getComputedStyle(currentElement)
-
-                if (computedStyle.overflow === 'auto' || computedStyle.overflow === 'scroll') {
-                    const scrollContainer: ScrollContainer = {
-                        element: currentElement,
-                        eventController: new AbortController()
-                    }
-
-                    scrollContainers.push(scrollContainer)
-                }
-            }
-
-            currentElement = currentElement.parentElement
-        }
-
-        // Add window as a scroll container
-        const scrollContainer: ScrollContainer = {
-            element: window,
-            eventController: new AbortController()
-        }
-
-        scrollContainers.push(scrollContainer)
-    }
-
-    const removeHideOnScrollListeners = () => {
-        for (const scrollContainer of scrollContainers) {
-            scrollContainer.eventController.abort()
-        }
-
-        scrollContainers = []
-    }
-    
-    return { handleHideOnScroll, removeHideOnScrollListeners }
-}
+
+import type { ScrollContainers, ScrollContainer } from '@/types/scrollContainer'
+
+export default function useHideOnScroll() {
+    let scrollContainers: ScrollContainers = []
+
+    const handleHideOnScroll = (anchorElement: HTMLElement, hideOverlay: () => void) => {
+        getScrollContainers(anchorElement)
+
+        for (const scrollContainer of scrollContainers) {
+            scrollContainer.element.addEventListener(
+                'scroll', 
+                () => {
+                    hideOverlay()
+                    removeHideOnScrollListeners()
+                }, 
+                { signal: scrollContainer.eventController.signal }
+            )
+        }
+    }
+
+    const getScrollContainers = (anchorElement: HTMLElement) => {
+        let currentElement: HTMLElement | null = anchorElement
+
+        while (currentElement !== null && currentElement.tagName !== 'HTML') {
+            if (currentElement.scrollHeight !== currentElement.clientHeight) {
+                const computedStyle = window.getComputedStyle(currentElement)
+
+                if (computedStyle.overflow === 'auto' || computedStyle.overflow === 'scroll') {
+                    const scrollContainer: ScrollContainer = {
+                        element: currentElement,
+                        eventController: new AbortController()
+                    }
+
+                    scrollContainers.push(scrollContainer)
+                }
+            }
+
+            currentElement = currentElement.parentElement
+        }
+
+        // Add window as a scroll container
+        const scrollContainer: ScrollContainer = {
+            element: window,
+            eventController: new AbortController()
+        }
+
+        scrollContainers.push(scrollContainer)
+    }
+
+    const removeHideOnScrollListeners = () => {
+        for (const scrollContainer of scrollContainers) {
+            scrollContainer.eventController.abort()
+        }
+
+        scrollContainers = []
+    }
+    
+    return { handleHideOnScroll, removeHideOnScrollListeners }
+}

package/src/composables/useRepositionOnResize.ts

@@ -1,16 +1,16 @@
-export default function useRepositionOnResize() {
-    const anchorElementsRepositionControllers: Record<string, AbortController>  = {}
-
-    const handleRepositionOnResize = (tooltipUuid: string, onWindowResize: () => void) => {
-        anchorElementsRepositionControllers[tooltipUuid] = new AbortController()
-        window.addEventListener('resize', onWindowResize)
-    }
-
-    const removeRepositionOnResizeHandler = (tooltipUuid: string) => {
-        if (anchorElementsRepositionControllers[tooltipUuid]) {
-            anchorElementsRepositionControllers[tooltipUuid].abort()
-        }
-    }
-
-    return { handleRepositionOnResize, removeRepositionOnResizeHandler }
-}
+export default function useRepositionOnResize() {
+    const anchorElementsRepositionControllers: Record<string, AbortController>  = {}
+
+    const handleRepositionOnResize = (tooltipUuid: string, onWindowResize: () => void) => {
+        anchorElementsRepositionControllers[tooltipUuid] = new AbortController()
+        window.addEventListener('resize', onWindowResize)
+    }
+
+    const removeRepositionOnResizeHandler = (tooltipUuid: string) => {
+        if (anchorElementsRepositionControllers[tooltipUuid]) {
+            anchorElementsRepositionControllers[tooltipUuid].abort()
+        }
+    }
+
+    return { handleRepositionOnResize, removeRepositionOnResizeHandler }
+}

package/src/index.ts

@@ -1,27 +1,27 @@
-import './style.css'
-import { App, FunctionDirective } from 'vue'
-
-import ZeroTooltip from "./tooltip"
-import TooltipConfig from "./types/tooltipConfig"
-import TooltipLocalConfig from "./types/tooltipLocalConfig"
-import TooltipPosition from "./types/tooltipPosition"
-import TooltipPositions from "./types/tooltipPositions"
-
-export default {
-    install: (app: App, options: TooltipConfig = {}) => {
-        app.directive('tooltip', ZeroTooltip(options))
-    }
-}
-
-export type { 
-    TooltipConfig as ZeroTooltipConfig, 
-    TooltipPosition as ZeroTooltipPosition, 
-    TooltipPositions as ZeroTooltipPositions, 
-    TooltipLocalConfig as ZeroTooltipLocalConfig 
-}
-
-declare module 'vue' {
-    interface ComponentCustomProperties {
-        vTooltip: FunctionDirective<HTMLElement, TooltipLocalConfig | string>
-    }
-}
+import './style.css'
+import { App, FunctionDirective } from 'vue'
+
+import ZeroTooltip from "./tooltip"
+import TooltipConfig from "./types/tooltipConfig"
+import TooltipLocalConfig from "./types/tooltipLocalConfig"
+import TooltipPosition from "./types/tooltipPosition"
+import TooltipPositions from "./types/tooltipPositions"
+
+export default {
+    install: (app: App, options: TooltipConfig = {}) => {
+        app.directive('tooltip', ZeroTooltip(options))
+    }
+}
+
+export type { 
+    TooltipConfig as ZeroTooltipConfig, 
+    TooltipPosition as ZeroTooltipPosition, 
+    TooltipPositions as ZeroTooltipPositions, 
+    TooltipLocalConfig as ZeroTooltipLocalConfig 
+}
+
+declare module 'vue' {
+    interface ComponentCustomProperties {
+        vTooltip: FunctionDirective<HTMLElement, TooltipLocalConfig | string>
+    }
+}