66 lines
1.7 KiB
JavaScript
66 lines
1.7 KiB
JavaScript
import { initRouter, Route, ViewChild, Component, ComponentInput, ComponentDefinition } from "./node-pwa.js";
|
|
import { IntInput } from "./utils.js";
|
|
|
|
class TestComponent extends Component {
|
|
static get definition() {
|
|
return new ComponentDefinition({
|
|
name: "test-component",
|
|
template: `<div>
|
|
<h1>Test Component</h1>
|
|
<p>This is a test component.</p>
|
|
<button
|
|
id="test-button"
|
|
[class.red-button]="count() % 2 === 0"
|
|
[class.green-button]="count() % 2 !== 0"
|
|
class="counter-button"
|
|
(click)="incrementCount()"
|
|
>Count: {{count()}}</button>
|
|
<input type="text" [(value)]="name" placeholder="Enter your name" />
|
|
<p>Hello, {{name()}}! Counter is {{count()}}</p>
|
|
</div>`,
|
|
style: `
|
|
.red-button {
|
|
background-color: red;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.green-button {
|
|
background-color: green;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.counter-button {
|
|
border-radius: 10px;
|
|
margin: 15px 30px;
|
|
font-size: 18px;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.counter-button:hover {
|
|
opacity: 0.8;
|
|
}
|
|
`
|
|
});
|
|
}
|
|
|
|
count = new ComponentInput(0, IntInput);
|
|
name = new ComponentInput("World");
|
|
|
|
incrementCount() {
|
|
const currentCount = this.count();
|
|
this.count.set(currentCount + 1);
|
|
}
|
|
}
|
|
|
|
const route1 = new Route("/counter", TestComponent);
|
|
const route2 = new Route("/counter/:count", TestComponent);
|
|
initRouter("routerOutlet", [route1, route2]);
|