Before repair nav components

components/discarted/Datepicker.js

@@ -0,0 +1,83 @@
+// components/Datepicker.js
+import { $, h, when, watch } from "sigpro";
+import { Calendar } from "./Calendar.js";
+
+export const Datepicker = (props) => {
+  const isOpen = $(false);
+  const isRangeMode = () => {
+    const r = typeof props.range === "function" ? props.range() : props.range;
+    return r === true;
+  };
+  
+  const displayValue = $("");
+  
+  watch(() => {
+    const v = typeof props.value === "function" ? props.value() : props.value;
+    if (!v) {
+      displayValue("");
+      return;
+    }
+    let text = "";
+    if (typeof v === "string") {
+      text = (props.hour && v.includes("T")) ? v.replace("T", " ") : v;
+    } else if (v.start && v.end) {
+      const startStr = props.hour && v.startHour !== undefined 
+        ? `${v.start} ${String(v.startHour).padStart(2, "0")}:00` 
+        : v.start;
+      const endStr = props.hour && v.endHour !== undefined 
+        ? `${v.end} ${String(v.endHour).padStart(2, "0")}:00` 
+        : v.end;
+      text = `${startStr} - ${endStr}`;
+    } else if (v.start) {
+      const startStr = props.hour && v.startHour !== undefined 
+        ? `${v.start} ${String(v.startHour).padStart(2, "0")}:00` 
+        : v.start;
+      text = `${startStr}...`;
+    }
+    displayValue(text);
+  });
+  
+  const handleCalendarChange = (newValue) => {
+    if (typeof props.value === "function") props.value(newValue);
+    if (!isRangeMode() || (newValue?.end !== undefined && newValue?.end !== null)) {
+      isOpen(false);
+    }
+  };
+  
+  const toggleOpen = (e) => {
+    e.stopPropagation();
+    isOpen(!isOpen());
+  };
+  
+  return h("div", { class: `relative w-full ${props.class ?? ''}` }, [
+    h("label", { class: "input input-bordered w-full", onclick: toggleOpen }, [
+      h("span", { class: "icon-[lucide--calendar]" }),
+      h("input", {
+        ...props,
+        type: "text",
+        class: "grow",
+        value: displayValue,
+        readonly: true,
+        placeholder: props.placeholder || (isRangeMode() ? "Seleccionar rango..." : "Seleccionar fecha...")
+      })
+    ]),
+    
+    when(isOpen, () =>
+      h("div", {
+        class: "absolute left-0 mt-2 z-[100]",
+        onclick: (e) => e.stopPropagation()
+      }, [
+        Calendar({
+          value: props.value,
+          range: isRangeMode(),
+          hour: props.hour,
+          onChange: handleCalendarChange
+        })
+      ])
+    ),
+    
+    when(isOpen, () => 
+      h("div", { class: "fixed inset-0 z-[90]", onclick: () => isOpen(false) })
+    )
+  ]);
+};