26 lines
789 B
JavaScript
26 lines
789 B
JavaScript
|
import vanX from "./lib/vanx/vanx.js";
|
||
|
|
import Van from "./lib/van/van.js";
|
||
|
|
|
||
|
|
|
||
|
|
const {span, input, button} = Van.tags;
|
||
|
|
|
||
|
|
|
||
|
|
const data = vanX.reactive({name: {first: "Tao", last: "Xin"}});
|
||
|
|
const flatDerived = vanX.calc(() => `${data.name.first} ${data.name.last}`);
|
||
|
|
|
||
|
|
const Name = () => {
|
||
|
|
|
||
|
|
return span(
|
||
|
|
"First name: ",
|
||
|
|
input({type: "text", value: () => data.name.first,
|
||
|
|
oninput: e => data.name.first = e.target.value}), " ",
|
||
|
|
"Last name: ",
|
||
|
|
input({type: "text", value: () => data.name.last,
|
||
|
|
oninput: e => data.name.last = e.target.value}), " ",
|
||
|
|
//"Full name: ", () => derived.fullName, " ",
|
||
|
|
"CALC:", flatDerived,
|
||
|
|
button({onclick: () => data.name = {first: "Tao", last: "Xin"}}, "Reset"),
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
Van.add(document.body, Name());
|