@vaadin/integer-field 24.3.0-alpha1 → 24.3.0-alpha10
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/package.json +7 -7
- package/src/vaadin-integer-field.d.ts +26 -7
- package/src/vaadin-integer-field.js +20 -0
- package/web-types.json +2 -28
- package/web-types.lit.json +2 -16
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/integer-field",
|
|
3
|
-
"version": "24.3.0-
|
|
3
|
+
"version": "24.3.0-alpha10",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -35,19 +35,19 @@
|
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@polymer/polymer": "^3.0.0",
|
|
38
|
-
"@vaadin/component-base": "24.3.0-
|
|
39
|
-
"@vaadin/number-field": "24.3.0-
|
|
40
|
-
"@vaadin/vaadin-lumo-styles": "24.3.0-
|
|
41
|
-
"@vaadin/vaadin-material-styles": "24.3.0-
|
|
38
|
+
"@vaadin/component-base": "24.3.0-alpha10",
|
|
39
|
+
"@vaadin/number-field": "24.3.0-alpha10",
|
|
40
|
+
"@vaadin/vaadin-lumo-styles": "24.3.0-alpha10",
|
|
41
|
+
"@vaadin/vaadin-material-styles": "24.3.0-alpha10"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
44
|
"@esm-bundle/chai": "^4.3.4",
|
|
45
|
-
"@vaadin/testing-helpers": "^0.
|
|
45
|
+
"@vaadin/testing-helpers": "^0.6.0",
|
|
46
46
|
"sinon": "^13.0.2"
|
|
47
47
|
},
|
|
48
48
|
"web-types": [
|
|
49
49
|
"web-types.json",
|
|
50
50
|
"web-types.lit.json"
|
|
51
51
|
],
|
|
52
|
-
"gitHead": "
|
|
52
|
+
"gitHead": "0271523d93fe5df0425ff64206886614f3c6f401"
|
|
53
53
|
}
|
|
@@ -13,14 +13,14 @@ export type IntegerFieldChangeEvent = Event & {
|
|
|
13
13
|
};
|
|
14
14
|
|
|
15
15
|
/**
|
|
16
|
-
* Fired when the
|
|
16
|
+
* Fired when the user commits an unparsable value change and there is no change event.
|
|
17
17
|
*/
|
|
18
|
-
export type
|
|
18
|
+
export type IntegerFieldUnparsableChangeEvent = CustomEvent;
|
|
19
19
|
|
|
20
20
|
/**
|
|
21
|
-
* Fired when the `
|
|
21
|
+
* Fired when the `invalid` property changes.
|
|
22
22
|
*/
|
|
23
|
-
export type
|
|
23
|
+
export type IntegerFieldInvalidChangedEvent = CustomEvent<{ value: boolean }>;
|
|
24
24
|
|
|
25
25
|
/**
|
|
26
26
|
* Fired when the `value` property changes.
|
|
@@ -33,9 +33,9 @@ export type IntegerFieldValueChangedEvent = CustomEvent<{ value: string }>;
|
|
|
33
33
|
export type IntegerFieldValidatedEvent = CustomEvent<{ valid: boolean }>;
|
|
34
34
|
|
|
35
35
|
export interface IntegerFieldCustomEventMap {
|
|
36
|
-
'
|
|
36
|
+
'unparsable-change': IntegerFieldUnparsableChangeEvent;
|
|
37
37
|
|
|
38
|
-
'
|
|
38
|
+
'invalid-changed': IntegerFieldInvalidChangedEvent;
|
|
39
39
|
|
|
40
40
|
'value-changed': IntegerFieldValueChangedEvent;
|
|
41
41
|
|
|
@@ -67,10 +67,29 @@ export interface IntegerFieldEventMap extends HTMLElementEventMap, IntegerFieldC
|
|
|
67
67
|
*
|
|
68
68
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
69
69
|
*
|
|
70
|
+
* ### Change events
|
|
71
|
+
*
|
|
72
|
+
* Depending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,
|
|
73
|
+
* the component can fire either a `change` event or an `unparsable-change` event:
|
|
74
|
+
*
|
|
75
|
+
* Value change | Event
|
|
76
|
+
* :------------------------|:------------------
|
|
77
|
+
* empty => parsable | change
|
|
78
|
+
* empty => unparsable | unparsable-change
|
|
79
|
+
* parsable => empty | change
|
|
80
|
+
* parsable => parsable | change
|
|
81
|
+
* parsable => unparsable | change
|
|
82
|
+
* unparsable => empty | unparsable-change
|
|
83
|
+
* unparsable => parsable | change
|
|
84
|
+
* unparsable => unparsable | -
|
|
85
|
+
*
|
|
86
|
+
* Note, there is currently no way to detect unparsable => unparsable changes because the browser
|
|
87
|
+
* doesn't provide access to unparsable values of native [type=number] inputs.
|
|
88
|
+
*
|
|
70
89
|
* @fires {Event} input - Fired when the value is changed by the user: on every typing keystroke, and the value is cleared using the clear button.
|
|
71
90
|
* @fires {Event} change - Fired when the user commits a value change.
|
|
91
|
+
* @fires {Event} unparsable-change - Fired when the user commits an unparsable value change and there is no change event.
|
|
72
92
|
* @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
|
|
73
|
-
* @fires {CustomEvent} dirty-changed - Fired when the `dirty` property changes.
|
|
74
93
|
* @fires {CustomEvent} value-changed - Fired when the `value` property changes.
|
|
75
94
|
* @fires {CustomEvent} validated - Fired whenever the field is validated.
|
|
76
95
|
*/
|
|
@@ -27,8 +27,28 @@ import { NumberField } from '@vaadin/number-field/src/vaadin-number-field.js';
|
|
|
27
27
|
*
|
|
28
28
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
29
29
|
*
|
|
30
|
+
* ### Change events
|
|
31
|
+
*
|
|
32
|
+
* Depending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,
|
|
33
|
+
* the component can fire either a `change` event or an `unparsable-change` event:
|
|
34
|
+
*
|
|
35
|
+
* Value change | Event
|
|
36
|
+
* :------------------------|:------------------
|
|
37
|
+
* empty => parsable | change
|
|
38
|
+
* empty => unparsable | unparsable-change
|
|
39
|
+
* parsable => empty | change
|
|
40
|
+
* parsable => parsable | change
|
|
41
|
+
* parsable => unparsable | change
|
|
42
|
+
* unparsable => empty | unparsable-change
|
|
43
|
+
* unparsable => parsable | change
|
|
44
|
+
* unparsable => unparsable | -
|
|
45
|
+
*
|
|
46
|
+
* Note, there is currently no way to detect unparsable => unparsable changes because the browser
|
|
47
|
+
* doesn't provide access to unparsable values of native [type=number] inputs.
|
|
48
|
+
*
|
|
30
49
|
* @fires {Event} input - Fired when the value is changed by the user: on every typing keystroke, and the value is cleared using the clear button.
|
|
31
50
|
* @fires {Event} change - Fired when the user commits a value change.
|
|
51
|
+
* @fires {Event} unparsable-change - Fired when the user commits an unparsable value change and there is no change event.
|
|
32
52
|
* @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
|
|
33
53
|
* @fires {CustomEvent} value-changed - Fired when the `value` property changes.
|
|
34
54
|
* @fires {CustomEvent} validated - Fired whenever the field is validated.
|
package/web-types.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/integer-field",
|
|
4
|
-
"version": "24.3.0-
|
|
4
|
+
"version": "24.3.0-alpha10",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-integer-field",
|
|
11
|
-
"description": "`<vaadin-integer-field>` is an input field web component that only accepts entering integer numbers.\n\n```html\n<vaadin-integer-field label=\"X\"></vaadin-integer-field>\n```\n\n### Styling\n\n`<vaadin-integer-field>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-
|
|
11
|
+
"description": "`<vaadin-integer-field>` is an input field web component that only accepts entering integer numbers.\n\n```html\n<vaadin-integer-field label=\"X\"></vaadin-integer-field>\n```\n\n### Styling\n\n`<vaadin-integer-field>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha10/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name | Description\n------------------|-------------------------\n`increase-button` | Increase (\"plus\") button\n`decrease-button` | Decrease (\"minus\") button\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change | Event\n:------------------------|:------------------\nempty => parsable | change\nempty => unparsable | unparsable-change\nparsable => empty | change\nparsable => parsable | change\nparsable => unparsable | change\nunparsable => empty | unparsable-change\nunparsable => parsable | change\nunparsable => unparsable | -\n\nNote, there is currently no way to detect unparsable => unparsable changes because the browser\ndoesn't provide access to unparsable values of native [type=number] inputs.",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "disabled",
|
|
@@ -120,17 +120,6 @@
|
|
|
120
120
|
]
|
|
121
121
|
}
|
|
122
122
|
},
|
|
123
|
-
{
|
|
124
|
-
"name": "dirty",
|
|
125
|
-
"description": "Whether the field is dirty.\n\nThe field is automatically marked as dirty once the user triggers\nan `input` or `change` event. Additionally, the field can be manually\nmarked as dirty by setting the property to `true`.",
|
|
126
|
-
"value": {
|
|
127
|
-
"type": [
|
|
128
|
-
"boolean",
|
|
129
|
-
"null",
|
|
130
|
-
"undefined"
|
|
131
|
-
]
|
|
132
|
-
}
|
|
133
|
-
},
|
|
134
123
|
{
|
|
135
124
|
"name": "clear-button-visible",
|
|
136
125
|
"description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
|
|
@@ -407,17 +396,6 @@
|
|
|
407
396
|
]
|
|
408
397
|
}
|
|
409
398
|
},
|
|
410
|
-
{
|
|
411
|
-
"name": "dirty",
|
|
412
|
-
"description": "Whether the field is dirty.\n\nThe field is automatically marked as dirty once the user triggers\nan `input` or `change` event. Additionally, the field can be manually\nmarked as dirty by setting the property to `true`.",
|
|
413
|
-
"value": {
|
|
414
|
-
"type": [
|
|
415
|
-
"boolean",
|
|
416
|
-
"null",
|
|
417
|
-
"undefined"
|
|
418
|
-
]
|
|
419
|
-
}
|
|
420
|
-
},
|
|
421
399
|
{
|
|
422
400
|
"name": "clearButtonVisible",
|
|
423
401
|
"description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
|
|
@@ -591,10 +569,6 @@
|
|
|
591
569
|
{
|
|
592
570
|
"name": "value-changed",
|
|
593
571
|
"description": "Fired when the `value` property changes."
|
|
594
|
-
},
|
|
595
|
-
{
|
|
596
|
-
"name": "dirty-changed",
|
|
597
|
-
"description": "Fired when the `dirty` property changes."
|
|
598
572
|
}
|
|
599
573
|
]
|
|
600
574
|
}
|
package/web-types.lit.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/integer-field",
|
|
4
|
-
"version": "24.3.0-
|
|
4
|
+
"version": "24.3.0-alpha10",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"elements": [
|
|
17
17
|
{
|
|
18
18
|
"name": "vaadin-integer-field",
|
|
19
|
-
"description": "`<vaadin-integer-field>` is an input field web component that only accepts entering integer numbers.\n\n```html\n<vaadin-integer-field label=\"X\"></vaadin-integer-field>\n```\n\n### Styling\n\n`<vaadin-integer-field>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-
|
|
19
|
+
"description": "`<vaadin-integer-field>` is an input field web component that only accepts entering integer numbers.\n\n```html\n<vaadin-integer-field label=\"X\"></vaadin-integer-field>\n```\n\n### Styling\n\n`<vaadin-integer-field>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.3.0-alpha10/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name | Description\n------------------|-------------------------\n`increase-button` | Increase (\"plus\") button\n`decrease-button` | Decrease (\"minus\") button\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change | Event\n:------------------------|:------------------\nempty => parsable | change\nempty => unparsable | unparsable-change\nparsable => empty | change\nparsable => parsable | change\nparsable => unparsable | change\nunparsable => empty | unparsable-change\nunparsable => parsable | change\nunparsable => unparsable | -\n\nNote, there is currently no way to detect unparsable => unparsable changes because the browser\ndoesn't provide access to unparsable values of native [type=number] inputs.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|
|
@@ -47,13 +47,6 @@
|
|
|
47
47
|
"kind": "expression"
|
|
48
48
|
}
|
|
49
49
|
},
|
|
50
|
-
{
|
|
51
|
-
"name": "?dirty",
|
|
52
|
-
"description": "Whether the field is dirty.\n\nThe field is automatically marked as dirty once the user triggers\nan `input` or `change` event. Additionally, the field can be manually\nmarked as dirty by setting the property to `true`.",
|
|
53
|
-
"value": {
|
|
54
|
-
"kind": "expression"
|
|
55
|
-
}
|
|
56
|
-
},
|
|
57
50
|
{
|
|
58
51
|
"name": "?clearButtonVisible",
|
|
59
52
|
"description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
|
|
@@ -228,13 +221,6 @@
|
|
|
228
221
|
"value": {
|
|
229
222
|
"kind": "expression"
|
|
230
223
|
}
|
|
231
|
-
},
|
|
232
|
-
{
|
|
233
|
-
"name": "@dirty-changed",
|
|
234
|
-
"description": "Fired when the `dirty` property changes.",
|
|
235
|
-
"value": {
|
|
236
|
-
"kind": "expression"
|
|
237
|
-
}
|
|
238
224
|
}
|
|
239
225
|
]
|
|
240
226
|
}
|