@onsvisual/svelte-components 1.1.29 → 1.1.31
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/components/Input/Input.svelte +7 -0
- package/dist/components/Input/Input.svelte.d.ts +2 -0
- package/dist/components/Textarea/Textarea.svelte +12 -0
- package/dist/components/Textarea/Textarea.svelte.d.ts +4 -0
- package/dist/components/Toolbar/ToolbarButton.svelte +56 -44
- package/package.json +1 -1
|
@@ -68,6 +68,11 @@
|
|
|
68
68
|
* @type {boolean}
|
|
69
69
|
*/
|
|
70
70
|
export let numeric = false;
|
|
71
|
+
/**
|
|
72
|
+
* Set to `true` to make the input read-only
|
|
73
|
+
* @type {boolean}
|
|
74
|
+
*/
|
|
75
|
+
export let readonly = false;
|
|
71
76
|
/**
|
|
72
77
|
* Set to `true` to give the input a disabled state
|
|
73
78
|
* @type {boolean}
|
|
@@ -121,6 +126,7 @@
|
|
|
121
126
|
aria-labelledby="{id} {id}-unit"
|
|
122
127
|
aria-describedby={description ? `${id}-description-hint` : null}
|
|
123
128
|
{disabled}
|
|
129
|
+
{readonly}
|
|
124
130
|
on:change={(e) => dispatch("change", { value, e })}
|
|
125
131
|
on:input={(e) => dispatch("input", { value, e })}
|
|
126
132
|
on:blur={(e) => dispatch("blur", { value, e })}
|
|
@@ -149,6 +155,7 @@
|
|
|
149
155
|
class:ons-input--error={error}
|
|
150
156
|
aria-describedby={description ? `${id}-description-hint` : null}
|
|
151
157
|
{disabled}
|
|
158
|
+
{readonly}
|
|
152
159
|
on:change={(e) => dispatch("change", { value, e })}
|
|
153
160
|
on:input={(e) => dispatch("input", { value, e })}
|
|
154
161
|
on:blur={(e) => dispatch("blur", { value, e })}
|
|
@@ -18,6 +18,7 @@ export default class Input extends SvelteComponentTyped<{
|
|
|
18
18
|
prefix?: string | null | undefined;
|
|
19
19
|
suffix?: string | null | undefined;
|
|
20
20
|
unitLabel?: string | undefined;
|
|
21
|
+
readonly?: boolean | undefined;
|
|
21
22
|
}, {
|
|
22
23
|
change: CustomEvent<any>;
|
|
23
24
|
input: CustomEvent<any>;
|
|
@@ -48,6 +49,7 @@ declare const __propDef: {
|
|
|
48
49
|
prefix?: string | null | undefined;
|
|
49
50
|
suffix?: string | null | undefined;
|
|
50
51
|
unitLabel?: string | undefined;
|
|
52
|
+
readonly?: boolean | undefined;
|
|
51
53
|
};
|
|
52
54
|
events: {
|
|
53
55
|
change: CustomEvent<any>;
|
|
@@ -48,6 +48,16 @@
|
|
|
48
48
|
* @type {number}
|
|
49
49
|
*/
|
|
50
50
|
export let width = 30;
|
|
51
|
+
/**
|
|
52
|
+
* Set to `true` to make the input read-only
|
|
53
|
+
* @type {boolean}
|
|
54
|
+
*/
|
|
55
|
+
export let readonly = false;
|
|
56
|
+
/**
|
|
57
|
+
* Set to `true` to give the input a disabled state
|
|
58
|
+
* @type {boolean}
|
|
59
|
+
*/
|
|
60
|
+
export let disabled = false;
|
|
51
61
|
/**
|
|
52
62
|
* Optional: Set an additional CSS class for the component
|
|
53
63
|
* @type {string|null}
|
|
@@ -82,6 +92,8 @@
|
|
|
82
92
|
maxlength={charLimit}
|
|
83
93
|
data-char-limit-ref="{id}-lim"
|
|
84
94
|
aria-describedby="textarea-char-limit-lim"
|
|
95
|
+
{disabled}
|
|
96
|
+
{readonly}
|
|
85
97
|
></textarea>
|
|
86
98
|
{#if Number.isInteger(remaining)}
|
|
87
99
|
<span
|
|
@@ -7,10 +7,12 @@ export default class Textarea extends SvelteComponentTyped<{
|
|
|
7
7
|
width?: number | undefined;
|
|
8
8
|
label?: string | null | undefined;
|
|
9
9
|
name?: string | null | undefined;
|
|
10
|
+
disabled?: boolean | undefined;
|
|
10
11
|
hideLabel?: boolean | undefined;
|
|
11
12
|
description?: string | null | undefined;
|
|
12
13
|
value?: string | null | undefined;
|
|
13
14
|
charLimit?: number | null | undefined;
|
|
15
|
+
readonly?: boolean | undefined;
|
|
14
16
|
rows?: number | undefined;
|
|
15
17
|
}, {
|
|
16
18
|
[evt: string]: CustomEvent<any>;
|
|
@@ -27,10 +29,12 @@ declare const __propDef: {
|
|
|
27
29
|
width?: number | undefined;
|
|
28
30
|
label?: string | null | undefined;
|
|
29
31
|
name?: string | null | undefined;
|
|
32
|
+
disabled?: boolean | undefined;
|
|
30
33
|
hideLabel?: boolean | undefined;
|
|
31
34
|
description?: string | null | undefined;
|
|
32
35
|
value?: string | null | undefined;
|
|
33
36
|
charLimit?: number | null | undefined;
|
|
37
|
+
readonly?: boolean | undefined;
|
|
34
38
|
rows?: number | undefined;
|
|
35
39
|
};
|
|
36
40
|
events: {
|
|
@@ -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>
|