@vaadin/integer-field 24.3.0-alpha3 → 24.3.0-alpha5

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.
Files changed (5) hide show
  1. package/package.json +7 -7
  2. package/src/vaadin-integer-field.d.ts +27 -0
  3. package/src/vaadin-integer-field.js +20 -0
  4. package/web-types.json +2 -2
  5. package/web-types.lit.json +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/integer-field",
3
- "version": "24.3.0-alpha3",
3
+ "version": "24.3.0-alpha5",
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-alpha3",
39
- "@vaadin/number-field": "24.3.0-alpha3",
40
- "@vaadin/vaadin-lumo-styles": "24.3.0-alpha3",
41
- "@vaadin/vaadin-material-styles": "24.3.0-alpha3"
38
+ "@vaadin/component-base": "24.3.0-alpha5",
39
+ "@vaadin/number-field": "24.3.0-alpha5",
40
+ "@vaadin/vaadin-lumo-styles": "24.3.0-alpha5",
41
+ "@vaadin/vaadin-material-styles": "24.3.0-alpha5"
42
42
  },
43
43
  "devDependencies": {
44
44
  "@esm-bundle/chai": "^4.3.4",
45
- "@vaadin/testing-helpers": "^0.5.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": "9162ca5fb9879dbcc8c68a77c1acb3af2c497a15"
52
+ "gitHead": "b1fb1be6cc5dc69a82952571fbbda4ffd8e7527c"
53
53
  }
package/src/vaadin-integer-field.d.ts CHANGED
@@ -12,6 +12,11 @@ export type IntegerFieldChangeEvent = Event & {
12
12
  target: IntegerField;
13
13
  };
14
14
 
15
+ /**
16
+ * Fired when the user commits an unparsable value change and there is no change event.
17
+ */
18
+ export type IntegerFieldUnparsableChangeEvent = CustomEvent;
19
+
15
20
  /**
16
21
  * Fired when the `invalid` property changes.
17
22
  */
@@ -28,6 +33,8 @@ export type IntegerFieldValueChangedEvent = CustomEvent<{ value: string }>;
28
33
  export type IntegerFieldValidatedEvent = CustomEvent<{ valid: boolean }>;
29
34
 
30
35
  export interface IntegerFieldCustomEventMap {
36
+ 'unparsable-change': IntegerFieldUnparsableChangeEvent;
37
+
31
38
  'invalid-changed': IntegerFieldInvalidChangedEvent;
32
39
 
33
40
  'value-changed': IntegerFieldValueChangedEvent;
@@ -60,8 +67,28 @@ export interface IntegerFieldEventMap extends HTMLElementEventMap, IntegerFieldC
60
67
  *
61
68
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
62
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
+ *
63
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.
64
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.
65
92
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
66
93
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
67
94
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
package/src/vaadin-integer-field.js CHANGED
@@ -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-alpha3",
4
+ "version": "24.3.0-alpha5",
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-alpha3/#/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.",
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-alpha5/#/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",
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-alpha3",
4
+ "version": "24.3.0-alpha5",
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-alpha3/#/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.",
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-alpha5/#/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
  {