jaandrle/deka-dom-el
1
0
Fork 0
mirror of https://github.com/jaandrle/deka-dom-el synced 2025-07-01 12:22:15 +02:00
Code Packages Releases Activity

Dev bugs@v0.7.6 (#12)

Browse Source 
* Update observables-lib.js

* `collectChildren`

* Update todosComponent.js

* 🚀 filter for `collectChildren`
This commit is contained in:
Jan Andrle
2024-01-07 12:33:56 +01:00
committed by GitHub
parent e88a495525
commit d2ddaaec6f
9 changed files with 195 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
examples/components/todosComponent.js
View File

@ -16,7 +16,7 @@ const className= style.host(todosComponent).css`
`;
/** @param {{ todos: string[] }} */
export function todosComponent({ todos= [ "Task A" ] }= {}){
const todosS= O(todos.map(t=> O(t)), {
const todosO= O(todos.map(t=> O(t)), {
add(v){ this.value.push(O(v)); },
remove(i){ O.clear(this.value.splice(i, 1)[0]); }
});
@ -25,24 +25,31 @@ export function todosComponent({ todos= [ "Task A" ] }= {}){
const onsubmitAdd= on("submit", event=> {
const el= event.target.elements[name];
event.preventDefault();
O.action(todosS, "add", el.value);
O.action(todosO, "add", el.value);
el.value= "";
});
const onremove= on("remove", event=>
O.action(todosS, "remove", event.detail));
O.action(todosO, "remove", event.detail));
const ul_todos= el("ul").append(
O.el(todosS, ts=> ts
const ul_todos_version= 1; // ul_todos_v1/ul_todos_v2
const ul_todos_v1= el("ul").append(
O.el(todosO, ts=> ts
.map((textContent, value)=>
el(todoComponent, { textContent, value, className }, onremove))
));
const ul_todos_v2= (ts)=> el("ul").append(
...ts.map((textContent, value)=>
el(todoComponent, { textContent, value, className }, onremove))
);
return el("div", { className }).append(
el("div").append(
el("h2", "Todos:"),
el("h3", "List of todos:"),
O.el(todosS, ts=> !ts.length
O.el(todosO, ts=> !ts.length
? el("p", "No todos yet")
: ul_todos),
: ( (ul_todos_version-1) ? ul_todos_v1 : ul_todos_v2(ts) )
),
el("p", "Click to the text to edit it.")
),
el("form", null, onsubmitAdd).append(
@ -54,12 +61,12 @@ export function todosComponent({ todos= [ "Task A" ] }= {}){
),
el("div").append(
el("h3", "Output (JSON):"),
el("output", O(()=> JSON.stringify(todosS, null, "\t")))
el("output", O(()=> JSON.stringify(todosO, null, "\t")))
)
)
}
/**
* @dispatch {number} remove
* @dispatchs {number} remove
* */
function todoComponent({ textContent, value }){
const { host }= scope;