remode vilterlist
This commit is contained in:
@@ -1,55 +0,0 @@
|
|||||||
// components/FilterList.js
|
|
||||||
import { $, Tag, For, Watch } from "sigpro";
|
|
||||||
|
|
||||||
export const FilterList = (props) => {
|
|
||||||
const { items, filterKeys = ["label"], placeholder = "Filtrar...", renderItem, onSelect, class: className } = props;
|
|
||||||
|
|
||||||
const filterText = $("");
|
|
||||||
const filteredItems = $([]);
|
|
||||||
|
|
||||||
const updateFiltered = () => {
|
|
||||||
const q = String(filterText()).toLowerCase();
|
|
||||||
// items puede ser función, señal o array plano
|
|
||||||
const allItems = typeof items === "function" ? items() : items || [];
|
|
||||||
if (!q) {
|
|
||||||
filteredItems([...allItems]);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const filtered = allItems.filter(item =>
|
|
||||||
filterKeys.some(key => {
|
|
||||||
const val = typeof item === "string" ? item : item[key];
|
|
||||||
return String(val || "").toLowerCase().includes(q);
|
|
||||||
})
|
|
||||||
);
|
|
||||||
filteredItems(filtered);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Ejecutar inmediatamente al montar y luego reactivamente cuando cambie items o filterText
|
|
||||||
updateFiltered();
|
|
||||||
Watch(() => {
|
|
||||||
// Dependencias: items (evaluado) y filterText
|
|
||||||
const it = typeof items === "function" ? items() : items;
|
|
||||||
return { it, ft: filterText() };
|
|
||||||
}, () => updateFiltered());
|
|
||||||
|
|
||||||
return Tag("div", { class: `filter-list flex flex-col ${className ?? ''}` }, [
|
|
||||||
Tag("div", { class: "p-2 border-b border-base-300" }, [
|
|
||||||
Tag("label", { class: "input input-sm input-bordered flex items-center gap-2 w-full" }, [
|
|
||||||
Tag("span", { class: "icon-[lucide--search] opacity-50" }),
|
|
||||||
Tag("input", {
|
|
||||||
type: "text",
|
|
||||||
class: "grow",
|
|
||||||
placeholder,
|
|
||||||
value: filterText,
|
|
||||||
oninput: (e) => filterText(e.target.value),
|
|
||||||
ref: (el) => { if (el && props.autoFocus) el.focus(); }
|
|
||||||
})
|
|
||||||
])
|
|
||||||
]),
|
|
||||||
Tag("div", { class: "max-h-60 overflow-y-auto" }, [
|
|
||||||
For(filteredItems, (item, idx) =>
|
|
||||||
renderItem(item, idx, () => onSelect?.(item))
|
|
||||||
)
|
|
||||||
])
|
|
||||||
]);
|
|
||||||
};
|
|
||||||
Reference in New Issue
Block a user