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

docs

Browse Source
This commit is contained in:
natxocc
2026-04-01 00:19:51 +02:00
parent 83aa69014c
commit d41bfc8599
5 changed files with 49 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
dist/sigpro-ui.cjs vendored
View File

@@ -1071,19 +1071,21 @@ var MenuModule = /*#__PURE__*/Object.freeze({
Menu: Menu Menu: Menu
}); });
/** MODAL (Recommended Method: HTML <dialog>) */ /** MODAL REACTIVO NATIVO */
const Modal = (props, children) => { const Modal = (props, children) => {
const { title, buttons, open, ...rest } = props; const { title, buttons, open, ...rest } = props;
const dialogRef = { current: null }; const dialogRef = { current: null };
// Sincronizamos la señal con los métodos nativos del navegador
sigpro.$watch(() => { sigpro.$watch(() => {
const el = dialogRef.current; const dialog = dialogRef.current;
if (!el) return; if (!dialog) return;
if (open()) { if (open()) {
if (!el.open) el.showModal(); // Solo abrimos si no está ya abierto (evita bucles)
if (!dialog.open) dialog.showModal();
} else { } else {
if (el.open) el.close(); if (dialog.open) dialog.close();
} }
}); });
@@ -1096,7 +1098,8 @@ const Modal = (props, children) => {
...rest, ...rest,
ref: dialogRef, ref: dialogRef,
class: "modal", class: "modal",
oncancel: close // Importante: Si el usuario pulsa ESC, actualizamos la señal
oncancel: () => open(false)
}, [ }, [
sigpro.$html("div", { class: "modal-box" }, [ sigpro.$html("div", { class: "modal-box" }, [
title ? sigpro.$html("h3", { class: "text-lg font-bold mb-4" }, title) : null, title ? sigpro.$html("h3", { class: "text-lg font-bold mb-4" }, title) : null,
@@ -1108,12 +1111,13 @@ const Modal = (props, children) => {
Button({ type: "button", onclick: close }, tt("close")()), Button({ type: "button", onclick: close }, tt("close")()),
]), ]),
]), ]),
// Backdrop nativo que sincroniza con la señal
sigpro.$html("form", { sigpro.$html("form", {
method: "dialog", method: "dialog",
class: "modal-backdrop", class: "modal-backdrop",
onsubmit: close onsubmit: close
}, [ }, [
sigpro.$html("button", { onclick: close }, "close") sigpro.$html("button", {}, "close")
]) ])
]); ]);
}; };

18
dist/sigpro-ui.esm.js vendored
View File

@@ -1067,19 +1067,21 @@ var MenuModule = /*#__PURE__*/Object.freeze({
Menu: Menu Menu: Menu
}); });
/** MODAL (Recommended Method: HTML <dialog>) */ /** MODAL REACTIVO NATIVO */
const Modal = (props, children) => { const Modal = (props, children) => {
const { title, buttons, open, ...rest } = props; const { title, buttons, open, ...rest } = props;
const dialogRef = { current: null }; const dialogRef = { current: null };
// Sincronizamos la señal con los métodos nativos del navegador
$watch(() => { $watch(() => {
const el = dialogRef.current; const dialog = dialogRef.current;
if (!el) return; if (!dialog) return;
if (open()) { if (open()) {
if (!el.open) el.showModal(); // Solo abrimos si no está ya abierto (evita bucles)
if (!dialog.open) dialog.showModal();
} else { } else {
if (el.open) el.close(); if (dialog.open) dialog.close();
} }
}); });
@@ -1092,7 +1094,8 @@ const Modal = (props, children) => {
...rest, ...rest,
ref: dialogRef, ref: dialogRef,
class: "modal", class: "modal",
oncancel: close // Importante: Si el usuario pulsa ESC, actualizamos la señal
oncancel: () => open(false)
}, [ }, [
$html("div", { class: "modal-box" }, [ $html("div", { class: "modal-box" }, [
title ? $html("h3", { class: "text-lg font-bold mb-4" }, title) : null, title ? $html("h3", { class: "text-lg font-bold mb-4" }, title) : null,
@@ -1104,12 +1107,13 @@ const Modal = (props, children) => {
Button({ type: "button", onclick: close }, tt("close")()), Button({ type: "button", onclick: close }, tt("close")()),
]), ]),
]), ]),
// Backdrop nativo que sincroniza con la señal
$html("form", { $html("form", {
method: "dialog", method: "dialog",
class: "modal-backdrop", class: "modal-backdrop",
onsubmit: close onsubmit: close
}, [ }, [
$html("button", { onclick: close }, "close") $html("button", {}, "close")
]) ])
]); ]);
}; };

