@vaadin/app-layout 24.3.0-alpha1 → 24.3.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/package.json +10 -10
- package/src/vaadin-app-layout.js +6 -11
- package/web-types.json +1 -1
- package/web-types.lit.json +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/app-layout",
|
|
3
|
-
"version": "24.3.0-
|
|
3
|
+
"version": "24.3.0-alpha10",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -36,22 +36,22 @@
|
|
|
36
36
|
],
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@polymer/polymer": "^3.0.0",
|
|
39
|
-
"@vaadin/a11y-base": "24.3.0-
|
|
40
|
-
"@vaadin/button": "24.3.0-
|
|
41
|
-
"@vaadin/component-base": "24.3.0-
|
|
42
|
-
"@vaadin/vaadin-lumo-styles": "24.3.0-
|
|
43
|
-
"@vaadin/vaadin-material-styles": "24.3.0-
|
|
44
|
-
"@vaadin/vaadin-themable-mixin": "24.3.0-
|
|
39
|
+
"@vaadin/a11y-base": "24.3.0-alpha10",
|
|
40
|
+
"@vaadin/button": "24.3.0-alpha10",
|
|
41
|
+
"@vaadin/component-base": "24.3.0-alpha10",
|
|
42
|
+
"@vaadin/vaadin-lumo-styles": "24.3.0-alpha10",
|
|
43
|
+
"@vaadin/vaadin-material-styles": "24.3.0-alpha10",
|
|
44
|
+
"@vaadin/vaadin-themable-mixin": "24.3.0-alpha10"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
47
|
"@esm-bundle/chai": "^4.3.4",
|
|
48
|
-
"@vaadin/tabs": "24.3.0-
|
|
49
|
-
"@vaadin/testing-helpers": "^0.
|
|
48
|
+
"@vaadin/tabs": "24.3.0-alpha10",
|
|
49
|
+
"@vaadin/testing-helpers": "^0.6.0",
|
|
50
50
|
"sinon": "^13.0.2"
|
|
51
51
|
},
|
|
52
52
|
"web-types": [
|
|
53
53
|
"web-types.json",
|
|
54
54
|
"web-types.lit.json"
|
|
55
55
|
],
|
|
56
|
-
"gitHead": "
|
|
56
|
+
"gitHead": "0271523d93fe5df0425ff64206886614f3c6f401"
|
|
57
57
|
}
|
package/src/vaadin-app-layout.js
CHANGED
|
@@ -121,6 +121,7 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
|
|
|
121
121
|
height: 100%;
|
|
122
122
|
--vaadin-app-layout-transition: 200ms;
|
|
123
123
|
transition: padding var(--vaadin-app-layout-transition);
|
|
124
|
+
--_vaadin-app-layout-drawer-width: var(--vaadin-app-layout-drawer-width, 16em);
|
|
124
125
|
--vaadin-app-layout-touch-optimized: false;
|
|
125
126
|
--vaadin-app-layout-navbar-offset-top: var(--_vaadin-app-layout-navbar-offset-size);
|
|
126
127
|
--vaadin-app-layout-navbar-offset-bottom: var(--_vaadin-app-layout-navbar-offset-size-bottom);
|
|
@@ -138,7 +139,7 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
|
|
|
138
139
|
}
|
|
139
140
|
|
|
140
141
|
:host([drawer-opened]) {
|
|
141
|
-
--vaadin-app-layout-drawer-offset-left: var(--_vaadin-app-layout-drawer-
|
|
142
|
+
--vaadin-app-layout-drawer-offset-left: var(--_vaadin-app-layout-drawer-width);
|
|
142
143
|
}
|
|
143
144
|
|
|
144
145
|
:host([overlay]) {
|
|
@@ -196,7 +197,7 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
|
|
|
196
197
|
transition: transform var(--vaadin-app-layout-transition), visibility var(--vaadin-app-layout-transition);
|
|
197
198
|
transform: translateX(-100%);
|
|
198
199
|
max-width: 90%;
|
|
199
|
-
width:
|
|
200
|
+
width: var(--_vaadin-app-layout-drawer-width);
|
|
200
201
|
box-sizing: border-box;
|
|
201
202
|
padding: var(--safe-area-inset-top) 0 var(--safe-area-inset-bottom) var(--safe-area-inset-left);
|
|
202
203
|
outline: none;
|
|
@@ -260,10 +261,7 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
|
|
|
260
261
|
@media (max-width: 800px), (max-height: 600px) {
|
|
261
262
|
:host {
|
|
262
263
|
--vaadin-app-layout-drawer-overlay: true;
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
[part='drawer'] {
|
|
266
|
-
width: 20em;
|
|
264
|
+
--_vaadin-app-layout-drawer-width: var(--vaadin-app-layout-drawer-width, 20em);
|
|
267
265
|
}
|
|
268
266
|
}
|
|
269
267
|
|
|
@@ -568,8 +566,10 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
|
|
|
568
566
|
|
|
569
567
|
if (childCount === 0) {
|
|
570
568
|
drawer.setAttribute('hidden', '');
|
|
569
|
+
this.style.setProperty('--_vaadin-app-layout-drawer-width', 0);
|
|
571
570
|
} else {
|
|
572
571
|
drawer.removeAttribute('hidden');
|
|
572
|
+
this.style.removeProperty('--_vaadin-app-layout-drawer-width');
|
|
573
573
|
}
|
|
574
574
|
this._updateOffsetSize();
|
|
575
575
|
}
|
|
@@ -591,11 +591,6 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
|
|
|
591
591
|
|
|
592
592
|
this.style.setProperty('--_vaadin-app-layout-navbar-offset-size', `${navbarRect.height}px`);
|
|
593
593
|
this.style.setProperty('--_vaadin-app-layout-navbar-offset-size-bottom', `${navbarBottomRect.height}px`);
|
|
594
|
-
|
|
595
|
-
const drawer = this.$.drawer;
|
|
596
|
-
const drawerRect = drawer.getBoundingClientRect();
|
|
597
|
-
|
|
598
|
-
this.style.setProperty('--_vaadin-app-layout-drawer-offset-size', `${drawerRect.width}px`);
|
|
599
594
|
}
|
|
600
595
|
|
|
601
596
|
/** @protected */
|
package/web-types.json
CHANGED
package/web-types.lit.json
CHANGED