zero-tooltip 1.3.1 → 1.4.0

package/package.json

@@ -1,65 +1,65 @@
-{
-  "name": "zero-tooltip",
-  "description": "Tooltip component",
-  "main": "./dist/zero-tooltip.umd.cjs",
-  "module": "./dist/zero-tooltip.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/zero-tooltip.js",
-      "require": "./dist/zero-tooltip.umd.cjs",
-      "types": "./dist/index.d.ts"
-    },
-    "./dist/style.css": "./dist/style.css",
-    "./style.css": "./dist/style.css"
-  },
-  "./package.json": "./package.json",
-  "files": [
-    "dist",
-    "src"
-  ],
-  "version": "1.3.1",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "npx tailwindcss -o ./src/style.css && vite build && vue-tsc -d --emitDeclarationOnly",
-    "preview": "vite preview"
-  },
-  "devDependencies": {
-    "@rollup/plugin-typescript": "^11.1.4",
-    "@types/node": "20.6.2",
-    "@vitejs/plugin-vue": "4.2.3",
-    "autoprefixer": "10.4.15",
-    "postcss": "8.4.29",
-    "tailwindcss": "3.3.3",
-    "typescript": "5.0.2",
-    "vite": "4.4.5",
-    "vite-plugin-dts": "3.5.3",
-    "vue": "^3.0.0",
-    "vue-tsc": "1.8.5",
-    "primevue": "3.53.0"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/TheAliter/zero-tooltip.git"
-  },
-  "keywords": [
-    "tooltip",
-    "vue3",
-    "typescript",
-    "zero-tooltip"
-  ],
-  "author": "Andris Paškovskis",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/TheAliter/zero-tooltip/issues"
-  },
-  "homepage": "https://github.com/TheAliter/zero-tooltip#readme",
-  "dependencies": {
-    "@types/uuid": "^9.0.7",
-    "uuid": "^9.0.1"
-  },
-  "peerDependencies": {
-    "vue": "^3.0.0"
-  }
-}
+{
+  "name": "zero-tooltip",
+  "description": "Tooltip component",
+  "main": "./dist/zero-tooltip.umd.cjs",
+  "module": "./dist/zero-tooltip.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/zero-tooltip.js",
+      "require": "./dist/zero-tooltip.umd.cjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./dist/style.css": "./dist/style.css",
+    "./style.css": "./dist/style.css"
+  },
+  "./package.json": "./package.json",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "version": "1.4.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "npx tailwindcss -o ./src/style.css && vite build && vue-tsc -d --emitDeclarationOnly",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@rollup/plugin-typescript": "^11.1.4",
+    "@types/node": "20.6.2",
+    "@vitejs/plugin-vue": "4.2.3",
+    "autoprefixer": "10.4.15",
+    "postcss": "8.4.29",
+    "tailwindcss": "3.3.3",
+    "typescript": "5.0.2",
+    "vite": "4.4.5",
+    "vite-plugin-dts": "3.5.3",
+    "vue": "^3.0.0",
+    "vue-tsc": "1.8.5",
+    "primevue": "3.53.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TheAliter/zero-tooltip.git"
+  },
+  "keywords": [
+    "tooltip",
+    "vue3",
+    "typescript",
+    "zero-tooltip"
+  ],
+  "author": "Andris Paškovskis",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/TheAliter/zero-tooltip/issues"
+  },
+  "homepage": "https://github.com/TheAliter/zero-tooltip#readme",
+  "dependencies": {
+    "@types/uuid": "^9.0.7",
+    "uuid": "^9.0.1"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  }
+}

package/src/composables/useHideOnResize.ts

@@ -1,36 +1,38 @@
-export default function useHideOnResize() {
-    let anchorElementResizeObserver: ResizeObserver | null = null
-    let anchorElementRect: DOMRect | null = null
-
-    const handleHideOnResize = (anchorElement: HTMLElement, hideOverlay: () => void) => {
-        anchorElementResizeObserver = new ResizeObserver((entries) => {
-            const targetElement = entries[0].target
-
-            if (anchorElementRect === null) {
-                // On initial trigger set initial values
-                anchorElementRect = anchorElement.getBoundingClientRect()
-            } else {
-                const targetElementRect = targetElement.getBoundingClientRect()
-
-                // Check if anchor element has moved or resized
-                if (targetElementRect.left !== anchorElementRect.left
-                    || targetElementRect.top !== anchorElementRect.top
-                    || targetElementRect.width !== anchorElementRect.width
-                    || targetElementRect.height !== anchorElementRect.height) {
-                        hideOverlay()
-                    }
-            }
-        })
-
-        anchorElementResizeObserver.observe(anchorElement)
-    }
-
-    const resetResizeReferences = () => {
-        if (anchorElementResizeObserver !== null) anchorElementResizeObserver.disconnect()
-
-        anchorElementResizeObserver = null
-        anchorElementRect = null
-    }
-
-    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,49 +1,60 @@
-
-export default function useHideOnScroll() {
-    let scrollContainers: Array<HTMLElement> = []
-
-    const handleHideOnScroll = (anchorElement: HTMLElement, hideOverlay: () => void) => {
-        getScrollContainers(anchorElement)
-
-        if (scrollContainers.length > 0) {
-            for (const scrollContainer of scrollContainers) {
-                scrollContainer.addEventListener('scroll', hideOverlay)
-            }
-        } 
-        
-        window.addEventListener('scroll', () => {
-            hideOverlay()
-            removeHideOnScrollListeners(hideOverlay)
-        })
-    }
-
-    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') {
-                    scrollContainers.push(currentElement)
-                }
-            }
-
-            currentElement = currentElement.parentElement
-        } 
-    }
-
-    const removeHideOnScrollListeners = (hideOverlay: () => void) => {
-        if (scrollContainers.length > 0) {
-            for (const scrollContainer of scrollContainers) {
-                scrollContainer.removeEventListener('scroll', hideOverlay)
-            }
-
-            scrollContainers = []
-        } 
-        
-        window.removeEventListener('scroll', hideOverlay)
-    }
-    
-    return { handleHideOnScroll }
-}
+
+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/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>
+    }
+}