@vaadin/text-area 24.6.0-alpha7 → 24.6.0-alpha9
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 +10 -10
- package/src/vaadin-text-area-mixin.d.ts +17 -0
- package/src/vaadin-text-area-mixin.js +92 -8
- package/src/vaadin-text-area-styles.js +1 -0
- package/web-types.json +68 -2
- package/web-types.lit.json +23 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/text-area",
|
|
3
|
-
"version": "24.6.0-
|
|
3
|
+
"version": "24.6.0-alpha9",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -36,17 +36,17 @@
|
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
38
|
"@polymer/polymer": "^3.0.0",
|
|
39
|
-
"@vaadin/a11y-base": "24.6.0-
|
|
40
|
-
"@vaadin/component-base": "24.6.0-
|
|
41
|
-
"@vaadin/field-base": "24.6.0-
|
|
42
|
-
"@vaadin/input-container": "24.6.0-
|
|
43
|
-
"@vaadin/vaadin-lumo-styles": "24.6.0-
|
|
44
|
-
"@vaadin/vaadin-material-styles": "24.6.0-
|
|
45
|
-
"@vaadin/vaadin-themable-mixin": "24.6.0-
|
|
39
|
+
"@vaadin/a11y-base": "24.6.0-alpha9",
|
|
40
|
+
"@vaadin/component-base": "24.6.0-alpha9",
|
|
41
|
+
"@vaadin/field-base": "24.6.0-alpha9",
|
|
42
|
+
"@vaadin/input-container": "24.6.0-alpha9",
|
|
43
|
+
"@vaadin/vaadin-lumo-styles": "24.6.0-alpha9",
|
|
44
|
+
"@vaadin/vaadin-material-styles": "24.6.0-alpha9",
|
|
45
|
+
"@vaadin/vaadin-themable-mixin": "24.6.0-alpha9",
|
|
46
46
|
"lit": "^3.0.0"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
|
-
"@vaadin/chai-plugins": "24.6.0-
|
|
49
|
+
"@vaadin/chai-plugins": "24.6.0-alpha9",
|
|
50
50
|
"@vaadin/testing-helpers": "^1.0.0",
|
|
51
51
|
"sinon": "^18.0.0"
|
|
52
52
|
},
|
|
@@ -54,5 +54,5 @@
|
|
|
54
54
|
"web-types.json",
|
|
55
55
|
"web-types.lit.json"
|
|
56
56
|
],
|
|
57
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "e303d77ba20c3089c9998be9a318733d9ec5b53c"
|
|
58
58
|
}
|
|
@@ -62,6 +62,23 @@ export declare class TextAreaMixinClass {
|
|
|
62
62
|
*/
|
|
63
63
|
pattern: string;
|
|
64
64
|
|
|
65
|
+
/**
|
|
66
|
+
* Minimum number of rows to show. Default is two rows, which is also the minimum value.
|
|
67
|
+
*
|
|
68
|
+
* When using a custom slotted textarea, the minimum number of rows are not applied for backwards compatibility.
|
|
69
|
+
*
|
|
70
|
+
* @attr {number} min-rows
|
|
71
|
+
*/
|
|
72
|
+
minRows: number;
|
|
73
|
+
|
|
74
|
+
/**
|
|
75
|
+
* Maximum number of rows to expand to before the text area starts scrolling. This effectively sets a max-height
|
|
76
|
+
* on the `input-field` part. By default, it is not set, and the text area grows with the content without
|
|
77
|
+
* constraints.
|
|
78
|
+
* @attr {number} max-rows
|
|
79
|
+
*/
|
|
80
|
+
maxRows: number | null | undefined;
|
|
81
|
+
|
|
65
82
|
/**
|
|
66
83
|
* Scrolls the textarea to the start if it has a vertical scrollbar.
|
|
67
84
|
*/
|
|
@@ -40,6 +40,29 @@ export const TextAreaMixin = (superClass) =>
|
|
|
40
40
|
pattern: {
|
|
41
41
|
type: String,
|
|
42
42
|
},
|
|
43
|
+
|
|
44
|
+
/**
|
|
45
|
+
* Minimum number of rows to show. Default is two rows, which is also the minimum value.
|
|
46
|
+
*
|
|
47
|
+
* When using a custom slotted textarea, the minimum number of rows are not applied for backwards compatibility.
|
|
48
|
+
*
|
|
49
|
+
* @attr {number} min-rows
|
|
50
|
+
*/
|
|
51
|
+
minRows: {
|
|
52
|
+
type: Number,
|
|
53
|
+
value: 2,
|
|
54
|
+
observer: '__minRowsChanged',
|
|
55
|
+
},
|
|
56
|
+
|
|
57
|
+
/**
|
|
58
|
+
* Maximum number of rows to expand to before the text area starts scrolling. This effectively sets a max-height
|
|
59
|
+
* on the `input-field` part. By default, it is not set, and the text area grows with the content without
|
|
60
|
+
* constraints.
|
|
61
|
+
* @attr {number} max-rows
|
|
62
|
+
*/
|
|
63
|
+
maxRows: {
|
|
64
|
+
type: Number,
|
|
65
|
+
},
|
|
43
66
|
};
|
|
44
67
|
}
|
|
45
68
|
|
|
@@ -51,6 +74,10 @@ export const TextAreaMixin = (superClass) =>
|
|
|
51
74
|
return [...super.constraints, 'maxlength', 'minlength', 'pattern'];
|
|
52
75
|
}
|
|
53
76
|
|
|
77
|
+
static get observers() {
|
|
78
|
+
return ['__updateMinHeight(minRows, inputElement)', '__updateMaxHeight(maxRows, inputElement, _inputField)'];
|
|
79
|
+
}
|
|
80
|
+
|
|
54
81
|
/**
|
|
55
82
|
* Used by `InputControlMixin` as a reference to the clear button element.
|
|
56
83
|
* @protected
|
|
@@ -77,14 +104,13 @@ export const TextAreaMixin = (superClass) =>
|
|
|
77
104
|
ready() {
|
|
78
105
|
super.ready();
|
|
79
106
|
|
|
80
|
-
this.
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
);
|
|
107
|
+
this.__textAreaController = new TextAreaController(this, (input) => {
|
|
108
|
+
this._setInputElement(input);
|
|
109
|
+
this._setFocusElement(input);
|
|
110
|
+
this.stateTarget = input;
|
|
111
|
+
this.ariaTarget = input;
|
|
112
|
+
});
|
|
113
|
+
this.addController(this.__textAreaController);
|
|
88
114
|
this.addController(new LabelledInputController(this.inputElement, this._labelController));
|
|
89
115
|
|
|
90
116
|
this.addEventListener('animationend', this._onAnimationEnd);
|
|
@@ -176,6 +202,64 @@ export const TextAreaMixin = (superClass) =>
|
|
|
176
202
|
inputField.style.removeProperty('display');
|
|
177
203
|
inputField.style.removeProperty('height');
|
|
178
204
|
inputField.scrollTop = scrollTop;
|
|
205
|
+
|
|
206
|
+
// Update max height in case this update was triggered by style changes
|
|
207
|
+
// affecting line height, paddings or margins.
|
|
208
|
+
this.__updateMaxHeight(this.maxRows);
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
/** @private */
|
|
212
|
+
__updateMinHeight(minRows) {
|
|
213
|
+
if (!this.inputElement) {
|
|
214
|
+
return;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
// For minimum height, just set the number of rows on the native textarea,
|
|
218
|
+
// which causes the input container to grow as well.
|
|
219
|
+
// Do not override this on custom slotted textarea as number of rows may
|
|
220
|
+
// have been configured there.
|
|
221
|
+
if (this.inputElement === this.__textAreaController.defaultNode) {
|
|
222
|
+
this.inputElement.rows = Math.max(minRows, 2);
|
|
223
|
+
}
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
/** @private */
|
|
227
|
+
__updateMaxHeight(maxRows) {
|
|
228
|
+
if (!this._inputField || !this.inputElement) {
|
|
229
|
+
return;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
if (maxRows) {
|
|
233
|
+
// For maximum height, we need to constrain the height of the input
|
|
234
|
+
// container to prevent it from growing further. For this we take the
|
|
235
|
+
// line height of the native textarea times the number of rows, and add
|
|
236
|
+
// other properties affecting the height of the input container.
|
|
237
|
+
const inputStyle = getComputedStyle(this.inputElement);
|
|
238
|
+
const inputFieldStyle = getComputedStyle(this._inputField);
|
|
239
|
+
|
|
240
|
+
const lineHeight = parseFloat(inputStyle.lineHeight);
|
|
241
|
+
const contentHeight = lineHeight * maxRows;
|
|
242
|
+
const marginsAndPaddings =
|
|
243
|
+
parseFloat(inputStyle.paddingTop) +
|
|
244
|
+
parseFloat(inputStyle.paddingBottom) +
|
|
245
|
+
parseFloat(inputStyle.marginTop) +
|
|
246
|
+
parseFloat(inputStyle.marginBottom) +
|
|
247
|
+
parseFloat(inputFieldStyle.paddingTop) +
|
|
248
|
+
parseFloat(inputFieldStyle.paddingBottom);
|
|
249
|
+
const maxHeight = Math.ceil(contentHeight + marginsAndPaddings);
|
|
250
|
+
this._inputField.style.setProperty('max-height', `${maxHeight}px`);
|
|
251
|
+
} else {
|
|
252
|
+
this._inputField.style.removeProperty('max-height');
|
|
253
|
+
}
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
/**
|
|
257
|
+
* @private
|
|
258
|
+
*/
|
|
259
|
+
__minRowsChanged(minRows) {
|
|
260
|
+
if (minRows < 2) {
|
|
261
|
+
console.warn('<vaadin-text-area> minRows must be at least 2.');
|
|
262
|
+
}
|
|
179
263
|
}
|
|
180
264
|
|
|
181
265
|
/**
|
package/web-types.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/text-area",
|
|
4
|
-
"version": "24.6.0-
|
|
4
|
+
"version": "24.6.0-alpha9",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-text-area",
|
|
11
|
-
"description": "`<vaadin-text-area>` is a web component for multi-line text input.\n\n```html\n<vaadin-text-area label=\"Comment\"></vaadin-text-area>\n```\n\n### Prefixes and suffixes\n\nThese are child elements of a `<vaadin-text-area>` that are displayed\ninline with the input, before or after.\nIn order for an element to be considered as a prefix, it must have the slot\nattribute set to `prefix` (and similarly for `suffix`).\n\n```html\n<vaadin-text-area label=\"Description\">\n <div slot=\"prefix\">Details:</div>\n <div slot=\"suffix\">The end!</div>\n</vaadin-text-area>\n```\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-text-area>` 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.6.0-
|
|
11
|
+
"description": "`<vaadin-text-area>` is a web component for multi-line text input.\n\n```html\n<vaadin-text-area label=\"Comment\"></vaadin-text-area>\n```\n\n### Prefixes and suffixes\n\nThese are child elements of a `<vaadin-text-area>` that are displayed\ninline with the input, before or after.\nIn order for an element to be considered as a prefix, it must have the slot\nattribute set to `prefix` (and similarly for `suffix`).\n\n```html\n<vaadin-text-area label=\"Description\">\n <div slot=\"prefix\">Details:</div>\n <div slot=\"suffix\">The end!</div>\n</vaadin-text-area>\n```\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-text-area>` 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.6.0-alpha9/#/elements/vaadin-text-field) for the styling documentation.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "disabled",
|
|
@@ -54,6 +54,17 @@
|
|
|
54
54
|
]
|
|
55
55
|
}
|
|
56
56
|
},
|
|
57
|
+
{
|
|
58
|
+
"name": "manual-validation",
|
|
59
|
+
"description": "Set to true to enable manual validation mode. This mode disables automatic\nconstraint validation, allowing you to control the validation process yourself.\nYou can still trigger constraint validation manually with the `validate()` method\nor use `checkValidity()` to assess the component's validity without affecting\nthe invalid state. In manual validation mode, you can also manipulate\nthe `invalid` property directly through your application logic without conflicts\nwith the component's internal validation.",
|
|
60
|
+
"value": {
|
|
61
|
+
"type": [
|
|
62
|
+
"boolean",
|
|
63
|
+
"null",
|
|
64
|
+
"undefined"
|
|
65
|
+
]
|
|
66
|
+
}
|
|
67
|
+
},
|
|
57
68
|
{
|
|
58
69
|
"name": "required",
|
|
59
70
|
"description": "Specifies that the user must fill in a value.",
|
|
@@ -263,6 +274,28 @@
|
|
|
263
274
|
]
|
|
264
275
|
}
|
|
265
276
|
},
|
|
277
|
+
{
|
|
278
|
+
"name": "min-rows",
|
|
279
|
+
"description": "Minimum number of rows to show. Default is two rows, which is also the minimum value.\n\nWhen using a custom slotted textarea, the minimum number of rows are not applied for backwards compatibility.",
|
|
280
|
+
"value": {
|
|
281
|
+
"type": [
|
|
282
|
+
"number",
|
|
283
|
+
"null",
|
|
284
|
+
"undefined"
|
|
285
|
+
]
|
|
286
|
+
}
|
|
287
|
+
},
|
|
288
|
+
{
|
|
289
|
+
"name": "max-rows",
|
|
290
|
+
"description": "Maximum number of rows to expand to before the text area starts scrolling. This effectively sets a max-height\non the `input-field` part. By default, it is not set, and the text area grows with the content without\nconstraints.",
|
|
291
|
+
"value": {
|
|
292
|
+
"type": [
|
|
293
|
+
"number",
|
|
294
|
+
"null",
|
|
295
|
+
"undefined"
|
|
296
|
+
]
|
|
297
|
+
}
|
|
298
|
+
},
|
|
266
299
|
{
|
|
267
300
|
"name": "theme",
|
|
268
301
|
"description": "The theme variants to apply to the component.",
|
|
@@ -321,6 +354,17 @@
|
|
|
321
354
|
]
|
|
322
355
|
}
|
|
323
356
|
},
|
|
357
|
+
{
|
|
358
|
+
"name": "manualValidation",
|
|
359
|
+
"description": "Set to true to enable manual validation mode. This mode disables automatic\nconstraint validation, allowing you to control the validation process yourself.\nYou can still trigger constraint validation manually with the `validate()` method\nor use `checkValidity()` to assess the component's validity without affecting\nthe invalid state. In manual validation mode, you can also manipulate\nthe `invalid` property directly through your application logic without conflicts\nwith the component's internal validation.",
|
|
360
|
+
"value": {
|
|
361
|
+
"type": [
|
|
362
|
+
"boolean",
|
|
363
|
+
"null",
|
|
364
|
+
"undefined"
|
|
365
|
+
]
|
|
366
|
+
}
|
|
367
|
+
},
|
|
324
368
|
{
|
|
325
369
|
"name": "required",
|
|
326
370
|
"description": "Specifies that the user must fill in a value.",
|
|
@@ -529,6 +573,28 @@
|
|
|
529
573
|
"undefined"
|
|
530
574
|
]
|
|
531
575
|
}
|
|
576
|
+
},
|
|
577
|
+
{
|
|
578
|
+
"name": "minRows",
|
|
579
|
+
"description": "Minimum number of rows to show. Default is two rows, which is also the minimum value.\n\nWhen using a custom slotted textarea, the minimum number of rows are not applied for backwards compatibility.",
|
|
580
|
+
"value": {
|
|
581
|
+
"type": [
|
|
582
|
+
"number",
|
|
583
|
+
"null",
|
|
584
|
+
"undefined"
|
|
585
|
+
]
|
|
586
|
+
}
|
|
587
|
+
},
|
|
588
|
+
{
|
|
589
|
+
"name": "maxRows",
|
|
590
|
+
"description": "Maximum number of rows to expand to before the text area starts scrolling. This effectively sets a max-height\non the `input-field` part. By default, it is not set, and the text area grows with the content without\nconstraints.",
|
|
591
|
+
"value": {
|
|
592
|
+
"type": [
|
|
593
|
+
"number",
|
|
594
|
+
"null",
|
|
595
|
+
"undefined"
|
|
596
|
+
]
|
|
597
|
+
}
|
|
532
598
|
}
|
|
533
599
|
],
|
|
534
600
|
"events": [
|
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/text-area",
|
|
4
|
-
"version": "24.6.0-
|
|
4
|
+
"version": "24.6.0-alpha9",
|
|
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-text-area",
|
|
19
|
-
"description": "`<vaadin-text-area>` is a web component for multi-line text input.\n\n```html\n<vaadin-text-area label=\"Comment\"></vaadin-text-area>\n```\n\n### Prefixes and suffixes\n\nThese are child elements of a `<vaadin-text-area>` that are displayed\ninline with the input, before or after.\nIn order for an element to be considered as a prefix, it must have the slot\nattribute set to `prefix` (and similarly for `suffix`).\n\n```html\n<vaadin-text-area label=\"Description\">\n <div slot=\"prefix\">Details:</div>\n <div slot=\"suffix\">The end!</div>\n</vaadin-text-area>\n```\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-text-area>` 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.6.0-
|
|
19
|
+
"description": "`<vaadin-text-area>` is a web component for multi-line text input.\n\n```html\n<vaadin-text-area label=\"Comment\"></vaadin-text-area>\n```\n\n### Prefixes and suffixes\n\nThese are child elements of a `<vaadin-text-area>` that are displayed\ninline with the input, before or after.\nIn order for an element to be considered as a prefix, it must have the slot\nattribute set to `prefix` (and similarly for `suffix`).\n\n```html\n<vaadin-text-area label=\"Description\">\n <div slot=\"prefix\">Details:</div>\n <div slot=\"suffix\">The end!</div>\n</vaadin-text-area>\n```\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-text-area>` 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.6.0-alpha9/#/elements/vaadin-text-field) for the styling documentation.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|
|
@@ -40,6 +40,13 @@
|
|
|
40
40
|
"kind": "expression"
|
|
41
41
|
}
|
|
42
42
|
},
|
|
43
|
+
{
|
|
44
|
+
"name": "?manualValidation",
|
|
45
|
+
"description": "Set to true to enable manual validation mode. This mode disables automatic\nconstraint validation, allowing you to control the validation process yourself.\nYou can still trigger constraint validation manually with the `validate()` method\nor use `checkValidity()` to assess the component's validity without affecting\nthe invalid state. In manual validation mode, you can also manipulate\nthe `invalid` property directly through your application logic without conflicts\nwith the component's internal validation.",
|
|
46
|
+
"value": {
|
|
47
|
+
"kind": "expression"
|
|
48
|
+
}
|
|
49
|
+
},
|
|
43
50
|
{
|
|
44
51
|
"name": "?required",
|
|
45
52
|
"description": "Specifies that the user must fill in a value.",
|
|
@@ -180,6 +187,20 @@
|
|
|
180
187
|
"kind": "expression"
|
|
181
188
|
}
|
|
182
189
|
},
|
|
190
|
+
{
|
|
191
|
+
"name": ".minRows",
|
|
192
|
+
"description": "Minimum number of rows to show. Default is two rows, which is also the minimum value.\n\nWhen using a custom slotted textarea, the minimum number of rows are not applied for backwards compatibility.",
|
|
193
|
+
"value": {
|
|
194
|
+
"kind": "expression"
|
|
195
|
+
}
|
|
196
|
+
},
|
|
197
|
+
{
|
|
198
|
+
"name": ".maxRows",
|
|
199
|
+
"description": "Maximum number of rows to expand to before the text area starts scrolling. This effectively sets a max-height\non the `input-field` part. By default, it is not set, and the text area grows with the content without\nconstraints.",
|
|
200
|
+
"value": {
|
|
201
|
+
"kind": "expression"
|
|
202
|
+
}
|
|
203
|
+
},
|
|
183
204
|
{
|
|
184
205
|
"name": "@validated",
|
|
185
206
|
"description": "Fired whenever the field is validated.",
|