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

Modal

Browse Source
This commit is contained in:
natxocc
2026-04-01 00:13:26 +02:00
parent 091bd13062
commit 83aa69014c
5 changed files with 143 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
dist/sigpro-ui.cjs vendored
View File

@@ -1071,37 +1071,51 @@ var MenuModule = /*#__PURE__*/Object.freeze({
Menu: Menu Menu: Menu
}); });
/** MODAL */ /** MODAL (Recommended Method: HTML <dialog>) */
const Modal = (props, children) => { const Modal = (props, children) => {
const { title, buttons, open, ...rest } = props; const { title, buttons, open, ...rest } = props;
const dialogRef = { current: null };
sigpro.$watch(() => {
const el = dialogRef.current;
if (!el) return;
if (open()) {
if (!el.open) el.showModal();
} else {
if (el.open) el.close();
}
});
const close = (e) => { const close = (e) => {
if (e && e.preventDefault) e.preventDefault(); if (e && e.preventDefault) e.preventDefault();
open(false); open(false);
}; };
return sigpro.$if(open, () => return sigpro.$html("dialog", {
sigpro.$html("dialog", { ...rest,
...rest, ref: dialogRef,
class: "modal modal-open", class: "modal",
oncancel: close oncancel: close
}, [ }, [
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,
sigpro.$html("div", { class: "py-2" }, [ sigpro.$html("div", { class: "py-2" }, [
typeof children === "function" ? children() : children typeof children === "function" ? children() : children
]),
sigpro.$html("div", { class: "modal-action flex gap-2" }, [
...(Array.isArray(buttons) ? buttons : [buttons]).filter(Boolean),
Button({ type: "button", onclick: close }, tt("close")()),
]),
]), ]),
sigpro.$html("div", { sigpro.$html("div", { class: "modal-action flex gap-2" }, [
class: "modal-backdrop bg-black/20", ...(Array.isArray(buttons) ? buttons : [buttons]).filter(Boolean),
onclick: close Button({ type: "button", onclick: close }, tt("close")()),
}) ]),
]),
sigpro.$html("form", {
method: "dialog",
class: "modal-backdrop",
onsubmit: close
}, [
sigpro.$html("button", { onclick: close }, "close")
]) ])
); ]);
}; };
var ModalModule = /*#__PURE__*/Object.freeze({ var ModalModule = /*#__PURE__*/Object.freeze({

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

@@ -1,4 +1,4 @@
import { $html, $, $for, $if, $mount } from 'sigpro'; import { $html, $, $for, $if, $watch, $mount } from 'sigpro';
const val = t => typeof t === "function" ? t() : t; const val = t => typeof t === "function" ? t() : t;
@@ -1067,37 +1067,51 @@ var MenuModule = /*#__PURE__*/Object.freeze({
Menu: Menu Menu: Menu
}); });
/** MODAL */ /** MODAL (Recommended Method: HTML <dialog>) */
const Modal = (props, children) => { const Modal = (props, children) => {
const { title, buttons, open, ...rest } = props; const { title, buttons, open, ...rest } = props;
const dialogRef = { current: null };
$watch(() => {
const el = dialogRef.current;
if (!el) return;
if (open()) {
if (!el.open) el.showModal();
} else {
if (el.open) el.close();
}
});
const close = (e) => { const close = (e) => {
if (e && e.preventDefault) e.preventDefault(); if (e && e.preventDefault) e.preventDefault();
open(false); open(false);
}; };
return $if(open, () => return $html("dialog", {
$html("dialog", { ...rest,
...rest, ref: dialogRef,
class: "modal modal-open", class: "modal",
oncancel: close oncancel: close
}, [ }, [
$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,
$html("div", { class: "py-2" }, [ $html("div", { class: "py-2" }, [
typeof children === "function" ? children() : children typeof children === "function" ? children() : children
]),
$html("div", { class: "modal-action flex gap-2" }, [
...(Array.isArray(buttons) ? buttons : [buttons]).filter(Boolean),
Button({ type: "button", onclick: close }, tt("close")()),
]),
]), ]),
$html("div", { $html("div", { class: "modal-action flex gap-2" }, [
class: "modal-backdrop bg-black/20", ...(Array.isArray(buttons) ? buttons : [buttons]).filter(Boolean),
onclick: close Button({ type: "button", onclick: close }, tt("close")()),
}) ]),
]),
$html("form", {
method: "dialog",
class: "modal-backdrop",
onsubmit: close
}, [
$html("button", { onclick: close }, "close")
]) ])
); ]);
}; };
var ModalModule = /*#__PURE__*/Object.freeze({ var ModalModule = /*#__PURE__*/Object.freeze({

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

@@ -1068,37 +1068,51 @@ var SigProUI = (function (exports, sigpro) {
Menu: Menu Menu: Menu
}); });
/** MODAL */ /** MODAL (Recommended Method: HTML <dialog>) */
const Modal = (props, children) => { const Modal = (props, children) => {
const { title, buttons, open, ...rest } = props; const { title, buttons, open, ...rest } = props;
const dialogRef = { current: null };
sigpro.$watch(() => {
const el = dialogRef.current;
if (!el) return;
if (open()) {
if (!el.open) el.showModal();
} else {
if (el.open) el.close();
}
});
const close = (e) => { const close = (e) => {
if (e && e.preventDefault) e.preventDefault(); if (e && e.preventDefault) e.preventDefault();
open(false); open(false);
}; };
return sigpro.$if(open, () => return sigpro.$html("dialog", {
sigpro.$html("dialog", { ...rest,
...rest, ref: dialogRef,
class: "modal modal-open", class: "modal",
oncancel: close oncancel: close
}, [ }, [
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,
sigpro.$html("div", { class: "py-2" }, [ sigpro.$html("div", { class: "py-2" }, [
typeof children === "function" ? children() : children typeof children === "function" ? children() : children
]),
sigpro.$html("div", { class: "modal-action flex gap-2" }, [
...(Array.isArray(buttons) ? buttons : [buttons]).filter(Boolean),
Button({ type: "button", onclick: close }, tt("close")()),
]),
]), ]),
sigpro.$html("div", { sigpro.$html("div", { class: "modal-action flex gap-2" }, [
class: "modal-backdrop bg-black/20", ...(Array.isArray(buttons) ? buttons : [buttons]).filter(Boolean),
onclick: close Button({ type: "button", onclick: close }, tt("close")()),
}) ]),
]),
sigpro.$html("form", {
method: "dialog",
class: "modal-backdrop",
onsubmit: close
}, [
sigpro.$html("button", { onclick: close }, "close")
]) ])
); ]);
}; };
var ModalModule = /*#__PURE__*/Object.freeze({ var ModalModule = /*#__PURE__*/Object.freeze({

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

File diff suppressed because one or more lines are too long

58
src/components/Modal.js
View File

@@ -1,36 +1,50 @@
import { $html, $if } from "sigpro"; 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 */ /** MODAL (Recommended Method: HTML <dialog>) */
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 };
$watch(() => {
const el = dialogRef.current;
if (!el) return;
if (open()) {
if (!el.open) el.showModal();
} else {
if (el.open) el.close();
}
});
const close = (e) => { const close = (e) => {
if (e && e.preventDefault) e.preventDefault(); if (e && e.preventDefault) e.preventDefault();
open(false); open(false);
}; };
return $if(open, () => return $html("dialog", {
$html("dialog", { ...rest,
...rest, ref: dialogRef,
class: "modal modal-open", class: "modal",
oncancel: close oncancel: close
}, [ }, [
$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,
$html("div", { class: "py-2" }, [ $html("div", { class: "py-2" }, [
typeof children === "function" ? children() : children typeof children === "function" ? children() : children
]),
$html("div", { class: "modal-action flex gap-2" }, [
...(Array.isArray(buttons) ? buttons : [buttons]).filter(Boolean),
Button({ type: "button", onclick: close }, tt("close")()),
]),
]), ]),
$html("div", { $html("div", { class: "modal-action flex gap-2" }, [
class: "modal-backdrop bg-black/20", ...(Array.isArray(buttons) ? buttons : [buttons]).filter(Boolean),
onclick: close Button({ type: "button", onclick: close }, tt("close")()),
}) ]),
]),
$html("form", {
method: "dialog",
class: "modal-backdrop",
onsubmit: close
}, [
$html("button", { onclick: close }, "close")
]) ])
); ]);
}; };