@onsvisual/svelte-components 1.1.18 → 1.1.19
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.
|
@@ -15,6 +15,7 @@
|
|
|
15
15
|
selected = false,
|
|
16
16
|
custom = false,
|
|
17
17
|
hasAriaControls = false,
|
|
18
|
+
hasTooltip = true,
|
|
18
19
|
sticky = false,
|
|
19
20
|
transient = false,
|
|
20
21
|
disableHelp = false
|
|
@@ -28,6 +29,7 @@
|
|
|
28
29
|
selected?: boolean;
|
|
29
30
|
custom?: boolean;
|
|
30
31
|
hasAriaControls?: boolean;
|
|
32
|
+
hasTooltip?: boolean;
|
|
31
33
|
sticky?: boolean;
|
|
32
34
|
transient?: boolean;
|
|
33
35
|
disableHelp?: boolean;
|
|
@@ -41,6 +43,9 @@
|
|
|
41
43
|
const activeModalId = getContext("activeModalId");
|
|
42
44
|
const currentActiveId = $derived(activeModalId);
|
|
43
45
|
const isActive = $derived($currentActiveId === id);
|
|
46
|
+
const orientation = getContext("orientation");
|
|
47
|
+
const currentOrientation = $derived(orientation);
|
|
48
|
+
let showTooltip = $state(false);
|
|
44
49
|
|
|
45
50
|
// Retrieve button registry from context
|
|
46
51
|
const { register, unregister } = getContext("buttonIds");
|
|
@@ -76,7 +81,7 @@
|
|
|
76
81
|
|
|
77
82
|
<div class="toolbar-button-wrapper">
|
|
78
83
|
{#if custom}
|
|
79
|
-
<div
|
|
84
|
+
<div onclick={handleClick} bind:this={buttonElement}>
|
|
80
85
|
<slot name="custom" />
|
|
81
86
|
</div>
|
|
82
87
|
{:else}
|
|
@@ -86,14 +91,22 @@
|
|
|
86
91
|
class={`toolbar-button ${disabled ? "disabled" : ""} ${
|
|
87
92
|
isActive && !transient ? "selected" : ""
|
|
88
93
|
} ${classes}`}
|
|
89
|
-
|
|
94
|
+
onclick={handleClick}
|
|
95
|
+
onmouseover={() => (showTooltip = true)}
|
|
96
|
+
onmouseout={() => (showTooltip = false)}
|
|
97
|
+
onfocus={() => (showTooltip = true)}
|
|
98
|
+
onblur={() => (showTooltip = false)}
|
|
90
99
|
{disabled}
|
|
91
100
|
bind:this={buttonElement}
|
|
92
101
|
id={`button-${id}`}
|
|
93
102
|
aria-controls={hasAriaControls ? `panel-${id}` : undefined}
|
|
94
103
|
>
|
|
95
104
|
{#if icon}
|
|
96
|
-
<Icon
|
|
105
|
+
<Icon
|
|
106
|
+
type={icon}
|
|
107
|
+
selected={!transient ? (isActive ? true : false) : false}
|
|
108
|
+
{disabled}
|
|
109
|
+
/><span class="ons-u-vh">{label}</span>
|
|
97
110
|
{:else}
|
|
98
111
|
{label}
|
|
99
112
|
{/if}
|
|
@@ -111,6 +124,15 @@
|
|
|
111
124
|
</HelpModal>
|
|
112
125
|
{/if}
|
|
113
126
|
{/if}
|
|
127
|
+
|
|
128
|
+
{#if hasTooltip && showTooltip}
|
|
129
|
+
<div
|
|
130
|
+
class="toolbar-tooltip ons-u-fs-s"
|
|
131
|
+
class:toolbar-tooltip-vertical={$currentOrientation === "vertical"}
|
|
132
|
+
>
|
|
133
|
+
{label}
|
|
134
|
+
</div>
|
|
135
|
+
{/if}
|
|
114
136
|
</div>
|
|
115
137
|
|
|
116
138
|
<!--
|
|
@@ -164,6 +186,44 @@ button:hover:disabled {
|
|
|
164
186
|
/* opacity: 0.5; */
|
|
165
187
|
cursor: not-allowed;
|
|
166
188
|
}
|
|
189
|
+
.toolbar-tooltip {
|
|
190
|
+
position: absolute;
|
|
191
|
+
z-index: 10;
|
|
192
|
+
pointer-events: none;
|
|
193
|
+
text-align: center;
|
|
194
|
+
width: calc(100% + 40px);
|
|
195
|
+
top: calc(100% + 8px);
|
|
196
|
+
left: 50%;
|
|
197
|
+
transform: translate(-50%, 0);
|
|
198
|
+
color: var(--ons-color-page-light);
|
|
199
|
+
background: var(--ons-color-text);
|
|
200
|
+
padding: 4px;
|
|
201
|
+
border-radius: 4px;
|
|
202
|
+
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
|
|
203
|
+
}
|
|
204
|
+
.toolbar-tooltip-vertical {
|
|
205
|
+
left: calc(100% + 8px);
|
|
206
|
+
top: 50%;
|
|
207
|
+
transform: translate(0, -50%);
|
|
208
|
+
}
|
|
209
|
+
.toolbar-tooltip::before {
|
|
210
|
+
content: " ";
|
|
211
|
+
position: absolute;
|
|
212
|
+
bottom: calc(100% - 1px); /* At the top of the tooltip */
|
|
213
|
+
right: 50%;
|
|
214
|
+
border-width: 8px;
|
|
215
|
+
border-style: solid;
|
|
216
|
+
border-color: transparent transparent var(--ons-color-text) transparent;
|
|
217
|
+
pointer-events: none;
|
|
218
|
+
transform: translate(50%, 0);
|
|
219
|
+
}
|
|
220
|
+
.toolbar-tooltip-vertical::before {
|
|
221
|
+
bottom: 50%;
|
|
222
|
+
right: 100%;
|
|
223
|
+
border-width: 8px;
|
|
224
|
+
border-color: transparent var(--ons-color-text) transparent transparent;
|
|
225
|
+
transform: translate(0, 50%);
|
|
226
|
+
}
|
|
167
227
|
|
|
168
228
|
.selected {
|
|
169
229
|
background: #e9eff4;
|