@vaadin/app-layout 24.8.4 → 25.0.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 +0 -26
- package/package.json +13 -14
- package/src/safe-area-inset.js +6 -0
- package/src/styles/vaadin-app-layout-base-styles.js +191 -0
- package/src/styles/vaadin-app-layout-core-styles.d.ts +8 -0
- package/src/{vaadin-app-layout-styles.js → styles/vaadin-app-layout-core-styles.js} +8 -8
- package/src/styles/vaadin-drawer-toggle-base-styles.js +27 -0
- package/src/styles/vaadin-drawer-toggle-core-styles.d.ts +8 -0
- package/src/{vaadin-drawer-toggle-styles.js → styles/vaadin-drawer-toggle-core-styles.js} +1 -1
- package/src/vaadin-app-layout-mixin.js +3 -3
- package/src/vaadin-app-layout.d.ts +2 -3
- package/src/vaadin-app-layout.js +21 -18
- package/src/vaadin-drawer-toggle.d.ts +1 -1
- package/src/vaadin-drawer-toggle.js +23 -21
- package/web-types.json +3 -3
- package/web-types.lit.json +3 -3
- package/src/vaadin-lit-app-layout.js +0 -59
- package/src/vaadin-lit-drawer-toggle.js +0 -87
- package/theme/lumo/vaadin-lit-app-layout.d.ts +0 -2
- package/theme/lumo/vaadin-lit-app-layout.js +0 -2
- package/theme/lumo/vaadin-lit-drawer-toggle.d.ts +0 -2
- package/theme/lumo/vaadin-lit-drawer-toggle.js +0 -2
- package/theme/material/vaadin-app-layout-styles.d.ts +0 -3
- package/theme/material/vaadin-app-layout-styles.js +0 -53
- package/theme/material/vaadin-app-layout.d.ts +0 -2
- package/theme/material/vaadin-app-layout.js +0 -2
- package/theme/material/vaadin-drawer-toggle-styles.d.ts +0 -1
- package/theme/material/vaadin-drawer-toggle-styles.js +0 -39
- package/theme/material/vaadin-drawer-toggle.d.ts +0 -2
- package/theme/material/vaadin-drawer-toggle.js +0 -2
- package/theme/material/vaadin-lit-app-layout.d.ts +0 -2
- package/theme/material/vaadin-lit-app-layout.js +0 -2
- package/theme/material/vaadin-lit-drawer-toggle.d.ts +0 -2
- package/theme/material/vaadin-lit-drawer-toggle.js +0 -2
- package/vaadin-lit-app-layout.d.ts +0 -1
- package/vaadin-lit-app-layout.js +0 -2
- package/vaadin-lit-drawer-toggle.d.ts +0 -1
- package/vaadin-lit-drawer-toggle.js +0 -2
- /package/src/{vaadin-app-layout-styles.d.ts → styles/vaadin-app-layout-base-styles.d.ts} +0 -0
- /package/src/{vaadin-drawer-toggle-styles.d.ts → styles/vaadin-drawer-toggle-base-styles.d.ts} +0 -0
package/README.md
CHANGED
|
@@ -47,32 +47,6 @@ import '@vaadin/app-layout';
|
|
|
47
47
|
import '@vaadin/app-layout/vaadin-drawer-toggle.js';
|
|
48
48
|
```
|
|
49
49
|
|
|
50
|
-
## Themes
|
|
51
|
-
|
|
52
|
-
Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
|
|
53
|
-
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.
|
|
54
|
-
|
|
55
|
-
To use the Material theme, import the components from the `theme/material` folder:
|
|
56
|
-
|
|
57
|
-
```js
|
|
58
|
-
import '@vaadin/app-layout/theme/material/vaadin-app-layout.js';
|
|
59
|
-
import '@vaadin/app-layout/theme/material/vaadin-drawer-toggle.js';
|
|
60
|
-
```
|
|
61
|
-
|
|
62
|
-
You can also import the Lumo version of the components explicitly:
|
|
63
|
-
|
|
64
|
-
```js
|
|
65
|
-
import '@vaadin/app-layout/theme/lumo/vaadin-app-layout.js';
|
|
66
|
-
import '@vaadin/app-layout/theme/lumo/vaadin-drawer-toggle.js';
|
|
67
|
-
```
|
|
68
|
-
|
|
69
|
-
Finally, you can import the un-themed components from the `src` folder to get a minimal starting point:
|
|
70
|
-
|
|
71
|
-
```js
|
|
72
|
-
import '@vaadin/app-layout/src/vaadin-app-layout.js';
|
|
73
|
-
import '@vaadin/app-layout/src/vaadin-drawer-toggle.js';
|
|
74
|
-
```
|
|
75
|
-
|
|
76
50
|
## Contributing
|
|
77
51
|
|
|
78
52
|
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/app-layout",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "25.0.0-alpha10",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -21,6 +21,8 @@
|
|
|
21
21
|
"type": "module",
|
|
22
22
|
"files": [
|
|
23
23
|
"src",
|
|
24
|
+
"!src/styles/*-base-styles.d.ts",
|
|
25
|
+
"!src/styles/*-base-styles.js",
|
|
24
26
|
"theme",
|
|
25
27
|
"vaadin-*.d.ts",
|
|
26
28
|
"vaadin-*.js",
|
|
@@ -31,29 +33,26 @@
|
|
|
31
33
|
"Vaadin",
|
|
32
34
|
"vaadin-app-layout",
|
|
33
35
|
"web-components",
|
|
34
|
-
"web-component"
|
|
35
|
-
"polymer"
|
|
36
|
+
"web-component"
|
|
36
37
|
],
|
|
37
38
|
"dependencies": {
|
|
38
39
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
39
|
-
"@
|
|
40
|
-
"@vaadin/
|
|
41
|
-
"@vaadin/
|
|
42
|
-
"@vaadin/
|
|
43
|
-
"@vaadin/vaadin-
|
|
44
|
-
"@vaadin/vaadin-material-styles": "~24.8.4",
|
|
45
|
-
"@vaadin/vaadin-themable-mixin": "~24.8.4",
|
|
40
|
+
"@vaadin/a11y-base": "25.0.0-alpha10",
|
|
41
|
+
"@vaadin/button": "25.0.0-alpha10",
|
|
42
|
+
"@vaadin/component-base": "25.0.0-alpha10",
|
|
43
|
+
"@vaadin/vaadin-lumo-styles": "25.0.0-alpha10",
|
|
44
|
+
"@vaadin/vaadin-themable-mixin": "25.0.0-alpha10",
|
|
46
45
|
"lit": "^3.0.0"
|
|
47
46
|
},
|
|
48
47
|
"devDependencies": {
|
|
49
|
-
"@vaadin/chai-plugins": "
|
|
50
|
-
"@vaadin/test-runner-commands": "
|
|
51
|
-
"@vaadin/testing-helpers": "^
|
|
48
|
+
"@vaadin/chai-plugins": "25.0.0-alpha10",
|
|
49
|
+
"@vaadin/test-runner-commands": "25.0.0-alpha10",
|
|
50
|
+
"@vaadin/testing-helpers": "^2.0.0",
|
|
52
51
|
"sinon": "^18.0.0"
|
|
53
52
|
},
|
|
54
53
|
"web-types": [
|
|
55
54
|
"web-types.json",
|
|
56
55
|
"web-types.lit.json"
|
|
57
56
|
],
|
|
58
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "6cc6c94079e805fa5b2f0af4dbf3b2a7485e57d0"
|
|
59
58
|
}
|
package/src/safe-area-inset.js
CHANGED
|
@@ -0,0 +1,191 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright (c) 2018 - 2025 Vaadin Ltd.
|
|
4
|
+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
+
*/
|
|
6
|
+
import '@vaadin/component-base/src/style-props.js';
|
|
7
|
+
import { css } from 'lit';
|
|
8
|
+
|
|
9
|
+
export const appLayoutStyles = css`
|
|
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
|
+
}
|
|
23
|
+
|
|
24
|
+
:host([hidden]),
|
|
25
|
+
[hidden] {
|
|
26
|
+
display: none !important;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
30
|
+
:host(:not([no-anim])) {
|
|
31
|
+
--vaadin-app-layout-transition-duration: 200ms;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
:host([drawer-opened]) {
|
|
36
|
+
--vaadin-app-layout-drawer-offset-left: var(--_vaadin-app-layout-drawer-offset-size);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
:host([overlay]) {
|
|
40
|
+
--vaadin-app-layout-drawer-offset-left: 0;
|
|
41
|
+
--vaadin-app-layout-navbar-offset-left: 0;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
:host(:not([no-scroll])) [content] {
|
|
45
|
+
overflow: auto;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
[content] {
|
|
49
|
+
height: 100%;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
@media (pointer: coarse) and (max-width: 800px) and (min-height: 500px) {
|
|
53
|
+
:host {
|
|
54
|
+
--vaadin-app-layout-touch-optimized: true;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
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
|
+
}
|
|
80
|
+
|
|
81
|
+
:host([primary-section='drawer'][drawer-opened]:not([overlay])) [part='navbar'] {
|
|
82
|
+
inset-inline-start: var(--vaadin-app-layout-drawer-offset-left, 0);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
:host([primary-section='drawer']) [part='drawer'] {
|
|
86
|
+
top: 0;
|
|
87
|
+
}
|
|
88
|
+
|
|
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
|
+
}
|
|
98
|
+
|
|
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
|
+
}
|
|
121
|
+
|
|
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
|
+
}
|
|
128
|
+
|
|
129
|
+
[part='backdrop'] {
|
|
130
|
+
background: var(--vaadin-overlay-backdrop-background, rgba(0, 0, 0, 0.5));
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
:host(:not([drawer-opened])) [part='backdrop'] {
|
|
134
|
+
opacity: 0 !important;
|
|
135
|
+
}
|
|
136
|
+
|
|
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
|
+
}
|
|
144
|
+
|
|
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
|
+
}
|
|
150
|
+
|
|
151
|
+
:host([overlay]) [part='drawer'],
|
|
152
|
+
:host([overlay]) [part='backdrop'] {
|
|
153
|
+
z-index: 2;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
:host([drawer-opened][overlay]) [part='backdrop'] {
|
|
157
|
+
pointer-events: auto;
|
|
158
|
+
touch-action: manipulation;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
:host([dir='rtl']) [part='drawer'] {
|
|
162
|
+
transform: translateX(100%);
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
:host([dir='rtl'][drawer-opened]) [part='drawer'] {
|
|
166
|
+
transform: translateX(0%);
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
:host([drawer-opened]:not([overlay])) {
|
|
170
|
+
padding-inline-start: var(--vaadin-app-layout-drawer-offset-left);
|
|
171
|
+
}
|
|
172
|
+
|
|
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);
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
|
|
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
|
+
}
|
|
185
|
+
|
|
186
|
+
@media (forced-colors: active) {
|
|
187
|
+
:host([overlay]) [part='drawer'] {
|
|
188
|
+
border: 3px solid;
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
`;
|
|
@@ -3,15 +3,15 @@
|
|
|
3
3
|
* Copyright (c) 2018 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
|
-
import { css } from '
|
|
6
|
+
import { css } from 'lit';
|
|
7
7
|
|
|
8
8
|
export const appLayoutStyles = css`
|
|
9
9
|
:host {
|
|
10
10
|
display: block;
|
|
11
11
|
box-sizing: border-box;
|
|
12
12
|
height: 100%;
|
|
13
|
-
--vaadin-app-layout-transition: 200ms;
|
|
14
|
-
transition: padding var(--vaadin-app-layout-transition);
|
|
13
|
+
--vaadin-app-layout-transition-duration: 200ms;
|
|
14
|
+
transition: padding var(--vaadin-app-layout-transition-duration);
|
|
15
15
|
--_vaadin-app-layout-drawer-width: var(--vaadin-app-layout-drawer-width, 16em);
|
|
16
16
|
--vaadin-app-layout-touch-optimized: false;
|
|
17
17
|
--vaadin-app-layout-navbar-offset-top: var(--_vaadin-app-layout-navbar-offset-size);
|
|
@@ -26,7 +26,7 @@ export const appLayoutStyles = css`
|
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
:host([no-anim]) {
|
|
29
|
-
--vaadin-app-layout-transition:
|
|
29
|
+
--vaadin-app-layout-transition-duration: 0s !important;
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
:host([drawer-opened]) {
|
|
@@ -58,7 +58,7 @@ export const appLayoutStyles = css`
|
|
|
58
58
|
align-items: center;
|
|
59
59
|
top: 0;
|
|
60
60
|
inset-inline: 0;
|
|
61
|
-
transition: inset-inline-start var(--vaadin-app-layout-transition);
|
|
61
|
+
transition: inset-inline-start var(--vaadin-app-layout-transition-duration);
|
|
62
62
|
padding-top: var(--safe-area-inset-top);
|
|
63
63
|
padding-left: var(--safe-area-inset-left);
|
|
64
64
|
padding-right: var(--safe-area-inset-right);
|
|
@@ -86,8 +86,8 @@ export const appLayoutStyles = css`
|
|
|
86
86
|
bottom: var(--vaadin-app-layout-navbar-offset-bottom, var(--vaadin-viewport-offset-bottom, 0));
|
|
87
87
|
inset-inline: var(--vaadin-app-layout-navbar-offset-left, 0) auto;
|
|
88
88
|
transition:
|
|
89
|
-
transform var(--vaadin-app-layout-transition),
|
|
90
|
-
visibility var(--vaadin-app-layout-transition);
|
|
89
|
+
transform var(--vaadin-app-layout-transition-duration),
|
|
90
|
+
visibility var(--vaadin-app-layout-transition-duration);
|
|
91
91
|
transform: translateX(-100%);
|
|
92
92
|
max-width: 90%;
|
|
93
93
|
width: var(--_vaadin-app-layout-drawer-width);
|
|
@@ -120,7 +120,7 @@ export const appLayoutStyles = css`
|
|
|
120
120
|
position: fixed;
|
|
121
121
|
inset: 0;
|
|
122
122
|
pointer-events: none;
|
|
123
|
-
transition: opacity var(--vaadin-app-layout-transition);
|
|
123
|
+
transition: opacity var(--vaadin-app-layout-transition-duration);
|
|
124
124
|
-webkit-tap-highlight-color: transparent;
|
|
125
125
|
}
|
|
126
126
|
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright (c) 2018 - 2025 Vaadin Ltd.
|
|
4
|
+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
+
*/
|
|
6
|
+
import '@vaadin/component-base/src/style-props.js';
|
|
7
|
+
import { css } from 'lit';
|
|
8
|
+
|
|
9
|
+
export const drawerToggle = css`
|
|
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
|
+
}
|
|
17
|
+
|
|
18
|
+
[hidden] {
|
|
19
|
+
display: none !important;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
@media (forced-colors: active) {
|
|
23
|
+
[part='icon'] {
|
|
24
|
+
background: CanvasText;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
`;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Copyright (c) 2018 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
|
-
import { css } from '
|
|
6
|
+
import { css } from 'lit';
|
|
7
7
|
|
|
8
8
|
export const drawerToggle = css`
|
|
9
9
|
:host {
|
|
@@ -380,8 +380,8 @@ export const AppLayoutMixin = (superclass) =>
|
|
|
380
380
|
/**
|
|
381
381
|
* Returns a promise that resolves when the drawer opening/closing CSS transition ends.
|
|
382
382
|
*
|
|
383
|
-
* The method relies on the `--vaadin-app-layout-transition` CSS variable to detect whether
|
|
384
|
-
* the drawer has a CSS transition that needs to be awaited. If the CSS variable equals `
|
|
383
|
+
* The method relies on the `--vaadin-app-layout-transition-duration` CSS variable to detect whether
|
|
384
|
+
* the drawer has a CSS transition that needs to be awaited. If the CSS variable equals `0s`,
|
|
385
385
|
* the promise resolves immediately.
|
|
386
386
|
*
|
|
387
387
|
* @return {Promise}
|
|
@@ -389,7 +389,7 @@ export const AppLayoutMixin = (superclass) =>
|
|
|
389
389
|
*/
|
|
390
390
|
__drawerTransitionComplete() {
|
|
391
391
|
return new Promise((resolve) => {
|
|
392
|
-
if (this._getCustomPropertyValue('--vaadin-app-layout-transition') === '
|
|
392
|
+
if (this._getCustomPropertyValue('--vaadin-app-layout-transition-duration') === '0s') {
|
|
393
393
|
resolve();
|
|
394
394
|
return;
|
|
395
395
|
}
|
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
* Copyright (c) 2018 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
|
-
import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
|
|
7
6
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
8
7
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
9
8
|
import { AppLayoutMixin } from './vaadin-app-layout-mixin.js';
|
|
@@ -38,7 +37,7 @@ export type AppLayoutEventMap = AppLayoutCustomEventMap & HTMLElementEventMap;
|
|
|
38
37
|
/**
|
|
39
38
|
* `<vaadin-app-layout>` is a Web Component providing a quick and easy way to get a common application layout structure done.
|
|
40
39
|
*
|
|
41
|
-
* ```
|
|
40
|
+
* ```html
|
|
42
41
|
* <vaadin-app-layout primary-section="navbar|drawer">
|
|
43
42
|
* <vaadin-drawer-toggle slot="navbar [touch-optimized]"></vaadin-drawer-toggle>
|
|
44
43
|
* <h3 slot="navbar [touch-optimized]">Company Name</h3>
|
|
@@ -123,7 +122,7 @@ export type AppLayoutEventMap = AppLayoutCustomEventMap & HTMLElementEventMap;
|
|
|
123
122
|
* @fires {CustomEvent} overlay-changed - Fired when the `overlay` property changes.
|
|
124
123
|
* @fires {CustomEvent} primary-section-changed - Fired when the `primarySection` property changes.
|
|
125
124
|
*/
|
|
126
|
-
declare class AppLayout extends AppLayoutMixin(ElementMixin(ThemableMixin(
|
|
125
|
+
declare class AppLayout extends AppLayoutMixin(ElementMixin(ThemableMixin(HTMLElement))) {
|
|
127
126
|
/**
|
|
128
127
|
* Helper static method that dispatches a `close-overlay-drawer` event
|
|
129
128
|
*/
|
package/src/vaadin-app-layout.js
CHANGED
|
@@ -5,20 +5,19 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import './detect-ios-navbar.js';
|
|
7
7
|
import './safe-area-inset.js';
|
|
8
|
-
import { html,
|
|
9
|
-
import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
|
|
8
|
+
import { html, LitElement } from 'lit';
|
|
10
9
|
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
11
10
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
12
|
-
import {
|
|
11
|
+
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
12
|
+
import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
|
|
13
|
+
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
14
|
+
import { appLayoutStyles } from './styles/vaadin-app-layout-core-styles.js';
|
|
13
15
|
import { AppLayoutMixin } from './vaadin-app-layout-mixin.js';
|
|
14
|
-
import { appLayoutStyles } from './vaadin-app-layout-styles.js';
|
|
15
|
-
|
|
16
|
-
registerStyles('vaadin-app-layout', appLayoutStyles, { moduleId: 'vaadin-app-layout-styles' });
|
|
17
16
|
|
|
18
17
|
/**
|
|
19
18
|
* `<vaadin-app-layout>` is a Web Component providing a quick and easy way to get a common application layout structure done.
|
|
20
19
|
*
|
|
21
|
-
* ```
|
|
20
|
+
* ```html
|
|
22
21
|
* <vaadin-app-layout primary-section="navbar|drawer">
|
|
23
22
|
* <vaadin-drawer-toggle slot="navbar [touch-optimized]"></vaadin-drawer-toggle>
|
|
24
23
|
* <h3 slot="navbar [touch-optimized]">Company Name</h3>
|
|
@@ -108,17 +107,25 @@ registerStyles('vaadin-app-layout', appLayoutStyles, { moduleId: 'vaadin-app-lay
|
|
|
108
107
|
* @mixes AppLayoutMixin
|
|
109
108
|
* @mixes ElementMixin
|
|
110
109
|
* @mixes ThemableMixin
|
|
111
|
-
* @mixes ControllerMixin
|
|
112
110
|
*/
|
|
113
|
-
class AppLayout extends AppLayoutMixin(ElementMixin(ThemableMixin(
|
|
114
|
-
static get
|
|
111
|
+
class AppLayout extends AppLayoutMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
|
|
112
|
+
static get is() {
|
|
113
|
+
return 'vaadin-app-layout';
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
static get styles() {
|
|
117
|
+
return appLayoutStyles;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
/** @protected */
|
|
121
|
+
render() {
|
|
115
122
|
return html`
|
|
116
123
|
<div part="navbar" id="navbarTop">
|
|
117
|
-
<slot name="navbar"
|
|
124
|
+
<slot name="navbar" @slotchange="${this._updateTouchOptimizedMode}"></slot>
|
|
118
125
|
</div>
|
|
119
|
-
<div part="backdrop"
|
|
126
|
+
<div part="backdrop" @click="${this._onBackdropClick}" @touchend="${this._onBackdropTouchend}"></div>
|
|
120
127
|
<div part="drawer" id="drawer">
|
|
121
|
-
<slot name="drawer" id="drawerSlot"
|
|
128
|
+
<slot name="drawer" id="drawerSlot" @slotchange="${this._updateDrawerSize}"></slot>
|
|
122
129
|
</div>
|
|
123
130
|
<div content>
|
|
124
131
|
<slot></slot>
|
|
@@ -127,14 +134,10 @@ class AppLayout extends AppLayoutMixin(ElementMixin(ThemableMixin(ControllerMixi
|
|
|
127
134
|
<slot name="navbar-bottom"></slot>
|
|
128
135
|
</div>
|
|
129
136
|
<div hidden>
|
|
130
|
-
<slot id="touchSlot" name="navbar touch-optimized"
|
|
137
|
+
<slot id="touchSlot" name="navbar touch-optimized" @slotchange="${this._updateTouchOptimizedMode}"></slot>
|
|
131
138
|
</div>
|
|
132
139
|
`;
|
|
133
140
|
}
|
|
134
|
-
|
|
135
|
-
static get is() {
|
|
136
|
-
return 'vaadin-app-layout';
|
|
137
|
-
}
|
|
138
141
|
}
|
|
139
142
|
|
|
140
143
|
defineCustomElement(AppLayout);
|
|
@@ -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>
|
|
@@ -3,21 +3,21 @@
|
|
|
3
3
|
* Copyright (c) 2018 - 2025 Vaadin Ltd.
|
|
4
4
|
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
5
|
*/
|
|
6
|
-
import { html,
|
|
7
|
-
import { buttonStyles } from '@vaadin/button/src/vaadin-button-core-styles.js';
|
|
6
|
+
import { html, LitElement } from 'lit';
|
|
7
|
+
import { buttonStyles } from '@vaadin/button/src/styles/vaadin-button-core-styles.js';
|
|
8
8
|
import { ButtonMixin } from '@vaadin/button/src/vaadin-button-mixin.js';
|
|
9
9
|
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
10
10
|
import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
|
|
11
11
|
import { isEmptyTextNode } from '@vaadin/component-base/src/dom-utils.js';
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
|
|
15
|
-
|
|
12
|
+
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
13
|
+
import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
|
|
14
|
+
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
15
|
+
import { drawerToggle } from './styles/vaadin-drawer-toggle-core-styles.js';
|
|
16
16
|
|
|
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,26 +29,22 @@ registerStyles('vaadin-drawer-toggle', [buttonStyles, drawerToggle], { moduleId:
|
|
|
29
29
|
* @mixes DirMixin
|
|
30
30
|
* @mixes ThemableMixin
|
|
31
31
|
*/
|
|
32
|
-
class DrawerToggle extends ButtonMixin(DirMixin(ThemableMixin(
|
|
33
|
-
static get template() {
|
|
34
|
-
return html`
|
|
35
|
-
<slot id="slot">
|
|
36
|
-
<div part="icon"></div>
|
|
37
|
-
</slot>
|
|
38
|
-
<div part="icon" hidden$="[[!_showFallbackIcon]]"></div>
|
|
39
|
-
`;
|
|
40
|
-
}
|
|
41
|
-
|
|
32
|
+
class DrawerToggle extends ButtonMixin(DirMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
|
|
42
33
|
static get is() {
|
|
43
34
|
return 'vaadin-drawer-toggle';
|
|
44
35
|
}
|
|
45
36
|
|
|
37
|
+
static get styles() {
|
|
38
|
+
return [buttonStyles, drawerToggle];
|
|
39
|
+
}
|
|
40
|
+
|
|
46
41
|
static get properties() {
|
|
47
42
|
return {
|
|
48
43
|
ariaLabel: {
|
|
49
44
|
type: String,
|
|
50
45
|
value: 'Toggle navigation panel',
|
|
51
46
|
reflectToAttribute: true,
|
|
47
|
+
sync: true,
|
|
52
48
|
},
|
|
53
49
|
|
|
54
50
|
/** @private */
|
|
@@ -67,15 +63,21 @@ class DrawerToggle extends ButtonMixin(DirMixin(ThemableMixin(PolymerElement)))
|
|
|
67
63
|
});
|
|
68
64
|
}
|
|
69
65
|
|
|
66
|
+
/** @protected */
|
|
67
|
+
render() {
|
|
68
|
+
return html`
|
|
69
|
+
<slot id="slot" @slotchange="${this._toggleFallbackIcon}">
|
|
70
|
+
<div part="icon"></div>
|
|
71
|
+
</slot>
|
|
72
|
+
<div part="icon" ?hidden="${!this._showFallbackIcon}"></div>
|
|
73
|
+
`;
|
|
74
|
+
}
|
|
75
|
+
|
|
70
76
|
/** @protected */
|
|
71
77
|
ready() {
|
|
72
78
|
super.ready();
|
|
73
79
|
|
|
74
80
|
this._toggleFallbackIcon();
|
|
75
|
-
|
|
76
|
-
this.$.slot.addEventListener('slotchange', () => {
|
|
77
|
-
this._toggleFallbackIcon();
|
|
78
|
-
});
|
|
79
81
|
}
|
|
80
82
|
|
|
81
83
|
/** @private */
|
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": "
|
|
4
|
+
"version": "25.0.0-alpha10",
|
|
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": "
|
|
4
|
+
"version": "25.0.0-alpha10",
|
|
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
|
{
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2018 - 2025 Vaadin Ltd.
|
|
4
|
-
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
-
*/
|
|
6
|
-
import './detect-ios-navbar.js';
|
|
7
|
-
import './safe-area-inset.js';
|
|
8
|
-
import { html, LitElement } from 'lit';
|
|
9
|
-
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
10
|
-
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
11
|
-
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
12
|
-
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
13
|
-
import { AppLayoutMixin } from './vaadin-app-layout-mixin.js';
|
|
14
|
-
import { appLayoutStyles } from './vaadin-app-layout-styles.js';
|
|
15
|
-
|
|
16
|
-
/**
|
|
17
|
-
* LitElement based version of `<vaadin-app-layout>` web component.
|
|
18
|
-
*
|
|
19
|
-
* ## Disclaimer
|
|
20
|
-
*
|
|
21
|
-
* This component is an experiment and not yet a part of Vaadin platform.
|
|
22
|
-
* There is no ETA regarding specific Vaadin version where it'll land.
|
|
23
|
-
* Feel free to try this code in your apps as per Apache 2.0 license.
|
|
24
|
-
*/
|
|
25
|
-
class AppLayout extends AppLayoutMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
|
|
26
|
-
static get is() {
|
|
27
|
-
return 'vaadin-app-layout';
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
static get styles() {
|
|
31
|
-
return appLayoutStyles;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
/** @protected */
|
|
35
|
-
render() {
|
|
36
|
-
return html`
|
|
37
|
-
<div part="navbar" id="navbarTop">
|
|
38
|
-
<slot name="navbar" @slotchange="${this._updateTouchOptimizedMode}"></slot>
|
|
39
|
-
</div>
|
|
40
|
-
<div part="backdrop" @click="${this._onBackdropClick}" @touchend="${this._onBackdropTouchend}"></div>
|
|
41
|
-
<div part="drawer" id="drawer">
|
|
42
|
-
<slot name="drawer" id="drawerSlot" @slotchange="${this._updateDrawerSize}"></slot>
|
|
43
|
-
</div>
|
|
44
|
-
<div content>
|
|
45
|
-
<slot></slot>
|
|
46
|
-
</div>
|
|
47
|
-
<div part="navbar" id="navbarBottom" bottom hidden>
|
|
48
|
-
<slot name="navbar-bottom"></slot>
|
|
49
|
-
</div>
|
|
50
|
-
<div hidden>
|
|
51
|
-
<slot id="touchSlot" name="navbar touch-optimized" @slotchange="${this._updateTouchOptimizedMode}"></slot>
|
|
52
|
-
</div>
|
|
53
|
-
`;
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
defineCustomElement(AppLayout);
|
|
58
|
-
|
|
59
|
-
export { AppLayout };
|
|
@@ -1,87 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2018 - 2025 Vaadin Ltd.
|
|
4
|
-
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
-
*/
|
|
6
|
-
import { html, LitElement } from 'lit';
|
|
7
|
-
import { buttonStyles } from '@vaadin/button/src/vaadin-button-core-styles.js';
|
|
8
|
-
import { ButtonMixin } from '@vaadin/button/src/vaadin-button-mixin.js';
|
|
9
|
-
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
10
|
-
import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
|
|
11
|
-
import { isEmptyTextNode } from '@vaadin/component-base/src/dom-utils.js';
|
|
12
|
-
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
13
|
-
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
14
|
-
import { drawerToggle } from './vaadin-drawer-toggle-styles.js';
|
|
15
|
-
|
|
16
|
-
/**
|
|
17
|
-
* LitElement based version of `<vaadin-drawer-toggle>` web component.
|
|
18
|
-
*
|
|
19
|
-
* ## Disclaimer
|
|
20
|
-
*
|
|
21
|
-
* This component is an experiment and not yet a part of Vaadin platform.
|
|
22
|
-
* There is no ETA regarding specific Vaadin version where it'll land.
|
|
23
|
-
* Feel free to try this code in your apps as per Apache 2.0 license.
|
|
24
|
-
*/
|
|
25
|
-
class DrawerToggle extends ButtonMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))) {
|
|
26
|
-
static get is() {
|
|
27
|
-
return 'vaadin-drawer-toggle';
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
static get styles() {
|
|
31
|
-
return [buttonStyles, drawerToggle];
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
static get properties() {
|
|
35
|
-
return {
|
|
36
|
-
ariaLabel: {
|
|
37
|
-
type: String,
|
|
38
|
-
value: 'Toggle navigation panel',
|
|
39
|
-
reflectToAttribute: true,
|
|
40
|
-
sync: true,
|
|
41
|
-
},
|
|
42
|
-
|
|
43
|
-
/** @private */
|
|
44
|
-
_showFallbackIcon: {
|
|
45
|
-
type: Boolean,
|
|
46
|
-
value: false,
|
|
47
|
-
},
|
|
48
|
-
};
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
constructor() {
|
|
52
|
-
super();
|
|
53
|
-
|
|
54
|
-
this.addEventListener('click', () => {
|
|
55
|
-
this.dispatchEvent(new CustomEvent('drawer-toggle-click', { bubbles: true, composed: true }));
|
|
56
|
-
});
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
/** @protected */
|
|
60
|
-
render() {
|
|
61
|
-
return html`
|
|
62
|
-
<slot id="slot" @slotchange="${this._toggleFallbackIcon}">
|
|
63
|
-
<div part="icon"></div>
|
|
64
|
-
</slot>
|
|
65
|
-
<div part="icon" ?hidden="${!this._showFallbackIcon}"></div>
|
|
66
|
-
`;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
/** @protected */
|
|
70
|
-
ready() {
|
|
71
|
-
super.ready();
|
|
72
|
-
|
|
73
|
-
this._toggleFallbackIcon();
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
/** @private */
|
|
77
|
-
_toggleFallbackIcon() {
|
|
78
|
-
const nodes = this.$.slot.assignedNodes();
|
|
79
|
-
|
|
80
|
-
// Show fallback icon if there are 1-2 empty text nodes assigned to the default slot.
|
|
81
|
-
this._showFallbackIcon = nodes.length > 0 && nodes.every((node) => isEmptyTextNode(node));
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
defineCustomElement(DrawerToggle);
|
|
86
|
-
|
|
87
|
-
export { DrawerToggle };
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
import '@vaadin/vaadin-material-styles/color.js';
|
|
2
|
-
import '@vaadin/vaadin-material-styles/shadow.js';
|
|
3
|
-
import '@vaadin/vaadin-material-styles/typography.js';
|
|
4
|
-
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
5
|
-
|
|
6
|
-
registerStyles(
|
|
7
|
-
'vaadin-app-layout',
|
|
8
|
-
css`
|
|
9
|
-
:host {
|
|
10
|
-
background-color: var(--material-background-color);
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
[part='navbar'] {
|
|
14
|
-
padding: 0.25em 0.5em;
|
|
15
|
-
background: var(--vaadin-app-layout-navbar-background, var(--material-secondary-background-color));
|
|
16
|
-
box-shadow: var(--material-shadow-elevation-8dp);
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
[part='drawer'] {
|
|
20
|
-
background: var(--material-background-color);
|
|
21
|
-
border-inline-end: 1px solid var(--material-secondary-background-color);
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
:host([primary-section='drawer']) [part='drawer'] {
|
|
25
|
-
z-index: 2;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
:host([primary-section='navbar']:not([overlay])) [part='navbar'] {
|
|
29
|
-
z-index: 1;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
[part] ::slotted(h2),
|
|
33
|
-
[part] ::slotted(h3),
|
|
34
|
-
[part] ::slotted(h4) {
|
|
35
|
-
line-height: 2.5rem;
|
|
36
|
-
margin-top: 0.25rem !important;
|
|
37
|
-
margin-bottom: 0.25rem !important;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
[part='navbar'][bottom] {
|
|
41
|
-
padding: 0 1em;
|
|
42
|
-
box-shadow: var(--material-shadow-elevation-4dp);
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
@media (min-width: 700px) {
|
|
46
|
-
[part='navbar'] {
|
|
47
|
-
padding: 0.5em 0.75em;
|
|
48
|
-
box-shadow: var(--material-shadow-elevation-4dp);
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
`,
|
|
52
|
-
{ moduleId: 'material-app-layout' },
|
|
53
|
-
);
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import '@vaadin/vaadin-material-styles/color.js';
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import '@vaadin/vaadin-material-styles/color.js';
|
|
2
|
-
import { button } from '@vaadin/button/theme/material/vaadin-button-styles.js';
|
|
3
|
-
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
4
|
-
|
|
5
|
-
const drawerToggle = css`
|
|
6
|
-
:host {
|
|
7
|
-
min-width: 0 !important;
|
|
8
|
-
width: 48px;
|
|
9
|
-
height: 48px;
|
|
10
|
-
padding: 0;
|
|
11
|
-
border-radius: 50%;
|
|
12
|
-
margin-inline-end: 1em;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
[part='icon'] {
|
|
16
|
-
top: 18px;
|
|
17
|
-
left: 15px;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
[part='icon'],
|
|
21
|
-
[part='icon']::after,
|
|
22
|
-
[part='icon']::before {
|
|
23
|
-
background-color: currentColor;
|
|
24
|
-
height: 2px;
|
|
25
|
-
width: 18px;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
[part='icon']::after {
|
|
29
|
-
top: 5px;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
[part='icon']::before {
|
|
33
|
-
top: 10px;
|
|
34
|
-
}
|
|
35
|
-
`;
|
|
36
|
-
|
|
37
|
-
registerStyles('vaadin-drawer-toggle', [button, drawerToggle], {
|
|
38
|
-
moduleId: 'material-drawer-toggle',
|
|
39
|
-
});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './src/vaadin-app-layout.js';
|
package/vaadin-lit-app-layout.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './src/vaadin-drawer-toggle.js';
|
|
File without changes
|
/package/src/{vaadin-drawer-toggle-styles.d.ts → styles/vaadin-drawer-toggle-base-styles.d.ts}
RENAMED
|
File without changes
|