dislog

src/sigpro.ui.js

@@ -112,37 +112,29 @@ export const ui = {
     const pos = $(p.pos || { x: 100, y: 100 });
     const show = $(p.show || false);
     const anim = $(false);
-    
+
     watch(show, s => s ? setTimeout(() => anim(true), 10) : anim(false));
-    
+
-    return h("div", { 
+    return h("div", {
-        class: () => `fixed z-50 transition-opacity duration-300 ${
+      class: () => `fixed z-50 transition-opacity duration-300 ${show() && anim() ? 'opacity-100 scale-100' : 'opacity-0 scale-95 pointer-events-none'}`,
-            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; transition: left 50ms, top 50ms;`
-        }`,
-        style: () => `left: ${pos().x}px; top: ${pos().y}px; transition: left 50ms, top 50ms;`
     }, [
-        h("div", { 
+      h("div", { class: `bg-base-100 rounded-box shadow-2xl border ${p.class || ''}` }, [
-            class: `bg-base-100 rounded-box shadow-2xl border border-base-300 ${p.class || ''}`,
+        p.title && h("div", {
-            onclick: e => e.stopPropagation()
+          class: "flex justify-between items-center cursor-move p-2 border-b select-none bg-base-200 rounded-t-box",
-        }, [
+          onmousedown: e => {
-            p.title ? h("div", { 
+            const s = { x: e.clientX - pos().x, y: e.clientY - pos().y };
-                class: "flex justify-between items-center cursor-move p-2 border-b select-none bg-base-200 rounded-t-box",
+            const m = ev => pos({ x: ev.clientX - s.x, y: ev.clientY - s.y });
-                onmousedown: e => {
+            const u = () => { document.removeEventListener('mousemove', m); document.removeEventListener('mouseup', u); };
-                    const sx = e.clientX - pos().x, sy = e.clientY - pos().y;
+            document.addEventListener('mousemove', m); document.addEventListener('mouseup', u);
-                    const mv = ev => pos({ x: ev.clientX - sx, y: ev.clientY - sy });
+            e.preventDefault();
-                    const up = () => { document.removeEventListener('mousemove', mv); document.removeEventListener('mouseup', up); };
+          }
-                    document.addEventListener('mousemove', mv); document.addEventListener('mouseup', up);
+        }, [h("span", { class: "font-bold" }, p.title), h("button", { class: "btn btn-sm btn-circle btn-ghost", onclick: () => show(false) }, "✕")]),
-                    e.preventDefault();
+        h("div", { class: "p-4" }, c),
-                }
+        p.footer && h("div", { class: "p-2 border-t flex justify-end gap-2" }, p.footer)
-            }, [
+      ])
-                h("span", { class: "font-bold" }, p.title),
-                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: "p-2 border-t flex justify-end gap-2" }, p.footer) : null
-        ])
     ]);
-},
+  },
   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 || ''}` }),
@@ -260,7 +252,7 @@ export const ui = {
           onclick: (e) => { e.stopPropagation(); close() }
         }, h('span', { class: 'icon-[lucide--x] w-3 h-3' })) : null,
       ]),
-      div({ class: `tab-content ${p?.classContent || ''}` }, p.content),
+      div({ class: `tab-content bg-base-100 border-base-300 p-6 ${p?.classContent || ''}` }, p.content),
     ]
   },
   textarea: (p) => h("textarea", { ...p, class: `textarea ${p.class || ''}` }),