18
dist/sigpro-ui.umd.js vendored
View File

@@ -1068,19 +1068,21 @@ var SigProUI = (function (exports, sigpro) {
Menu: Menu Menu: Menu
}); });
/** MODAL (Recommended Method: HTML <dialog>) */ /** MODAL REACTIVO NATIVO */
const Modal = (props, children) => { const Modal = (props, children) => {
const { title, buttons, open, ...rest } = props; const { title, buttons, open, ...rest } = props;
const dialogRef = { current: null }; const dialogRef = { current: null };
// Sincronizamos la señal con los métodos nativos del navegador
sigpro.$watch(() => { sigpro.$watch(() => {
const el = dialogRef.current; const dialog = dialogRef.current;
if (!el) return; if (!dialog) return;
if (open()) { if (open()) {
if (!el.open) el.showModal(); // Solo abrimos si no está ya abierto (evita bucles)
if (!dialog.open) dialog.showModal();
} else { } else {
if (el.open) el.close(); if (dialog.open) dialog.close();
} }
}); });
@@ -1093,7 +1095,8 @@ var SigProUI = (function (exports, sigpro) {
...rest, ...rest,
ref: dialogRef, ref: dialogRef,
class: "modal", class: "modal",
oncancel: close // Importante: Si el usuario pulsa ESC, actualizamos la señal
oncancel: () => open(false)
}, [ }, [
sigpro.$html("div", { class: "modal-box" }, [ sigpro.$html("div", { class: "modal-box" }, [
title ? sigpro.$html("h3", { class: "text-lg font-bold mb-4" }, title) : null, title ? sigpro.$html("h3", { class: "text-lg font-bold mb-4" }, title) : null,
@@ -1105,12 +1108,13 @@ var SigProUI = (function (exports, sigpro) {
Button({ type: "button", onclick: close }, tt("close")()), Button({ type: "button", onclick: close }, tt("close")()),
]), ]),
]), ]),
// Backdrop nativo que sincroniza con la señal
sigpro.$html("form", { sigpro.$html("form", {
method: "dialog", method: "dialog",
class: "modal-backdrop", class: "modal-backdrop",
onsubmit: close onsubmit: close
}, [ }, [
sigpro.$html("button", { onclick: close }, "close") sigpro.$html("button", {}, "close")
]) ])
]); ]);
}; };

2
dist/sigpro-ui.umd.min.js vendored
View File

File diff suppressed because one or more lines are too long

18
src/components/Modal.js
View File

@@ -2,19 +2,21 @@ import { $html, $watch } from "sigpro";
import { tt } from "../core/i18n.js"; import { tt } from "../core/i18n.js";
import { Button } from "./Button.js"; import { Button } from "./Button.js";
/** MODAL (Recommended Method: HTML <dialog>) */ /** MODAL REACTIVO NATIVO */
export const Modal = (props, children) => { export const Modal = (props, children) => {
const { title, buttons, open, ...rest } = props; const { title, buttons, open, ...rest } = props;
const dialogRef = { current: null }; const dialogRef = { current: null };
// Sincronizamos la señal con los métodos nativos del navegador
$watch(() => { $watch(() => {
const el = dialogRef.current; const dialog = dialogRef.current;
if (!el) return; if (!dialog) return;
if (open()) { if (open()) {
if (!el.open) el.showModal(); // Solo abrimos si no está ya abierto (evita bucles)
if (!dialog.open) dialog.showModal();
} else { } else {
if (el.open) el.close(); if (dialog.open) dialog.close();
} }
}); });
@@ -27,7 +29,8 @@ export const Modal = (props, children) => {
...rest, ...rest,
ref: dialogRef, ref: dialogRef,
class: "modal", class: "modal",
oncancel: close // Importante: Si el usuario pulsa ESC, actualizamos la señal
oncancel: () => open(false)
}, [ }, [
$html("div", { class: "modal-box" }, [ $html("div", { class: "modal-box" }, [
title ? $html("h3", { class: "text-lg font-bold mb-4" }, title) : null, title ? $html("h3", { class: "text-lg font-bold mb-4" }, title) : null,
@@ -39,12 +42,13 @@ export const Modal = (props, children) => {
Button({ type: "button", onclick: close }, tt("close")()), Button({ type: "button", onclick: close }, tt("close")()),
]), ]),
]), ]),
// Backdrop nativo que sincroniza con la señal
$html("form", { $html("form", {
method: "dialog", method: "dialog",
class: "modal-backdrop", class: "modal-backdrop",
onsubmit: close onsubmit: close
}, [ }, [
$html("button", { onclick: close }, "close") $html("button", {}, "close")
]) ])
]); ]);
}; };