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

Updated

Browse Source
This commit is contained in:
natxocc
2026-04-06 18:07:39 +02:00
parent 294547fc56
commit 071a215393
80 changed files with 593 additions and 2085 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Accordion.js
View File

@@ -1,5 +1,5 @@
// components/Accordion.js
import { Tag } from "../sigpro.js";
// import { Tag } from "../sigpro.js";
import { ui, val } from "../core/utils.js";
/**

2
src/components/Alert.js
View File

@@ -1,5 +1,5 @@
// components/Alert.js
import { Tag } from "../sigpro.js";
// import { Tag } from "../sigpro.js";
import { ui, getIcon } from "../core/utils.js";
/**

6
src/components/Autocomplete.js
View File

@@ -1,5 +1,5 @@
// components/Autocomplete.js
import { $, Tag, For } from "../sigpro.js";
// import { $, Tag, For } from "../sigpro.js";
import { val } from "../core/utils.js";
import { tt } from "../core/i18n.js";
import { Input } from "./Input.js";
@@ -15,7 +15,7 @@ import { Input } from "./Input.js";
* - z-50, active, bg-primary, text-primary-content
*/
export const Autocomplete = (props) => {
const { class: className, items = [], value, onSelect, label, placeholder, ...rest } = props;
const { class: className, items = [], value, onselect, label, placeholder, ...rest } = props;
const query = $(val(value) || "");
const isOpen = $(false);
@@ -35,7 +35,7 @@ export const Autocomplete = (props) => {
query(labelStr);
if (typeof value === "function") value(valStr);
onSelect?.(opt);
onselect?.(opt);
isOpen(false);
cursor(-1);

2
src/components/Badge.js
View File

@@ -1,5 +1,5 @@
// components/Badge.js
import { Tag } from "../sigpro.js";
// import { Tag } from "../sigpro.js";
import { ui } from "../core/utils.js";
/**

2
src/components/Button.js
View File

@@ -1,5 +1,5 @@
// components/Button.js
import { Tag } from "../sigpro.js";
// import { Tag } from "../sigpro.js";
import { ui, val, getIcon } from "../core/utils.js";
/**

2
src/components/Checkbox.js
View File

@@ -1,5 +1,5 @@
// components/Checkbox.js
import { Tag } from "../sigpro.js";
// import { Tag } from "../sigpro.js";
import { val, ui } from "../core/utils.js";
/**

2
src/components/Colorpicker.js
View File

@@ -1,5 +1,5 @@
// components/Colorpicker.js
import { $, Tag, If } from "../sigpro.js";
// import { $, Tag, If } from "../sigpro.js";
import { val, ui } from "../core/utils.js";
/**

2
src/components/Datepicker.js
View File

@@ -1,5 +1,5 @@
// components/Datepicker.js
import { $, Tag, If } from "../sigpro.js";
// import { $, Tag, If } from "../sigpro.js";
import { val, ui, getIcon } from "../core/utils.js";
import { Input } from "./Input.js";

2
src/components/Drawer.js
View File

@@ -1,5 +1,5 @@
// components/Drawer.js
import { Tag } from "../sigpro.js";
// import { Tag } from "../sigpro.js";
import { ui } from "../core/utils.js";
/**

2
src/components/Fab.js
View File

@@ -1,5 +1,5 @@
// components/Fab.js
import { Tag } from "../sigpro.js";
// import { Tag } from "../sigpro.js";
import { val, ui, getIcon } from "../core/utils.js";
/**

2
src/components/Fieldset.js
View File

@@ -1,5 +1,5 @@
// components/Fieldset.js
import { Tag } from "../sigpro.js";
// import { Tag } from "../sigpro.js";
import { val, ui } from "../core/utils.js";
/**

8
src/components/Fileinput.js
View File

@@ -1,5 +1,5 @@
// components/Fileinput.js
import { $, Tag, If, For } from "../sigpro.js";
// import { $, Tag, If, For } from "../sigpro.js";
import { ui, getIcon } from "../core/utils.js";
/**
@@ -20,7 +20,7 @@ import { ui, getIcon } from "../core/utils.js";
* - btn, btn-ghost, btn-xs, btn-circle
*/
export const Fileinput = (props) => {
const { class: className, tooltip, max = 2, accept = "*", onSelect, ...rest } = props;
const { class: className, tooltip, max = 2, accept = "*", onselect, ...rest } = props;
const selectedFiles = $([]);
const isDragging = $(false);
@@ -38,13 +38,13 @@ export const Fileinput = (props) => {
}
selectedFiles([...selectedFiles(), ...fileList]);
onSelect?.(selectedFiles());
onselect?.(selectedFiles());
};
const removeFile = (index) => {
const updated = selectedFiles().filter((_, i) => i !== index);
selectedFiles(updated);
onSelect?.(updated);
onselect?.(updated);
};
return Tag("fieldset", { ...rest, class: ui('fieldset w-full p-0', className) }, [

2
src/components/Indicator.js
View File

@@ -1,5 +1,5 @@
// components/Indicator.js
import { Tag } from "../sigpro.js";
// import { Tag } from "../sigpro.js";
import { ui } from "../core/utils.js";
/**

2
src/components/Input.js
View File

@@ -1,5 +1,5 @@
// components/Input.js
import { $, Tag, Watch } from "../sigpro.js";
// import { $, Tag, Watch } from "../sigpro.js";
import { val, ui, getIcon } from "../core/utils.js";
/**

2
src/components/Label.js
View File

@@ -1,5 +1,5 @@
// components/Label.js
import { $, Tag } from "../sigpro.js";
// import { $, Tag } from "../sigpro.js";
import { ui, val } from "../core/utils.js";
/**

14
src/components/List.js
View File

@@ -1,5 +1,5 @@
// components/List.js
import { Tag, If, For } from "../sigpro.js";
// import { Tag, If, For } from "../sigpro.js";
import { ui, val } from "../core/utils.js";
/**
@@ -12,16 +12,22 @@ import { ui, val } from "../core/utils.js";
* - flex, items-center, gap-2
*/
export const List = (props) => {
const { class: className, items, header, render, keyFn = (item, index) => item.id ?? index, ...rest } = props;
const { class: className, items, header, render = (item) => item, keyFn = (item, index) => item.id ?? index, ...rest } = props;
const listItems = For(
items,
(item, index) => Tag("li", { class: "list-row" }, [render(item, index)]),
(item, index) => Tag("li", {
class: "list-row",
style: "width: 100%; display: block;"
}, [
Tag("div", { style: "width: 100%;" }, [render(item, index)])
]),
keyFn
);
return Tag("ul", {
...rest,
style: "display: block; width: 100%;",
class: ui('list bg-base-100 rounded-box shadow-md', className),
}, header ? [If(header, () => Tag("li", { class: "p-4 pb-2 text-xs opacity-60" }, [val(header)])), listItems] : listItems);
}, header ? [If(header, () => Tag("li", { class: "p-4 pb-2 text-xs opacity-60", style: "width: 100%;" }, [val(header)])), listItems] : listItems);
};

2
src/components/Menu.js
View File

@@ -1,5 +1,5 @@
// components/Menu.js
import { Tag, For } from "../sigpro.js";
// import { Tag, For } from "../sigpro.js";
import { val, ui } from "../core/utils.js";
/**

2
src/components/Modal.js
View File

@@ -1,5 +1,5 @@
// components/Modal.js
import { Tag, Watch } from "../sigpro.js";
// import { Tag, Watch } from "../sigpro.js";
import { ui } from "../core/utils.js";
import { tt } from "../core/i18n.js";
import { Button } from "./Button.js";

2
src/components/Navbar.js
View File

@@ -1,5 +1,5 @@
// components/Navbar.js
import { Tag } from "../sigpro.js";
// import { Tag } from "../sigpro.js";
import { ui } from "../core/utils.js";
/**

2
src/components/Radio.js
View File

@@ -1,5 +1,5 @@
// components/Radio.js
import { Tag } from "../sigpro.js";
// import { Tag } from "../sigpro.js";
import { val, ui } from "../core/utils.js";
/**

2
src/components/Range.js
View File

@@ -1,5 +1,5 @@
// components/Range.js
import { Tag } from "../sigpro.js";
// import { Tag } from "../sigpro.js";
import { val, ui } from "../core/utils.js";
/**

2
src/components/Rating.js
View File

@@ -1,5 +1,5 @@
// components/Rating.js
import { Tag } from "../sigpro.js";
// import { Tag } from "../sigpro.js";
import { val, ui } from "../core/utils.js";
/**

2
src/components/Select.js
View File

@@ -1,5 +1,5 @@
// components/Select.js
import { Tag, For } from "../sigpro.js";
// import { Tag, For } from "../sigpro.js";
import { val, ui } from "../core/utils.js";
/**

2
src/components/Stack.js
View File

@@ -1,5 +1,5 @@
// components/Stack.js
import { Tag } from "../sigpro.js";
// import { Tag } from "../sigpro.js";
import { ui } from "../core/utils.js";
/**

2
src/components/Stat.js
View File

@@ -1,5 +1,5 @@
// components/Stat.js
import { Tag } from "../sigpro.js";
// import { Tag } from "../sigpro.js";
import { val, ui } from "../core/utils.js";
/**

2
src/components/Swap.js
View File

@@ -1,5 +1,5 @@
// components/Swap.js
import { Tag } from "../sigpro.js";
// import { Tag } from "../sigpro.js";
import { ui, val } from "../core/utils.js";
/**

2
src/components/Table.js
View File

@@ -1,5 +1,5 @@
// components/Table.js
import { Tag, For, If } from "../sigpro.js";
// import { Tag, For, If } from "../sigpro.js";
import { val, ui } from "../core/utils.js";
import { tt } from "../core/i18n.js";

2
src/components/Tabs.js
View File

@@ -1,5 +1,5 @@
// components/Tabs.js
import { $, Tag, For } from "../sigpro.js";
// import { $, Tag, For } from "../sigpro.js";
import { val, ui } from "../core/utils.js";
/**

2
src/components/Timeline.js
View File

@@ -1,5 +1,5 @@
// components/Timeline.js
import { Tag, For } from "../sigpro.js";
// import { Tag, For } from "../sigpro.js";
import { val, ui, getIcon } from "../core/utils.js";
/**

2
src/components/Toast.js
View File

@@ -1,5 +1,5 @@
// components/Toast.js
import { Tag, Mount } from "../sigpro.js";
// import { Tag, Mount } from "../sigpro.js";
import { getIcon } from "../core/utils.js";
import { Button } from "./Button.js";

2
src/components/Tooltip.js
View File

@@ -1,5 +1,5 @@
// components/Tooltip.js
import { Tag } from "../sigpro.js";
// import { Tag } from "../sigpro.js";
import { ui } from "../core/utils.js";
/**

24
src/components_OLD/Accordion.js
View File

@@ -1,24 +0,0 @@
import { Tag } from "sigpro";
import { joinClass } from "../core/utils.js";
/** ACCORDION */
export const Accordion = (props, children) => {
const { title, name, open, ...rest } = props;
return Tag(
"div",
{
...rest,
class: joinClass("collapse collapse-arrow bg-base-200 mb-2", props.class),
},
[
Tag("input", {
type: name ? "radio" : "checkbox",
name: name,
checked: open
}),
Tag("div", { class: "collapse-title text-xl font-medium" }, title),
Tag("div", { class: "collapse-content" }, children),
],
);
};

50
src/components_OLD/Alert.js
View File

@@ -1,50 +0,0 @@
import { Tag } from "sigpro";
import { val } from "../core/utils.js";
import { iconInfo, iconSuccess, iconWarning, iconError } from "../core/icons.js";
/** ALERT */
export const Alert = (props, children) => {
const { type = "info", soft = true, ...rest } = props;
const icons = {
info: iconInfo,
success: iconSuccess,
warning: iconWarning,
error: iconError,
};
const typeClass = () => {
const t = val(type);
const map = {
info: "alert-info",
success: "alert-success",
warning: "alert-warning",
error: "alert-error",
};
return map[t] || t;
};
const content = children || props.message;
return Tag(
"div",
{
...rest,
role: "alert",
class: () => `alert ${typeClass()} ${val(soft) ? "alert-soft" : ""} ${props.class || ""}`,
},
[
Tag("img", {
src: icons[val(type)] || icons.info,
class: "w-4 h-4 object-contain",
alt: val(type),
}),
Tag("div", { class: "flex-1" }, [
Tag("span", {}, [typeof content === "function" ? content() : content])
]),
props.actions ? Tag("div", { class: "flex-none" }, [
typeof props.actions === "function" ? props.actions() : props.actions
]) : null,
],
);
};

95
src/components_OLD/Autocomplete.js
View File

@@ -1,95 +0,0 @@
import { $, Tag, For } from "sigpro";
import { val } from "../core/utils.js";
import { tt } from "../core/i18n.js";
import { Input } from "./Input.js"; // Importamos el componente hermano
/** AUTOCOMPLETE */
export const Autocomplete = (props) => {
const { options = [], value, onSelect, label, placeholder, ...rest } = props;
const query = $(val(value) || "");
const isOpen = $(false);
const cursor = $(-1);
const list = $(() => {
const q = query().toLowerCase();
const data = val(options) || [];
return q
? data.filter((o) => (typeof o === "string" ? o : o.label).toLowerCase().includes(q))
: data;
});
const pick = (opt) => {
const valStr = typeof opt === "string" ? opt : opt.value;
const labelStr = typeof opt === "string" ? opt : opt.label;
query(labelStr);
if (typeof value === "function") value(valStr);
onSelect?.(opt);
isOpen(false);
cursor(-1);
};
const nav = (e) => {
const items = list();
if (e.key === "ArrowDown") {
e.preventDefault();
isOpen(true);
cursor(Math.min(cursor() + 1, items.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()]);
} else if (e.key === "Escape") {
isOpen(false);
}
};
return Tag("div", { class: "relative w-full" }, [
Input({
label,
placeholder: placeholder || tt("search")(),
value: query,
onfocus: () => isOpen(true),
onblur: () => setTimeout(() => isOpen(false), 150),
onkeydown: nav,
oninput: (e) => {
const v = e.target.value;
query(v);
if (typeof value === "function") value(v);
isOpen(true);
cursor(-1);
},
...rest,
}),
Tag(
"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: () => (isOpen() && list().length ? "display:block" : "display:none"),
},
[
For(
list,
(opt, i) =>
Tag("li", {}, [
Tag(
"a",
{
class: () => `block w-full ${cursor() === i ? "active bg-primary text-primary-content" : ""}`,
onclick: () => pick(opt),
onmouseenter: () => cursor(i),
},
typeof opt === "string" ? opt : opt.label,
),
]),
(opt, i) => (typeof opt === "string" ? opt : opt.value) + i,
),
() => (list().length ? null : Tag("li", { class: "p-2 text-center opacity-50" }, "No results")),
],
),
]);
};

6
src/components_OLD/Badge.js
View File

@@ -1,6 +0,0 @@
import { Tag } from "sigpro";
import { joinClass } from "../core/utils.js";
/** BADGE */
export const Badge = (props, children) =>
Tag("span", { ...props, class: joinClass("badge", props.class) }, children);

37
src/components_OLD/Button.js
View File

@@ -1,37 +0,0 @@
import { Tag } from "sigpro";
import { val, joinClass } from "../core/utils.js";
/** BUTTON */
export const Button = (props, children) => {
const { badge, badgeClass, tooltip, icon, loading, ...rest } = props;
const btn = Tag(
"button",
{
...rest,
class: joinClass("btn", props.class)
},
[
() => (val(loading) ? Tag("span", { class: "loading loading-spinner" }) : null),
icon ? Tag("span", { class: "mr-1" }, icon) : null,
children,
]
);
let out = btn;
if (badge) {
out = Tag("div", { class: "indicator" }, [
Tag(
"span",
{ class: joinClass("indicator-item badge", badgeClass || "badge-secondary") },
badge
),
out,
]);
}
return tooltip
? Tag("div", { class: "tooltip", "data-tip": tooltip }, out)
: out;
};

21
src/components_OLD/Checkbox.js
View File

@@ -1,21 +0,0 @@
import { Tag } from "sigpro";
import { val } from "../core/utils.js";
/** CHECKBOX */
export const Checkbox = (props) => {
const { value, tooltip, toggle, label, ...rest } = props;
const checkEl = Tag("input", {
...rest,
type: "checkbox",
class: () => (val(toggle) ? "toggle" : "checkbox"),
checked: value
});
const layout = Tag("label", { class: "label cursor-pointer justify-start gap-3" }, [
checkEl,
label ? Tag("span", { class: "label-text" }, label) : null,
]);
return tooltip ? Tag("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout;
};

81
src/components_OLD/Colorpicker.js
View File

@@ -1,81 +0,0 @@
import { $, Tag, If } from "sigpro";
import { val } from "../core/utils.js";
/** COLORPICKER */
export const Colorpicker = (props) => {
const { value, label, ...rest } = props;
const isOpen = $(false);
const palette = [
...["#000", "#1A1A1A", "#333", "#4D4D4D", "#666", "#808080", "#B3B3B3", "#FFF"],
...["#450a0a", "#7f1d1d", "#991b1b", "#b91c1c", "#dc2626", "#ef4444", "#f87171", "#fca5a5"],
...["#431407", "#7c2d12", "#9a3412", "#c2410c", "#ea580c", "#f97316", "#fb923c", "#ffedd5"],
...["#713f12", "#a16207", "#ca8a04", "#eab308", "#facc15", "#fde047", "#fef08a", "#fff9c4"],
...["#064e3b", "#065f46", "#059669", "#10b981", "#34d399", "#4ade80", "#84cc16", "#d9f99d"],
...["#082f49", "#075985", "#0284c7", "#0ea5e9", "#38bdf8", "#7dd3fc", "#22d3ee", "#cffafe"],
...["#1e1b4b", "#312e81", "#4338ca", "#4f46e5", "#6366f1", "#818cf8", "#a5b4fc", "#e0e7ff"],
...["#2e1065", "#4c1d95", "#6d28d9", "#7c3aed", "#8b5cf6", "#a855f7", "#d946ef", "#fae8ff"],
];
const getColor = () => val(value) || "#000000";
return Tag("div", { class: "relative w-fit" }, [
Tag(
"button",
{
type: "button",
class: "btn px-3 bg-base-100 border-base-300 hover:border-primary/50 flex items-center gap-2 shadow-sm font-normal normal-case",
onclick: (e) => {
e.stopPropagation();
isOpen(!isOpen());
},
...rest,
},
[
Tag("div", {
class: "size-5 rounded-sm shadow-inner border border-black/10 shrink-0",
style: () => `background-color: ${getColor()}`,
}),
label ? Tag("span", { class: "opacity-80" }, label) : null,
],
),
If(isOpen, () =>
Tag(
"div",
{
class: "absolute left-0 mt-2 p-3 bg-base-100 border border-base-300 shadow-2xl rounded-box z-[110] w-64 select-none",
onclick: (e) => e.stopPropagation(),
},
[
Tag(
"div",
{ class: "grid grid-cols-8 gap-1" },
palette.map((c) =>
Tag("button", {
type: "button",
style: `background-color: ${c}`,
class: () => {
const active = getColor().toLowerCase() === c.toLowerCase();
return `size-6 rounded-sm cursor-pointer transition-all hover:scale-125 hover:z-10 active:scale-95 outline-none border border-black/5
${active ? "ring-2 ring-offset-1 ring-primary z-10 scale-110" : ""}`;
},
onclick: () => {
if (typeof value === "function") value(c);
isOpen(false);
},
}),
),
),
],
),
),
If(isOpen, () =>
Tag("div", {
class: "fixed inset-0 z-[100]",
onclick: () => isOpen(false),
}),
),
]);
};

252
src/components_OLD/Datepicker.js
View File

@@ -1,252 +0,0 @@
import { $, Tag, If } from "sigpro";
import { val } from "../core/utils.js";
import {
iconCalendar,
iconLeft,
iconRight,
iconLLeft,
iconRRight
} from "../core/icons.js";
import { Input } from "./Input.js";
/** DATEPICKER */
export const Datepicker = (props) => {
const { value, range, label, placeholder, hour = false, ...rest } = props;
const isOpen = $(false);
const internalDate = $(new Date());
const hoverDate = $(null);
const startHour = $(0);
const endHour = $(0);
const isRangeMode = () => val(range) === true;
const now = new Date();
const todayStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
const formatDate = (d) => {
const year = d.getFullYear();
const month = String(d.getMonth() + 1).padStart(2, "0");
const day = String(d.getDate()).padStart(2, "0");
return `${year}-${month}-${day}`;
};
const selectDate = (date) => {
const dateStr = formatDate(date);
const current = val(value);
if (isRangeMode()) {
if (!current?.start || (current.start && current.end)) {
if (typeof value === "function") {
value({
start: dateStr,
end: null,
...(hour && { startHour: startHour() }),
});
}
} else {
const start = current.start;
if (typeof value === "function") {
const newValue = dateStr < start ? { start: dateStr, end: start } : { start, end: dateStr };
if (hour) {
newValue.startHour = current.startHour || startHour();
newValue.endHour = current.endHour || endHour();
}
value(newValue);
}
isOpen(false);
}
} else {
if (typeof value === "function") {
value(hour ? `${dateStr}T${String(startHour()).padStart(2, "0")}:00:00` : dateStr);
}
isOpen(false);
}
};
const displayValue = $(() => {
const v = val(value);
if (!v) return "";
if (typeof v === "string") {
if (hour && v.includes("T")) return v.replace("T", " ");
return v;
}
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 "";
});
const move = (m) => {
const d = internalDate();
internalDate(new Date(d.getFullYear(), d.getMonth() + m, 1));
};
const moveYear = (y) => {
const d = internalDate();
internalDate(new Date(d.getFullYear() + y, d.getMonth(), 1));
};
const HourSlider = ({ value: hVal, onChange }) => {
return Tag("div", { class: "flex-1" }, [
Tag("div", { class: "flex gap-2 items-center" }, [
Tag("input", {
type: "range",
min: 0,
max: 23,
value: hVal,
class: "range range-xs flex-1",
oninput: (e) => {
const newHour = parseInt(e.target.value);
onChange(newHour);
},
}),
Tag("span", { class: "text-sm font-mono min-w-[48px] text-center" },
() => String(val(hVal)).padStart(2, "0") + ":00"
),
]),
]);
};
return Tag("div", { class: "relative w-full" }, [
Input({
label,
placeholder: placeholder || (isRangeMode() ? "Seleccionar rango..." : "Seleccionar fecha..."),
value: displayValue,
readonly: true,
icon: Tag("img", { src: iconCalendar, class: "opacity-40" }),
onclick: (e) => {
e.stopPropagation();
isOpen(!isOpen());
},
...rest,
}),
If(isOpen, () =>
Tag(
"div",
{
class: "absolute left-0 mt-2 p-4 bg-base-100 border border-base-300 shadow-2xl rounded-box z-[100] w-80 select-none",
onclick: (e) => e.stopPropagation(),
},
[
Tag("div", { class: "flex justify-between items-center mb-4 gap-1" }, [
Tag("div", { class: "flex gap-0.5" }, [
Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(-1) },
Tag("img", { src: iconLLeft, class: "opacity-40" })
),
Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) },
Tag("img", { src: iconLeft, class: "opacity-40" })
),
]),
Tag("span", { class: "font-bold uppercase flex-1 text-center" }, [
() => internalDate().toLocaleString("es-ES", { month: "short", year: "numeric" }),
]),
Tag("div", { class: "flex gap-0.5" }, [
Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(1) },
Tag("img", { src: iconRight, class: "opacity-40" })
),
Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) },
Tag("img", { src: iconRRight, class: "opacity-40" })
),
]),
]),
Tag("div", { class: "grid grid-cols-7 gap-1", onmouseleave: () => hoverDate(null) }, [
...["L", "M", "X", "J", "V", "S", "D"].map((d) => Tag("div", { class: "text-[10px] opacity-40 font-bold text-center" }, d)),
() => {
const d = internalDate();
const year = d.getFullYear();
const month = d.getMonth();
const firstDay = new Date(year, month, 1).getDay();
const offset = firstDay === 0 ? 6 : firstDay - 1;
const daysInMonth = new Date(year, month + 1, 0).getDate();
const nodes = [];
for (let i = 0; i < offset; i++) nodes.push(Tag("div"));
for (let i = 1; i <= daysInMonth; i++) {
const date = new Date(year, month, i);
const dStr = formatDate(date);
nodes.push(
Tag(
"button",
{
type: "button",
class: () => {
const v = val(value);
const h = hoverDate();
const isStart = typeof v === "string" ? v.split("T")[0] === dStr : v?.start === dStr;
const isEnd = v?.end === dStr;
let inRange = false;
if (isRangeMode() && v?.start) {
const start = v.start;
if (!v.end && h) {
inRange = (dStr > start && dStr <= h) || (dStr < start && dStr >= h);
} else if (v.end) {
inRange = dStr > start && dStr < v.end;
}
}
const base = "btn btn-xs p-0 aspect-square min-h-0 h-auto font-normal relative";
const state = isStart || isEnd ? "btn-primary z-10" : inRange ? "bg-primary/20 border-none rounded-none" : "btn-ghost";
const today = dStr === todayStr ? "ring-1 ring-primary ring-inset font-black text-primary" : "";
return `${base} ${state} ${today}`;
},
onmouseenter: () => { if (isRangeMode()) hoverDate(dStr); },
onclick: () => selectDate(date),
},
[i.toString()],
),
);
}
return nodes;
},
]),
hour ? Tag("div", { class: "mt-3 pt-2 border-t border-base-300" }, [
isRangeMode()
? Tag("div", { class: "flex gap-4" }, [
HourSlider({
value: startHour,
onChange: (newHour) => {
startHour(newHour);
const currentVal = val(value);
if (currentVal?.start) value({ ...currentVal, startHour: newHour });
},
}),
HourSlider({
value: endHour,
onChange: (newHour) => {
endHour(newHour);
const currentVal = val(value);
if (currentVal?.end) value({ ...currentVal, endHour: newHour });
},
}),
])
: HourSlider({
value: startHour,
onChange: (newHour) => {
startHour(newHour);
const currentVal = val(value);
if (currentVal && typeof currentVal === "string" && currentVal.includes("-")) {
value(currentVal.split("T")[0] + "T" + String(newHour).padStart(2, "0") + ":00:00");
}
},
}),
]) : null,
],
),
),
If(isOpen, () => Tag("div", { class: "fixed inset-0 z-[90]", onclick: () => isOpen(false) })),
]);
};

