zero-tooltip 1.2.1 → 1.3.0
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 +148 -142
- package/dist/style.css +1 -1
- package/dist/types/tooltipConfig.d.ts +2 -0
- package/dist/zero-tooltip.js +148 -127
- package/dist/zero-tooltip.umd.cjs +1 -1
- package/package.json +2 -2
- package/src/composables/useHideOnResize.ts +36 -36
- package/src/composables/useHideOnScroll.ts +49 -49
- package/src/index.ts +27 -27
- package/src/style.css +212 -1
- package/src/tooltip.ts +577 -521
- package/src/types/tooltipConfig.ts +23 -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,27 +1,27 @@
|
|
|
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
|
-
}
|
|
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
|
+
}
|
package/src/style.css
CHANGED
|
@@ -1 +1,212 @@
|
|
|
1
|
-
|
|
1
|
+
*, ::before, ::after {
|
|
2
|
+
--tw-border-spacing-x: 0;
|
|
3
|
+
--tw-border-spacing-y: 0;
|
|
4
|
+
--tw-translate-x: 0;
|
|
5
|
+
--tw-translate-y: 0;
|
|
6
|
+
--tw-rotate: 0;
|
|
7
|
+
--tw-skew-x: 0;
|
|
8
|
+
--tw-skew-y: 0;
|
|
9
|
+
--tw-scale-x: 1;
|
|
10
|
+
--tw-scale-y: 1;
|
|
11
|
+
--tw-pan-x: ;
|
|
12
|
+
--tw-pan-y: ;
|
|
13
|
+
--tw-pinch-zoom: ;
|
|
14
|
+
--tw-scroll-snap-strictness: proximity;
|
|
15
|
+
--tw-gradient-from-position: ;
|
|
16
|
+
--tw-gradient-via-position: ;
|
|
17
|
+
--tw-gradient-to-position: ;
|
|
18
|
+
--tw-ordinal: ;
|
|
19
|
+
--tw-slashed-zero: ;
|
|
20
|
+
--tw-numeric-figure: ;
|
|
21
|
+
--tw-numeric-spacing: ;
|
|
22
|
+
--tw-numeric-fraction: ;
|
|
23
|
+
--tw-ring-inset: ;
|
|
24
|
+
--tw-ring-offset-width: 0px;
|
|
25
|
+
--tw-ring-offset-color: #fff;
|
|
26
|
+
--tw-ring-color: rgb(59 130 246 / 0.5);
|
|
27
|
+
--tw-ring-offset-shadow: 0 0 #0000;
|
|
28
|
+
--tw-ring-shadow: 0 0 #0000;
|
|
29
|
+
--tw-shadow: 0 0 #0000;
|
|
30
|
+
--tw-shadow-colored: 0 0 #0000;
|
|
31
|
+
--tw-blur: ;
|
|
32
|
+
--tw-brightness: ;
|
|
33
|
+
--tw-contrast: ;
|
|
34
|
+
--tw-grayscale: ;
|
|
35
|
+
--tw-hue-rotate: ;
|
|
36
|
+
--tw-invert: ;
|
|
37
|
+
--tw-saturate: ;
|
|
38
|
+
--tw-sepia: ;
|
|
39
|
+
--tw-drop-shadow: ;
|
|
40
|
+
--tw-backdrop-blur: ;
|
|
41
|
+
--tw-backdrop-brightness: ;
|
|
42
|
+
--tw-backdrop-contrast: ;
|
|
43
|
+
--tw-backdrop-grayscale: ;
|
|
44
|
+
--tw-backdrop-hue-rotate: ;
|
|
45
|
+
--tw-backdrop-invert: ;
|
|
46
|
+
--tw-backdrop-opacity: ;
|
|
47
|
+
--tw-backdrop-saturate: ;
|
|
48
|
+
--tw-backdrop-sepia:
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
::backdrop {
|
|
52
|
+
--tw-border-spacing-x: 0;
|
|
53
|
+
--tw-border-spacing-y: 0;
|
|
54
|
+
--tw-translate-x: 0;
|
|
55
|
+
--tw-translate-y: 0;
|
|
56
|
+
--tw-rotate: 0;
|
|
57
|
+
--tw-skew-x: 0;
|
|
58
|
+
--tw-skew-y: 0;
|
|
59
|
+
--tw-scale-x: 1;
|
|
60
|
+
--tw-scale-y: 1;
|
|
61
|
+
--tw-pan-x: ;
|
|
62
|
+
--tw-pan-y: ;
|
|
63
|
+
--tw-pinch-zoom: ;
|
|
64
|
+
--tw-scroll-snap-strictness: proximity;
|
|
65
|
+
--tw-gradient-from-position: ;
|
|
66
|
+
--tw-gradient-via-position: ;
|
|
67
|
+
--tw-gradient-to-position: ;
|
|
68
|
+
--tw-ordinal: ;
|
|
69
|
+
--tw-slashed-zero: ;
|
|
70
|
+
--tw-numeric-figure: ;
|
|
71
|
+
--tw-numeric-spacing: ;
|
|
72
|
+
--tw-numeric-fraction: ;
|
|
73
|
+
--tw-ring-inset: ;
|
|
74
|
+
--tw-ring-offset-width: 0px;
|
|
75
|
+
--tw-ring-offset-color: #fff;
|
|
76
|
+
--tw-ring-color: rgb(59 130 246 / 0.5);
|
|
77
|
+
--tw-ring-offset-shadow: 0 0 #0000;
|
|
78
|
+
--tw-ring-shadow: 0 0 #0000;
|
|
79
|
+
--tw-shadow: 0 0 #0000;
|
|
80
|
+
--tw-shadow-colored: 0 0 #0000;
|
|
81
|
+
--tw-blur: ;
|
|
82
|
+
--tw-brightness: ;
|
|
83
|
+
--tw-contrast: ;
|
|
84
|
+
--tw-grayscale: ;
|
|
85
|
+
--tw-hue-rotate: ;
|
|
86
|
+
--tw-invert: ;
|
|
87
|
+
--tw-saturate: ;
|
|
88
|
+
--tw-sepia: ;
|
|
89
|
+
--tw-drop-shadow: ;
|
|
90
|
+
--tw-backdrop-blur: ;
|
|
91
|
+
--tw-backdrop-brightness: ;
|
|
92
|
+
--tw-backdrop-contrast: ;
|
|
93
|
+
--tw-backdrop-grayscale: ;
|
|
94
|
+
--tw-backdrop-hue-rotate: ;
|
|
95
|
+
--tw-backdrop-invert: ;
|
|
96
|
+
--tw-backdrop-opacity: ;
|
|
97
|
+
--tw-backdrop-saturate: ;
|
|
98
|
+
--tw-backdrop-sepia:
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.zt-fixed {
|
|
102
|
+
position: fixed
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.zt-absolute {
|
|
106
|
+
position: absolute
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.zt-box-border {
|
|
110
|
+
box-sizing: border-box
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.zt-inline-block {
|
|
114
|
+
display: inline-block
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.zt-w-fit {
|
|
118
|
+
width: -moz-fit-content;
|
|
119
|
+
width: fit-content
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.zt-whitespace-pre-wrap {
|
|
123
|
+
white-space: pre-wrap
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.zt-break-words {
|
|
127
|
+
overflow-wrap: break-word
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.zt-rounded-md {
|
|
131
|
+
border-radius: 0.375rem
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.zt-border-solid {
|
|
135
|
+
border-style: solid
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.zt-border-\[\#495057\] {
|
|
139
|
+
--tw-border-opacity: 1;
|
|
140
|
+
border-color: rgb(73 80 87 / var(--tw-border-opacity))
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.\!zt-border-x-transparent {
|
|
144
|
+
border-left-color: transparent !important;
|
|
145
|
+
border-right-color: transparent !important
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.\!zt-border-y-transparent {
|
|
149
|
+
border-top-color: transparent !important;
|
|
150
|
+
border-bottom-color: transparent !important
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.\!zt-border-b-transparent {
|
|
154
|
+
border-bottom-color: transparent !important
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.\!zt-border-l-transparent {
|
|
158
|
+
border-left-color: transparent !important
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.\!zt-border-r-transparent {
|
|
162
|
+
border-right-color: transparent !important
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.\!zt-border-t-transparent {
|
|
166
|
+
border-top-color: transparent !important
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.zt-bg-\[\#495057\] {
|
|
170
|
+
--tw-bg-opacity: 1;
|
|
171
|
+
background-color: rgb(73 80 87 / var(--tw-bg-opacity))
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.zt-px-2 {
|
|
175
|
+
padding-left: 0.5rem;
|
|
176
|
+
padding-right: 0.5rem
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.zt-px-2\.5 {
|
|
180
|
+
padding-left: 0.625rem;
|
|
181
|
+
padding-right: 0.625rem
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.zt-py-1 {
|
|
185
|
+
padding-top: 0.25rem;
|
|
186
|
+
padding-bottom: 0.25rem
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.zt-py-1\.5 {
|
|
190
|
+
padding-top: 0.375rem;
|
|
191
|
+
padding-bottom: 0.375rem
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.zt-text-sm {
|
|
195
|
+
font-size: 0.875rem;
|
|
196
|
+
line-height: 1.25rem
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.zt-text-white {
|
|
200
|
+
--tw-text-opacity: 1;
|
|
201
|
+
color: rgb(255 255 255 / var(--tw-text-opacity))
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
.zt-opacity-0 {
|
|
205
|
+
opacity: 0
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.zt-shadow-\[0_2px_12px_0_rgba\(0\,0\,0\,0\.1\)\] {
|
|
209
|
+
--tw-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
|
|
210
|
+
--tw-shadow-colored: 0 2px 12px 0 var(--tw-shadow-color);
|
|
211
|
+
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
|
|
212
|
+
}
|