Rebuild all components

components/Datepicker.js

@@ -3,35 +3,33 @@ import { $, Tag, If, Watch } from "sigpro";
 import { Calendar } from "./Calendar.js";
 
 export const Datepicker = (props) => {
-  const { class: className, value, range, placeholder, hour = false, ...rest } = props;
-  
   const isOpen = $(false);
   const isRangeMode = () => {
-    const r = typeof range === "function" ? range() : range;
+    const r = typeof props.range === "function" ? props.range() : props.range;
     return r === true;
   };
   
   const displayValue = $("");
   
   Watch(() => {
-    const v = typeof value === "function" ? value() : value;
+    const v = typeof props.value === "function" ? props.value() : props.value;
     if (!v) {
       displayValue("");
       return;
     }
     let text = "";
     if (typeof v === "string") {
-      text = (hour && v.includes("T")) ? v.replace("T", " ") : v;
+      text = (props.hour && v.includes("T")) ? v.replace("T", " ") : v;
     } else if (v.start && v.end) {
-      const startStr = hour && v.startHour !== undefined 
+      const startStr = props.hour && v.startHour !== undefined 
         ? `${v.start} ${String(v.startHour).padStart(2, "0")}:00` 
         : v.start;
-      const endStr = hour && v.endHour !== undefined 
+      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 = hour && v.startHour !== undefined 
+      const startStr = props.hour && v.startHour !== undefined 
         ? `${v.start} ${String(v.startHour).padStart(2, "0")}:00` 
         : v.start;
       text = `${startStr}...`;
@@ -40,7 +38,7 @@ export const Datepicker = (props) => {
   });
   
   const handleCalendarChange = (newValue) => {
-    if (typeof value === "function") value(newValue);
+    if (typeof props.value === "function") props.value(newValue);
     if (!isRangeMode() || (newValue?.end !== undefined && newValue?.end !== null)) {
       isOpen(false);
     }
@@ -51,16 +49,16 @@ export const Datepicker = (props) => {
     isOpen(!isOpen());
   };
   
-  return Tag("div", { class: `relative w-full ${className || ''}`.trim() }, [
+  return Tag("div", { class: `relative w-full ${props.class ?? ''}` }, [
     Tag("label", { class: "input input-bordered w-full", onclick: toggleOpen }, [
       Tag("span", { class: "icon-[lucide--calendar]" }),
       Tag("input", {
-        ...rest,
+        ...props,
         type: "text",
         class: "grow",
         value: displayValue,
         readonly: true,
-        placeholder: placeholder || (isRangeMode() ? "Seleccionar rango..." : "Seleccionar fecha...")
+        placeholder: props.placeholder || (isRangeMode() ? "Seleccionar rango..." : "Seleccionar fecha...")
       })
     ]),
     
@@ -70,9 +68,9 @@ export const Datepicker = (props) => {
         onclick: (e) => e.stopPropagation()
       }, [
         Calendar({
-          value,
+          value: props.value,
           range: isRangeMode(),
-          hour,
+          hour: props.hour,
           onChange: handleCalendarChange
         })
       ])