@spectrum-web-components/number-field 0.47.1 → 0.47.2
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/README.md +38 -0
- package/package.json +9 -9
package/README.md
CHANGED
|
@@ -229,3 +229,41 @@ If the user types a value that is between two steps and blurs the input, the val
|
|
|
229
229
|
step="3"
|
|
230
230
|
></sp-number-field>
|
|
231
231
|
```
|
|
232
|
+
|
|
233
|
+
## Default value
|
|
234
|
+
|
|
235
|
+
The `<sp-number-field>` component doesn't manage a default value by itself. This means that consumers can set the value of the number-field as an empty string by clearing the input. If we want the number-field to reset to a `default-value` when the user clears the input, we can listen for the `change` event on the number-field component and set its value to the desired `default-value` if the input is empty.
|
|
236
|
+
|
|
237
|
+
```html-live
|
|
238
|
+
<sp-field-label for="default">
|
|
239
|
+
Default value of this number field is 42
|
|
240
|
+
</sp-field-label>
|
|
241
|
+
<sp-number-field id="default" value="20"></sp-number-field>
|
|
242
|
+
|
|
243
|
+
<script type="module">
|
|
244
|
+
customElements.whenDefined('sp-number-field').then(() => {
|
|
245
|
+
const numberField = document.querySelector('#default');
|
|
246
|
+
|
|
247
|
+
numberField.addEventListener('change', (event) => {
|
|
248
|
+
const target = event.target;
|
|
249
|
+
if (isNaN(target.value)) {
|
|
250
|
+
target.value = '42';
|
|
251
|
+
}
|
|
252
|
+
});
|
|
253
|
+
});
|
|
254
|
+
</script>
|
|
255
|
+
|
|
256
|
+
```
|
|
257
|
+
|
|
258
|
+
<script type="module">
|
|
259
|
+
customElements.whenDefined('sp-number-field').then(() => {
|
|
260
|
+
const numberField = document.querySelector('#default');
|
|
261
|
+
|
|
262
|
+
numberField.addEventListener('change', (event) => {
|
|
263
|
+
const target = event.target;
|
|
264
|
+
if (isNaN(target.value)) {
|
|
265
|
+
target.value = '42';
|
|
266
|
+
}
|
|
267
|
+
});
|
|
268
|
+
});
|
|
269
|
+
</script>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/number-field",
|
|
3
|
-
"version": "0.47.
|
|
3
|
+
"version": "0.47.2",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -58,13 +58,13 @@
|
|
|
58
58
|
],
|
|
59
59
|
"dependencies": {
|
|
60
60
|
"@internationalized/number": "^3.1.0",
|
|
61
|
-
"@spectrum-web-components/base": "^0.47.
|
|
62
|
-
"@spectrum-web-components/icon": "^0.47.
|
|
63
|
-
"@spectrum-web-components/icons-ui": "^0.47.
|
|
64
|
-
"@spectrum-web-components/infield-button": "^0.47.
|
|
65
|
-
"@spectrum-web-components/reactive-controllers": "^0.47.
|
|
66
|
-
"@spectrum-web-components/shared": "^0.47.
|
|
67
|
-
"@spectrum-web-components/textfield": "^0.47.
|
|
61
|
+
"@spectrum-web-components/base": "^0.47.2",
|
|
62
|
+
"@spectrum-web-components/icon": "^0.47.2",
|
|
63
|
+
"@spectrum-web-components/icons-ui": "^0.47.2",
|
|
64
|
+
"@spectrum-web-components/infield-button": "^0.47.2",
|
|
65
|
+
"@spectrum-web-components/reactive-controllers": "^0.47.2",
|
|
66
|
+
"@spectrum-web-components/shared": "^0.47.2",
|
|
67
|
+
"@spectrum-web-components/textfield": "^0.47.2"
|
|
68
68
|
},
|
|
69
69
|
"devDependencies": {
|
|
70
70
|
"@formatjs/intl-numberformat": "^8.3.5",
|
|
@@ -76,5 +76,5 @@
|
|
|
76
76
|
"./sp-*.js",
|
|
77
77
|
"./**/*.dev.js"
|
|
78
78
|
],
|
|
79
|
-
"gitHead": "
|
|
79
|
+
"gitHead": "2784e4c65da6a65b6bc748d785154714c8498a8e"
|
|
80
80
|
}
|