@vaadin/form-layout 25.1.0-beta4 → 25.1.0
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/custom-elements.json +1 -1
- package/package.json +11 -11
- package/src/vaadin-form-item.d.ts +10 -11
- package/src/vaadin-form-item.js +10 -11
- package/web-types.json +3 -3
- package/web-types.lit.json +3 -3
package/custom-elements.json
CHANGED
|
@@ -80,7 +80,7 @@
|
|
|
80
80
|
"declarations": [
|
|
81
81
|
{
|
|
82
82
|
"kind": "class",
|
|
83
|
-
"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
|
|
83
|
+
"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 and will be removed\nin Vaadin 26. Use `labelsAside` property on the form-layout instead.\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` attribute can be used to target the label on top state:\n\n```css\nvaadin-form-item[label-position=\"top\"] {\n padding-top: 0.5rem;\n}\n```\n\n**Deprecation note:** The `label-position` attribute is deprecated and will be removed\nin Vaadin 26. Use `labelsAside` property on the form-layout instead.\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|-------------\n`label` | The slotted label element wrapper\n`required-indicator` | The `required` state indicator element\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
84
84
|
"name": "FormItem",
|
|
85
85
|
"members": [],
|
|
86
86
|
"mixins": [
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/form-layout",
|
|
3
|
-
"version": "25.1.0
|
|
3
|
+
"version": "25.1.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -35,19 +35,19 @@
|
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
|
-
"@vaadin/a11y-base": "25.1.0
|
|
39
|
-
"@vaadin/component-base": "25.1.0
|
|
40
|
-
"@vaadin/vaadin-themable-mixin": "25.1.0
|
|
38
|
+
"@vaadin/a11y-base": "~25.1.0",
|
|
39
|
+
"@vaadin/component-base": "~25.1.0",
|
|
40
|
+
"@vaadin/vaadin-themable-mixin": "~25.1.0",
|
|
41
41
|
"lit": "^3.0.0"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
|
-
"@vaadin/aura": "25.1.0
|
|
45
|
-
"@vaadin/chai-plugins": "25.1.0
|
|
46
|
-
"@vaadin/custom-field": "25.1.0
|
|
47
|
-
"@vaadin/test-runner-commands": "25.1.0
|
|
44
|
+
"@vaadin/aura": "~25.1.0",
|
|
45
|
+
"@vaadin/chai-plugins": "~25.1.0",
|
|
46
|
+
"@vaadin/custom-field": "~25.1.0",
|
|
47
|
+
"@vaadin/test-runner-commands": "~25.1.0",
|
|
48
48
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
49
|
-
"@vaadin/text-field": "25.1.0
|
|
50
|
-
"@vaadin/vaadin-lumo-styles": "25.1.0
|
|
49
|
+
"@vaadin/text-field": "~25.1.0",
|
|
50
|
+
"@vaadin/vaadin-lumo-styles": "~25.1.0",
|
|
51
51
|
"sinon": "^21.0.2"
|
|
52
52
|
},
|
|
53
53
|
"customElements": "custom-elements.json",
|
|
@@ -55,5 +55,5 @@
|
|
|
55
55
|
"web-types.json",
|
|
56
56
|
"web-types.lit.json"
|
|
57
57
|
],
|
|
58
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "dab1861c10002b1d191b6a37f55e574e0b470ca5"
|
|
59
59
|
}
|
|
@@ -43,9 +43,8 @@ import { FormItemMixin } from './vaadin-form-item-mixin.js';
|
|
|
43
43
|
* because the `label-position` attribute is triggered automatically by the parent
|
|
44
44
|
* `<vaadin-form-layout>`, depending on its width and responsive behavior.
|
|
45
45
|
*
|
|
46
|
-
* **Deprecation note:** The `label-position` attribute is deprecated
|
|
47
|
-
*
|
|
48
|
-
* will be introduced.
|
|
46
|
+
* **Deprecation note:** The `label-position` attribute is deprecated and will be removed
|
|
47
|
+
* in Vaadin 26. Use `labelsAside` property on the form-layout instead.
|
|
49
48
|
*
|
|
50
49
|
* ### Input Width
|
|
51
50
|
*
|
|
@@ -62,23 +61,23 @@ import { FormItemMixin } from './vaadin-form-item-mixin.js';
|
|
|
62
61
|
*
|
|
63
62
|
* ### Styling
|
|
64
63
|
*
|
|
65
|
-
* The `label-position`
|
|
64
|
+
* The `label-position` attribute can be used to target the label on top state:
|
|
66
65
|
*
|
|
67
66
|
* ```css
|
|
68
|
-
*
|
|
67
|
+
* vaadin-form-item[label-position="top"] {
|
|
69
68
|
* padding-top: 0.5rem;
|
|
70
69
|
* }
|
|
71
70
|
* ```
|
|
72
71
|
*
|
|
73
|
-
* **Deprecation note:** The `label-position` attribute is deprecated
|
|
74
|
-
*
|
|
75
|
-
* based on the label position will be introduced.
|
|
72
|
+
* **Deprecation note:** The `label-position` attribute is deprecated and will be removed
|
|
73
|
+
* in Vaadin 26. Use `labelsAside` property on the form-layout instead.
|
|
76
74
|
*
|
|
77
75
|
* The following shadow DOM parts are available for styling:
|
|
78
76
|
*
|
|
79
|
-
* Part name
|
|
80
|
-
*
|
|
81
|
-
* label
|
|
77
|
+
* Part name | Description
|
|
78
|
+
* ---------------------|-------------
|
|
79
|
+
* `label` | The slotted label element wrapper
|
|
80
|
+
* `required-indicator` | The `required` state indicator element
|
|
82
81
|
*
|
|
83
82
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
84
83
|
*/
|
package/src/vaadin-form-item.js
CHANGED
|
@@ -48,9 +48,8 @@ import { FormItemMixin } from './vaadin-form-item-mixin.js';
|
|
|
48
48
|
* because the `label-position` attribute is triggered automatically by the parent
|
|
49
49
|
* `<vaadin-form-layout>`, depending on its width and responsive behavior.
|
|
50
50
|
*
|
|
51
|
-
* **Deprecation note:** The `label-position` attribute is deprecated
|
|
52
|
-
*
|
|
53
|
-
* will be introduced.
|
|
51
|
+
* **Deprecation note:** The `label-position` attribute is deprecated and will be removed
|
|
52
|
+
* in Vaadin 26. Use `labelsAside` property on the form-layout instead.
|
|
54
53
|
*
|
|
55
54
|
* ### Input Width
|
|
56
55
|
*
|
|
@@ -67,23 +66,23 @@ import { FormItemMixin } from './vaadin-form-item-mixin.js';
|
|
|
67
66
|
*
|
|
68
67
|
* ### Styling
|
|
69
68
|
*
|
|
70
|
-
* The `label-position`
|
|
69
|
+
* The `label-position` attribute can be used to target the label on top state:
|
|
71
70
|
*
|
|
72
71
|
* ```css
|
|
73
|
-
*
|
|
72
|
+
* vaadin-form-item[label-position="top"] {
|
|
74
73
|
* padding-top: 0.5rem;
|
|
75
74
|
* }
|
|
76
75
|
* ```
|
|
77
76
|
*
|
|
78
|
-
* **Deprecation note:** The `label-position` attribute is deprecated
|
|
79
|
-
*
|
|
80
|
-
* based on the label position will be introduced.
|
|
77
|
+
* **Deprecation note:** The `label-position` attribute is deprecated and will be removed
|
|
78
|
+
* in Vaadin 26. Use `labelsAside` property on the form-layout instead.
|
|
81
79
|
*
|
|
82
80
|
* The following shadow DOM parts are available for styling:
|
|
83
81
|
*
|
|
84
|
-
* Part name
|
|
85
|
-
*
|
|
86
|
-
* label
|
|
82
|
+
* Part name | Description
|
|
83
|
+
* ---------------------|-------------
|
|
84
|
+
* `label` | The slotted label element wrapper
|
|
85
|
+
* `required-indicator` | The `required` state indicator element
|
|
87
86
|
*
|
|
88
87
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
89
88
|
*
|
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.1.0
|
|
4
|
+
"version": "25.1.0",
|
|
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
|
|
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 and will be removed\nin Vaadin 26. Use `labelsAside` property on the form-layout instead.\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` attribute can be used to target the label on top state:\n\n```css\nvaadin-form-item[label-position=\"top\"] {\n padding-top: 0.5rem;\n}\n```\n\n**Deprecation note:** The `label-position` attribute is deprecated and will be removed\nin Vaadin 26. Use `labelsAside` property on the form-layout instead.\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|-------------\n`label` | The slotted label element wrapper\n`required-indicator` | The `required` state indicator element\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.1.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.1.0/#/elements/vaadin-form-layout#property-columnWidth) and\n[`maxColumns`](https://cdn.vaadin.com/vaadin-web-components/25.1.0/#/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.1.0/#/elements/vaadin-form-row) elements.\n\n2. Enable the [`autoRows`](https://cdn.vaadin.com/vaadin-web-components/25.1.0/#/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.1.0/#/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.1.0/#/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.1.0/#/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 for styling:\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",
|
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.1.0
|
|
4
|
+
"version": "25.1.0",
|
|
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
|
|
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 and will be removed\nin Vaadin 26. Use `labelsAside` property on the form-layout instead.\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` attribute can be used to target the label on top state:\n\n```css\nvaadin-form-item[label-position=\"top\"] {\n padding-top: 0.5rem;\n}\n```\n\n**Deprecation note:** The `label-position` attribute is deprecated and will be removed\nin Vaadin 26. Use `labelsAside` property on the form-layout instead.\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|-------------\n`label` | The slotted label element wrapper\n`required-indicator` | The `required` state indicator element\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.1.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.1.0/#/elements/vaadin-form-layout#property-columnWidth) and\n[`maxColumns`](https://cdn.vaadin.com/vaadin-web-components/25.1.0/#/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.1.0/#/elements/vaadin-form-row) elements.\n\n2. Enable the [`autoRows`](https://cdn.vaadin.com/vaadin-web-components/25.1.0/#/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.1.0/#/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.1.0/#/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.1.0/#/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 for styling:\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
|
{
|