@vaadin/checkbox 24.0.0-alpha9 → 24.0.0-beta2
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 +12 -8
- package/src/vaadin-checkbox-mixin.d.ts +50 -0
- package/src/vaadin-checkbox-mixin.js +121 -0
- package/src/vaadin-checkbox-styles.d.ts +8 -0
- package/src/vaadin-checkbox-styles.js +58 -0
- package/src/vaadin-checkbox.d.ts +11 -11
- package/src/vaadin-checkbox.js +20 -163
- package/theme/lumo/vaadin-checkbox-styles.js +7 -12
- package/theme/material/vaadin-checkbox-styles.js +4 -7
- package/web-types.json +28 -28
- package/web-types.lit.json +12 -12
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/checkbox",
|
|
3
|
-
"version": "24.0.0-
|
|
3
|
+
"version": "24.0.0-beta2",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -21,6 +21,8 @@
|
|
|
21
21
|
"type": "module",
|
|
22
22
|
"files": [
|
|
23
23
|
"src",
|
|
24
|
+
"!src/vaadin-lit-checkbox.d.ts",
|
|
25
|
+
"!src/vaadin-lit-checkbox.js",
|
|
24
26
|
"theme",
|
|
25
27
|
"vaadin-*.d.ts",
|
|
26
28
|
"vaadin-*.js",
|
|
@@ -35,21 +37,23 @@
|
|
|
35
37
|
"polymer"
|
|
36
38
|
],
|
|
37
39
|
"dependencies": {
|
|
40
|
+
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
41
|
"@polymer/polymer": "^3.0.0",
|
|
39
|
-
"@vaadin/component-base": "24.0.0-
|
|
40
|
-
"@vaadin/field-base": "24.0.0-
|
|
41
|
-
"@vaadin/vaadin-lumo-styles": "24.0.0-
|
|
42
|
-
"@vaadin/vaadin-material-styles": "24.0.0-
|
|
43
|
-
"@vaadin/vaadin-themable-mixin": "24.0.0-
|
|
42
|
+
"@vaadin/component-base": "24.0.0-beta2",
|
|
43
|
+
"@vaadin/field-base": "24.0.0-beta2",
|
|
44
|
+
"@vaadin/vaadin-lumo-styles": "24.0.0-beta2",
|
|
45
|
+
"@vaadin/vaadin-material-styles": "24.0.0-beta2",
|
|
46
|
+
"@vaadin/vaadin-themable-mixin": "24.0.0-beta2",
|
|
47
|
+
"lit": "^2.0.0"
|
|
44
48
|
},
|
|
45
49
|
"devDependencies": {
|
|
46
50
|
"@esm-bundle/chai": "^4.3.4",
|
|
47
|
-
"@vaadin/testing-helpers": "^0.
|
|
51
|
+
"@vaadin/testing-helpers": "^0.4.0",
|
|
48
52
|
"sinon": "^13.0.2"
|
|
49
53
|
},
|
|
50
54
|
"web-types": [
|
|
51
55
|
"web-types.json",
|
|
52
56
|
"web-types.lit.json"
|
|
53
57
|
],
|
|
54
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "00086f1f6d487f042f189c9b9ecd7ba736960888"
|
|
55
59
|
}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright (c) 2021 - 2023 Vaadin Ltd.
|
|
4
|
+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
+
*/
|
|
6
|
+
import type { Constructor } from '@open-wc/dedupe-mixin';
|
|
7
|
+
import type { ActiveMixinClass } from '@vaadin/component-base/src/active-mixin.js';
|
|
8
|
+
import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
|
|
9
|
+
import type { DelegateFocusMixinClass } from '@vaadin/component-base/src/delegate-focus-mixin.js';
|
|
10
|
+
import type { DelegateStateMixinClass } from '@vaadin/component-base/src/delegate-state-mixin.js';
|
|
11
|
+
import type { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
|
|
12
|
+
import type { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
|
|
13
|
+
import type { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
|
|
14
|
+
import type { CheckedMixinClass } from '@vaadin/field-base/src/checked-mixin.js';
|
|
15
|
+
import type { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
|
|
16
|
+
import type { LabelMixinClass } from '@vaadin/field-base/src/label-mixin.js';
|
|
17
|
+
|
|
18
|
+
/**
|
|
19
|
+
* A mixin providing common checkbox functionality.
|
|
20
|
+
*/
|
|
21
|
+
export declare function CheckboxMixin<T extends Constructor<HTMLElement>>(
|
|
22
|
+
base: T,
|
|
23
|
+
): Constructor<ActiveMixinClass> &
|
|
24
|
+
Constructor<CheckboxMixinClass> &
|
|
25
|
+
Constructor<CheckedMixinClass> &
|
|
26
|
+
Constructor<ControllerMixinClass> &
|
|
27
|
+
Constructor<DelegateFocusMixinClass> &
|
|
28
|
+
Constructor<DelegateStateMixinClass> &
|
|
29
|
+
Constructor<DisabledMixinClass> &
|
|
30
|
+
Constructor<FocusMixinClass> &
|
|
31
|
+
Constructor<InputMixinClass> &
|
|
32
|
+
Constructor<KeyboardMixinClass> &
|
|
33
|
+
Constructor<LabelMixinClass> &
|
|
34
|
+
T;
|
|
35
|
+
|
|
36
|
+
export declare class CheckboxMixinClass {
|
|
37
|
+
/**
|
|
38
|
+
* True if the checkbox is in the indeterminate state which means
|
|
39
|
+
* it is not possible to say whether it is checked or unchecked.
|
|
40
|
+
* The state is reset once the user switches the checkbox by hand.
|
|
41
|
+
*
|
|
42
|
+
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes
|
|
43
|
+
*/
|
|
44
|
+
indeterminate: boolean;
|
|
45
|
+
|
|
46
|
+
/**
|
|
47
|
+
* The name of the checkbox.
|
|
48
|
+
*/
|
|
49
|
+
name: string;
|
|
50
|
+
}
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright (c) 2017 - 2023 Vaadin Ltd.
|
|
4
|
+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
+
*/
|
|
6
|
+
import { ActiveMixin } from '@vaadin/component-base/src/active-mixin.js';
|
|
7
|
+
import { DelegateFocusMixin } from '@vaadin/component-base/src/delegate-focus-mixin.js';
|
|
8
|
+
import { CheckedMixin } from '@vaadin/field-base/src/checked-mixin.js';
|
|
9
|
+
import { InputController } from '@vaadin/field-base/src/input-controller.js';
|
|
10
|
+
import { LabelMixin } from '@vaadin/field-base/src/label-mixin.js';
|
|
11
|
+
import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js';
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* A mixin providing common checkbox functionality.
|
|
15
|
+
*
|
|
16
|
+
* @polymerMixin
|
|
17
|
+
* @mixes ActiveMixin
|
|
18
|
+
* @mixes CheckedMixin
|
|
19
|
+
* @mixes DelegateFocusMixin
|
|
20
|
+
* @mixes LabelMixin
|
|
21
|
+
*/
|
|
22
|
+
export const CheckboxMixin = (superclass) =>
|
|
23
|
+
class CheckboxMixinClass extends LabelMixin(CheckedMixin(DelegateFocusMixin(ActiveMixin(superclass)))) {
|
|
24
|
+
static get properties() {
|
|
25
|
+
return {
|
|
26
|
+
/**
|
|
27
|
+
* True if the checkbox is in the indeterminate state which means
|
|
28
|
+
* it is not possible to say whether it is checked or unchecked.
|
|
29
|
+
* The state is reset once the user switches the checkbox by hand.
|
|
30
|
+
*
|
|
31
|
+
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes
|
|
32
|
+
*
|
|
33
|
+
* @type {boolean}
|
|
34
|
+
*/
|
|
35
|
+
indeterminate: {
|
|
36
|
+
type: Boolean,
|
|
37
|
+
notify: true,
|
|
38
|
+
value: false,
|
|
39
|
+
reflectToAttribute: true,
|
|
40
|
+
},
|
|
41
|
+
|
|
42
|
+
/**
|
|
43
|
+
* The name of the checkbox.
|
|
44
|
+
*
|
|
45
|
+
* @type {string}
|
|
46
|
+
*/
|
|
47
|
+
name: {
|
|
48
|
+
type: String,
|
|
49
|
+
value: '',
|
|
50
|
+
},
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
/** @override */
|
|
55
|
+
static get delegateProps() {
|
|
56
|
+
return [...super.delegateProps, 'indeterminate'];
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
/** @override */
|
|
60
|
+
static get delegateAttrs() {
|
|
61
|
+
return [...super.delegateAttrs, 'name'];
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
constructor() {
|
|
65
|
+
super();
|
|
66
|
+
|
|
67
|
+
this._setType('checkbox');
|
|
68
|
+
|
|
69
|
+
// Set the string "on" as the default value for the checkbox following the HTML specification:
|
|
70
|
+
// https://html.spec.whatwg.org/multipage/input.html#dom-input-value-default-on
|
|
71
|
+
this.value = 'on';
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
/** @protected */
|
|
75
|
+
ready() {
|
|
76
|
+
super.ready();
|
|
77
|
+
|
|
78
|
+
this.addController(
|
|
79
|
+
new InputController(this, (input) => {
|
|
80
|
+
this._setInputElement(input);
|
|
81
|
+
this._setFocusElement(input);
|
|
82
|
+
this.stateTarget = input;
|
|
83
|
+
this.ariaTarget = input;
|
|
84
|
+
}),
|
|
85
|
+
);
|
|
86
|
+
this.addController(new LabelledInputController(this.inputElement, this._labelController));
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
/**
|
|
90
|
+
* Override method inherited from `ActiveMixin` to prevent setting
|
|
91
|
+
* `active` attribute when clicking a link placed inside the label.
|
|
92
|
+
*
|
|
93
|
+
* @param {Event} event
|
|
94
|
+
* @return {boolean}
|
|
95
|
+
* @protected
|
|
96
|
+
* @override
|
|
97
|
+
*/
|
|
98
|
+
_shouldSetActive(event) {
|
|
99
|
+
if (event.target.localName === 'a') {
|
|
100
|
+
return false;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
return super._shouldSetActive(event);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
/**
|
|
107
|
+
* Override method inherited from `CheckedMixin` to reset
|
|
108
|
+
* `indeterminate` state checkbox is toggled by the user.
|
|
109
|
+
*
|
|
110
|
+
* @param {boolean} checked
|
|
111
|
+
* @protected
|
|
112
|
+
* @override
|
|
113
|
+
*/
|
|
114
|
+
_toggleChecked(checked) {
|
|
115
|
+
if (this.indeterminate) {
|
|
116
|
+
this.indeterminate = false;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
super._toggleChecked(checked);
|
|
120
|
+
}
|
|
121
|
+
};
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright (c) 2017 - 2023 Vaadin Ltd.
|
|
4
|
+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
+
*/
|
|
6
|
+
import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
7
|
+
|
|
8
|
+
export const checkboxStyles = css`
|
|
9
|
+
:host {
|
|
10
|
+
display: inline-block;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
:host([hidden]) {
|
|
14
|
+
display: none !important;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
:host([disabled]) {
|
|
18
|
+
-webkit-tap-highlight-color: transparent;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.vaadin-checkbox-container {
|
|
22
|
+
display: grid;
|
|
23
|
+
grid-template-columns: auto 1fr;
|
|
24
|
+
align-items: baseline;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
[part='checkbox'],
|
|
28
|
+
::slotted(input),
|
|
29
|
+
::slotted(label) {
|
|
30
|
+
grid-row: 1;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
[part='checkbox'],
|
|
34
|
+
::slotted(input) {
|
|
35
|
+
grid-column: 1;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
[part='checkbox'] {
|
|
39
|
+
width: var(--vaadin-checkbox-size, 1em);
|
|
40
|
+
height: var(--vaadin-checkbox-size, 1em);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
[part='checkbox']::before {
|
|
44
|
+
display: block;
|
|
45
|
+
content: '\\202F';
|
|
46
|
+
line-height: var(--vaadin-checkbox-size, 1em);
|
|
47
|
+
contain: paint;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/* visually hidden */
|
|
51
|
+
::slotted(input) {
|
|
52
|
+
opacity: 0;
|
|
53
|
+
cursor: inherit;
|
|
54
|
+
margin: 0;
|
|
55
|
+
align-self: stretch;
|
|
56
|
+
-webkit-appearance: none;
|
|
57
|
+
}
|
|
58
|
+
`;
|
package/src/vaadin-checkbox.d.ts
CHANGED
|
@@ -41,20 +41,20 @@ export interface CheckboxEventMap extends HTMLElementEventMap, CheckboxCustomEve
|
|
|
41
41
|
* The following shadow DOM parts are available for styling:
|
|
42
42
|
*
|
|
43
43
|
* Part name | Description
|
|
44
|
-
*
|
|
45
|
-
* `checkbox` | The
|
|
44
|
+
* ------------|-------------
|
|
45
|
+
* `checkbox` | The element representing a stylable custom checkbox.
|
|
46
46
|
*
|
|
47
47
|
* The following state attributes are available for styling:
|
|
48
48
|
*
|
|
49
|
-
* Attribute | Description
|
|
50
|
-
*
|
|
51
|
-
* `active` | Set when the checkbox is
|
|
52
|
-
* `
|
|
53
|
-
* `
|
|
54
|
-
* `
|
|
55
|
-
* `
|
|
56
|
-
* `
|
|
57
|
-
* `has-label` | Set when the checkbox has a label.
|
|
49
|
+
* Attribute | Description
|
|
50
|
+
* ----------------|-------------
|
|
51
|
+
* `active` | Set when the checkbox is activated with mouse, touch or the keyboard.
|
|
52
|
+
* `checked` | Set when the checkbox is checked.
|
|
53
|
+
* `disabled` | Set when the checkbox is disabled.
|
|
54
|
+
* `focus-ring` | Set when the checkbox is focused using the keyboard.
|
|
55
|
+
* `focused` | Set when the checkbox is focused.
|
|
56
|
+
* `indeterminate` | Set when the checkbox is in the indeterminate state.
|
|
57
|
+
* `has-label` | Set when the checkbox has a label.
|
|
58
58
|
*
|
|
59
59
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
|
|
60
60
|
*
|
package/src/vaadin-checkbox.js
CHANGED
|
@@ -4,16 +4,13 @@
|
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
|
|
7
|
-
import { ActiveMixin } from '@vaadin/component-base/src/active-mixin.js';
|
|
8
|
-
import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
|
|
9
|
-
import { DelegateFocusMixin } from '@vaadin/component-base/src/delegate-focus-mixin.js';
|
|
10
7
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
11
8
|
import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
|
|
16
|
-
|
|
9
|
+
import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
10
|
+
import { CheckboxMixin } from './vaadin-checkbox-mixin.js';
|
|
11
|
+
import { checkboxStyles } from './vaadin-checkbox-styles.js';
|
|
12
|
+
|
|
13
|
+
registerStyles('vaadin-checkbox', checkboxStyles, { moduleId: 'vaadin-checkbox-styles' });
|
|
17
14
|
|
|
18
15
|
/**
|
|
19
16
|
* `<vaadin-checkbox>` is an input field representing a binary choice.
|
|
@@ -27,20 +24,20 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
|
|
|
27
24
|
* The following shadow DOM parts are available for styling:
|
|
28
25
|
*
|
|
29
26
|
* Part name | Description
|
|
30
|
-
*
|
|
31
|
-
* `checkbox` | The
|
|
27
|
+
* ------------|-------------
|
|
28
|
+
* `checkbox` | The element representing a stylable custom checkbox.
|
|
32
29
|
*
|
|
33
30
|
* The following state attributes are available for styling:
|
|
34
31
|
*
|
|
35
|
-
* Attribute | Description
|
|
36
|
-
*
|
|
37
|
-
* `active` | Set when the checkbox is
|
|
38
|
-
* `
|
|
39
|
-
* `
|
|
40
|
-
* `
|
|
41
|
-
* `
|
|
42
|
-
* `
|
|
43
|
-
* `has-label` | Set when the checkbox has a label.
|
|
32
|
+
* Attribute | Description
|
|
33
|
+
* ----------------|-------------
|
|
34
|
+
* `active` | Set when the checkbox is activated with mouse, touch or the keyboard.
|
|
35
|
+
* `checked` | Set when the checkbox is checked.
|
|
36
|
+
* `disabled` | Set when the checkbox is disabled.
|
|
37
|
+
* `focus-ring` | Set when the checkbox is focused using the keyboard.
|
|
38
|
+
* `focused` | Set when the checkbox is focused.
|
|
39
|
+
* `indeterminate` | Set when the checkbox is in the indeterminate state.
|
|
40
|
+
* `has-label` | Set when the checkbox has a label.
|
|
44
41
|
*
|
|
45
42
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
|
|
46
43
|
*
|
|
@@ -48,173 +45,33 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
|
|
|
48
45
|
* @fires {CustomEvent} indeterminate-changed - Fired when the `indeterminate` property changes.
|
|
49
46
|
*
|
|
50
47
|
* @extends HTMLElement
|
|
51
|
-
* @mixes
|
|
48
|
+
* @mixes CheckboxMixin
|
|
52
49
|
* @mixes ThemableMixin
|
|
53
50
|
* @mixes ElementMixin
|
|
54
|
-
* @mixes ActiveMixin
|
|
55
|
-
* @mixes DelegateFocusMixin
|
|
56
|
-
* @mixes CheckedMixin
|
|
57
|
-
* @mixes LabelMixin
|
|
58
51
|
*/
|
|
59
|
-
class Checkbox extends
|
|
60
|
-
CheckedMixin(DelegateFocusMixin(ActiveMixin(ElementMixin(ThemableMixin(ControllerMixin(PolymerElement)))))),
|
|
61
|
-
) {
|
|
52
|
+
export class Checkbox extends CheckboxMixin(ElementMixin(ThemableMixin(PolymerElement))) {
|
|
62
53
|
static get is() {
|
|
63
54
|
return 'vaadin-checkbox';
|
|
64
55
|
}
|
|
65
56
|
|
|
66
57
|
static get template() {
|
|
67
58
|
return html`
|
|
68
|
-
<style>
|
|
69
|
-
:host {
|
|
70
|
-
display: inline-block;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
:host([hidden]) {
|
|
74
|
-
display: none !important;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
:host([disabled]) {
|
|
78
|
-
-webkit-tap-highlight-color: transparent;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
.vaadin-checkbox-container {
|
|
82
|
-
display: grid;
|
|
83
|
-
grid-template-columns: auto 1fr;
|
|
84
|
-
align-items: baseline;
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
.vaadin-checkbox-wrapper {
|
|
88
|
-
position: relative;
|
|
89
|
-
height: 100%;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
/* visually hidden */
|
|
93
|
-
::slotted(input) {
|
|
94
|
-
position: absolute;
|
|
95
|
-
top: 0;
|
|
96
|
-
left: 0;
|
|
97
|
-
right: 0;
|
|
98
|
-
width: 100%;
|
|
99
|
-
height: 100%;
|
|
100
|
-
opacity: 0;
|
|
101
|
-
cursor: inherit;
|
|
102
|
-
margin: 0;
|
|
103
|
-
}
|
|
104
|
-
</style>
|
|
105
59
|
<div class="vaadin-checkbox-container">
|
|
106
|
-
<div
|
|
107
|
-
|
|
108
|
-
<slot name="input"></slot>
|
|
109
|
-
</div>
|
|
110
|
-
|
|
60
|
+
<div part="checkbox" aria-hidden="true"></div>
|
|
61
|
+
<slot name="input"></slot>
|
|
111
62
|
<slot name="label"></slot>
|
|
112
63
|
</div>
|
|
113
64
|
<slot name="tooltip"></slot>
|
|
114
65
|
`;
|
|
115
66
|
}
|
|
116
67
|
|
|
117
|
-
static get properties() {
|
|
118
|
-
return {
|
|
119
|
-
/**
|
|
120
|
-
* True if the checkbox is in the indeterminate state which means
|
|
121
|
-
* it is not possible to say whether it is checked or unchecked.
|
|
122
|
-
* The state is reset once the user switches the checkbox by hand.
|
|
123
|
-
*
|
|
124
|
-
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes
|
|
125
|
-
*
|
|
126
|
-
* @type {boolean}
|
|
127
|
-
*/
|
|
128
|
-
indeterminate: {
|
|
129
|
-
type: Boolean,
|
|
130
|
-
notify: true,
|
|
131
|
-
value: false,
|
|
132
|
-
reflectToAttribute: true,
|
|
133
|
-
},
|
|
134
|
-
|
|
135
|
-
/**
|
|
136
|
-
* The name of the checkbox.
|
|
137
|
-
*
|
|
138
|
-
* @type {string}
|
|
139
|
-
*/
|
|
140
|
-
name: {
|
|
141
|
-
type: String,
|
|
142
|
-
value: '',
|
|
143
|
-
},
|
|
144
|
-
};
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
/** @override */
|
|
148
|
-
static get delegateProps() {
|
|
149
|
-
return [...super.delegateProps, 'indeterminate'];
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
/** @override */
|
|
153
|
-
static get delegateAttrs() {
|
|
154
|
-
return [...super.delegateAttrs, 'name'];
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
constructor() {
|
|
158
|
-
super();
|
|
159
|
-
|
|
160
|
-
this._setType('checkbox');
|
|
161
|
-
|
|
162
|
-
// Set the string "on" as the default value for the checkbox following the HTML specification:
|
|
163
|
-
// https://html.spec.whatwg.org/multipage/input.html#dom-input-value-default-on
|
|
164
|
-
this.value = 'on';
|
|
165
|
-
}
|
|
166
|
-
|
|
167
68
|
/** @protected */
|
|
168
69
|
ready() {
|
|
169
70
|
super.ready();
|
|
170
71
|
|
|
171
|
-
this.addController(
|
|
172
|
-
new InputController(this, (input) => {
|
|
173
|
-
this._setInputElement(input);
|
|
174
|
-
this._setFocusElement(input);
|
|
175
|
-
this.stateTarget = input;
|
|
176
|
-
this.ariaTarget = input;
|
|
177
|
-
}),
|
|
178
|
-
);
|
|
179
|
-
this.addController(new LabelledInputController(this.inputElement, this._labelController));
|
|
180
72
|
this._tooltipController = new TooltipController(this);
|
|
181
73
|
this.addController(this._tooltipController);
|
|
182
74
|
}
|
|
183
|
-
|
|
184
|
-
/**
|
|
185
|
-
* Extends the method from `ActiveMixin` in order to
|
|
186
|
-
* prevent setting the `active` attribute when interacting with a link inside the label.
|
|
187
|
-
*
|
|
188
|
-
* @param {Event} event
|
|
189
|
-
* @return {boolean}
|
|
190
|
-
* @protected
|
|
191
|
-
* @override
|
|
192
|
-
*/
|
|
193
|
-
_shouldSetActive(event) {
|
|
194
|
-
if (event.target.localName === 'a') {
|
|
195
|
-
return false;
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
return super._shouldSetActive(event);
|
|
199
|
-
}
|
|
200
|
-
|
|
201
|
-
/**
|
|
202
|
-
* Extends the method from `CheckedMixin` in order to
|
|
203
|
-
* reset the indeterminate state once the user switches the checkbox.
|
|
204
|
-
*
|
|
205
|
-
* @param {boolean} checked
|
|
206
|
-
* @protected
|
|
207
|
-
* @override
|
|
208
|
-
*/
|
|
209
|
-
_toggleChecked(checked) {
|
|
210
|
-
if (this.indeterminate) {
|
|
211
|
-
this.indeterminate = false;
|
|
212
|
-
}
|
|
213
|
-
|
|
214
|
-
super._toggleChecked(checked);
|
|
215
|
-
}
|
|
216
75
|
}
|
|
217
76
|
|
|
218
77
|
customElements.define(Checkbox.is, Checkbox);
|
|
219
|
-
|
|
220
|
-
export { Checkbox };
|
|
@@ -22,23 +22,23 @@ registerStyles(
|
|
|
22
22
|
user-select: none;
|
|
23
23
|
cursor: default;
|
|
24
24
|
outline: none;
|
|
25
|
+
--_checkbox-size: var(--vaadin-checkbox-size, calc(var(--lumo-size-m) / 2));
|
|
25
26
|
}
|
|
26
27
|
|
|
27
28
|
:host([has-label]) ::slotted(label) {
|
|
28
|
-
padding: var(--lumo-space-xs)
|
|
29
|
+
padding-block: var(--lumo-space-xs);
|
|
30
|
+
padding-inline: var(--lumo-space-xs) var(--lumo-space-s);
|
|
29
31
|
}
|
|
30
32
|
|
|
31
33
|
[part='checkbox'] {
|
|
32
|
-
width:
|
|
33
|
-
height:
|
|
34
|
+
width: var(--_checkbox-size);
|
|
35
|
+
height: var(--_checkbox-size);
|
|
34
36
|
margin: var(--lumo-space-xs);
|
|
35
37
|
position: relative;
|
|
36
38
|
border-radius: var(--lumo-border-radius-s);
|
|
37
39
|
background-color: var(--lumo-contrast-20pct);
|
|
38
40
|
transition: transform 0.2s cubic-bezier(0.12, 0.32, 0.54, 2), background-color 0.15s;
|
|
39
|
-
line-height: 1.2;
|
|
40
41
|
cursor: var(--lumo-clickable-cursor);
|
|
41
|
-
flex: none;
|
|
42
42
|
}
|
|
43
43
|
|
|
44
44
|
:host([indeterminate]) [part='checkbox'],
|
|
@@ -46,18 +46,13 @@ registerStyles(
|
|
|
46
46
|
background-color: var(--lumo-primary-color);
|
|
47
47
|
}
|
|
48
48
|
|
|
49
|
-
/* Needed to align the checkbox nicely on the baseline */
|
|
50
|
-
[part='checkbox']::before {
|
|
51
|
-
content: '\\2003';
|
|
52
|
-
}
|
|
53
|
-
|
|
54
49
|
/* Checkmark */
|
|
55
50
|
[part='checkbox']::after {
|
|
56
51
|
pointer-events: none;
|
|
57
52
|
font-family: 'lumo-icons';
|
|
58
53
|
content: var(--lumo-icons-checkmark);
|
|
59
54
|
color: var(--lumo-primary-contrast-color);
|
|
60
|
-
font-size: calc(var(--
|
|
55
|
+
font-size: calc(var(--_checkbox-size) + 2px);
|
|
61
56
|
line-height: 1;
|
|
62
57
|
position: absolute;
|
|
63
58
|
top: -1px;
|
|
@@ -119,9 +114,9 @@ registerStyles(
|
|
|
119
114
|
[part='checkbox']::before {
|
|
120
115
|
pointer-events: none;
|
|
121
116
|
color: transparent;
|
|
122
|
-
display: inline-block;
|
|
123
117
|
width: 100%;
|
|
124
118
|
height: 100%;
|
|
119
|
+
line-height: var(--_checkbox-size);
|
|
125
120
|
border-radius: inherit;
|
|
126
121
|
background-color: inherit;
|
|
127
122
|
transform: scale(1.4);
|
|
@@ -12,6 +12,7 @@ registerStyles(
|
|
|
12
12
|
user-select: none;
|
|
13
13
|
outline: none;
|
|
14
14
|
-webkit-tap-highlight-color: transparent;
|
|
15
|
+
--_checkbox-size: var(--vaadin-checkbox-size, 16px);
|
|
15
16
|
}
|
|
16
17
|
|
|
17
18
|
:host([has-label]) ::slotted(label) {
|
|
@@ -19,25 +20,21 @@ registerStyles(
|
|
|
19
20
|
}
|
|
20
21
|
|
|
21
22
|
[part='checkbox'] {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
height: 16px;
|
|
23
|
+
width: var(--_checkbox-size);
|
|
24
|
+
height: var(--_checkbox-size);
|
|
25
25
|
margin: 4px;
|
|
26
26
|
position: relative;
|
|
27
27
|
border-radius: 2px;
|
|
28
28
|
box-shadow: inset 0 0 0 2px var(--material-secondary-text-color);
|
|
29
|
-
line-height: 1.275;
|
|
30
29
|
background-color: transparent;
|
|
31
30
|
}
|
|
32
31
|
|
|
33
32
|
/* Used for the ripple */
|
|
34
33
|
[part='checkbox']::before {
|
|
35
|
-
/* Needed to align the checkbox nicely on the baseline */
|
|
36
|
-
content: '\\2003';
|
|
37
34
|
pointer-events: none;
|
|
38
|
-
display: inline-block;
|
|
39
35
|
width: 100%;
|
|
40
36
|
height: 100%;
|
|
37
|
+
line-height: var(--_checkbox-size);
|
|
41
38
|
border-radius: 50%;
|
|
42
39
|
background-color: var(--material-disabled-text-color);
|
|
43
40
|
transform: scale(0);
|
package/web-types.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/checkbox",
|
|
4
|
-
"version": "24.0.0-
|
|
4
|
+
"version": "24.0.0-beta2",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-checkbox",
|
|
11
|
-
"description": "`<vaadin-checkbox>` is an input field representing a binary choice.\n\n```html\n<vaadin-checkbox label=\"I accept the terms and conditions\"></vaadin-checkbox>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n
|
|
11
|
+
"description": "`<vaadin-checkbox>` is an input field representing a binary choice.\n\n```html\n<vaadin-checkbox label=\"I accept the terms and conditions\"></vaadin-checkbox>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n------------|-------------\n`checkbox` | The element representing a stylable custom checkbox.\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n----------------|-------------\n`active` | Set when the checkbox is activated with mouse, touch or the keyboard.\n`checked` | Set when the checkbox is checked.\n`disabled` | Set when the checkbox is disabled.\n`focus-ring` | Set when the checkbox is focused using the keyboard.\n`focused` | Set when the checkbox is focused.\n`indeterminate` | Set when the checkbox is in the indeterminate state.\n`has-label` | Set when the checkbox has a label.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "disabled",
|
|
@@ -21,17 +21,6 @@
|
|
|
21
21
|
]
|
|
22
22
|
}
|
|
23
23
|
},
|
|
24
|
-
{
|
|
25
|
-
"name": "autofocus",
|
|
26
|
-
"description": "Specify that this control should have input focus when the page loads.",
|
|
27
|
-
"value": {
|
|
28
|
-
"type": [
|
|
29
|
-
"boolean",
|
|
30
|
-
"null",
|
|
31
|
-
"undefined"
|
|
32
|
-
]
|
|
33
|
-
}
|
|
34
|
-
},
|
|
35
24
|
{
|
|
36
25
|
"name": "value",
|
|
37
26
|
"description": "The value of the field.",
|
|
@@ -52,6 +41,17 @@
|
|
|
52
41
|
]
|
|
53
42
|
}
|
|
54
43
|
},
|
|
44
|
+
{
|
|
45
|
+
"name": "autofocus",
|
|
46
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
47
|
+
"value": {
|
|
48
|
+
"type": [
|
|
49
|
+
"boolean",
|
|
50
|
+
"null",
|
|
51
|
+
"undefined"
|
|
52
|
+
]
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
55
|
{
|
|
56
56
|
"name": "label",
|
|
57
57
|
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|
|
@@ -106,17 +106,6 @@
|
|
|
106
106
|
]
|
|
107
107
|
}
|
|
108
108
|
},
|
|
109
|
-
{
|
|
110
|
-
"name": "autofocus",
|
|
111
|
-
"description": "Specify that this control should have input focus when the page loads.",
|
|
112
|
-
"value": {
|
|
113
|
-
"type": [
|
|
114
|
-
"boolean",
|
|
115
|
-
"null",
|
|
116
|
-
"undefined"
|
|
117
|
-
]
|
|
118
|
-
}
|
|
119
|
-
},
|
|
120
109
|
{
|
|
121
110
|
"name": "value",
|
|
122
111
|
"description": "The value of the field.",
|
|
@@ -137,6 +126,17 @@
|
|
|
137
126
|
]
|
|
138
127
|
}
|
|
139
128
|
},
|
|
129
|
+
{
|
|
130
|
+
"name": "autofocus",
|
|
131
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
132
|
+
"value": {
|
|
133
|
+
"type": [
|
|
134
|
+
"boolean",
|
|
135
|
+
"null",
|
|
136
|
+
"undefined"
|
|
137
|
+
]
|
|
138
|
+
}
|
|
139
|
+
},
|
|
140
140
|
{
|
|
141
141
|
"name": "label",
|
|
142
142
|
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|
|
@@ -168,10 +168,6 @@
|
|
|
168
168
|
}
|
|
169
169
|
],
|
|
170
170
|
"events": [
|
|
171
|
-
{
|
|
172
|
-
"name": "indeterminate-changed",
|
|
173
|
-
"description": "Fired when the `indeterminate` property changes."
|
|
174
|
-
},
|
|
175
171
|
{
|
|
176
172
|
"name": "value-changed",
|
|
177
173
|
"description": "Fired when the `value` property changes."
|
|
@@ -179,6 +175,10 @@
|
|
|
179
175
|
{
|
|
180
176
|
"name": "checked-changed",
|
|
181
177
|
"description": "Fired when the `checked` property changes."
|
|
178
|
+
},
|
|
179
|
+
{
|
|
180
|
+
"name": "indeterminate-changed",
|
|
181
|
+
"description": "Fired when the `indeterminate` property changes."
|
|
182
182
|
}
|
|
183
183
|
]
|
|
184
184
|
}
|
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/checkbox",
|
|
4
|
-
"version": "24.0.0-
|
|
4
|
+
"version": "24.0.0-beta2",
|
|
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-checkbox",
|
|
19
|
-
"description": "`<vaadin-checkbox>` is an input field representing a binary choice.\n\n```html\n<vaadin-checkbox label=\"I accept the terms and conditions\"></vaadin-checkbox>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n
|
|
19
|
+
"description": "`<vaadin-checkbox>` is an input field representing a binary choice.\n\n```html\n<vaadin-checkbox label=\"I accept the terms and conditions\"></vaadin-checkbox>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n------------|-------------\n`checkbox` | The element representing a stylable custom checkbox.\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n----------------|-------------\n`active` | Set when the checkbox is activated with mouse, touch or the keyboard.\n`checked` | Set when the checkbox is checked.\n`disabled` | Set when the checkbox is disabled.\n`focus-ring` | Set when the checkbox is focused using the keyboard.\n`focused` | Set when the checkbox is focused.\n`indeterminate` | Set when the checkbox is in the indeterminate state.\n`has-label` | Set when the checkbox has a label.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|
|
@@ -27,15 +27,15 @@
|
|
|
27
27
|
}
|
|
28
28
|
},
|
|
29
29
|
{
|
|
30
|
-
"name": "?
|
|
31
|
-
"description": "
|
|
30
|
+
"name": "?checked",
|
|
31
|
+
"description": "True if the element is checked.",
|
|
32
32
|
"value": {
|
|
33
33
|
"kind": "expression"
|
|
34
34
|
}
|
|
35
35
|
},
|
|
36
36
|
{
|
|
37
|
-
"name": "?
|
|
38
|
-
"description": "
|
|
37
|
+
"name": "?autofocus",
|
|
38
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
39
39
|
"value": {
|
|
40
40
|
"kind": "expression"
|
|
41
41
|
}
|
|
@@ -69,22 +69,22 @@
|
|
|
69
69
|
}
|
|
70
70
|
},
|
|
71
71
|
{
|
|
72
|
-
"name": "@
|
|
73
|
-
"description": "Fired when the `
|
|
72
|
+
"name": "@value-changed",
|
|
73
|
+
"description": "Fired when the `value` property changes.",
|
|
74
74
|
"value": {
|
|
75
75
|
"kind": "expression"
|
|
76
76
|
}
|
|
77
77
|
},
|
|
78
78
|
{
|
|
79
|
-
"name": "@
|
|
80
|
-
"description": "Fired when the `
|
|
79
|
+
"name": "@checked-changed",
|
|
80
|
+
"description": "Fired when the `checked` property changes.",
|
|
81
81
|
"value": {
|
|
82
82
|
"kind": "expression"
|
|
83
83
|
}
|
|
84
84
|
},
|
|
85
85
|
{
|
|
86
|
-
"name": "@
|
|
87
|
-
"description": "Fired when the `
|
|
86
|
+
"name": "@indeterminate-changed",
|
|
87
|
+
"description": "Fired when the `indeterminate` property changes.",
|
|
88
88
|
"value": {
|
|
89
89
|
"kind": "expression"
|
|
90
90
|
}
|