@vaadin/form-layout 25.0.0-alpha9 → 25.0.0-beta1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +11 -14
- package/src/layouts/responsive-steps-layout.js +1 -1
- package/src/styles/vaadin-form-item-base-styles.js +4 -8
- package/src/styles/vaadin-form-layout-base-styles.js +35 -14
- package/src/vaadin-form-item-mixin.js +3 -32
- package/src/vaadin-form-item.d.ts +1 -12
- package/src/vaadin-form-item.js +2 -13
- package/src/vaadin-form-layout-mixin.d.ts +1 -1
- package/src/vaadin-form-layout-mixin.js +3 -3
- package/src/vaadin-form-layout.js +2 -9
- package/src/vaadin-form-row.js +1 -1
- package/vaadin-form-item.js +1 -1
- package/vaadin-form-layout.js +1 -1
- package/vaadin-form-row.js +1 -1
- package/web-types.json +4 -4
- package/web-types.lit.json +4 -4
- package/src/styles/vaadin-form-item-core-styles.d.ts +0 -8
- package/src/styles/vaadin-form-item-core-styles.js +0 -53
- package/src/styles/vaadin-form-layout-core-styles.d.ts +0 -8
- package/src/styles/vaadin-form-layout-core-styles.js +0 -180
- package/src/styles/vaadin-form-row-core-styles.d.ts +0 -8
- package/src/styles/vaadin-form-row-core-styles.js +0 -28
- package/theme/lumo/vaadin-form-item-styles.d.ts +0 -4
- package/theme/lumo/vaadin-form-item-styles.js +0 -41
- package/theme/lumo/vaadin-form-item.d.ts +0 -2
- package/theme/lumo/vaadin-form-item.js +0 -2
- package/theme/lumo/vaadin-form-layout-styles.d.ts +0 -1
- package/theme/lumo/vaadin-form-layout-styles.js +0 -13
- package/theme/lumo/vaadin-form-layout.d.ts +0 -2
- package/theme/lumo/vaadin-form-layout.js +0 -2
- package/theme/lumo/vaadin-form-row.d.ts +0 -1
- package/theme/lumo/vaadin-form-row.js +0 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/form-layout",
|
|
3
|
-
"version": "25.0.0-
|
|
3
|
+
"version": "25.0.0-beta1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -21,9 +21,6 @@
|
|
|
21
21
|
"type": "module",
|
|
22
22
|
"files": [
|
|
23
23
|
"src",
|
|
24
|
-
"!src/styles/*-base-styles.d.ts",
|
|
25
|
-
"!src/styles/*-base-styles.js",
|
|
26
|
-
"theme",
|
|
27
24
|
"vaadin-*.d.ts",
|
|
28
25
|
"vaadin-*.js",
|
|
29
26
|
"web-types.json",
|
|
@@ -37,23 +34,23 @@
|
|
|
37
34
|
],
|
|
38
35
|
"dependencies": {
|
|
39
36
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
40
|
-
"@vaadin/a11y-base": "25.0.0-
|
|
41
|
-
"@vaadin/component-base": "25.0.0-
|
|
42
|
-
"@vaadin/vaadin-
|
|
43
|
-
"@vaadin/vaadin-themable-mixin": "25.0.0-alpha9",
|
|
37
|
+
"@vaadin/a11y-base": "25.0.0-beta1",
|
|
38
|
+
"@vaadin/component-base": "25.0.0-beta1",
|
|
39
|
+
"@vaadin/vaadin-themable-mixin": "25.0.0-beta1",
|
|
44
40
|
"lit": "^3.0.0"
|
|
45
41
|
},
|
|
46
42
|
"devDependencies": {
|
|
47
|
-
"@vaadin/chai-plugins": "25.0.0-
|
|
48
|
-
"@vaadin/custom-field": "25.0.0-
|
|
49
|
-
"@vaadin/test-runner-commands": "25.0.0-
|
|
43
|
+
"@vaadin/chai-plugins": "25.0.0-beta1",
|
|
44
|
+
"@vaadin/custom-field": "25.0.0-beta1",
|
|
45
|
+
"@vaadin/test-runner-commands": "25.0.0-beta1",
|
|
50
46
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
51
|
-
"@vaadin/text-field": "25.0.0-
|
|
52
|
-
"
|
|
47
|
+
"@vaadin/text-field": "25.0.0-beta1",
|
|
48
|
+
"@vaadin/vaadin-lumo-styles": "25.0.0-beta1",
|
|
49
|
+
"sinon": "^21.0.0"
|
|
53
50
|
},
|
|
54
51
|
"web-types": [
|
|
55
52
|
"web-types.json",
|
|
56
53
|
"web-types.lit.json"
|
|
57
54
|
],
|
|
58
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "1d20cf54e582d1f2e209126d4586f8b4c01c50e0"
|
|
59
56
|
}
|
|
@@ -125,7 +125,7 @@ export class ResponsiveStepsLayout extends AbstractLayout {
|
|
|
125
125
|
*/
|
|
126
126
|
|
|
127
127
|
const style = getComputedStyle(host);
|
|
128
|
-
const columnSpacing = style.getPropertyValue('--
|
|
128
|
+
const columnSpacing = style.getPropertyValue('--_column-spacing');
|
|
129
129
|
|
|
130
130
|
const direction = style.direction;
|
|
131
131
|
const marginStartProp = `margin-${direction === 'ltr' ? 'left' : 'right'}`;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Copyright (c) 2018 - 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 '@vaadin/component-base/src/style-props.js';
|
|
6
|
+
import '@vaadin/component-base/src/styles/style-props.js';
|
|
7
7
|
import { css } from 'lit';
|
|
8
8
|
|
|
9
9
|
export const formItemStyles = css`
|
|
@@ -16,7 +16,6 @@ export const formItemStyles = css`
|
|
|
16
16
|
display: inline-flex;
|
|
17
17
|
flex-flow: var(--_form-item-labels-above, column) nowrap;
|
|
18
18
|
justify-self: stretch;
|
|
19
|
-
margin: calc(0.5 * var(--vaadin-form-item-row-spacing, var(--vaadin-form-layout-row-spacing, 1em))) 0;
|
|
20
19
|
}
|
|
21
20
|
|
|
22
21
|
:host([label-position='top']) {
|
|
@@ -29,21 +28,18 @@ export const formItemStyles = css`
|
|
|
29
28
|
}
|
|
30
29
|
|
|
31
30
|
[part='label'] {
|
|
32
|
-
color: var(--vaadin-form-item-label-color, var(--vaadin-color));
|
|
31
|
+
color: var(--vaadin-form-item-label-color, var(--vaadin-text-color));
|
|
33
32
|
flex: 0 0 auto;
|
|
34
33
|
font-size: var(--vaadin-form-item-label-font-size, inherit);
|
|
35
34
|
font-weight: var(--vaadin-form-item-label-font-weight, 500);
|
|
36
35
|
line-height: var(--vaadin-form-item-label-line-height, inherit);
|
|
37
|
-
width: var(
|
|
38
|
-
--_form-item-labels-aside,
|
|
39
|
-
var(--vaadin-form-item-label-width, var(--vaadin-form-layout-label-width, 8em))
|
|
40
|
-
);
|
|
36
|
+
width: var(--_form-item-labels-aside, var(--_label-width, 8em));
|
|
41
37
|
word-break: break-word;
|
|
42
38
|
}
|
|
43
39
|
|
|
44
40
|
#spacing {
|
|
45
41
|
flex: 0 0 auto;
|
|
46
|
-
width: var(--
|
|
42
|
+
width: var(--_label-spacing, 1em);
|
|
47
43
|
}
|
|
48
44
|
|
|
49
45
|
#content {
|
|
@@ -3,16 +3,31 @@
|
|
|
3
3
|
* Copyright (c) 2018 - 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 '@vaadin/component-base/src/style-props.js';
|
|
6
|
+
import '@vaadin/component-base/src/styles/style-props.js';
|
|
7
7
|
import { css } from 'lit';
|
|
8
|
+
import { addGlobalThemeStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
|
|
9
|
+
|
|
10
|
+
addGlobalThemeStyles(
|
|
11
|
+
'vaadin-form-layout-base',
|
|
12
|
+
css`
|
|
13
|
+
@layer vaadin.base {
|
|
14
|
+
:where(html) {
|
|
15
|
+
--vaadin-form-layout-label-spacing: var(--vaadin-gap-s);
|
|
16
|
+
--vaadin-form-layout-label-width: 8em;
|
|
17
|
+
--vaadin-form-layout-column-spacing: var(--vaadin-gap-l);
|
|
18
|
+
--vaadin-form-layout-row-spacing: var(--vaadin-gap-l);
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
`,
|
|
22
|
+
);
|
|
8
23
|
|
|
9
24
|
export const formLayoutStyles = css`
|
|
10
25
|
:host {
|
|
11
26
|
/* Default values */
|
|
12
|
-
--
|
|
13
|
-
--vaadin-form-layout-label-width
|
|
14
|
-
--
|
|
15
|
-
--
|
|
27
|
+
--_label-spacing: var(--vaadin-form-layout-label-spacing);
|
|
28
|
+
--_label-width: var(--vaadin-form-layout-label-width);
|
|
29
|
+
--_column-spacing: var(--vaadin-form-layout-column-spacing);
|
|
30
|
+
--_row-spacing: var(--vaadin-form-layout-row-spacing);
|
|
16
31
|
|
|
17
32
|
align-self: stretch;
|
|
18
33
|
display: block;
|
|
@@ -23,10 +38,16 @@ export const formLayoutStyles = css`
|
|
|
23
38
|
display: none !important;
|
|
24
39
|
}
|
|
25
40
|
|
|
41
|
+
:host(:not([auto-responsive])) {
|
|
42
|
+
contain: layout;
|
|
43
|
+
}
|
|
44
|
+
|
|
26
45
|
:host(:not([auto-responsive])) #layout {
|
|
27
46
|
align-items: baseline; /* default \`stretch\` is not appropriate */
|
|
28
47
|
display: flex;
|
|
29
48
|
flex-wrap: wrap; /* the items should wrap */
|
|
49
|
+
/* Compensate for row spacing */
|
|
50
|
+
margin-block: calc(-0.5 * var(--_row-spacing));
|
|
30
51
|
}
|
|
31
52
|
|
|
32
53
|
:host(:not([auto-responsive])) #layout ::slotted(*) {
|
|
@@ -34,8 +55,9 @@ export const formLayoutStyles = css`
|
|
|
34
55
|
flex-grow: 0;
|
|
35
56
|
flex-shrink: 0;
|
|
36
57
|
|
|
37
|
-
/* Margins make spacing between the columns */
|
|
38
|
-
margin-inline: calc(0.5 * var(--
|
|
58
|
+
/* Margins make spacing between the columns and rows */
|
|
59
|
+
margin-inline: calc(0.5 * var(--_column-spacing));
|
|
60
|
+
margin-block: calc(0.5 * var(--_row-spacing));
|
|
39
61
|
}
|
|
40
62
|
|
|
41
63
|
#layout ::slotted(br) {
|
|
@@ -46,13 +68,11 @@ export const formLayoutStyles = css`
|
|
|
46
68
|
/* Column width */
|
|
47
69
|
--_column-width: var(--vaadin-field-default-width, 12em);
|
|
48
70
|
--_column-width-labels-above: var(--_column-width);
|
|
49
|
-
--_column-width-labels-aside: calc(
|
|
50
|
-
var(--_column-width) + var(--vaadin-form-layout-label-width) + var(--vaadin-form-layout-label-spacing)
|
|
51
|
-
);
|
|
71
|
+
--_column-width-labels-aside: calc(var(--_column-width) + var(--_label-width) + var(--_label-spacing));
|
|
52
72
|
|
|
53
73
|
/* Column gap */
|
|
54
|
-
--_min-total-gap: calc((var(--_min-columns) - 1) * var(--
|
|
55
|
-
--_max-total-gap: calc((var(--_max-columns) - 1) * var(--
|
|
74
|
+
--_min-total-gap: calc((var(--_min-columns) - 1) * var(--_column-spacing));
|
|
75
|
+
--_max-total-gap: calc((var(--_max-columns) - 1) * var(--_column-spacing));
|
|
56
76
|
|
|
57
77
|
/* Minimum form layout width */
|
|
58
78
|
--_min-width-labels-above: calc(var(--_min-columns) * var(--_column-width-labels-above) + var(--_min-total-gap));
|
|
@@ -78,7 +98,7 @@ export const formLayoutStyles = css`
|
|
|
78
98
|
--_grid-repeat: var(--_grid-column-width);
|
|
79
99
|
|
|
80
100
|
display: grid;
|
|
81
|
-
gap: var(--
|
|
101
|
+
gap: var(--_row-spacing) var(--_column-spacing);
|
|
82
102
|
|
|
83
103
|
/*
|
|
84
104
|
Auto-columns can be created when an item's colspan exceeds the rendered column count.
|
|
@@ -87,8 +107,9 @@ export const formLayoutStyles = css`
|
|
|
87
107
|
*/
|
|
88
108
|
grid-auto-columns: 0;
|
|
89
109
|
|
|
110
|
+
align-self: start;
|
|
90
111
|
grid-template-columns: repeat(auto-fill, var(--_grid-repeat));
|
|
91
|
-
|
|
112
|
+
place-items: baseline start;
|
|
92
113
|
|
|
93
114
|
/*
|
|
94
115
|
Firefox requires min-width on both :host and #layout to allow the layout
|
|
@@ -5,10 +5,7 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import { addValueToAttribute, removeValueFromAttribute } from '@vaadin/component-base/src/dom-utils.js';
|
|
7
7
|
import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
|
|
8
|
-
|
|
9
|
-
let spacingDeprecationNotified = false;
|
|
10
|
-
let labelWidthDeprecationNotified = false;
|
|
11
|
-
let labelSpacingDeprecationNotified = false;
|
|
8
|
+
import { issueWarning } from '@vaadin/component-base/src/warnings.js';
|
|
12
9
|
|
|
13
10
|
/**
|
|
14
11
|
* @polymerMixin
|
|
@@ -52,32 +49,6 @@ export const FormItemMixin = (superClass) =>
|
|
|
52
49
|
/** @protected */
|
|
53
50
|
ready() {
|
|
54
51
|
super.ready();
|
|
55
|
-
|
|
56
|
-
const computedStyle = getComputedStyle(this);
|
|
57
|
-
const spacing = computedStyle.getPropertyValue('--vaadin-form-item-row-spacing');
|
|
58
|
-
const labelWidth = computedStyle.getPropertyValue('--vaadin-form-item-label-width');
|
|
59
|
-
const labelSpacing = computedStyle.getPropertyValue('--vaadin-form-item-label-spacing');
|
|
60
|
-
|
|
61
|
-
if (!spacingDeprecationNotified && spacing !== '' && parseInt(spacing) !== 0) {
|
|
62
|
-
console.warn(
|
|
63
|
-
'`--vaadin-form-item-row-spacing` is deprecated since 24.7. Use `--vaadin-form-layout-row-spacing` on <vaadin-form-layout> instead.',
|
|
64
|
-
);
|
|
65
|
-
spacingDeprecationNotified = true;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
if (!labelWidthDeprecationNotified && labelWidth !== '' && parseInt(labelWidth) !== 0) {
|
|
69
|
-
console.warn(
|
|
70
|
-
'`--vaadin-form-item-label-width` is deprecated since 24.7. Use `--vaadin-form-layout-label-width` on <vaadin-form-layout> instead.',
|
|
71
|
-
);
|
|
72
|
-
labelWidthDeprecationNotified = true;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
if (!labelSpacingDeprecationNotified && labelSpacing !== '' && parseInt(labelSpacing) !== 0) {
|
|
76
|
-
console.warn(
|
|
77
|
-
'`--vaadin-form-item-label-spacing` is deprecated since 24.7. Use `--vaadin-form-layout-label-spacing` on <vaadin-form-layout> instead.',
|
|
78
|
-
);
|
|
79
|
-
labelSpacingDeprecationNotified = true;
|
|
80
|
-
}
|
|
81
52
|
}
|
|
82
53
|
|
|
83
54
|
/**
|
|
@@ -120,7 +91,7 @@ export const FormItemMixin = (superClass) =>
|
|
|
120
91
|
__onLabelClick() {
|
|
121
92
|
const fieldNode = this.__fieldNode;
|
|
122
93
|
if (fieldNode) {
|
|
123
|
-
fieldNode.focus();
|
|
94
|
+
fieldNode.focus({ focusVisible: false });
|
|
124
95
|
fieldNode.click();
|
|
125
96
|
}
|
|
126
97
|
}
|
|
@@ -185,7 +156,7 @@ export const FormItemMixin = (superClass) =>
|
|
|
185
156
|
|
|
186
157
|
const fieldNodes = this.$.contentSlot.assignedElements();
|
|
187
158
|
if (fieldNodes.length > 1) {
|
|
188
|
-
|
|
159
|
+
issueWarning(
|
|
189
160
|
`WARNING: Since Vaadin 23, placing multiple fields directly to a <vaadin-form-item> is deprecated.
|
|
190
161
|
Please wrap fields with a <vaadin-custom-field> instead.`,
|
|
191
162
|
);
|
|
@@ -64,7 +64,7 @@ import { FormItemMixin } from './vaadin-form-item-mixin.js';
|
|
|
64
64
|
*
|
|
65
65
|
* The `label-position` host attribute can be used to target the label on top state:
|
|
66
66
|
*
|
|
67
|
-
* ```
|
|
67
|
+
* ```css
|
|
68
68
|
* :host([label-position="top"]) {
|
|
69
69
|
* padding-top: 0.5rem;
|
|
70
70
|
* }
|
|
@@ -80,17 +80,6 @@ import { FormItemMixin } from './vaadin-form-item-mixin.js';
|
|
|
80
80
|
* ---|---
|
|
81
81
|
* label | The label slot container
|
|
82
82
|
*
|
|
83
|
-
* ### Custom CSS Properties Reference
|
|
84
|
-
*
|
|
85
|
-
* The following custom CSS properties are available on the `<vaadin-form-item>`
|
|
86
|
-
* element:
|
|
87
|
-
*
|
|
88
|
-
* Custom CSS property | Description | Default
|
|
89
|
-
* ---|---|---
|
|
90
|
-
* `--vaadin-form-item-label-width` | (DEPRECATED: Use `--vaadin-form-layout-label-width` on `<vaadin-form-layout>` instead) Width of the label column when the labels are aside | `8em`
|
|
91
|
-
* `--vaadin-form-item-label-spacing` | (DEPRECATED: Use `--vaadin-form-layout-label-spacing` on `<vaadin-form-layout>` instead) Spacing between the label column and the input column when the labels are aside | `1em`
|
|
92
|
-
* `--vaadin-form-item-row-spacing` | (DEPRECATED: Use `--vaadin-form-layout-row-spacing` on `<vaadin-form-layout>` instead) Height of the spacing between the form item elements | `1em`
|
|
93
|
-
*
|
|
94
83
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
95
84
|
*/
|
|
96
85
|
declare class FormItem extends FormItemMixin(ThemableMixin(HTMLElement)) {}
|
package/src/vaadin-form-item.js
CHANGED
|
@@ -8,7 +8,7 @@ import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
|
8
8
|
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
9
9
|
import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
|
|
10
10
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
11
|
-
import { formItemStyles } from './styles/vaadin-form-item-
|
|
11
|
+
import { formItemStyles } from './styles/vaadin-form-item-base-styles.js';
|
|
12
12
|
import { FormItemMixin } from './vaadin-form-item-mixin.js';
|
|
13
13
|
|
|
14
14
|
/**
|
|
@@ -69,7 +69,7 @@ import { FormItemMixin } from './vaadin-form-item-mixin.js';
|
|
|
69
69
|
*
|
|
70
70
|
* The `label-position` host attribute can be used to target the label on top state:
|
|
71
71
|
*
|
|
72
|
-
* ```
|
|
72
|
+
* ```css
|
|
73
73
|
* :host([label-position="top"]) {
|
|
74
74
|
* padding-top: 0.5rem;
|
|
75
75
|
* }
|
|
@@ -85,17 +85,6 @@ import { FormItemMixin } from './vaadin-form-item-mixin.js';
|
|
|
85
85
|
* ---|---
|
|
86
86
|
* label | The label slot container
|
|
87
87
|
*
|
|
88
|
-
* ### Custom CSS Properties Reference
|
|
89
|
-
*
|
|
90
|
-
* The following custom CSS properties are available on the `<vaadin-form-item>`
|
|
91
|
-
* element:
|
|
92
|
-
*
|
|
93
|
-
* Custom CSS property | Description | Default
|
|
94
|
-
* ---|---|---
|
|
95
|
-
* `--vaadin-form-item-label-width` | (DEPRECATED: Use `--vaadin-form-layout-label-width` on `<vaadin-form-layout>` instead) Width of the label column when the labels are aside | `8em`
|
|
96
|
-
* `--vaadin-form-item-label-spacing` | (DEPRECATED: Use `--vaadin-form-layout-label-spacing` on `<vaadin-form-layout>` instead) Spacing between the label column and the input column when the labels are aside | `1em`
|
|
97
|
-
* `--vaadin-form-item-row-spacing` | (DEPRECATED: Use `--vaadin-form-layout-row-spacing` on `<vaadin-form-layout>` instead) Height of the spacing between the form item elements | `1em`
|
|
98
|
-
*
|
|
99
88
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
100
89
|
*
|
|
101
90
|
* @customElement
|
|
@@ -34,7 +34,7 @@ export declare class FormLayoutMixinClass {
|
|
|
34
34
|
* enabled explicitly via the `autoResponsive` property or implicitly
|
|
35
35
|
* if the following feature flag is set:
|
|
36
36
|
*
|
|
37
|
-
* ```
|
|
37
|
+
* ```js
|
|
38
38
|
* window.Vaadin.featureFlags.defaultAutoResponsiveFormLayout = true
|
|
39
39
|
* ```
|
|
40
40
|
*
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
import { SlotStylesMixin } from '@vaadin/component-base/src/slot-styles-mixin.js';
|
|
7
7
|
import { AutoResponsiveLayout } from './layouts/auto-responsive-layout.js';
|
|
8
8
|
import { ResponsiveStepsLayout } from './layouts/responsive-steps-layout.js';
|
|
9
|
-
import { formLayoutSlotStyles } from './styles/vaadin-form-layout-
|
|
9
|
+
import { formLayoutSlotStyles } from './styles/vaadin-form-layout-base-styles.js';
|
|
10
10
|
|
|
11
11
|
/**
|
|
12
12
|
* @polymerMixin
|
|
@@ -36,7 +36,7 @@ export const FormLayoutMixin = (superClass) =>
|
|
|
36
36
|
* enabled explicitly via the `autoResponsive` property or implicitly
|
|
37
37
|
* if the following feature flag is set:
|
|
38
38
|
*
|
|
39
|
-
* ```
|
|
39
|
+
* ```js
|
|
40
40
|
* window.Vaadin.featureFlags.defaultAutoResponsiveFormLayout = true
|
|
41
41
|
* ```
|
|
42
42
|
*
|
|
@@ -273,7 +273,7 @@ export const FormLayoutMixin = (superClass) =>
|
|
|
273
273
|
this.__currentLayout.disconnect();
|
|
274
274
|
}
|
|
275
275
|
|
|
276
|
-
/** @
|
|
276
|
+
/** @protected */
|
|
277
277
|
get slotStyles() {
|
|
278
278
|
return [`${formLayoutSlotStyles}`.replace('vaadin-form-layout', this.localName)];
|
|
279
279
|
}
|
|
@@ -7,9 +7,8 @@ import { html, LitElement } from 'lit';
|
|
|
7
7
|
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
8
8
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
9
9
|
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
10
|
-
import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
|
|
11
10
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
12
|
-
import { formLayoutStyles } from './styles/vaadin-form-layout-
|
|
11
|
+
import { formLayoutStyles } from './styles/vaadin-form-layout-base-styles.js';
|
|
13
12
|
import { FormLayoutMixin } from './vaadin-form-layout-mixin.js';
|
|
14
13
|
|
|
15
14
|
/**
|
|
@@ -206,7 +205,7 @@ import { FormLayoutMixin } from './vaadin-form-layout-mixin.js';
|
|
|
206
205
|
* @mixes ElementMixin
|
|
207
206
|
* @mixes ThemableMixin
|
|
208
207
|
*/
|
|
209
|
-
class FormLayout extends FormLayoutMixin(ThemableMixin(ElementMixin(PolylitMixin(
|
|
208
|
+
class FormLayout extends FormLayoutMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement)))) {
|
|
210
209
|
static get is() {
|
|
211
210
|
return 'vaadin-form-layout';
|
|
212
211
|
}
|
|
@@ -215,12 +214,6 @@ class FormLayout extends FormLayoutMixin(ThemableMixin(ElementMixin(PolylitMixin
|
|
|
215
214
|
return formLayoutStyles;
|
|
216
215
|
}
|
|
217
216
|
|
|
218
|
-
static get lumoInjector() {
|
|
219
|
-
return {
|
|
220
|
-
includeBaseStyles: true,
|
|
221
|
-
};
|
|
222
|
-
}
|
|
223
|
-
|
|
224
217
|
/** @protected */
|
|
225
218
|
render() {
|
|
226
219
|
return html`
|
package/src/vaadin-form-row.js
CHANGED
|
@@ -7,7 +7,7 @@ import { html, LitElement } from 'lit';
|
|
|
7
7
|
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
8
8
|
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
9
9
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
10
|
-
import { formRowStyles } from './styles/vaadin-form-row-
|
|
10
|
+
import { formRowStyles } from './styles/vaadin-form-row-base-styles.js';
|
|
11
11
|
|
|
12
12
|
/**
|
|
13
13
|
* `<vaadin-form-row>` is a web component for arranging fields into rows
|
package/vaadin-form-item.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import './
|
|
1
|
+
import './src/vaadin-form-item.js';
|
|
2
2
|
export * from './src/vaadin-form-item.js';
|
package/vaadin-form-layout.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import './
|
|
1
|
+
import './src/vaadin-form-layout.js';
|
|
2
2
|
export * from './src/vaadin-form-layout.js';
|
package/vaadin-form-row.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import './
|
|
1
|
+
import './src/vaadin-form-row.js';
|
|
2
2
|
export * from './src/vaadin-form-row.js';
|
package/web-types.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/form-layout",
|
|
4
|
-
"version": "25.0.0-
|
|
4
|
+
"version": "25.0.0-beta1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-form-item",
|
|
11
|
-
"description": "`<vaadin-form-item>` is a Web Component providing labelled form item wrapper\nfor using inside `<vaadin-form-layout>`.\n\n`<vaadin-form-item>` accepts a single child as the input content,\nand also has a separate named `label` slot:\n\n```html\n<vaadin-form-item>\n <label slot=\"label\">Label aside</label>\n <input>\n</vaadin-form-item>\n```\n\nThe label is optional and can be omitted:\n\n```html\n<vaadin-form-item>\n <input type=\"checkbox\"> Subscribe to our Newsletter\n</vaadin-form-item>\n```\n\nBy default, the `label` slot content is displayed aside of the input content.\nWhen `label-position=\"top\"` is set, the `label` slot content is displayed on top:\n\n```html\n<vaadin-form-item label-position=\"top\">\n <label slot=\"label\">Label on top</label>\n <input>\n</vaadin-form-item>\n```\n\n**Note:** Normally, `<vaadin-form-item>` is used as a child of\na `<vaadin-form-layout>` element. Setting `label-position` is unnecessary,\nbecause the `label-position` attribute is triggered automatically by the parent\n`<vaadin-form-layout>`, depending on its width and responsive behavior.\n\n**Deprecation note:** The `label-position` attribute is deprecated since 24.7 and\nwill be removed in Vaadin 25, when a new approach for setting the label position\nwill be introduced.\n\n### Input Width\n\nBy default, `<vaadin-form-item>` does not manipulate the width of the slotted\ninput element. Optionally you can stretch the child input element to fill\nthe available width for the input content by adding the `full-width` class:\n\n```html\n<vaadin-form-item>\n <label slot=\"label\">Label</label>\n <input class=\"full-width\">\n</vaadin-form-item>\n```\n\n### Styling\n\nThe `label-position` host attribute can be used to target the label on top state:\n\n
|
|
11
|
+
"description": "`<vaadin-form-item>` is a Web Component providing labelled form item wrapper\nfor using inside `<vaadin-form-layout>`.\n\n`<vaadin-form-item>` accepts a single child as the input content,\nand also has a separate named `label` slot:\n\n```html\n<vaadin-form-item>\n <label slot=\"label\">Label aside</label>\n <input>\n</vaadin-form-item>\n```\n\nThe label is optional and can be omitted:\n\n```html\n<vaadin-form-item>\n <input type=\"checkbox\"> Subscribe to our Newsletter\n</vaadin-form-item>\n```\n\nBy default, the `label` slot content is displayed aside of the input content.\nWhen `label-position=\"top\"` is set, the `label` slot content is displayed on top:\n\n```html\n<vaadin-form-item label-position=\"top\">\n <label slot=\"label\">Label on top</label>\n <input>\n</vaadin-form-item>\n```\n\n**Note:** Normally, `<vaadin-form-item>` is used as a child of\na `<vaadin-form-layout>` element. Setting `label-position` is unnecessary,\nbecause the `label-position` attribute is triggered automatically by the parent\n`<vaadin-form-layout>`, depending on its width and responsive behavior.\n\n**Deprecation note:** The `label-position` attribute is deprecated since 24.7 and\nwill be removed in Vaadin 25, when a new approach for setting the label position\nwill be introduced.\n\n### Input Width\n\nBy default, `<vaadin-form-item>` does not manipulate the width of the slotted\ninput element. Optionally you can stretch the child input element to fill\nthe available width for the input content by adding the `full-width` class:\n\n```html\n<vaadin-form-item>\n <label slot=\"label\">Label</label>\n <input class=\"full-width\">\n</vaadin-form-item>\n```\n\n### Styling\n\nThe `label-position` host attribute can be used to target the label on top state:\n\n```css\n:host([label-position=\"top\"]) {\n padding-top: 0.5rem;\n}\n```\n\n**Deprecation note:** The `label-position` attribute is deprecated since 24.7 and\nwill be removed in Vaadin 25, when a new approach to styling the form-item\nbased on the label position will be introduced.\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---|---\nlabel | The label slot container\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "theme",
|
|
@@ -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/25.0.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/25.0.0-beta1/#/elements/vaadin-form-layout#property-columnWidth) and\n[`maxColumns`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-beta1/#/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/25.0.0-beta1/#/elements/vaadin-form-row) elements.\n\n2. Enable the [`autoRows`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-beta1/#/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/25.0.0-beta1/#/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/25.0.0-beta1/#/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/25.0.0-beta1/#/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",
|
|
@@ -135,7 +135,7 @@
|
|
|
135
135
|
"properties": [
|
|
136
136
|
{
|
|
137
137
|
"name": "responsiveSteps",
|
|
138
|
-
"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
|
|
138
|
+
"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```js\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```",
|
|
139
139
|
"value": {
|
|
140
140
|
"type": [
|
|
141
141
|
"Array.<FormLayoutResponsiveStep>"
|
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": "25.0.0-
|
|
4
|
+
"version": "25.0.0-beta1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -16,13 +16,13 @@
|
|
|
16
16
|
"elements": [
|
|
17
17
|
{
|
|
18
18
|
"name": "vaadin-form-item",
|
|
19
|
-
"description": "`<vaadin-form-item>` is a Web Component providing labelled form item wrapper\nfor using inside `<vaadin-form-layout>`.\n\n`<vaadin-form-item>` accepts a single child as the input content,\nand also has a separate named `label` slot:\n\n```html\n<vaadin-form-item>\n <label slot=\"label\">Label aside</label>\n <input>\n</vaadin-form-item>\n```\n\nThe label is optional and can be omitted:\n\n```html\n<vaadin-form-item>\n <input type=\"checkbox\"> Subscribe to our Newsletter\n</vaadin-form-item>\n```\n\nBy default, the `label` slot content is displayed aside of the input content.\nWhen `label-position=\"top\"` is set, the `label` slot content is displayed on top:\n\n```html\n<vaadin-form-item label-position=\"top\">\n <label slot=\"label\">Label on top</label>\n <input>\n</vaadin-form-item>\n```\n\n**Note:** Normally, `<vaadin-form-item>` is used as a child of\na `<vaadin-form-layout>` element. Setting `label-position` is unnecessary,\nbecause the `label-position` attribute is triggered automatically by the parent\n`<vaadin-form-layout>`, depending on its width and responsive behavior.\n\n**Deprecation note:** The `label-position` attribute is deprecated since 24.7 and\nwill be removed in Vaadin 25, when a new approach for setting the label position\nwill be introduced.\n\n### Input Width\n\nBy default, `<vaadin-form-item>` does not manipulate the width of the slotted\ninput element. Optionally you can stretch the child input element to fill\nthe available width for the input content by adding the `full-width` class:\n\n```html\n<vaadin-form-item>\n <label slot=\"label\">Label</label>\n <input class=\"full-width\">\n</vaadin-form-item>\n```\n\n### Styling\n\nThe `label-position` host attribute can be used to target the label on top state:\n\n
|
|
19
|
+
"description": "`<vaadin-form-item>` is a Web Component providing labelled form item wrapper\nfor using inside `<vaadin-form-layout>`.\n\n`<vaadin-form-item>` accepts a single child as the input content,\nand also has a separate named `label` slot:\n\n```html\n<vaadin-form-item>\n <label slot=\"label\">Label aside</label>\n <input>\n</vaadin-form-item>\n```\n\nThe label is optional and can be omitted:\n\n```html\n<vaadin-form-item>\n <input type=\"checkbox\"> Subscribe to our Newsletter\n</vaadin-form-item>\n```\n\nBy default, the `label` slot content is displayed aside of the input content.\nWhen `label-position=\"top\"` is set, the `label` slot content is displayed on top:\n\n```html\n<vaadin-form-item label-position=\"top\">\n <label slot=\"label\">Label on top</label>\n <input>\n</vaadin-form-item>\n```\n\n**Note:** Normally, `<vaadin-form-item>` is used as a child of\na `<vaadin-form-layout>` element. Setting `label-position` is unnecessary,\nbecause the `label-position` attribute is triggered automatically by the parent\n`<vaadin-form-layout>`, depending on its width and responsive behavior.\n\n**Deprecation note:** The `label-position` attribute is deprecated since 24.7 and\nwill be removed in Vaadin 25, when a new approach for setting the label position\nwill be introduced.\n\n### Input Width\n\nBy default, `<vaadin-form-item>` does not manipulate the width of the slotted\ninput element. Optionally you can stretch the child input element to fill\nthe available width for the input content by adding the `full-width` class:\n\n```html\n<vaadin-form-item>\n <label slot=\"label\">Label</label>\n <input class=\"full-width\">\n</vaadin-form-item>\n```\n\n### Styling\n\nThe `label-position` host attribute can be used to target the label on top state:\n\n```css\n:host([label-position=\"top\"]) {\n padding-top: 0.5rem;\n}\n```\n\n**Deprecation note:** The `label-position` attribute is deprecated since 24.7 and\nwill be removed in Vaadin 25, when a new approach to styling the form-item\nbased on the label position will be introduced.\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---|---\nlabel | The label slot container\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": []
|
|
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/25.0.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/25.0.0-beta1/#/elements/vaadin-form-layout#property-columnWidth) and\n[`maxColumns`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-beta1/#/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/25.0.0-beta1/#/elements/vaadin-form-row) elements.\n\n2. Enable the [`autoRows`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-beta1/#/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/25.0.0-beta1/#/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/25.0.0-beta1/#/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/25.0.0-beta1/#/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
|
{
|
|
@@ -62,7 +62,7 @@
|
|
|
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\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
|
|
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```js\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
|
}
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2018 - 2025 Vaadin Ltd.
|
|
4
|
-
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
-
*/
|
|
6
|
-
import { css } from 'lit';
|
|
7
|
-
|
|
8
|
-
export const formItemStyles = css`
|
|
9
|
-
:host {
|
|
10
|
-
/* By default, when auto-responsive mode is disabled, labels should be displayed beside the fields. */
|
|
11
|
-
--_form-item-labels-above: ' '; /* false */
|
|
12
|
-
--_form-item-labels-aside: initial; /* true */
|
|
13
|
-
|
|
14
|
-
display: inline-flex;
|
|
15
|
-
align-items: var(--_form-item-labels-aside, baseline);
|
|
16
|
-
flex-flow: var(--_form-item-labels-above, column) nowrap;
|
|
17
|
-
justify-self: stretch;
|
|
18
|
-
margin: calc(0.5 * var(--vaadin-form-item-row-spacing, var(--vaadin-form-layout-row-spacing, 1em))) 0;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
:host([label-position='top']) {
|
|
22
|
-
--_form-item-labels-above: initial; /* true */
|
|
23
|
-
--_form-item-labels-aside: ' '; /* false */
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
:host([hidden]) {
|
|
27
|
-
display: none !important;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
#label {
|
|
31
|
-
width: var(
|
|
32
|
-
--_form-item-labels-aside,
|
|
33
|
-
var(--vaadin-form-item-label-width, var(--vaadin-form-layout-label-width, 8em))
|
|
34
|
-
);
|
|
35
|
-
flex: 0 0 auto;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
#spacing {
|
|
39
|
-
width: var(--vaadin-form-item-label-spacing, var(--vaadin-form-layout-label-spacing, 1em));
|
|
40
|
-
flex: 0 0 auto;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
#content {
|
|
44
|
-
flex: 1 1 auto;
|
|
45
|
-
min-width: 0;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
#content ::slotted(.full-width) {
|
|
49
|
-
box-sizing: border-box;
|
|
50
|
-
width: 100%;
|
|
51
|
-
min-width: 0;
|
|
52
|
-
}
|
|
53
|
-
`;
|
|
@@ -1,180 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2018 - 2025 Vaadin Ltd.
|
|
4
|
-
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
-
*/
|
|
6
|
-
import { css } from 'lit';
|
|
7
|
-
|
|
8
|
-
export const formLayoutStyles = css`
|
|
9
|
-
:host {
|
|
10
|
-
/* Default values */
|
|
11
|
-
--vaadin-form-layout-row-spacing: 1em;
|
|
12
|
-
--vaadin-form-layout-column-spacing: 2em;
|
|
13
|
-
--vaadin-form-layout-label-width: 8em;
|
|
14
|
-
--vaadin-form-layout-label-spacing: 1em;
|
|
15
|
-
|
|
16
|
-
display: block;
|
|
17
|
-
max-width: 100%;
|
|
18
|
-
align-self: stretch;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
:host([hidden]) {
|
|
22
|
-
display: none !important;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
:host(:not([auto-responsive])) #layout {
|
|
26
|
-
display: flex;
|
|
27
|
-
|
|
28
|
-
align-items: baseline; /* default \`stretch\` is not appropriate */
|
|
29
|
-
|
|
30
|
-
flex-wrap: wrap; /* the items should wrap */
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
:host(:not([auto-responsive])) #layout ::slotted(*) {
|
|
34
|
-
/* Items should neither grow nor shrink. */
|
|
35
|
-
flex-grow: 0;
|
|
36
|
-
flex-shrink: 0;
|
|
37
|
-
|
|
38
|
-
/* Margins make spacing between the columns */
|
|
39
|
-
margin-left: calc(0.5 * var(--vaadin-form-layout-column-spacing));
|
|
40
|
-
margin-right: calc(0.5 * var(--vaadin-form-layout-column-spacing));
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
#layout ::slotted(br) {
|
|
44
|
-
display: none;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
:host([auto-responsive]) {
|
|
48
|
-
/* Column width */
|
|
49
|
-
--_column-width: var(--vaadin-field-default-width, 12em);
|
|
50
|
-
--_column-width-labels-above: var(--_column-width);
|
|
51
|
-
--_column-width-labels-aside: calc(
|
|
52
|
-
var(--_column-width) + var(--vaadin-form-layout-label-width) + var(--vaadin-form-layout-label-spacing)
|
|
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
|
-
|
|
69
|
-
display: flex;
|
|
70
|
-
min-width: var(--_min-width);
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
:host([auto-responsive]) #layout {
|
|
74
|
-
/* By default, labels should be displayed above the fields */
|
|
75
|
-
--_form-item-labels-above: initial; /* true */
|
|
76
|
-
--_form-item-labels-aside: ' '; /* false */
|
|
77
|
-
|
|
78
|
-
/* CSS grid related properties */
|
|
79
|
-
--_grid-column-width: var(--_column-width-labels-above);
|
|
80
|
-
--_grid-repeat: var(--_grid-column-width);
|
|
81
|
-
|
|
82
|
-
display: grid;
|
|
83
|
-
grid-template-columns: repeat(auto-fill, var(--_grid-repeat));
|
|
84
|
-
|
|
85
|
-
/*
|
|
86
|
-
Auto-columns can be created when an item's colspan exceeds the rendered column count.
|
|
87
|
-
By setting auto-columns to 0, we exclude these columns from --_grid-rendered-column-count,
|
|
88
|
-
which is then used to cap the colspan.
|
|
89
|
-
*/
|
|
90
|
-
grid-auto-columns: 0;
|
|
91
|
-
|
|
92
|
-
justify-items: start;
|
|
93
|
-
gap: var(--vaadin-form-layout-row-spacing) var(--vaadin-form-layout-column-spacing);
|
|
94
|
-
|
|
95
|
-
/*
|
|
96
|
-
To prevent the layout from exceeding the column limit defined by --_max-columns,
|
|
97
|
-
its width needs to be constrained:
|
|
98
|
-
|
|
99
|
-
1. "width" is used instead of "max-width" because, together with the default "flex: 0 1 auto",
|
|
100
|
-
it allows the layout to shrink to its minimum width inside <vaadin-horizontal-layout>, which
|
|
101
|
-
wouldn't work otherwise.
|
|
102
|
-
|
|
103
|
-
2. "width" is used instead of "flex-basis" to make the layout expand to the maximum
|
|
104
|
-
number of columns inside <vaadin-overlay>, which creates a new stacking context
|
|
105
|
-
without a predefined width.
|
|
106
|
-
*/
|
|
107
|
-
width: var(--_max-width);
|
|
108
|
-
|
|
109
|
-
/*
|
|
110
|
-
Firefox requires min-width on both :host and #layout to allow the layout
|
|
111
|
-
to shrink below the value specified in the CSS width property above.
|
|
112
|
-
*/
|
|
113
|
-
min-width: var(--_min-width);
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
:host([auto-responsive]) #layout::before {
|
|
117
|
-
background-position-y: var(--_min-width-labels-aside);
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
:host([auto-responsive]) #layout ::slotted(*) {
|
|
121
|
-
/* Make form items inherit label position from the layout */
|
|
122
|
-
--_form-item-labels-above: inherit;
|
|
123
|
-
--_form-item-labels-aside: inherit;
|
|
124
|
-
|
|
125
|
-
/* By default, place each child on a new row */
|
|
126
|
-
grid-column: 1 / span min(var(--_grid-colspan, 1), var(--_grid-rendered-column-count));
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
:host([auto-responsive][auto-rows]) #layout ::slotted(*) {
|
|
130
|
-
grid-column-start: var(--_grid-colstart, auto);
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
:host([auto-responsive][labels-aside]) {
|
|
134
|
-
--_max-width: var(--_max-width-labels-aside);
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
:host([auto-responsive][labels-aside]) #layout[fits-labels-aside] {
|
|
138
|
-
--_form-item-labels-above: ' '; /* false */
|
|
139
|
-
--_form-item-labels-aside: initial; /* true */
|
|
140
|
-
--_grid-column-width: var(--_column-width-labels-aside);
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
:host([auto-responsive][expand-columns]) #layout {
|
|
144
|
-
/*
|
|
145
|
-
The "min" value in minmax ensures that once "maxColumns" is reached, the grid stops adding
|
|
146
|
-
new columns and instead expands the existing ones evenly to fill the available space.
|
|
147
|
-
|
|
148
|
-
The "max" value in minmax allows CSS grid columns to grow and evenly distribute any space
|
|
149
|
-
that remains when there isn't room for an additional column and "maxColumns" hasn't been
|
|
150
|
-
reached yet.
|
|
151
|
-
*/
|
|
152
|
-
--_grid-repeat: minmax(
|
|
153
|
-
max(var(--_grid-column-width), calc((100% - var(--_max-total-gap)) / var(--_max-columns))),
|
|
154
|
-
1fr
|
|
155
|
-
);
|
|
156
|
-
|
|
157
|
-
/* Allow the layout to take up full available width of the parent element. */
|
|
158
|
-
flex-grow: 1;
|
|
159
|
-
}
|
|
160
|
-
`;
|
|
161
|
-
|
|
162
|
-
export const formLayoutSlotStyles = css`
|
|
163
|
-
/* Using :where to ensure user styles always take precedence */
|
|
164
|
-
:where(
|
|
165
|
-
vaadin-form-layout[auto-responsive] > *,
|
|
166
|
-
vaadin-form-layout[auto-responsive] vaadin-form-row > *,
|
|
167
|
-
vaadin-form-layout[auto-responsive] vaadin-form-item > *
|
|
168
|
-
) {
|
|
169
|
-
box-sizing: border-box;
|
|
170
|
-
max-width: 100%;
|
|
171
|
-
}
|
|
172
|
-
|
|
173
|
-
:where(
|
|
174
|
-
vaadin-form-layout[auto-responsive][expand-fields] > *,
|
|
175
|
-
vaadin-form-layout[auto-responsive][expand-fields] vaadin-form-row > *,
|
|
176
|
-
vaadin-form-layout[auto-responsive][expand-fields] vaadin-form-item > *
|
|
177
|
-
) {
|
|
178
|
-
min-width: 100%;
|
|
179
|
-
}
|
|
180
|
-
`;
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2018 - 2025 Vaadin Ltd.
|
|
4
|
-
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
-
*/
|
|
6
|
-
import { css } from 'lit';
|
|
7
|
-
|
|
8
|
-
export const formRowStyles = css`
|
|
9
|
-
:host {
|
|
10
|
-
display: contents;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
:host([hidden]) {
|
|
14
|
-
display: none !important;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
::slotted(*) {
|
|
18
|
-
/* Make form items inherit label position from the layout */
|
|
19
|
-
--_form-item-labels-above: inherit;
|
|
20
|
-
--_form-item-labels-aside: inherit;
|
|
21
|
-
|
|
22
|
-
grid-column: auto / span min(var(--_grid-colspan, 1), var(--_grid-rendered-column-count));
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
::slotted(:first-child) {
|
|
26
|
-
grid-column-start: 1;
|
|
27
|
-
}
|
|
28
|
-
`;
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import '@vaadin/vaadin-lumo-styles/color.js';
|
|
2
|
-
import '@vaadin/vaadin-lumo-styles/spacing.js';
|
|
3
|
-
import '@vaadin/vaadin-lumo-styles/style.js';
|
|
4
|
-
import '@vaadin/vaadin-lumo-styles/typography.js';
|
|
5
|
-
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
6
|
-
|
|
7
|
-
registerStyles(
|
|
8
|
-
'vaadin-form-item',
|
|
9
|
-
css`
|
|
10
|
-
/* font-weight, margin-bottom, transition and line-height same as for part label in text-field */
|
|
11
|
-
[part='label'] {
|
|
12
|
-
color: var(--lumo-secondary-text-color);
|
|
13
|
-
font-family: var(--lumo-font-family);
|
|
14
|
-
font-size: var(--lumo-font-size-s);
|
|
15
|
-
font-weight: 500;
|
|
16
|
-
margin-top: var(--lumo-space-m);
|
|
17
|
-
margin-left: calc(var(--lumo-border-radius-m) / 4);
|
|
18
|
-
margin-bottom: var(--lumo-space-xs);
|
|
19
|
-
line-height: 1.333;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
[part='required-indicator']::after {
|
|
23
|
-
content: var(--lumo-required-field-indicator, '\\2022');
|
|
24
|
-
transition: opacity 0.2s;
|
|
25
|
-
opacity: 0;
|
|
26
|
-
color: var(--lumo-required-field-indicator-color, var(--lumo-primary-text-color));
|
|
27
|
-
position: relative;
|
|
28
|
-
width: 1em;
|
|
29
|
-
text-align: center;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
:host([required]) [part='required-indicator']::after {
|
|
33
|
-
opacity: 1;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
:host([invalid]) [part='required-indicator']::after {
|
|
37
|
-
color: var(--lumo-required-field-indicator-color, var(--lumo-error-text-color));
|
|
38
|
-
}
|
|
39
|
-
`,
|
|
40
|
-
{ moduleId: 'lumo-form-item' },
|
|
41
|
-
);
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import '@vaadin/vaadin-lumo-styles/spacing.js';
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import '@vaadin/vaadin-lumo-styles/spacing.js';
|
|
2
|
-
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
3
|
-
|
|
4
|
-
registerStyles(
|
|
5
|
-
'vaadin-form-layout',
|
|
6
|
-
css`
|
|
7
|
-
:host {
|
|
8
|
-
--vaadin-form-layout-column-spacing: var(--lumo-space-l);
|
|
9
|
-
--vaadin-form-layout-row-spacing: 0;
|
|
10
|
-
}
|
|
11
|
-
`,
|
|
12
|
-
{ moduleId: 'lumo-form-layout' },
|
|
13
|
-
);
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import '../../src/vaadin-form-row.js';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import '../../src/vaadin-form-row.js';
|