@dosgato/dialog 1.4.2 → 1.4.3
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/dist/Tooltip.svelte +45 -20
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/package.json +1 -1
package/dist/Tooltip.svelte
CHANGED
|
@@ -1,12 +1,55 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
+
import { tick } from 'svelte'
|
|
3
|
+
import { ScreenReaderOnly } from '@txstate-mws/svelte-components'
|
|
4
|
+
import { randomid } from 'txstate-utils'
|
|
5
|
+
|
|
2
6
|
export let tip: string | undefined = undefined
|
|
3
7
|
export let top: boolean = false
|
|
4
8
|
export let right: boolean = false
|
|
5
9
|
export let bottom: boolean = false
|
|
6
10
|
export let left: boolean = false
|
|
7
11
|
export let active: boolean = false
|
|
12
|
+
|
|
13
|
+
const tooltipId = randomid()
|
|
14
|
+
let triggerEl: HTMLSpanElement
|
|
15
|
+
let hasFocusableChild = false
|
|
16
|
+
|
|
17
|
+
async function reactToTip (..._: any[]) {
|
|
18
|
+
await tick()
|
|
19
|
+
if (!triggerEl) return
|
|
20
|
+
const focusable = triggerEl.querySelector('a[href], button, input, select, textarea, [tabindex]')
|
|
21
|
+
if (focusable) {
|
|
22
|
+
hasFocusableChild = true
|
|
23
|
+
focusable.setAttribute('aria-describedby', tooltipId)
|
|
24
|
+
} else {
|
|
25
|
+
hasFocusableChild = false
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
$: reactToTip(tip).catch(console.error)
|
|
8
29
|
</script>
|
|
9
30
|
|
|
31
|
+
{#if tip}
|
|
32
|
+
<div class="tooltip-wrapper">
|
|
33
|
+
<span class="tooltip-slot" bind:this={triggerEl}>
|
|
34
|
+
<slot />
|
|
35
|
+
{#if !hasFocusableChild}<ScreenReaderOnly>tooltip: {tip}</ScreenReaderOnly>{/if}
|
|
36
|
+
</span>
|
|
37
|
+
<div
|
|
38
|
+
id={tooltipId}
|
|
39
|
+
role="tooltip"
|
|
40
|
+
class="tooltip"
|
|
41
|
+
class:active
|
|
42
|
+
class:left
|
|
43
|
+
class:right
|
|
44
|
+
class:bottom
|
|
45
|
+
class:top>
|
|
46
|
+
<div class="default-tip tip">{tip}</div>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
{:else}
|
|
50
|
+
<slot />
|
|
51
|
+
{/if}
|
|
52
|
+
|
|
10
53
|
<style>
|
|
11
54
|
.tooltip {
|
|
12
55
|
opacity: 0;
|
|
@@ -28,7 +71,8 @@
|
|
|
28
71
|
opacity: 1;
|
|
29
72
|
visibility: initial;
|
|
30
73
|
}
|
|
31
|
-
.tooltip-slot:hover + .tooltip
|
|
74
|
+
.tooltip-slot:hover + .tooltip,
|
|
75
|
+
.tooltip-slot:focus-within + .tooltip {
|
|
32
76
|
opacity: 1;
|
|
33
77
|
visibility: initial;
|
|
34
78
|
}
|
|
@@ -37,22 +81,3 @@
|
|
|
37
81
|
background-color: #fff;
|
|
38
82
|
}
|
|
39
83
|
</style>
|
|
40
|
-
|
|
41
|
-
{#if tip}
|
|
42
|
-
<div class="tooltip-wrapper">
|
|
43
|
-
<span class="tooltip-slot">
|
|
44
|
-
<slot />
|
|
45
|
-
</span>
|
|
46
|
-
<div
|
|
47
|
-
class="tooltip"
|
|
48
|
-
class:active
|
|
49
|
-
class:left
|
|
50
|
-
class:right
|
|
51
|
-
class:bottom
|
|
52
|
-
class:top>
|
|
53
|
-
<div class="default-tip tip">{tip}</div>
|
|
54
|
-
</div>
|
|
55
|
-
</div>
|
|
56
|
-
{:else}
|
|
57
|
-
<slot />
|
|
58
|
-
{/if}
|
package/dist/index.d.ts
CHANGED
|
@@ -32,6 +32,7 @@ export { default as Radio } from './Radio.svelte';
|
|
|
32
32
|
export { default as Switcher } from './Switcher.svelte';
|
|
33
33
|
export { default as Tab } from './Tab.svelte';
|
|
34
34
|
export { default as Tabs } from './Tabs.svelte';
|
|
35
|
+
export { default as Tooltip } from './Tooltip.svelte';
|
|
35
36
|
export * from './chooser/index.js';
|
|
36
37
|
export * from './fileIcons.js';
|
|
37
38
|
export * from './errorIcons.js';
|
package/dist/index.js
CHANGED
|
@@ -32,6 +32,7 @@ export { default as Radio } from './Radio.svelte';
|
|
|
32
32
|
export { default as Switcher } from './Switcher.svelte';
|
|
33
33
|
export { default as Tab } from './Tab.svelte';
|
|
34
34
|
export { default as Tabs } from './Tabs.svelte';
|
|
35
|
+
export { default as Tooltip } from './Tooltip.svelte';
|
|
35
36
|
export * from './chooser/index.js';
|
|
36
37
|
export * from './fileIcons.js';
|
|
37
38
|
export * from './errorIcons.js';
|
package/package.json
CHANGED