Autocomplete works with array and objects

Readme.md

@@ -36,9 +36,9 @@ Unlike heavy frameworks, SigPro UI focuses on a **"Zero-Build"** philosophy, all
 ### ESM / Bundler
 
 ```bash
-npm install sigpro sigpro-ui
+npm install sigpro-ui
 # or
-bun add sigpro sigpro-ui
+bun add sigpro-ui
 ```
 
 ### CDN (Browser - All-in-One)
@@ -57,8 +57,7 @@ bun add sigpro sigpro-ui
 ### ESM / Modular (Tree Shaking)
 
 ```javascript
-import { $, mount, watch, h } from "sigpro";
-import { Button, Modal, Input, Alert } from "sigpro-ui";
+import { $, mount, watch, h, Button, Modal, Input, Alert } from "sigpro-ui";
 import "sigpro-ui/css";
 
 const App = () => {

dist/sigpro-ui.css

@@ -3408,6 +3408,9 @@
       font-weight: 600;
     }
   }
+  .mb-2 {
+    margin-bottom: calc(var(--spacing) * 2);
+  }
   .mb-4 {
     margin-bottom: calc(var(--spacing) * 4);
   }
@@ -4495,6 +4498,9 @@
   .gap-8 {
     gap: calc(var(--spacing) * 8);
   }
+  .gap-10 {
+    gap: calc(var(--spacing) * 10);
+  }
   .space-y-1 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;

dist/sigpro-ui.esm.js

@@ -637,7 +637,11 @@ if (typeof window !== "undefined") {
 var val = (val2) => typeof val2 === "function" ? val2() : val2;
 var getBy = (item, field = "label") => item && typeof item === "object" ? item[field] : item;
 var cls = (...classes) => classes.filter(Boolean).join(" ").trim();
-var filterBy = (items, query, field = "label", q = String(query).toLowerCase()) => !query ? val(items) : val(items).filter((item) => String(item && typeof item === "object" ? item[field] : item).toLowerCase().includes(q));
+var filterBy = (items, query, field = "label") => {
+  const q = String(val(query) || "").toLowerCase();
+  const list = (val(items) || []).map((i) => typeof i === "object" ? i : { label: i, value: i });
+  return !q ? list : list.filter((item) => String(item[field] || "").toLowerCase().includes(q));
+};
 var rand = (r) => `${r}-${Math.random().toString(36).slice(2, 9)}`;
 var hide = () => document.activeElement?.blur();
 var lang = {
@@ -694,7 +698,7 @@ var Autocomplete = ({ items, value, onselect, placeholder = "...", ...props }) =
           onmousedown: (e) => e.preventDefault(),
           onclick: () => pick(item)
         }, getBy(item))
-      ]), (item) => getBy(item)),
+      ]), "value"),
       () => filtered().length === 0 ? h("li", { class: "p-4 opacity-50 text-center" }, "Sin resultados") : null
     ]))
   ]);

dist/sigpro-ui.js

@@ -667,7 +667,11 @@
   var val = (val2) => typeof val2 === "function" ? val2() : val2;
   var getBy = (item, field = "label") => item && typeof item === "object" ? item[field] : item;
   var cls = (...classes) => classes.filter(Boolean).join(" ").trim();
-  var filterBy = (items, query, field = "label", q = String(query).toLowerCase()) => !query ? val(items) : val(items).filter((item) => String(item && typeof item === "object" ? item[field] : item).toLowerCase().includes(q));
+  var filterBy = (items, query, field = "label") => {
+    const q = String(val(query) || "").toLowerCase();
+    const list = (val(items) || []).map((i) => typeof i === "object" ? i : { label: i, value: i });
+    return !q ? list : list.filter((item) => String(item[field] || "").toLowerCase().includes(q));
+  };
   var rand = (r) => `${r}-${Math.random().toString(36).slice(2, 9)}`;
   var hide = () => document.activeElement?.blur();
   var lang = {
@@ -724,7 +728,7 @@
             onmousedown: (e) => e.preventDefault(),
             onclick: () => pick(item)
           }, getBy(item))
-        ]), (item) => getBy(item)),
+        ]), "value"),
         () => filtered().length === 0 ? h("li", { class: "p-4 opacity-50 text-center" }, "Sin resultados") : null
       ]))
     ]);

docs/demo.md

@@ -59,26 +59,45 @@ mount(
 <div id="demo-autocomplete"></div>
 
 ```js
