Modal

src/components/Modal.js

@@ -5,27 +5,32 @@ import { Button } from "./Button.js";
 /** MODAL */
 export const Modal = (props, children) => {
   const { title, buttons, open, ...rest } = props;
-  const close = () => open(false);
+
+  const close = (e) => {
+    if (e && e.preventDefault) e.preventDefault();
+    open(false);
+  };
 
   return $if(open, () =>
-    $html("dialog", { ...rest, class: "modal modal-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,
-        typeof children === "function" ? children() : children,
+        $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({ onclick: close }, tt("close")()),
+          Button({ type: "button", onclick: close }, tt("close")()),
         ]),
       ]),
-      $html(
-        "form",
-        {
-          method: "dialog",
-          class: "modal-backdrop",
-          onclick: (e) => (e.preventDefault(), close()),
-        },
-        [$html("button", {}, "close")],
-      ),
-    ]),
+      $html("div", { 
+        class: "modal-backdrop bg-black/20", 
+        onclick: close 
+      })
+    ])
   );
-};
+};