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

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

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

27
src/components/Autocomplete.js
View File

@@ -17,42 +17,49 @@ import { Input } from "./Input.js";
export const Autocomplete = (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 isOpen = $(false);
const cursor = $(-1);
const list = $(() => {
const q = query().toLowerCase();
// FIX CRÍTICO: En lugar de una computed automática, usamos una señal manual
// y un Watch para garantizar que la lista se actualice SÍNCRONAMENTE.
const list = $([]);
Watch(() => {
const q = String(query()).toLowerCase();
const data = val(items) || [];
return q
const filtered = q
? data.filter((o) => (typeof o === "string" ? o : o.label).toLowerCase().includes(q))
: data;
list(filtered);
});
const pick = (opt) => {
const valStr = typeof opt === "string" ? opt : opt.value;
const labelStr = typeof opt === "string" ? opt : opt.label;
// Actualizamos ambas señales
query(labelStr);
if (typeof value === "function") value(valStr);
onselect?.(opt);
isOpen(false);
cursor(-1);
};
const nav = (e) => {
const items = list();
const currentItems = list();
if (e.key === "ArrowDown") {
e.preventDefault();
isOpen(true);
cursor(Math.min(cursor() + 1, items.length - 1));
cursor(Math.min(cursor() + 1, currentItems.length - 1));
} else if (e.key === "ArrowUp") {
e.preventDefault();
cursor(Math.max(cursor() - 1, 0));
} else if (e.key === "Enter" && cursor() >= 0) {
e.preventDefault();
pick(items[cursor()]);
pick(currentItems[cursor()]);
} else if (e.key === "Escape") {
isOpen(false);
}
@@ -63,13 +70,13 @@ export const Autocomplete = (props) => {
label,
class: className,
placeholder: placeholder || tt("search")(),
value: query,
value: query, // Vinculado a la señal query
onfocus: () => isOpen(true),
onblur: () => setTimeout(() => isOpen(false), 150),
onkeydown: nav,
oninput: (e) => {
const v = e.target.value;
query(v);
query(v); // Esto dispara el Watch de arriba y actualiza 'list'
if (typeof value === "function") value(v);
isOpen(true);
cursor(-1);
@@ -80,6 +87,7 @@ export const Autocomplete = (props) => {
"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",
// Usamos una función para que el estilo sea reactivo
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,
),
// Mensaje de "no hay datos" reactivo
() => (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);
if (!v) return "";
if (!v) {
displayValue("");
return;
}
let text = "";
if (typeof v === "string") {
if (hour && v.includes("T")) return v.replace("T", " ");
return v;
text = (hour && v.includes("T")) ? v.replace("T", " ") : 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) {
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 "";
displayValue(text);
});
const move = (m) => {
@@ -105,7 +110,7 @@ export const Datepicker = (props) => {
type: "range",
min: 0,
max: 23,
value: hVal,
value: hVal, // Sincronizado con hVal
class: "range range-xs flex-1",
oninput: (e) => {
const newHour = parseInt(e.target.value);
@@ -123,7 +128,7 @@ export const Datepicker = (props) => {
Input({
label,
placeholder: placeholder || (isRangeMode() ? "Seleccionar rango..." : "Seleccionar fecha..."),
value: displayValue,
value: displayValue, // Ahora es una señal que actualizamos manualmente
readonly: true,
icon: getIcon("icon-[lucide--calendar]"),
onclick: (e) => {
@@ -243,7 +248,7 @@ export const Datepicker = (props) => {
onChange: (newHour) => {
startHour(newHour);
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");
}
},