18
src/components_OLD/Drawer.js
View File

@@ -1,18 +0,0 @@
import { Tag } from "sigpro";
import { joinClass } from "../core/utils.js";
/** DRAWER */
export const Drawer = (props) =>
Tag("div", { class: joinClass("drawer", props.class) }, [
Tag("input", {
id: props.id,
type: "checkbox",
class: "drawer-toggle",
checked: props.open,
}),
Tag("div", { class: "drawer-content" }, props.content),
Tag("div", { class: "drawer-side" }, [
Tag("label", { for: props.id, class: "drawer-overlay", onclick: () => props.open?.(false) }),
Tag("div", { class: "min-h-full bg-base-200 w-80" }, props.side),
]),
]);

53
src/components_OLD/Dropdown.js
View File

@@ -1,53 +0,0 @@
import { Tag, For } from "sigpro";
import { val } from "../core/utils.js";
export const Dropdown = (props, children) => {
const { label, icon, items, ...rest } = props;
const renderContent = () => {
if (items) {
const source = typeof items === "function" ? items : () => items;
return Tag("ul", {
tabindex: 0,
class: "dropdown-content z-[50] menu p-2 shadow bg-base-100 rounded-box w-52 border border-base-300"
}, [
For(source, (item) =>
Tag("li", {}, [
Tag("a", {
class: item.class || "",
onclick: (e) => {
if (item.onclick) item.onclick(e);
if (document.activeElement) document.activeElement.blur();
}
}, [
item.icon ? Tag("span", {}, item.icon) : null,
Tag("span", {}, item.label)
])
])
)
]);
}
return Tag("div", {
tabindex: 0,
class: "dropdown-content z-[50] p-2 shadow bg-base-100 rounded-box min-w-max border border-base-300"
}, [
typeof children === "function" ? children() : children
]);
};
return Tag("div", {
...rest,
class: () => `dropdown ${val(props.class) || ""}`,
}, [
Tag("div", {
tabindex: 0,
role: "button",
class: "btn m-1 flex items-center gap-2",
}, [
icon ? (typeof icon === "function" ? icon() : icon) : null,
label ? (typeof label === "function" ? label() : label) : null
]),
renderContent()
]);
};

