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());