mirror of
https://github.com/jaandrle/deka-dom-el
synced 2024-11-25 09:49:36 +01:00
Jan Andrle
cd62782c7b
* ⚡ refact docs to make editing (now renaming observables to signal) easier * ⚡ ⚡ use signal(s) term isntead of observable(s) * ⚡ 🔤 version + typo * 🐛 customElement example (0→S) * 📺 version in package-lock.json
57 lines
1.4 KiB
JavaScript
57 lines
1.4 KiB
JavaScript
import { S } from "deka-dom-el/signals";
|
||
const todos= S([], {
|
||
push(item){
|
||
this.value.push(S(item));
|
||
},
|
||
pop(){
|
||
const removed= this.value.pop();
|
||
if(removed) S.clear(removed);
|
||
},
|
||
[S.symbols.onclear](){ // this covers `O.clear(todos)`
|
||
S.clear(...this.value);
|
||
}
|
||
});
|
||
|
||
import { el, on } from "deka-dom-el";
|
||
/** @type {ddeElementAddon<HTMLFormElement>} */
|
||
const onsubmit= on("submit", function(event){
|
||
event.preventDefault();
|
||
const data= new FormData(this);
|
||
switch (data.get("op")){
|
||
case "A"/*dd*/:
|
||
S.action(todos, "push", data.get("todo"));
|
||
break;
|
||
case "E"/*dit*/: {
|
||
const last= todos().at(-1);
|
||
if(!last) break;
|
||
last(data.get("todo"));
|
||
break;
|
||
}
|
||
case "R"/*emove*/:
|
||
S.action(todos, "pop");
|
||
break;
|
||
}
|
||
});
|
||
document.body.append(
|
||
el("ul").append(
|
||
S.el(todos, todos=>
|
||
todos.map(textContent=> el("li", textContent)))
|
||
),
|
||
el("form", null, onsubmit).append(
|
||
el("input", { type: "text", name: "todo", placeholder: "Todo’s text" }),
|
||
el(radio, { textContent: "Add", checked: true }),
|
||
el(radio, { textContent: "Edit last" }),
|
||
el(radio, { textContent: "Remove" }),
|
||
el("button", "Submit")
|
||
)
|
||
);
|
||
document.head.append(
|
||
el("style", "form{ display: flex; flex-flow: column nowrap; }")
|
||
);
|
||
function radio({ textContent, checked= false }){
|
||
return el("label").append(
|
||
el("input", { type: "radio", name: "op", value: textContent[0], checked }),
|
||
" ",textContent
|
||
)
|
||
}
|