@vaadin/master-detail-layout 24.8.3 → 24.8.4
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/vaadin-master-detail-layout-transition-styles.js +94 -243
- package/src/vaadin-master-detail-layout.d.ts +0 -7
- package/src/vaadin-master-detail-layout.js +95 -88
- package/theme/lumo/vaadin-master-detail-layout-styles.js +6 -11
- package/theme/material/vaadin-master-detail-layout-styles.d.ts +1 -0
- package/theme/material/vaadin-master-detail-layout-styles.js +8 -8
- package/web-types.json +2 -2
- package/web-types.lit.json +2 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/master-detail-layout",
|
|
3
|
-
"version": "24.8.
|
|
3
|
+
"version": "24.8.4",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -34,15 +34,15 @@
|
|
|
34
34
|
"web-component"
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@vaadin/a11y-base": "~24.8.
|
|
38
|
-
"@vaadin/component-base": "~24.8.
|
|
39
|
-
"@vaadin/vaadin-lumo-styles": "~24.8.
|
|
40
|
-
"@vaadin/vaadin-material-styles": "~24.8.
|
|
41
|
-
"@vaadin/vaadin-themable-mixin": "~24.8.
|
|
37
|
+
"@vaadin/a11y-base": "~24.8.4",
|
|
38
|
+
"@vaadin/component-base": "~24.8.4",
|
|
39
|
+
"@vaadin/vaadin-lumo-styles": "~24.8.4",
|
|
40
|
+
"@vaadin/vaadin-material-styles": "~24.8.4",
|
|
41
|
+
"@vaadin/vaadin-themable-mixin": "~24.8.4",
|
|
42
42
|
"lit": "^3.0.0"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
|
-
"@vaadin/chai-plugins": "~24.8.
|
|
45
|
+
"@vaadin/chai-plugins": "~24.8.4",
|
|
46
46
|
"@vaadin/testing-helpers": "^1.1.0",
|
|
47
47
|
"sinon": "^18.0.0"
|
|
48
48
|
},
|
|
@@ -50,5 +50,5 @@
|
|
|
50
50
|
"web-types.json",
|
|
51
51
|
"web-types.lit.json"
|
|
52
52
|
],
|
|
53
|
-
"gitHead": "
|
|
53
|
+
"gitHead": "849e54e967563080a685965e2dced02060b3ab23"
|
|
54
54
|
}
|
|
@@ -6,284 +6,135 @@
|
|
|
6
6
|
import { css } from 'lit';
|
|
7
7
|
|
|
8
8
|
export const transitionStyles = css`
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
/* Default cross-fade animation */
|
|
18
|
-
vaadin-master-detail-layout[transition] {
|
|
19
|
-
view-transition-name: vaadin-master-detail-layout;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
::view-transition-group(vaadin-master-detail-layout) {
|
|
23
|
-
animation-duration: var(--vaadin-master-detail-layout-transition-duration, 300ms);
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
/* Drawer - horizontal - add */
|
|
27
|
-
|
|
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
|
-
}
|
|
31
|
-
|
|
32
|
-
::view-transition-group(vaadin-master-detail-layout-drawer-horizontal-detail-add) {
|
|
33
|
-
clip-path: inset(0);
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
::view-transition-new(vaadin-master-detail-layout-drawer-horizontal-detail-add) {
|
|
37
|
-
animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
|
|
38
|
-
vaadin-master-detail-layout-drawer-horizontal-detail-add;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
@keyframes vaadin-master-detail-layout-drawer-horizontal-detail-add {
|
|
42
|
-
from {
|
|
43
|
-
transform: translateX(calc(100% * var(--_vaadin-master-detail-layout-dir-multiplier)));
|
|
9
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
10
|
+
html {
|
|
11
|
+
--_vaadin-mdl-dir-multiplier: 1;
|
|
12
|
+
--_vaadin-mdl-stack-master-offset: 20%;
|
|
13
|
+
--_vaadin-mdl-stack-master-clip-path: inset(0 0 0 var(--_vaadin-mdl-stack-master-offset));
|
|
14
|
+
--_vaadin-mdl-easing: cubic-bezier(0.78, 0, 0.22, 1);
|
|
44
15
|
}
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
/* Drawer - horizontal - remove */
|
|
48
|
-
|
|
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
|
-
}
|
|
52
|
-
|
|
53
|
-
::view-transition-group(vaadin-master-detail-layout-drawer-horizontal-detail-remove) {
|
|
54
|
-
clip-path: inset(0);
|
|
55
|
-
}
|
|
56
16
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
@keyframes vaadin-master-detail-layout-drawer-horizontal-detail-remove {
|
|
63
|
-
to {
|
|
64
|
-
transform: translateX(calc(100% * var(--_vaadin-master-detail-layout-dir-multiplier)));
|
|
17
|
+
html[dir='rtl'] {
|
|
18
|
+
--_vaadin-mdl-dir-multiplier: -1;
|
|
19
|
+
--_vaadin-mdl-stack-master-clip-path: inset(0 var(--_vaadin-mdl-stack-master-offset) 0 0);
|
|
65
20
|
}
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
/* Stack - horizontal - add */
|
|
69
21
|
|
|
70
|
-
|
|
71
|
-
view-transition-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
::view-transition-group(vaadin-master-detail-layout-stack-horizontal-add) {
|
|
75
|
-
clip-path: inset(0);
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
::view-transition-new(vaadin-master-detail-layout-stack-horizontal-add) {
|
|
79
|
-
animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
|
|
80
|
-
vaadin-master-detail-layout-stack-horizontal-add-new;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
::view-transition-old(vaadin-master-detail-layout-stack-horizontal-add) {
|
|
84
|
-
animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
|
|
85
|
-
vaadin-master-detail-layout-stack-horizontal-add-old;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
@keyframes vaadin-master-detail-layout-stack-horizontal-add-new {
|
|
89
|
-
from {
|
|
90
|
-
transform: translateX(calc(100px * var(--_vaadin-master-detail-layout-dir-multiplier)));
|
|
91
|
-
opacity: 0;
|
|
22
|
+
::view-transition-group(vaadin-mdl-backdrop),
|
|
23
|
+
::view-transition-group(vaadin-mdl-master),
|
|
24
|
+
::view-transition-group(vaadin-mdl-detail) {
|
|
25
|
+
animation-duration: 0.4s;
|
|
92
26
|
}
|
|
93
|
-
}
|
|
94
27
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
opacity: 0;
|
|
28
|
+
::view-transition-group(vaadin-mdl-master),
|
|
29
|
+
::view-transition-group(vaadin-mdl-detail) {
|
|
30
|
+
animation-timing-function: var(--_vaadin-mdl-easing);
|
|
99
31
|
}
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
/* Stack - horizontal - remove */
|
|
103
|
-
|
|
104
|
-
vaadin-master-detail-layout[stack][orientation='horizontal'][transition='remove'] {
|
|
105
|
-
view-transition-name: vaadin-master-detail-layout-stack-horizontal-remove;
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
::view-transition-group(vaadin-master-detail-layout-stack-horizontal-remove) {
|
|
109
|
-
clip-path: inset(0);
|
|
110
|
-
}
|
|
111
32
|
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
vaadin-master-detail-layout-stack-horizontal-remove-old;
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
@keyframes vaadin-master-detail-layout-stack-horizontal-remove-new {
|
|
123
|
-
from {
|
|
124
|
-
transform: translateX(calc(-100px * var(--_vaadin-master-detail-layout-dir-multiplier)));
|
|
125
|
-
opacity: 0;
|
|
33
|
+
::view-transition-image-pair(vaadin-mdl-master),
|
|
34
|
+
::view-transition-image-pair(vaadin-mdl-detail),
|
|
35
|
+
::view-transition-new(vaadin-mdl-master),
|
|
36
|
+
::view-transition-new(vaadin-mdl-detail),
|
|
37
|
+
::view-transition-old(vaadin-mdl-master),
|
|
38
|
+
::view-transition-old(vaadin-mdl-detail) {
|
|
39
|
+
animation-timing-function: inherit;
|
|
126
40
|
}
|
|
127
|
-
}
|
|
128
41
|
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
opacity: 0;
|
|
42
|
+
/* Needed to promote the backdrop on top the master during the transition */
|
|
43
|
+
vaadin-master-detail-layout[transition]:not([transition='replace'])::part(backdrop) {
|
|
44
|
+
view-transition-name: vaadin-mdl-backdrop;
|
|
133
45
|
}
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
/* Stack - horizontal - viewport - add */
|
|
137
|
-
|
|
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
|
-
}
|
|
141
|
-
|
|
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
46
|
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
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) {
|
|
165
|
-
clip-path: inset(0);
|
|
166
|
-
}
|
|
167
|
-
|
|
168
|
-
::view-transition-new(vaadin-master-detail-layout-drawer-vertical-detail-add) {
|
|
169
|
-
animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
|
|
170
|
-
vaadin-master-detail-layout-drawer-vertical-detail-add;
|
|
171
|
-
}
|
|
172
|
-
|
|
173
|
-
@keyframes vaadin-master-detail-layout-drawer-vertical-detail-add {
|
|
174
|
-
from {
|
|
175
|
-
transform: translateY(100%);
|
|
47
|
+
vaadin-master-detail-layout[transition]:not([transition='replace']):not([drawer], [stack])::part(detail),
|
|
48
|
+
vaadin-master-detail-layout[transition]:is([drawer], [stack])::part(_detail-internal) {
|
|
49
|
+
view-transition-name: vaadin-mdl-detail;
|
|
176
50
|
}
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
/* Drawer - vertical - remove */
|
|
180
51
|
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
}
|
|
184
|
-
|
|
185
|
-
::view-transition-group(vaadin-master-detail-layout-drawer-vertical-detail-remove) {
|
|
186
|
-
clip-path: inset(0);
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
::view-transition-old(vaadin-master-detail-layout-drawer-vertical-detail-remove) {
|
|
190
|
-
animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
|
|
191
|
-
vaadin-master-detail-layout-drawer-vertical-detail-remove;
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
@keyframes vaadin-master-detail-layout-drawer-vertical-detail-remove {
|
|
195
|
-
to {
|
|
196
|
-
transform: translateY(100%);
|
|
52
|
+
::view-transition-group(vaadin-mdl-detail) {
|
|
53
|
+
clip-path: inset(0);
|
|
197
54
|
}
|
|
198
|
-
}
|
|
199
55
|
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
}
|
|
205
|
-
|
|
206
|
-
::view-transition-group(vaadin-master-detail-layout-stack-vertical-add) {
|
|
207
|
-
clip-path: inset(0);
|
|
208
|
-
}
|
|
209
|
-
|
|
210
|
-
::view-transition-new(vaadin-master-detail-layout-stack-vertical-add) {
|
|
211
|
-
animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
|
|
212
|
-
vaadin-master-detail-layout-stack-vertical-add-new;
|
|
213
|
-
}
|
|
56
|
+
::view-transition-new(vaadin-mdl-detail),
|
|
57
|
+
::view-transition-old(vaadin-mdl-detail) {
|
|
58
|
+
animation-name: vaadin-mdl-detail-slide-in;
|
|
59
|
+
}
|
|
214
60
|
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
}
|
|
61
|
+
::view-transition-old(vaadin-mdl-detail) {
|
|
62
|
+
animation-direction: reverse;
|
|
63
|
+
}
|
|
219
64
|
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
65
|
+
@keyframes vaadin-mdl-detail-slide-in {
|
|
66
|
+
0% {
|
|
67
|
+
translate: calc((100% + 30px) * var(--_vaadin-mdl-dir-multiplier));
|
|
68
|
+
}
|
|
224
69
|
}
|
|
225
|
-
}
|
|
226
70
|
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
transform: translateY(-100px);
|
|
71
|
+
vaadin-master-detail-layout[orientation='horizontal'][stack][has-detail]::part(master) {
|
|
72
|
+
translate: calc(var(--_vaadin-mdl-stack-master-offset) * var(--_vaadin-mdl-dir-multiplier) * -1);
|
|
230
73
|
opacity: 0;
|
|
231
74
|
}
|
|
232
|
-
}
|
|
233
|
-
|
|
234
|
-
/* Stack - vertical - remove */
|
|
235
75
|
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
76
|
+
vaadin-master-detail-layout[transition]::part(master) {
|
|
77
|
+
view-transition-name: vaadin-mdl-master;
|
|
78
|
+
}
|
|
239
79
|
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
80
|
+
vaadin-master-detail-layout[orientation='horizontal'][stack][transition='add']::part(master) {
|
|
81
|
+
view-transition-class: stack-add;
|
|
82
|
+
}
|
|
243
83
|
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
}
|
|
84
|
+
vaadin-master-detail-layout[orientation='horizontal'][stack][transition='remove']::part(master) {
|
|
85
|
+
view-transition-class: stack-remove;
|
|
86
|
+
}
|
|
248
87
|
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
88
|
+
::view-transition-new(vaadin-mdl-master),
|
|
89
|
+
::view-transition-old(vaadin-mdl-master) {
|
|
90
|
+
object-fit: none;
|
|
91
|
+
object-position: max(0%, var(--_vaadin-mdl-dir-multiplier) * -100%) 0;
|
|
92
|
+
}
|
|
253
93
|
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
94
|
+
::view-transition-new(vaadin-mdl-master.stack-remove),
|
|
95
|
+
::view-transition-old(vaadin-mdl-master.stack-remove) {
|
|
96
|
+
animation-name: vaadin-mdl-master-stack-remove;
|
|
97
|
+
clip-path: var(--_vaadin-mdl-stack-master-clip-path);
|
|
258
98
|
}
|
|
259
|
-
}
|
|
260
99
|
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
100
|
+
@keyframes vaadin-mdl-master-stack-remove {
|
|
101
|
+
100% {
|
|
102
|
+
clip-path: inset(0);
|
|
103
|
+
}
|
|
265
104
|
}
|
|
266
|
-
}
|
|
267
105
|
|
|
268
|
-
|
|
106
|
+
::view-transition-new(vaadin-mdl-master.stack-add),
|
|
107
|
+
::view-transition-old(vaadin-mdl-master.stack-add) {
|
|
108
|
+
animation-name: vaadin-mdl-master-stack-add;
|
|
109
|
+
clip-path: inset(0);
|
|
110
|
+
}
|
|
269
111
|
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
112
|
+
@keyframes vaadin-mdl-master-stack-add {
|
|
113
|
+
100% {
|
|
114
|
+
clip-path: var(--_vaadin-mdl-stack-master-clip-path);
|
|
115
|
+
}
|
|
116
|
+
}
|
|
273
117
|
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
118
|
+
/* prettier-ignore */
|
|
119
|
+
vaadin-master-detail-layout[orientation='vertical']:not([drawer], [stack])[transition]:not([transition='replace'])::part(detail),
|
|
120
|
+
vaadin-master-detail-layout[orientation='vertical']:is([drawer], [stack])[transition]::part(_detail-internal) {
|
|
121
|
+
view-transition-name: vaadin-mdl-detail;
|
|
122
|
+
view-transition-class: vertical;
|
|
123
|
+
}
|
|
278
124
|
|
|
279
|
-
|
|
125
|
+
::view-transition-new(vaadin-mdl-detail.vertical),
|
|
126
|
+
::view-transition-old(vaadin-mdl-detail.vertical) {
|
|
127
|
+
animation-name: vaadin-mdl-vertical-detail-slide-in;
|
|
128
|
+
}
|
|
280
129
|
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
130
|
+
::view-transition-old(vaadin-mdl-detail.vertical) {
|
|
131
|
+
animation-direction: reverse;
|
|
132
|
+
}
|
|
284
133
|
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
134
|
+
@keyframes vaadin-mdl-vertical-detail-slide-in {
|
|
135
|
+
0% {
|
|
136
|
+
transform: translateY(calc(100% + 30px));
|
|
137
|
+
}
|
|
138
|
+
}
|
|
288
139
|
}
|
|
289
140
|
`;
|
|
@@ -23,13 +23,6 @@ export interface MasterDetailLayoutEventMap extends HTMLElementEventMap, MasterD
|
|
|
23
23
|
*
|
|
24
24
|
* ### Styling
|
|
25
25
|
*
|
|
26
|
-
* The following custom CSS property are available for styling (needed to be set
|
|
27
|
-
* on the `<html>` element since they are used by the global view transitions):
|
|
28
|
-
*
|
|
29
|
-
* Custom CSS property | Description | Default
|
|
30
|
-
* -----------------------------------------------------|---------------------|--------
|
|
31
|
-
* `--vaadin-master-detail-layout-transition-duration` | Transition duration | 300ms
|
|
32
|
-
*
|
|
33
26
|
* The following shadow DOM parts are available for styling:
|
|
34
27
|
*
|
|
35
28
|
* Part name | Description
|
|
@@ -20,13 +20,6 @@ import { transitionStyles } from './vaadin-master-detail-layout-transition-style
|
|
|
20
20
|
*
|
|
21
21
|
* ### Styling
|
|
22
22
|
*
|
|
23
|
-
* The following custom CSS properties are available for styling (needed to be set
|
|
24
|
-
* on the `<html>` element since they are used by the global view transitions):
|
|
25
|
-
*
|
|
26
|
-
* Custom CSS property | Description | Default
|
|
27
|
-
* -----------------------------------------------------|---------------------|--------
|
|
28
|
-
* `--vaadin-master-detail-layout-transition-duration` | Transition duration | 300ms
|
|
29
|
-
*
|
|
30
23
|
* The following shadow DOM parts are available for styling:
|
|
31
24
|
*
|
|
32
25
|
* Part name | Description
|
|
@@ -64,64 +57,72 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
|
|
|
64
57
|
|
|
65
58
|
static get styles() {
|
|
66
59
|
return css`
|
|
60
|
+
/* Layout and positioning styles */
|
|
61
|
+
|
|
67
62
|
:host {
|
|
68
63
|
display: flex;
|
|
69
64
|
box-sizing: border-box;
|
|
70
65
|
height: 100%;
|
|
66
|
+
max-width: 100%;
|
|
67
|
+
max-height: 100%;
|
|
68
|
+
position: relative; /* Keep the positioning context stable across all modes */
|
|
69
|
+
overflow: hidden;
|
|
71
70
|
}
|
|
72
71
|
|
|
73
72
|
:host([hidden]) {
|
|
74
73
|
display: none !important;
|
|
75
74
|
}
|
|
76
75
|
|
|
77
|
-
:host(
|
|
78
|
-
|
|
79
|
-
display: none;
|
|
76
|
+
:host([orientation='vertical']) {
|
|
77
|
+
flex-direction: column;
|
|
80
78
|
}
|
|
81
79
|
|
|
82
|
-
|
|
83
|
-
|
|
80
|
+
[part='_detail-internal'] {
|
|
81
|
+
display: contents;
|
|
82
|
+
justify-content: end;
|
|
84
83
|
}
|
|
85
84
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
position: relative;
|
|
85
|
+
:host([orientation='vertical']) [part='_detail-internal'] {
|
|
86
|
+
align-items: end;
|
|
89
87
|
}
|
|
90
88
|
|
|
91
|
-
:host(:is([drawer], [stack])
|
|
92
|
-
:host([drawer][
|
|
89
|
+
:host(:is([drawer], [stack])) [part='_detail-internal'],
|
|
90
|
+
:host(:is([drawer], [stack])[has-detail]) [part='backdrop'] {
|
|
91
|
+
display: flex;
|
|
93
92
|
position: absolute;
|
|
93
|
+
z-index: 1;
|
|
94
|
+
inset: 0;
|
|
95
|
+
overscroll-behavior: contain;
|
|
94
96
|
}
|
|
95
97
|
|
|
96
|
-
:host(:
|
|
97
|
-
|
|
98
|
-
|
|
98
|
+
:host(:not([has-detail])) [part='_detail-internal'],
|
|
99
|
+
[part='backdrop'] {
|
|
100
|
+
display: none;
|
|
99
101
|
}
|
|
100
102
|
|
|
101
|
-
:host([
|
|
102
|
-
|
|
103
|
-
inset: 0;
|
|
104
|
-
z-index: 1;
|
|
103
|
+
:host([orientation='horizontal'][drawer]) [part='detail'] {
|
|
104
|
+
margin-inline-start: 50px;
|
|
105
105
|
}
|
|
106
106
|
|
|
107
|
-
:host(
|
|
108
|
-
|
|
107
|
+
:host([orientation='vertical'][drawer]) [part='detail'] {
|
|
108
|
+
margin-top: 50px;
|
|
109
109
|
}
|
|
110
110
|
|
|
111
|
-
:host([drawer][
|
|
112
|
-
|
|
113
|
-
height: 100%;
|
|
114
|
-
width: var(--_detail-min-size, min-content);
|
|
115
|
-
max-width: 100%;
|
|
111
|
+
:host(:is([drawer], [stack])[containment='viewport']) :is([part='_detail-internal'], [part='backdrop']) {
|
|
112
|
+
position: fixed;
|
|
116
113
|
}
|
|
117
114
|
|
|
118
|
-
|
|
119
|
-
|
|
115
|
+
/* Sizing styles */
|
|
116
|
+
|
|
117
|
+
[part] {
|
|
118
|
+
box-sizing: border-box;
|
|
119
|
+
max-width: 100%;
|
|
120
|
+
max-height: 100%;
|
|
120
121
|
}
|
|
121
122
|
|
|
122
123
|
/* No fixed size */
|
|
123
124
|
:host(:not([has-master-size])) [part='master'],
|
|
124
|
-
:host(:not([has-detail-size])) [part='detail'] {
|
|
125
|
+
:host(:not([has-detail-size]):not([drawer], [stack])) [part='detail'] {
|
|
125
126
|
flex-grow: 1;
|
|
126
127
|
flex-basis: 50%;
|
|
127
128
|
}
|
|
@@ -132,83 +133,79 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
|
|
|
132
133
|
flex-shrink: 0;
|
|
133
134
|
}
|
|
134
135
|
|
|
135
|
-
:host([has-master-size][
|
|
136
|
+
:host([orientation='horizontal'][has-master-size][has-detail]) [part='master'] {
|
|
136
137
|
width: var(--_master-size);
|
|
137
138
|
}
|
|
138
139
|
|
|
139
|
-
:host([has-
|
|
140
|
+
:host([orientation='vertical'][has-master-size][has-detail]) [part='master'] {
|
|
141
|
+
height: var(--_master-size);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
:host([orientation='horizontal'][has-detail-size]:not([stack])) [part='detail'] {
|
|
140
145
|
width: var(--_detail-size);
|
|
141
146
|
}
|
|
142
147
|
|
|
148
|
+
:host([orientation='vertical'][has-detail-size]:not([stack])) [part='detail'] {
|
|
149
|
+
height: var(--_detail-size);
|
|
150
|
+
}
|
|
151
|
+
|
|
143
152
|
:host([has-master-size][has-detail-size]) [part='master'] {
|
|
144
153
|
flex-grow: 1;
|
|
145
154
|
flex-basis: var(--_master-size);
|
|
146
155
|
}
|
|
147
156
|
|
|
148
|
-
:host([has-master-size][has-detail-size]) [part='detail'] {
|
|
157
|
+
:host([has-master-size][has-detail-size]:not([drawer], [stack])) [part='detail'] {
|
|
149
158
|
flex-grow: 1;
|
|
150
159
|
flex-basis: var(--_detail-size);
|
|
151
160
|
}
|
|
152
161
|
|
|
153
162
|
/* Min size */
|
|
154
|
-
:host([has-master-min-size]
|
|
155
|
-
min-width: var(--_master-min-size);
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
:host([has-detail-min-size][orientation='horizontal']:not([drawer]):not([stack])) [part='detail'] {
|
|
159
|
-
min-width: var(--_detail-min-size);
|
|
163
|
+
:host([orientation='horizontal'][has-master-min-size]) [part='master'] {
|
|
164
|
+
min-width: min(100%, var(--_master-min-size));
|
|
160
165
|
}
|
|
161
166
|
|
|
162
|
-
:host([has-master-min-size]) [part='master']
|
|
163
|
-
|
|
164
|
-
flex-shrink: 0;
|
|
167
|
+
:host([orientation='vertical'][has-master-min-size]) [part='master'] {
|
|
168
|
+
min-height: min(100%, var(--_master-min-size));
|
|
165
169
|
}
|
|
166
170
|
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
flex-direction: column;
|
|
171
|
+
:host([orientation='horizontal'][has-detail-min-size]) [part='detail'] {
|
|
172
|
+
min-width: min(100%, var(--_detail-min-size));
|
|
170
173
|
}
|
|
171
174
|
|
|
172
|
-
:host([orientation='vertical'][
|
|
173
|
-
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
:host([orientation='vertical'][drawer]) [part='detail'] {
|
|
177
|
-
inset-block-end: 0;
|
|
178
|
-
width: 100%;
|
|
179
|
-
height: var(--_detail-min-size, min-content);
|
|
175
|
+
:host([orientation='vertical'][has-detail-min-size]) [part='detail'] {
|
|
176
|
+
min-height: min(100%, var(--_detail-min-size));
|
|
180
177
|
}
|
|
181
178
|
|
|
182
|
-
:host([drawer]
|
|
183
|
-
|
|
179
|
+
:host([drawer]) [part='master'],
|
|
180
|
+
:host([stack]) [part] {
|
|
181
|
+
width: 100% !important;
|
|
182
|
+
height: 100% !important;
|
|
183
|
+
min-width: auto !important;
|
|
184
|
+
min-height: auto !important;
|
|
185
|
+
max-width: 100% !important;
|
|
186
|
+
max-height: 100% !important;
|
|
184
187
|
}
|
|
185
188
|
|
|
186
|
-
/*
|
|
187
|
-
:host([has-master-size][orientation='vertical']) [part='master'] {
|
|
188
|
-
height: var(--_master-size);
|
|
189
|
-
}
|
|
189
|
+
/* Decorative/visual styles */
|
|
190
190
|
|
|
191
|
-
|
|
192
|
-
|
|
191
|
+
[part='backdrop'] {
|
|
192
|
+
background-color: rgba(0, 0, 0, 0.2);
|
|
193
193
|
}
|
|
194
194
|
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
:host([has-master-min-size][orientation='vertical'][drawer]) {
|
|
198
|
-
min-height: var(--_master-min-size);
|
|
195
|
+
[part='detail'] {
|
|
196
|
+
background: #fff;
|
|
199
197
|
}
|
|
200
198
|
|
|
201
|
-
:host(
|
|
202
|
-
|
|
199
|
+
:host(:is([drawer], [stack])) [part='detail'] {
|
|
200
|
+
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
|
|
203
201
|
}
|
|
204
202
|
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
max-height: 100%;
|
|
203
|
+
:host([orientation='horizontal']:not([drawer], [stack])) [part='detail'] {
|
|
204
|
+
border-inline-start: 1px solid rgba(0, 0, 0, 0.1);
|
|
208
205
|
}
|
|
209
206
|
|
|
210
|
-
:host([stack]) [part='detail'] {
|
|
211
|
-
|
|
207
|
+
:host([orientation='vertical']:not([drawer], [stack])) [part='detail'] {
|
|
208
|
+
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
|
212
209
|
}
|
|
213
210
|
`;
|
|
214
211
|
}
|
|
@@ -394,18 +391,24 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
|
|
|
394
391
|
/** @protected */
|
|
395
392
|
render() {
|
|
396
393
|
return html`
|
|
397
|
-
<div part="backdrop"
|
|
398
|
-
<div id="master" part="master" ?inert="${this._hasDetail && this._drawer && this.containment === 'layout'}">
|
|
399
|
-
<slot></slot>
|
|
400
|
-
</div>
|
|
394
|
+
<div part="backdrop"></div>
|
|
401
395
|
<div
|
|
402
|
-
id="
|
|
403
|
-
part="
|
|
404
|
-
|
|
405
|
-
aria-modal="${this._drawer && this.containment === 'viewport' ? 'true' : nothing}"
|
|
406
|
-
@keydown="${this.__onDetailKeydown}"
|
|
396
|
+
id="master"
|
|
397
|
+
part="master"
|
|
398
|
+
?inert="${this._hasDetail && (this._stack || (this._drawer && this.containment === 'layout'))}"
|
|
407
399
|
>
|
|
408
|
-
<slot
|
|
400
|
+
<slot></slot>
|
|
401
|
+
</div>
|
|
402
|
+
<div part="_detail-internal" @click="${this.__onDetailClick}">
|
|
403
|
+
<div
|
|
404
|
+
id="detail"
|
|
405
|
+
part="detail"
|
|
406
|
+
role="${this._drawer || this._stack ? 'dialog' : nothing}"
|
|
407
|
+
aria-modal="${this._drawer && this.containment === 'viewport' ? 'true' : nothing}"
|
|
408
|
+
@keydown="${this.__onDetailKeydown}"
|
|
409
|
+
>
|
|
410
|
+
<slot name="detail" @slotchange="${this.__onDetailSlotChange}"></slot>
|
|
411
|
+
</div>
|
|
409
412
|
</div>
|
|
410
413
|
`;
|
|
411
414
|
}
|
|
@@ -428,8 +431,12 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
|
|
|
428
431
|
}
|
|
429
432
|
|
|
430
433
|
/** @private */
|
|
431
|
-
|
|
432
|
-
|
|
434
|
+
__onDetailClick(e) {
|
|
435
|
+
// The detail wrapper element fully covers the backdrop part, so listen
|
|
436
|
+
// to click event on it and detect if it was outside the detail content
|
|
437
|
+
if (!e.composedPath().includes(this.$.detail)) {
|
|
438
|
+
this.dispatchEvent(new CustomEvent('backdrop-click'));
|
|
439
|
+
}
|
|
433
440
|
}
|
|
434
441
|
|
|
435
442
|
/** @private */
|
|
@@ -7,21 +7,16 @@ registerStyles(
|
|
|
7
7
|
css`
|
|
8
8
|
:host(:is([drawer], [stack])) [part='detail'] {
|
|
9
9
|
background-color: var(--lumo-base-color);
|
|
10
|
+
box-shadow:
|
|
11
|
+
0 0 0 1px var(--lumo-shade-5pct),
|
|
12
|
+
var(--lumo-box-shadow-m);
|
|
10
13
|
}
|
|
11
14
|
|
|
12
|
-
|
|
13
|
-
|
|
15
|
+
[part='detail'] {
|
|
16
|
+
border-color: var(--lumo-contrast-10pct);
|
|
14
17
|
}
|
|
15
18
|
|
|
16
|
-
|
|
17
|
-
border-inline-start: 1px solid var(--lumo-contrast-10pct);
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
:host([drawer][orientation='vertical']) [part='detail'] {
|
|
21
|
-
border-block-start: 1px solid var(--lumo-contrast-10pct);
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
:host([drawer]) [part='backdrop'] {
|
|
19
|
+
[part='backdrop'] {
|
|
25
20
|
background-color: var(--lumo-shade-20pct);
|
|
26
21
|
}
|
|
27
22
|
`,
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import '@vaadin/vaadin-material-styles/color.js';
|
|
2
|
+
import '@vaadin/vaadin-material-styles/shadow.js';
|
|
2
3
|
import '@vaadin/vaadin-material-styles/style.js';
|
|
3
4
|
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
4
5
|
|
|
@@ -7,21 +8,20 @@ registerStyles(
|
|
|
7
8
|
css`
|
|
8
9
|
:host(:is([drawer], [stack])) [part='detail'] {
|
|
9
10
|
background-color: var(--material-background-color);
|
|
11
|
+
box-shadow:
|
|
12
|
+
0 0 0 1px var(--material-divider-color),
|
|
13
|
+
var(--material-shadow-elevation-4dp);
|
|
10
14
|
}
|
|
11
15
|
|
|
12
|
-
:host([drawer]) [part='detail'] {
|
|
13
|
-
box-shadow: var(--material-shadow-elevation-4dp);
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
:host([drawer][orientation='horizontal']) [part='detail'] {
|
|
16
|
+
:host([orientation='horizontal']:not([drawer], [stack])) [part='detail'] {
|
|
17
17
|
border-inline-start: 1px solid var(--material-divider-color);
|
|
18
18
|
}
|
|
19
19
|
|
|
20
|
-
:host([
|
|
21
|
-
border-
|
|
20
|
+
:host([orientation='vertical']:not([drawer], [stack])) [part='detail'] {
|
|
21
|
+
border-top: 1px solid var(--material-divider-color);
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
-
|
|
24
|
+
[part='backdrop'] {
|
|
25
25
|
background-color: var(--material-secondary-background-color);
|
|
26
26
|
opacity: 0.5;
|
|
27
27
|
}
|
package/web-types.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/master-detail-layout",
|
|
4
|
-
"version": "24.8.
|
|
4
|
+
"version": "24.8.4",
|
|
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
|
|
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\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "detail-size",
|
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": "24.8.
|
|
4
|
+
"version": "24.8.4",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -16,7 +16,7 @@
|
|
|
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
|
|
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 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
|
{
|