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

⚡ Refatc signals to .get/.set syntax #26

Browse Source
This commit is contained in:
Jan Andrle
2025-03-03 14:19:41 +01:00
parent 3168f452ae
commit ed7e6c7963
28 changed files with 405 additions and 297 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
examples/components/3rd-party.js
View File

@ -15,7 +15,7 @@ export function thirdParty(){
}, {
set(key, value){
const p= this.value[key] || S();
p(value);
p.set(value);
this.value[key]= p;
}
});
@ -32,7 +32,7 @@ export function thirdParty(){
})();
return el("input", {
className,
value: store().value(),
value: store.get().value.get(),
type: "text",
onchange: ev=> S.action(store, "set", "value", ev.target.value)
});

10
examples/components/fullNameComponent.js
View File

@ -9,24 +9,24 @@ export function fullNameComponent(){
const labels= [ "Name", "Surname" ];
const name= labels.map(_=> S(""));
const full_name= S(()=>
name.map(l=> l()).filter(Boolean).join(" ") || "-");
name.map(l=> l.get()).filter(Boolean).join(" ") || "-");
scope.host(
on.connected(()=> console.log(fullNameComponent)),
on.disconnected(()=> console.log(fullNameComponent))
);
const count= S(0);
setInterval(()=> count(count()+1), 5000);
setInterval(()=> count.set(count.get()+1), 5000);
const style= { height: "80px", display: "block", fill: "currentColor" };
const elSVG= elNS("http://www.w3.org/2000/svg");
return el("div", { className }).append(
el("h2", "Simple form:"),
el("p", { textContent: S(()=> "Count: "+count()),
dataset: { count }, classList: { count: S(() => count()%2 === 0) } }),
el("p", { textContent: S(()=> "Count: "+count.get()),
dataset: { count }, classList: { count: S(() => count.get()%2 === 0) } }),
el("form", { onsubmit: ev=> ev.preventDefault() }).append(
...name.map((v, i)=>
el("label", labels[i]).append(
el("input", { type: "text", name: labels[i], value: v() }, on("change", ev=> v(ev.target.value)))
el("input", { type: "text", name: labels[i], value: v.get() }, on("change", ev=> v.set(ev.target.value)))
))
),
el("p").append(

10
examples/components/todosComponent.js
View File

@ -58,7 +58,7 @@ export function todosComponent({ todos= [ "Task A" ] }= {}){
),
el("div").append(
el("h3", "Output (JSON):"),
el("output", S(()=> JSON.stringify(Array.from(todosO()), null, "\t")))
el("output", S(()=> JSON.stringify(Array.from(todosO.get()), null, "\t")))
)
)
}
@ -80,13 +80,13 @@ function todoComponent({ textContent, value }){
const is_editable= S(false);
const onedited= on("change", ev=> {
const el= /** @type {HTMLInputElement} */ (ev.target);
textContent(el.value);
is_editable(false);
textContent.set(el.value);
is_editable.set(false);
});
return el("li").append(
S.el(is_editable, is=> is
? el("input", { value: textContent(), type: "text" }, onedited)
: el("span", { textContent, onclick: is_editable.bind(null, true) })
? el("input", { value: textContent.get(), type: "text" }, onedited)
: el("span", { textContent, onclick: ()=> is_editable.set(true) })
),
el("button", { type: "button", value, textContent: "-" }, onclick)
);

2
examples/components/webComponent.js
View File

@ -34,7 +34,7 @@ export class CustomHTMLTestElement extends HTMLElement{
text(test),
text(name),
text(preName),
el("button", { type: "button", textContent: "pre-name", onclick: ()=> preName("Ahoj") }),
el("button", { type: "button", textContent: "pre-name", onclick: ()=> preName.set("Ahoj") }),
" | ",
el("slot", { className: "test", name: "test" }),
);

2
examples/index.js
View File

@ -20,7 +20,7 @@ document.body.append(
el("span", { textContent: "test", slot: "test" }),
),
el(thirdParty),
el(CustomSlottingHTMLElement.tagName, { onclick: ()=> toggle(!toggle()) }).append(
el(CustomSlottingHTMLElement.tagName, { onclick: ()=> toggle.set(!toggle.get()) }).append(
el("strong", { slot: "name", textContent: "Honzo" }),
S.el(toggle, is=> is
? el("span", "…default slot")