DOM bindings

"code-keyword">import { signal } "code-keyword">from '@astro-dx/core';
"code-keyword">import { getElement, getElements } "code-keyword">from '@astro-dx/dom';
"code-keyword">import { onClick } "code-keyword">from '@astro-dx/events';

"code-keyword">const isOpen = "code-function">signal("code-type">false);
"code-keyword">const modalTitle = "code-function">signal('Hello from astro-dx');
"code-keyword">const lastClicked = "code-function">signal('none');

"code-keyword">const modal = getElement<HTMLDialogElement>('#demo-modal');
"code-keyword">const btnOpen = getElement<HTMLButtonElement>('#btn-open-modal');
"code-keyword">const btnClose = getElement<HTMLButtonElement>('#btn-close-modal');

"code-function">getElement('#modal-title')."code-function">text(modalTitle);
"code-function">getElement('#last-clicked')."code-function">text(lastClicked);

"code-function">onClick(btnOpen.el, () => isOpen."code-function">set("code-type">true));
"code-function">onClick(btnClose.el, () => isOpen."code-function">set("code-type">false));

modal."code-function">effect(() => {
  "code-keyword">if ("code-function">isOpen()) {
    "code-keyword">if (!modal.el.open) modal.el."code-function">showModal();
  } "code-keyword">else "code-keyword">if (modal.el.open) {
    modal.el."code-function">close();
  }
});

"code-keyword">const items = getElements<HTMLLIElement>('.demo-product');
"code-keyword">for ("code-keyword">const item of items) {
  item."code-function">onHover({
    enter: () => item.el.style."code-function">setProperty('opacity', '0.6'),
    leave: () => item.el.style."code-function">removeProperty('opacity'),
  });
  "code-function">onClick(item.el, () => lastClicked."code-function">set(item.el.dataset.id ?? 'unknown'));
}