47
src/components_OLD/Fab.js
View File

@@ -1,47 +0,0 @@
import { Tag } from "sigpro";
import { val } from "../core/utils.js";
/** FAB (Floating Action Button) */
export const Fab = (props) => {
const { icon, label, actions = [], position = "bottom-6 right-6", class: className = "", ...rest } = props;
return Tag(
"div",
{
...rest,
class: `fab absolute ${position} flex flex-col-reverse items-end gap-3 z-[100] ${className}`,
},
[
Tag(
"div",
{
tabindex: 0,
role: "button",
class: "btn btn-lg btn-circle btn-primary shadow-2xl",
},
[
icon ? (typeof icon === "function" ? icon() : icon) : null,
!icon && label ? label : null
],
),
...val(actions).map((act) =>
Tag("div", { class: "flex items-center gap-3 transition-all duration-300" }, [
act.label ? Tag("span", { class: "badge badge-ghost shadow-sm whitespace-nowrap" }, act.label) : null,
Tag(
"button",
{
type: "button",
class: `btn btn-circle shadow-lg ${act.class || ""}`,
onclick: (e) => {
e.stopPropagation();
act.onclick?.(e);
},
},
[act.icon ? (typeof act.icon === "function" ? act.icon() : act.icon) : act.text || ""],
),
]),
),
],
);
};

