@vaadin/form-layout 24.8.0-alpha1 → 24.8.0-alpha11
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 +11 -11
- package/src/layouts/auto-responsive-layout.js +7 -2
- package/src/layouts/responsive-steps-layout.js +23 -1
- package/src/vaadin-form-item-mixin.js +33 -27
- package/src/vaadin-form-layout-mixin.d.ts +41 -13
- package/src/vaadin-form-layout-mixin.js +52 -15
- package/src/vaadin-form-layout-styles.js +1 -0
- package/src/vaadin-form-layout.d.ts +17 -2
- package/src/vaadin-form-layout.js +15 -2
- package/web-types.json +17 -17
- package/web-types.lit.json +10 -10
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/form-layout",
|
|
3
|
-
"version": "24.8.0-
|
|
3
|
+
"version": "24.8.0-alpha11",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -37,24 +37,24 @@
|
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
39
39
|
"@polymer/polymer": "^3.0.0",
|
|
40
|
-
"@vaadin/a11y-base": "24.8.0-
|
|
41
|
-
"@vaadin/component-base": "24.8.0-
|
|
42
|
-
"@vaadin/vaadin-lumo-styles": "24.8.0-
|
|
43
|
-
"@vaadin/vaadin-material-styles": "24.8.0-
|
|
44
|
-
"@vaadin/vaadin-themable-mixin": "24.8.0-
|
|
40
|
+
"@vaadin/a11y-base": "24.8.0-alpha11",
|
|
41
|
+
"@vaadin/component-base": "24.8.0-alpha11",
|
|
42
|
+
"@vaadin/vaadin-lumo-styles": "24.8.0-alpha11",
|
|
43
|
+
"@vaadin/vaadin-material-styles": "24.8.0-alpha11",
|
|
44
|
+
"@vaadin/vaadin-themable-mixin": "24.8.0-alpha11",
|
|
45
45
|
"lit": "^3.0.0"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
|
-
"@vaadin/chai-plugins": "24.8.0-
|
|
49
|
-
"@vaadin/custom-field": "24.8.0-
|
|
50
|
-
"@vaadin/test-runner-commands": "24.8.0-
|
|
48
|
+
"@vaadin/chai-plugins": "24.8.0-alpha11",
|
|
49
|
+
"@vaadin/custom-field": "24.8.0-alpha11",
|
|
50
|
+
"@vaadin/test-runner-commands": "24.8.0-alpha11",
|
|
51
51
|
"@vaadin/testing-helpers": "^1.1.0",
|
|
52
|
-
"@vaadin/text-field": "24.8.0-
|
|
52
|
+
"@vaadin/text-field": "24.8.0-alpha11",
|
|
53
53
|
"sinon": "^18.0.0"
|
|
54
54
|
},
|
|
55
55
|
"web-types": [
|
|
56
56
|
"web-types.json",
|
|
57
57
|
"web-types.lit.json"
|
|
58
58
|
],
|
|
59
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "be9c2d59f4b63ae58e85ccb3dfb78d5af2d2ac8a"
|
|
60
60
|
}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Copyright (c) 2021 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
|
-
import { isElementHidden } from '@vaadin/a11y-base/src/focus-utils';
|
|
6
|
+
import { isElementHidden } from '@vaadin/a11y-base/src/focus-utils.js';
|
|
7
7
|
import { AbstractLayout } from './abstract-layout.js';
|
|
8
8
|
|
|
9
9
|
/**
|
|
@@ -124,7 +124,12 @@ export class AutoResponsiveLayout extends AbstractLayout {
|
|
|
124
124
|
child.style.removeProperty('--_grid-colstart');
|
|
125
125
|
});
|
|
126
126
|
|
|
127
|
-
|
|
127
|
+
if (props.columnWidth) {
|
|
128
|
+
host.style.setProperty('--_column-width', props.columnWidth);
|
|
129
|
+
} else {
|
|
130
|
+
host.style.removeProperty('--_column-width');
|
|
131
|
+
}
|
|
132
|
+
|
|
128
133
|
host.style.setProperty('--_max-columns', Math.min(props.maxColumns, maxColumns));
|
|
129
134
|
|
|
130
135
|
host.$.layout.toggleAttribute('fits-labels-aside', this.props.labelsAside && this.__fitsLabelsAside);
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Copyright (c) 2021 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
|
-
import { isElementHidden } from '@vaadin/a11y-base/src/focus-utils';
|
|
6
|
+
import { isElementHidden } from '@vaadin/a11y-base/src/focus-utils.js';
|
|
7
7
|
import { AbstractLayout } from './abstract-layout.js';
|
|
8
8
|
|
|
9
9
|
function isValidCSSLength(value) {
|
|
@@ -53,6 +53,24 @@ export class ResponsiveStepsLayout extends AbstractLayout {
|
|
|
53
53
|
requestAnimationFrame(() => this.updateLayout());
|
|
54
54
|
}
|
|
55
55
|
|
|
56
|
+
/** @override */
|
|
57
|
+
disconnect() {
|
|
58
|
+
if (!this.isConnected) {
|
|
59
|
+
return;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
super.disconnect();
|
|
63
|
+
|
|
64
|
+
const { host } = this;
|
|
65
|
+
host.$.layout.style.removeProperty('opacity');
|
|
66
|
+
[...host.children].forEach((child) => {
|
|
67
|
+
child.style.removeProperty('width');
|
|
68
|
+
child.style.removeProperty('margin-left');
|
|
69
|
+
child.style.removeProperty('margin-right');
|
|
70
|
+
child.removeAttribute('label-position');
|
|
71
|
+
});
|
|
72
|
+
}
|
|
73
|
+
|
|
56
74
|
/** @override */
|
|
57
75
|
setProps(props) {
|
|
58
76
|
const { responsiveSteps } = props;
|
|
@@ -206,6 +224,10 @@ export class ResponsiveStepsLayout extends AbstractLayout {
|
|
|
206
224
|
|
|
207
225
|
/** @private */
|
|
208
226
|
__selectResponsiveStep() {
|
|
227
|
+
if (!this.isConnected) {
|
|
228
|
+
return;
|
|
229
|
+
}
|
|
230
|
+
|
|
209
231
|
const { host, props } = this;
|
|
210
232
|
// Iterate through responsiveSteps and choose the step
|
|
211
233
|
let selectedStep;
|
|
@@ -17,7 +17,8 @@ export const FormItemMixin = (superClass) =>
|
|
|
17
17
|
class extends superClass {
|
|
18
18
|
constructor() {
|
|
19
19
|
super();
|
|
20
|
-
|
|
20
|
+
|
|
21
|
+
this.__onFieldInteraction = this.__onFieldInteraction.bind(this);
|
|
21
22
|
|
|
22
23
|
/**
|
|
23
24
|
* An observer for a field node to reflect its `required` and `invalid` attributes to the component.
|
|
@@ -25,7 +26,7 @@ export const FormItemMixin = (superClass) =>
|
|
|
25
26
|
* @type {MutationObserver}
|
|
26
27
|
* @private
|
|
27
28
|
*/
|
|
28
|
-
this.__fieldNodeObserver = new MutationObserver(() => this.
|
|
29
|
+
this.__fieldNodeObserver = new MutationObserver(() => this.__synchronizeAttributes());
|
|
29
30
|
|
|
30
31
|
/**
|
|
31
32
|
* The first label node in the label slot.
|
|
@@ -44,6 +45,8 @@ export const FormItemMixin = (superClass) =>
|
|
|
44
45
|
* @private
|
|
45
46
|
*/
|
|
46
47
|
this.__fieldNode = null;
|
|
48
|
+
|
|
49
|
+
this.__isFieldDirty = false;
|
|
47
50
|
}
|
|
48
51
|
|
|
49
52
|
/** @protected */
|
|
@@ -122,11 +125,6 @@ export const FormItemMixin = (superClass) =>
|
|
|
122
125
|
}
|
|
123
126
|
}
|
|
124
127
|
|
|
125
|
-
/** @private */
|
|
126
|
-
__getValidateFunction(field) {
|
|
127
|
-
return field.validate || field.checkValidity;
|
|
128
|
-
}
|
|
129
|
-
|
|
130
128
|
/**
|
|
131
129
|
* A `slotchange` event handler for the label slot.
|
|
132
130
|
*
|
|
@@ -178,9 +176,11 @@ export const FormItemMixin = (superClass) =>
|
|
|
178
176
|
if (this.__fieldNode) {
|
|
179
177
|
// Discard the old field
|
|
180
178
|
this.__unlinkLabelFromField(this.__fieldNode);
|
|
181
|
-
this.__updateRequiredState(false);
|
|
182
179
|
this.__fieldNodeObserver.disconnect();
|
|
180
|
+
this.__fieldNode.removeEventListener('blur', this.__onFieldInteraction);
|
|
181
|
+
this.__fieldNode.removeEventListener('change', this.__onFieldInteraction);
|
|
183
182
|
this.__fieldNode = null;
|
|
183
|
+
this.__isFieldDirty = false;
|
|
184
184
|
}
|
|
185
185
|
|
|
186
186
|
const fieldNodes = this.$.contentSlot.assignedElements();
|
|
@@ -191,37 +191,43 @@ Please wrap fields with a <vaadin-custom-field> instead.`,
|
|
|
191
191
|
);
|
|
192
192
|
}
|
|
193
193
|
|
|
194
|
-
const newFieldNode = fieldNodes.find((field) =>
|
|
195
|
-
return !!this.__getValidateFunction(field);
|
|
196
|
-
});
|
|
194
|
+
const newFieldNode = fieldNodes.find((field) => field.validate || field.checkValidity);
|
|
197
195
|
if (newFieldNode) {
|
|
198
196
|
this.__fieldNode = newFieldNode;
|
|
199
|
-
this.
|
|
200
|
-
this.
|
|
197
|
+
this.__fieldNode.addEventListener('blur', this.__onFieldInteraction);
|
|
198
|
+
this.__fieldNode.addEventListener('change', this.__onFieldInteraction);
|
|
199
|
+
this.__fieldNodeObserver.observe(this.__fieldNode, {
|
|
200
|
+
attributes: true,
|
|
201
|
+
attributeFilter: ['required', 'invalid'],
|
|
202
|
+
});
|
|
201
203
|
|
|
202
204
|
if (this.__labelNode) {
|
|
203
205
|
this.__linkLabelToField(this.__fieldNode);
|
|
204
206
|
}
|
|
205
207
|
}
|
|
208
|
+
|
|
209
|
+
this.__synchronizeAttributes();
|
|
206
210
|
}
|
|
207
211
|
|
|
208
212
|
/** @private */
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
this.__fieldNode.addEventListener('blur', this.__updateInvalidState);
|
|
213
|
-
this.__fieldNode.addEventListener('change', this.__updateInvalidState);
|
|
214
|
-
} else {
|
|
215
|
-
this.removeAttribute('invalid');
|
|
216
|
-
this.removeAttribute('required');
|
|
217
|
-
this.__fieldNode.removeEventListener('blur', this.__updateInvalidState);
|
|
218
|
-
this.__fieldNode.removeEventListener('change', this.__updateInvalidState);
|
|
219
|
-
}
|
|
213
|
+
__onFieldInteraction() {
|
|
214
|
+
this.__isFieldDirty = true;
|
|
215
|
+
this.__synchronizeAttributes();
|
|
220
216
|
}
|
|
221
217
|
|
|
222
218
|
/** @private */
|
|
223
|
-
|
|
224
|
-
const
|
|
225
|
-
|
|
219
|
+
__synchronizeAttributes() {
|
|
220
|
+
const field = this.__fieldNode;
|
|
221
|
+
if (!field) {
|
|
222
|
+
this.removeAttribute('required');
|
|
223
|
+
this.removeAttribute('invalid');
|
|
224
|
+
return;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
this.toggleAttribute('required', field.hasAttribute('required'));
|
|
228
|
+
this.toggleAttribute(
|
|
229
|
+
'invalid',
|
|
230
|
+
field.hasAttribute('invalid') || (field.matches(':invalid') && this.__isFieldDirty),
|
|
231
|
+
);
|
|
226
232
|
}
|
|
227
233
|
};
|
|
@@ -30,6 +30,14 @@ export declare class FormLayoutMixinClass {
|
|
|
30
30
|
* with `minWidth` CSS length, `columns` number, and optional
|
|
31
31
|
* `labelsPosition` string of `"aside"` or `"top"`. At least one item is required.
|
|
32
32
|
*
|
|
33
|
+
* NOTE: Responsive steps are ignored in auto-responsive mode, which may be
|
|
34
|
+
* enabled explicitly via the `autoResponsive` property or implicitly
|
|
35
|
+
* if the following feature flag is set:
|
|
36
|
+
*
|
|
37
|
+
* ```
|
|
38
|
+
* window.Vaadin.featureFlags.defaultAutoResponsiveFormLayout = true
|
|
39
|
+
* ```
|
|
40
|
+
*
|
|
33
41
|
* #### Examples
|
|
34
42
|
*
|
|
35
43
|
* ```javascript
|
|
@@ -62,11 +70,11 @@ export declare class FormLayoutMixinClass {
|
|
|
62
70
|
responsiveSteps: FormLayoutResponsiveStep[];
|
|
63
71
|
|
|
64
72
|
/**
|
|
65
|
-
*
|
|
66
|
-
*
|
|
67
|
-
*
|
|
68
|
-
*
|
|
69
|
-
*
|
|
73
|
+
* When set to `true`, the component automatically creates and adjusts columns based on
|
|
74
|
+
* the container's width. Columns have a fixed width defined by `columnWidth` and their
|
|
75
|
+
* number increases up to the limit set by `maxColumns`. The component dynamically adjusts
|
|
76
|
+
* the number of columns as the container size changes. When this mode is enabled,
|
|
77
|
+
* `responsiveSteps` are ignored.
|
|
70
78
|
*
|
|
71
79
|
* By default, each field is placed on a new row. To organize fields into rows, there are
|
|
72
80
|
* two options:
|
|
@@ -76,14 +84,25 @@ export declare class FormLayoutMixinClass {
|
|
|
76
84
|
* 2. Enable the `autoRows` property to automatically arrange fields in available columns,
|
|
77
85
|
* wrapping to a new row when necessary. `<br>` elements can be used to force a new row.
|
|
78
86
|
*
|
|
87
|
+
* The auto-responsive mode is disabled by default. To enable it for an individual instance,
|
|
88
|
+
* use this property. Alternatively, if you want it to be enabled for all instances by default,
|
|
89
|
+
* enable the `defaultAutoResponsiveFormLayout` feature flag before `<vaadin-form-layout>`
|
|
90
|
+
* elements are added to the DOM:
|
|
91
|
+
*
|
|
92
|
+
* ```js
|
|
93
|
+
* window.Vaadin.featureFlags.defaultAutoResponsiveFormLayout = true;
|
|
94
|
+
* ```
|
|
95
|
+
*
|
|
79
96
|
* @attr {boolean} auto-responsive
|
|
80
97
|
*/
|
|
81
98
|
autoResponsive: boolean;
|
|
82
99
|
|
|
83
100
|
/**
|
|
84
101
|
* When `autoResponsive` is enabled, defines the width of each column.
|
|
85
|
-
* The value must be defined in CSS length units, e.g
|
|
86
|
-
*
|
|
102
|
+
* The value must be defined in CSS length units, e.g. `100px`.
|
|
103
|
+
*
|
|
104
|
+
* If the column width isn't explicitly set, it defaults to `12em`
|
|
105
|
+
* or `--vaadin-field-default-width` if that CSS property is defined.
|
|
87
106
|
*
|
|
88
107
|
* @attr {string} column-width
|
|
89
108
|
*/
|
|
@@ -92,7 +111,9 @@ export declare class FormLayoutMixinClass {
|
|
|
92
111
|
/**
|
|
93
112
|
* When `autoResponsive` is enabled, defines the maximum number of columns
|
|
94
113
|
* that the layout can create. The layout will create columns up to this
|
|
95
|
-
* limit based on the available container width.
|
|
114
|
+
* limit based on the available container width.
|
|
115
|
+
*
|
|
116
|
+
* The default value is `10`.
|
|
96
117
|
*
|
|
97
118
|
* @attr {number} max-columns
|
|
98
119
|
*/
|
|
@@ -104,6 +125,8 @@ export declare class FormLayoutMixinClass {
|
|
|
104
125
|
* the next row when the current row is full. `<br>` elements can be
|
|
105
126
|
* used to force a new row.
|
|
106
127
|
*
|
|
128
|
+
* The default value is `false`.
|
|
129
|
+
*
|
|
107
130
|
* @attr {boolean} auto-rows
|
|
108
131
|
*/
|
|
109
132
|
autoRows: boolean;
|
|
@@ -111,7 +134,10 @@ export declare class FormLayoutMixinClass {
|
|
|
111
134
|
/**
|
|
112
135
|
* When enabled with `autoResponsive`, `<vaadin-form-item>` prefers positioning
|
|
113
136
|
* labels beside the fields. If the layout is too narrow to fit a single column
|
|
114
|
-
* with side
|
|
137
|
+
* with a side label, the component will automatically switch labels to their
|
|
138
|
+
* default position above the fields.
|
|
139
|
+
*
|
|
140
|
+
* The default value is `false`.
|
|
115
141
|
*
|
|
116
142
|
* To customize the label width and the gap between the label and the field,
|
|
117
143
|
* use the following CSS properties:
|
|
@@ -125,9 +151,9 @@ export declare class FormLayoutMixinClass {
|
|
|
125
151
|
|
|
126
152
|
/**
|
|
127
153
|
* When `autoResponsive` is enabled, specifies whether the columns should expand
|
|
128
|
-
* in width to evenly fill any remaining space after
|
|
129
|
-
*
|
|
130
|
-
*
|
|
154
|
+
* in width to evenly fill any remaining space after all columns have been created.
|
|
155
|
+
*
|
|
156
|
+
* The default value is `false`.
|
|
131
157
|
*
|
|
132
158
|
* @attr {boolean} expand-columns
|
|
133
159
|
*/
|
|
@@ -136,7 +162,9 @@ export declare class FormLayoutMixinClass {
|
|
|
136
162
|
/**
|
|
137
163
|
* When `autoResponsive` is enabled, specifies whether fields should stretch
|
|
138
164
|
* to take up all available space within columns. This setting also applies
|
|
139
|
-
* to fields inside `<vaadin-form-item>` elements.
|
|
165
|
+
* to fields inside `<vaadin-form-item>` elements.
|
|
166
|
+
*
|
|
167
|
+
* The default value is `false`.
|
|
140
168
|
*
|
|
141
169
|
* @attr {boolean} expand-fields
|
|
142
170
|
*/
|
|
@@ -32,6 +32,14 @@ export const FormLayoutMixin = (superClass) =>
|
|
|
32
32
|
* with `minWidth` CSS length, `columns` number, and optional
|
|
33
33
|
* `labelsPosition` string of `"aside"` or `"top"`. At least one item is required.
|
|
34
34
|
*
|
|
35
|
+
* NOTE: Responsive steps are ignored in auto-responsive mode, which may be
|
|
36
|
+
* enabled explicitly via the `autoResponsive` property or implicitly
|
|
37
|
+
* if the following feature flag is set:
|
|
38
|
+
*
|
|
39
|
+
* ```
|
|
40
|
+
* window.Vaadin.featureFlags.defaultAutoResponsiveFormLayout = true
|
|
41
|
+
* ```
|
|
42
|
+
*
|
|
35
43
|
* #### Examples
|
|
36
44
|
*
|
|
37
45
|
* ```javascript
|
|
@@ -77,11 +85,11 @@ export const FormLayoutMixin = (superClass) =>
|
|
|
77
85
|
},
|
|
78
86
|
|
|
79
87
|
/**
|
|
80
|
-
*
|
|
81
|
-
*
|
|
82
|
-
*
|
|
83
|
-
*
|
|
84
|
-
*
|
|
88
|
+
* When set to `true`, the component automatically creates and adjusts columns based on
|
|
89
|
+
* the container's width. Columns have a fixed width defined by `columnWidth` and their
|
|
90
|
+
* number increases up to the limit set by `maxColumns`. The component dynamically adjusts
|
|
91
|
+
* the number of columns as the container size changes. When this mode is enabled,
|
|
92
|
+
* `responsiveSteps` are ignored.
|
|
85
93
|
*
|
|
86
94
|
* By default, each field is placed on a new row. To organize fields into rows, there are
|
|
87
95
|
* two options:
|
|
@@ -91,32 +99,54 @@ export const FormLayoutMixin = (superClass) =>
|
|
|
91
99
|
* 2. Enable the `autoRows` property to automatically arrange fields in available columns,
|
|
92
100
|
* wrapping to a new row when necessary. `<br>` elements can be used to force a new row.
|
|
93
101
|
*
|
|
102
|
+
* The auto-responsive mode is disabled by default. To enable it for an individual instance,
|
|
103
|
+
* use this property. Alternatively, if you want it to be enabled for all instances by default,
|
|
104
|
+
* enable the `defaultAutoResponsiveFormLayout` feature flag before `<vaadin-form-layout>`
|
|
105
|
+
* elements are added to the DOM:
|
|
106
|
+
*
|
|
107
|
+
* ```js
|
|
108
|
+
* window.Vaadin.featureFlags.defaultAutoResponsiveFormLayout = true;
|
|
109
|
+
* ```
|
|
110
|
+
*
|
|
94
111
|
* @attr {boolean} auto-responsive
|
|
95
112
|
*/
|
|
96
113
|
autoResponsive: {
|
|
97
114
|
type: Boolean,
|
|
98
115
|
sync: true,
|
|
99
|
-
value:
|
|
116
|
+
value: () => {
|
|
117
|
+
if (
|
|
118
|
+
window.Vaadin &&
|
|
119
|
+
window.Vaadin.featureFlags &&
|
|
120
|
+
window.Vaadin.featureFlags.defaultAutoResponsiveFormLayout
|
|
121
|
+
) {
|
|
122
|
+
return true;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
return false;
|
|
126
|
+
},
|
|
100
127
|
reflectToAttribute: true,
|
|
101
128
|
},
|
|
102
129
|
|
|
103
130
|
/**
|
|
104
131
|
* When `autoResponsive` is enabled, defines the width of each column.
|
|
105
|
-
* The value must be defined in CSS length units, e.g
|
|
106
|
-
*
|
|
132
|
+
* The value must be defined in CSS length units, e.g. `100px`.
|
|
133
|
+
*
|
|
134
|
+
* If the column width isn't explicitly set, it defaults to `12em`
|
|
135
|
+
* or `--vaadin-field-default-width` if that CSS property is defined.
|
|
107
136
|
*
|
|
108
137
|
* @attr {string} column-width
|
|
109
138
|
*/
|
|
110
139
|
columnWidth: {
|
|
111
140
|
type: String,
|
|
112
141
|
sync: true,
|
|
113
|
-
value: '13em',
|
|
114
142
|
},
|
|
115
143
|
|
|
116
144
|
/**
|
|
117
145
|
* When `autoResponsive` is enabled, defines the maximum number of columns
|
|
118
146
|
* that the layout can create. The layout will create columns up to this
|
|
119
|
-
* limit based on the available container width.
|
|
147
|
+
* limit based on the available container width.
|
|
148
|
+
*
|
|
149
|
+
* The default value is `10`.
|
|
120
150
|
*
|
|
121
151
|
* @attr {number} max-columns
|
|
122
152
|
*/
|
|
@@ -132,6 +162,8 @@ export const FormLayoutMixin = (superClass) =>
|
|
|
132
162
|
* the next row when the current row is full. `<br>` elements can be
|
|
133
163
|
* used to force a new row.
|
|
134
164
|
*
|
|
165
|
+
* The default value is `false`.
|
|
166
|
+
*
|
|
135
167
|
* @attr {boolean} auto-rows
|
|
136
168
|
*/
|
|
137
169
|
autoRows: {
|
|
@@ -144,7 +176,10 @@ export const FormLayoutMixin = (superClass) =>
|
|
|
144
176
|
/**
|
|
145
177
|
* When enabled with `autoResponsive`, `<vaadin-form-item>` prefers positioning
|
|
146
178
|
* labels beside the fields. If the layout is too narrow to fit a single column
|
|
147
|
-
* with side
|
|
179
|
+
* with a side label, the component will automatically switch labels to their
|
|
180
|
+
* default position above the fields.
|
|
181
|
+
*
|
|
182
|
+
* The default value is `false`.
|
|
148
183
|
*
|
|
149
184
|
* To customize the label width and the gap between the label and the field,
|
|
150
185
|
* use the following CSS properties:
|
|
@@ -163,9 +198,9 @@ export const FormLayoutMixin = (superClass) =>
|
|
|
163
198
|
|
|
164
199
|
/**
|
|
165
200
|
* When `autoResponsive` is enabled, specifies whether the columns should expand
|
|
166
|
-
* in width to evenly fill any remaining space after
|
|
167
|
-
*
|
|
168
|
-
*
|
|
201
|
+
* in width to evenly fill any remaining space after all columns have been created.
|
|
202
|
+
*
|
|
203
|
+
* The default value is `false`.
|
|
169
204
|
*
|
|
170
205
|
* @attr {boolean} expand-columns
|
|
171
206
|
*/
|
|
@@ -179,7 +214,9 @@ export const FormLayoutMixin = (superClass) =>
|
|
|
179
214
|
/**
|
|
180
215
|
* When `autoResponsive` is enabled, specifies whether fields should stretch
|
|
181
216
|
* to take up all available space within columns. This setting also applies
|
|
182
|
-
* to fields inside `<vaadin-form-item>` elements.
|
|
217
|
+
* to fields inside `<vaadin-form-item>` elements.
|
|
218
|
+
*
|
|
219
|
+
* The default value is `false`.
|
|
183
220
|
*
|
|
184
221
|
* @attr {boolean} expand-fields
|
|
185
222
|
*/
|
|
@@ -45,6 +45,7 @@ export const formLayoutStyles = css`
|
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
:host([auto-responsive]) {
|
|
48
|
+
--_column-width: var(--vaadin-field-default-width, 12em);
|
|
48
49
|
--_column-width-labels-above: var(--_column-width);
|
|
49
50
|
--_column-width-labels-aside: calc(
|
|
50
51
|
var(--_column-width) + var(--vaadin-form-layout-label-width) + var(--vaadin-form-layout-label-spacing)
|
|
@@ -94,9 +94,15 @@ export * from './vaadin-form-layout-mixin.js';
|
|
|
94
94
|
*
|
|
95
95
|
* To avoid manually dealing with responsive breakpoints, Form Layout provides an auto-responsive mode
|
|
96
96
|
* that automatically creates and adjusts fixed-width columns based on the container's available space.
|
|
97
|
+
*
|
|
97
98
|
* The [`columnWidth`](#/elements/vaadin-form-layout#property-columnWidth) and
|
|
98
|
-
* [`maxColumns`](#/elements/vaadin-form-layout#property-maxColumns) properties
|
|
99
|
-
*
|
|
99
|
+
* [`maxColumns`](#/elements/vaadin-form-layout#property-maxColumns) properties define the width of
|
|
100
|
+
* each column and the maximum number of columns that the component can create. By default, the component
|
|
101
|
+
* creates up to 10 columns, each with a width of `12em` or the value of the `--vaadin-field-default-width`
|
|
102
|
+
* CSS custom property, if defined.
|
|
103
|
+
*
|
|
104
|
+
* The auto-responsive mode is disabled by default. To enable it for an individual instance, set the
|
|
105
|
+
* `auto-responsive` attribute:
|
|
100
106
|
*
|
|
101
107
|
* ```html
|
|
102
108
|
* <vaadin-form-layout auto-responsive>
|
|
@@ -106,6 +112,13 @@ export * from './vaadin-form-layout-mixin.js';
|
|
|
106
112
|
* </vaadin-form-layout>
|
|
107
113
|
* ```
|
|
108
114
|
*
|
|
115
|
+
* You can also enable it for all instances by enabling the following feature flag
|
|
116
|
+
* before `<vaadin-form-layout>` elements are added to the DOM:
|
|
117
|
+
*
|
|
118
|
+
* ```js
|
|
119
|
+
* window.Vaadin.featureFlags.defaultAutoResponsiveFormLayout = true;
|
|
120
|
+
* ```
|
|
121
|
+
*
|
|
109
122
|
* #### Organizing Fields into Rows
|
|
110
123
|
*
|
|
111
124
|
* By default, each field is placed on a new row. To organize fields into rows, you can either:
|
|
@@ -181,6 +194,8 @@ export * from './vaadin-form-layout-mixin.js';
|
|
|
181
194
|
* ---|---|---
|
|
182
195
|
* `--vaadin-form-layout-column-spacing` | Length of the spacing between columns | `2em`
|
|
183
196
|
* `--vaadin-form-layout-row-spacing` | Length of the spacing between rows | `1em`
|
|
197
|
+
* `--vaadin-form-layout-label-width` | Width of the label when labels are displayed aside | `8em`
|
|
198
|
+
* `--vaadin-form-layout-label-spacing` | Length of the spacing between the label and the input when labels are displayed aside | `1em`
|
|
184
199
|
*/
|
|
185
200
|
declare class FormLayout extends FormLayoutMixin(ElementMixin(ThemableMixin(HTMLElement))) {}
|
|
186
201
|
|
|
@@ -97,9 +97,15 @@ registerStyles('vaadin-form-layout', formLayoutStyles, { moduleId: 'vaadin-form-
|
|
|
97
97
|
*
|
|
98
98
|
* To avoid manually dealing with responsive breakpoints, Form Layout provides an auto-responsive mode
|
|
99
99
|
* that automatically creates and adjusts fixed-width columns based on the container's available space.
|
|
100
|
+
*
|
|
100
101
|
* The [`columnWidth`](#/elements/vaadin-form-layout#property-columnWidth) and
|
|
101
|
-
* [`maxColumns`](#/elements/vaadin-form-layout#property-maxColumns) properties
|
|
102
|
-
*
|
|
102
|
+
* [`maxColumns`](#/elements/vaadin-form-layout#property-maxColumns) properties define the width of
|
|
103
|
+
* each column and the maximum number of columns that the component can create. By default, the component
|
|
104
|
+
* creates up to 10 columns, each with a width of `12em` or the value of the `--vaadin-field-default-width`
|
|
105
|
+
* CSS custom property, if defined.
|
|
106
|
+
*
|
|
107
|
+
* The auto-responsive mode is disabled by default. To enable it for an individual instance, set the
|
|
108
|
+
* `auto-responsive` attribute:
|
|
103
109
|
*
|
|
104
110
|
* ```html
|
|
105
111
|
* <vaadin-form-layout auto-responsive>
|
|
@@ -109,6 +115,13 @@ registerStyles('vaadin-form-layout', formLayoutStyles, { moduleId: 'vaadin-form-
|
|
|
109
115
|
* </vaadin-form-layout>
|
|
110
116
|
* ```
|
|
111
117
|
*
|
|
118
|
+
* You can also enable it for all instances by enabling the following feature flag
|
|
119
|
+
* before `<vaadin-form-layout>` elements are added to the DOM:
|
|
120
|
+
*
|
|
121
|
+
* ```js
|
|
122
|
+
* window.Vaadin.featureFlags.defaultAutoResponsiveFormLayout = true;
|
|
123
|
+
* ```
|
|
124
|
+
*
|
|
112
125
|
* #### Organizing Fields into Rows
|
|
113
126
|
*
|
|
114
127
|
* By default, each field is placed on a new row. To organize fields into rows, you can either:
|
package/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/form-layout",
|
|
4
|
-
"version": "24.8.0-
|
|
4
|
+
"version": "24.8.0-alpha11",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -29,11 +29,11 @@
|
|
|
29
29
|
},
|
|
30
30
|
{
|
|
31
31
|
"name": "vaadin-form-layout",
|
|
32
|
-
"description": "`<vaadin-form-layout>` is a Web Component providing configurable responsive\nlayout for form elements.\n\n```html\n<vaadin-form-layout>\n\n <vaadin-form-item>\n <label slot=\"label\">First Name</label>\n <input class=\"full-width\" value=\"Jane\">\n </vaadin-form-item>\n\n <vaadin-form-item>\n <label slot=\"label\">Last Name</label>\n <input class=\"full-width\" value=\"Doe\">\n </vaadin-form-item>\n\n <vaadin-form-item>\n <label slot=\"label\">Email</label>\n <input class=\"full-width\" value=\"jane.doe@example.com\">\n </vaadin-form-item>\n\n</vaadin-form-layout>\n```\n\nIt supports any child elements as layout items.\n\nBy default, it makes a layout of two columns if the element width is equal or\nwider than 40em, and a single column layout otherwise.\n\nThe number of columns and the responsive behavior are customizable with\nthe `responsiveSteps` property.\n\n### Spanning Items on Multiple Columns\n\nYou can use `colspan` or `data-colspan` attribute on the items.\nIn the example below, the first text field spans on two columns:\n\n```html\n<vaadin-form-layout>\n\n <vaadin-form-item colspan=\"2\">\n <label slot=\"label\">Address</label>\n <input class=\"full-width\">\n </vaadin-form-item>\n\n <vaadin-form-item>\n <label slot=\"label\">First Name</label>\n <input class=\"full-width\" value=\"Jane\">\n </vaadin-form-item>\n\n <vaadin-form-item>\n <label slot=\"label\">Last Name</label>\n <input class=\"full-width\" value=\"Doe\">\n </vaadin-form-item>\n\n</vaadin-form-layout>\n```\n\n### Explicit New Row\n\nUse the `<br>` line break element to wrap the items on a new row:\n\n```html\n<vaadin-form-layout>\n\n <vaadin-form-item>\n <label slot=\"label\">Email</label>\n <input class=\"full-width\">\n </vaadin-form-item>\n\n <br>\n\n <vaadin-form-item>\n <label slot=\"label\">Confirm Email</label>\n <input class=\"full-width\">\n </vaadin-form-item>\n\n</vaadin-form-layout>\n```\n\n### Auto Responsive Mode\n\nTo avoid manually dealing with responsive breakpoints, Form Layout provides an auto-responsive mode\nthat automatically creates and adjusts fixed-width columns based on the container's available space.\nThe [`columnWidth`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-
|
|
32
|
+
"description": "`<vaadin-form-layout>` is a Web Component providing configurable responsive\nlayout for form elements.\n\n```html\n<vaadin-form-layout>\n\n <vaadin-form-item>\n <label slot=\"label\">First Name</label>\n <input class=\"full-width\" value=\"Jane\">\n </vaadin-form-item>\n\n <vaadin-form-item>\n <label slot=\"label\">Last Name</label>\n <input class=\"full-width\" value=\"Doe\">\n </vaadin-form-item>\n\n <vaadin-form-item>\n <label slot=\"label\">Email</label>\n <input class=\"full-width\" value=\"jane.doe@example.com\">\n </vaadin-form-item>\n\n</vaadin-form-layout>\n```\n\nIt supports any child elements as layout items.\n\nBy default, it makes a layout of two columns if the element width is equal or\nwider than 40em, and a single column layout otherwise.\n\nThe number of columns and the responsive behavior are customizable with\nthe `responsiveSteps` property.\n\n### Spanning Items on Multiple Columns\n\nYou can use `colspan` or `data-colspan` attribute on the items.\nIn the example below, the first text field spans on two columns:\n\n```html\n<vaadin-form-layout>\n\n <vaadin-form-item colspan=\"2\">\n <label slot=\"label\">Address</label>\n <input class=\"full-width\">\n </vaadin-form-item>\n\n <vaadin-form-item>\n <label slot=\"label\">First Name</label>\n <input class=\"full-width\" value=\"Jane\">\n </vaadin-form-item>\n\n <vaadin-form-item>\n <label slot=\"label\">Last Name</label>\n <input class=\"full-width\" value=\"Doe\">\n </vaadin-form-item>\n\n</vaadin-form-layout>\n```\n\n### Explicit New Row\n\nUse the `<br>` line break element to wrap the items on a new row:\n\n```html\n<vaadin-form-layout>\n\n <vaadin-form-item>\n <label slot=\"label\">Email</label>\n <input class=\"full-width\">\n </vaadin-form-item>\n\n <br>\n\n <vaadin-form-item>\n <label slot=\"label\">Confirm Email</label>\n <input class=\"full-width\">\n </vaadin-form-item>\n\n</vaadin-form-layout>\n```\n\n### Auto Responsive Mode\n\nTo avoid manually dealing with responsive breakpoints, Form Layout provides an auto-responsive mode\nthat automatically creates and adjusts fixed-width columns based on the container's available space.\n\nThe [`columnWidth`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha11/#/elements/vaadin-form-layout#property-columnWidth) and\n[`maxColumns`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha11/#/elements/vaadin-form-layout#property-maxColumns) properties define the width of\neach column and the maximum number of columns that the component can create. By default, the component\ncreates up to 10 columns, each with a width of `12em` or the value of the `--vaadin-field-default-width`\nCSS custom property, if defined.\n\nThe auto-responsive mode is disabled by default. To enable it for an individual instance, set the\n`auto-responsive` attribute:\n\n```html\n<vaadin-form-layout auto-responsive>\n <vaadin-text-field label=\"First Name\"></vaadin-text-field>\n <vaadin-text-field label=\"Last Name\"></vaadin-text-field>\n <vaadin-text-area label=\"Address\" colspan=\"2\"></vaadin-text-area>\n</vaadin-form-layout>\n```\n\nYou can also enable it for all instances by enabling the following feature flag\nbefore `<vaadin-form-layout>` elements are added to the DOM:\n\n```js\nwindow.Vaadin.featureFlags.defaultAutoResponsiveFormLayout = true;\n```\n\n#### Organizing Fields into Rows\n\nBy default, each field is placed on a new row. To organize fields into rows, you can either:\n\n1. Manually wrap fields into [`<vaadin-form-row>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha11/#/elements/vaadin-form-row) elements.\n\n2. Enable the [`autoRows`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha11/#/elements/vaadin-form-layout#property-autoRows) property to\n let Form Layout automatically arrange fields in available columns, wrapping to a new\n row when necessary. `<br>` elements can be used to force a new row.\n\nHere is an example of using `<vaadin-form-row>`:\n\n```html\n<vaadin-form-layout auto-responsive>\n <vaadin-form-row>\n <vaadin-text-field label=\"First Name\"></vaadin-text-field>\n <vaadin-text-field label=\"Last Name\"></vaadin-text-field>\n </vaadin-form-row>\n <vaadin-form-row>\n <vaadin-text-area label=\"Address\" colspan=\"2\"></vaadin-text-area>\n </vaadin-form-row>\n</vaadin-form-layout>\n```\n\n#### Expanding Columns and Fields\n\nYou can configure Form Layout to expand columns to evenly fill any remaining space after\nall fixed-width columns have been created.\nTo enable this, set the [`expandColumns`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha11/#/elements/vaadin-form-layout#property-expandColumns)\nproperty to `true`.\n\nAlso, Form Layout can stretch fields to make them take up all available space within columns.\nTo enable this, set the [`expandFields`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha11/#/elements/vaadin-form-layout#property-expandFields)\nproperty to `true`.\n\n#### Customizing Label Position\n\nBy default, Form Layout displays labels above the fields. To position labels beside fields, you\nneed to wrap each field in a `<vaadin-form-item>` element and define its labels on the wrapper.\nThen, you can enable the [`labelsAside`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha11/#/elements/vaadin-form-layout#property-labelsAside)\nproperty:\n\n```html\n<vaadin-form-layout auto-responsive labels-aside>\n <vaadin-form-row>\n <vaadin-form-item>\n <label slot=\"label\">First Name</label>\n <vaadin-text-field></vaadin-text-field>\n </vaadin-form-item>\n <vaadin-form-item>\n <label slot=\"label\">Last Name</label>\n <vaadin-text-field></vaadin-text-field>\n </vaadin-form-item>\n </vaadin-form-row>\n <vaadin-form-row>\n <vaadin-form-item colspan=\"2\">\n <label slot=\"label\">Address</label>\n <vaadin-text-area></vaadin-text-area>\n </vaadin-form-item>\n </vaadin-form-row>\n</vaadin-form-layout>\n```\n\nWith this, FormLayout will display labels beside fields, falling back to\nthe default position above the fields only when there isn't enough space.\n\n### CSS Properties Reference\n\nThe following custom CSS properties are available on the `<vaadin-form-layout>`\nelement:\n\nCustom CSS property | Description | Default\n---|---|---\n`--vaadin-form-layout-column-spacing` | Length of the spacing between columns | `2em`\n`--vaadin-form-layout-row-spacing` | Length of the spacing between rows | `1em`\n`--vaadin-form-layout-label-width` | Width of the label when labels are displayed aside | `8em`\n`--vaadin-form-layout-label-spacing` | Length of the spacing between the label and the input when labels are displayed aside | `1em`",
|
|
33
33
|
"attributes": [
|
|
34
34
|
{
|
|
35
35
|
"name": "auto-responsive",
|
|
36
|
-
"description": "
|
|
36
|
+
"description": "When set to `true`, the component automatically creates and adjusts columns based on\nthe container's width. Columns have a fixed width defined by `columnWidth` and their\nnumber increases up to the limit set by `maxColumns`. The component dynamically adjusts\nthe number of columns as the container size changes. When this mode is enabled,\n`responsiveSteps` are ignored.\n\nBy default, each field is placed on a new row. To organize fields into rows, there are\ntwo options:\n\n1. Use `<vaadin-form-row>` to explicitly group fields into rows.\n\n2. Enable the `autoRows` property to automatically arrange fields in available columns,\n wrapping to a new row when necessary. `<br>` elements can be used to force a new row.\n\nThe auto-responsive mode is disabled by default. To enable it for an individual instance,\nuse this property. Alternatively, if you want it to be enabled for all instances by default,\nenable the `defaultAutoResponsiveFormLayout` feature flag before `<vaadin-form-layout>`\nelements are added to the DOM:\n\n```js\nwindow.Vaadin.featureFlags.defaultAutoResponsiveFormLayout = true;\n```",
|
|
37
37
|
"value": {
|
|
38
38
|
"type": [
|
|
39
39
|
"boolean",
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
},
|
|
45
45
|
{
|
|
46
46
|
"name": "column-width",
|
|
47
|
-
"description": "When `autoResponsive` is enabled, defines the width of each column.\nThe value must be defined in CSS length units, e.g
|
|
47
|
+
"description": "When `autoResponsive` is enabled, defines the width of each column.\nThe value must be defined in CSS length units, e.g. `100px`.\n\nIf the column width isn't explicitly set, it defaults to `12em`\nor `--vaadin-field-default-width` if that CSS property is defined.",
|
|
48
48
|
"value": {
|
|
49
49
|
"type": [
|
|
50
50
|
"string",
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
},
|
|
56
56
|
{
|
|
57
57
|
"name": "max-columns",
|
|
58
|
-
"description": "When `autoResponsive` is enabled, defines the maximum number of columns\nthat the layout can create. The layout will create columns up to this\nlimit based on the available container width
|
|
58
|
+
"description": "When `autoResponsive` is enabled, defines the maximum number of columns\nthat the layout can create. The layout will create columns up to this\nlimit based on the available container width.\n\nThe default value is `10`.",
|
|
59
59
|
"value": {
|
|
60
60
|
"type": [
|
|
61
61
|
"number",
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
},
|
|
67
67
|
{
|
|
68
68
|
"name": "auto-rows",
|
|
69
|
-
"description": "When enabled with `autoResponsive`, distributes fields across columns\nby placing each field in the next available column and wrapping to\nthe next row when the current row is full. `<br>` elements can be\nused to force a new row
|
|
69
|
+
"description": "When enabled with `autoResponsive`, distributes fields across columns\nby placing each field in the next available column and wrapping to\nthe next row when the current row is full. `<br>` elements can be\nused to force a new row.\n\nThe default value is `false`.",
|
|
70
70
|
"value": {
|
|
71
71
|
"type": [
|
|
72
72
|
"boolean",
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
},
|
|
78
78
|
{
|
|
79
79
|
"name": "labels-aside",
|
|
80
|
-
"description": "When enabled with `autoResponsive`, `<vaadin-form-item>` prefers positioning\nlabels beside the fields. If the layout is too narrow to fit a single column\nwith side
|
|
80
|
+
"description": "When enabled with `autoResponsive`, `<vaadin-form-item>` prefers positioning\nlabels beside the fields. If the layout is too narrow to fit a single column\nwith a side label, the component will automatically switch labels to their\ndefault position above the fields.\n\nThe default value is `false`.\n\nTo customize the label width and the gap between the label and the field,\nuse the following CSS properties:\n\n- `--vaadin-form-layout-label-width`\n- `--vaadin-form-layout-label-spacing`",
|
|
81
81
|
"value": {
|
|
82
82
|
"type": [
|
|
83
83
|
"boolean",
|
|
@@ -88,7 +88,7 @@
|
|
|
88
88
|
},
|
|
89
89
|
{
|
|
90
90
|
"name": "expand-columns",
|
|
91
|
-
"description": "When `autoResponsive` is enabled, specifies whether the columns should expand\nin width to evenly fill any remaining space after
|
|
91
|
+
"description": "When `autoResponsive` is enabled, specifies whether the columns should expand\nin width to evenly fill any remaining space after all columns have been created.\n\nThe default value is `false`.",
|
|
92
92
|
"value": {
|
|
93
93
|
"type": [
|
|
94
94
|
"boolean",
|
|
@@ -99,7 +99,7 @@
|
|
|
99
99
|
},
|
|
100
100
|
{
|
|
101
101
|
"name": "expand-fields",
|
|
102
|
-
"description": "When `autoResponsive` is enabled, specifies whether fields should stretch\nto take up all available space within columns. This setting also applies\nto fields inside `<vaadin-form-item>` elements
|
|
102
|
+
"description": "When `autoResponsive` is enabled, specifies whether fields should stretch\nto take up all available space within columns. This setting also applies\nto fields inside `<vaadin-form-item>` elements.\n\nThe default value is `false`.",
|
|
103
103
|
"value": {
|
|
104
104
|
"type": [
|
|
105
105
|
"boolean",
|
|
@@ -124,7 +124,7 @@
|
|
|
124
124
|
"properties": [
|
|
125
125
|
{
|
|
126
126
|
"name": "responsiveSteps",
|
|
127
|
-
"description": "Allows specifying a responsive behavior with the number of columns\nand the label position depending on the layout width.\n\nFormat: array of objects, each object defines one responsive step\nwith `minWidth` CSS length, `columns` number, and optional\n`labelsPosition` string of `\"aside\"` or `\"top\"`. At least one item is required.\n\n#### Examples\n\n```javascript\nformLayout.responsiveSteps = [{columns: 1}];\n// The layout is always a single column, labels aside.\n```\n```javascript\nformLayout.responsiveSteps = [\n {minWidth: 0, columns: 1},\n {minWidth: '40em', columns: 2}\n];\n// Sets two responsive steps:\n// 1. When the layout width is < 40em, one column, labels aside.\n// 2. Width >= 40em, two columns, labels aside.\n```\n```javascript\nformLayout.responsiveSteps = [\n {minWidth: 0, columns: 1, labelsPosition: 'top'},\n {minWidth: '20em', columns: 1},\n {minWidth: '40em', columns: 2}\n];\n// Default value. Three responsive steps:\n// 1. Width < 20em, one column, labels on top.\n// 2. 20em <= width < 40em, one column, labels aside.\n// 3. Width >= 40em, two columns, labels aside.\n```",
|
|
127
|
+
"description": "Allows specifying a responsive behavior with the number of columns\nand the label position depending on the layout width.\n\nFormat: array of objects, each object defines one responsive step\nwith `minWidth` CSS length, `columns` number, and optional\n`labelsPosition` string of `\"aside\"` or `\"top\"`. At least one item is required.\n\nNOTE: Responsive steps are ignored in auto-responsive mode, which may be\nenabled explicitly via the `autoResponsive` property or implicitly\nif the following feature flag is set:\n\n```\nwindow.Vaadin.featureFlags.defaultAutoResponsiveFormLayout = true\n```\n\n#### Examples\n\n```javascript\nformLayout.responsiveSteps = [{columns: 1}];\n// The layout is always a single column, labels aside.\n```\n```javascript\nformLayout.responsiveSteps = [\n {minWidth: 0, columns: 1},\n {minWidth: '40em', columns: 2}\n];\n// Sets two responsive steps:\n// 1. When the layout width is < 40em, one column, labels aside.\n// 2. Width >= 40em, two columns, labels aside.\n```\n```javascript\nformLayout.responsiveSteps = [\n {minWidth: 0, columns: 1, labelsPosition: 'top'},\n {minWidth: '20em', columns: 1},\n {minWidth: '40em', columns: 2}\n];\n// Default value. Three responsive steps:\n// 1. Width < 20em, one column, labels on top.\n// 2. 20em <= width < 40em, one column, labels aside.\n// 3. Width >= 40em, two columns, labels aside.\n```",
|
|
128
128
|
"value": {
|
|
129
129
|
"type": [
|
|
130
130
|
"Array.<FormLayoutResponsiveStep>"
|
|
@@ -133,7 +133,7 @@
|
|
|
133
133
|
},
|
|
134
134
|
{
|
|
135
135
|
"name": "autoResponsive",
|
|
136
|
-
"description": "
|
|
136
|
+
"description": "When set to `true`, the component automatically creates and adjusts columns based on\nthe container's width. Columns have a fixed width defined by `columnWidth` and their\nnumber increases up to the limit set by `maxColumns`. The component dynamically adjusts\nthe number of columns as the container size changes. When this mode is enabled,\n`responsiveSteps` are ignored.\n\nBy default, each field is placed on a new row. To organize fields into rows, there are\ntwo options:\n\n1. Use `<vaadin-form-row>` to explicitly group fields into rows.\n\n2. Enable the `autoRows` property to automatically arrange fields in available columns,\n wrapping to a new row when necessary. `<br>` elements can be used to force a new row.\n\nThe auto-responsive mode is disabled by default. To enable it for an individual instance,\nuse this property. Alternatively, if you want it to be enabled for all instances by default,\nenable the `defaultAutoResponsiveFormLayout` feature flag before `<vaadin-form-layout>`\nelements are added to the DOM:\n\n```js\nwindow.Vaadin.featureFlags.defaultAutoResponsiveFormLayout = true;\n```",
|
|
137
137
|
"value": {
|
|
138
138
|
"type": [
|
|
139
139
|
"boolean",
|
|
@@ -144,7 +144,7 @@
|
|
|
144
144
|
},
|
|
145
145
|
{
|
|
146
146
|
"name": "columnWidth",
|
|
147
|
-
"description": "When `autoResponsive` is enabled, defines the width of each column.\nThe value must be defined in CSS length units, e.g
|
|
147
|
+
"description": "When `autoResponsive` is enabled, defines the width of each column.\nThe value must be defined in CSS length units, e.g. `100px`.\n\nIf the column width isn't explicitly set, it defaults to `12em`\nor `--vaadin-field-default-width` if that CSS property is defined.",
|
|
148
148
|
"value": {
|
|
149
149
|
"type": [
|
|
150
150
|
"string",
|
|
@@ -155,7 +155,7 @@
|
|
|
155
155
|
},
|
|
156
156
|
{
|
|
157
157
|
"name": "maxColumns",
|
|
158
|
-
"description": "When `autoResponsive` is enabled, defines the maximum number of columns\nthat the layout can create. The layout will create columns up to this\nlimit based on the available container width
|
|
158
|
+
"description": "When `autoResponsive` is enabled, defines the maximum number of columns\nthat the layout can create. The layout will create columns up to this\nlimit based on the available container width.\n\nThe default value is `10`.",
|
|
159
159
|
"value": {
|
|
160
160
|
"type": [
|
|
161
161
|
"number",
|
|
@@ -166,7 +166,7 @@
|
|
|
166
166
|
},
|
|
167
167
|
{
|
|
168
168
|
"name": "autoRows",
|
|
169
|
-
"description": "When enabled with `autoResponsive`, distributes fields across columns\nby placing each field in the next available column and wrapping to\nthe next row when the current row is full. `<br>` elements can be\nused to force a new row
|
|
169
|
+
"description": "When enabled with `autoResponsive`, distributes fields across columns\nby placing each field in the next available column and wrapping to\nthe next row when the current row is full. `<br>` elements can be\nused to force a new row.\n\nThe default value is `false`.",
|
|
170
170
|
"value": {
|
|
171
171
|
"type": [
|
|
172
172
|
"boolean",
|
|
@@ -177,7 +177,7 @@
|
|
|
177
177
|
},
|
|
178
178
|
{
|
|
179
179
|
"name": "labelsAside",
|
|
180
|
-
"description": "When enabled with `autoResponsive`, `<vaadin-form-item>` prefers positioning\nlabels beside the fields. If the layout is too narrow to fit a single column\nwith side
|
|
180
|
+
"description": "When enabled with `autoResponsive`, `<vaadin-form-item>` prefers positioning\nlabels beside the fields. If the layout is too narrow to fit a single column\nwith a side label, the component will automatically switch labels to their\ndefault position above the fields.\n\nThe default value is `false`.\n\nTo customize the label width and the gap between the label and the field,\nuse the following CSS properties:\n\n- `--vaadin-form-layout-label-width`\n- `--vaadin-form-layout-label-spacing`",
|
|
181
181
|
"value": {
|
|
182
182
|
"type": [
|
|
183
183
|
"boolean",
|
|
@@ -188,7 +188,7 @@
|
|
|
188
188
|
},
|
|
189
189
|
{
|
|
190
190
|
"name": "expandColumns",
|
|
191
|
-
"description": "When `autoResponsive` is enabled, specifies whether the columns should expand\nin width to evenly fill any remaining space after
|
|
191
|
+
"description": "When `autoResponsive` is enabled, specifies whether the columns should expand\nin width to evenly fill any remaining space after all columns have been created.\n\nThe default value is `false`.",
|
|
192
192
|
"value": {
|
|
193
193
|
"type": [
|
|
194
194
|
"boolean",
|
|
@@ -199,7 +199,7 @@
|
|
|
199
199
|
},
|
|
200
200
|
{
|
|
201
201
|
"name": "expandFields",
|
|
202
|
-
"description": "When `autoResponsive` is enabled, specifies whether fields should stretch\nto take up all available space within columns. This setting also applies\nto fields inside `<vaadin-form-item>` elements
|
|
202
|
+
"description": "When `autoResponsive` is enabled, specifies whether fields should stretch\nto take up all available space within columns. This setting also applies\nto fields inside `<vaadin-form-item>` elements.\n\nThe default value is `false`.",
|
|
203
203
|
"value": {
|
|
204
204
|
"type": [
|
|
205
205
|
"boolean",
|
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/form-layout",
|
|
4
|
-
"version": "24.8.0-
|
|
4
|
+
"version": "24.8.0-alpha11",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -22,61 +22,61 @@
|
|
|
22
22
|
},
|
|
23
23
|
{
|
|
24
24
|
"name": "vaadin-form-layout",
|
|
25
|
-
"description": "`<vaadin-form-layout>` is a Web Component providing configurable responsive\nlayout for form elements.\n\n```html\n<vaadin-form-layout>\n\n <vaadin-form-item>\n <label slot=\"label\">First Name</label>\n <input class=\"full-width\" value=\"Jane\">\n </vaadin-form-item>\n\n <vaadin-form-item>\n <label slot=\"label\">Last Name</label>\n <input class=\"full-width\" value=\"Doe\">\n </vaadin-form-item>\n\n <vaadin-form-item>\n <label slot=\"label\">Email</label>\n <input class=\"full-width\" value=\"jane.doe@example.com\">\n </vaadin-form-item>\n\n</vaadin-form-layout>\n```\n\nIt supports any child elements as layout items.\n\nBy default, it makes a layout of two columns if the element width is equal or\nwider than 40em, and a single column layout otherwise.\n\nThe number of columns and the responsive behavior are customizable with\nthe `responsiveSteps` property.\n\n### Spanning Items on Multiple Columns\n\nYou can use `colspan` or `data-colspan` attribute on the items.\nIn the example below, the first text field spans on two columns:\n\n```html\n<vaadin-form-layout>\n\n <vaadin-form-item colspan=\"2\">\n <label slot=\"label\">Address</label>\n <input class=\"full-width\">\n </vaadin-form-item>\n\n <vaadin-form-item>\n <label slot=\"label\">First Name</label>\n <input class=\"full-width\" value=\"Jane\">\n </vaadin-form-item>\n\n <vaadin-form-item>\n <label slot=\"label\">Last Name</label>\n <input class=\"full-width\" value=\"Doe\">\n </vaadin-form-item>\n\n</vaadin-form-layout>\n```\n\n### Explicit New Row\n\nUse the `<br>` line break element to wrap the items on a new row:\n\n```html\n<vaadin-form-layout>\n\n <vaadin-form-item>\n <label slot=\"label\">Email</label>\n <input class=\"full-width\">\n </vaadin-form-item>\n\n <br>\n\n <vaadin-form-item>\n <label slot=\"label\">Confirm Email</label>\n <input class=\"full-width\">\n </vaadin-form-item>\n\n</vaadin-form-layout>\n```\n\n### Auto Responsive Mode\n\nTo avoid manually dealing with responsive breakpoints, Form Layout provides an auto-responsive mode\nthat automatically creates and adjusts fixed-width columns based on the container's available space.\nThe [`columnWidth`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-
|
|
25
|
+
"description": "`<vaadin-form-layout>` is a Web Component providing configurable responsive\nlayout for form elements.\n\n```html\n<vaadin-form-layout>\n\n <vaadin-form-item>\n <label slot=\"label\">First Name</label>\n <input class=\"full-width\" value=\"Jane\">\n </vaadin-form-item>\n\n <vaadin-form-item>\n <label slot=\"label\">Last Name</label>\n <input class=\"full-width\" value=\"Doe\">\n </vaadin-form-item>\n\n <vaadin-form-item>\n <label slot=\"label\">Email</label>\n <input class=\"full-width\" value=\"jane.doe@example.com\">\n </vaadin-form-item>\n\n</vaadin-form-layout>\n```\n\nIt supports any child elements as layout items.\n\nBy default, it makes a layout of two columns if the element width is equal or\nwider than 40em, and a single column layout otherwise.\n\nThe number of columns and the responsive behavior are customizable with\nthe `responsiveSteps` property.\n\n### Spanning Items on Multiple Columns\n\nYou can use `colspan` or `data-colspan` attribute on the items.\nIn the example below, the first text field spans on two columns:\n\n```html\n<vaadin-form-layout>\n\n <vaadin-form-item colspan=\"2\">\n <label slot=\"label\">Address</label>\n <input class=\"full-width\">\n </vaadin-form-item>\n\n <vaadin-form-item>\n <label slot=\"label\">First Name</label>\n <input class=\"full-width\" value=\"Jane\">\n </vaadin-form-item>\n\n <vaadin-form-item>\n <label slot=\"label\">Last Name</label>\n <input class=\"full-width\" value=\"Doe\">\n </vaadin-form-item>\n\n</vaadin-form-layout>\n```\n\n### Explicit New Row\n\nUse the `<br>` line break element to wrap the items on a new row:\n\n```html\n<vaadin-form-layout>\n\n <vaadin-form-item>\n <label slot=\"label\">Email</label>\n <input class=\"full-width\">\n </vaadin-form-item>\n\n <br>\n\n <vaadin-form-item>\n <label slot=\"label\">Confirm Email</label>\n <input class=\"full-width\">\n </vaadin-form-item>\n\n</vaadin-form-layout>\n```\n\n### Auto Responsive Mode\n\nTo avoid manually dealing with responsive breakpoints, Form Layout provides an auto-responsive mode\nthat automatically creates and adjusts fixed-width columns based on the container's available space.\n\nThe [`columnWidth`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha11/#/elements/vaadin-form-layout#property-columnWidth) and\n[`maxColumns`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha11/#/elements/vaadin-form-layout#property-maxColumns) properties define the width of\neach column and the maximum number of columns that the component can create. By default, the component\ncreates up to 10 columns, each with a width of `12em` or the value of the `--vaadin-field-default-width`\nCSS custom property, if defined.\n\nThe auto-responsive mode is disabled by default. To enable it for an individual instance, set the\n`auto-responsive` attribute:\n\n```html\n<vaadin-form-layout auto-responsive>\n <vaadin-text-field label=\"First Name\"></vaadin-text-field>\n <vaadin-text-field label=\"Last Name\"></vaadin-text-field>\n <vaadin-text-area label=\"Address\" colspan=\"2\"></vaadin-text-area>\n</vaadin-form-layout>\n```\n\nYou can also enable it for all instances by enabling the following feature flag\nbefore `<vaadin-form-layout>` elements are added to the DOM:\n\n```js\nwindow.Vaadin.featureFlags.defaultAutoResponsiveFormLayout = true;\n```\n\n#### Organizing Fields into Rows\n\nBy default, each field is placed on a new row. To organize fields into rows, you can either:\n\n1. Manually wrap fields into [`<vaadin-form-row>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha11/#/elements/vaadin-form-row) elements.\n\n2. Enable the [`autoRows`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha11/#/elements/vaadin-form-layout#property-autoRows) property to\n let Form Layout automatically arrange fields in available columns, wrapping to a new\n row when necessary. `<br>` elements can be used to force a new row.\n\nHere is an example of using `<vaadin-form-row>`:\n\n```html\n<vaadin-form-layout auto-responsive>\n <vaadin-form-row>\n <vaadin-text-field label=\"First Name\"></vaadin-text-field>\n <vaadin-text-field label=\"Last Name\"></vaadin-text-field>\n </vaadin-form-row>\n <vaadin-form-row>\n <vaadin-text-area label=\"Address\" colspan=\"2\"></vaadin-text-area>\n </vaadin-form-row>\n</vaadin-form-layout>\n```\n\n#### Expanding Columns and Fields\n\nYou can configure Form Layout to expand columns to evenly fill any remaining space after\nall fixed-width columns have been created.\nTo enable this, set the [`expandColumns`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha11/#/elements/vaadin-form-layout#property-expandColumns)\nproperty to `true`.\n\nAlso, Form Layout can stretch fields to make them take up all available space within columns.\nTo enable this, set the [`expandFields`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha11/#/elements/vaadin-form-layout#property-expandFields)\nproperty to `true`.\n\n#### Customizing Label Position\n\nBy default, Form Layout displays labels above the fields. To position labels beside fields, you\nneed to wrap each field in a `<vaadin-form-item>` element and define its labels on the wrapper.\nThen, you can enable the [`labelsAside`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha11/#/elements/vaadin-form-layout#property-labelsAside)\nproperty:\n\n```html\n<vaadin-form-layout auto-responsive labels-aside>\n <vaadin-form-row>\n <vaadin-form-item>\n <label slot=\"label\">First Name</label>\n <vaadin-text-field></vaadin-text-field>\n </vaadin-form-item>\n <vaadin-form-item>\n <label slot=\"label\">Last Name</label>\n <vaadin-text-field></vaadin-text-field>\n </vaadin-form-item>\n </vaadin-form-row>\n <vaadin-form-row>\n <vaadin-form-item colspan=\"2\">\n <label slot=\"label\">Address</label>\n <vaadin-text-area></vaadin-text-area>\n </vaadin-form-item>\n </vaadin-form-row>\n</vaadin-form-layout>\n```\n\nWith this, FormLayout will display labels beside fields, falling back to\nthe default position above the fields only when there isn't enough space.\n\n### CSS Properties Reference\n\nThe following custom CSS properties are available on the `<vaadin-form-layout>`\nelement:\n\nCustom CSS property | Description | Default\n---|---|---\n`--vaadin-form-layout-column-spacing` | Length of the spacing between columns | `2em`\n`--vaadin-form-layout-row-spacing` | Length of the spacing between rows | `1em`\n`--vaadin-form-layout-label-width` | Width of the label when labels are displayed aside | `8em`\n`--vaadin-form-layout-label-spacing` | Length of the spacing between the label and the input when labels are displayed aside | `1em`",
|
|
26
26
|
"extension": true,
|
|
27
27
|
"attributes": [
|
|
28
28
|
{
|
|
29
29
|
"name": "?autoResponsive",
|
|
30
|
-
"description": "
|
|
30
|
+
"description": "When set to `true`, the component automatically creates and adjusts columns based on\nthe container's width. Columns have a fixed width defined by `columnWidth` and their\nnumber increases up to the limit set by `maxColumns`. The component dynamically adjusts\nthe number of columns as the container size changes. When this mode is enabled,\n`responsiveSteps` are ignored.\n\nBy default, each field is placed on a new row. To organize fields into rows, there are\ntwo options:\n\n1. Use `<vaadin-form-row>` to explicitly group fields into rows.\n\n2. Enable the `autoRows` property to automatically arrange fields in available columns,\n wrapping to a new row when necessary. `<br>` elements can be used to force a new row.\n\nThe auto-responsive mode is disabled by default. To enable it for an individual instance,\nuse this property. Alternatively, if you want it to be enabled for all instances by default,\nenable the `defaultAutoResponsiveFormLayout` feature flag before `<vaadin-form-layout>`\nelements are added to the DOM:\n\n```js\nwindow.Vaadin.featureFlags.defaultAutoResponsiveFormLayout = true;\n```",
|
|
31
31
|
"value": {
|
|
32
32
|
"kind": "expression"
|
|
33
33
|
}
|
|
34
34
|
},
|
|
35
35
|
{
|
|
36
36
|
"name": "?autoRows",
|
|
37
|
-
"description": "When enabled with `autoResponsive`, distributes fields across columns\nby placing each field in the next available column and wrapping to\nthe next row when the current row is full. `<br>` elements can be\nused to force a new row
|
|
37
|
+
"description": "When enabled with `autoResponsive`, distributes fields across columns\nby placing each field in the next available column and wrapping to\nthe next row when the current row is full. `<br>` elements can be\nused to force a new row.\n\nThe default value is `false`.",
|
|
38
38
|
"value": {
|
|
39
39
|
"kind": "expression"
|
|
40
40
|
}
|
|
41
41
|
},
|
|
42
42
|
{
|
|
43
43
|
"name": "?labelsAside",
|
|
44
|
-
"description": "When enabled with `autoResponsive`, `<vaadin-form-item>` prefers positioning\nlabels beside the fields. If the layout is too narrow to fit a single column\nwith side
|
|
44
|
+
"description": "When enabled with `autoResponsive`, `<vaadin-form-item>` prefers positioning\nlabels beside the fields. If the layout is too narrow to fit a single column\nwith a side label, the component will automatically switch labels to their\ndefault position above the fields.\n\nThe default value is `false`.\n\nTo customize the label width and the gap between the label and the field,\nuse the following CSS properties:\n\n- `--vaadin-form-layout-label-width`\n- `--vaadin-form-layout-label-spacing`",
|
|
45
45
|
"value": {
|
|
46
46
|
"kind": "expression"
|
|
47
47
|
}
|
|
48
48
|
},
|
|
49
49
|
{
|
|
50
50
|
"name": "?expandColumns",
|
|
51
|
-
"description": "When `autoResponsive` is enabled, specifies whether the columns should expand\nin width to evenly fill any remaining space after
|
|
51
|
+
"description": "When `autoResponsive` is enabled, specifies whether the columns should expand\nin width to evenly fill any remaining space after all columns have been created.\n\nThe default value is `false`.",
|
|
52
52
|
"value": {
|
|
53
53
|
"kind": "expression"
|
|
54
54
|
}
|
|
55
55
|
},
|
|
56
56
|
{
|
|
57
57
|
"name": "?expandFields",
|
|
58
|
-
"description": "When `autoResponsive` is enabled, specifies whether fields should stretch\nto take up all available space within columns. This setting also applies\nto fields inside `<vaadin-form-item>` elements
|
|
58
|
+
"description": "When `autoResponsive` is enabled, specifies whether fields should stretch\nto take up all available space within columns. This setting also applies\nto fields inside `<vaadin-form-item>` elements.\n\nThe default value is `false`.",
|
|
59
59
|
"value": {
|
|
60
60
|
"kind": "expression"
|
|
61
61
|
}
|
|
62
62
|
},
|
|
63
63
|
{
|
|
64
64
|
"name": ".responsiveSteps",
|
|
65
|
-
"description": "Allows specifying a responsive behavior with the number of columns\nand the label position depending on the layout width.\n\nFormat: array of objects, each object defines one responsive step\nwith `minWidth` CSS length, `columns` number, and optional\n`labelsPosition` string of `\"aside\"` or `\"top\"`. At least one item is required.\n\n#### Examples\n\n```javascript\nformLayout.responsiveSteps = [{columns: 1}];\n// The layout is always a single column, labels aside.\n```\n```javascript\nformLayout.responsiveSteps = [\n {minWidth: 0, columns: 1},\n {minWidth: '40em', columns: 2}\n];\n// Sets two responsive steps:\n// 1. When the layout width is < 40em, one column, labels aside.\n// 2. Width >= 40em, two columns, labels aside.\n```\n```javascript\nformLayout.responsiveSteps = [\n {minWidth: 0, columns: 1, labelsPosition: 'top'},\n {minWidth: '20em', columns: 1},\n {minWidth: '40em', columns: 2}\n];\n// Default value. Three responsive steps:\n// 1. Width < 20em, one column, labels on top.\n// 2. 20em <= width < 40em, one column, labels aside.\n// 3. Width >= 40em, two columns, labels aside.\n```",
|
|
65
|
+
"description": "Allows specifying a responsive behavior with the number of columns\nand the label position depending on the layout width.\n\nFormat: array of objects, each object defines one responsive step\nwith `minWidth` CSS length, `columns` number, and optional\n`labelsPosition` string of `\"aside\"` or `\"top\"`. At least one item is required.\n\nNOTE: Responsive steps are ignored in auto-responsive mode, which may be\nenabled explicitly via the `autoResponsive` property or implicitly\nif the following feature flag is set:\n\n```\nwindow.Vaadin.featureFlags.defaultAutoResponsiveFormLayout = true\n```\n\n#### Examples\n\n```javascript\nformLayout.responsiveSteps = [{columns: 1}];\n// The layout is always a single column, labels aside.\n```\n```javascript\nformLayout.responsiveSteps = [\n {minWidth: 0, columns: 1},\n {minWidth: '40em', columns: 2}\n];\n// Sets two responsive steps:\n// 1. When the layout width is < 40em, one column, labels aside.\n// 2. Width >= 40em, two columns, labels aside.\n```\n```javascript\nformLayout.responsiveSteps = [\n {minWidth: 0, columns: 1, labelsPosition: 'top'},\n {minWidth: '20em', columns: 1},\n {minWidth: '40em', columns: 2}\n];\n// Default value. Three responsive steps:\n// 1. Width < 20em, one column, labels on top.\n// 2. 20em <= width < 40em, one column, labels aside.\n// 3. Width >= 40em, two columns, labels aside.\n```",
|
|
66
66
|
"value": {
|
|
67
67
|
"kind": "expression"
|
|
68
68
|
}
|
|
69
69
|
},
|
|
70
70
|
{
|
|
71
71
|
"name": ".columnWidth",
|
|
72
|
-
"description": "When `autoResponsive` is enabled, defines the width of each column.\nThe value must be defined in CSS length units, e.g
|
|
72
|
+
"description": "When `autoResponsive` is enabled, defines the width of each column.\nThe value must be defined in CSS length units, e.g. `100px`.\n\nIf the column width isn't explicitly set, it defaults to `12em`\nor `--vaadin-field-default-width` if that CSS property is defined.",
|
|
73
73
|
"value": {
|
|
74
74
|
"kind": "expression"
|
|
75
75
|
}
|
|
76
76
|
},
|
|
77
77
|
{
|
|
78
78
|
"name": ".maxColumns",
|
|
79
|
-
"description": "When `autoResponsive` is enabled, defines the maximum number of columns\nthat the layout can create. The layout will create columns up to this\nlimit based on the available container width
|
|
79
|
+
"description": "When `autoResponsive` is enabled, defines the maximum number of columns\nthat the layout can create. The layout will create columns up to this\nlimit based on the available container width.\n\nThe default value is `10`.",
|
|
80
80
|
"value": {
|
|
81
81
|
"kind": "expression"
|
|
82
82
|
}
|