@vaadin/checkbox-group 23.2.0-dev.8a7678b70 → 23.2.0-rc1

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 +14 -8
  2. package/src/vaadin-checkbox-group.d.ts +14 -6
  3. package/src/vaadin-checkbox-group.js +13 -13
  4. package/web-types.json +184 -0
  5. package/web-types.lit.json +90 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/checkbox-group",
3
- "version": "23.2.0-dev.8a7678b70",
3
+ "version": "23.2.0-rc1",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -23,7 +23,9 @@
23
23
  "src",
24
24
  "theme",
25
25
  "vaadin-*.d.ts",
26
- "vaadin-*.js"
26
+ "vaadin-*.js",
27
+ "web-types.json",
28
+ "web-types.lit.json"
27
29
  ],
28
30
  "keywords": [
29
31
  "Vaadin",
@@ -34,16 +36,20 @@
34
36
  ],
35
37
  "dependencies": {
36
38
  "@polymer/polymer": "^3.0.0",
37
- "@vaadin/checkbox": "23.2.0-dev.8a7678b70",
38
- "@vaadin/component-base": "23.2.0-dev.8a7678b70",
39
- "@vaadin/vaadin-lumo-styles": "23.2.0-dev.8a7678b70",
40
- "@vaadin/vaadin-material-styles": "23.2.0-dev.8a7678b70",
41
- "@vaadin/vaadin-themable-mixin": "23.2.0-dev.8a7678b70"
39
+ "@vaadin/checkbox": "23.2.0-rc1",
40
+ "@vaadin/component-base": "23.2.0-rc1",
41
+ "@vaadin/vaadin-lumo-styles": "23.2.0-rc1",
42
+ "@vaadin/vaadin-material-styles": "23.2.0-rc1",
43
+ "@vaadin/vaadin-themable-mixin": "23.2.0-rc1"
42
44
  },
43
45
  "devDependencies": {
44
46
  "@esm-bundle/chai": "^4.3.4",
45
47
  "@vaadin/testing-helpers": "^0.3.2",
46
48
  "sinon": "^13.0.2"
47
49
  },
48
- "gitHead": "85b403f96d8282f262322b56c0ff4289f843d02a"
50
+ "web-types": [
51
+ "web-types.json",
52
+ "web-types.lit.json"
53
+ ],
54
+ "gitHead": "e78a1f2fe6f42d78cefa3f48085b09a3033c9588"
49
55
  }
package/src/vaadin-checkbox-group.d.ts CHANGED
@@ -19,10 +19,17 @@ export type CheckboxGroupInvalidChangedEvent = CustomEvent<{ value: boolean }>;
19
19
  */
20
20
  export type CheckboxGroupValueChangedEvent = CustomEvent<{ value: string[] }>;
21
21
 
22
+ /**
23
+ * Fired whenever the field is validated.
24
+ */
25
+ export type CheckboxGroupValidatedEvent = CustomEvent<{ valid: boolean }>;
26
+
22
27
  export interface CheckboxGroupCustomEventMap {
23
28
  'invalid-changed': CheckboxGroupInvalidChangedEvent;
24
29
 
25
30
  'value-changed': CheckboxGroupValueChangedEvent;
31
+
32
+ validated: CheckboxGroupValidatedEvent;
26
33
  }
27
34
 
28
35
  export interface CheckboxGroupEventMap extends HTMLElementEventMap, CheckboxGroupCustomEventMap {}
@@ -66,26 +73,27 @@ export interface CheckboxGroupEventMap extends HTMLElementEventMap, CheckboxGrou
66
73
  *
67
74
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
68
75
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
76
+ * @fires {CustomEvent} validated - Fired whenever the field is validated.
69
77
  */
