1
0
mirror of https://github.com/jaandrle/deka-dom-el synced 2025-04-01 19:55:53 +02:00
This commit is contained in:
Jan Andrle 2025-03-04 16:46:00 +01:00
parent b08f75bfb0
commit f2ce23d9f7
3 changed files with 36 additions and 29 deletions

View File

@ -1,35 +1,38 @@
import { el, assign } from "deka-dom-el";
import { el, on, scope } from "deka-dom-el";
import { S } from "deka-dom-el/signals";
// Create a component with reactive elements
function ReactiveCounter() {
const count = S(0);
// Elements created with el() have data-dde attribute
const counter = el('div', {
id: 'counter',
// This element will have __dde_reactive property
textContent: count
});
const incrementBtn = el('button', {
textContent: 'Increment',
onclick: () => count.set(count.get() + 1)
});
// Dynamic section with __dde_signal property
const counterInfo = S.el(count, value =>
el('p', `Current count is ${value}`)
);
return el('div').append(
counter,
incrementBtn,
counterInfo
);
const count = S(0);
scope.host(on.connected(ev=>
console.log(ev.target.__dde_reactive)
));
const counter = el('div', {
// This element will be added into the __dde_reactive property
textContent: count,
});
const incrementBtn = el('button', {
textContent: 'Increment',
onclick: () => count.set(count.get() + 1)
});
// Dynamic section will be added into __dde_signal property
const counterInfo = S.el(count, value =>
el('p', `Current count is ${value}`)
);
return el('div', { id: 'counter' }).append(
counter,
incrementBtn,
counterInfo
);
}
document.body.append(
el(ReactiveCounter),
);
// In DevTools console:
// document.querySelectorAll('[data-dde]'); // Find all elements created with deka-dom-el
// const counter = document.querySelector('#counter');
// console.log(counter.__dde_reactive); // See reactive bindings
const counter = document.querySelector('#counter');
setTimeout(()=> console.log(counter.__dde_reactive), 1000); // See reactive bindings

View File

@ -133,6 +133,7 @@ body {
"sidebar"
"content";
min-height: 100vh;
margin: 0;
}
::selection {

View File

@ -14,7 +14,10 @@ ${host} {
background-color: var(--primary);
color: white;
box-shadow: var(--shadow);
min-height: var(--header-height);
min-height: calc(var(--header-height) - 1em);
--_m: .75em;
margin: var(--_m) var(--_m) 0 var(--_m);
border-radius: var(--border-radius);
}
${host} .header-title {