dialog no modal

src/sigpro.ui.js

@@ -109,38 +109,39 @@ export const ui = {
     ]);
   },
   dialog: (p, c) => {
-    const pos = $(p.pos || { x: 0, y: 0 });
+    const pos = $(p.pos || { x: 100, y: 100 });
+    const show = $(p.show || false);
+    const anim = $(false);
 
-    return h("dialog", { open: p.show, class: `modal ${p.class || ''}` }, [
+    watch(show, s => s ? setTimeout(() => anim(true), 10) : anim(false));
+
+    return h("div", {
+      class: () => `fixed z-50 transition-all duration-300 ${show() ? (anim() ? 'opacity-100 scale-100' : 'opacity-0 scale-95') : 'opacity-0 scale-95 pointer-events-none'
+        }`,
+      style: () => `left: ${pos().x}px; top: ${pos().y}px;`
+    }, [
       h("div", {
-            class: "modal-box", 
+        class: `bg-base-100 rounded-box shadow-2xl border border-base-300 ${p.class || ''}`,
-            style: () => `transform: translate(${pos().x}px, ${pos().y}px)`,
         onclick: e => e.stopPropagation()
       }, [
         p.title ? h("div", {
-                class: "flex justify-between items-center cursor-move p-2 border-b select-none",
+          class: "flex justify-between items-center cursor-move p-2 border-b select-none bg-base-200 rounded-t-box",
           onmousedown: e => {
-                    const startX = e.clientX - pos().x;
+            const sx = e.clientX - pos().x, sy = e.clientY - pos().y;
-                    const startY = e.clientY - pos().y;
+            const mv = ev => pos({ x: ev.clientX - sx, y: ev.clientY - sy });
-                    const onMove = ev => pos({ x: ev.clientX - startX, y: ev.clientY - startY });
+            const up = () => { document.removeEventListener('mousemove', mv); document.removeEventListener('mouseup', up); };
-                    const onUp = () => {
+            document.addEventListener('mousemove', mv); document.addEventListener('mouseup', up);
-                        document.removeEventListener('mousemove', onMove);
-                        document.removeEventListener('mouseup', onUp);
-                    };
-                    document.addEventListener('mousemove', onMove);
-                    document.addEventListener('mouseup', onUp);
             e.preventDefault();
           }
         }, [
           h("span", { class: "font-bold" }, p.title),
-                h("button", { class: "btn btn-sm btn-circle btn-ghost", onclick: () => p.show(false) }, "✕")
+          h("button", { class: "btn btn-sm btn-circle btn-ghost", onclick: () => show(false) }, "✕")
         ]) : null,
         h("div", { class: "p-4" }, c),
-            p.footer ? h("div", { class: "modal-action p-2 border-t" }, p.footer) : null
+        p.footer ? h("div", { class: "p-2 border-t flex justify-end gap-2" }, p.footer) : null
-        ]),
+      ])
-        h("form", { method: "dialog", class: "modal-backdrop", onclick: () => p.show(false) })
     ]);
-},
+  },
   divider: (p) => h("div", { ...p, class: `divider ${p.class || ''}` }),
   drawer: (p, c) => h("div", { ...p, class: `drawer ${p.class || ''}` }, c),
   drawer_toggle: (p) => h("input", { ...p, type: "checkbox", class: `drawer-toggle ${p.class || ''}` }),