70
78
  declare class CheckboxGroup extends FieldMixin(FocusMixin(DisabledMixin(ElementMixin(ThemableMixin(HTMLElement))))) {
71
79
  /**
72
- * The value of the checkbox group.
73
- * Note: toggling the checkboxes modifies the value by creating new
74
- * array each time, to override Polymer dirty-checking for arrays.
75
- * You can still use Polymer array mutation methods to update the value.
80
+ * An array containing values of the currently checked checkboxes.
81
+ *
82
+ * The array is immutable so toggling checkboxes always results in
83
+ * creating a new array.
76
84
  */
77
85
  value: string[];
78
86
 
79
87
  addEventListener<K extends keyof CheckboxGroupEventMap>(
80
88
  type: K,
81
89
  listener: (this: CheckboxGroup, ev: CheckboxGroupEventMap[K]) => void,
82
- options?: boolean | AddEventListenerOptions,
90
+ options?: AddEventListenerOptions | boolean,
83
91
  ): void;
84
92
 
85
93
  removeEventListener<K extends keyof CheckboxGroupEventMap>(
86
94
  type: K,
87
95
  listener: (this: CheckboxGroup, ev: CheckboxGroupEventMap[K]) => void,
88
- options?: boolean | EventListenerOptions,
96
+ options?: EventListenerOptions | boolean,
89
97
  ): void;
90
98
  }
91
99
 
package/src/vaadin-checkbox-group.js CHANGED
@@ -51,6 +51,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
51
51
  *
52
52
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
53
53
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
54
+ * @fires {CustomEvent} validated - Fired whenever the field is validated.
54
55
  *
55
56
  * @extends HTMLElement
56
57
  * @mixes ThemableMixin
