Modal

dist/sigpro-ui.esm.js

@@ -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({