1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { templated } from 'atlibs/component/index.js'
const Base = await templated(new URL('./hello-count.html', import.meta.url))
// Markup in .html, behaviour here: send events up, render the state it is given.
customElements.define('hello-count', class extends Base {
connectedCallback() {
super.connectedCallback()
this.querySelector('form').onsubmit = (e) => {
e.preventDefault()
this.dispatchEvent(new CustomEvent('count', { bubbles: true, detail: Object.fromEntries(new FormData(e.target)) }))
}
}
render({ count: { status, result, error } }) {
this.querySelector('button').disabled = status === 'busy'
this.querySelector('.out').textContent = error ?? (result ? `${result.records} records in ${result.collection}` : '')
}
})