19
src/components_OLD/Fieldset.js
View File

@@ -1,19 +0,0 @@
import { Tag } from "sigpro";
import { val, joinClass } from "../core/utils.js";
/** FIELDSET */
export const Fieldset = (props, children) =>
Tag(
"fieldset",
{
...props,
class: joinClass("fieldset bg-base-200 border border-base-300 p-4 rounded-lg", props.class),
},
[
() => {
const legendText = val(props.legend);
return legendText ? Tag("legend", { class: "fieldset-legend font-bold" }, [legendText]) : null;
},
children,
],
);

113
src/components_OLD/Fileinput.js
View File

@@ -1,113 +0,0 @@
import { $, Tag, If, For } from "sigpro";
import { iconUpload, iconClose } from "../core/icons.js";
/** FILEINPUT */
export const Fileinput = (props) => {
const { tooltip, max = 2, accept = "*", onSelect } = props;
const selectedFiles = $([]);
const isDragging = $(false);
const error = $(null);
const MAX_BYTES = max * 1024 * 1024;
const handleFiles = (files) => {
const fileList = Array.from(files);
error(null);
const oversized = fileList.find((f) => f.size > MAX_BYTES);
if (oversized) {
error(`Máx ${max}MB`);
return;
}
selectedFiles([...selectedFiles(), ...fileList]);
onSelect?.(selectedFiles());
};
const removeFile = (index) => {
const updated = selectedFiles().filter((_, i) => i !== index);
selectedFiles(updated);
onSelect?.(updated);
};
return Tag("fieldset", { class: "fieldset w-full p-0" }, [
Tag(
"div",
{
class: () => `w-full ${tooltip ? "tooltip tooltip-top before:z-50 after:z-50" : ""}`,
"data-tip": tooltip,
},
[
Tag(
"label",
{
class: () => `
relative flex items-center justify-between w-full h-12 px-4
border-2 border-dashed rounded-lg cursor-pointer
transition-all duration-200
${isDragging() ? "border-primary bg-primary/10" : "border-base-content/20 bg-base-100 hover:bg-base-200"}
`,
ondragover: (e) => {
e.preventDefault();
isDragging(true);
},
ondragleave: () => isDragging(false),
ondrop: (e) => {
e.preventDefault();
isDragging(false);
handleFiles(e.dataTransfer.files);
},
},
[
Tag("div", { class: "flex items-center gap-3 w-full" }, [
Tag("img", { src: iconUpload, class: "w-5 h-5 opacity-50 shrink-0" }),
Tag("span", { class: "text-sm opacity-70 truncate grow text-left" }, "Arrastra o selecciona archivos..."),
Tag("span", { class: "text-[10px] opacity-40 shrink-0" }, `Máx ${max}MB`),
]),
Tag("input", {
type: "file",
multiple: true,
accept: accept,
class: "hidden",
onchange: (e) => handleFiles(e.target.files),
}),
],
),
],
),
() => (error() ? Tag("span", { class: "text-[10px] text-error mt-1 px-1 font-medium" }, error()) : null),
If(
() => selectedFiles().length > 0,
() =>
Tag("ul", { class: "mt-2 space-y-1" }, [
For(
selectedFiles,
(file, index) =>
Tag("li", { class: "flex items-center justify-between p-1.5 pl-3 text-xs bg-base-200/50 rounded-md border border-base-300" }, [
Tag("div", { class: "flex items-center gap-2 truncate" }, [
Tag("span", { class: "opacity-50" }, "📄"),
Tag("span", { class: "truncate font-medium max-w-[200px]" }, file.name),
Tag("span", { class: "text-[9px] opacity-40" }, `(${(file.size / 1024).toFixed(0)} KB)`),
]),
Tag(
"button",
{
type: "button",
class: "btn btn-ghost btn-xs btn-circle",
onclick: (e) => {
e.preventDefault();
e.stopPropagation();
removeFile(index);
},
},
[Tag("img", { src: iconClose, class: "w-3 h-3 opacity-70" })],
),
]),
(file) => file.name + file.lastModified,
),
]),
),
]);
};

