1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
|
import { LitElement, css, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { Router } from '@vaadin/router';
import './pages/app-home';
import './components/header';
import './styles/global.css';
const BASE_URL: string = (import.meta.env.BASE_URL).length > 2 ? (import.meta.env.BASE_URL).slice(1,-1) : (import.meta.env.BASE_URL);
@customElement('app-index')
export class AppIndex extends LitElement {
static get styles() {
return css`
main {
padding-left: 16px;
padding-right: 16px;
padding-bottom: 16px;
}
#routerOutlet > * {
width: 100% !important;
}
#routerOutlet > .leaving {
animation: 160ms fadeOut ease-in-out;
}
#routerOutlet > .entering {
animation: 160ms fadeIn linear;
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes fadeIn {
from {
opacity: 0.2;
}
to {
opacity: 1;
}
}
`;
}
constructor() {
super();
}
firstUpdated() {
// this method is a lifecycle even in lit
// for more info check out the lit docs https://lit.dev/docs/components/lifecycle/
// For more info on using the @vaadin/router check here https://vaadin.com/router
const router = new Router(this.shadowRoot?.querySelector('#routerOutlet'));
router.setRoutes([
// temporarily cast to any because of a Type bug with the router
{
path: BASE_URL,
animate: true,
children: [
{ path: '', component: 'app-home' },
{
path: 'about',
component: 'app-about',
action: async () => {
await import('./pages/app-about/app-about.js');
},
}
],
} as any,
]);
}
render() {
return html`
<div>
<main>
<div id="routerOutlet"></div>
</main>
</div>
`;
}
}
|
