@vaadin/text-area 24.6.0-alpha8 → 24.6.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/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-beta1",
|
|
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-beta1",
|
|
40
|
+
"@vaadin/component-base": "24.6.0-beta1",
|
|
41
|
+
"@vaadin/field-base": "24.6.0-beta1",
|
|
42
|
+
"@vaadin/input-container": "24.6.0-beta1",
|
|
43
|
+
"@vaadin/vaadin-lumo-styles": "24.6.0-beta1",
|
|
44
|
+
"@vaadin/vaadin-material-styles": "24.6.0-beta1",
|
|
45
|
+
"@vaadin/vaadin-themable-mixin": "24.6.0-beta1",
|
|
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-beta1",
|
|
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": "ab28efb0dcf2cd1ef72100e2e8f32232fa49aacc"
|
|
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
|
/**
|
|
@@ -30,6 +30,12 @@ const textArea = css`
|
|
|
30
30
|
top: 0;
|
|
31
31
|
align-self: flex-start;
|
|
32
32
|
}
|
|
33
|
+
|
|
34
|
+
/* Align prefix/suffix icon or text with native textarea */
|
|
35
|
+
[part='input-field'] ::slotted([slot$='fix']) {
|
|
36
|
+
top: 4px;
|
|
37
|
+
margin-top: 4px;
|
|
38
|
+
}
|
|
33
39
|
`;
|
|
34
40
|
|
|
35
41
|
registerStyles('vaadin-text-area', [inputFieldShared, textArea], { moduleId: 'material-text-area' });
|
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-beta1",
|
|
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-beta1/#/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",
|
|
@@ -274,6 +274,28 @@
|
|
|
274
274
|
]
|
|
275
275
|
}
|
|
276
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
|
+
},
|
|
277
299
|
{
|
|
278
300
|
"name": "theme",
|
|
279
301
|
"description": "The theme variants to apply to the component.",
|
|
@@ -551,6 +573,28 @@
|
|
|
551
573
|
"undefined"
|
|
552
574
|
]
|
|
553
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
|
+
}
|
|
554
598
|
}
|
|
555
599
|
],
|
|
556
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-beta1",
|
|
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-beta1/#/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
|
{
|
|
@@ -187,6 +187,20 @@
|
|
|
187
187
|
"kind": "expression"
|
|
188
188
|
}
|
|
189
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
|
+
},
|
|
190
204
|
{
|
|
191
205
|
"name": "@validated",
|
|
192
206
|
"description": "Fired whenever the field is validated.",
|