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

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

@@ -1068,37 +1068,51 @@ var SigProUI = (function (exports, sigpro) {
Menu: Menu
});
/** MODAL */
/** MODAL (Recommended Method: HTML <dialog>) */
const Modal = (props, children) => {
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) => {
if (e && e.preventDefault) e.preventDefault();
open(false);
};
return sigpro.$if(open, () =>
sigpro.$html("dialog", {
...rest,
class: "modal modal-open",
oncancel: close
}, [
sigpro.$html("div", { class: "modal-box" }, [
title ? sigpro.$html("h3", { class: "text-lg font-bold mb-4" }, title) : null,
sigpro.$html("div", { class: "py-2" }, [
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")()),
]),
return sigpro.$html("dialog", {
...rest,
ref: dialogRef,
class: "modal",
oncancel: close
}, [
sigpro.$html("div", { class: "modal-box" }, [
title ? sigpro.$html("h3", { class: "text-lg font-bold mb-4" }, title) : null,
sigpro.$html("div", { class: "py-2" }, [
typeof children === "function" ? children() : children
]),
sigpro.$html("div", {
class: "modal-backdrop bg-black/20",
onclick: close
})
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("form", {
method: "dialog",
class: "modal-backdrop",
onsubmit: close
}, [
sigpro.$html("button", { onclick: close }, "close")
])
);
]);
};
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