Rebuild all components

components/Autocomplete.js

@@ -2,20 +2,19 @@
 import { $, Tag, For, Watch } from "sigpro";
 
 export const Autocomplete = (props) => {
-  const { class: className, items = [], value, onselect, placeholder, ...rest } = props;
-
-  const query = $(() => {
-    const v = typeof value === "function" ? value() : value;
-    return v || "";
-  });
-  
+  const query = $("");
   const isOpen = $(false);
   const cursor = $(-1);
   const filteredItems = $([]);
 
+  Watch(() => {
+    const v = typeof props.value === "function" ? props.value() : props.value;
+    return v || "";
+  }, (newVal) => query(newVal));
+
   Watch(() => {
     const q = String(query()).toLowerCase();
-    const allItems = typeof items === "function" ? items() : items;
+    const allItems = typeof props.items === "function" ? props.items() : props.items;
     const filtered = q
       ? allItems.filter((item) =>
           (typeof item === "string" ? item : item.label).toLowerCase().includes(q)
@@ -28,8 +27,8 @@ export const Autocomplete = (props) => {
     const display = typeof item === "string" ? item : item.label;
     const actual = typeof item === "string" ? item : item.value;
     query(display);
-    if (typeof value === "function") value(actual);
-    onselect?.(item);
+    if (typeof props.value === "function") props.value(actual);
+    props.onselect?.(item);
     isOpen(false);
     cursor(-1);
   };
@@ -51,22 +50,22 @@ export const Autocomplete = (props) => {
     }
   };
 
-  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" }, [
       Tag("span", { class: "icon-[lucide--search]" }),
       Tag("input", {
-        ...rest,
+        ...props,
         type: "text",
         class: "grow",
         value: query,
-        placeholder: placeholder || "Buscar...",
+        placeholder: props.placeholder || "Buscar...",
         onfocus: () => isOpen(true),
         onblur: () => setTimeout(() => isOpen(false), 150),
         onkeydown: handleKeyDown,
         oninput: (e) => {
           const newVal = e.target.value;
           query(newVal);
-          if (typeof value === "function") value(newVal);
+          if (typeof props.value === "function") props.value(newVal);
           isOpen(true);
           cursor(-1);
         }
@@ -87,7 +86,7 @@ export const Autocomplete = (props) => {
         ]),
         (item, idx) => (typeof item === "string" ? item : item.value) + idx
       ),
-      () => filteredItems().length === 0 && Tag("li", { class: "p-2 text-center opacity-50" }, "Sin resultados")
+      () => filteredItems().length === 0 ? Tag("li", { class: "flex justify-center p-4 opacity-50" }, Tag("span", { class: "icon-[lucide--search-x] text-2xl" })) : null
     ])
   ]);
 };