@vaadin/master-detail-layout 25.1.0-alpha8 → 25.1.0-alpha9
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 +8 -8
- package/src/styles/vaadin-master-detail-layout-base-styles.d.ts +1 -1
- package/src/styles/vaadin-master-detail-layout-base-styles.js +1 -1
- package/src/styles/vaadin-master-detail-layout-transition-base-styles.d.ts +1 -1
- package/src/styles/vaadin-master-detail-layout-transition-base-styles.js +1 -1
- package/src/vaadin-master-detail-layout.d.ts +1 -1
- package/src/vaadin-master-detail-layout.js +1 -1
- package/web-types.json +41 -41
- package/web-types.lit.json +13 -13
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/master-detail-layout",
|
|
3
|
-
"version": "25.1.0-
|
|
3
|
+
"version": "25.1.0-alpha9",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -34,16 +34,16 @@
|
|
|
34
34
|
"web-component"
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@vaadin/a11y-base": "25.1.0-
|
|
38
|
-
"@vaadin/component-base": "25.1.0-
|
|
39
|
-
"@vaadin/vaadin-themable-mixin": "25.1.0-
|
|
37
|
+
"@vaadin/a11y-base": "25.1.0-alpha9",
|
|
38
|
+
"@vaadin/component-base": "25.1.0-alpha9",
|
|
39
|
+
"@vaadin/vaadin-themable-mixin": "25.1.0-alpha9",
|
|
40
40
|
"lit": "^3.0.0"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
|
-
"@vaadin/aura": "25.1.0-
|
|
44
|
-
"@vaadin/chai-plugins": "25.1.0-
|
|
43
|
+
"@vaadin/aura": "25.1.0-alpha9",
|
|
44
|
+
"@vaadin/chai-plugins": "25.1.0-alpha9",
|
|
45
45
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
46
|
-
"@vaadin/vaadin-lumo-styles": "25.1.0-
|
|
46
|
+
"@vaadin/vaadin-lumo-styles": "25.1.0-alpha9",
|
|
47
47
|
"sinon": "^21.0.0"
|
|
48
48
|
},
|
|
49
49
|
"customElements": "custom-elements.json",
|
|
@@ -51,5 +51,5 @@
|
|
|
51
51
|
"web-types.json",
|
|
52
52
|
"web-types.lit.json"
|
|
53
53
|
],
|
|
54
|
-
"gitHead": "
|
|
54
|
+
"gitHead": "ef432311376ba3dac4233cb23d393a49a425e0a4"
|
|
55
55
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c)
|
|
3
|
+
* Copyright (c) 2025 - 2026 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import '@vaadin/component-base/src/styles/style-props.js';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @license
|
|
3
|
-
* Copyright (c)
|
|
3
|
+
* Copyright (c) 2025 - 2026 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
6
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
package/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/master-detail-layout",
|
|
4
|
-
"version": "25.1.0-
|
|
4
|
+
"version": "25.1.0-alpha9",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -11,8 +11,8 @@
|
|
|
11
11
|
"description": "`<vaadin-master-detail-layout>` is a web component for building UIs with a master\n(or primary) area and a detail (or secondary) area that is displayed next to, or\noverlaid on top of, the master area, depending on configuration and viewport size.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------|----------------------\n`backdrop` | Backdrop covering the master area in the drawer mode\n`master` | The master area\n`detail` | The detail area\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------| -----------\n`containment` | Set to `layout` or `viewport` depending on the containment.\n`orientation` | Set to `horizontal` or `vertical` depending on the orientation.\n`has-detail` | Set when the detail content is provided.\n`drawer` | Set when the layout is using the drawer mode.\n`stack` | Set when the layout is using the stack mode.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:----------------------------------------------------|\n| `--vaadin-master-detail-layout-border-color` |\n| `--vaadin-master-detail-layout-border-width` |\n| `--vaadin-master-detail-layout-detail-background` |\n| `--vaadin-master-detail-layout-detail-shadow` |\n| `--vaadin-overlay-backdrop-background` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
|
-
"name": "
|
|
15
|
-
"description": "
|
|
14
|
+
"name": "containment",
|
|
15
|
+
"description": "Defines the containment of the detail area when the layout is in\noverlay mode. When set to `layout`, the overlay is confined to the\nlayout. When set to `viewport`, the overlay is confined to the\nbrowser's viewport. Defaults to `layout`.",
|
|
16
16
|
"value": {
|
|
17
17
|
"type": [
|
|
18
18
|
"string",
|
|
@@ -33,8 +33,8 @@
|
|
|
33
33
|
}
|
|
34
34
|
},
|
|
35
35
|
{
|
|
36
|
-
"name": "
|
|
37
|
-
"description": "Fixed size (in CSS length units) to be set on the
|
|
36
|
+
"name": "detail-size",
|
|
37
|
+
"description": "Fixed size (in CSS length units) to be set on the detail area.\nWhen specified, it prevents the detail area from growing or\nshrinking. If there is not enough space to show master and detail\nareas next to each other, the details are shown as an overlay:\neither as drawer or stack, depending on the `stackOverlay` property.",
|
|
38
38
|
"value": {
|
|
39
39
|
"type": [
|
|
40
40
|
"string",
|
|
@@ -44,19 +44,19 @@
|
|
|
44
44
|
}
|
|
45
45
|
},
|
|
46
46
|
{
|
|
47
|
-
"name": "
|
|
48
|
-
"description": "
|
|
47
|
+
"name": "force-overlay",
|
|
48
|
+
"description": "When specified, forces the details to be shown as an overlay\n(either as drawer or stack), even if there is enough space for\nmaster and detail to be shown next to each other using the default\n(split) mode.\n\nIn order to enforce the stack mode, use this property together with\n`stackOverlay` property and set both to `true`.",
|
|
49
49
|
"value": {
|
|
50
50
|
"type": [
|
|
51
|
-
"
|
|
51
|
+
"boolean",
|
|
52
52
|
"null",
|
|
53
53
|
"undefined"
|
|
54
54
|
]
|
|
55
55
|
}
|
|
56
56
|
},
|
|
57
57
|
{
|
|
58
|
-
"name": "
|
|
59
|
-
"description": "
|
|
58
|
+
"name": "master-min-size",
|
|
59
|
+
"description": "Minimum size (in CSS length units) to be set on the master area.\nWhen specified, it prevents the master area from shrinking below\nthis size. If there is not enough space to show master and detail\nareas next to each other, the details are shown as an overlay:\neither as drawer or stack, depending on the `stackOverlay` property.",
|
|
60
60
|
"value": {
|
|
61
61
|
"type": [
|
|
62
62
|
"string",
|
|
@@ -66,41 +66,41 @@
|
|
|
66
66
|
}
|
|
67
67
|
},
|
|
68
68
|
{
|
|
69
|
-
"name": "
|
|
70
|
-
"description": "
|
|
69
|
+
"name": "master-size",
|
|
70
|
+
"description": "Fixed size (in CSS length units) to be set on the master area.\nWhen specified, it prevents the master area from growing or\nshrinking. If there is not enough space to show master and detail\nareas next to each other, the details are shown as an overlay:\neither as drawer or stack, depending on the `stackOverlay` property.",
|
|
71
71
|
"value": {
|
|
72
72
|
"type": [
|
|
73
|
-
"
|
|
73
|
+
"string",
|
|
74
74
|
"null",
|
|
75
75
|
"undefined"
|
|
76
76
|
]
|
|
77
77
|
}
|
|
78
78
|
},
|
|
79
79
|
{
|
|
80
|
-
"name": "
|
|
81
|
-
"description": "
|
|
80
|
+
"name": "no-animation",
|
|
81
|
+
"description": "When true, the layout does not use animated transitions for the detail area.",
|
|
82
82
|
"value": {
|
|
83
83
|
"type": [
|
|
84
|
-
"
|
|
84
|
+
"boolean",
|
|
85
85
|
"null",
|
|
86
86
|
"undefined"
|
|
87
87
|
]
|
|
88
88
|
}
|
|
89
89
|
},
|
|
90
90
|
{
|
|
91
|
-
"name": "
|
|
92
|
-
"description": "
|
|
91
|
+
"name": "orientation",
|
|
92
|
+
"description": "Define how master and detail areas are shown next to each other,\nand the way how size and min-size properties are applied to them.\nPossible values are: `horizontal` or `vertical`.\nDefaults to horizontal.",
|
|
93
93
|
"value": {
|
|
94
94
|
"type": [
|
|
95
|
-
"
|
|
95
|
+
"string",
|
|
96
96
|
"null",
|
|
97
97
|
"undefined"
|
|
98
98
|
]
|
|
99
99
|
}
|
|
100
100
|
},
|
|
101
101
|
{
|
|
102
|
-
"name": "
|
|
103
|
-
"description": "When true, the layout
|
|
102
|
+
"name": "stack-overlay",
|
|
103
|
+
"description": "When true, the layout in the overlay mode is rendered as a stack,\nmaking detail area fully cover the master area. Otherwise, it is\nrendered as a drawer and has a visual backdrop.\n\nIn order to enforce the stack mode, use this property together with\n`forceOverlay` property and set both to `true`.",
|
|
104
104
|
"value": {
|
|
105
105
|
"type": [
|
|
106
106
|
"boolean",
|
|
@@ -124,8 +124,8 @@
|
|
|
124
124
|
"js": {
|
|
125
125
|
"properties": [
|
|
126
126
|
{
|
|
127
|
-
"name": "
|
|
128
|
-
"description": "
|
|
127
|
+
"name": "containment",
|
|
128
|
+
"description": "Defines the containment of the detail area when the layout is in\noverlay mode. When set to `layout`, the overlay is confined to the\nlayout. When set to `viewport`, the overlay is confined to the\nbrowser's viewport. Defaults to `layout`.",
|
|
129
129
|
"value": {
|
|
130
130
|
"type": [
|
|
131
131
|
"string",
|
|
@@ -146,8 +146,8 @@
|
|
|
146
146
|
}
|
|
147
147
|
},
|
|
148
148
|
{
|
|
149
|
-
"name": "
|
|
150
|
-
"description": "Fixed size (in CSS length units) to be set on the
|
|
149
|
+
"name": "detailSize",
|
|
150
|
+
"description": "Fixed size (in CSS length units) to be set on the detail area.\nWhen specified, it prevents the detail area from growing or\nshrinking. If there is not enough space to show master and detail\nareas next to each other, the details are shown as an overlay:\neither as drawer or stack, depending on the `stackOverlay` property.",
|
|
151
151
|
"value": {
|
|
152
152
|
"type": [
|
|
153
153
|
"string",
|
|
@@ -157,19 +157,19 @@
|
|
|
157
157
|
}
|
|
158
158
|
},
|
|
159
159
|
{
|
|
160
|
-
"name": "
|
|
161
|
-
"description": "
|
|
160
|
+
"name": "forceOverlay",
|
|
161
|
+
"description": "When specified, forces the details to be shown as an overlay\n(either as drawer or stack), even if there is enough space for\nmaster and detail to be shown next to each other using the default\n(split) mode.\n\nIn order to enforce the stack mode, use this property together with\n`stackOverlay` property and set both to `true`.",
|
|
162
162
|
"value": {
|
|
163
163
|
"type": [
|
|
164
|
-
"
|
|
164
|
+
"boolean",
|
|
165
165
|
"null",
|
|
166
166
|
"undefined"
|
|
167
167
|
]
|
|
168
168
|
}
|
|
169
169
|
},
|
|
170
170
|
{
|
|
171
|
-
"name": "
|
|
172
|
-
"description": "
|
|
171
|
+
"name": "masterMinSize",
|
|
172
|
+
"description": "Minimum size (in CSS length units) to be set on the master area.\nWhen specified, it prevents the master area from shrinking below\nthis size. If there is not enough space to show master and detail\nareas next to each other, the details are shown as an overlay:\neither as drawer or stack, depending on the `stackOverlay` property.",
|
|
173
173
|
"value": {
|
|
174
174
|
"type": [
|
|
175
175
|
"string",
|
|
@@ -179,41 +179,41 @@
|
|
|
179
179
|
}
|
|
180
180
|
},
|
|
181
181
|
{
|
|
182
|
-
"name": "
|
|
183
|
-
"description": "
|
|
182
|
+
"name": "masterSize",
|
|
183
|
+
"description": "Fixed size (in CSS length units) to be set on the master area.\nWhen specified, it prevents the master area from growing or\nshrinking. If there is not enough space to show master and detail\nareas next to each other, the details are shown as an overlay:\neither as drawer or stack, depending on the `stackOverlay` property.",
|
|
184
184
|
"value": {
|
|
185
185
|
"type": [
|
|
186
|
-
"
|
|
186
|
+
"string",
|
|
187
187
|
"null",
|
|
188
188
|
"undefined"
|
|
189
189
|
]
|
|
190
190
|
}
|
|
191
191
|
},
|
|
192
192
|
{
|
|
193
|
-
"name": "
|
|
194
|
-
"description": "
|
|
193
|
+
"name": "noAnimation",
|
|
194
|
+
"description": "When true, the layout does not use animated transitions for the detail area.",
|
|
195
195
|
"value": {
|
|
196
196
|
"type": [
|
|
197
|
-
"
|
|
197
|
+
"boolean",
|
|
198
198
|
"null",
|
|
199
199
|
"undefined"
|
|
200
200
|
]
|
|
201
201
|
}
|
|
202
202
|
},
|
|
203
203
|
{
|
|
204
|
-
"name": "
|
|
205
|
-
"description": "
|
|
204
|
+
"name": "orientation",
|
|
205
|
+
"description": "Define how master and detail areas are shown next to each other,\nand the way how size and min-size properties are applied to them.\nPossible values are: `horizontal` or `vertical`.\nDefaults to horizontal.",
|
|
206
206
|
"value": {
|
|
207
207
|
"type": [
|
|
208
|
-
"
|
|
208
|
+
"string",
|
|
209
209
|
"null",
|
|
210
210
|
"undefined"
|
|
211
211
|
]
|
|
212
212
|
}
|
|
213
213
|
},
|
|
214
214
|
{
|
|
215
|
-
"name": "
|
|
216
|
-
"description": "When true, the layout
|
|
215
|
+
"name": "stackOverlay",
|
|
216
|
+
"description": "When true, the layout in the overlay mode is rendered as a stack,\nmaking detail area fully cover the master area. Otherwise, it is\nrendered as a drawer and has a visual backdrop.\n\nIn order to enforce the stack mode, use this property together with\n`forceOverlay` property and set both to `true`.",
|
|
217
217
|
"value": {
|
|
218
218
|
"type": [
|
|
219
219
|
"boolean",
|
package/web-types.lit.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/master-detail-layout",
|
|
4
|
-
"version": "25.1.0-
|
|
4
|
+
"version": "25.1.0-alpha9",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -27,22 +27,22 @@
|
|
|
27
27
|
}
|
|
28
28
|
},
|
|
29
29
|
{
|
|
30
|
-
"name": "?
|
|
31
|
-
"description": "When true, the layout
|
|
30
|
+
"name": "?noAnimation",
|
|
31
|
+
"description": "When true, the layout does not use animated transitions for the detail area.",
|
|
32
32
|
"value": {
|
|
33
33
|
"kind": "expression"
|
|
34
34
|
}
|
|
35
35
|
},
|
|
36
36
|
{
|
|
37
|
-
"name": "?
|
|
38
|
-
"description": "When true, the layout
|
|
37
|
+
"name": "?stackOverlay",
|
|
38
|
+
"description": "When true, the layout in the overlay mode is rendered as a stack,\nmaking detail area fully cover the master area. Otherwise, it is\nrendered as a drawer and has a visual backdrop.\n\nIn order to enforce the stack mode, use this property together with\n`forceOverlay` property and set both to `true`.",
|
|
39
39
|
"value": {
|
|
40
40
|
"kind": "expression"
|
|
41
41
|
}
|
|
42
42
|
},
|
|
43
43
|
{
|
|
44
|
-
"name": ".
|
|
45
|
-
"description": "
|
|
44
|
+
"name": ".containment",
|
|
45
|
+
"description": "Defines the containment of the detail area when the layout is in\noverlay mode. When set to `layout`, the overlay is confined to the\nlayout. When set to `viewport`, the overlay is confined to the\nbrowser's viewport. Defaults to `layout`.",
|
|
46
46
|
"value": {
|
|
47
47
|
"kind": "expression"
|
|
48
48
|
}
|
|
@@ -55,8 +55,8 @@
|
|
|
55
55
|
}
|
|
56
56
|
},
|
|
57
57
|
{
|
|
58
|
-
"name": ".
|
|
59
|
-
"description": "Fixed size (in CSS length units) to be set on the
|
|
58
|
+
"name": ".detailSize",
|
|
59
|
+
"description": "Fixed size (in CSS length units) to be set on the detail area.\nWhen specified, it prevents the detail area from growing or\nshrinking. If there is not enough space to show master and detail\nareas next to each other, the details are shown as an overlay:\neither as drawer or stack, depending on the `stackOverlay` property.",
|
|
60
60
|
"value": {
|
|
61
61
|
"kind": "expression"
|
|
62
62
|
}
|
|
@@ -69,15 +69,15 @@
|
|
|
69
69
|
}
|
|
70
70
|
},
|
|
71
71
|
{
|
|
72
|
-
"name": ".
|
|
73
|
-
"description": "
|
|
72
|
+
"name": ".masterSize",
|
|
73
|
+
"description": "Fixed size (in CSS length units) to be set on the master area.\nWhen specified, it prevents the master area from growing or\nshrinking. If there is not enough space to show master and detail\nareas next to each other, the details are shown as an overlay:\neither as drawer or stack, depending on the `stackOverlay` property.",
|
|
74
74
|
"value": {
|
|
75
75
|
"kind": "expression"
|
|
76
76
|
}
|
|
77
77
|
},
|
|
78
78
|
{
|
|
79
|
-
"name": ".
|
|
80
|
-
"description": "
|
|
79
|
+
"name": ".orientation",
|
|
80
|
+
"description": "Define how master and detail areas are shown next to each other,\nand the way how size and min-size properties are applied to them.\nPossible values are: `horizontal` or `vertical`.\nDefaults to horizontal.",
|
|
81
81
|
"value": {
|
|
82
82
|
"kind": "expression"
|
|
83
83
|
}
|