@@ -116,24 +117,22 @@ class CheckboxGroup extends FieldMixin(FocusMixin(DisabledMixin(ElementMixin(The
116
117
  static get properties() {
117
118
  return {
118
119
  /**
119
- * The value of the checkbox group.
120
- * Note: toggling the checkboxes modifies the value by creating new
121
- * array each time, to override Polymer dirty-checking for arrays.
122
- * You can still use Polymer array mutation methods to update the value.
120
+ * An array containing values of the currently checked checkboxes.
121
+ *
122
+ * The array is immutable so toggling checkboxes always results in
123
+ * creating a new array.
124
+ *
123
125
  * @type {!Array<!string>}
124
126
  */
125
127
  value: {
126
128
  type: Array,
127
129
  value: () => [],
128
130
  notify: true,
131
+ observer: '__valueChanged',
129
132
  },
130
133
  };
131
134
  }
132
135
 
133
- static get observers() {
134
- return ['__valueChanged(value, value.splices)'];
135
- }
136
-
137
136
  constructor() {
138
137
  super();
139
138
 
@@ -304,23 +303,24 @@ class CheckboxGroup extends FieldMixin(FocusMixin(DisabledMixin(ElementMixin(The
304
303
 
305
304
  /**
306
305
  * @param {string | null | undefined} value
306
+ * @param {string | null | undefined} oldValue
307
307
  * @private
308
308
  */
309
- __valueChanged(value) {
309
+ __valueChanged(value, oldValue) {
310
310
  // Setting initial value to empty array, skip validation
311
- if (value.length === 0 && this.__oldValue === undefined) {
311
+ if (value.length === 0 && oldValue === undefined) {
312
312
  return;
313
313
  }
314
314
 
315
- this.__oldValue = value;
316
-
317
315
  this.toggleAttribute('has-value', value.length > 0);
318
316
 
319
317
  this.__checkboxes.forEach((checkbox) => {
320
318
  checkbox.checked = value.includes(checkbox.value);
321
319
  });
322
320
 
323
- this.validate();
321
+ if (oldValue !== undefined) {
322
+ this.validate();
323
+ }
324
324
  }
325
325
 
326
326
  /**
package/web-types.json ADDED
@@ -0,0 +1,184 @@
1
+ {
2
+ "$schema": "https://json.schemastore.org/web-types",
3
+ "name": "@vaadin/checkbox-group",
4
+ "version": "23.2.0-rc1",
5
+ "description-markup": "markdown",
6
+ "contributions": {
7
+ "html": {
8
+ "elements": [
9
+ {
10
+ "name": "vaadin-checkbox-group",
11
+ "description": "`<vaadin-checkbox-group>` is a web component that allows the user to choose several items from a group of binary choices.\n\n```html\n<vaadin-checkbox-group label=\"Preferred language of contact:\">\n <vaadin-checkbox value=\"en\" label=\"English\"></vaadin-checkbox>\n <vaadin-checkbox value=\"fr\" label=\"Français\"></vaadin-checkbox>\n <vaadin-checkbox value=\"de\" label=\"Deutsch\"></vaadin-checkbox>\n</vaadin-checkbox-group>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The slotted label element wrapper\n`group-field` | The checkbox elements wrapper\n`helper-text` | The slotted helper text element wrapper\n`error-message` | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n--------------------|-------------------------------------------|------------\n`disabled` | Set when the element is disabled | :host\n`invalid` | Set when the element is invalid | :host\n`focused` | Set when the element is focused | :host\n`has-label` | Set when the element has a label | :host\n`has-value` | Set when the element has a value | :host\n`has-helper` | Set when the element has helper text | :host\n`has-error-message` | Set when the element has an error message | :host\n\nSee [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.",
12
+ "attributes": [
13
+ {
14
+ "name": "disabled",
15
+ "description": "If true, the user cannot interact with this element.",
16
+ "value": {
17
+ "type": [
18
+ "boolean",
19
+ "null",
20
+ "undefined"
21
+ ]
22
+ }
23
+ },
24
+ {
25
+ "name": "label",
26
+ "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
27
+ "value": {
28
+ "type": [
29
+ "string",
30
+ "null",
31
+ "undefined"
32
+ ]
33
+ }
34
+ },
35
+ {
36
+ "name": "invalid",
37
+ "description": "Set to true when the field is invalid.",
38
+ "value": {
39
+ "type": [
40
+ "boolean",
41
+ "null",
42
+ "undefined"
43
+ ]
44
+ }
45
+ },
46
+ {
47
+ "name": "required",
48
+ "description": "Specifies that the user must fill in a value.",
49
+ "value": {
50
+ "type": [
51
+ "boolean",
52
+ "null",
53
+ "undefined"
54
+ ]
55
+ }
56
+ },
57
+ {
58
+ "name": "error-message",
59
+ "description": "Error to show when the field is invalid.",
60
+ "value": {
61
+ "type": [
62
+ "string",
63
+ "null",
64
+ "undefined"
65
+ ]
66
+ }
67
+ },
68
+ {
69
+ "name": "helper-text",
70
+ "description": "String used for the helper text.",
71
+ "value": {
72
+ "type": [
73
+ "string",
74
+ "null",
75
+ "undefined"
76
+ ]
77
+ }
78
+ },
79
+ {
80
+ "name": "theme",
81
+ "description": "The theme variants to apply to the component.",
82
+ "value": {
83
+ "type": [
84
+ "string",
85
+ "null",
86
+ "undefined"
87
+ ]
88
+ }
89
+ }
90
+ ],
91
+ "js": {
92
+ "properties": [
93
+ {
94
+ "name": "disabled",
95
+ "description": "If true, the user cannot interact with this element.",
96
+ "value": {
97
+ "type": [
98
+ "boolean",
99
+ "null",
100
+ "undefined"
101
+ ]
102
+ }
103
+ },
104
+ {
105
+ "name": "label",
106
+ "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
107
+ "value": {
108
+ "type": [
109
+ "string",
110
+ "null",
111
+ "undefined"
112
+ ]
113
+ }
114
+ },
115
+ {
116
+ "name": "invalid",
117
+ "description": "Set to true when the field is invalid.",
118
+ "value": {
119
+ "type": [
120
+ "boolean",
121
+ "null",
122
+ "undefined"
123
+ ]
124
+ }
125
+ },
126
+ {
127
+ "name": "required",
128
+ "description": "Specifies that the user must fill in a value.",
129
+ "value": {
130
+ "type": [
131
+ "boolean",
132
+ "null",
133
+ "undefined"
134
+ ]
135
+ }
136
+ },
137
+ {
138
+ "name": "errorMessage",
139
+ "description": "Error to show when the field is invalid.",
140
+ "value": {
141
+ "type": [
142
+ "string",
143
+ "null",
144
+ "undefined"
145
+ ]
146
+ }
147
+ },
148
+ {
149
+ "name": "helperText",
150
+ "description": "String used for the helper text.",
151
+ "value": {
152
+ "type": [
153
+ "string",
154
+ "null",
155
+ "undefined"
156
+ ]
157
+ }
158
+ },
159
+ {
160
+ "name": "value",
161
+ "description": "An array containing values of the currently checked checkboxes.\n\nThe array is immutable so toggling checkboxes always results in\ncreating a new array.",
162
+ "value": {
163
+ "type": [
164
+ "Array.<string>"
165
+ ]
166
+ }
167
+ }
168
+ ],
169
+ "events": [
170
+ {
171
+ "name": "validated",
172
+ "description": "Fired whenever the field is validated."
173
+ },
174
+ {
175
+ "name": "value-changed",
176
+ "description": "Fired when the `value` property changes."
177
+ }
178
+ ]
179
+ }
180
+ }
181
+ ]
182
+ }
183
+ }
184
+ }
package/web-types.lit.json ADDED
@@ -0,0 +1,90 @@
1
+ {
2
+ "$schema": "https://json.schemastore.org/web-types",
3
+ "name": "@vaadin/checkbox-group",
4
+ "version": "23.2.0-rc1",
5
+ "description-markup": "markdown",
6
+ "framework": "lit",
7
+ "framework-config": {
8
+ "enable-when": {
9
+ "node-packages": [
10
+ "lit"
11
+ ]
12
+ }
13
+ },
14
+ "contributions": {
15
+ "html": {
16
+ "elements": [
17
+ {
18
+ "name": "vaadin-checkbox-group",
19
+ "description": "`<vaadin-checkbox-group>` is a web component that allows the user to choose several items from a group of binary choices.\n\n```html\n<vaadin-checkbox-group label=\"Preferred language of contact:\">\n <vaadin-checkbox value=\"en\" label=\"English\"></vaadin-checkbox>\n <vaadin-checkbox value=\"fr\" label=\"Français\"></vaadin-checkbox>\n <vaadin-checkbox value=\"de\" label=\"Deutsch\"></vaadin-checkbox>\n</vaadin-checkbox-group>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The slotted label element wrapper\n`group-field` | The checkbox elements wrapper\n`helper-text` | The slotted helper text element wrapper\n`error-message` | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n--------------------|-------------------------------------------|------------\n`disabled` | Set when the element is disabled | :host\n`invalid` | Set when the element is invalid | :host\n`focused` | Set when the element is focused | :host\n`has-label` | Set when the element has a label | :host\n`has-value` | Set when the element has a value | :host\n`has-helper` | Set when the element has helper text | :host\n`has-error-message` | Set when the element has an error message | :host\n\nSee [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.",
20
+ "extension": true,
21
+ "attributes": [
22
+ {
23
+ "name": "?disabled",
24
+ "description": "If true, the user cannot interact with this element.",
25
+ "value": {
26
+ "kind": "expression"
27
+ }
28
+ },
29
+ {
30
+ "name": "?invalid",
31
+ "description": "Set to true when the field is invalid.",
32
+ "value": {
33
+ "kind": "expression"
34
+ }
35
+ },
36
+ {
37
+ "name": "?required",
38
+ "description": "Specifies that the user must fill in a value.",
39
+ "value": {
40
+ "kind": "expression"
41
+ }
42
+ },
43
+ {
44
+ "name": ".label",
45
+ "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
46
+ "value": {
47
+ "kind": "expression"
48
+ }
49
+ },
50
+ {
51
+ "name": ".errorMessage",
52
+ "description": "Error to show when the field is invalid.",
53
+ "value": {
54
+ "kind": "expression"
55
+ }
56
+ },
57
+ {
58
+ "name": ".helperText",
59
+ "description": "String used for the helper text.",
60
+ "value": {
61
+ "kind": "expression"
62
+ }
63
+ },
64
+ {
65
+ "name": ".value",
66
+ "description": "An array containing values of the currently checked checkboxes.\n\nThe array is immutable so toggling checkboxes always results in\ncreating a new array.",
67
+ "value": {
68
+ "kind": "expression"
69
+ }
70
+ },
71
+ {
72
+ "name": "@validated",
73
+ "description": "Fired whenever the field is validated.",
74
+ "value": {
75
+ "kind": "expression"
76
+ }
77
+ },
78
+ {
79
+ "name": "@value-changed",
80
+ "description": "Fired when the `value` property changes.",
81
+ "value": {
82
+ "kind": "expression"
83
+ }
84
+ }
85
+ ]
86
+ }
87
+ ]
88
+ }
89
+ }
90
+ }