Datepicker And Color picker with dropdown

dist/sigpro-ui.css

@@ -2658,9 +2658,6 @@
       }
     }
   }
-  .inset-0 {
-    inset: calc(var(--spacing) * 0);
-  }
   .chat-end {
     @layer daisyui.l1.l2 {
       place-items: end;
@@ -2972,12 +2969,6 @@
   .z-50 {
     z-index: 50;
   }
-  .z-\[90\] {
-    z-index: 90;
-  }
-  .z-\[100\] {
-    z-index: 100;
-  }
   .z-\[9999\] {
     z-index: 9999;
   }

dist/sigpro-ui.esm.js

@@ -724,13 +724,11 @@ var Calendar = (p2) => {
       }
     ]),
     p2.hour ? O("div", { class: "mt-3 pt-2 border-t border-base-300" }, rangeMode() ? O("div", { class: "flex gap-4" }, [HourSlider({ value: startHour, onChange: (h) => startHour(h) }), HourSlider({ value: endHour, onChange: (h) => endHour(h) })]) : HourSlider({ value: startHour, onChange: (h) => startHour(h) })) : null,
-    O("div", { class: cls("flex gap-2 mt-3 pt-2", !p2.hour && "border-t border-base-300") }, [
-      O("button", {
-        type: "button",
-        class: "btn btn-xs flex-1",
-        onclick: () => close()
-      }, Icon("icon-[lucide--x]"))
-    ])
+    O("button", {
+      type: "button",
+      class: "btn btn-xs w-full",
+      onclick: () => close()
+    }, Icon("icon-[lucide--x]"))
   ]);
 };
 var Card = (p2, c) => O("div", { ...p2, class: cls("card", p2.class) }, c);
@@ -754,7 +752,6 @@ var Colorpicker = (p2) => {
     ]),
     DropdownContent({ class: "p-3 bg-base-100 rounded-box shadow-xl w-64" }, ColorPalette({ value: p2.value, onchange: (c) => {
       isFn(p2.value) ? p2.value(c) : p2.onchange?.(c);
-      close();
     } }))
   ]);
 };
@@ -845,7 +842,6 @@ var ColorPalette = (p2) => {
   ];
 };
 var Datepicker = (p2) => {
-  const isOpen = S(false);
   const displayValue = S("");
   const rangeMode = () => get(p2.range) === true;
   R(() => {
@@ -871,27 +867,33 @@ var Datepicker = (p2) => {
     else
       p2.onChange?.(val);
     if (!rangeMode() || val?.end != null)
-      isOpen(false);
+      close();
   };
-  return O("div", { class: cls("relative w-full", p2.class) }, [
-    O("label", { class: "input input-bordered w-full", onclick: (e) => {
-      e.stopPropagation();
-      isOpen(!isOpen());
-    } }, [
-      O("span", { class: "icon-[lucide--calendar]" }),
-      O("input", {
-        ...p2,
-        type: "text",
-        class: "grow",
-        value: displayValue,
-        readonly: true,
-        placeholder: p2.placeholder || (rangeMode() ? "Seleccionar rango..." : "Seleccionar fecha...")
-      })
+  return Dropdown({ class: cls("w-full", p2.class) }, [
+    O("label", {
+      tabindex: "0",
+      role: "button",
+      class: "input input-bordered w-full flex items-center gap-2 cursor-pointer"
+    }, [
+      O("span", { class: "icon-[lucide--calendar] shrink-0" }),
+      O("span", {
+        class: () => `grow text-left truncate ${!displayValue() ? "opacity-50" : ""}`
+      }, () => displayValue() || p2.placeholder || (rangeMode() ? "Seleccionar rango..." : "Seleccionar fecha..."))
     ]),
-    z(isOpen, () => [
-      O("div", { class: "fixed inset-0 z-[90]", onclick: () => isOpen(false) }),
-      O("div", { class: "absolute left-0 mt-2 z-[100]", onclick: (e) => e.stopPropagation() }, Calendar({ value: p2.value, range: rangeMode(), hour: p2.hour, onChange: handleChange }))
-    ])
+    DropdownContent({ class: "p-0 bg-base-100 rounded-box shadow-xl" }, Calendar({
+      value: p2.value,
+      range: rangeMode(),
+      hour: p2.hour,
+      onChange: handleChange,
+      onAccept: () => {
+        p2.onAccept?.();
+        close();
+      },
+      onCancel: () => {
+        p2.onCancel?.();
+        close();
+      }
+    }))
   ]);
 };
 var Drawer = (p2, c) => div({ ...p2, class: cls("drawer", p2.class) }, c);

dist/sigpro-ui.js

@@ -755,13 +755,11 @@
         }
       ]),
       p2.hour ? O("div", { class: "mt-3 pt-2 border-t border-base-300" }, rangeMode() ? O("div", { class: "flex gap-4" }, [HourSlider({ value: startHour, onChange: (h) => startHour(h) }), HourSlider({ value: endHour, onChange: (h) => endHour(h) })]) : HourSlider({ value: startHour, onChange: (h) => startHour(h) })) : null,
-      O("div", { class: cls("flex gap-2 mt-3 pt-2", !p2.hour && "border-t border-base-300") }, [
-        O("button", {
-          type: "button",
-          class: "btn btn-xs flex-1",
-          onclick: () => close()
-        }, Icon("icon-[lucide--x]"))
-      ])
+      O("button", {
+        type: "button",
+        class: "btn btn-xs w-full",
+        onclick: () => close()
+      }, Icon("icon-[lucide--x]"))
     ]);
   };
   var Card = (p2, c) => O("div", { ...p2, class: cls("card", p2.class) }, c);