8
src/components_OLD/Indicator.js
View File

@@ -1,8 +0,0 @@
import { Tag } from "sigpro";
import { ui } from "../core/utils.js";
export const Indicator = (props, children) =>
Tag("div", { class: "indicator" }, [
children,
props.value && Tag("span", { class: ui('badge', props.ui, props.class) }, props.value),
]);

77
src/components_OLD/Input.js
View File

@@ -1,77 +0,0 @@
import { $, Tag } from "sigpro";
import { val, joinClass } from "../core/utils.js";
import { tt } from "../core/i18n.js";
import {
iconAbc,
iconLock,
iconCalendar,
icon123,
iconMail,
iconShow,
iconHide
} from "../core/icons.js";
/** INPUT */
export const Input = (props) => {
const { label, tip, value, error, isSearch, icon, type = "text", ...rest } = props;
const isPassword = type === "password";
const visible = $(false);
const iconsByType = {
text: iconAbc,
password: iconLock,
date: iconCalendar,
number: icon123,
email: iconMail,
};
const inputEl = Tag("input", {
...rest,
type: () => (isPassword ? (visible() ? "text" : "password") : type),
placeholder: props.placeholder || label || (isSearch ? tt("search")() : " "),
class: joinClass("grow order-2 focus:outline-none", props.class),
value: value,
oninput: (e) => props.oninput?.(e),
disabled: () => val(props.disabled),
});
const leftIcon = icon ? icon : iconsByType[type] ? Tag("img", { src: iconsByType[type], class: "opacity-50", alt: type }) : null;
return Tag(
"label",
{
class: () => joinClass("input input-bordered floating-label flex items-center gap-2 w-full relative", val(error) ? "input-error" : ""),
},
[
leftIcon ? Tag("div", { class: "order-1 shrink-0" }, leftIcon) : null,
label ? Tag("span", { class: "text-base-content/60 order-0" }, label) : null,
inputEl,
isPassword
? Tag(
"button",
{
type: "button",
class: "order-3 btn btn-ghost btn-xs btn-circle opacity-50 hover:opacity-100",
onclick: (e) => {
e.preventDefault();
visible(!visible());
},
},
() =>
Tag("img", {
class: "w-5 h-5",
src: visible() ? iconShow : iconHide,
}),
)
: null,
tip
? Tag(
"div",
{ class: "tooltip tooltip-left order-4", "data-tip": tip },
Tag("span", { class: "badge badge-ghost badge-xs cursor-help" }, "?"),
)
: null,
() => (val(error) ? Tag("span", { class: "text-error text-[10px] absolute -bottom-5 left-2" }, val(error)) : null),
],
);
};

