natxocc
d900659d88
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 3s
36 lines
961 B
JavaScript
36 lines
961 B
JavaScript
// components/Modal.js
|
|
import { Tag, Watch } from "sigpro";
|
|
|
|
export const Modal = (props) => {
|
|
const { class: className, open, title, children, ...rest } = props;
|
|
let dialogRef = null;
|
|
|
|
Watch(() => {
|
|
const isOpen = typeof open === "function" ? open() : open;
|
|
if (!dialogRef) return;
|
|
isOpen ? dialogRef.showModal() : dialogRef.close();
|
|
});
|
|
|
|
const close = () => {
|
|
if (typeof open === "function") open(false);
|
|
};
|
|
|
|
return Tag("dialog", {
|
|
...rest,
|
|
ref: el => dialogRef = el,
|
|
class: `modal ${className || ''}`.trim(),
|
|
onclose: close,
|
|
oncancel: close
|
|
}, [
|
|
Tag("div", { class: "modal-box" }, [
|
|
title && Tag("h3", { class: "text-lg font-bold" }, title),
|
|
children,
|
|
Tag("div", { class: "modal-action" }, [
|
|
props.actions || Button({ onclick: close }, "Cerrar")
|
|
])
|
|
]),
|
|
Tag("form", { method: "dialog", class: "modal-backdrop" }, [
|
|
Tag("button", {}, "close")
|
|
])
|
|
]);
|
|
}; |