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

dialog

Browse Source
This commit is contained in:
Natxo
2026-05-15 00:22:55 +02:00
parent 1607b41ebc
commit 1db7b81eb7
3 changed files with 35 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dist/sigpro.ui.js vendored
View File

File diff suppressed because one or more lines are too long

2
docs/sigpro.ui.js
View File

File diff suppressed because one or more lines are too long

57
src/sigpro.ui.js
View File

@@ -108,30 +108,39 @@ export const ui = {
cal('end', end, p.toPlaceholder || "Fin", () => !v()?.start) cal('end', end, p.toPlaceholder || "Fin", () => !v()?.start)
]); ]);
}, },
dialog: (p, c) => h("dialog", { dialog: (p, c) => {
open: p.show, const pos = $(p.pos || { x: 0, y: 0 });
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) }), return h("dialog", { open: p.show, class: `modal ${p.class || ''}` }, [
onmousemove: e => p._d && (p._p = { x: e.clientX - p._d.x, y: e.clientY - p._d.y }), h("div", {
onmouseup: () => p._d = null class: "modal-box",
}, [ style: () => `transform: translate(${pos().x}px, ${pos().y}px)`,
h("div", { onclick: e => e.stopPropagation()
class: `modal-box ${p.boxClass || ''}`, }, [
style: () => `transform: translate(${p._p?.x || 0}px, ${p._p?.y || 0}px)`, p.title ? h("div", {
onclick: e => e.stopPropagation() class: "flex justify-between items-center cursor-move p-2 border-b select-none",
}, [ onmousedown: e => {
p.title ? h("div", { "data-drag": "true", class: "flex justify-between items-center cursor-move p-2 border-b" }, [ const startX = e.clientX - pos().x;
h("span", { class: "font-bold" }, p.title), const startY = e.clientY - pos().y;
h("button", { class: "btn btn-sm btn-circle btn-ghost", onclick: () => p.show?.(false) }, "✕") const onMove = ev => pos({ x: ev.clientX - startX, y: ev.clientY - startY });
]) : null, const onUp = () => {
!p.title ? h("form", { method: "dialog" }, document.removeEventListener('mousemove', onMove);
h("button", { class: "btn btn-sm btn-circle btn-ghost absolute right-2 top-2", onclick: () => p.show?.(false) }, "✕") document.removeEventListener('mouseup', onUp);
) : null, };
h("div", { class: `p-4 ${p.contentClass || ''}` }, c), document.addEventListener('mousemove', onMove);
p.footer ? h("div", { class: `modal-action p-2 border-t ${p.footerClass || ''}` }, p.footer) : null document.addEventListener('mouseup', onUp);
]), e.preventDefault();
h("form", { method: "dialog", class: "modal-backdrop", onclick: () => p.show?.(false) }) }
]), }, [
h("span", { class: "font-bold" }, p.title),
h("button", { class: "btn btn-sm btn-circle btn-ghost", onclick: () => p.show(false) }, "✕")
]) : null,
h("div", { class: "p-4" }, c),
p.footer ? h("div", { class: "modal-action p-2 border-t" }, p.footer) : null
]),
h("form", { method: "dialog", class: "modal-backdrop", onclick: () => p.show(false) })
]);
},
divider: (p) => h("div", { ...p, class: `divider ${p.class || ''}` }), divider: (p) => h("div", { ...p, class: `divider ${p.class || ''}` }),
drawer: (p, c) => h("div", { ...p, class: `drawer ${p.class || ''}` }, c), drawer: (p, c) => h("div", { ...p, class: `drawer ${p.class || ''}` }, c),
drawer_toggle: (p) => h("input", { ...p, type: "checkbox", class: `drawer-toggle ${p.class || ''}` }), drawer_toggle: (p) => h("input", { ...p, type: "checkbox", class: `drawer-toggle ${p.class || ''}` }),