@vaadin/app-layout 25.0.0-alpha7 → 25.0.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 +9 -9
- package/src/styles/vaadin-app-layout-base-styles.js +151 -153
- package/src/styles/vaadin-drawer-toggle-base-styles.js +13 -15
- package/src/vaadin-app-layout-mixin.js +25 -3
- package/src/vaadin-app-layout.d.ts +1 -1
- package/src/vaadin-app-layout.js +2 -2
- package/src/vaadin-drawer-toggle.d.ts +1 -1
- package/src/vaadin-drawer-toggle.js +2 -2
- package/web-types.json +3 -3
- package/web-types.lit.json +3 -3
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/app-layout",
|
|
3
|
-
"version": "25.0.0-
|
|
3
|
+
"version": "25.0.0-alpha9",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -37,16 +37,16 @@
|
|
|
37
37
|
],
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
40
|
-
"@vaadin/a11y-base": "25.0.0-
|
|
41
|
-
"@vaadin/button": "25.0.0-
|
|
42
|
-
"@vaadin/component-base": "25.0.0-
|
|
43
|
-
"@vaadin/vaadin-lumo-styles": "25.0.0-
|
|
44
|
-
"@vaadin/vaadin-themable-mixin": "25.0.0-
|
|
40
|
+
"@vaadin/a11y-base": "25.0.0-alpha9",
|
|
41
|
+
"@vaadin/button": "25.0.0-alpha9",
|
|
42
|
+
"@vaadin/component-base": "25.0.0-alpha9",
|
|
43
|
+
"@vaadin/vaadin-lumo-styles": "25.0.0-alpha9",
|
|
44
|
+
"@vaadin/vaadin-themable-mixin": "25.0.0-alpha9",
|
|
45
45
|
"lit": "^3.0.0"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
|
-
"@vaadin/chai-plugins": "25.0.0-
|
|
49
|
-
"@vaadin/test-runner-commands": "25.0.0-
|
|
48
|
+
"@vaadin/chai-plugins": "25.0.0-alpha9",
|
|
49
|
+
"@vaadin/test-runner-commands": "25.0.0-alpha9",
|
|
50
50
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
51
51
|
"sinon": "^18.0.0"
|
|
52
52
|
},
|
|
@@ -54,5 +54,5 @@
|
|
|
54
54
|
"web-types.json",
|
|
55
55
|
"web-types.lit.json"
|
|
56
56
|
],
|
|
57
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "bbe4720721e0955ffc87a79b412bee38b1f0eb1e"
|
|
58
58
|
}
|
|
@@ -7,187 +7,185 @@ import '@vaadin/component-base/src/style-props.js';
|
|
|
7
7
|
import { css } from 'lit';
|
|
8
8
|
|
|
9
9
|
export const appLayoutStyles = css`
|
|
10
|
-
|
|
11
|
-
:
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
}
|
|
10
|
+
:host {
|
|
11
|
+
display: block;
|
|
12
|
+
box-sizing: border-box;
|
|
13
|
+
height: 100%;
|
|
14
|
+
--vaadin-app-layout-transition-duration: 0s;
|
|
15
|
+
transition: padding var(--vaadin-app-layout-transition-duration);
|
|
16
|
+
--_vaadin-app-layout-drawer-width: var(--vaadin-app-layout-drawer-width, auto);
|
|
17
|
+
--vaadin-app-layout-touch-optimized: false;
|
|
18
|
+
--vaadin-app-layout-navbar-offset-top: var(--_vaadin-app-layout-navbar-offset-size);
|
|
19
|
+
--vaadin-app-layout-navbar-offset-bottom: var(--_vaadin-app-layout-navbar-offset-size-bottom);
|
|
20
|
+
padding-block: var(--vaadin-app-layout-navbar-offset-top) var(--vaadin-app-layout-navbar-offset-bottom);
|
|
21
|
+
padding-inline-start: var(--vaadin-app-layout-navbar-offset-left);
|
|
22
|
+
}
|
|
24
23
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
24
|
+
:host([hidden]),
|
|
25
|
+
[hidden] {
|
|
26
|
+
display: none !important;
|
|
27
|
+
}
|
|
29
28
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
}
|
|
29
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
30
|
+
:host(:not([no-anim])) {
|
|
31
|
+
--vaadin-app-layout-transition-duration: 200ms;
|
|
34
32
|
}
|
|
33
|
+
}
|
|
35
34
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
35
|
+
:host([drawer-opened]) {
|
|
36
|
+
--vaadin-app-layout-drawer-offset-left: var(--_vaadin-app-layout-drawer-offset-size);
|
|
37
|
+
}
|
|
39
38
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
39
|
+
:host([overlay]) {
|
|
40
|
+
--vaadin-app-layout-drawer-offset-left: 0;
|
|
41
|
+
--vaadin-app-layout-navbar-offset-left: 0;
|
|
42
|
+
}
|
|
44
43
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
44
|
+
:host(:not([no-scroll])) [content] {
|
|
45
|
+
overflow: auto;
|
|
46
|
+
}
|
|
48
47
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
48
|
+
[content] {
|
|
49
|
+
height: 100%;
|
|
50
|
+
}
|
|
52
51
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
}
|
|
52
|
+
@media (pointer: coarse) and (max-width: 800px) and (min-height: 500px) {
|
|
53
|
+
:host {
|
|
54
|
+
--vaadin-app-layout-touch-optimized: true;
|
|
57
55
|
}
|
|
56
|
+
}
|
|
58
57
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
58
|
+
[part='navbar'] {
|
|
59
|
+
position: fixed;
|
|
60
|
+
display: flex;
|
|
61
|
+
align-items: center;
|
|
62
|
+
top: 0;
|
|
63
|
+
inset-inline: 0;
|
|
64
|
+
transition: inset-inline-start var(--vaadin-app-layout-transition-duration);
|
|
65
|
+
padding-top: max(var(--vaadin-app-layout-navbar-padding-top, var(--vaadin-padding)), var(--safe-area-inset-top));
|
|
66
|
+
padding-bottom: var(--vaadin-app-layout-navbar-padding-bottom, var(--vaadin-padding));
|
|
67
|
+
padding-inline-start: max(
|
|
68
|
+
var(--vaadin-app-layout-navbar-padding-inline-start, var(--vaadin-padding)),
|
|
69
|
+
var(--safe-area-inset-left)
|
|
70
|
+
);
|
|
71
|
+
/* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
|
|
72
|
+
padding-inline-end: max(
|
|
73
|
+
var(--vaadin-app-layout-navbar-padding-inline-end, var(--vaadin-padding)),
|
|
74
|
+
var(--safe-area-inset-right)
|
|
75
|
+
);
|
|
76
|
+
z-index: 1;
|
|
77
|
+
gap: var(--vaadin-app-layout-navbar-gap, var(--vaadin-gap-container-inline));
|
|
78
|
+
background: var(--vaadin-app-layout-navbar-background, var(--vaadin-background-container));
|
|
79
|
+
}
|
|
81
80
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
81
|
+
:host([primary-section='drawer'][drawer-opened]:not([overlay])) [part='navbar'] {
|
|
82
|
+
inset-inline-start: var(--vaadin-app-layout-drawer-offset-left, 0);
|
|
83
|
+
}
|
|
85
84
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
85
|
+
:host([primary-section='drawer']) [part='drawer'] {
|
|
86
|
+
top: 0;
|
|
87
|
+
}
|
|
89
88
|
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
89
|
+
[part='navbar'][bottom] {
|
|
90
|
+
top: auto;
|
|
91
|
+
bottom: 0;
|
|
92
|
+
padding-top: var(--vaadin-app-layout-navbar-padding-top, var(--vaadin-padding));
|
|
93
|
+
padding-bottom: max(
|
|
94
|
+
var(--vaadin-app-layout-navbar-padding-bottom, var(--vaadin-padding)),
|
|
95
|
+
var(--safe-area-inset-bottom)
|
|
96
|
+
);
|
|
97
|
+
}
|
|
99
98
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
99
|
+
[part='drawer'] {
|
|
100
|
+
overflow: auto;
|
|
101
|
+
overscroll-behavior: contain;
|
|
102
|
+
position: fixed;
|
|
103
|
+
top: var(--vaadin-app-layout-navbar-offset-top, 0);
|
|
104
|
+
bottom: var(--vaadin-app-layout-navbar-offset-bottom, var(--vaadin-viewport-offset-bottom, 0));
|
|
105
|
+
inset-inline: var(--vaadin-app-layout-navbar-offset-left, 0) auto;
|
|
106
|
+
transition:
|
|
107
|
+
transform var(--vaadin-app-layout-transition-duration),
|
|
108
|
+
visibility var(--vaadin-app-layout-transition-duration);
|
|
109
|
+
transform: translateX(-100%);
|
|
110
|
+
max-width: 90%;
|
|
111
|
+
width: var(--_vaadin-app-layout-drawer-width);
|
|
112
|
+
box-sizing: border-box;
|
|
113
|
+
padding: var(--safe-area-inset-top) 0 var(--safe-area-inset-bottom) var(--safe-area-inset-left);
|
|
114
|
+
outline: none;
|
|
115
|
+
/* The drawer should be inaccessible by the tabbing navigation when it is closed. */
|
|
116
|
+
visibility: hidden;
|
|
117
|
+
display: flex;
|
|
118
|
+
flex-direction: column;
|
|
119
|
+
background: var(--vaadin-app-layout-drawer-background, var(--vaadin-background-color));
|
|
120
|
+
}
|
|
122
121
|
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
122
|
+
:host([drawer-opened]) [part='drawer'] {
|
|
123
|
+
/* The drawer should be accessible by the tabbing navigation when it is opened. */
|
|
124
|
+
visibility: visible;
|
|
125
|
+
transform: translateX(0%);
|
|
126
|
+
touch-action: manipulation;
|
|
127
|
+
}
|
|
129
128
|
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
129
|
+
[part='backdrop'] {
|
|
130
|
+
background: var(--vaadin-overlay-backdrop-background, rgba(0, 0, 0, 0.5));
|
|
131
|
+
}
|
|
133
132
|
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
133
|
+
:host(:not([drawer-opened])) [part='backdrop'] {
|
|
134
|
+
opacity: 0 !important;
|
|
135
|
+
}
|
|
137
136
|
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
137
|
+
:host([overlay]) [part='backdrop'] {
|
|
138
|
+
position: fixed;
|
|
139
|
+
inset: 0;
|
|
140
|
+
pointer-events: none;
|
|
141
|
+
transition: opacity var(--vaadin-app-layout-transition-duration);
|
|
142
|
+
-webkit-tap-highlight-color: transparent;
|
|
143
|
+
}
|
|
145
144
|
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
145
|
+
:host([overlay]) [part='drawer'] {
|
|
146
|
+
top: 0;
|
|
147
|
+
bottom: 0;
|
|
148
|
+
box-shadow: var(--vaadin-overlay-box-shadow, 0 8px 24px -4px rgba(0, 0, 0, 0.3));
|
|
149
|
+
}
|
|
151
150
|
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
151
|
+
:host([overlay]) [part='drawer'],
|
|
152
|
+
:host([overlay]) [part='backdrop'] {
|
|
153
|
+
z-index: 2;
|
|
154
|
+
}
|
|
156
155
|
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
156
|
+
:host([drawer-opened][overlay]) [part='backdrop'] {
|
|
157
|
+
pointer-events: auto;
|
|
158
|
+
touch-action: manipulation;
|
|
159
|
+
}
|
|
161
160
|
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
161
|
+
:host([dir='rtl']) [part='drawer'] {
|
|
162
|
+
transform: translateX(100%);
|
|
163
|
+
}
|
|
165
164
|
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
165
|
+
:host([dir='rtl'][drawer-opened]) [part='drawer'] {
|
|
166
|
+
transform: translateX(0%);
|
|
167
|
+
}
|
|
169
168
|
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
169
|
+
:host([drawer-opened]:not([overlay])) {
|
|
170
|
+
padding-inline-start: var(--vaadin-app-layout-drawer-offset-left);
|
|
171
|
+
}
|
|
173
172
|
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
}
|
|
173
|
+
@media (max-width: 800px), (max-height: 600px) {
|
|
174
|
+
:host {
|
|
175
|
+
--vaadin-app-layout-drawer-overlay: true;
|
|
176
|
+
--_vaadin-app-layout-drawer-width: var(--vaadin-app-layout-drawer-width, 320px);
|
|
179
177
|
}
|
|
178
|
+
}
|
|
180
179
|
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
180
|
+
/* If a vaadin-scroller is used in the drawer, allow it to take all remaining space and contain scrolling */
|
|
181
|
+
[part='drawer'] ::slotted(vaadin-scroller) {
|
|
182
|
+
flex: 1;
|
|
183
|
+
overscroll-behavior: contain;
|
|
184
|
+
}
|
|
186
185
|
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
}
|
|
186
|
+
@media (forced-colors: active) {
|
|
187
|
+
:host([overlay]) [part='drawer'] {
|
|
188
|
+
border: 3px solid;
|
|
191
189
|
}
|
|
192
190
|
}
|
|
193
191
|
`;
|
|
@@ -7,23 +7,21 @@ import '@vaadin/component-base/src/style-props.js';
|
|
|
7
7
|
import { css } from 'lit';
|
|
8
8
|
|
|
9
9
|
export const drawerToggle = css`
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
}
|
|
10
|
+
[part='icon'] {
|
|
11
|
+
background: currentColor;
|
|
12
|
+
display: block;
|
|
13
|
+
height: var(--vaadin-icon-size, 1lh);
|
|
14
|
+
mask-image: var(--_vaadin-icon-menu);
|
|
15
|
+
width: var(--vaadin-icon-size, 1lh);
|
|
16
|
+
}
|
|
18
17
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
18
|
+
[hidden] {
|
|
19
|
+
display: none !important;
|
|
20
|
+
}
|
|
22
21
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
}
|
|
22
|
+
@media (forced-colors: active) {
|
|
23
|
+
[part='icon'] {
|
|
24
|
+
background: CanvasText;
|
|
27
25
|
}
|
|
28
26
|
}
|
|
29
27
|
`;
|
|
@@ -69,6 +69,7 @@ export const AppLayoutMixin = (superclass) =>
|
|
|
69
69
|
readOnly: true,
|
|
70
70
|
value: false,
|
|
71
71
|
reflectToAttribute: true,
|
|
72
|
+
observer: '__overlayChanged',
|
|
72
73
|
sync: true,
|
|
73
74
|
},
|
|
74
75
|
|
|
@@ -247,6 +248,22 @@ export const AppLayoutMixin = (superclass) =>
|
|
|
247
248
|
this.__setAriaExpanded();
|
|
248
249
|
}
|
|
249
250
|
|
|
251
|
+
/**
|
|
252
|
+
* A callback for the `overlay` property observer.
|
|
253
|
+
*
|
|
254
|
+
* When layout resizes while in the overlay mode, drawer opened state
|
|
255
|
+
* is not changed, but focus trap needs to be removed.
|
|
256
|
+
*
|
|
257
|
+
* @param {boolean} overlay
|
|
258
|
+
* @param {boolean} oldOverlay
|
|
259
|
+
* @private
|
|
260
|
+
*/
|
|
261
|
+
__overlayChanged(_overlay, oldOverlay) {
|
|
262
|
+
if (oldOverlay) {
|
|
263
|
+
this.__restoreFocus();
|
|
264
|
+
}
|
|
265
|
+
}
|
|
266
|
+
|
|
250
267
|
/**
|
|
251
268
|
* A callback for the `i18n` property observer.
|
|
252
269
|
*
|
|
@@ -409,9 +426,7 @@ export const AppLayoutMixin = (superclass) =>
|
|
|
409
426
|
return;
|
|
410
427
|
}
|
|
411
428
|
|
|
412
|
-
this.
|
|
413
|
-
this.__focusTrapController.releaseFocus();
|
|
414
|
-
this.$.drawer.removeAttribute('tabindex');
|
|
429
|
+
this.__restoreFocus();
|
|
415
430
|
|
|
416
431
|
// Move focus to the drawer toggle when closing the drawer.
|
|
417
432
|
const toggle = this.querySelector('vaadin-drawer-toggle');
|
|
@@ -421,6 +436,13 @@ export const AppLayoutMixin = (superclass) =>
|
|
|
421
436
|
}
|
|
422
437
|
}
|
|
423
438
|
|
|
439
|
+
/** @private */
|
|
440
|
+
__restoreFocus() {
|
|
441
|
+
this.__ariaModalController.close();
|
|
442
|
+
this.__focusTrapController.releaseFocus();
|
|
443
|
+
this.$.drawer.removeAttribute('tabindex');
|
|
444
|
+
}
|
|
445
|
+
|
|
424
446
|
/**
|
|
425
447
|
* Closes the drawer on Escape press if it has been opened in the overlay mode.
|
|
426
448
|
*
|
|
@@ -37,7 +37,7 @@ export type AppLayoutEventMap = AppLayoutCustomEventMap & HTMLElementEventMap;
|
|
|
37
37
|
/**
|
|
38
38
|
* `<vaadin-app-layout>` is a Web Component providing a quick and easy way to get a common application layout structure done.
|
|
39
39
|
*
|
|
40
|
-
* ```
|
|
40
|
+
* ```html
|
|
41
41
|
* <vaadin-app-layout primary-section="navbar|drawer">
|
|
42
42
|
* <vaadin-drawer-toggle slot="navbar [touch-optimized]"></vaadin-drawer-toggle>
|
|
43
43
|
* <h3 slot="navbar [touch-optimized]">Company Name</h3>
|
package/src/vaadin-app-layout.js
CHANGED
|
@@ -17,7 +17,7 @@ import { AppLayoutMixin } from './vaadin-app-layout-mixin.js';
|
|
|
17
17
|
/**
|
|
18
18
|
* `<vaadin-app-layout>` is a Web Component providing a quick and easy way to get a common application layout structure done.
|
|
19
19
|
*
|
|
20
|
-
* ```
|
|
20
|
+
* ```html
|
|
21
21
|
* <vaadin-app-layout primary-section="navbar|drawer">
|
|
22
22
|
* <vaadin-drawer-toggle slot="navbar [touch-optimized]"></vaadin-drawer-toggle>
|
|
23
23
|
* <h3 slot="navbar [touch-optimized]">Company Name</h3>
|
|
@@ -108,7 +108,7 @@ import { AppLayoutMixin } from './vaadin-app-layout-mixin.js';
|
|
|
108
108
|
* @mixes ElementMixin
|
|
109
109
|
* @mixes ThemableMixin
|
|
110
110
|
*/
|
|
111
|
-
class AppLayout extends AppLayoutMixin(ElementMixin(ThemableMixin(LumoInjectionMixin(
|
|
111
|
+
class AppLayout extends AppLayoutMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
|
|
112
112
|
static get is() {
|
|
113
113
|
return 'vaadin-app-layout';
|
|
114
114
|
}
|
|
@@ -10,7 +10,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
|
|
|
10
10
|
/**
|
|
11
11
|
* The Drawer Toggle component controls the drawer in App Layout component.
|
|
12
12
|
*
|
|
13
|
-
* ```
|
|
13
|
+
* ```html
|
|
14
14
|
* <vaadin-app-layout>
|
|
15
15
|
* <vaadin-drawer-toggle slot="navbar">Toggle drawer</vaadin-drawer-toggle>
|
|
16
16
|
* </vaadin-app-layout>
|
|
@@ -17,7 +17,7 @@ import { drawerToggle } from './styles/vaadin-drawer-toggle-core-styles.js';
|
|
|
17
17
|
/**
|
|
18
18
|
* The Drawer Toggle component controls the drawer in App Layout component.
|
|
19
19
|
*
|
|
20
|
-
* ```
|
|
20
|
+
* ```html
|
|
21
21
|
* <vaadin-app-layout>
|
|
22
22
|
* <vaadin-drawer-toggle slot="navbar">Toggle drawer</vaadin-drawer-toggle>
|
|
23
23
|
* </vaadin-app-layout>
|
|
@@ -29,7 +29,7 @@ import { drawerToggle } from './styles/vaadin-drawer-toggle-core-styles.js';
|
|
|
29
29
|
* @mixes DirMixin
|
|
30
30
|
* @mixes ThemableMixin
|
|
31
31
|
*/
|
|
32
|
-
class DrawerToggle extends ButtonMixin(DirMixin(ThemableMixin(LumoInjectionMixin(
|
|
32
|
+
class DrawerToggle extends ButtonMixin(DirMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
|
|
33
33
|
static get is() {
|
|
34
34
|
return 'vaadin-drawer-toggle';
|
|
35
35
|
}
|
package/web-types.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/app-layout",
|
|
4
|
-
"version": "25.0.0-
|
|
4
|
+
"version": "25.0.0-alpha9",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-app-layout",
|
|
11
|
-
"description": "`<vaadin-app-layout>` is a Web Component providing a quick and easy way to get a common application layout structure done.\n\n
|
|
11
|
+
"description": "`<vaadin-app-layout>` is a Web Component providing a quick and easy way to get a common application layout structure done.\n\n```html\n<vaadin-app-layout primary-section=\"navbar|drawer\">\n <vaadin-drawer-toggle slot=\"navbar [touch-optimized]\"></vaadin-drawer-toggle>\n <h3 slot=\"navbar [touch-optimized]\">Company Name</h3>\n <vaadin-tabs orientation=\"vertical\" slot=\"drawer\">\n <vaadin-tab>Menu item 1</vaadin-tab>\n </vaadin-tabs>\n <!-- Everything else will be the page content -->\n <div>\n <h3>Page title</h3>\n <p>Page content</p>\n </div>\n</vaadin-app-layout>\n```\n\nFor best results, the component should be added to the root level of your application (i.e., as a direct child of `<body>`).\n\nThe page should include a viewport meta tag which contains `viewport-fit=cover`, like the following:\n```\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, viewport-fit=cover\">\n```\nThis causes the viewport to be scaled to fill the device display.\nTo ensure that important content is displayed, use the provided css variables.\n```\n--safe-area-inset-top\n--safe-area-inset-right\n--safe-area-inset-bottom\n--safe-area-inset-left\n```\n\n### Styling\n\nThe following Shadow DOM parts of the `<vaadin-app-layout>` are available for styling:\n\nPart name | Description\n--------------|---------------------------------------------------------|\n`backdrop` | Backdrop covering the layout when drawer is open as an overlay\n`navbar` | Container for the navigation bar\n`drawer` | Container for the drawer area\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Component's slots\n\nThe following slots are available to be set\n\nSlot name | Description\n-------------------|---------------------------------------------------|\nno name | Default container for the page content\n`navbar ` | Container for the top navbar area\n`drawer` | Container for an application menu\n`touch-optimized` | Container for the bottom navbar area (only visible for mobile devices)\n\n#### Touch optimized\n\nApp Layout has a pseudo-slot `touch-optimized` in order to give more control of the presentation of\nelements with `slot[navbar]`. Internally, when the user is interacting with App Layout from a\ntouchscreen device, the component will search for elements with `slot[navbar touch-optimized]` and move\nthem to the bottom of the page.\n\n### Navigation\n\nAs the drawer opens as an overlay in small devices, it makes sense to close it once a navigation happens.\nIf you are using Vaadin Router, this will happen automatically unless you change the `closeDrawerOn` event name.\n\nIn order to do so, there are two options:\n- If the `vaadin-app-layout` instance is available, then `drawerOpened` can be set to `false`\n- If not, a custom event `close-overlay-drawer` can be dispatched either by calling\n `window.dispatchEvent(new CustomEvent('close-overlay-drawer'))` or by calling\n `AppLayout.dispatchCloseOverlayDrawerEvent()`\n\n### Scrolling areas\n\nBy default, the component will act with the \"body scrolling\", so on mobile (iOS Safari and Android Chrome),\nthe toolbars will collapse when a scroll happens.\n\nTo use the \"content scrolling\", in case of the content of the page relies on a pre-defined height (for instance,\nit has a `height:100%`), then the developer can set `height: 100%` to both `html` and `body`.\nThat will make the `[content]` element of app layout scrollable.\nOn this case, the toolbars on mobile device won't collapse.",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "i18n",
|
|
@@ -119,7 +119,7 @@
|
|
|
119
119
|
},
|
|
120
120
|
{
|
|
121
121
|
"name": "vaadin-drawer-toggle",
|
|
122
|
-
"description": "The Drawer Toggle component controls the drawer in App Layout component.\n\n
|
|
122
|
+
"description": "The Drawer Toggle component controls the drawer in App Layout component.\n\n```html\n<vaadin-app-layout>\n <vaadin-drawer-toggle slot=\"navbar\">Toggle drawer</vaadin-drawer-toggle>\n</vaadin-app-layout>\n```",
|
|
123
123
|
"attributes": [
|
|
124
124
|
{
|
|
125
125
|
"name": "disabled",
|
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/app-layout",
|
|
4
|
-
"version": "25.0.0-
|
|
4
|
+
"version": "25.0.0-alpha9",
|
|
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-app-layout",
|
|
19
|
-
"description": "`<vaadin-app-layout>` is a Web Component providing a quick and easy way to get a common application layout structure done.\n\n
|
|
19
|
+
"description": "`<vaadin-app-layout>` is a Web Component providing a quick and easy way to get a common application layout structure done.\n\n```html\n<vaadin-app-layout primary-section=\"navbar|drawer\">\n <vaadin-drawer-toggle slot=\"navbar [touch-optimized]\"></vaadin-drawer-toggle>\n <h3 slot=\"navbar [touch-optimized]\">Company Name</h3>\n <vaadin-tabs orientation=\"vertical\" slot=\"drawer\">\n <vaadin-tab>Menu item 1</vaadin-tab>\n </vaadin-tabs>\n <!-- Everything else will be the page content -->\n <div>\n <h3>Page title</h3>\n <p>Page content</p>\n </div>\n</vaadin-app-layout>\n```\n\nFor best results, the component should be added to the root level of your application (i.e., as a direct child of `<body>`).\n\nThe page should include a viewport meta tag which contains `viewport-fit=cover`, like the following:\n```\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, viewport-fit=cover\">\n```\nThis causes the viewport to be scaled to fill the device display.\nTo ensure that important content is displayed, use the provided css variables.\n```\n--safe-area-inset-top\n--safe-area-inset-right\n--safe-area-inset-bottom\n--safe-area-inset-left\n```\n\n### Styling\n\nThe following Shadow DOM parts of the `<vaadin-app-layout>` are available for styling:\n\nPart name | Description\n--------------|---------------------------------------------------------|\n`backdrop` | Backdrop covering the layout when drawer is open as an overlay\n`navbar` | Container for the navigation bar\n`drawer` | Container for the drawer area\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Component's slots\n\nThe following slots are available to be set\n\nSlot name | Description\n-------------------|---------------------------------------------------|\nno name | Default container for the page content\n`navbar ` | Container for the top navbar area\n`drawer` | Container for an application menu\n`touch-optimized` | Container for the bottom navbar area (only visible for mobile devices)\n\n#### Touch optimized\n\nApp Layout has a pseudo-slot `touch-optimized` in order to give more control of the presentation of\nelements with `slot[navbar]`. Internally, when the user is interacting with App Layout from a\ntouchscreen device, the component will search for elements with `slot[navbar touch-optimized]` and move\nthem to the bottom of the page.\n\n### Navigation\n\nAs the drawer opens as an overlay in small devices, it makes sense to close it once a navigation happens.\nIf you are using Vaadin Router, this will happen automatically unless you change the `closeDrawerOn` event name.\n\nIn order to do so, there are two options:\n- If the `vaadin-app-layout` instance is available, then `drawerOpened` can be set to `false`\n- If not, a custom event `close-overlay-drawer` can be dispatched either by calling\n `window.dispatchEvent(new CustomEvent('close-overlay-drawer'))` or by calling\n `AppLayout.dispatchCloseOverlayDrawerEvent()`\n\n### Scrolling areas\n\nBy default, the component will act with the \"body scrolling\", so on mobile (iOS Safari and Android Chrome),\nthe toolbars will collapse when a scroll happens.\n\nTo use the \"content scrolling\", in case of the content of the page relies on a pre-defined height (for instance,\nit has a `height:100%`), then the developer can set `height: 100%` to both `html` and `body`.\nThat will make the `[content]` element of app layout scrollable.\nOn this case, the toolbars on mobile device won't collapse.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
},
|
|
80
80
|
{
|
|
81
81
|
"name": "vaadin-drawer-toggle",
|
|
82
|
-
"description": "The Drawer Toggle component controls the drawer in App Layout component.\n\n
|
|
82
|
+
"description": "The Drawer Toggle component controls the drawer in App Layout component.\n\n```html\n<vaadin-app-layout>\n <vaadin-drawer-toggle slot=\"navbar\">Toggle drawer</vaadin-drawer-toggle>\n</vaadin-app-layout>\n```",
|
|
83
83
|
"extension": true,
|
|
84
84
|
"attributes": [
|
|
85
85
|
{
|