@vaadin/form-layout 24.8.0-alpha11 → 24.8.0-alpha12
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/form-layout",
|
|
3
|
-
"version": "24.8.0-
|
|
3
|
+
"version": "24.8.0-alpha12",
|
|
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-alpha12",
|
|
41
|
+
"@vaadin/component-base": "24.8.0-alpha12",
|
|
42
|
+
"@vaadin/vaadin-lumo-styles": "24.8.0-alpha12",
|
|
43
|
+
"@vaadin/vaadin-material-styles": "24.8.0-alpha12",
|
|
44
|
+
"@vaadin/vaadin-themable-mixin": "24.8.0-alpha12",
|
|
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-alpha12",
|
|
49
|
+
"@vaadin/custom-field": "24.8.0-alpha12",
|
|
50
|
+
"@vaadin/test-runner-commands": "24.8.0-alpha12",
|
|
51
51
|
"@vaadin/testing-helpers": "^1.1.0",
|
|
52
|
-
"@vaadin/text-field": "24.8.0-
|
|
52
|
+
"@vaadin/text-field": "24.8.0-alpha12",
|
|
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": "60050031f788a34bfe2d7f595ada9cea6e60b09c"
|
|
60
60
|
}
|
|
@@ -130,7 +130,8 @@ export class AutoResponsiveLayout extends AbstractLayout {
|
|
|
130
130
|
host.style.removeProperty('--_column-width');
|
|
131
131
|
}
|
|
132
132
|
|
|
133
|
-
host.style.setProperty('--
|
|
133
|
+
host.style.setProperty('--_min-columns', props.minColumns);
|
|
134
|
+
host.style.setProperty('--_max-columns', Math.min(Math.max(props.minColumns, props.maxColumns), maxColumns));
|
|
134
135
|
|
|
135
136
|
host.$.layout.toggleAttribute('fits-labels-aside', this.props.labelsAside && this.__fitsLabelsAside);
|
|
136
137
|
host.$.layout.style.setProperty('--_grid-rendered-column-count', this.__renderedColumnCount);
|
|
@@ -170,13 +171,13 @@ export class AutoResponsiveLayout extends AbstractLayout {
|
|
|
170
171
|
}
|
|
171
172
|
|
|
172
173
|
/** @private */
|
|
173
|
-
get
|
|
174
|
+
get __minWidthLabelsAside() {
|
|
174
175
|
const { backgroundPositionY } = getComputedStyle(this.host.$.layout, '::before');
|
|
175
176
|
return parseFloat(backgroundPositionY);
|
|
176
177
|
}
|
|
177
178
|
|
|
178
179
|
/** @private */
|
|
179
180
|
get __fitsLabelsAside() {
|
|
180
|
-
return this.host.offsetWidth >= this.
|
|
181
|
+
return this.host.offsetWidth >= this.__minWidthLabelsAside;
|
|
181
182
|
}
|
|
182
183
|
}
|
|
@@ -119,6 +119,17 @@ export declare class FormLayoutMixinClass {
|
|
|
119
119
|
*/
|
|
120
120
|
maxColumns: number;
|
|
121
121
|
|
|
122
|
+
/**
|
|
123
|
+
* When `autoResponsive` is enabled, defines the minimum number of columns
|
|
124
|
+
* that the layout can create. The layout will create columns at least up
|
|
125
|
+
* to this limit provided the container width allows it.
|
|
126
|
+
*
|
|
127
|
+
* The default value is `1`.
|
|
128
|
+
*
|
|
129
|
+
* @attr {number} min-columns
|
|
130
|
+
*/
|
|
131
|
+
minColumns: number;
|
|
132
|
+
|
|
122
133
|
/**
|
|
123
134
|
* When enabled with `autoResponsive`, distributes fields across columns
|
|
124
135
|
* by placing each field in the next available column and wrapping to
|
|
@@ -156,6 +156,21 @@ export const FormLayoutMixin = (superClass) =>
|
|
|
156
156
|
value: 10,
|
|
157
157
|
},
|
|
158
158
|
|
|
159
|
+
/**
|
|
160
|
+
* When `autoResponsive` is enabled, defines the minimum number of columns
|
|
161
|
+
* that the layout can create. The layout will create columns at least up
|
|
162
|
+
* to this limit.
|
|
163
|
+
*
|
|
164
|
+
* The default value is `1`.
|
|
165
|
+
*
|
|
166
|
+
* @attr {number} min-columns
|
|
167
|
+
*/
|
|
168
|
+
minColumns: {
|
|
169
|
+
type: Number,
|
|
170
|
+
sync: true,
|
|
171
|
+
value: 1,
|
|
172
|
+
},
|
|
173
|
+
|
|
159
174
|
/**
|
|
160
175
|
* When enabled with `autoResponsive`, distributes fields across columns
|
|
161
176
|
* by placing each field in the next available column and wrapping to
|
|
@@ -231,7 +246,7 @@ export const FormLayoutMixin = (superClass) =>
|
|
|
231
246
|
|
|
232
247
|
static get observers() {
|
|
233
248
|
return [
|
|
234
|
-
'__autoResponsiveLayoutPropsChanged(columnWidth, maxColumns, autoRows, labelsAside, expandColumns, expandFields)',
|
|
249
|
+
'__autoResponsiveLayoutPropsChanged(columnWidth, maxColumns, minColumns, autoRows, labelsAside, expandColumns, expandFields)',
|
|
235
250
|
'__autoResponsiveChanged(autoResponsive)',
|
|
236
251
|
];
|
|
237
252
|
}
|
|
@@ -289,10 +304,19 @@ export const FormLayoutMixin = (superClass) =>
|
|
|
289
304
|
|
|
290
305
|
/** @private */
|
|
291
306
|
// eslint-disable-next-line @typescript-eslint/max-params
|
|
292
|
-
__autoResponsiveLayoutPropsChanged(
|
|
307
|
+
__autoResponsiveLayoutPropsChanged(
|
|
308
|
+
columnWidth,
|
|
309
|
+
maxColumns,
|
|
310
|
+
minColumns,
|
|
311
|
+
autoRows,
|
|
312
|
+
labelsAside,
|
|
313
|
+
expandColumns,
|
|
314
|
+
expandFields,
|
|
315
|
+
) {
|
|
293
316
|
this.__autoResponsiveLayout.setProps({
|
|
294
317
|
columnWidth,
|
|
295
318
|
maxColumns,
|
|
319
|
+
minColumns,
|
|
296
320
|
autoRows,
|
|
297
321
|
labelsAside,
|
|
298
322
|
expandColumns,
|
|
@@ -45,14 +45,29 @@ export const formLayoutStyles = css`
|
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
:host([auto-responsive]) {
|
|
48
|
+
/* Column width */
|
|
48
49
|
--_column-width: var(--vaadin-field-default-width, 12em);
|
|
49
50
|
--_column-width-labels-above: var(--_column-width);
|
|
50
51
|
--_column-width-labels-aside: calc(
|
|
51
52
|
var(--_column-width) + var(--vaadin-form-layout-label-width) + var(--vaadin-form-layout-label-spacing)
|
|
52
53
|
);
|
|
53
54
|
|
|
55
|
+
/* Column gap */
|
|
56
|
+
--_min-total-gap: calc((var(--_min-columns) - 1) * var(--vaadin-form-layout-column-spacing));
|
|
57
|
+
--_max-total-gap: calc((var(--_max-columns) - 1) * var(--vaadin-form-layout-column-spacing));
|
|
58
|
+
|
|
59
|
+
/* Minimum form layout width */
|
|
60
|
+
--_min-width-labels-above: calc(var(--_min-columns) * var(--_column-width-labels-above) + var(--_min-total-gap));
|
|
61
|
+
--_min-width-labels-aside: calc(var(--_min-columns) * var(--_column-width-labels-aside) + var(--_min-total-gap));
|
|
62
|
+
--_min-width: var(--_min-width-labels-above);
|
|
63
|
+
|
|
64
|
+
/* Maximum form layout width */
|
|
65
|
+
--_max-width-labels-above: calc(var(--_max-columns) * var(--_column-width-labels-above) + var(--_max-total-gap));
|
|
66
|
+
--_max-width-labels-aside: calc(var(--_max-columns) * var(--_column-width-labels-aside) + var(--_max-total-gap));
|
|
67
|
+
--_max-width: var(--_max-width-labels-above);
|
|
68
|
+
|
|
54
69
|
display: flex;
|
|
55
|
-
min-width: var(--
|
|
70
|
+
min-width: var(--_min-width);
|
|
56
71
|
}
|
|
57
72
|
|
|
58
73
|
:host([auto-responsive]) #layout {
|
|
@@ -61,10 +76,7 @@ export const formLayoutStyles = css`
|
|
|
61
76
|
--_form-item-labels-aside: ' '; /* false */
|
|
62
77
|
|
|
63
78
|
/* CSS grid related properties */
|
|
64
|
-
--_grid-column-gap: var(--vaadin-form-layout-column-spacing);
|
|
65
79
|
--_grid-column-width: var(--_column-width-labels-above);
|
|
66
|
-
--_grid-column-max-total-gap: calc((var(--_max-columns) - 1) * var(--_grid-column-gap));
|
|
67
|
-
--_grid-column-max-total-width: calc(var(--_max-columns) * var(--_column-width-labels-above));
|
|
68
80
|
--_grid-repeat: var(--_grid-column-width);
|
|
69
81
|
|
|
70
82
|
display: grid;
|
|
@@ -78,7 +90,7 @@ export const formLayoutStyles = css`
|
|
|
78
90
|
grid-auto-columns: 0;
|
|
79
91
|
|
|
80
92
|
justify-items: start;
|
|
81
|
-
gap: var(--vaadin-form-layout-row-spacing) var(--
|
|
93
|
+
gap: var(--vaadin-form-layout-row-spacing) var(--vaadin-form-layout-column-spacing);
|
|
82
94
|
|
|
83
95
|
/*
|
|
84
96
|
To prevent the layout from exceeding the column limit defined by --_max-columns,
|
|
@@ -92,17 +104,17 @@ export const formLayoutStyles = css`
|
|
|
92
104
|
number of columns inside <vaadin-overlay>, which creates a new stacking context
|
|
93
105
|
without a predefined width.
|
|
94
106
|
*/
|
|
95
|
-
width:
|
|
107
|
+
width: var(--_max-width);
|
|
96
108
|
|
|
97
109
|
/*
|
|
98
110
|
Firefox requires min-width on both :host and #layout to allow the layout
|
|
99
111
|
to shrink below the value specified in the CSS width property above.
|
|
100
112
|
*/
|
|
101
|
-
min-width:
|
|
113
|
+
min-width: var(--_min-width);
|
|
102
114
|
}
|
|
103
115
|
|
|
104
116
|
:host([auto-responsive]) #layout::before {
|
|
105
|
-
background-position-y: var(--
|
|
117
|
+
background-position-y: var(--_min-width-labels-aside);
|
|
106
118
|
}
|
|
107
119
|
|
|
108
120
|
:host([auto-responsive]) #layout ::slotted(*) {
|
|
@@ -118,8 +130,8 @@ export const formLayoutStyles = css`
|
|
|
118
130
|
grid-column-start: var(--_grid-colstart, auto);
|
|
119
131
|
}
|
|
120
132
|
|
|
121
|
-
:host([auto-responsive][labels-aside])
|
|
122
|
-
--
|
|
133
|
+
:host([auto-responsive][labels-aside]) {
|
|
134
|
+
--_max-width: var(--_max-width-labels-aside);
|
|
123
135
|
}
|
|
124
136
|
|
|
125
137
|
:host([auto-responsive][labels-aside]) #layout[fits-labels-aside] {
|
|
@@ -138,7 +150,7 @@ export const formLayoutStyles = css`
|
|
|
138
150
|
reached yet.
|
|
139
151
|
*/
|
|
140
152
|
--_grid-repeat: minmax(
|
|
141
|
-
max(var(--_grid-column-width), calc((100% - var(--
|
|
153
|
+
max(var(--_grid-column-width), calc((100% - var(--_max-total-gap)) / var(--_max-columns))),
|
|
142
154
|
1fr
|
|
143
155
|
);
|
|
144
156
|
|
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-alpha12",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -29,7 +29,7 @@
|
|
|
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.\n\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-alpha12/#/elements/vaadin-form-layout#property-columnWidth) and\n[`maxColumns`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha12/#/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-alpha12/#/elements/vaadin-form-row) elements.\n\n2. Enable the [`autoRows`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha12/#/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-alpha12/#/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-alpha12/#/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-alpha12/#/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",
|
|
@@ -64,6 +64,17 @@
|
|
|
64
64
|
]
|
|
65
65
|
}
|
|
66
66
|
},
|
|
67
|
+
{
|
|
68
|
+
"name": "min-columns",
|
|
69
|
+
"description": "When `autoResponsive` is enabled, defines the minimum number of columns\nthat the layout can create. The layout will create columns at least up\nto this limit.\n\nThe default value is `1`.",
|
|
70
|
+
"value": {
|
|
71
|
+
"type": [
|
|
72
|
+
"number",
|
|
73
|
+
"null",
|
|
74
|
+
"undefined"
|
|
75
|
+
]
|
|
76
|
+
}
|
|
77
|
+
},
|
|
67
78
|
{
|
|
68
79
|
"name": "auto-rows",
|
|
69
80
|
"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`.",
|
|
@@ -164,6 +175,17 @@
|
|
|
164
175
|
]
|
|
165
176
|
}
|
|
166
177
|
},
|
|
178
|
+
{
|
|
179
|
+
"name": "minColumns",
|
|
180
|
+
"description": "When `autoResponsive` is enabled, defines the minimum number of columns\nthat the layout can create. The layout will create columns at least up\nto this limit.\n\nThe default value is `1`.",
|
|
181
|
+
"value": {
|
|
182
|
+
"type": [
|
|
183
|
+
"number",
|
|
184
|
+
"null",
|
|
185
|
+
"undefined"
|
|
186
|
+
]
|
|
187
|
+
}
|
|
188
|
+
},
|
|
167
189
|
{
|
|
168
190
|
"name": "autoRows",
|
|
169
191
|
"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`.",
|
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-alpha12",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -22,7 +22,7 @@
|
|
|
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.\n\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-alpha12/#/elements/vaadin-form-layout#property-columnWidth) and\n[`maxColumns`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha12/#/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-alpha12/#/elements/vaadin-form-row) elements.\n\n2. Enable the [`autoRows`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha12/#/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-alpha12/#/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-alpha12/#/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-alpha12/#/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
|
{
|
|
@@ -80,6 +80,13 @@
|
|
|
80
80
|
"value": {
|
|
81
81
|
"kind": "expression"
|
|
82
82
|
}
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
"name": ".minColumns",
|
|
86
|
+
"description": "When `autoResponsive` is enabled, defines the minimum number of columns\nthat the layout can create. The layout will create columns at least up\nto this limit.\n\nThe default value is `1`.",
|
|
87
|
+
"value": {
|
|
88
|
+
"kind": "expression"
|
|
89
|
+
}
|
|
83
90
|
}
|
|
84
91
|
]
|
|
85
92
|
},
|