29
src/components_OLD/List.js
View File

@@ -1,29 +0,0 @@
import { Tag, If, For } from "sigpro";
import { joinClass, val } from "../core/utils.js";
/** LIST */
export const List = (props) => {
const {
items,
header,
render,
keyFn = (item, index) => index,
class: className,
...rest
} = props;
const listItems = For(
items,
(item, index) => Tag("li", { class: "list-row" }, [render(item, index)]),
keyFn
);
return Tag(
"ul",
{
...rest,
class: joinClass("list bg-base-100 rounded-box shadow-md", className),
},
header ? [If(header, () => Tag("li", { class: "p-4 pb-2 text-xs opacity-60" }, [val(header)])), listItems] : listItems
);
};

13
src/components_OLD/Loading.js
View File

@@ -1,13 +0,0 @@
import { Tag, If } from "sigpro";
/** LOADING (Overlay Component) */
export const Loading = (props) => {
// Se espera un signal props.$show para controlar la visibilidad
return If(props.$show, () =>
Tag("div", {
class: "fixed inset-0 z-[100] flex items-center justify-center backdrop-blur-sm bg-base-100/30"
}, [
Tag("span", { class: "loading loading-spinner loading-lg text-primary" }),
]),
);
};

25
src/components_OLD/Menu.js
View File

@@ -1,25 +0,0 @@
import { Tag, For } from "sigpro";
import { val, joinClass } from "../core/utils.js";
/** MENU */
export const Menu = (props) => {
const renderItems = (items) =>
For(
() => items || [],
(it) =>
Tag("li", {}, [
it.children
? Tag("details", { open: it.open }, [
Tag("summary", {}, [it.icon && Tag("span", { class: "mr-2" }, it.icon), it.label]),
Tag("ul", {}, renderItems(it.children)),
])
: Tag("a", { class: () => (val(it.active) ? "active" : ""), onclick: it.onclick }, [
it.icon && Tag("span", { class: "mr-2" }, it.icon),
it.label,
]),
]),
(it, i) => it.label || i,
);
return Tag("ul", { ...props, class: joinClass("menu bg-base-200 rounded-box", props.class) }, renderItems(props.items));
};

54
src/components_OLD/Modal.js
View File

@@ -1,54 +0,0 @@
import { Tag, Watch } from "sigpro";
import { tt } from "../core/i18n.js";
import { Button } from "./Button.js";
/** MODAL REACTIVO NATIVO */
export const Modal = (props, children) => {
const { title, buttons, open, ...rest } = props;
const dialogRef = { current: null };
// Sincronizamos la señal con los métodos nativos del navegador
Watch(() => {
const dialog = dialogRef.current;
if (!dialog) return;
if (open()) {
// Solo abrimos si no está ya abierto (evita bucles)
if (!dialog.open) dialog.showModal();
} else {
if (dialog.open) dialog.close();
}
});
const close = (e) => {
if (e && e.preventDefault) e.preventDefault();
open(false);
};
return Tag("dialog", {
...rest,
ref: dialogRef,
class: "modal",
// Importante: Si el usuario pulsa ESC, actualizamos la señal
oncancel: () => open(false)
}, [
Tag("div", { class: "modal-box" }, [
title ? Tag("h3", { class: "text-lg font-bold mb-4" }, title) : null,
Tag("div", { class: "py-2" }, [
typeof children === "function" ? children() : children
]),
Tag("div", { class: "modal-action flex gap-2" }, [
...(Array.isArray(buttons) ? buttons : [buttons]).filter(Boolean),
Button({ type: "button", onclick: close }, tt("close")()),
]),
]),
// Backdrop nativo que sincroniza con la señal
Tag("form", {
method: "dialog",
class: "modal-backdrop",
onsubmit: close
}, [
Tag("button", {}, "close")
])
]);
};

6
src/components_OLD/Navbar.js
View File

@@ -1,6 +0,0 @@
import { Tag } from "sigpro";
import { joinClass } from "../core/utils.js";
/** NAVBAR */
export const Navbar = (props, children) =>
Tag("div", { ...props, class: joinClass("navbar bg-base-100 shadow-sm px-4", props.class) }, children);

25
src/components_OLD/Radio.js
View File

@@ -1,25 +0,0 @@
import { Tag } from "sigpro";
import { val, joinClass } from "../core/utils.js";
/** RADIO */
export const Radio = (props) => {
const { label, tooltip, value, inputValue, name, ...rest } = props;
const radioEl = Tag("input", {
...rest,
type: "radio",
name: name,
class: joinClass("radio", props.class),
checked: () => val(value) === inputValue,
onclick: () => {
if (typeof value === "function") value(inputValue);
},
});
if (!label && !tooltip) return radioEl;
return Tag("label", { class: "label cursor-pointer justify-start gap-3" }, [
radioEl,
label ? Tag("span", { class: "label-text" }, label) : null,
]);
};

24
src/components_OLD/Range.js
View File

