@onsvisual/svelte-components 1.1.50 → 1.1.51
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.
|
@@ -1,4 +1,7 @@
|
|
|
1
1
|
<script>
|
|
2
|
+
import { onMount } from "svelte";
|
|
3
|
+
import { createPopper } from "@popperjs/core";
|
|
4
|
+
|
|
2
5
|
/**
|
|
3
6
|
* Define the text to be displayed on the tooltip
|
|
4
7
|
* @type {string}
|
|
@@ -6,7 +9,7 @@
|
|
|
6
9
|
export let text = "";
|
|
7
10
|
/**
|
|
8
11
|
* Define the position of the tooltip relative to the element
|
|
9
|
-
* @type {"top"|"bottom"|"left"|"right"
|
|
12
|
+
* @type {"top"|"bottom"|"left"|"right"}
|
|
10
13
|
*/
|
|
11
14
|
export let position = "bottom";
|
|
12
15
|
/**
|
|
@@ -20,45 +23,78 @@
|
|
|
20
23
|
*/
|
|
21
24
|
export let zIndex = 1;
|
|
22
25
|
|
|
23
|
-
let
|
|
26
|
+
let wrapper, tooltip; // HTML element bindings
|
|
27
|
+
let showToolip = null;
|
|
24
28
|
|
|
25
|
-
function
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
29
|
+
function init() {
|
|
30
|
+
const popper = createPopper(wrapper, tooltip, {
|
|
31
|
+
placement: position,
|
|
32
|
+
modifiers: [
|
|
33
|
+
{
|
|
34
|
+
name: "offset",
|
|
35
|
+
options: {
|
|
36
|
+
offset: [0, 8]
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
]
|
|
40
|
+
});
|
|
41
|
+
|
|
42
|
+
function show() {
|
|
43
|
+
// Make the tooltip visible
|
|
44
|
+
showToolip = "";
|
|
45
|
+
|
|
46
|
+
// Enable the event listeners
|
|
47
|
+
popper.setOptions((options) => ({
|
|
48
|
+
...options,
|
|
49
|
+
modifiers: [...options.modifiers, { name: "eventListeners", enabled: true }]
|
|
50
|
+
}));
|
|
51
|
+
|
|
52
|
+
// Update its position
|
|
53
|
+
popper.update();
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
function hide() {
|
|
57
|
+
// Hide the tooltip
|
|
58
|
+
showToolip = null;
|
|
59
|
+
|
|
60
|
+
// Disable the event listeners
|
|
61
|
+
popper.setOptions((options) => ({
|
|
62
|
+
...options,
|
|
63
|
+
modifiers: [...options.modifiers, { name: "eventListeners", enabled: false }]
|
|
64
|
+
}));
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
const showEvents = ["mouseenter", "focus"];
|
|
68
|
+
const hideEvents = ["mouseleave", "blur"];
|
|
69
|
+
|
|
70
|
+
for (const event of showEvents) wrapper.addEventListener(event, show);
|
|
71
|
+
for (const event of hideEvents) wrapper.addEventListener(event, hide);
|
|
72
|
+
|
|
73
|
+
return {
|
|
74
|
+
destroy: () => {
|
|
75
|
+
for (const event of showEvents) wrapper.removeEventListener(event, show);
|
|
76
|
+
for (const event of hideEvents) wrapper.removeEventListener(event, hide);
|
|
77
|
+
popper.destroy();
|
|
78
|
+
}
|
|
79
|
+
};
|
|
30
80
|
}
|
|
81
|
+
onMount(init);
|
|
31
82
|
</script>
|
|
32
83
|
|
|
33
|
-
<div
|
|
34
|
-
role="tooltip"
|
|
35
|
-
class="tooltip-wrapper"
|
|
36
|
-
on:mouseenter={mouseOver}
|
|
37
|
-
on:mouseleave={mouseLeave}
|
|
38
|
-
on:focusin={mouseOver}
|
|
39
|
-
on:focusout={mouseLeave}
|
|
40
|
-
>
|
|
84
|
+
<div class="tooltip-wrapper" bind:this={wrapper}>
|
|
41
85
|
<slot />
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
style:white-space={width == null ? "nowrap" : "wrap"}
|
|
48
|
-
>
|
|
49
|
-
{text}
|
|
50
|
-
</div>
|
|
51
|
-
{/if}
|
|
86
|
+
</div>
|
|
87
|
+
|
|
88
|
+
<div class="tooltip" role="tooltip" data-show={showToolip} bind:this={tooltip}>
|
|
89
|
+
{text}
|
|
90
|
+
<div class="tooltip-arrow" data-popper-arrow></div>
|
|
52
91
|
</div>
|
|
53
92
|
|
|
54
93
|
<style>
|
|
55
94
|
.tooltip-wrapper {
|
|
56
95
|
display: inline-block;
|
|
57
|
-
position: relative;
|
|
58
96
|
}
|
|
59
97
|
.tooltip {
|
|
60
|
-
position: absolute;
|
|
61
|
-
pointer-events: none;
|
|
62
98
|
font-size: 14px;
|
|
63
99
|
line-height: 1.4;
|
|
64
100
|
color: var(--ons-color-page-light);
|
|
@@ -67,61 +103,42 @@
|
|
|
67
103
|
border-radius: 4px;
|
|
68
104
|
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
|
|
69
105
|
word-break: keep-all;
|
|
106
|
+
display: none;
|
|
70
107
|
}
|
|
71
|
-
.tooltip-
|
|
72
|
-
|
|
73
|
-
left: 50%;
|
|
74
|
-
transform: translateX(-50%);
|
|
75
|
-
}
|
|
76
|
-
.tooltip-bottom {
|
|
77
|
-
top: calc(100% + 8px);
|
|
78
|
-
left: 50%;
|
|
79
|
-
transform: translateX(-50%);
|
|
80
|
-
}
|
|
81
|
-
.tooltip-left {
|
|
82
|
-
top: 50%;
|
|
83
|
-
right: calc(100% + 8px);
|
|
84
|
-
transform: translateY(-50%);
|
|
108
|
+
.tooltip[data-show] {
|
|
109
|
+
display: block;
|
|
85
110
|
}
|
|
86
|
-
.tooltip-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
111
|
+
.tooltip-arrow,
|
|
112
|
+
.tooltip-arrow::before {
|
|
113
|
+
position: absolute;
|
|
114
|
+
width: 10px;
|
|
115
|
+
height: 10px;
|
|
116
|
+
background: inherit;
|
|
90
117
|
}
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
transform: translateX(-50%);
|
|
118
|
+
|
|
119
|
+
.tooltip-arrow {
|
|
120
|
+
visibility: hidden;
|
|
95
121
|
}
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
122
|
+
|
|
123
|
+
.tooltip-arrow::before {
|
|
124
|
+
visibility: visible;
|
|
125
|
+
content: "";
|
|
126
|
+
transform: rotate(45deg);
|
|
101
127
|
}
|
|
102
|
-
|
|
103
|
-
.tooltip-
|
|
104
|
-
bottom:
|
|
105
|
-
right: 50%;
|
|
106
|
-
border-color: transparent transparent var(--ons-color-text) transparent;
|
|
107
|
-
transform: translateX(50%);
|
|
128
|
+
|
|
129
|
+
:global(.tooltip[data-popper-placement^="top"] > .tooltip-arrow) {
|
|
130
|
+
bottom: -5px;
|
|
108
131
|
}
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
border-color: var(--ons-color-text) transparent transparent transparent;
|
|
113
|
-
transform: translateX(50%);
|
|
132
|
+
|
|
133
|
+
:global(.tooltip[data-popper-placement^="bottom"] > .tooltip-arrow) {
|
|
134
|
+
top: -5px;
|
|
114
135
|
}
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
border-color: transparent transparent transparent var(--ons-color-text);
|
|
119
|
-
transform: translateY(-50%);
|
|
136
|
+
|
|
137
|
+
:global(.tooltip[data-popper-placement^="left"] > .tooltip-arrow) {
|
|
138
|
+
right: -5px;
|
|
120
139
|
}
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
border-color: transparent var(--ons-color-text) transparent transparent;
|
|
125
|
-
transform: translateY(-50%);
|
|
140
|
+
|
|
141
|
+
:global(.tooltip[data-popper-placement^="right"] > .tooltip-arrow) {
|
|
142
|
+
left: -5px;
|
|
126
143
|
}
|
|
127
144
|
</style>
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
export default class Tooltip extends SvelteComponentTyped<{
|
|
5
5
|
width?: number | null | undefined;
|
|
6
6
|
text?: string | undefined;
|
|
7
|
-
position?: "top" | "bottom" | "left" | "right" |
|
|
7
|
+
position?: "top" | "bottom" | "left" | "right" | undefined;
|
|
8
8
|
zIndex?: number | undefined;
|
|
9
9
|
}, {
|
|
10
10
|
[evt: string]: CustomEvent<any>;
|
|
@@ -20,7 +20,7 @@ declare const __propDef: {
|
|
|
20
20
|
props: {
|
|
21
21
|
width?: number | null | undefined;
|
|
22
22
|
text?: string | undefined;
|
|
23
|
-
position?: "top" | "bottom" | "left" | "right" |
|
|
23
|
+
position?: "top" | "bottom" | "left" | "right" | undefined;
|
|
24
24
|
zIndex?: number | undefined;
|
|
25
25
|
};
|
|
26
26
|
events: {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@onsvisual/svelte-components",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.51",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"dev": "vite dev",
|
|
6
6
|
"build": "npm run build:package && npm run build:docs",
|
|
@@ -37,6 +37,7 @@
|
|
|
37
37
|
"./css/main.css": "./dist/css/main.css"
|
|
38
38
|
},
|
|
39
39
|
"peerDependencies": {
|
|
40
|
+
"@popperjs/core": "^2.11.8",
|
|
40
41
|
"accessible-autocomplete": "^3.0.1",
|
|
41
42
|
"d3-scale": "^4.0.2",
|
|
42
43
|
"d3-shape": "^3.2.0",
|