@vaadin/form-layout 24.0.0-alpha6 → 24.0.0-alpha7

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.
Files changed (3) hide show
  1. package/package.json +8 -8
  2. package/web-types.json +39 -1
  3. package/web-types.lit.json +29 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/form-layout",
3
- "version": "24.0.0-alpha6",
3
+ "version": "24.0.0-alpha7",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -36,21 +36,21 @@
36
36
  ],
37
37
  "dependencies": {
38
38
  "@polymer/polymer": "^3.0.0",
39
- "@vaadin/component-base": "24.0.0-alpha6",
40
- "@vaadin/vaadin-lumo-styles": "24.0.0-alpha6",
41
- "@vaadin/vaadin-material-styles": "24.0.0-alpha6",
42
- "@vaadin/vaadin-themable-mixin": "24.0.0-alpha6"
39
+ "@vaadin/component-base": "24.0.0-alpha7",
40
+ "@vaadin/vaadin-lumo-styles": "24.0.0-alpha7",
41
+ "@vaadin/vaadin-material-styles": "24.0.0-alpha7",
42
+ "@vaadin/vaadin-themable-mixin": "24.0.0-alpha7"
43
43
  },
44
44
  "devDependencies": {
45
45
  "@esm-bundle/chai": "^4.3.4",
46
- "@vaadin/custom-field": "24.0.0-alpha6",
46
+ "@vaadin/custom-field": "24.0.0-alpha7",
47
47
  "@vaadin/testing-helpers": "^0.3.2",
48
- "@vaadin/text-field": "24.0.0-alpha6",
48
+ "@vaadin/text-field": "24.0.0-alpha7",
49
49
  "sinon": "^13.0.2"
50
50
  },
51
51
  "web-types": [
52
52
  "web-types.json",
53
53
  "web-types.lit.json"
54
54
  ],
55
- "gitHead": "0004ac92b6e5f415b5fa949e0582d1d11e527b1f"
55
+ "gitHead": "aeb4535336813636736759e0a5de148b26bfc3b6"
56
56
  }
package/web-types.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/form-layout",
4
- "version": "24.0.0-alpha6",
4
+ "version": "24.0.0-alpha7",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
@@ -45,6 +45,44 @@
45
45
  ],
46
46
  "js": {
47
47
  "properties": [
48
+ {
49
+ "name": "rootPath",
50
+ "description": "",
51
+ "value": {
52
+ "type": [
53
+ "string"
54
+ ]
55
+ }
56
+ },
57
+ {
58
+ "name": "importPath",
59
+ "description": "",
60
+ "value": {
61
+ "type": [
62
+ "string"
63
+ ]
64
+ }
65
+ },
66
+ {
67
+ "name": "root",
68
+ "description": "",
69
+ "value": {
70
+ "type": [
71
+ "StampedTemplate",
72
+ "HTMLElement",
73
+ "ShadowRoot"
74
+ ]
75
+ }
76
+ },
77
+ {
78
+ "name": "$",
79
+ "description": "",
80
+ "value": {
81
+ "type": [
82
+ "Object.<string, Element>"
83
+ ]
84
+ }
85
+ },
48
86
  {
49
87
  "name": "responsiveSteps",
50
88
  "description": "Allows specifying a responsive behavior with the number of columns\nand the label position depending on the layout width.\n\nFormat: array of objects, each object defines one responsive step\nwith `minWidth` CSS length, `columns` number, and optional\n`labelsPosition` string of `\"aside\"` or `\"top\"`. At least one item is required.\n\n#### Examples\n\n```javascript\nformLayout.responsiveSteps = [{columns: 1}];\n// The layout is always a single column, labels aside.\n```\n```javascript\nformLayout.responsiveSteps = [\n {minWidth: 0, columns: 1},\n {minWidth: '40em', columns: 2}\n];\n// Sets two responsive steps:\n// 1. When the layout width is < 40em, one column, labels aside.\n// 2. Width >= 40em, two columns, labels aside.\n```\n```javascript\nformLayout.responsiveSteps = [\n {minWidth: 0, columns: 1, labelsPosition: 'top'},\n {minWidth: '20em', columns: 1},\n {minWidth: '40em', columns: 2}\n];\n// Default value. Three responsive steps:\n// 1. Width < 20em, one column, labels on top.\n// 2. 20em <= width < 40em, one column, labels aside.\n// 3. Width >= 40em, two columns, labels aside.\n```",
package/web-types.lit.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/form-layout",
4
- "version": "24.0.0-alpha6",
4
+ "version": "24.0.0-alpha7",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {
@@ -25,6 +25,34 @@
25
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` 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### 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`",
26
26
  "extension": true,
27
27
  "attributes": [
28
+ {
29
+ "name": ".rootPath",
30
+ "description": "",
31
+ "value": {
32
+ "kind": "expression"
33
+ }
34
+ },
35
+ {
36
+ "name": ".importPath",
37
+ "description": "",
38
+ "value": {
39
+ "kind": "expression"
40
+ }
41
+ },
42
+ {
43
+ "name": ".root",
44
+ "description": "",
45
+ "value": {
46
+ "kind": "expression"
47
+ }
48
+ },
49
+ {
50
+ "name": ".$",
51
+ "description": "",
52
+ "value": {
53
+ "kind": "expression"
54
+ }
55
+ },
28
56
  {
29
57
  "name": ".responsiveSteps",
30
58
  "description": "Allows specifying a responsive behavior with the number of columns\nand the label position depending on the layout width.\n\nFormat: array of objects, each object defines one responsive step\nwith `minWidth` CSS length, `columns` number, and optional\n`labelsPosition` string of `\"aside\"` or `\"top\"`. At least one item is required.\n\n#### Examples\n\n```javascript\nformLayout.responsiveSteps = [{columns: 1}];\n// The layout is always a single column, labels aside.\n```\n```javascript\nformLayout.responsiveSteps = [\n {minWidth: 0, columns: 1},\n {minWidth: '40em', columns: 2}\n];\n// Sets two responsive steps:\n// 1. When the layout width is < 40em, one column, labels aside.\n// 2. Width >= 40em, two columns, labels aside.\n```\n```javascript\nformLayout.responsiveSteps = [\n {minWidth: 0, columns: 1, labelsPosition: 'top'},\n {minWidth: '20em', columns: 1},\n {minWidth: '40em', columns: 2}\n];\n// Default value. Three responsive steps:\n// 1. Width < 20em, one column, labels on top.\n// 2. 20em <= width < 40em, one column, labels aside.\n// 3. Width >= 40em, two columns, labels aside.\n```",