@onsvisual/svelte-components 1.1.18 → 1.1.20
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.
|
@@ -433,7 +433,7 @@
|
|
|
433
433
|
class="ons-btn ons-u-fs-s--b ons-js-toggle-header-search ons-u-db-no-js_disabled ons-btn--search-icon ons-btn--search"
|
|
434
434
|
aria-label="Toggle search"
|
|
435
435
|
aria-controls="search"
|
|
436
|
-
aria-expanded="
|
|
436
|
+
aria-expanded="false"
|
|
437
437
|
aria-disabled="true"
|
|
438
438
|
>
|
|
439
439
|
<span class="ons-btn__inner"
|
|
@@ -639,4 +639,7 @@
|
|
|
639
639
|
.ons-header__grid-top .ons-header__menu-links {
|
|
640
640
|
width: auto;
|
|
641
641
|
}
|
|
642
|
+
.ons-header__language {
|
|
643
|
+
display: block;
|
|
644
|
+
}
|
|
642
645
|
</style>
|
|
@@ -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;
|