@@ -1,24 +0,0 @@
import { Tag } from "sigpro";
import { val, joinClass } from "../core/utils.js";
/** RANGE */
export const Range = (props) => {
const { label, tooltip, value, ...rest } = props;
const rangeEl = Tag("input", {
...rest,
type: "range",
class: joinClass("range", props.class),
value: value,
disabled: () => val(props.disabled)
});
if (!label && !tooltip) return rangeEl;
const layout = Tag("div", { class: "flex flex-col gap-2" }, [
label ? Tag("span", { class: "label-text" }, label) : null,
rangeEl
]);
return tooltip ? Tag("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout;
};

35
src/components_OLD/Rating.js
View File

@@ -1,35 +0,0 @@
import { Tag } from "sigpro";
import { val } from "../core/utils.js";
/** RATING */
export const Rating = (props) => {
const { value, count = 5, mask = "mask-star", readonly = false, onchange, ...rest } = props;
const ratingGroup = `rating-${Math.random().toString(36).slice(2, 7)}`;
return Tag(
"div",
{
...rest,
class: () => `rating ${val(readonly) ? "pointer-events-none" : ""} ${props.class || ""}`,
},
Array.from({ length: val(count) }, (_, i) => {
const starValue = i + 1;
return Tag("input", {
type: "radio",
name: ratingGroup,
class: `mask ${mask}`,
checked: () => Math.round(val(value)) === starValue,
onchange: () => {
if (!val(readonly)) {
if (typeof onchange === "function") {
onchange(starValue);
}
else if (typeof value === "function") {
value(starValue);
}
}
},
});
})
);
};

36
src/components_OLD/Select.js
View File

@@ -1,36 +0,0 @@
import { Tag, For } from "sigpro";
import { val, joinClass } from "../core/utils.js";
/** SELECT */
export const Select = (props) => {
const { label, options, value, ...rest } = props;
const selectEl = Tag(
"select",
{
...rest,
class: joinClass("select select-bordered w-full", props.class),
value: value
},
For(
() => val(options) || [],
(opt) =>
Tag(
"option",
{
value: opt.value,
$selected: () => String(val(value)) === String(opt.value),
},
opt.label,
),
(opt) => opt.value,
),
);
if (!label) return selectEl;
return Tag("label", { class: "fieldset-label flex flex-col gap-1" }, [
Tag("span", {}, label),
selectEl
]);
};

6
src/components_OLD/Stack.js
View File

@@ -1,6 +0,0 @@
import { Tag } from "sigpro";
import { joinClass } from "../core/utils.js";
/** STACK */
export const Stack = (props, children) =>
Tag("div", { ...props, class: joinClass("stack", props.class) }, children);

11
src/components_OLD/Stat.js
View File

@@ -1,11 +0,0 @@
import { Tag } from "sigpro";
import { val, joinClass } from "../core/utils.js";
/** STAT */
export const Stat = (props) =>
Tag("div", { ...props, class: joinClass("stat", props.class) }, [
props.icon && Tag("div", { class: "stat-figure text-secondary" }, props.icon),
props.label && Tag("div", { class: "stat-title" }, props.label),
Tag("div", { class: "stat-value" }, () => val(props.value) ?? props.value),
props.desc && Tag("div", { class: "stat-desc" }, props.desc),
]);

13
src/components_OLD/Swap.js
View File

@@ -1,13 +0,0 @@
import { Tag } from "sigpro";
import { joinClass } from "../core/utils.js";
/** SWAP */
export const Swap = (props) =>
Tag("label", { class: joinClass("swap", props.class) }, [
Tag("input", {
type: "checkbox",
checked: props.value
}),
Tag("div", { class: "swap-on" }, props.on),
Tag("div", { class: "swap-off" }, props.off),
]);

60
src/components_OLD/Table.js
View File

@@ -1,60 +0,0 @@
import { Tag, For, If } from "sigpro";
import { val, joinClass } from "../core/utils.js";
import { tt } from "../core/i18n.js";
/** TABLE */
export const Table = (props) => {
const {
items = [],
columns = [],
keyFn,
zebra = false,
pinRows = false,
empty = tt("nodata")(),
...rest
} = props;
const tableClass = () => joinClass(
"table",
`${val(zebra) ? "table-zebra" : ""} ${val(pinRows) ? "table-pin-rows" : ""} ${props.class || ""}`
);
return Tag("div", { class: "overflow-x-auto w-full bg-base-100 rounded-box border border-base-300" }, [
Tag("table", { ...rest, class: tableClass }, [
Tag("thead", {}, [
Tag("tr", {},
columns.map(col => Tag("th", { class: col.class || "" }, col.label))
)
]),
Tag("tbody", {}, [
For(items, (item, index) => {
return Tag("tr", { class: "hover" },
columns.map(col => {
const cellContent = () => {
if (col.render) return col.render(item, index);
const value = item[col.key];
return val(value);
};
return Tag("td", { class: col.class || "" }, [cellContent]);
})
);
}, keyFn || ((item, idx) => item.id || idx)),
If(() => val(items).length === 0, () =>
Tag("tr", {}, [
Tag("td", { colspan: columns.length, class: "text-center p-10 opacity-50" }, [
val(empty)
])
])
)
]),
If(() => columns.some(c => c.footer), () =>
Tag("tfoot", {}, [
Tag("tr", {},
columns.map(col => Tag("th", {}, col.footer || ""))
)
])
)
])
]);
};

46
src/components_OLD/Tabs.js
View File

@@ -1,46 +0,0 @@
import { Tag, For } from "sigpro";
import { val, joinClass } from "../core/utils.js";
/** TABS */
export const Tabs = (props) => {
const { items, ...rest } = props;
const itemsSignal = typeof items === "function" ? items : () => items || [];
return Tag("div", { ...rest, class: "flex flex-col gap-4 w-full" }, [
Tag(
"div",
{
role: "tablist",
class: joinClass("tabs tabs-box", props.class),
},
For(
itemsSignal,
(it) =>
Tag(
"a",
{
role: "tab",
class: () => joinClass(
"tab",
val(it.active) && "tab-active",
val(it.disabled) && "tab-disabled",
it.tip && "tooltip"
),
"data-tip": it.tip,
onclick: (e) => !val(it.disabled) && it.onclick?.(e),
},
it.label,
),
(t) => t.label,
),
),
() => {
const active = itemsSignal().find((it) => val(it.active));
if (!active) return null;
const content = val(active.content);
return Tag("div", { class: "p-4" }, [
typeof content === "function" ? content() : content
]);
},
]);
};

52
src/components_OLD/Timeline.js
View File

@@ -1,52 +0,0 @@
import { Tag, For } from "sigpro";
import { val } from "../core/utils.js";
import { iconInfo, iconSuccess, iconWarning, iconError } from "../core/icons.js";
/** TIMELINE */
export const Timeline = (props) => {
const { items = [], vertical = true, compact = false, ...rest } = props;
const icons = {
info: iconInfo,
success: iconSuccess,
warning: iconWarning,
error: iconError,
};
return Tag(
"ul",
{
...rest,
class: () =>
`timeline ${val(vertical) ? "timeline-vertical" : "timeline-horizontal"} ${
val(compact) ? "timeline-compact" : ""
} ${props.class || ""}`,
},
[
For(
items,
(item, i) => {
const isFirst = i === 0;
const isLast = i === val(items).length - 1;
const itemType = item.type || "success";
const renderSlot = (content) => (typeof content === "function" ? content() : content);
return Tag("li", { class: "flex-1" }, [
!isFirst ? Tag("hr", { class: item.completed ? "bg-primary" : "" }) : null,
Tag("div", { class: "timeline-start" }, [renderSlot(item.title)]),
Tag("div", { class: "timeline-middle" }, [
Tag("img", {
src: icons[itemType] || item.icon || icons.success,
class: "w-4 h-4 object-contain mx-1",
alt: itemType,
}),
]),
Tag("div", { class: "timeline-end timeline-box shadow-sm" }, [renderSlot(item.detail)]),
!isLast ? Tag("hr", { class: item.completed ? "bg-primary" : "" }) : null,
]);
},
(item, i) => item.id || i,
),
],
);
};

63
src/components_OLD/Toast.js
View File

@@ -1,63 +0,0 @@
import { Tag, Mount } from "sigpro";
import { Button } from "./Button.js";
/** TOAST (Imperative Function) */
export const Toast = (message, type = "alert-success", duration = 3500) => {
let container = document.getElementById("sigpro-toast-container");
// Crear el contenedor global si no existe
if (!container) {
container = Tag("div", {
id: "sigpro-toast-container",
class: "fixed top-0 right-0 z-[9999] p-4 flex flex-col gap-2 pointer-events-none",
});
document.body.appendChild(container);
}
const toastHost = Tag("div", { style: "display: contents" });
container.appendChild(toastHost);
let timeoutId;
const close = () => {
clearTimeout(timeoutId);
const el = toastHost.firstElementChild;
if (el && !el.classList.contains("opacity-0")) {
el.classList.add("translate-x-full", "opacity-0");
setTimeout(() => {
instance.destroy();
toastHost.remove();
// Limpiar el contenedor si ya no hay más toasts
if (!container.hasChildNodes()) container.remove();
}, 300);
} else {
instance.destroy();
toastHost.remove();
}
};
const ToastComponent = () => {
const el = Tag(
"div",
{
class: `alert alert-soft ${type} shadow-lg transition-all duration-300 translate-x-10 opacity-0 pointer-events-auto`,
},
[
Tag("span", {}, [typeof message === "function" ? message() : message]),
Button({ class: "btn-xs btn-circle btn-ghost", onclick: close }, "✕")
],
);
// Animación de entrada
requestAnimationFrame(() => el.classList.remove("translate-x-10", "opacity-0"));
return el;
};
const instance = Mount(ToastComponent, toastHost);
if (duration > 0) {
timeoutId = setTimeout(close, duration);
}
return close;
};

6
src/components_OLD/Tooltip.js
View File

@@ -1,6 +0,0 @@
import { Tag } from "sigpro";
import { joinClass } from "../core/utils.js";
/** TOOLTIP */
export const Tooltip = (props, children) =>
Tag("div", { ...props, class: joinClass("tooltip", props.class), "data-tip": props.tip }, children);

110
src/components_OLD/index.js
View File

@@ -1,110 +0,0 @@
import * as AccordionModule from './Accordion.js';
import * as AlertModule from './Alert.js';
import * as AutocompleteModule from './Autocomplete.js';
import * as BadgeModule from './Badge.js';
import * as ButtonModule from './Button.js';
import * as CheckboxModule from './Checkbox.js';
import * as ColorpickerModule from './Colorpicker.js';
import * as DatepickerModule from './Datepicker.js';
import * as DrawerModule from './Drawer.js';
import * as DropdownModule from './Dropdown.js';
import * as FabModule from './Fab.js';
import * as FieldsetModule from './Fieldset.js';
import * as FileinputModule from './Fileinput.js';
import * as IndicatorModule from './Indicator.js';
import * as InputModule from './Input.js';
import * as ListModule from './List.js';
import * as LoadingModule from './Loading.js';
import * as MenuModule from './Menu.js';
import * as ModalModule from './Modal.js';
import * as NavbarModule from './Navbar.js';
import * as RadioModule from './Radio.js';
import * as RangeModule from './Range.js';
import * as RatingModule from './Rating.js';
import * as SelectModule from './Select.js';
import * as StackModule from './Stack.js';
import * as StatModule from './Stat.js';
import * as SwapModule from './Swap.js';
import * as TableModule from './Table.js';
import * as TabsModule from './Tabs.js';
import * as TimelineModule from './Timeline.js';
import * as ToastModule from './Toast.js';
import * as TooltipModule from './Tooltip.js';
export * from './Accordion.js';
export * from './Alert.js';
export * from './Autocomplete.js';
export * from './Badge.js';
export * from './Button.js';
export * from './Checkbox.js';
export * from './Colorpicker.js';
export * from './Datepicker.js';
export * from './Drawer.js';
export * from './Dropdown.js';
export * from "./Fab.js";
export * from './Fieldset.js';
export * from './Fileinput.js';
export * from './Indicator.js';
export * from './Input.js';
export * from './List.js';
export * from './Loading.js';
export * from './Menu.js';
export * from './Modal.js';
export * from './Navbar.js';
export * from './Radio.js';
export * from './Range.js';
export * from './Rating.js';
export * from './Select.js';
export * from './Stack.js';
export * from './Stat.js';
export * from './Swap.js';
export * from './Table.js';
export * from './Tabs.js';
export * from './Timeline.js';
export * from './Toast.js';
export * from './Tooltip.js';
const Components = {
...AccordionModule,
...AlertModule,
...AutocompleteModule,
...BadgeModule,
...ButtonModule,
...CheckboxModule,
...ColorpickerModule,
...DatepickerModule,
...DrawerModule,
...DropdownModule,
...FabModule,
...FieldsetModule,
...FileinputModule,
...IndicatorModule,
...InputModule,
...ListModule,
...LoadingModule,
...MenuModule,
...ModalModule,
...NavbarModule,
...RadioModule,
...RangeModule,
...RatingModule,
...SelectModule,
...StackModule,
...StatModule,
...SwapModule,
...TableModule,
...TabsModule,
...TimelineModule,
...ToastModule,
...TooltipModule
};
export default {
...Components,
install: (target = window) => {
Object.entries(Components).forEach(([name, component]) => {
target[name] = component;
});
console.log("🚀 SigproUI");
}
};

2
src/core/i18n.js
View File

@@ -1,4 +1,4 @@
import { $ } from "../sigpro.js";
// import { $ } from "../sigpro.js";
export const i18n = {
es: {

2
src/core/utils.js
View File

@@ -1,5 +1,5 @@
// core/utils.js
import { Tag } from "../sigpro.js";
// import { Tag } from "../sigpro.js";
export const val = t => typeof t === "function" ? t() : t;

31
src/sigpro.js
View File

@@ -15,7 +15,7 @@ const isObj = (o) => typeof o === "object" && o !== null;
const runWithContext = (effect, callback) => {
const previousEffect = activeEffect;
activeEffect = effect;
try { return callback(); }
try { return callback(); }
finally { activeEffect = previousEffect; }
};
@@ -103,7 +103,7 @@ const $ = (initialValue, storageKey = null) => {
if (effect._deleted) return;
effect._deps.forEach((dep) => dep.delete(effect));
effect._deps.clear();
runWithContext(effect, () => {
const newValue = initialValue();
if (!Object.is(cachedValue, newValue) || isDirty) {
@@ -179,7 +179,7 @@ const $$ = (object, cache = new WeakMap()) => {
const Watch = (target, callbackFn) => {
const isExplicit = isArr(target);
const callback = isExplicit ? callbackFn : target;
if (!isFunc(callback)) return () => {};
if (!isFunc(callback)) return () => { };
const owner = currentOwner;
const runner = () => {
@@ -191,7 +191,7 @@ const Watch = (target, callbackFn) => {
const previousOwner = currentOwner;
runner.depth = activeEffect ? activeEffect.depth + 1 : 0;
runWithContext(runner, () => {
currentOwner = { cleanups: runner._cleanups };
if (isExplicit) {
@@ -229,8 +229,8 @@ const Tag = (tag, props = {}, children = []) => {
}
const isSVG = /^(svg|path|circle|rect|line|polyline|polygon|g|defs|text|tspan|use)$/.test(tag);
const element = isSVG
? doc.createElementNS("http://www.w3.org/2000/svg", tag)
const element = isSVG
? doc.createElementNS("http://www.w3.org/2000/svg", tag)
: createEl(tag);
element._cleanups = new Set();
@@ -249,7 +249,7 @@ const Tag = (tag, props = {}, children = []) => {
for (let [key, value] of Object.entries(props)) {
if (key === "ref") { (isFunc(value) ? value(element) : (value.current = element)); continue; }
const isSignal = isFunc(value);
if (key.startsWith("on")) {
const eventName = key.slice(2).toLowerCase().split(".")[0];
@@ -337,14 +337,22 @@ const For = (source, renderFn, keyFn, tag = "div", props = { style: "display:con
for (let i = 0; i < items.length; i++) {
const item = items[i];
const key = keyFn ? keyFn(item, i) : i;
let view = viewCache.get(key) || Render(() => renderFn(item, i));
let view = viewCache.get(key);
if (!view) {
const result = renderFn(item, i);
view = result instanceof Node
? { container: result, destroy: () => { cleanupNode(result); result.remove(); } }
: Render(() => result);
}
viewCache.delete(key);
nextCache.set(key, view);
order.push(key);
}
viewCache.forEach((view) => { view.destroy(); view.container.remove(); });
viewCache.forEach(v => v.destroy());
let anchor = marker;
for (let i = order.length - 1; i >= 0; i--) {
const view = nextCache.get(order[i]);
@@ -415,9 +423,8 @@ const Mount = (component, target) => {
return instance;
};
export const Fragment = ({ children }) => children;
const SigPro = { $, $$, Render, Watch, Tag, If, For, Router, Mount, Fragment };
const SigPro = { $, $$, Render, Watch, Tag, If, For, Router, Mount };
if (typeof window !== "undefined") {
assign(window, SigPro);