changed to new functions

components/autocomplete.js

@@ -1,5 +1,5 @@
 // components/Autocomplete.js
-import { $, Tag, For, Watch } from "sigpro";
+import { $, h, each, watch } from "sigpro";
 
 export const Autocomplete = (props) => {
   const query = $("");
@@ -7,12 +7,12 @@ export const Autocomplete = (props) => {
   const cursor = $(-1);
   const filteredItems = $([]);
 
-  Watch(() => {
+  watch(() => {
     const v = typeof props.value === "function" ? props.value() : props.value;
     return v || "";
   }, (newVal) => setTimeout(() => query(newVal), 0));
 
-  Watch(() => {
+  watch(() => {
     const q = String(query()).toLowerCase();
     const allItems = typeof props.items === "function" ? props.items() : props.items;
     const filtered = q
@@ -50,10 +50,10 @@ export const Autocomplete = (props) => {
     }
   };
 
-  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", {
+  return h("div", { class: `relative w-full ${props.class ?? ''}` }, [
+    h("label", { class: "input input-bordered w-full" }, [
+      h("span", { class: "icon-[lucide--search]" }),
+      h("input", {
         ...props,
         type: "text",
         class: "grow",
@@ -72,13 +72,13 @@ export const Autocomplete = (props) => {
       })
     ]),
 
-    Tag("ul", {
+    h("ul", {
       class: "absolute left-0 w-full menu bg-base-100 rounded-box mt-1 p-2 shadow-xl max-h-60 overflow-y-auto border border-base-300 z-50",
       style: () => `display: ${isOpen() && filteredItems().length ? "block" : "none"};`
     }, [
-      For(filteredItems, (item, idx) =>
-        Tag("li", {}, [
-          Tag("a", {
+      each(filteredItems, (item, idx) =>
+        h("li", {}, [
+          h("a", {
             class: () => `block w-full ${cursor() === idx ? "active bg-primary text-primary-content" : ""}`,
             onclick: () => pick(item),
             onmouseenter: () => cursor(idx)
@@ -86,7 +86,7 @@ export const Autocomplete = (props) => {
         ]),
         (item, idx) => (typeof item === "string" ? item : item.value) + idx
       ),
-      () => filteredItems().length === 0 ? Tag("li", { class: "flex justify-center p-4 opacity-50" }, Tag("span", { class: "icon-[lucide--search-x] text-2xl" })) : null
+      () => filteredItems().length === 0 ? h("li", { class: "flex justify-center p-4 opacity-50" }, h("span", { class: "icon-[lucide--search-x] text-2xl" })) : null
     ])
   ]);
 };