@vaadin/field-base 25.2.0-alpha8 → 25.2.0-beta1
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/custom-elements.json +1141 -13
- package/package.json +7 -7
- package/src/checked-mixin.js +0 -5
- package/src/clear-button-mixin.js +0 -4
- package/src/error-controller.d.ts +2 -0
- package/src/field-mixin.js +1 -5
- package/src/helper-controller.d.ts +2 -0
- package/src/input-constraints-mixin.js +100 -104
- package/src/input-control-mixin.js +0 -21
- package/src/input-controller.d.ts +3 -1
- package/src/input-field-mixin.js +0 -3
- package/src/input-mixin.js +208 -209
- package/src/label-controller.d.ts +2 -0
- package/src/label-mixin.js +1 -3
- package/src/labelled-input-controller.d.ts +17 -1
- package/src/pattern-mixin.js +0 -3
- package/src/styles/checkable-base-styles.js +1 -1
- package/src/text-area-controller.d.ts +3 -1
- package/src/validate-mixin.js +86 -96
- package/src/virtual-keyboard-controller.d.ts +8 -0
package/src/validate-mixin.js
CHANGED
|
@@ -7,110 +7,100 @@ import { dedupeMixin } from '@open-wc/dedupe-mixin';
|
|
|
7
7
|
|
|
8
8
|
/**
|
|
9
9
|
* A mixin to provide required state and validation logic.
|
|
10
|
-
*
|
|
11
|
-
* @polymerMixin
|
|
12
10
|
*/
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
},
|
|
11
|
+
const ValidateMixinImplementation = (superclass) =>
|
|
12
|
+
class extends superclass {
|
|
13
|
+
static get properties() {
|
|
14
|
+
return {
|
|
15
|
+
/**
|
|
16
|
+
* Set to true when the field is invalid.
|
|
17
|
+
*/
|
|
18
|
+
invalid: {
|
|
19
|
+
type: Boolean,
|
|
20
|
+
reflectToAttribute: true,
|
|
21
|
+
notify: true,
|
|
22
|
+
value: false,
|
|
23
|
+
sync: true,
|
|
24
|
+
},
|
|
28
25
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
26
|
+
/**
|
|
27
|
+
* Set to true to enable manual validation mode. This mode disables automatic
|
|
28
|
+
* constraint validation, allowing you to control the validation process yourself.
|
|
29
|
+
* You can still trigger constraint validation manually with the `validate()` method
|
|
30
|
+
* or use `checkValidity()` to assess the component's validity without affecting
|
|
31
|
+
* the invalid state. In manual validation mode, you can also manipulate
|
|
32
|
+
* the `invalid` property directly through your application logic without conflicts
|
|
33
|
+
* with the component's internal validation.
|
|
34
|
+
*
|
|
35
|
+
* @attr {boolean} manual-validation
|
|
36
|
+
*/
|
|
37
|
+
manualValidation: {
|
|
38
|
+
type: Boolean,
|
|
39
|
+
value: false,
|
|
40
|
+
},
|
|
44
41
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
42
|
+
/**
|
|
43
|
+
* Specifies that the user must fill in a value.
|
|
44
|
+
*/
|
|
45
|
+
required: {
|
|
46
|
+
type: Boolean,
|
|
47
|
+
reflectToAttribute: true,
|
|
48
|
+
sync: true,
|
|
49
|
+
},
|
|
50
|
+
};
|
|
51
|
+
}
|
|
55
52
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
53
|
+
/**
|
|
54
|
+
* Validates the field and sets the `invalid` property based on the result.
|
|
55
|
+
*
|
|
56
|
+
* The method fires a `validated` event with the result of the validation.
|
|
57
|
+
*
|
|
58
|
+
* @return {boolean} True if the value is valid.
|
|
59
|
+
*/
|
|
60
|
+
validate() {
|
|
61
|
+
const isValid = this.checkValidity();
|
|
62
|
+
this._setInvalid(!isValid);
|
|
63
|
+
this.dispatchEvent(new CustomEvent('validated', { detail: { valid: isValid } }));
|
|
64
|
+
return isValid;
|
|
65
|
+
}
|
|
69
66
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
67
|
+
/**
|
|
68
|
+
* Returns true if the field value satisfies all constraints (if any).
|
|
69
|
+
*
|
|
70
|
+
* @return {boolean}
|
|
71
|
+
*/
|
|
72
|
+
checkValidity() {
|
|
73
|
+
return !this.required || !!this.value;
|
|
74
|
+
}
|
|
78
75
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
}
|
|
76
|
+
/**
|
|
77
|
+
* @param {boolean} invalid
|
|
78
|
+
* @protected
|
|
79
|
+
*/
|
|
80
|
+
_setInvalid(invalid) {
|
|
81
|
+
if (this._shouldSetInvalid(invalid)) {
|
|
82
|
+
this.invalid = invalid;
|
|
87
83
|
}
|
|
84
|
+
}
|
|
88
85
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
86
|
+
/**
|
|
87
|
+
* Override this method to define whether the given `invalid` state should be set.
|
|
88
|
+
*
|
|
89
|
+
* @param {boolean} _invalid
|
|
90
|
+
* @return {boolean}
|
|
91
|
+
* @protected
|
|
92
|
+
*/
|
|
93
|
+
_shouldSetInvalid(_invalid) {
|
|
94
|
+
return true;
|
|
95
|
+
}
|
|
99
96
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
}
|
|
97
|
+
/** @protected */
|
|
98
|
+
_requestValidation() {
|
|
99
|
+
if (!this.manualValidation) {
|
|
100
|
+
// eslint-disable-next-line no-restricted-syntax
|
|
101
|
+
this.validate();
|
|
106
102
|
}
|
|
103
|
+
}
|
|
104
|
+
};
|
|
107
105
|
|
|
108
|
-
|
|
109
|
-
* Fired whenever the field is validated.
|
|
110
|
-
*
|
|
111
|
-
* @event validated
|
|
112
|
-
* @param {Object} detail
|
|
113
|
-
* @param {boolean} detail.valid the result of the validation.
|
|
114
|
-
*/
|
|
115
|
-
},
|
|
116
|
-
);
|
|
106
|
+
export const ValidateMixin = dedupeMixin(ValidateMixinImplementation);
|
|
@@ -11,4 +11,12 @@ import type { ReactiveController } from 'lit';
|
|
|
11
11
|
*/
|
|
12
12
|
export class VirtualKeyboardController implements ReactiveController {
|
|
13
13
|
constructor(host: HTMLElement & { inputElement?: HTMLElement; opened: boolean });
|
|
14
|
+
|
|
15
|
+
/**
|
|
16
|
+
* Phantom optional method to satisfy the `ReactiveController` interface
|
|
17
|
+
* (TS2559: an interface with all-optional members needs at least one
|
|
18
|
+
* declared property in common). Not implemented at runtime; Lit's
|
|
19
|
+
* `addController` invokes it via optional chaining.
|
|
20
|
+
*/
|
|
21
|
+
hostConnected?(): void;
|
|
14
22
|
}
|