natxocc/sigpro-ui
1
1
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

Solucionados AutoComplete y DatePicker con la nueva SigPro

Browse Source
This commit is contained in:
natxocc
2026-04-14 14:55:27 +02:00
parent ad486c9a23
commit 97bc0eb527
7 changed files with 121 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
dist/sigpro-ui.esm.js vendored
View File

@@ -821,10 +821,12 @@ var Autocomplete = (props) => {
const query = $(val(value) || ""); const query = $(val(value) || "");
const isOpen = $(false); const isOpen = $(false);
const cursor = $(-1); const cursor = $(-1);
const list = $(() => { const list = $([]);
const q = query().toLowerCase(); Watch(() => {
const q = String(query()).toLowerCase();
const data = val(items) || []; const data = val(items) || [];
return q ? data.filter((o) => (typeof o === "string" ? o : o.label).toLowerCase().includes(q)) : data; const filtered = q ? data.filter((o) => (typeof o === "string" ? o : o.label).toLowerCase().includes(q)) : data;
list(filtered);
}); });
const pick = (opt) => { const pick = (opt) => {
const valStr = typeof opt === "string" ? opt : opt.value; const valStr = typeof opt === "string" ? opt : opt.value;
@@ -837,17 +839,17 @@ var Autocomplete = (props) => {
cursor(-1); cursor(-1);
}; };
const nav = (e) => { const nav = (e) => {
const items2 = list(); const currentItems = list();
if (e.key === "ArrowDown") { if (e.key === "ArrowDown") {
e.preventDefault(); e.preventDefault();
isOpen(true); isOpen(true);
cursor(Math.min(cursor() + 1, items2.length - 1)); cursor(Math.min(cursor() + 1, currentItems.length - 1));
} else if (e.key === "ArrowUp") { } else if (e.key === "ArrowUp") {
e.preventDefault(); e.preventDefault();
cursor(Math.max(cursor() - 1, 0)); cursor(Math.max(cursor() - 1, 0));
} else if (e.key === "Enter" && cursor() >= 0) { } else if (e.key === "Enter" && cursor() >= 0) {
e.preventDefault(); e.preventDefault();
pick(items2[cursor()]); pick(currentItems[cursor()]);
} else if (e.key === "Escape") { } else if (e.key === "Escape") {
isOpen(false); isOpen(false);
} }
@@ -1051,25 +1053,25 @@ var Datepicker = (props) => {
isOpen(false); isOpen(false);
} }
}; };
const displayValue = $(() => { const displayValue = $("");
Watch(() => {
const v = val(value); const v = val(value);
if (!v) if (!v) {
return ""; displayValue("");
return;
}
let text = "";
if (typeof v === "string") { if (typeof v === "string") {
if (hour && v.includes("T")) text = hour && v.includes("T") ? v.replace("T", " ") : v;
return v.replace("T", " "); } else if (v.start && v.end) {
return v; const startStr = hour && v.startHour !== undefined ? `${v.start} ${String(v.startHour).padStart(2, "0")}:00` : v.start;
const endStr = 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 ? `${v.start} ${String(v.startHour).padStart(2, "0")}:00` : v.start;
text = `${startStr}...`;
} }
if (v.start && v.end) { displayValue(text);
const startStr = hour && v.startHour ? `${v.start} ${String(v.startHour).padStart(2, "0")}:00` : v.start;
const endStr = hour && v.endHour ? `${v.end} ${String(v.endHour).padStart(2, "0")}:00` : v.end;
return `${startStr} - ${endStr}`;
}
if (v.start) {
const startStr = hour && v.startHour ? `${v.start} ${String(v.startHour).padStart(2, "0")}:00` : v.start;
return `${startStr}...`;
}
return "";
}); });
const move = (m) => { const move = (m) => {
const d = internalDate(); const d = internalDate();
@@ -1198,7 +1200,7 @@ var Datepicker = (props) => {
onChange: (newHour) => { onChange: (newHour) => {
startHour(newHour); startHour(newHour);
const currentVal = val(value); const currentVal = val(value);
if (currentVal && typeof currentVal === "string" && currentVal.includes("-")) { if (currentVal && typeof currentVal === "string") {
value(currentVal.split("T")[0] + "T" + String(newHour).padStart(2, "0") + ":00:00"); value(currentVal.split("T")[0] + "T" + String(newHour).padStart(2, "0") + ":00:00");
} }
} }

6
dist/sigpro-ui.esm.min.js vendored
View File

File diff suppressed because one or more lines are too long

48
dist/sigpro-ui.js vendored
View File

@@ -887,10 +887,12 @@
const query = $(val(value) || ""); const query = $(val(value) || "");
const isOpen = $(false); const isOpen = $(false);
const cursor = $(-1); const cursor = $(-1);
const list = $(() => { const list = $([]);
const q = query().toLowerCase(); Watch(() => {
const q = String(query()).toLowerCase();
const data = val(items) || []; const data = val(items) || [];
return q ? data.filter((o) => (typeof o === "string" ? o : o.label).toLowerCase().includes(q)) : data; const filtered = q ? data.filter((o) => (typeof o === "string" ? o : o.label).toLowerCase().includes(q)) : data;
list(filtered);
}); });
const pick = (opt) => { const pick = (opt) => {
const valStr = typeof opt === "string" ? opt : opt.value; const valStr = typeof opt === "string" ? opt : opt.value;
@@ -903,17 +905,17 @@
cursor(-1); cursor(-1);
}; };
const nav = (e) => { const nav = (e) => {
const items2 = list(); const currentItems = list();
if (e.key === "ArrowDown") { if (e.key === "ArrowDown") {
e.preventDefault(); e.preventDefault();
isOpen(true); isOpen(true);
cursor(Math.min(cursor() + 1, items2.length - 1)); cursor(Math.min(cursor() + 1, currentItems.length - 1));
} else if (e.key === "ArrowUp") { } else if (e.key === "ArrowUp") {
e.preventDefault(); e.preventDefault();
cursor(Math.max(cursor() - 1, 0)); cursor(Math.max(cursor() - 1, 0));
} else if (e.key === "Enter" && cursor() >= 0) { } else if (e.key === "Enter" && cursor() >= 0) {
e.preventDefault(); e.preventDefault();
pick(items2[cursor()]); pick(currentItems[cursor()]);
} else if (e.key === "Escape") { } else if (e.key === "Escape") {
isOpen(false); isOpen(false);
} }
@@ -1117,25 +1119,25 @@
isOpen(false); isOpen(false);
} }
}; };
const displayValue = $(() => { const displayValue = $("");
Watch(() => {
const v = val(value); const v = val(value);
if (!v) if (!v) {
return ""; displayValue("");
return;
}
let text = "";
if (typeof v === "string") { if (typeof v === "string") {
if (hour && v.includes("T")) text = hour && v.includes("T") ? v.replace("T", " ") : v;
return v.replace("T", " "); } else if (v.start && v.end) {
return v; const startStr = hour && v.startHour !== undefined ? `${v.start} ${String(v.startHour).padStart(2, "0")}:00` : v.start;
const endStr = 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 ? `${v.start} ${String(v.startHour).padStart(2, "0")}:00` : v.start;
text = `${startStr}...`;
} }
if (v.start && v.end) { displayValue(text);
const startStr = hour && v.startHour ? `${v.start} ${String(v.startHour).padStart(2, "0")}:00` : v.start;
const endStr = hour && v.endHour ? `${v.end} ${String(v.endHour).padStart(2, "0")}:00` : v.end;
return `${startStr} - ${endStr}`;
}
if (v.start) {
const startStr = hour && v.startHour ? `${v.start} ${String(v.startHour).padStart(2, "0")}:00` : v.start;
return `${startStr}...`;
}
return "";
}); });
const move = (m) => { const move = (m) => {
const d = internalDate(); const d = internalDate();
@@ -1264,7 +1266,7 @@
onChange: (newHour) => { onChange: (newHour) => {
startHour(newHour); startHour(newHour);
const currentVal = val(value); const currentVal = val(value);
if (currentVal && typeof currentVal === "string" && currentVal.includes("-")) { if (currentVal && typeof currentVal === "string") {
value(currentVal.split("T")[0] + "T" + String(newHour).padStart(2, "0") + ":00:00"); value(currentVal.split("T")[0] + "T" + String(newHour).padStart(2, "0") + ":00:00");
} }
} }

6
dist/sigpro-ui.min.js vendored
View File

File diff suppressed because one or more lines are too long

48
docs/sigpro-ui.min.js vendored
View File

@@ -887,10 +887,12 @@
const query = $(val(value) || ""); const query = $(val(value) || "");
const isOpen = $(false); const isOpen = $(false);
const cursor = $(-1); const cursor = $(-1);
const list = $(() => { const list = $([]);
const q = query().toLowerCase(); Watch(() => {
const q = String(query()).toLowerCase();
const data = val(items) || []; const data = val(items) || [];
return q ? data.filter((o) => (typeof o === "string" ? o : o.label).toLowerCase().includes(q)) : data; const filtered = q ? data.filter((o) => (typeof o === "string" ? o : o.label).toLowerCase().includes(q)) : data;
list(filtered);
}); });
const pick = (opt) => { const pick = (opt) => {
const valStr = typeof opt === "string" ? opt : opt.value; const valStr = typeof opt === "string" ? opt : opt.value;
@@ -903,17 +905,17 @@
cursor(-1); cursor(-1);
}; };
const nav = (e) => { const nav = (e) => {
const items2 = list(); const currentItems = list();
if (e.key === "ArrowDown") { if (e.key === "ArrowDown") {
e.preventDefault(); e.preventDefault();
isOpen(true); isOpen(true);
cursor(Math.min(cursor() + 1, items2.length - 1)); cursor(Math.min(cursor() + 1, currentItems.length - 1));
} else if (e.key === "ArrowUp") { } else if (e.key === "ArrowUp") {
e.preventDefault(); e.preventDefault();
cursor(Math.max(cursor() - 1, 0)); cursor(Math.max(cursor() - 1, 0));
} else if (e.key === "Enter" && cursor() >= 0) { } else if (e.key === "Enter" && cursor() >= 0) {
e.preventDefault(); e.preventDefault();
pick(items2[cursor()]); pick(currentItems[cursor()]);
} else if (e.key === "Escape") { } else if (e.key === "Escape") {
isOpen(false); isOpen(false);
} }
@@ -1117,25 +1119,25 @@
isOpen(false); isOpen(false);
} }
}; };
const displayValue = $(() => { const displayValue = $("");
Watch(() => {
const v = val(value); const v = val(value);
if (!v) if (!v) {
return ""; displayValue("");
return;
}
let text = "";
if (typeof v === "string") { if (typeof v === "string") {
if (hour && v.includes("T")) text = hour && v.includes("T") ? v.replace("T", " ") : v;
return v.replace("T", " "); } else if (v.start && v.end) {
return v; const startStr = hour && v.startHour !== undefined ? `${v.start} ${String(v.startHour).padStart(2, "0")}:00` : v.start;
const endStr = 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 ? `${v.start} ${String(v.startHour).padStart(2, "0")}:00` : v.start;
text = `${startStr}...`;
} }
if (v.start && v.end) { displayValue(text);
const startStr = hour && v.startHour ? `${v.start} ${String(v.startHour).padStart(2, "0")}:00` : v.start;
const endStr = hour && v.endHour ? `${v.end} ${String(v.endHour).padStart(2, "0")}:00` : v.end;
return `${startStr} - ${endStr}`;
}
if (v.start) {
const startStr = hour && v.startHour ? `${v.start} ${String(v.startHour).padStart(2, "0")}:00` : v.start;
return `${startStr}...`;
}
return "";
}); });
const move = (m) => { const move = (m) => {
const d = internalDate(); const d = internalDate();
@@ -1264,7 +1266,7 @@
onChange: (newHour) => { onChange: (newHour) => {
startHour(newHour); startHour(newHour);
const currentVal = val(value); const currentVal = val(value);
if (currentVal && typeof currentVal === "string" && currentVal.includes("-")) { if (currentVal && typeof currentVal === "string") {
value(currentVal.split("T")[0] + "T" + String(newHour).padStart(2, "0") + ":00:00"); value(currentVal.split("T")[0] + "T" + String(newHour).padStart(2, "0") + ":00:00");
} }
} }

27
src/components/Autocomplete.js
View File

@@ -17,42 +17,49 @@ import { Input } from "./Input.js";
export const Autocomplete = (props) => { export const Autocomplete = (props) => {
const { class: className, items = [], value, onselect, label, placeholder, ...rest } = props; const { class: className, items = [], value, onselect, label, placeholder, ...rest } = props;
// Inicializamos query con el valor actual de la señal recibida o string vacío
const query = $(val(value) || ""); const query = $(val(value) || "");
const isOpen = $(false); const isOpen = $(false);
const cursor = $(-1); const cursor = $(-1);
const list = $(() => { // FIX CRÍTICO: En lugar de una computed automática, usamos una señal manual
const q = query().toLowerCase(); // y un Watch para garantizar que la lista se actualice SÍNCRONAMENTE.
const list = $([]);
Watch(() => {
const q = String(query()).toLowerCase();
const data = val(items) || []; const data = val(items) || [];
return q const filtered = q
? data.filter((o) => (typeof o === "string" ? o : o.label).toLowerCase().includes(q)) ? data.filter((o) => (typeof o === "string" ? o : o.label).toLowerCase().includes(q))
: data; : data;
list(filtered);
}); });
const pick = (opt) => { const pick = (opt) => {
const valStr = typeof opt === "string" ? opt : opt.value; const valStr = typeof opt === "string" ? opt : opt.value;
const labelStr = typeof opt === "string" ? opt : opt.label; const labelStr = typeof opt === "string" ? opt : opt.label;
// Actualizamos ambas señales
query(labelStr); query(labelStr);
if (typeof value === "function") value(valStr); if (typeof value === "function") value(valStr);
onselect?.(opt); onselect?.(opt);
isOpen(false); isOpen(false);
cursor(-1); cursor(-1);
}; };
const nav = (e) => { const nav = (e) => {
const items = list(); const currentItems = list();
if (e.key === "ArrowDown") { if (e.key === "ArrowDown") {
e.preventDefault(); e.preventDefault();
isOpen(true); isOpen(true);
cursor(Math.min(cursor() + 1, items.length - 1)); cursor(Math.min(cursor() + 1, currentItems.length - 1));
} else if (e.key === "ArrowUp") { } else if (e.key === "ArrowUp") {
e.preventDefault(); e.preventDefault();
cursor(Math.max(cursor() - 1, 0)); cursor(Math.max(cursor() - 1, 0));
} else if (e.key === "Enter" && cursor() >= 0) { } else if (e.key === "Enter" && cursor() >= 0) {
e.preventDefault(); e.preventDefault();
pick(items[cursor()]); pick(currentItems[cursor()]);
} else if (e.key === "Escape") { } else if (e.key === "Escape") {
isOpen(false); isOpen(false);
} }
@@ -63,13 +70,13 @@ export const Autocomplete = (props) => {
label, label,
class: className, class: className,
placeholder: placeholder || tt("search")(), placeholder: placeholder || tt("search")(),
value: query, value: query, // Vinculado a la señal query
onfocus: () => isOpen(true), onfocus: () => isOpen(true),
onblur: () => setTimeout(() => isOpen(false), 150), onblur: () => setTimeout(() => isOpen(false), 150),
onkeydown: nav, onkeydown: nav,
oninput: (e) => { oninput: (e) => {
const v = e.target.value; const v = e.target.value;
query(v); query(v); // Esto dispara el Watch de arriba y actualiza 'list'
if (typeof value === "function") value(v); if (typeof value === "function") value(v);
isOpen(true); isOpen(true);
cursor(-1); cursor(-1);
@@ -80,6 +87,7 @@ export const Autocomplete = (props) => {
"ul", "ul",
{ {
class: "absolute dropdown-menu 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", class: "absolute dropdown-menu 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",
// Usamos una función para que el estilo sea reactivo
style: () => (isOpen() && list().length ? "display:block" : "display:none"), style: () => (isOpen() && list().length ? "display:block" : "display:none"),
}, },
[ [
@@ -99,6 +107,7 @@ export const Autocomplete = (props) => {
]), ]),
(opt, i) => (typeof opt === "string" ? opt : opt.value) + i, (opt, i) => (typeof opt === "string" ? opt : opt.value) + i,
), ),
// Mensaje de "no hay datos" reactivo
() => (list().length ? null : Tag("li", { class: "p-2 text-center opacity-50" }, tt("nodata")())), () => (list().length ? null : Tag("li", { class: "p-2 text-center opacity-50" }, tt("nodata")())),
], ],
), ),

39
src/components/Datepicker.js
View File

@@ -69,23 +69,28 @@ export const Datepicker = (props) => {
} }
}; };
const displayValue = $(() => { // FIX CRÍTICO: Señal manual y Watch para displayValue
const displayValue = $("");
Watch(() => {
const v = val(value); const v = val(value);
if (!v) return ""; if (!v) {
displayValue("");
return;
}
let text = "";
if (typeof v === "string") { if (typeof v === "string") {
if (hour && v.includes("T")) return v.replace("T", " "); text = (hour && v.includes("T")) ? v.replace("T", " ") : v;
return v; } else if (v.start && v.end) {
const startStr = hour && v.startHour !== undefined ? `${v.start} ${String(v.startHour).padStart(2, "0")}:00` : v.start;
const endStr = 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 ? `${v.start} ${String(v.startHour).padStart(2, "0")}:00` : v.start;
text = `${startStr}...`;
} }
if (v.start && v.end) { displayValue(text);
const startStr = hour && v.startHour ? `${v.start} ${String(v.startHour).padStart(2, "0")}:00` : v.start;
const endStr = hour && v.endHour ? `${v.end} ${String(v.endHour).padStart(2, "0")}:00` : v.end;
return `${startStr} - ${endStr}`;
}
if (v.start) {
const startStr = hour && v.startHour ? `${v.start} ${String(v.startHour).padStart(2, "0")}:00` : v.start;
return `${startStr}...`;
}
return "";
}); });
const move = (m) => { const move = (m) => {
@@ -105,7 +110,7 @@ export const Datepicker = (props) => {
type: "range", type: "range",
min: 0, min: 0,
max: 23, max: 23,
value: hVal, value: hVal, // Sincronizado con hVal
class: "range range-xs flex-1", class: "range range-xs flex-1",
oninput: (e) => { oninput: (e) => {
const newHour = parseInt(e.target.value); const newHour = parseInt(e.target.value);
@@ -123,7 +128,7 @@ export const Datepicker = (props) => {
Input({ Input({
label, label,
placeholder: placeholder || (isRangeMode() ? "Seleccionar rango..." : "Seleccionar fecha..."), placeholder: placeholder || (isRangeMode() ? "Seleccionar rango..." : "Seleccionar fecha..."),
value: displayValue, value: displayValue, // Ahora es una señal que actualizamos manualmente
readonly: true, readonly: true,
icon: getIcon("icon-[lucide--calendar]"), icon: getIcon("icon-[lucide--calendar]"),
onclick: (e) => { onclick: (e) => {
@@ -243,7 +248,7 @@ export const Datepicker = (props) => {
onChange: (newHour) => { onChange: (newHour) => {
startHour(newHour); startHour(newHour);
const currentVal = val(value); const currentVal = val(value);
if (currentVal && typeof currentVal === "string" && currentVal.includes("-")) { if (currentVal && typeof currentVal === "string") {
value(currentVal.split("T")[0] + "T" + String(newHour).padStart(2, "0") + ":00:00"); value(currentVal.split("T")[0] + "T" + String(newHour).padStart(2, "0") + ":00:00");
} }
}, },