@vaadin/checkbox-group 23.2.0-alpha3 → 23.2.0-alpha6
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 +14 -8
- package/src/vaadin-checkbox-group.d.ts +6 -6
- package/src/vaadin-checkbox-group.js +12 -13
- package/web-types.json +184 -0
- 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-
|
|
3
|
+
"version": "23.2.0-alpha6",
|
|
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-
|
|
38
|
-
"@vaadin/component-base": "23.2.0-
|
|
39
|
-
"@vaadin/vaadin-lumo-styles": "23.2.0-
|
|
40
|
-
"@vaadin/vaadin-material-styles": "23.2.0-
|
|
41
|
-
"@vaadin/vaadin-themable-mixin": "23.2.0-
|
|
39
|
+
"@vaadin/checkbox": "23.2.0-alpha6",
|
|
40
|
+
"@vaadin/component-base": "23.2.0-alpha6",
|
|
41
|
+
"@vaadin/vaadin-lumo-styles": "23.2.0-alpha6",
|
|
42
|
+
"@vaadin/vaadin-material-styles": "23.2.0-alpha6",
|
|
43
|
+
"@vaadin/vaadin-themable-mixin": "23.2.0-alpha6"
|
|
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
|
-
"
|
|
50
|
+
"web-types": [
|
|
51
|
+
"web-types.json",
|
|
52
|
+
"web-types.lit.json"
|
|
53
|
+
],
|
|
54
|
+
"gitHead": "61f1fb56953434e97d34a8819640064301dd3d8a"
|
|
49
55
|
}
|
|
@@ -77,23 +77,23 @@ export interface CheckboxGroupEventMap extends HTMLElementEventMap, CheckboxGrou
|
|
|
77
77
|
*/
|
|
78
78
|
declare class CheckboxGroup extends FieldMixin(FocusMixin(DisabledMixin(ElementMixin(ThemableMixin(HTMLElement))))) {
|
|
79
79
|
/**
|
|
80
|
-
*
|
|
81
|
-
*
|
|
82
|
-
* array
|
|
83
|
-
*
|
|
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.
|
|
84
84
|
*/
|
|
85
85
|
value: string[];
|
|
86
86
|
|
|
87
87
|
addEventListener<K extends keyof CheckboxGroupEventMap>(
|
|
88
88
|
type: K,
|
|
89
89
|
listener: (this: CheckboxGroup, ev: CheckboxGroupEventMap[K]) => void,
|
|
90
|
-
options?:
|
|
90
|
+
options?: AddEventListenerOptions | boolean,
|
|
91
91
|
): void;
|
|
92
92
|
|
|
93
93
|
removeEventListener<K extends keyof CheckboxGroupEventMap>(
|
|
94
94
|
type: K,
|
|
95
95
|
listener: (this: CheckboxGroup, ev: CheckboxGroupEventMap[K]) => void,
|
|
96
|
-
options?:
|
|
96
|
+
options?: EventListenerOptions | boolean,
|
|
97
97
|
): void;
|
|
98
98
|
}
|
|
99
99
|
|
|
@@ -117,24 +117,22 @@ class CheckboxGroup extends FieldMixin(FocusMixin(DisabledMixin(ElementMixin(The
|
|
|
117
117
|
static get properties() {
|
|
118
118
|
return {
|
|
119
119
|
/**
|
|
120
|
-
*
|
|
121
|
-
*
|
|
122
|
-
* array
|
|
123
|
-
*
|
|
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
|
+
*
|
|
124
125
|
* @type {!Array<!string>}
|
|
125
126
|
*/
|
|
126
127
|
value: {
|
|
127
128
|
type: Array,
|
|
128
129
|
value: () => [],
|
|
129
130
|
notify: true,
|
|
131
|
+
observer: '__valueChanged',
|
|
130
132
|
},
|
|
131
133
|
};
|
|
132
134
|
}
|
|
133
135
|
|
|
134
|
-
static get observers() {
|
|
135
|
-
return ['__valueChanged(value, value.splices)'];
|
|
136
|
-
}
|
|
137
|
-
|
|
138
136
|
constructor() {
|
|
139
137
|
super();
|
|
140
138
|
|
|
@@ -305,23 +303,24 @@ class CheckboxGroup extends FieldMixin(FocusMixin(DisabledMixin(ElementMixin(The
|
|
|
305
303
|
|
|
306
304
|
/**
|
|
307
305
|
* @param {string | null | undefined} value
|
|
306
|
+
* @param {string | null | undefined} oldValue
|
|
308
307
|
* @private
|
|
309
308
|
*/
|
|
310
|
-
__valueChanged(value) {
|
|
309
|
+
__valueChanged(value, oldValue) {
|
|
311
310
|
// Setting initial value to empty array, skip validation
|
|
312
|
-
if (value.length === 0 &&
|
|
311
|
+
if (value.length === 0 && oldValue === undefined) {
|
|
313
312
|
return;
|
|
314
313
|
}
|
|
315
314
|
|
|
316
|
-
this.__oldValue = value;
|
|
317
|
-
|
|
318
315
|
this.toggleAttribute('has-value', value.length > 0);
|
|
319
316
|
|
|
320
317
|
this.__checkboxes.forEach((checkbox) => {
|
|
321
318
|
checkbox.checked = value.includes(checkbox.value);
|
|
322
319
|
});
|
|
323
320
|
|
|
324
|
-
|
|
321
|
+
if (oldValue !== undefined) {
|
|
322
|
+
this.validate();
|
|
323
|
+
}
|
|
325
324
|
}
|
|
326
325
|
|
|
327
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-alpha6",
|
|
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
|
+
}
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://json.schemastore.org/web-types",
|
|
3
|
+
"name": "@vaadin/checkbox-group",
|
|
4
|
+
"version": "23.2.0-alpha6",
|
|
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
|
+
}
|