Skip to content

Commit 8d5f635

Browse files
web-padawanweb-padawan
authored
experiment: add LitElement based version of app-layout (#8344)
1 parent 32646d1 commit 8d5f635

25 files changed

+188
-7
lines changed

‎packages/app-layout/src/vaadin-app-layout-mixin.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ export const AppLayoutMixin = (superclass) =>
4444
i18n: {
4545
type: Object,
4646
observer: '__i18nChanged',
47+
sync: true,
4748
value: () => {
4849
return {
4950
drawer: 'Drawer',
@@ -64,6 +65,7 @@ export const AppLayoutMixin = (superclass) =>
6465
notify: true,
6566
reflectToAttribute: true,
6667
observer: '__primarySectionChanged',
68+
sync: true,
6769
},
6870

6971
/**
@@ -80,6 +82,7 @@ export const AppLayoutMixin = (superclass) =>
8082
value: true,
8183
reflectToAttribute: true,
8284
observer: '__drawerOpenedChanged',
85+
sync: true,
8386
},
8487

8588
/**
@@ -93,6 +96,7 @@ export const AppLayoutMixin = (superclass) =>
9396
readOnly: true,
9497
value: false,
9598
reflectToAttribute: true,
99+
sync: true,
96100
},
97101

98102
/**

‎packages/app-layout/src/vaadin-lit-app-layout.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './vaadin-app-layout.js';

‎packages/app-layout/src/vaadin-lit-app-layout.js‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2018 - 2024 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 };

‎packages/app-layout/src/vaadin-lit-drawer-toggle.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './vaadin-drawer-toggle.js';

‎packages/app-layout/src/vaadin-lit-drawer-toggle.js‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2018 - 2024 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-base.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 };

‎packages/app-layout/test/app-layout-lit.test.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import '../src/vaadin-lit-app-layout.js';
2+
import '../src/vaadin-lit-drawer-toggle.js';
3+
import './app-layout.common.js';

‎packages/app-layout/test/app-layout-polymer.test.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import '../vaadin-app-layout.js';
2+
import '../vaadin-drawer-toggle.js';
3+
import './app-layout.common.js';

‎packages/app-layout/test/app-layout.test.js‎ renamed to ‎packages/app-layout/test/app-layout.common.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,6 @@ import {
99
oneEvent,
1010
} from '@vaadin/testing-helpers';
1111
import sinon from 'sinon';
12-
import '../vaadin-app-layout.js';
13-
import '../vaadin-drawer-toggle.js';
1412

1513
/**
1614
* Resolves once the function is invoked on the given object.

‎packages/app-layout/test/drawer-toggle-lit.test.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import '../src/vaadin-lit-drawer-toggle.js';
2+
import './drawer-toggle.common.js';

‎packages/app-layout/test/drawer-toggle-polymer.test.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import '../vaadin-drawer-toggle.js';
2+
import './drawer-toggle.common.js';

0 commit comments

Comments
 (0)