-const selected = $("");
-const items = [
-  "Apple",
-  "Banana",
-  "Orange",
-  "Mango",
-  "Carrot",
-  "Broccoli",
-  "Spinach",
-  "Potato",
+const selectedFruit = $("");
+const fruitItems = [
+  { label: "Apple", value: "apple" },
+  { label: "Banana", value: "banana" },
+  { label: "Orange", value: "orange" },
+  { label: "Mango", value: "mango" },
+  { label: "Carrot", value: "carrot" },
+  { label: "Broccoli", value: "broccoli" },
+  { label: "Spinach", value: "spinach" },
+  { label: "Potato", value: "potato" },
 ];
 
+const selectedColor = $("");
+const colorItems = ["Red", "Blue", "Green", "Yellow", "Black", "White", "Purple", "Cyan"];
+
 mount(
-  Autocomplete({
-    items,
-    value: selected,
-    placeholder: "Search fruit or vegetable…",
-    onselect: (val) => console.log("Selected:", val),
-  }),
-  "#demo-autocomplete",
+  h('div', { class: 'p-8 flex flex-col gap-10' }, [
+    h('div', {}, [
+      h('h3', { class: 'font-bold mb-2' }, 'Objetos:'),
+      Autocomplete({
+        items: fruitItems,
+        value: selectedFruit,
+        placeholder: "Search fruit...",
+        onselect: (v) => console.log("Obj:", v)
+      }),
+      h('span', { class: 'text-xs' }, () => `Signal: ${selectedFruit()}`)
+    ]),
+    h('div', {}, [
+      h('h3', { class: 'font-bold mb-2' }, 'Array Plano:'),
+      Autocomplete({
+        items: colorItems,
+        value: selectedColor,
+        placeholder: "Search color...",
+        onselect: (v) => console.log("Str:", v)
+      }),
+      h('span', { class: 'text-xs' }, () => `Signal: ${selectedColor()}`)
+    ])
+  ]),
+  "#demo-autocomplete"
 );
 ```
 

docs/install.md

@@ -24,7 +24,7 @@ bun add sigpro-ui
 ### ESM / Module usage
 
 ```javascript
-import { Input, Button, Alert } from "sigpro-ui";
+import { $, Input, Button, Alert } from "sigpro-ui";
 import "sigpro-ui/css";
 
 const App = () => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sigpro-ui",
-  "version": "1.2.8",
+  "version": "1.2.9",
   "type": "module",
   "license": "MIT",
    "author": {
@@ -43,11 +43,10 @@
   },
   "homepage": "https://sigpro.natxocc.com/ui/#/",
   "scripts": {
-    "del": "bun pm cache rm && rm -f bun.lockb $$ rm -f bun.lock",
+    "del": "bun pm cache rm && rm -f bun.lockb && rm -f bun.lock",
     "clean": "rm -rf ./dist ./css/*.css ./docs/*.js ./docs/*.css",
     "build:css": "tailwindcss -i ./sigpro-ui.css -o ./dist/sigpro-ui.css --content './src/**/*.js' && du -h ./dist/sigpro-ui.css",
     "build:cssmin": "tailwindcss -i ./sigpro-ui.css -o ./dist/sigpro-ui.min.css --content './src/**/*.js' --minify && du -h ./dist/sigpro-ui.css",
-    "build:js": "bun run build:js:iife && bun run build:js:esm",
     "build:js:iife": "bun build ./index.js --bundle --outfile=./dist/sigpro-ui.js --format=iife --global-name=SigProUI",
     "build:js:iife:min": "bun build ./index.js --bundle --outfile=./dist/sigpro-ui.min.js --format=iife --global-name=SigProUI --minify",
     "build:js:esm": "bun build ./index.js --bundle --outfile=./dist/sigpro-ui.esm.js --format=esm",

sigpro-ui.js

@@ -11,7 +11,11 @@ export { $, $$, watch, batch, h, Fragment, mount, when, each, router, onUnmount,
 const val = val => typeof val === "function" ? val() : val;
 const getBy = (item, field = 'label') => (item && typeof item === 'object') ? item[field] : item;
 const cls = (...classes) => classes.filter(Boolean).join(' ').trim();
-const filterBy = (items, query, field = 'label', q = String(query).toLowerCase()) => !query ? val(items) : val(items).filter(item => String(item && typeof item === 'object' ? item[field] : item).toLowerCase().includes(q));
+const filterBy = (items, query, field = 'label') => {
+  const q = String(val(query) || '').toLowerCase();
+  const list = (val(items) || []).map(i => typeof i === 'object' ? i : { label: i, value: i });
+  return !q ? list : list.filter(item => String(item[field] || '').toLowerCase().includes(q));
+};
 const rand = (r) => `${r}-${Math.random().toString(36).slice(2, 9)}`
 export const hide = () => document.activeElement?.blur()
 
@@ -78,7 +82,7 @@ export const Autocomplete = ({ items, value, onselect, placeholder = '...', ...p
               onclick: () => pick(item)
             }, getBy(item))
           ]),
-          (item) => getBy(item)
+          'value'
         ),
         () => filtered().length === 0
           ? h('li', { class: 'p-4 opacity-50 text-center' }, 'Sin resultados')