Datepicker And Color picker with dropdown

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)