zero-tooltip 1.1.1 → 1.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +142 -142
- package/dist/index.d.ts +6 -1
- package/dist/types/tooltipConfig.d.ts +1 -1
- package/dist/zero-tooltip.js +149 -154
- package/dist/zero-tooltip.umd.cjs +1 -1
- package/package.json +7 -6
- package/src/composables/useHideOnResize.ts +36 -36
- package/src/composables/useHideOnScroll.ts +49 -49
- package/src/index.ts +27 -21
- package/src/tooltip.ts +521 -540
- package/src/types/tooltipConfig.ts +21 -21
- package/src/types/tooltipLocalConfig.ts +7 -7
- package/src/types/tooltipPosition.ts +4 -4
- package/src/types/tooltipPositions.ts +10 -10
|
@@ -1,49 +1,49 @@
|
|
|
1
|
-
|
|
2
|
-
export default function useHideOnScroll() {
|
|
3
|
-
let scrollContainers: Array<HTMLElement> = []
|
|
4
|
-
|
|
5
|
-
const handleHideOnScroll = (anchorElement: HTMLElement, hideOverlay: () => void) => {
|
|
6
|
-
getScrollContainers(anchorElement)
|
|
7
|
-
|
|
8
|
-
if (scrollContainers.length > 0) {
|
|
9
|
-
for (const scrollContainer of scrollContainers) {
|
|
10
|
-
scrollContainer.addEventListener('scroll', hideOverlay)
|
|
11
|
-
}
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
window.addEventListener('scroll', () => {
|
|
15
|
-
hideOverlay()
|
|
16
|
-
removeHideOnScrollListeners(hideOverlay)
|
|
17
|
-
})
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
const getScrollContainers = (anchorElement: HTMLElement) => {
|
|
21
|
-
let currentElement: HTMLElement | null = anchorElement
|
|
22
|
-
|
|
23
|
-
while (currentElement !== null && currentElement.tagName !== 'HTML') {
|
|
24
|
-
if (currentElement.scrollHeight !== currentElement.clientHeight) {
|
|
25
|
-
const computedStyle = window.getComputedStyle(currentElement)
|
|
26
|
-
|
|
27
|
-
if (computedStyle.overflow === 'auto' || computedStyle.overflow === 'scroll') {
|
|
28
|
-
scrollContainers.push(currentElement)
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
currentElement = currentElement.parentElement
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
const removeHideOnScrollListeners = (hideOverlay: () => void) => {
|
|
37
|
-
if (scrollContainers.length > 0) {
|
|
38
|
-
for (const scrollContainer of scrollContainers) {
|
|
39
|
-
scrollContainer.removeEventListener('scroll', hideOverlay)
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
scrollContainers = []
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
window.removeEventListener('scroll', hideOverlay)
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
return { handleHideOnScroll }
|
|
49
|
-
}
|
|
1
|
+
|
|
2
|
+
export default function useHideOnScroll() {
|
|
3
|
+
let scrollContainers: Array<HTMLElement> = []
|
|
4
|
+
|
|
5
|
+
const handleHideOnScroll = (anchorElement: HTMLElement, hideOverlay: () => void) => {
|
|
6
|
+
getScrollContainers(anchorElement)
|
|
7
|
+
|
|
8
|
+
if (scrollContainers.length > 0) {
|
|
9
|
+
for (const scrollContainer of scrollContainers) {
|
|
10
|
+
scrollContainer.addEventListener('scroll', hideOverlay)
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
window.addEventListener('scroll', () => {
|
|
15
|
+
hideOverlay()
|
|
16
|
+
removeHideOnScrollListeners(hideOverlay)
|
|
17
|
+
})
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
const getScrollContainers = (anchorElement: HTMLElement) => {
|
|
21
|
+
let currentElement: HTMLElement | null = anchorElement
|
|
22
|
+
|
|
23
|
+
while (currentElement !== null && currentElement.tagName !== 'HTML') {
|
|
24
|
+
if (currentElement.scrollHeight !== currentElement.clientHeight) {
|
|
25
|
+
const computedStyle = window.getComputedStyle(currentElement)
|
|
26
|
+
|
|
27
|
+
if (computedStyle.overflow === 'auto' || computedStyle.overflow === 'scroll') {
|
|
28
|
+
scrollContainers.push(currentElement)
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
currentElement = currentElement.parentElement
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
const removeHideOnScrollListeners = (hideOverlay: () => void) => {
|
|
37
|
+
if (scrollContainers.length > 0) {
|
|
38
|
+
for (const scrollContainer of scrollContainers) {
|
|
39
|
+
scrollContainer.removeEventListener('scroll', hideOverlay)
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
scrollContainers = []
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
window.removeEventListener('scroll', hideOverlay)
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
return { handleHideOnScroll }
|
|
49
|
+
}
|
package/src/index.ts
CHANGED
|
@@ -1,21 +1,27 @@
|
|
|
1
|
-
import './style.css'
|
|
2
|
-
import { App } from 'vue'
|
|
3
|
-
|
|
4
|
-
import ZeroTooltip from "./tooltip"
|
|
5
|
-
import TooltipConfig from "./types/tooltipConfig"
|
|
6
|
-
import TooltipLocalConfig from "./types/tooltipLocalConfig"
|
|
7
|
-
import TooltipPosition from "./types/tooltipPosition"
|
|
8
|
-
import TooltipPositions from "./types/tooltipPositions"
|
|
9
|
-
|
|
10
|
-
export default {
|
|
11
|
-
install: (app: App, options: TooltipConfig = {}) => {
|
|
12
|
-
app.directive('tooltip', ZeroTooltip(options))
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
export type {
|
|
17
|
-
TooltipConfig as ZeroTooltipConfig,
|
|
18
|
-
TooltipPosition as ZeroTooltipPosition,
|
|
19
|
-
TooltipPositions as ZeroTooltipPositions,
|
|
20
|
-
TooltipLocalConfig as ZeroTooltipLocalConfig
|
|
21
|
-
}
|
|
1
|
+
import './style.css'
|
|
2
|
+
import { App, FunctionDirective } from 'vue'
|
|
3
|
+
|
|
4
|
+
import ZeroTooltip from "./tooltip"
|
|
5
|
+
import TooltipConfig from "./types/tooltipConfig"
|
|
6
|
+
import TooltipLocalConfig from "./types/tooltipLocalConfig"
|
|
7
|
+
import TooltipPosition from "./types/tooltipPosition"
|
|
8
|
+
import TooltipPositions from "./types/tooltipPositions"
|
|
9
|
+
|
|
10
|
+
export default {
|
|
11
|
+
install: (app: App, options: TooltipConfig = {}) => {
|
|
12
|
+
app.directive('tooltip', ZeroTooltip(options))
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export type {
|
|
17
|
+
TooltipConfig as ZeroTooltipConfig,
|
|
18
|
+
TooltipPosition as ZeroTooltipPosition,
|
|
19
|
+
TooltipPositions as ZeroTooltipPositions,
|
|
20
|
+
TooltipLocalConfig as ZeroTooltipLocalConfig
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
declare module 'vue' {
|
|
24
|
+
interface ComponentCustomProperties {
|
|
25
|
+
vTooltip: FunctionDirective<HTMLElement, TooltipLocalConfig | string>
|
|
26
|
+
}
|
|
27
|
+
}
|