-
Notifications
You must be signed in to change notification settings - Fork 0
/
HoverState.svelte
49 lines (45 loc) · 1.13 KB
/
HoverState.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!--
@component
this component keeps track of user hovering the contents
it by default applies a `config.Delays.min` delay for dismissing the hover state
@slot `default` - the main content of the component
@prop `hoverState`
@prop `shouldLeave`
-->
<script lang="ts">
import { createEventDispatcher } from 'svelte'
import { config } from './configs'
import { canHover$ } from './helpers/media-queries'
/** @default false */
export let noDelay = false
/** @readonly */
export let hoverState = false
/** @readonly */
export let shouldLeave = false
let dispatch = createEventDispatcher<{ hover: boolean }>()
</script>
<div
class="contents"
on:pointerenter={() => {
if ($canHover$) {
shouldLeave = false
hoverState = true
dispatch('hover', true)
}
}}
on:pointerleave={() => {
if ($canHover$) {
shouldLeave = true
setTimeout(
() => {
if (shouldLeave) {
hoverState = false
dispatch('hover', false)
}
},
noDelay ? 0 : config.Delays.min,
)
}
}}>
<slot {hoverState} {shouldLeave} />
</div>