@@ -785,7 +783,6 @@
       ]),
       DropdownContent({ class: "p-3 bg-base-100 rounded-box shadow-xl w-64" }, ColorPalette({ value: p2.value, onchange: (c) => {
         isFn(p2.value) ? p2.value(c) : p2.onchange?.(c);
-        close();
       } }))
     ]);
   };
@@ -876,7 +873,6 @@
     ];
   };
   var Datepicker = (p2) => {
-    const isOpen = S(false);
     const displayValue = S("");
     const rangeMode = () => get(p2.range) === true;
     R(() => {
@@ -902,27 +898,33 @@
       else
         p2.onChange?.(val);
       if (!rangeMode() || val?.end != null)
-        isOpen(false);
+        close();
     };
-    return O("div", { class: cls("relative w-full", p2.class) }, [
-      O("label", { class: "input input-bordered w-full", onclick: (e) => {
-        e.stopPropagation();
-        isOpen(!isOpen());
-      } }, [
-        O("span", { class: "icon-[lucide--calendar]" }),
-        O("input", {
-          ...p2,
-          type: "text",
-          class: "grow",
-          value: displayValue,
-          readonly: true,
-          placeholder: p2.placeholder || (rangeMode() ? "Seleccionar rango..." : "Seleccionar fecha...")
-        })
+    return Dropdown({ class: cls("w-full", p2.class) }, [
+      O("label", {
+        tabindex: "0",
+        role: "button",
+        class: "input input-bordered w-full flex items-center gap-2 cursor-pointer"
+      }, [
+        O("span", { class: "icon-[lucide--calendar] shrink-0" }),
+        O("span", {
+          class: () => `grow text-left truncate ${!displayValue() ? "opacity-50" : ""}`
+        }, () => displayValue() || p2.placeholder || (rangeMode() ? "Seleccionar rango..." : "Seleccionar fecha..."))
       ]),
-      z(isOpen, () => [
-        O("div", { class: "fixed inset-0 z-[90]", onclick: () => isOpen(false) }),
-        O("div", { class: "absolute left-0 mt-2 z-[100]", onclick: (e) => e.stopPropagation() }, Calendar({ value: p2.value, range: rangeMode(), hour: p2.hour, onChange: handleChange }))
-      ])
+      DropdownContent({ class: "p-0 bg-base-100 rounded-box shadow-xl" }, Calendar({
+        value: p2.value,
+        range: rangeMode(),
+        hour: p2.hour,
+        onChange: handleChange,
+        onAccept: () => {
+          p2.onAccept?.();
+          close();
+        },
+        onCancel: () => {
+          p2.onCancel?.();
+          close();
+        }
+      }))
     ]);
   };
   var Drawer = (p2, c) => div({ ...p2, class: cls("drawer", p2.class) }, c);

sigpro-components.js

@@ -218,9 +218,9 @@ export const ColorPalette = (p) => {
     }, Icon('icon-[lucide--x]'))]
 }
 export const Datepicker = (p) => {
-  const isOpen = $(false)
   const displayValue = $("")
   const rangeMode = () => get(p.range) === true
+  
   watch(() => {
     const v = get(p.value)
     if (!v) return displayValue("")
@@ -237,29 +237,40 @@ export const Datepicker = (p) => {
     }
     displayValue(text)
   })
+
   const handleChange = (val) => {
     if (isFn(p.value)) p.value(val)
     else p.onChange?.(val)
-    if (!rangeMode() || val?.end != null) isOpen(false)
+    if (!rangeMode() || val?.end != null) close()
   }
-  return h('div', { class: cls('relative w-full', p.class) }, [
-    h('label', { class: 'input input-bordered w-full', onclick: (e) => { e.stopPropagation(); isOpen(!isOpen()) } }, [
-      h('span', { class: 'icon-[lucide--calendar]' }),
-      h('input', {
-        ...p,
-        type: 'text',
-        class: 'grow',
-        value: displayValue,
-        readonly: true,
-        placeholder: p.placeholder || (rangeMode() ? 'Seleccionar rango...' : 'Seleccionar fecha...')
-      })
+
+  return Dropdown({ class: cls('w-full', p.class) }, [
+    h('label', { 
+      tabindex: '0',  // ← Necesario para que funcione el dropdown
+      role: 'button',  // ← Necesario para que funcione el dropdown
+      class: 'input input-bordered w-full flex items-center gap-2 cursor-pointer' 
+    }, [
+      h('span', { class: 'icon-[lucide--calendar] shrink-0' }),
+      h('span', { 
+        class: () => `grow text-left truncate ${!displayValue() ? 'opacity-50' : ''}`,
+      }, () => displayValue() || p.placeholder || (rangeMode() ? 'Seleccionar rango...' : 'Seleccionar fecha...'))
     ]),
-    when(isOpen, () => [
-      h('div', { class: 'fixed inset-0 z-[90]', onclick: () => isOpen(false) }),
-      h('div', { class: 'absolute left-0 mt-2 z-[100]', onclick: (e) => e.stopPropagation() },
-        Calendar({ value: p.value, range: rangeMode(), hour: p.hour, onChange: handleChange })
-      )
-    ])
+    DropdownContent({ class: 'p-0 bg-base-100 rounded-box shadow-xl' },
+      Calendar({ 
+        value: p.value, 
+        range: rangeMode(), 
+        hour: p.hour, 
+        onChange: handleChange,
+        onAccept: () => {
+          p.onAccept?.()
+          close()
+        },
+        onCancel: () => {
+          p.onCancel?.()
+          close()
+        }
+      })
+    )
   ])
 }
 export const Drawer = (p, c) => div({ ...p, class: cls('drawer', p.class) }, c)