@vaadin/app-layout 24.0.5 → 24.1.0-alpha10
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
CHANGED
|
@@ -29,9 +29,9 @@ A web component for building common application layouts.
|
|
|
29
29
|
</vaadin-app-layout>
|
|
30
30
|
```
|
|
31
31
|
|
|
32
|
-
[<img src="https://raw.githubusercontent.com/vaadin/web-components/
|
|
32
|
+
[<img src="https://raw.githubusercontent.com/vaadin/web-components/main/packages/app-layout/screenshot.png" width="900" alt="Screenshot of vaadin-app-layout">](https://vaadin.com/docs/latest/components/app-layout)
|
|
33
33
|
|
|
34
|
-
[<img src="https://raw.githubusercontent.com/vaadin/web-components/
|
|
34
|
+
[<img src="https://raw.githubusercontent.com/vaadin/web-components/main/packages/app-layout/screenshot-mobile.png" width="350" alt="Screenshot of vaadin-app-layout on mobile">](https://vaadin.com/docs/latest/components/app-layout)
|
|
35
35
|
|
|
36
36
|
## Installation
|
|
37
37
|
|
|
@@ -51,7 +51,7 @@ import '@vaadin/app-layout/vaadin-drawer-toggle.js';
|
|
|
51
51
|
## Themes
|
|
52
52
|
|
|
53
53
|
Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
|
|
54
|
-
The [main entrypoint](https://github.com/vaadin/web-components/blob/
|
|
54
|
+
The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/app-layout/vaadin-app-layout.js) of the package uses the Lumo theme.
|
|
55
55
|
|
|
56
56
|
To use the Material theme, import the components from the `theme/material` folder:
|
|
57
57
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/app-layout",
|
|
3
|
-
"version": "24.0
|
|
3
|
+
"version": "24.1.0-alpha10",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -36,15 +36,16 @@
|
|
|
36
36
|
],
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@polymer/polymer": "^3.0.0",
|
|
39
|
-
"@vaadin/
|
|
40
|
-
"@vaadin/
|
|
41
|
-
"@vaadin/
|
|
42
|
-
"@vaadin/vaadin-
|
|
43
|
-
"@vaadin/vaadin-
|
|
39
|
+
"@vaadin/a11y-base": "24.1.0-alpha10",
|
|
40
|
+
"@vaadin/button": "24.1.0-alpha10",
|
|
41
|
+
"@vaadin/component-base": "24.1.0-alpha10",
|
|
42
|
+
"@vaadin/vaadin-lumo-styles": "24.1.0-alpha10",
|
|
43
|
+
"@vaadin/vaadin-material-styles": "24.1.0-alpha10",
|
|
44
|
+
"@vaadin/vaadin-themable-mixin": "24.1.0-alpha10"
|
|
44
45
|
},
|
|
45
46
|
"devDependencies": {
|
|
46
47
|
"@esm-bundle/chai": "^4.3.4",
|
|
47
|
-
"@vaadin/tabs": "
|
|
48
|
+
"@vaadin/tabs": "24.1.0-alpha10",
|
|
48
49
|
"@vaadin/testing-helpers": "^0.4.0",
|
|
49
50
|
"sinon": "^13.0.2"
|
|
50
51
|
},
|
|
@@ -52,5 +53,5 @@
|
|
|
52
53
|
"web-types.json",
|
|
53
54
|
"web-types.lit.json"
|
|
54
55
|
],
|
|
55
|
-
"gitHead": "
|
|
56
|
+
"gitHead": "12e39be7eb3b49c68708e8ca3de2fb22e91051a1"
|
|
56
57
|
}
|
package/src/vaadin-app-layout.js
CHANGED
|
@@ -8,9 +8,9 @@ import './detect-ios-navbar.js';
|
|
|
8
8
|
import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
|
|
9
9
|
import { afterNextRender, beforeNextRender } from '@polymer/polymer/lib/utils/render-status.js';
|
|
10
10
|
import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
|
|
11
|
+
import { FocusTrapController } from '@vaadin/a11y-base/src/focus-trap-controller.js';
|
|
11
12
|
import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
|
|
12
13
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
13
|
-
import { FocusTrapController } from '@vaadin/component-base/src/focus-trap-controller.js';
|
|
14
14
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
15
15
|
|
|
16
16
|
/**
|
|
@@ -122,14 +122,8 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
|
|
|
122
122
|
--vaadin-app-layout-touch-optimized: false;
|
|
123
123
|
--vaadin-app-layout-navbar-offset-top: var(--_vaadin-app-layout-navbar-offset-size);
|
|
124
124
|
--vaadin-app-layout-navbar-offset-bottom: var(--_vaadin-app-layout-navbar-offset-size-bottom);
|
|
125
|
-
padding-
|
|
126
|
-
padding-
|
|
127
|
-
padding-left: var(--vaadin-app-layout-navbar-offset-left);
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
:host([dir='rtl']) {
|
|
131
|
-
padding-left: 0;
|
|
132
|
-
padding-right: var(--vaadin-app-layout-navbar-offset-left);
|
|
125
|
+
padding-block: var(--vaadin-app-layout-navbar-offset-top) var(--vaadin-app-layout-navbar-offset-bottom);
|
|
126
|
+
padding-inline-start: var(--vaadin-app-layout-navbar-offset-left);
|
|
133
127
|
}
|
|
134
128
|
|
|
135
129
|
:host([hidden]),
|
|
@@ -169,21 +163,16 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
|
|
|
169
163
|
display: flex;
|
|
170
164
|
align-items: center;
|
|
171
165
|
top: 0;
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
transition: left var(--vaadin-app-layout-transition);
|
|
166
|
+
inset-inline: 0;
|
|
167
|
+
transition: inset-inline-start var(--vaadin-app-layout-transition);
|
|
175
168
|
padding-top: var(--safe-area-inset-top);
|
|
176
169
|
padding-left: var(--safe-area-inset-left);
|
|
177
170
|
padding-right: var(--safe-area-inset-right);
|
|
178
171
|
z-index: 1;
|
|
179
172
|
}
|
|
180
173
|
|
|
181
|
-
:host(
|
|
182
|
-
|
|
183
|
-
}
|
|
184
|
-
|
|
185
|
-
:host([dir='rtl'][primary-section='drawer'][drawer-opened]:not([overlay])) [part='navbar'] {
|
|
186
|
-
right: var(--vaadin-app-layout-drawer-offset-left, 0);
|
|
174
|
+
:host([primary-section='drawer'][drawer-opened]:not([overlay])) [part='navbar'] {
|
|
175
|
+
inset-inline-start: var(--vaadin-app-layout-drawer-offset-left, 0);
|
|
187
176
|
}
|
|
188
177
|
|
|
189
178
|
:host([primary-section='drawer']) [part='drawer'] {
|
|
@@ -200,9 +189,8 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
|
|
|
200
189
|
overflow: auto;
|
|
201
190
|
position: fixed;
|
|
202
191
|
top: var(--vaadin-app-layout-navbar-offset-top, 0);
|
|
203
|
-
right: auto;
|
|
204
192
|
bottom: var(--vaadin-app-layout-navbar-offset-bottom, var(--vaadin-viewport-offset-bottom, 0));
|
|
205
|
-
|
|
193
|
+
inset-inline: var(--vaadin-app-layout-navbar-offset-left, 0) auto;
|
|
206
194
|
transition: transform var(--vaadin-app-layout-transition), visibility var(--vaadin-app-layout-transition);
|
|
207
195
|
transform: translateX(-100%);
|
|
208
196
|
max-width: 90%;
|
|
@@ -234,10 +222,7 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
|
|
|
234
222
|
|
|
235
223
|
:host([overlay]) [part='backdrop'] {
|
|
236
224
|
position: fixed;
|
|
237
|
-
|
|
238
|
-
right: 0;
|
|
239
|
-
bottom: 0;
|
|
240
|
-
left: 0;
|
|
225
|
+
inset: 0;
|
|
241
226
|
pointer-events: none;
|
|
242
227
|
transition: opacity var(--vaadin-app-layout-transition);
|
|
243
228
|
-webkit-tap-highlight-color: transparent;
|
|
@@ -259,25 +244,15 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
|
|
|
259
244
|
}
|
|
260
245
|
|
|
261
246
|
:host([dir='rtl']) [part='drawer'] {
|
|
262
|
-
left: auto;
|
|
263
|
-
right: var(--vaadin-app-layout-navbar-offset-start, 0);
|
|
264
247
|
transform: translateX(100%);
|
|
265
248
|
}
|
|
266
249
|
|
|
267
|
-
:host([dir='rtl']) [part='navbar'] {
|
|
268
|
-
transition: right var(--vaadin-app-layout-transition);
|
|
269
|
-
}
|
|
270
|
-
|
|
271
250
|
:host([dir='rtl'][drawer-opened]) [part='drawer'] {
|
|
272
251
|
transform: translateX(0%);
|
|
273
252
|
}
|
|
274
253
|
|
|
275
|
-
:host(
|
|
276
|
-
padding-
|
|
277
|
-
}
|
|
278
|
-
|
|
279
|
-
:host([dir='rtl'][drawer-opened]:not([overlay])) {
|
|
280
|
-
padding-right: var(--vaadin-app-layout-drawer-offset-left);
|
|
254
|
+
:host([drawer-opened]:not([overlay])) {
|
|
255
|
+
padding-inline-start: var(--vaadin-app-layout-drawer-offset-left);
|
|
281
256
|
}
|
|
282
257
|
|
|
283
258
|
@media (max-width: 800px), (max-height: 600px) {
|
|
@@ -20,12 +20,8 @@ registerStyles(
|
|
|
20
20
|
background: var(--material-background-color);
|
|
21
21
|
}
|
|
22
22
|
|
|
23
|
-
|
|
24
|
-
border-
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
:host([dir='rtl']) [part='drawer'] {
|
|
28
|
-
border-left: 1px solid var(--material-secondary-background-color);
|
|
23
|
+
[part='drawer'] {
|
|
24
|
+
border-inline-end: 1px solid var(--material-secondary-background-color);
|
|
29
25
|
}
|
|
30
26
|
|
|
31
27
|
:host([primary-section='drawer']) [part='drawer'] {
|
package/web-types.json
CHANGED