@onsvisual/svelte-components 1.1.28 → 1.1.30
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.
|
@@ -132,10 +132,12 @@
|
|
|
132
132
|
}
|
|
133
133
|
|
|
134
134
|
function highlight(text, query = "") {
|
|
135
|
-
return
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
135
|
+
return typeof text === "string"
|
|
136
|
+
? text.replace(
|
|
137
|
+
new RegExp(`\\b${query.replace(/[^\w\s]/gi, "")}`, "i"),
|
|
138
|
+
(str) => `<b>${str}</b>`
|
|
139
|
+
)
|
|
140
|
+
: "";
|
|
139
141
|
}
|
|
140
142
|
|
|
141
143
|
function suggestionTemplate(result) {
|
|
@@ -12,7 +12,8 @@
|
|
|
12
12
|
disabled = false,
|
|
13
13
|
classes = "",
|
|
14
14
|
helpText = null,
|
|
15
|
-
selected = false,
|
|
15
|
+
selected = $bindable(false),
|
|
16
|
+
toggle = false,
|
|
16
17
|
custom = false,
|
|
17
18
|
hasAriaControls = false,
|
|
18
19
|
hasTooltip = true,
|
|
@@ -27,6 +28,7 @@
|
|
|
27
28
|
classes?: string;
|
|
28
29
|
helpText?: string | null;
|
|
29
30
|
selected?: boolean;
|
|
31
|
+
toggle?: boolean;
|
|
30
32
|
custom?: boolean;
|
|
31
33
|
hasAriaControls?: boolean;
|
|
32
34
|
hasTooltip?: boolean;
|
|
@@ -67,6 +69,10 @@
|
|
|
67
69
|
// If it's a transient button, just trigger the action and return
|
|
68
70
|
dispatch("click");
|
|
69
71
|
return;
|
|
72
|
+
} else if (toggle) {
|
|
73
|
+
selected = !selected;
|
|
74
|
+
dispatch("click");
|
|
75
|
+
return;
|
|
70
76
|
}
|
|
71
77
|
|
|
72
78
|
dispatch("click");
|
|
@@ -81,16 +87,50 @@
|
|
|
81
87
|
|
|
82
88
|
<div class="toolbar-button-wrapper">
|
|
83
89
|
{#if custom}
|
|
84
|
-
<div
|
|
90
|
+
<div
|
|
91
|
+
tabindex="0"
|
|
92
|
+
onclick={handleClick}
|
|
93
|
+
onmouseover={() => (showTooltip = true)}
|
|
94
|
+
onmouseout={() => (showTooltip = false)}
|
|
95
|
+
onfocus={() => (showTooltip = true)}
|
|
96
|
+
onblur={() => (showTooltip = false)}
|
|
97
|
+
bind:this={buttonElement}
|
|
98
|
+
>
|
|
85
99
|
<slot name="custom" />
|
|
86
100
|
</div>
|
|
101
|
+
{:else if toggle}
|
|
102
|
+
<input
|
|
103
|
+
type="checkbox"
|
|
104
|
+
class="ons-u-vh"
|
|
105
|
+
onclick={handleClick}
|
|
106
|
+
onfocus={() => (showTooltip = true)}
|
|
107
|
+
onblur={() => (showTooltip = false)}
|
|
108
|
+
{disabled}
|
|
109
|
+
bind:this={buttonElement}
|
|
110
|
+
id={`button-${id}`}
|
|
111
|
+
checked={selected}
|
|
112
|
+
/>
|
|
113
|
+
<label
|
|
114
|
+
for={`button-${id}`}
|
|
115
|
+
class="toolbar-button {classes}"
|
|
116
|
+
onmouseover={() => (showTooltip = true)}
|
|
117
|
+
onmouseout={() => (showTooltip = false)}
|
|
118
|
+
class:selected={selected || (isActive && !transient)}
|
|
119
|
+
>
|
|
120
|
+
{#if icon}
|
|
121
|
+
<Icon type={icon} selected={selected || (isActive && !transient)} {disabled} /><span
|
|
122
|
+
class="ons-u-vh">{label}</span
|
|
123
|
+
>
|
|
124
|
+
{:else}
|
|
125
|
+
{label}
|
|
126
|
+
{/if}
|
|
127
|
+
</label>
|
|
87
128
|
{:else}
|
|
88
129
|
<button
|
|
89
130
|
type="button"
|
|
90
131
|
aria-label={label}
|
|
91
|
-
class=
|
|
92
|
-
|
|
93
|
-
} ${classes}`}
|
|
132
|
+
class="toolbar-button {classes}"
|
|
133
|
+
class:selected={selected || (isActive && !transient)}
|
|
94
134
|
onclick={handleClick}
|
|
95
135
|
onmouseover={() => (showTooltip = true)}
|
|
96
136
|
onmouseout={() => (showTooltip = false)}
|
|
@@ -102,11 +142,9 @@
|
|
|
102
142
|
aria-controls={hasAriaControls ? `panel-${id}` : undefined}
|
|
103
143
|
>
|
|
104
144
|
{#if icon}
|
|
105
|
-
<Icon
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
{disabled}
|
|
109
|
-
/><span class="ons-u-vh">{label}</span>
|
|
145
|
+
<Icon type={icon} selected={selected || (isActive && !transient)} {disabled} /><span
|
|
146
|
+
class="ons-u-vh">{label}</span
|
|
147
|
+
>
|
|
110
148
|
{:else}
|
|
111
149
|
{label}
|
|
112
150
|
{/if}
|
|
@@ -135,37 +173,6 @@
|
|
|
135
173
|
{/if}
|
|
136
174
|
</div>
|
|
137
175
|
|
|
138
|
-
<!--
|
|
139
|
-
|
|
140
|
-
/* /* Slightly darker gray when clicked */
|
|
141
|
-
|
|
142
|
-
/*
|
|
143
|
-
button:active {
|
|
144
|
-
background-color: #d6d6d6;
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
button.active {
|
|
148
|
-
background-color: #ddd; /* Selected button background */
|
|
149
|
-
border: 2px solid #333; /* Active button border */
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
button:hover:active {
|
|
153
|
-
background-color: #ccc; /* Slightly more contrast when active */
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
button:disabled {
|
|
157
|
-
opacity: 0.5;
|
|
158
|
-
cursor: not-allowed;
|
|
159
|
-
background-color: #f2f2f2;
|
|
160
|
-
border: 1px solid #ddd;
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
button:hover:disabled {
|
|
164
|
-
background-color: #f2f2f2; /* Keep it the same so disabled buttons don’t change on hover */
|
|
165
|
-
border: 1px solid #ddd;
|
|
166
|
-
} */
|
|
167
|
-
-->
|
|
168
|
-
|
|
169
176
|
<style>
|
|
170
177
|
.toolbar-button-wrapper {
|
|
171
178
|
position: relative;
|
|
@@ -182,7 +189,8 @@ button:hover:disabled {
|
|
|
182
189
|
flex-grow: 0;
|
|
183
190
|
}
|
|
184
191
|
|
|
185
|
-
.toolbar-button
|
|
192
|
+
button.toolbar-button[disabled="disabled"],
|
|
193
|
+
button.toolbar-button:disabled {
|
|
186
194
|
/* opacity: 0.5; */
|
|
187
195
|
cursor: not-allowed;
|
|
188
196
|
}
|
|
@@ -230,15 +238,19 @@ button:hover:disabled {
|
|
|
230
238
|
border-radius: 8px;
|
|
231
239
|
}
|
|
232
240
|
|
|
233
|
-
button:hover {
|
|
241
|
+
.toolbar-button:hover {
|
|
234
242
|
background-color: #f5f5f6;
|
|
235
243
|
border-radius: 8px;
|
|
236
244
|
}
|
|
237
245
|
|
|
238
|
-
button:focus
|
|
246
|
+
.toolbar-button:focus,
|
|
247
|
+
input:focus + .toolbar-button {
|
|
239
248
|
outline: 2px solid #fbc900;
|
|
240
249
|
outline-offset: 2px;
|
|
241
250
|
box-shadow: 0 0 2px 2px #222222;
|
|
242
251
|
border-radius: 8px;
|
|
243
252
|
}
|
|
253
|
+
input[type="checkbox"] {
|
|
254
|
+
appearance: none;
|
|
255
|
+
}
|
|
244
256
|
</style>
|