natxocc/sigpro
1
1
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

new dialog

Browse Source
This commit is contained in:
Natxo
2026-05-15 00:18:50 +02:00
parent 27d9474610
commit 1607b41ebc
8 changed files with 38 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/sigpro.js
View File

@@ -4,7 +4,7 @@ export const isA = Array.isArray;
const doc = typeof document < "u" ? document : null;
const txt = s => doc.createTextNode(s == null ? "" : String(s));
const toNd = n => n?._rt ? n._cnt : (n instanceof Node ? n : txt(n));
export const Fragment = p => p.children;
export const fragment = p => p.children;
export const val = v => isF(v) ? v() : v;
let aEff = null, aOwn = null, isFlushing = 0, bDepth = 0;
@@ -244,7 +244,7 @@ export const mount = (c, tgt) => {
const htmlTags = "a abbr article aside audio b blockquote br button canvas caption cite code col colgroup datalist dd del details dfn dialog div dl dt em embed fieldset figcaption figure footer form h1 h2 h3 h4 h5 h6 header hr i iframe img input ins kbd label legend li main mark meter nav object ol optgroup option output p picture pre progress section select slot small source span strong sub summary sup svg table tbody td template textarea tfoot th thead time tr u ul video";
export const SigPro = { $, watch, batch, h, Fragment, render, mount, when, each, onUnmount, val, isA, isF, isO };
export const SigPro = { $, watch, batch, h, fragment, render, mount, when, each, onUnmount, val, isA, isF, isO };
if (typeof window !== "undefined") {
window.SigPro = SigPro;

36
src/sigpro.ui.js
View File

@@ -108,6 +108,30 @@ export const ui = {
cal('end', end, p.toPlaceholder || "Fin", () => !v()?.start)
]);
},
dialog: (p, c) => h("dialog", {
open: p.show,
class: `modal ${p.class || ''}`,
onmousedown: e => e.target.dataset.drag && (p._d = { x: e.clientX - (p._p?.x || 0), y: e.clientY - (p._p?.y || 0) }),
onmousemove: e => p._d && (p._p = { x: e.clientX - p._d.x, y: e.clientY - p._d.y }),
onmouseup: () => p._d = null
}, [
h("div", {
class: `modal-box ${p.boxClass || ''}`,
style: () => `transform: translate(${p._p?.x || 0}px, ${p._p?.y || 0}px)`,
onclick: e => e.stopPropagation()
}, [
p.title ? h("div", { "data-drag": "true", class: "flex justify-between items-center cursor-move p-2 border-b" }, [
h("span", { class: "font-bold" }, p.title),
h("button", { class: "btn btn-sm btn-circle btn-ghost", onclick: () => p.show?.(false) }, "✕")
]) : null,
!p.title ? h("form", { method: "dialog" },
h("button", { class: "btn btn-sm btn-circle btn-ghost absolute right-2 top-2", onclick: () => p.show?.(false) }, "✕")
) : null,
h("div", { class: `p-4 ${p.contentClass || ''}` }, c),
p.footer ? h("div", { class: `modal-action p-2 border-t ${p.footerClass || ''}` }, p.footer) : null
]),
h("form", { method: "dialog", class: "modal-backdrop", onclick: () => p.show?.(false) })
]),
divider: (p) => h("div", { ...p, class: `divider ${p.class || ''}` }),
drawer: (p, c) => h("div", { ...p, class: `drawer ${p.class || ''}` }, c),
drawer_toggle: (p) => h("input", { ...p, type: "checkbox", class: `drawer-toggle ${p.class || ''}` }),
@@ -207,12 +231,12 @@ export const ui = {
swap_on: (p, c) => h("div", { ...p, class: `swap-on ${p.class || ''}` }, c),
swap_off: (p, c) => h("div", { ...p, class: `swap-off ${p.class || ''}` }, c),
table: (p, c) => h("table", { ...p, class: `table ${p.class || ''}` }, c),
table_head: (p, c) => h("thead", { ...p, class: p.class || '' }, c),
table_body: (p, c) => h("tbody", { ...p, class: p.class || '' }, c),
table_foot: (p, c) => h("tfoot", { ...p, class: p.class || '' }, c),
table_row: (p, c) => h("tr", { ...p, class: p.class || '' }, c),
table_th: (p, c) => h("th", { ...p, class: p.class || '' }, c),
table_td: (p, c) => h("td", { ...p, class: p.class || '' }, c),
thead: (p, c) => h("thead", { ...p, class: p.class || '' }, c),
tbody: (p, c) => h("tbody", { ...p, class: p.class || '' }, c),
tfoot: (p, c) => h("tfoot", { ...p, class: p.class || '' }, c),
tr: (p, c) => h("tr", { ...p, class: p.class || '' }, c),
th: (p, c) => h("th", { ...p, class: p.class || '' }, c),
td: (p, c) => h("td", { ...p, class: p.class || '' }, c),
tabs: (p, c) => div({ ...p, class: `tabs ${p.class || ''}` }, c),
tab: (p) => {
const close = () => p.tabs?.(p.tabs().filter((_, idx) => idx !== p.index))