@vaadin/master-detail-layout 24.8.0-alpha8 → 25.0.0-alpha1
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/README.md +2 -23
- package/package.json +7 -8
- package/src/vaadin-master-detail-layout-transition-styles.js +72 -28
- package/src/vaadin-master-detail-layout.d.ts +47 -12
- package/src/vaadin-master-detail-layout.js +123 -84
- package/theme/lumo/vaadin-master-detail-layout-styles.js +5 -5
- package/web-types.json +28 -19
- package/web-types.lit.json +23 -9
- package/theme/material/vaadin-master-detail-layout-styles.d.ts +0 -2
- package/theme/material/vaadin-master-detail-layout-styles.js +0 -30
- package/theme/material/vaadin-master-detail-layout.d.ts +0 -2
- package/theme/material/vaadin-master-detail-layout.js +0 -2
package/README.md
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
A web component for building UIs with a master (or primary) area and a detail (or secondary) area.
|
|
4
4
|
|
|
5
|
+
> ⚠️ This component is experimental and the API may change. In order to use it, enable the feature flag by setting `window.Vaadin.featureFlags.masterDetailLayoutComponent = true`.
|
|
6
|
+
|
|
5
7
|
```html
|
|
6
8
|
<vaadin-master-detail-layout>
|
|
7
9
|
<div>Master content</div>
|
|
@@ -23,29 +25,6 @@ Once installed, import the component in your application:
|
|
|
23
25
|
import '@vaadin/master-detail-layout';
|
|
24
26
|
```
|
|
25
27
|
|
|
26
|
-
## Themes
|
|
27
|
-
|
|
28
|
-
Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
|
|
29
|
-
The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/master-detail-layout/vaadin-master-detail-layout.js) of the package uses the Lumo theme.
|
|
30
|
-
|
|
31
|
-
To use the Material theme, import the component from the `theme/material` folder:
|
|
32
|
-
|
|
33
|
-
```js
|
|
34
|
-
import '@vaadin/master-detail-layout/theme/material/vaadin-master-detail-layout.js';
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
You can also import the Lumo version of the component explicitly:
|
|
38
|
-
|
|
39
|
-
```js
|
|
40
|
-
import '@vaadin/master-detail-layout/theme/lumo/vaadin-master-detail-layout.js';
|
|
41
|
-
```
|
|
42
|
-
|
|
43
|
-
Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:
|
|
44
|
-
|
|
45
|
-
```js
|
|
46
|
-
import '@vaadin/master-detail-layout/src/vaadin-master-detail-layout.js';
|
|
47
|
-
```
|
|
48
|
-
|
|
49
28
|
## Contributing
|
|
50
29
|
|
|
51
30
|
Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/master-detail-layout",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "25.0.0-alpha1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -34,15 +34,14 @@
|
|
|
34
34
|
"web-component"
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@vaadin/a11y-base": "
|
|
38
|
-
"@vaadin/component-base": "
|
|
39
|
-
"@vaadin/vaadin-lumo-styles": "
|
|
40
|
-
"@vaadin/vaadin-
|
|
41
|
-
"@vaadin/vaadin-themable-mixin": "24.8.0-alpha8",
|
|
37
|
+
"@vaadin/a11y-base": "25.0.0-alpha1",
|
|
38
|
+
"@vaadin/component-base": "25.0.0-alpha1",
|
|
39
|
+
"@vaadin/vaadin-lumo-styles": "25.0.0-alpha1",
|
|
40
|
+
"@vaadin/vaadin-themable-mixin": "25.0.0-alpha1",
|
|
42
41
|
"lit": "^3.0.0"
|
|
43
42
|
},
|
|
44
43
|
"devDependencies": {
|
|
45
|
-
"@vaadin/chai-plugins": "
|
|
44
|
+
"@vaadin/chai-plugins": "25.0.0-alpha1",
|
|
46
45
|
"@vaadin/testing-helpers": "^1.1.0",
|
|
47
46
|
"sinon": "^18.0.0"
|
|
48
47
|
},
|
|
@@ -50,5 +49,5 @@
|
|
|
50
49
|
"web-types.json",
|
|
51
50
|
"web-types.lit.json"
|
|
52
51
|
],
|
|
53
|
-
"gitHead": "
|
|
52
|
+
"gitHead": "b8c22a4a0c64156210d0daac96b43ae4e5526d49"
|
|
54
53
|
}
|
|
@@ -23,43 +23,43 @@ export const transitionStyles = css`
|
|
|
23
23
|
animation-duration: var(--vaadin-master-detail-layout-transition-duration, 300ms);
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
/*
|
|
26
|
+
/* Drawer - horizontal - add */
|
|
27
27
|
|
|
28
|
-
vaadin-master-detail-layout[
|
|
29
|
-
view-transition-name: vaadin-master-detail-layout-
|
|
28
|
+
vaadin-master-detail-layout[drawer][orientation='horizontal'][transition='add']::part(detail) {
|
|
29
|
+
view-transition-name: vaadin-master-detail-layout-drawer-horizontal-detail-add;
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
-
::view-transition-group(vaadin-master-detail-layout-
|
|
32
|
+
::view-transition-group(vaadin-master-detail-layout-drawer-horizontal-detail-add) {
|
|
33
33
|
clip-path: inset(0);
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
-
::view-transition-new(vaadin-master-detail-layout-
|
|
36
|
+
::view-transition-new(vaadin-master-detail-layout-drawer-horizontal-detail-add) {
|
|
37
37
|
animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
|
|
38
|
-
vaadin-master-detail-layout-
|
|
38
|
+
vaadin-master-detail-layout-drawer-horizontal-detail-add;
|
|
39
39
|
}
|
|
40
40
|
|
|
41
|
-
@keyframes vaadin-master-detail-layout-
|
|
41
|
+
@keyframes vaadin-master-detail-layout-drawer-horizontal-detail-add {
|
|
42
42
|
from {
|
|
43
43
|
transform: translateX(calc(100% * var(--_vaadin-master-detail-layout-dir-multiplier)));
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
46
|
|
|
47
|
-
/*
|
|
47
|
+
/* Drawer - horizontal - remove */
|
|
48
48
|
|
|
49
|
-
vaadin-master-detail-layout[
|
|
50
|
-
view-transition-name: vaadin-master-detail-layout-
|
|
49
|
+
vaadin-master-detail-layout[drawer][orientation='horizontal'][transition='remove']::part(detail) {
|
|
50
|
+
view-transition-name: vaadin-master-detail-layout-drawer-horizontal-detail-remove;
|
|
51
51
|
}
|
|
52
52
|
|
|
53
|
-
::view-transition-group(vaadin-master-detail-layout-
|
|
53
|
+
::view-transition-group(vaadin-master-detail-layout-drawer-horizontal-detail-remove) {
|
|
54
54
|
clip-path: inset(0);
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
-
::view-transition-old(vaadin-master-detail-layout-
|
|
57
|
+
::view-transition-old(vaadin-master-detail-layout-drawer-horizontal-detail-remove) {
|
|
58
58
|
animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
|
|
59
|
-
vaadin-master-detail-layout-
|
|
59
|
+
vaadin-master-detail-layout-drawer-horizontal-detail-remove;
|
|
60
60
|
}
|
|
61
61
|
|
|
62
|
-
@keyframes vaadin-master-detail-layout-
|
|
62
|
+
@keyframes vaadin-master-detail-layout-drawer-horizontal-detail-remove {
|
|
63
63
|
to {
|
|
64
64
|
transform: translateX(calc(100% * var(--_vaadin-master-detail-layout-dir-multiplier)));
|
|
65
65
|
}
|
|
@@ -133,43 +133,65 @@ export const transitionStyles = css`
|
|
|
133
133
|
}
|
|
134
134
|
}
|
|
135
135
|
|
|
136
|
-
/*
|
|
136
|
+
/* Stack - horizontal - viewport - add */
|
|
137
137
|
|
|
138
|
-
vaadin-master-detail-layout[
|
|
139
|
-
view-transition-name: vaadin-master-detail-layout-
|
|
138
|
+
vaadin-master-detail-layout[stack][orientation='horizontal'][containment='viewport'][transition='add'] {
|
|
139
|
+
view-transition-name: vaadin-master-detail-layout-stack-horizontal-viewport-add;
|
|
140
140
|
}
|
|
141
141
|
|
|
142
|
-
::view-transition-
|
|
142
|
+
::view-transition-new(vaadin-master-detail-layout-stack-horizontal-viewport-add) {
|
|
143
|
+
animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
|
|
144
|
+
vaadin-master-detail-layout-stack-horizontal-add-new;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
/* Stack - horizontal - viewport - remove */
|
|
148
|
+
|
|
149
|
+
vaadin-master-detail-layout[stack][orientation='horizontal'][containment='viewport'][transition='remove'] {
|
|
150
|
+
view-transition-name: vaadin-master-detail-layout-stack-horizontal-viewport-remove;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
::view-transition-old(vaadin-master-detail-layout-stack-horizontal-viewport-remove) {
|
|
154
|
+
animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
|
|
155
|
+
vaadin-master-detail-layout-stack-horizontal-remove-old;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
/* Drawer - vertical - add */
|
|
159
|
+
|
|
160
|
+
vaadin-master-detail-layout[drawer][orientation='vertical'][transition='add']::part(detail) {
|
|
161
|
+
view-transition-name: vaadin-master-detail-layout-drawer-vertical-detail-add;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
::view-transition-group(vaadin-master-detail-layout-drawer-vertical-detail-add) {
|
|
143
165
|
clip-path: inset(0);
|
|
144
166
|
}
|
|
145
167
|
|
|
146
|
-
::view-transition-new(vaadin-master-detail-layout-
|
|
168
|
+
::view-transition-new(vaadin-master-detail-layout-drawer-vertical-detail-add) {
|
|
147
169
|
animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
|
|
148
|
-
vaadin-master-detail-layout-
|
|
170
|
+
vaadin-master-detail-layout-drawer-vertical-detail-add;
|
|
149
171
|
}
|
|
150
172
|
|
|
151
|
-
@keyframes vaadin-master-detail-layout-
|
|
173
|
+
@keyframes vaadin-master-detail-layout-drawer-vertical-detail-add {
|
|
152
174
|
from {
|
|
153
175
|
transform: translateY(100%);
|
|
154
176
|
}
|
|
155
177
|
}
|
|
156
178
|
|
|
157
|
-
/*
|
|
179
|
+
/* Drawer - vertical - remove */
|
|
158
180
|
|
|
159
|
-
vaadin-master-detail-layout[
|
|
160
|
-
view-transition-name: vaadin-master-detail-layout-
|
|
181
|
+
vaadin-master-detail-layout[drawer][orientation='vertical'][transition='remove']::part(detail) {
|
|
182
|
+
view-transition-name: vaadin-master-detail-layout-drawer-vertical-detail-remove;
|
|
161
183
|
}
|
|
162
184
|
|
|
163
|
-
::view-transition-group(vaadin-master-detail-layout-
|
|
185
|
+
::view-transition-group(vaadin-master-detail-layout-drawer-vertical-detail-remove) {
|
|
164
186
|
clip-path: inset(0);
|
|
165
187
|
}
|
|
166
188
|
|
|
167
|
-
::view-transition-old(vaadin-master-detail-layout-
|
|
189
|
+
::view-transition-old(vaadin-master-detail-layout-drawer-vertical-detail-remove) {
|
|
168
190
|
animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
|
|
169
|
-
vaadin-master-detail-layout-
|
|
191
|
+
vaadin-master-detail-layout-drawer-vertical-detail-remove;
|
|
170
192
|
}
|
|
171
193
|
|
|
172
|
-
@keyframes vaadin-master-detail-layout-
|
|
194
|
+
@keyframes vaadin-master-detail-layout-drawer-vertical-detail-remove {
|
|
173
195
|
to {
|
|
174
196
|
transform: translateY(100%);
|
|
175
197
|
}
|
|
@@ -242,4 +264,26 @@ export const transitionStyles = css`
|
|
|
242
264
|
opacity: 0;
|
|
243
265
|
}
|
|
244
266
|
}
|
|
267
|
+
|
|
268
|
+
/* Stack - vertical - viewport - add */
|
|
269
|
+
|
|
270
|
+
vaadin-master-detail-layout[stack][orientation='vertical'][containment='viewport'][transition='add'] {
|
|
271
|
+
view-transition-name: vaadin-master-detail-layout-stack-vertical-viewport-add;
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
::view-transition-new(vaadin-master-detail-layout-stack-vertical-viewport-add) {
|
|
275
|
+
animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
|
|
276
|
+
vaadin-master-detail-layout-stack-vertical-add-new;
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
/* Stack - vertical - viewport - remove */
|
|
280
|
+
|
|
281
|
+
vaadin-master-detail-layout[stack][orientation='vertical'][containment='viewport'][transition='remove'] {
|
|
282
|
+
view-transition-name: vaadin-master-detail-layout-stack-vertical-viewport-remove;
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
::view-transition-old(vaadin-master-detail-layout-stack-vertical-viewport-remove) {
|
|
286
|
+
animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
|
|
287
|
+
vaadin-master-detail-layout-stack-vertical-remove-old;
|
|
288
|
+
}
|
|
245
289
|
`;
|
|
@@ -8,6 +8,14 @@ import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
|
|
|
8
8
|
import { SlotStylesMixin } from '@vaadin/component-base/src/slot-styles-mixin.js';
|
|
9
9
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
10
10
|
|
|
11
|
+
export interface MasterDetailLayoutCustomEventMap {
|
|
12
|
+
'backdrop-click': Event;
|
|
13
|
+
|
|
14
|
+
'detail-escape-press': Event;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export interface MasterDetailLayoutEventMap extends HTMLElementEventMap, MasterDetailLayoutCustomEventMap {}
|
|
18
|
+
|
|
11
19
|
/**
|
|
12
20
|
* `<vaadin-master-detail-layout>` is a web component for building UIs with a master
|
|
13
21
|
* (or primary) area and a detail (or secondary) area that is displayed next to, or
|
|
@@ -26,7 +34,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
|
|
|
26
34
|
*
|
|
27
35
|
* Part name | Description
|
|
28
36
|
* ---------------|----------------------
|
|
29
|
-
* `backdrop` | Backdrop covering the master area in the
|
|
37
|
+
* `backdrop` | Backdrop covering the master area in the drawer mode
|
|
30
38
|
* `master` | The master area
|
|
31
39
|
* `detail` | The detail area
|
|
32
40
|
*
|
|
@@ -37,17 +45,21 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
|
|
|
37
45
|
* `containment` | Set to `layout` or `viewport` depending on the containment.
|
|
38
46
|
* `orientation` | Set to `horizontal` or `vertical` depending on the orientation.
|
|
39
47
|
* `has-detail` | Set when the detail content is provided.
|
|
40
|
-
* `
|
|
48
|
+
* `drawer` | Set when the layout is using the drawer mode.
|
|
41
49
|
* `stack` | Set when the layout is using the stack mode.
|
|
42
50
|
*
|
|
43
51
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
52
|
+
*
|
|
53
|
+
* @fires {CustomEvent} backdrop-click - Fired when the user clicks the backdrop in the drawer mode.
|
|
54
|
+
* @fires {CustomEvent} detail-escape-press - Fired when the user presses Escape in the detail area.
|
|
44
55
|
*/
|
|
45
56
|
declare class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ThemableMixin(ElementMixin(HTMLElement)))) {
|
|
46
57
|
/**
|
|
47
58
|
* Fixed size (in CSS length units) to be set on the detail area.
|
|
48
59
|
* When specified, it prevents the detail area from growing or
|
|
49
60
|
* shrinking. If there is not enough space to show master and detail
|
|
50
|
-
* areas next to each other, the
|
|
61
|
+
* areas next to each other, the details are shown as an overlay:
|
|
62
|
+
* either as drawer or stack, depending on the `stackOverlay` property.
|
|
51
63
|
*
|
|
52
64
|
* @attr {string} detail-size
|
|
53
65
|
*/
|
|
@@ -57,7 +69,8 @@ declare class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ThemableMix
|
|
|
57
69
|
* Minimum size (in CSS length units) to be set on the detail area.
|
|
58
70
|
* When specified, it prevents the detail area from shrinking below
|
|
59
71
|
* this size. If there is not enough space to show master and detail
|
|
60
|
-
* areas next to each other, the
|
|
72
|
+
* areas next to each other, the details are shown as an overlay:
|
|
73
|
+
* either as drawer or stack, depending on the `stackOverlay` property.
|
|
61
74
|
*
|
|
62
75
|
* @attr {string} detail-min-size
|
|
63
76
|
*/
|
|
@@ -67,7 +80,8 @@ declare class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ThemableMix
|
|
|
67
80
|
* Fixed size (in CSS length units) to be set on the master area.
|
|
68
81
|
* When specified, it prevents the master area from growing or
|
|
69
82
|
* shrinking. If there is not enough space to show master and detail
|
|
70
|
-
* areas next to each other, the
|
|
83
|
+
* areas next to each other, the details are shown as an overlay:
|
|
84
|
+
* either as drawer or stack, depending on the `stackOverlay` property.
|
|
71
85
|
*
|
|
72
86
|
* @attr {string} master-size
|
|
73
87
|
*/
|
|
@@ -77,7 +91,8 @@ declare class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ThemableMix
|
|
|
77
91
|
* Minimum size (in CSS length units) to be set on the master area.
|
|
78
92
|
* When specified, it prevents the master area from shrinking below
|
|
79
93
|
* this size. If there is not enough space to show master and detail
|
|
80
|
-
* areas next to each other, the
|
|
94
|
+
* areas next to each other, the details are shown as an overlay:
|
|
95
|
+
* either as drawer or stack, depending on the `stackOverlay` property.
|
|
81
96
|
*
|
|
82
97
|
* @attr {string} master-min-size
|
|
83
98
|
*/
|
|
@@ -92,9 +107,13 @@ declare class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ThemableMix
|
|
|
92
107
|
orientation: 'horizontal' | 'vertical';
|
|
93
108
|
|
|
94
109
|
/**
|
|
95
|
-
* When specified, forces the
|
|
96
|
-
*
|
|
97
|
-
* each other using the default
|
|
110
|
+
* When specified, forces the details to be shown as an overlay
|
|
111
|
+
* (either as drawer or stack), even if there is enough space for
|
|
112
|
+
* master and detail to be shown next to each other using the default
|
|
113
|
+
* (split) mode.
|
|
114
|
+
*
|
|
115
|
+
* In order to enforce the stack mode, use this property together with
|
|
116
|
+
* `stackOverlay` property and set both to `true`.
|
|
98
117
|
*
|
|
99
118
|
* @attr {boolean} force-overlay
|
|
100
119
|
*/
|
|
@@ -109,12 +128,16 @@ declare class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ThemableMix
|
|
|
109
128
|
containment: 'layout' | 'viewport';
|
|
110
129
|
|
|
111
130
|
/**
|
|
112
|
-
*
|
|
113
|
-
*
|
|
131
|
+
* When true, the layout in the overlay mode is rendered as a stack,
|
|
132
|
+
* making detail area fully cover the master area. Otherwise, it is
|
|
133
|
+
* rendered as a drawer and has a visual backdrop.
|
|
134
|
+
*
|
|
135
|
+
* In order to enforce the stack mode, use this property together with
|
|
136
|
+
* `forceOverlay` property and set both to `true`.
|
|
114
137
|
*
|
|
115
138
|
* @attr {string} stack-threshold
|
|
116
139
|
*/
|
|
117
|
-
|
|
140
|
+
stackOverlay: boolean;
|
|
118
141
|
|
|
119
142
|
/**
|
|
120
143
|
* When true, the layout does not use animated transitions for the detail area.
|
|
@@ -122,6 +145,18 @@ declare class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ThemableMix
|
|
|
122
145
|
* @attr {boolean} no-animation
|
|
123
146
|
*/
|
|
124
147
|
noAnimation: boolean;
|
|
148
|
+
|
|
149
|
+
addEventListener<K extends keyof MasterDetailLayoutEventMap>(
|
|
150
|
+
type: K,
|
|
151
|
+
listener: (this: MasterDetailLayout, ev: MasterDetailLayoutEventMap[K]) => void,
|
|
152
|
+
options?: AddEventListenerOptions | boolean,
|
|
153
|
+
): void;
|
|
154
|
+
|
|
155
|
+
removeEventListener<K extends keyof MasterDetailLayoutEventMap>(
|
|
156
|
+
type: K,
|
|
157
|
+
listener: (this: MasterDetailLayout, ev: MasterDetailLayoutEventMap[K]) => void,
|
|
158
|
+
options?: EventListenerOptions | boolean,
|
|
159
|
+
): void;
|
|
125
160
|
}
|
|
126
161
|
|
|
127
162
|
declare global {
|
|
@@ -31,7 +31,7 @@ import { transitionStyles } from './vaadin-master-detail-layout-transition-style
|
|
|
31
31
|
*
|
|
32
32
|
* Part name | Description
|
|
33
33
|
* ---------------|----------------------
|
|
34
|
-
* `backdrop` | Backdrop covering the master area in the
|
|
34
|
+
* `backdrop` | Backdrop covering the master area in the drawer mode
|
|
35
35
|
* `master` | The master area
|
|
36
36
|
* `detail` | The detail area
|
|
37
37
|
*
|
|
@@ -42,11 +42,14 @@ import { transitionStyles } from './vaadin-master-detail-layout-transition-style
|
|
|
42
42
|
* `containment` | Set to `layout` or `viewport` depending on the containment.
|
|
43
43
|
* `orientation` | Set to `horizontal` or `vertical` depending on the orientation.
|
|
44
44
|
* `has-detail` | Set when the detail content is provided.
|
|
45
|
-
* `
|
|
45
|
+
* `drawer` | Set when the layout is using the drawer mode.
|
|
46
46
|
* `stack` | Set when the layout is using the stack mode.
|
|
47
47
|
*
|
|
48
48
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
49
49
|
*
|
|
50
|
+
* @fires {CustomEvent} backdrop-click - Fired when the user clicks the backdrop in the drawer mode.
|
|
51
|
+
* @fires {CustomEvent} detail-escape-press - Fired when the user presses Escape in the detail area.
|
|
52
|
+
*
|
|
50
53
|
* @customElement
|
|
51
54
|
* @extends HTMLElement
|
|
52
55
|
* @mixes ThemableMixin
|
|
@@ -76,41 +79,46 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
|
|
|
76
79
|
display: none;
|
|
77
80
|
}
|
|
78
81
|
|
|
79
|
-
|
|
80
|
-
|
|
82
|
+
:host([orientation='horizontal']) [part='master'] {
|
|
83
|
+
max-width: 100%;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
/* Drawer mode */
|
|
87
|
+
:host(:is([drawer], [stack])) {
|
|
81
88
|
position: relative;
|
|
82
89
|
}
|
|
83
90
|
|
|
84
|
-
:host(:is([
|
|
85
|
-
:host([
|
|
91
|
+
:host(:is([drawer], [stack])[containment='layout']) [part='detail'],
|
|
92
|
+
:host([drawer][containment='layout']) [part='backdrop'] {
|
|
86
93
|
position: absolute;
|
|
87
94
|
}
|
|
88
95
|
|
|
89
|
-
:host(:is([
|
|
90
|
-
:host([
|
|
96
|
+
:host(:is([drawer], [stack])[containment='viewport']) [part='detail'],
|
|
97
|
+
:host([drawer][containment='viewport']) [part='backdrop'] {
|
|
91
98
|
position: fixed;
|
|
92
99
|
}
|
|
93
100
|
|
|
94
|
-
:host([
|
|
101
|
+
:host([drawer][has-detail]) [part='backdrop'] {
|
|
95
102
|
display: block;
|
|
96
103
|
inset: 0;
|
|
104
|
+
z-index: 1;
|
|
97
105
|
}
|
|
98
106
|
|
|
99
|
-
:host([
|
|
107
|
+
:host(:is([drawer], [stack])) [part='detail'] {
|
|
108
|
+
z-index: 1;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
:host([drawer][orientation='horizontal']) [part='detail'] {
|
|
100
112
|
inset-inline-end: 0;
|
|
101
113
|
height: 100%;
|
|
102
114
|
width: var(--_detail-min-size, min-content);
|
|
103
115
|
max-width: 100%;
|
|
104
116
|
}
|
|
105
117
|
|
|
106
|
-
:host([
|
|
118
|
+
:host([drawer][orientation='horizontal'][containment='viewport']) [part='detail'] {
|
|
107
119
|
inset-block-start: 0;
|
|
108
120
|
}
|
|
109
121
|
|
|
110
|
-
:host([overlay][orientation='horizontal']) [part='master'] {
|
|
111
|
-
max-width: 100%;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
122
|
/* No fixed size */
|
|
115
123
|
:host(:not([has-master-size])) [part='master'],
|
|
116
124
|
:host(:not([has-detail-size])) [part='detail'] {
|
|
@@ -143,11 +151,11 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
|
|
|
143
151
|
}
|
|
144
152
|
|
|
145
153
|
/* Min size */
|
|
146
|
-
:host([has-master-min-size][orientation='horizontal']:not([
|
|
154
|
+
:host([has-master-min-size][has-detail][orientation='horizontal']:not([drawer]):not([stack])) [part='master'] {
|
|
147
155
|
min-width: var(--_master-min-size);
|
|
148
156
|
}
|
|
149
157
|
|
|
150
|
-
:host([has-detail-min-size][orientation='horizontal']:not([
|
|
158
|
+
:host([has-detail-min-size][orientation='horizontal']:not([drawer]):not([stack])) [part='detail'] {
|
|
151
159
|
min-width: var(--_detail-min-size);
|
|
152
160
|
}
|
|
153
161
|
|
|
@@ -161,17 +169,17 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
|
|
|
161
169
|
flex-direction: column;
|
|
162
170
|
}
|
|
163
171
|
|
|
164
|
-
:host([orientation='vertical'][
|
|
172
|
+
:host([orientation='vertical'][drawer]) [part='master'] {
|
|
165
173
|
max-height: 100%;
|
|
166
174
|
}
|
|
167
175
|
|
|
168
|
-
:host([orientation='vertical'][
|
|
176
|
+
:host([orientation='vertical'][drawer]) [part='detail'] {
|
|
169
177
|
inset-block-end: 0;
|
|
170
178
|
width: 100%;
|
|
171
179
|
height: var(--_detail-min-size, min-content);
|
|
172
180
|
}
|
|
173
181
|
|
|
174
|
-
:host([
|
|
182
|
+
:host([drawer][orientation='vertical'][containment='viewport']) [part='detail'] {
|
|
175
183
|
inset-inline-start: 0;
|
|
176
184
|
}
|
|
177
185
|
|
|
@@ -185,12 +193,12 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
|
|
|
185
193
|
}
|
|
186
194
|
|
|
187
195
|
/* Min size */
|
|
188
|
-
:host([has-master-min-size][orientation='vertical']:not([
|
|
189
|
-
:host([has-master-min-size][orientation='vertical'][
|
|
196
|
+
:host([has-master-min-size][orientation='vertical']:not([drawer])) [part='master'],
|
|
197
|
+
:host([has-master-min-size][orientation='vertical'][drawer]) {
|
|
190
198
|
min-height: var(--_master-min-size);
|
|
191
199
|
}
|
|
192
200
|
|
|
193
|
-
:host([has-detail-min-size][orientation='vertical']:not([
|
|
201
|
+
:host([has-detail-min-size][orientation='vertical']:not([drawer]):not([stack])) [part='detail'] {
|
|
194
202
|
min-height: var(--_detail-min-size);
|
|
195
203
|
}
|
|
196
204
|
|
|
@@ -202,10 +210,6 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
|
|
|
202
210
|
:host([stack]) [part='detail'] {
|
|
203
211
|
inset: 0;
|
|
204
212
|
}
|
|
205
|
-
|
|
206
|
-
[part='master']::before {
|
|
207
|
-
background-position-y: var(--_stack-threshold);
|
|
208
|
-
}
|
|
209
213
|
`;
|
|
210
214
|
}
|
|
211
215
|
|
|
@@ -215,7 +219,8 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
|
|
|
215
219
|
* Fixed size (in CSS length units) to be set on the detail area.
|
|
216
220
|
* When specified, it prevents the detail area from growing or
|
|
217
221
|
* shrinking. If there is not enough space to show master and detail
|
|
218
|
-
* areas next to each other, the
|
|
222
|
+
* areas next to each other, the details are shown as an overlay:
|
|
223
|
+
* either as drawer or stack, depending on the `stackOverlay` property.
|
|
219
224
|
*
|
|
220
225
|
* @attr {string} detail-size
|
|
221
226
|
*/
|
|
@@ -229,7 +234,8 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
|
|
|
229
234
|
* Minimum size (in CSS length units) to be set on the detail area.
|
|
230
235
|
* When specified, it prevents the detail area from shrinking below
|
|
231
236
|
* this size. If there is not enough space to show master and detail
|
|
232
|
-
* areas next to each other, the
|
|
237
|
+
* areas next to each other, the details are shown as an overlay:
|
|
238
|
+
* either as drawer or stack, depending on the `stackOverlay` property.
|
|
233
239
|
*
|
|
234
240
|
* @attr {string} detail-min-size
|
|
235
241
|
*/
|
|
@@ -243,7 +249,8 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
|
|
|
243
249
|
* Fixed size (in CSS length units) to be set on the master area.
|
|
244
250
|
* When specified, it prevents the master area from growing or
|
|
245
251
|
* shrinking. If there is not enough space to show master and detail
|
|
246
|
-
* areas next to each other, the
|
|
252
|
+
* areas next to each other, the details are shown as an overlay:
|
|
253
|
+
* either as drawer or stack, depending on the `stackOverlay` property.
|
|
247
254
|
*
|
|
248
255
|
* @attr {string} master-size
|
|
249
256
|
*/
|
|
@@ -257,7 +264,8 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
|
|
|
257
264
|
* Minimum size (in CSS length units) to be set on the master area.
|
|
258
265
|
* When specified, it prevents the master area from shrinking below
|
|
259
266
|
* this size. If there is not enough space to show master and detail
|
|
260
|
-
* areas next to each other, the
|
|
267
|
+
* areas next to each other, the details are shown as an overlay:
|
|
268
|
+
* either as drawer or stack, depending on the `stackOverlay` property.
|
|
261
269
|
*
|
|
262
270
|
* @attr {string} master-min-size
|
|
263
271
|
*/
|
|
@@ -282,9 +290,13 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
|
|
|
282
290
|
},
|
|
283
291
|
|
|
284
292
|
/**
|
|
285
|
-
* When specified, forces the
|
|
286
|
-
*
|
|
287
|
-
* each other using the default
|
|
293
|
+
* When specified, forces the details to be shown as an overlay
|
|
294
|
+
* (either as drawer or stack), even if there is enough space for
|
|
295
|
+
* master and detail to be shown next to each other using the default
|
|
296
|
+
* (split) mode.
|
|
297
|
+
*
|
|
298
|
+
* In order to enforce the stack mode, use this property together with
|
|
299
|
+
* `stackOverlay` property and set both to `true`.
|
|
288
300
|
*
|
|
289
301
|
* @attr {boolean} force-overlay
|
|
290
302
|
*/
|
|
@@ -309,14 +321,19 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
|
|
|
309
321
|
},
|
|
310
322
|
|
|
311
323
|
/**
|
|
312
|
-
*
|
|
313
|
-
*
|
|
324
|
+
* When true, the layout in the overlay mode is rendered as a stack,
|
|
325
|
+
* making detail area fully cover the master area. Otherwise, it is
|
|
326
|
+
* rendered as a drawer and has a visual backdrop.
|
|
327
|
+
*
|
|
328
|
+
* In order to enforce the stack mode, use this property together with
|
|
329
|
+
* `forceOverlay` property and set both to `true`.
|
|
314
330
|
*
|
|
315
331
|
* @attr {string} stack-threshold
|
|
316
332
|
*/
|
|
317
|
-
|
|
318
|
-
type:
|
|
319
|
-
|
|
333
|
+
stackOverlay: {
|
|
334
|
+
type: Boolean,
|
|
335
|
+
value: false,
|
|
336
|
+
observer: '__stackOverlayChanged',
|
|
320
337
|
sync: true,
|
|
321
338
|
},
|
|
322
339
|
|
|
@@ -331,20 +348,18 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
|
|
|
331
348
|
},
|
|
332
349
|
|
|
333
350
|
/**
|
|
334
|
-
* When true, the component uses the
|
|
335
|
-
* In order to enforce the overlay mode, use `forceOverlay` property.
|
|
351
|
+
* When true, the component uses the drawer mode. This property is read-only.
|
|
336
352
|
* @protected
|
|
337
353
|
*/
|
|
338
|
-
|
|
354
|
+
_drawer: {
|
|
339
355
|
type: Boolean,
|
|
340
|
-
attribute: '
|
|
356
|
+
attribute: 'drawer',
|
|
341
357
|
reflectToAttribute: true,
|
|
342
358
|
sync: true,
|
|
343
359
|
},
|
|
344
360
|
|
|
345
361
|
/**
|
|
346
362
|
* When true, the component uses the stack mode. This property is read-only.
|
|
347
|
-
* In order to enforce the stack mode, use `stackThreshold` property.
|
|
348
363
|
* @protected
|
|
349
364
|
*/
|
|
350
365
|
_stack: {
|
|
@@ -353,9 +368,24 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
|
|
|
353
368
|
reflectToAttribute: true,
|
|
354
369
|
sync: true,
|
|
355
370
|
},
|
|
371
|
+
|
|
372
|
+
/**
|
|
373
|
+
* When true, the component has the detail content provided.
|
|
374
|
+
* @protected
|
|
375
|
+
*/
|
|
376
|
+
_hasDetail: {
|
|
377
|
+
type: Boolean,
|
|
378
|
+
attribute: 'has-detail',
|
|
379
|
+
reflectToAttribute: true,
|
|
380
|
+
sync: true,
|
|
381
|
+
},
|
|
356
382
|
};
|
|
357
383
|
}
|
|
358
384
|
|
|
385
|
+
static get experimental() {
|
|
386
|
+
return true;
|
|
387
|
+
}
|
|
388
|
+
|
|
359
389
|
/** @override */
|
|
360
390
|
get slotStyles() {
|
|
361
391
|
return [transitionStyles];
|
|
@@ -364,15 +394,16 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
|
|
|
364
394
|
/** @protected */
|
|
365
395
|
render() {
|
|
366
396
|
return html`
|
|
367
|
-
<div part="backdrop"></div>
|
|
368
|
-
<div id="master" part="master" ?inert="${this.
|
|
397
|
+
<div part="backdrop" @click="${this.__onBackdropClick}"></div>
|
|
398
|
+
<div id="master" part="master" ?inert="${this._hasDetail && this._drawer && this.containment === 'layout'}">
|
|
369
399
|
<slot></slot>
|
|
370
400
|
</div>
|
|
371
401
|
<div
|
|
372
402
|
id="detail"
|
|
373
403
|
part="detail"
|
|
374
|
-
role="${this.
|
|
375
|
-
aria-modal="${this.
|
|
404
|
+
role="${this._drawer || this._stack ? 'dialog' : nothing}"
|
|
405
|
+
aria-modal="${this._drawer && this.containment === 'viewport' ? 'true' : nothing}"
|
|
406
|
+
@keydown="${this.__onDetailKeydown}"
|
|
376
407
|
>
|
|
377
408
|
<slot name="detail" @slotchange="${this.__onDetailSlotChange}"></slot>
|
|
378
409
|
</div>
|
|
@@ -383,12 +414,12 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
|
|
|
383
414
|
__onDetailSlotChange(e) {
|
|
384
415
|
const children = e.target.assignedNodes();
|
|
385
416
|
|
|
386
|
-
this.
|
|
417
|
+
this._hasDetail = children.length > 0;
|
|
387
418
|
this.__detectLayoutMode();
|
|
388
419
|
|
|
389
420
|
// Move focus to the detail area when it is added to the DOM,
|
|
390
|
-
// in case if the layout is using
|
|
391
|
-
if ((this.
|
|
421
|
+
// in case if the layout is using drawer or stack mode.
|
|
422
|
+
if ((this._drawer || this._stack) && children.length > 0) {
|
|
392
423
|
const focusables = getFocusableElements(children[0]);
|
|
393
424
|
if (focusables.length) {
|
|
394
425
|
focusables[0].focus();
|
|
@@ -396,6 +427,20 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
|
|
|
396
427
|
}
|
|
397
428
|
}
|
|
398
429
|
|
|
430
|
+
/** @private */
|
|
431
|
+
__onBackdropClick() {
|
|
432
|
+
this.dispatchEvent(new CustomEvent('backdrop-click'));
|
|
433
|
+
}
|
|
434
|
+
|
|
435
|
+
/** @private */
|
|
436
|
+
__onDetailKeydown(event) {
|
|
437
|
+
if (event.key === 'Escape') {
|
|
438
|
+
// Prevent firing on parent layout when using nested layouts
|
|
439
|
+
event.stopPropagation();
|
|
440
|
+
this.dispatchEvent(new CustomEvent('detail-escape-press'));
|
|
441
|
+
}
|
|
442
|
+
}
|
|
443
|
+
|
|
399
444
|
/**
|
|
400
445
|
* @protected
|
|
401
446
|
* @override
|
|
@@ -443,14 +488,8 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
|
|
|
443
488
|
}
|
|
444
489
|
|
|
445
490
|
/** @private */
|
|
446
|
-
|
|
447
|
-
if (
|
|
448
|
-
if (threshold) {
|
|
449
|
-
this.$.master.style.setProperty('--_stack-threshold', threshold);
|
|
450
|
-
} else {
|
|
451
|
-
this.$.master.style.removeProperty('--_stack-threshold');
|
|
452
|
-
}
|
|
453
|
-
|
|
491
|
+
__stackOverlayChanged(stackOverlay, oldStackOverlay) {
|
|
492
|
+
if (stackOverlay || oldStackOverlay) {
|
|
454
493
|
this.__detectLayoutMode();
|
|
455
494
|
}
|
|
456
495
|
}
|
|
@@ -466,26 +505,26 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
|
|
|
466
505
|
this.toggleAttribute(`has-${prop}`, !!size);
|
|
467
506
|
}
|
|
468
507
|
|
|
508
|
+
/** @private */
|
|
509
|
+
__setOverlayMode(value) {
|
|
510
|
+
if (this.stackOverlay) {
|
|
511
|
+
this._stack = value;
|
|
512
|
+
} else {
|
|
513
|
+
this._drawer = value;
|
|
514
|
+
}
|
|
515
|
+
}
|
|
516
|
+
|
|
469
517
|
/** @private */
|
|
470
518
|
__detectLayoutMode() {
|
|
471
|
-
this.
|
|
519
|
+
this._drawer = false;
|
|
472
520
|
this._stack = false;
|
|
473
521
|
|
|
474
522
|
if (this.forceOverlay) {
|
|
475
|
-
this.
|
|
523
|
+
this.__setOverlayMode(true);
|
|
476
524
|
return;
|
|
477
525
|
}
|
|
478
526
|
|
|
479
|
-
if (this.
|
|
480
|
-
const threshold = this.__getStackThresholdInPixels();
|
|
481
|
-
const size = this.orientation === 'vertical' ? this.offsetHeight : this.offsetWidth;
|
|
482
|
-
if (size <= threshold) {
|
|
483
|
-
this._stack = true;
|
|
484
|
-
return;
|
|
485
|
-
}
|
|
486
|
-
}
|
|
487
|
-
|
|
488
|
-
if (!this.hasAttribute('has-detail')) {
|
|
527
|
+
if (!this._hasDetail) {
|
|
489
528
|
return;
|
|
490
529
|
}
|
|
491
530
|
|
|
@@ -510,38 +549,28 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
|
|
|
510
549
|
|
|
511
550
|
// If the combined minimum size of both the master and the detail content
|
|
512
551
|
// exceeds the size of the layout, the layout changes to the overlay mode.
|
|
513
|
-
this.
|
|
552
|
+
this.__setOverlayMode(this.offsetWidth < masterWidth + detailWidth);
|
|
514
553
|
|
|
515
554
|
// Toggling the overlay resizes master content, which can cause document
|
|
516
555
|
// scroll bar to appear or disappear, and trigger another resize of the
|
|
517
556
|
// layout which can affect previous measurements and end up in horizontal
|
|
518
557
|
// scroll. Check if that is the case and if so, preserve the overlay mode.
|
|
519
558
|
if (this.offsetWidth < this.scrollWidth) {
|
|
520
|
-
this.
|
|
559
|
+
this.__setOverlayMode(true);
|
|
521
560
|
}
|
|
522
561
|
}
|
|
523
562
|
|
|
524
563
|
/** @private */
|
|
525
564
|
__detectVerticalMode() {
|
|
526
|
-
// Remove overlay attribute temporarily to detect if there is enough space
|
|
527
|
-
// for both areas so that layout could switch back to the split mode.
|
|
528
|
-
this._overlay = false;
|
|
529
|
-
|
|
530
565
|
const masterHeight = this.$.master.clientHeight;
|
|
531
566
|
|
|
532
567
|
// If the combined minimum size of both the master and the detail content
|
|
533
568
|
// exceeds the available height, the layout changes to the overlay mode.
|
|
534
569
|
if (this.offsetHeight < masterHeight + this.$.detail.clientHeight) {
|
|
535
|
-
this.
|
|
570
|
+
this.__setOverlayMode(true);
|
|
536
571
|
}
|
|
537
572
|
}
|
|
538
573
|
|
|
539
|
-
/** @private */
|
|
540
|
-
__getStackThresholdInPixels() {
|
|
541
|
-
const { backgroundPositionY } = getComputedStyle(this.$.master, '::before');
|
|
542
|
-
return parseFloat(backgroundPositionY);
|
|
543
|
-
}
|
|
544
|
-
|
|
545
574
|
/**
|
|
546
575
|
* Sets the detail element to be displayed in the detail area and starts a
|
|
547
576
|
* view transition that animates adding, replacing or removing the detail
|
|
@@ -650,6 +679,16 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
|
|
|
650
679
|
this.__transition = null;
|
|
651
680
|
this.__resolveUpdateCallback = null;
|
|
652
681
|
}
|
|
682
|
+
|
|
683
|
+
/**
|
|
684
|
+
* @event backdrop-click
|
|
685
|
+
* Fired when the user clicks the backdrop in the drawer mode.
|
|
686
|
+
*/
|
|
687
|
+
|
|
688
|
+
/**
|
|
689
|
+
* @event detail-escape-press
|
|
690
|
+
* Fired when the user presses Escape in the detail area.
|
|
691
|
+
*/
|
|
653
692
|
}
|
|
654
693
|
|
|
655
694
|
defineCustomElement(MasterDetailLayout);
|
|
@@ -4,23 +4,23 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themab
|
|
|
4
4
|
registerStyles(
|
|
5
5
|
'vaadin-master-detail-layout',
|
|
6
6
|
css`
|
|
7
|
-
:host(:is([
|
|
7
|
+
:host(:is([drawer], [stack])) [part='detail'] {
|
|
8
8
|
background-color: var(--lumo-base-color);
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
-
:host([
|
|
11
|
+
:host([drawer]) [part='detail'] {
|
|
12
12
|
box-shadow: var(--lumo-box-shadow-s);
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
-
:host([
|
|
15
|
+
:host([drawer][orientation='horizontal']) [part='detail'] {
|
|
16
16
|
border-inline-start: 1px solid var(--lumo-contrast-10pct);
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
-
:host([
|
|
19
|
+
:host([drawer][orientation='vertical']) [part='detail'] {
|
|
20
20
|
border-block-start: 1px solid var(--lumo-contrast-10pct);
|
|
21
21
|
}
|
|
22
22
|
|
|
23
|
-
:host([
|
|
23
|
+
:host([drawer]) [part='backdrop'] {
|
|
24
24
|
background-color: var(--lumo-shade-20pct);
|
|
25
25
|
}
|
|
26
26
|
`,
|
package/web-types.json
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/master-detail-layout",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "25.0.0-alpha1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-master-detail-layout",
|
|
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 custom CSS properties are available for styling (needed to be set\non the `<html>` element since they are used by the global view transitions):\n\nCustom CSS property | Description | Default\n-----------------------------------------------------|---------------------|--------\n`--vaadin-master-detail-layout-transition-duration` | Transition duration | 300ms\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------|----------------------\n`backdrop` | Backdrop covering the master area in the
|
|
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 custom CSS properties are available for styling (needed to be set\non the `<html>` element since they are used by the global view transitions):\n\nCustom CSS property | Description | Default\n-----------------------------------------------------|---------------------|--------\n`--vaadin-master-detail-layout-transition-duration` | Transition duration | 300ms\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\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "detail-size",
|
|
15
|
-
"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
|
|
15
|
+
"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.",
|
|
16
16
|
"value": {
|
|
17
17
|
"type": [
|
|
18
18
|
"string",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
},
|
|
24
24
|
{
|
|
25
25
|
"name": "detail-min-size",
|
|
26
|
-
"description": "Minimum size (in CSS length units) to be set on the detail area.\nWhen specified, it prevents the detail area from shrinking below\nthis size. If there is not enough space to show master and detail\nareas next to each other, the
|
|
26
|
+
"description": "Minimum size (in CSS length units) to be set on the detail area.\nWhen specified, it prevents the detail 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.",
|
|
27
27
|
"value": {
|
|
28
28
|
"type": [
|
|
29
29
|
"string",
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
},
|
|
35
35
|
{
|
|
36
36
|
"name": "master-size",
|
|
37
|
-
"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
|
|
37
|
+
"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.",
|
|
38
38
|
"value": {
|
|
39
39
|
"type": [
|
|
40
40
|
"string",
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
},
|
|
46
46
|
{
|
|
47
47
|
"name": "master-min-size",
|
|
48
|
-
"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
|
|
48
|
+
"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.",
|
|
49
49
|
"value": {
|
|
50
50
|
"type": [
|
|
51
51
|
"string",
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
},
|
|
68
68
|
{
|
|
69
69
|
"name": "force-overlay",
|
|
70
|
-
"description": "When specified, forces the
|
|
70
|
+
"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`.",
|
|
71
71
|
"value": {
|
|
72
72
|
"type": [
|
|
73
73
|
"boolean",
|
|
@@ -88,11 +88,11 @@
|
|
|
88
88
|
}
|
|
89
89
|
},
|
|
90
90
|
{
|
|
91
|
-
"name": "stack-
|
|
92
|
-
"description": "
|
|
91
|
+
"name": "stack-overlay",
|
|
92
|
+
"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`.",
|
|
93
93
|
"value": {
|
|
94
94
|
"type": [
|
|
95
|
-
"
|
|
95
|
+
"boolean",
|
|
96
96
|
"null",
|
|
97
97
|
"undefined"
|
|
98
98
|
]
|
|
@@ -125,7 +125,7 @@
|
|
|
125
125
|
"properties": [
|
|
126
126
|
{
|
|
127
127
|
"name": "detailSize",
|
|
128
|
-
"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
|
|
128
|
+
"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.",
|
|
129
129
|
"value": {
|
|
130
130
|
"type": [
|
|
131
131
|
"string",
|
|
@@ -136,7 +136,7 @@
|
|
|
136
136
|
},
|
|
137
137
|
{
|
|
138
138
|
"name": "detailMinSize",
|
|
139
|
-
"description": "Minimum size (in CSS length units) to be set on the detail area.\nWhen specified, it prevents the detail area from shrinking below\nthis size. If there is not enough space to show master and detail\nareas next to each other, the
|
|
139
|
+
"description": "Minimum size (in CSS length units) to be set on the detail area.\nWhen specified, it prevents the detail 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.",
|
|
140
140
|
"value": {
|
|
141
141
|
"type": [
|
|
142
142
|
"string",
|
|
@@ -147,7 +147,7 @@
|
|
|
147
147
|
},
|
|
148
148
|
{
|
|
149
149
|
"name": "masterSize",
|
|
150
|
-
"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
|
|
150
|
+
"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.",
|
|
151
151
|
"value": {
|
|
152
152
|
"type": [
|
|
153
153
|
"string",
|
|
@@ -158,7 +158,7 @@
|
|
|
158
158
|
},
|
|
159
159
|
{
|
|
160
160
|
"name": "masterMinSize",
|
|
161
|
-
"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
|
|
161
|
+
"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.",
|
|
162
162
|
"value": {
|
|
163
163
|
"type": [
|
|
164
164
|
"string",
|
|
@@ -180,7 +180,7 @@
|
|
|
180
180
|
},
|
|
181
181
|
{
|
|
182
182
|
"name": "forceOverlay",
|
|
183
|
-
"description": "When specified, forces the
|
|
183
|
+
"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`.",
|
|
184
184
|
"value": {
|
|
185
185
|
"type": [
|
|
186
186
|
"boolean",
|
|
@@ -201,11 +201,11 @@
|
|
|
201
201
|
}
|
|
202
202
|
},
|
|
203
203
|
{
|
|
204
|
-
"name": "
|
|
205
|
-
"description": "
|
|
204
|
+
"name": "stackOverlay",
|
|
205
|
+
"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`.",
|
|
206
206
|
"value": {
|
|
207
207
|
"type": [
|
|
208
|
-
"
|
|
208
|
+
"boolean",
|
|
209
209
|
"null",
|
|
210
210
|
"undefined"
|
|
211
211
|
]
|
|
@@ -223,7 +223,16 @@
|
|
|
223
223
|
}
|
|
224
224
|
}
|
|
225
225
|
],
|
|
226
|
-
"events": [
|
|
226
|
+
"events": [
|
|
227
|
+
{
|
|
228
|
+
"name": "backdrop-click",
|
|
229
|
+
"description": "backdrop-click\nFired when the user clicks the backdrop in the drawer mode."
|
|
230
|
+
},
|
|
231
|
+
{
|
|
232
|
+
"name": "detail-escape-press",
|
|
233
|
+
"description": "detail-escape-press\nFired when the user presses Escape in the detail area."
|
|
234
|
+
}
|
|
235
|
+
]
|
|
227
236
|
}
|
|
228
237
|
}
|
|
229
238
|
]
|
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": "
|
|
4
|
+
"version": "25.0.0-alpha1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -16,12 +16,19 @@
|
|
|
16
16
|
"elements": [
|
|
17
17
|
{
|
|
18
18
|
"name": "vaadin-master-detail-layout",
|
|
19
|
-
"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 custom CSS properties are available for styling (needed to be set\non the `<html>` element since they are used by the global view transitions):\n\nCustom CSS property | Description | Default\n-----------------------------------------------------|---------------------|--------\n`--vaadin-master-detail-layout-transition-duration` | Transition duration | 300ms\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------|----------------------\n`backdrop` | Backdrop covering the master area in the
|
|
19
|
+
"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 custom CSS properties are available for styling (needed to be set\non the `<html>` element since they are used by the global view transitions):\n\nCustom CSS property | Description | Default\n-----------------------------------------------------|---------------------|--------\n`--vaadin-master-detail-layout-transition-duration` | Transition duration | 300ms\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\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|
|
23
23
|
"name": "?forceOverlay",
|
|
24
|
-
"description": "When specified, forces the
|
|
24
|
+
"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`.",
|
|
25
|
+
"value": {
|
|
26
|
+
"kind": "expression"
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
"name": "?stackOverlay",
|
|
31
|
+
"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`.",
|
|
25
32
|
"value": {
|
|
26
33
|
"kind": "expression"
|
|
27
34
|
}
|
|
@@ -35,28 +42,28 @@
|
|
|
35
42
|
},
|
|
36
43
|
{
|
|
37
44
|
"name": ".detailSize",
|
|
38
|
-
"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
|
|
45
|
+
"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.",
|
|
39
46
|
"value": {
|
|
40
47
|
"kind": "expression"
|
|
41
48
|
}
|
|
42
49
|
},
|
|
43
50
|
{
|
|
44
51
|
"name": ".detailMinSize",
|
|
45
|
-
"description": "Minimum size (in CSS length units) to be set on the detail area.\nWhen specified, it prevents the detail area from shrinking below\nthis size. If there is not enough space to show master and detail\nareas next to each other, the
|
|
52
|
+
"description": "Minimum size (in CSS length units) to be set on the detail area.\nWhen specified, it prevents the detail 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.",
|
|
46
53
|
"value": {
|
|
47
54
|
"kind": "expression"
|
|
48
55
|
}
|
|
49
56
|
},
|
|
50
57
|
{
|
|
51
58
|
"name": ".masterSize",
|
|
52
|
-
"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
|
|
59
|
+
"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.",
|
|
53
60
|
"value": {
|
|
54
61
|
"kind": "expression"
|
|
55
62
|
}
|
|
56
63
|
},
|
|
57
64
|
{
|
|
58
65
|
"name": ".masterMinSize",
|
|
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
|
|
66
|
+
"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
67
|
"value": {
|
|
61
68
|
"kind": "expression"
|
|
62
69
|
}
|
|
@@ -76,8 +83,15 @@
|
|
|
76
83
|
}
|
|
77
84
|
},
|
|
78
85
|
{
|
|
79
|
-
"name": "
|
|
80
|
-
"description": "
|
|
86
|
+
"name": "@backdrop-click",
|
|
87
|
+
"description": "backdrop-click\nFired when the user clicks the backdrop in the drawer mode.",
|
|
88
|
+
"value": {
|
|
89
|
+
"kind": "expression"
|
|
90
|
+
}
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"name": "@detail-escape-press",
|
|
94
|
+
"description": "detail-escape-press\nFired when the user presses Escape in the detail area.",
|
|
81
95
|
"value": {
|
|
82
96
|
"kind": "expression"
|
|
83
97
|
}
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import '@vaadin/vaadin-material-styles/color.js';
|
|
2
|
-
import '@vaadin/vaadin-material-styles/style.js';
|
|
3
|
-
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
4
|
-
|
|
5
|
-
registerStyles(
|
|
6
|
-
'vaadin-master-detail-layout',
|
|
7
|
-
css`
|
|
8
|
-
:host(:is([overlay], [stack])) [part='detail'] {
|
|
9
|
-
background-color: var(--material-background-color);
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
:host([overlay]) [part='detail'] {
|
|
13
|
-
box-shadow: var(--material-shadow-elevation-4dp);
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
:host([overlay][orientation='horizontal']) [part='detail'] {
|
|
17
|
-
border-inline-start: 1px solid var(--material-divider-color);
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
:host([overlay][orientation='vertical']) [part='detail'] {
|
|
21
|
-
border-block-start: 1px solid var(--material-divider-color);
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
:host([overlay]) [part='backdrop'] {
|
|
25
|
-
background-color: var(--material-secondary-background-color);
|
|
26
|
-
opacity: 0.5;
|
|
27
|
-
}
|
|
28
|
-
`,
|
|
29
|
-
{ moduleId: 'material-master-detail-layout' },
|
|
30
|
-
);
|