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

Update new functions

Browse Source
This commit is contained in:
Natxo
2026-04-06 03:19:15 +02:00
parent f9095332eb
commit 294547fc56
139 changed files with 2249 additions and 2109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Accordion.js
View File

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

10
src/components/Alert.js
View File

@@ -1,5 +1,5 @@
// components/Alert.js
import { $html } from "../sigpro.js";
import { Tag } from "../sigpro.js";
import { ui, getIcon } from "../core/utils.js";
/**
@@ -26,16 +26,16 @@ export const Alert = (props, children) => {
const content = children || props.message;
return $html("div", {
return Tag("div", {
...rest,
role: "alert",
class: ui('alert', allClasses),
}, () => [
getIcon(iconMap[type]),
$html("div", { class: "flex-1" }, [
$html("span", {}, [typeof content === "function" ? content() : content])
Tag("div", { class: "flex-1" }, [
Tag("span", {}, [typeof content === "function" ? content() : content])
]),
actions ? $html("div", { class: "flex-none" }, [
actions ? Tag("div", { class: "flex-none" }, [
typeof actions === "function" ? actions() : actions
]) : null,
].filter(Boolean));

14
src/components/Autocomplete.js
View File

@@ -1,5 +1,5 @@
// components/Autocomplete.js
import { $, $html, $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";
@@ -58,7 +58,7 @@ export const Autocomplete = (props) => {
}
};
return $html("div", { class: 'relative w-full' }, [
return Tag("div", { class: 'relative w-full' }, [
Input({
label,
class: className,
@@ -76,18 +76,18 @@ export const Autocomplete = (props) => {
},
...rest,
}),
$html(
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(
For(
list,
(opt, i) =>
$html("li", {}, [
$html(
Tag("li", {}, [
Tag(
"a",
{
class: () => `block w-full ${cursor() === i ? "active bg-primary text-primary-content" : ""}`,
@@ -99,7 +99,7 @@ export const Autocomplete = (props) => {
]),
(opt, i) => (typeof opt === "string" ? opt : opt.value) + i,
),
() => (list().length ? null : $html("li", { class: "p-2 text-center opacity-50" }, tt("nodata")())),
() => (list().length ? null : Tag("li", { class: "p-2 text-center opacity-50" }, tt("nodata")())),
],
),
]);

4
src/components/Badge.js
View File

@@ -1,5 +1,5 @@
// components/Badge.js
import { $html } from "../sigpro.js";
import { Tag } from "../sigpro.js";
import { ui } from "../core/utils.js";
/**
@@ -14,7 +14,7 @@ import { ui } from "../core/utils.js";
export const Badge = (props, children) => {
const { class: className, ...rest } = props;
return $html("span", {
return Tag("span", {
...rest,
class: ui('badge', className),
}, children);

6
src/components/Button.js
View File

@@ -1,5 +1,5 @@
// components/Button.js
import { $html } from "../sigpro.js";
import { Tag } from "../sigpro.js";
import { ui, val, getIcon } from "../core/utils.js";
/**
@@ -18,12 +18,12 @@ export const Button = (props, children) => {
const iconEl = getIcon(icon);
return $html("button", {
return Tag("button", {
...rest,
class: ui('btn', className),
disabled: () => val(loading) || val(props.disabled),
}, () => [
val(loading) && $html("span", { class: "loading loading-spinner" }),
val(loading) && Tag("span", { class: "loading loading-spinner" }),
iconEl,
children
].filter(Boolean));

10
src/components/Checkbox.js
View File

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

22
src/components/Colorpicker.js
View File

@@ -1,5 +1,5 @@
// components/Colorpicker.js
import { $, $html, $if } from "../sigpro.js";
import { $, Tag, If } from "../sigpro.js";
import { val, ui } from "../core/utils.js";
/**
@@ -30,8 +30,8 @@ export const Colorpicker = (props) => {
const getColor = () => val(value) || "#000000";
return $html("div", { class: ui('relative w-fit', className) }, [
$html(
return Tag("div", { class: ui('relative w-fit', className) }, [
Tag(
"button",
{
type: "button",
@@ -43,27 +43,27 @@ export const Colorpicker = (props) => {
...rest,
},
[
$html("div", {
Tag("div", {
class: "size-5 rounded-sm shadow-inner border border-black/10 shrink-0",
style: () => `background-color: ${getColor()}`,
}),
label ? $html("span", { class: "opacity-80" }, label) : null,
label ? Tag("span", { class: "opacity-80" }, label) : null,
],
),
$if(isOpen, () =>
$html(
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(),
},
[
$html(
Tag(
"div",
{ class: "grid grid-cols-8 gap-1" },
palette.map((c) =>
$html("button", {
Tag("button", {
type: "button",
style: `background-color: ${c}`,
class: () => {
@@ -82,8 +82,8 @@ export const Colorpicker = (props) => {
),
),
$if(isOpen, () =>
$html("div", {
If(isOpen, () =>
Tag("div", {
class: "fixed inset-0 z-[100]",
onclick: () => isOpen(false),
}),

46
src/components/Datepicker.js
View File

@@ -1,5 +1,5 @@
// components/Datepicker.js
import { $, $html, $if } from "../sigpro.js";
import { $, Tag, If } from "../sigpro.js";
import { val, ui, getIcon } from "../core/utils.js";
import { Input } from "./Input.js";
@@ -99,9 +99,9 @@ export const Datepicker = (props) => {
};
const HourSlider = ({ value: hVal, onChange }) => {
return $html("div", { class: "flex-1" }, [
$html("div", { class: "flex gap-2 items-center" }, [
$html("input", {
return Tag("div", { class: "flex-1" }, [
Tag("div", { class: "flex gap-2 items-center" }, [
Tag("input", {
type: "range",
min: 0,
max: 23,
@@ -112,14 +112,14 @@ export const Datepicker = (props) => {
onChange(newHour);
},
}),
$html("span", { class: "text-sm font-mono min-w-[48px] text-center" },
Tag("span", { class: "text-sm font-mono min-w-[48px] text-center" },
() => String(val(hVal)).padStart(2, "0") + ":00"
),
]),
]);
};
return $html("div", { class: ui('relative w-full', className) }, [
return Tag("div", { class: ui('relative w-full', className) }, [
Input({
label,
placeholder: placeholder || (isRangeMode() ? "Seleccionar rango..." : "Seleccionar fecha..."),
@@ -133,38 +133,38 @@ export const Datepicker = (props) => {
...rest,
}),
$if(isOpen, () =>
$html(
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(),
},
[
$html("div", { class: "flex justify-between items-center mb-4 gap-1" }, [
$html("div", { class: "flex gap-0.5" }, [
$html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(-1) },
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) },
getIcon("icon-[lucide--chevrons-left]")
),
$html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) },
Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) },
getIcon("icon-[lucide--chevron-left]")
),
]),
$html("span", { class: "font-bold uppercase flex-1 text-center" }, [
Tag("span", { class: "font-bold uppercase flex-1 text-center" }, [
() => internalDate().toLocaleString("es-ES", { month: "short", year: "numeric" }),
]),
$html("div", { class: "flex gap-0.5" }, [
$html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(1) },
Tag("div", { class: "flex gap-0.5" }, [
Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(1) },
getIcon("icon-[lucide--chevron-right]")
),
$html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) },
Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) },
getIcon("icon-[lucide--chevrons-right]")
),
]),
]),
$html("div", { class: "grid grid-cols-7 gap-1", onmouseleave: () => hoverDate(null) }, [
...["L", "M", "X", "J", "V", "S", "D"].map((d) => $html("div", { class: "text-[10px] opacity-40 font-bold text-center" }, d)),
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();
@@ -174,14 +174,14 @@ export const Datepicker = (props) => {
const daysInMonth = new Date(year, month + 1, 0).getDate();
const nodes = [];
for (let i = 0; i < offset; i++) nodes.push($html("div"));
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(
$html(
Tag(
"button",
{
type: "button",
@@ -218,9 +218,9 @@ export const Datepicker = (props) => {
},
]),
hour ? $html("div", { class: "mt-3 pt-2 border-t border-base-300" }, [
hour ? Tag("div", { class: "mt-3 pt-2 border-t border-base-300" }, [
isRangeMode()
? $html("div", { class: "flex gap-4" }, [
? Tag("div", { class: "flex gap-4" }, [
HourSlider({
value: startHour,
onChange: (newHour) => {
@@ -253,6 +253,6 @@ export const Datepicker = (props) => {
),
),
$if(isOpen, () => $html("div", { class: "fixed inset-0 z-[90]", onclick: () => isOpen(false) })),
If(isOpen, () => Tag("div", { class: "fixed inset-0 z-[90]", onclick: () => isOpen(false) })),
]);
};

14
src/components/Drawer.js
View File

@@ -1,5 +1,5 @@
// components/Drawer.js
import { $html } from "../sigpro.js";
import { Tag } from "../sigpro.js";
import { ui } from "../core/utils.js";
/**
@@ -14,11 +14,11 @@ export const Drawer = (props, children) => {
const drawerId = id || `drawer-${Math.random().toString(36).slice(2, 9)}`;
return $html("div", {
return Tag("div", {
...rest,
class: ui('drawer', className),
}, [
$html("input", {
Tag("input", {
id: drawerId,
type: "checkbox",
class: "drawer-toggle",
@@ -27,18 +27,18 @@ export const Drawer = (props, children) => {
if (typeof open === "function") open(e.target.checked);
}
}),
$html("div", { class: "drawer-content" }, [
Tag("div", { class: "drawer-content" }, [
typeof content === "function" ? content() : content
]),
$html("div", { class: "drawer-side" }, [
$html("label", {
Tag("div", { class: "drawer-side" }, [
Tag("label", {
for: drawerId,
class: "drawer-overlay",
onclick: () => {
if (typeof open === "function") open(false);
}
}),
$html("div", { class: "min-h-full bg-base-200 w-80" }, [
Tag("div", { class: "min-h-full bg-base-200 w-80" }, [
typeof side === "function" ? side() : side
])
])

16
src/components/Dropdown.js
View File

@@ -1,5 +1,5 @@
// components/Dropdown.js
// import { $html, $for, $watch } from "../sigpro.js";
// import { Tag, For, Watch } from "../sigpro.js";
import { ui } from "../core/utils.js";
/**
@@ -28,11 +28,11 @@ if (typeof window !== 'undefined' && !window.__dropdownHandlerRegistered) {
export const Dropdown = (props) => {
const { class: className, label, icon, items, ...rest } = props;
return $html("details", {
return Tag("details", {
...rest,
class: ui('dropdown', className),
}, [
$html("summary", {
Tag("summary", {
class: "btn m-1 flex items-center gap-2 list-none cursor-pointer",
style: "display: inline-flex;",
onclick: (e) => {
@@ -48,15 +48,15 @@ export const Dropdown = (props) => {
() => icon ? (typeof icon === "function" ? icon() : icon) : null,
() => label ? (typeof label === "function" ? label() : label) : null
]),
$html("ul", {
Tag("ul", {
tabindex: "-1",
class: "dropdown-content z-[50] menu p-2 shadow bg-base-100 rounded-box w-52 border border-base-300"
}, [
() => {
const currentItems = typeof items === "function" ? items() : (items || []);
return currentItems.map(item =>
$html("li", {}, [
$html("a", {
Tag("li", {}, [
Tag("a", {
class: item.class || "",
onclick: (e) => {
if (item.onclick) item.onclick(e);
@@ -67,8 +67,8 @@ export const Dropdown = (props) => {
}
}
}, [
item.icon ? $html("span", {}, item.icon) : null,
$html("span", {}, item.label)
item.icon ? Tag("span", {}, item.icon) : null,
Tag("span", {}, item.label)
])
])
);

12
src/components/Fab.js
View File

@@ -1,5 +1,5 @@
// components/Fab.js
import { $html } from "../sigpro.js";
import { Tag } from "../sigpro.js";
import { val, ui, getIcon } from "../core/utils.js";
/**
@@ -16,14 +16,14 @@ import { val, ui, getIcon } from "../core/utils.js";
export const Fab = (props) => {
const { class: className, icon, label, actions = [], position = "bottom-6 right-6", ...rest } = props;
return $html(
return Tag(
"div",
{
...rest,
class: ui(`fab absolute ${position} flex flex-col-reverse items-end gap-3 z-[100]`, className),
},
[
$html(
Tag(
"div",
{
tabindex: 0,
@@ -37,9 +37,9 @@ export const Fab = (props) => {
),
...val(actions).map((act) =>
$html("div", { class: "flex items-center gap-3 transition-all duration-300" }, [
act.label ? $html("span", { class: "badge badge-ghost shadow-sm whitespace-nowrap" }, act.label) : null,
$html(
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",

6
src/components/Fieldset.js
View File

@@ -1,5 +1,5 @@
// components/Fieldset.js
import { $html } from "../sigpro.js";
import { Tag } from "../sigpro.js";
import { val, ui } from "../core/utils.js";
/**
@@ -13,7 +13,7 @@ import { val, ui } from "../core/utils.js";
export const Fieldset = (props, children) => {
const { class: className, legend, ...rest } = props;
return $html(
return Tag(
"fieldset",
{
...rest,
@@ -22,7 +22,7 @@ export const Fieldset = (props, children) => {
[
() => {
const legendText = val(legend);
return legendText ? $html("legend", { class: "fieldset-legend font-bold" }, [legendText]) : null;
return legendText ? Tag("legend", { class: "fieldset-legend font-bold" }, [legendText]) : null;
},
children,
],

36
src/components/Fileinput.js
View File

@@ -1,5 +1,5 @@
// components/Fileinput.js
import { $, $html, $if, $for } from "../sigpro.js";
import { $, Tag, If, For } from "../sigpro.js";
import { ui, getIcon } from "../core/utils.js";
/**
@@ -47,15 +47,15 @@ export const Fileinput = (props) => {
onSelect?.(updated);
};
return $html("fieldset", { ...rest, class: ui('fieldset w-full p-0', className) }, [
$html(
return Tag("fieldset", { ...rest, class: ui('fieldset w-full p-0', className) }, [
Tag(
"div",
{
class: () => `w-full ${tooltip ? "tooltip tooltip-top before:z-50 after:z-50" : ""}`,
"data-tip": tooltip,
},
[
$html(
Tag(
"label",
{
class: () => `
@@ -76,12 +76,12 @@ export const Fileinput = (props) => {
},
},
[
$html("div", { class: "flex items-center gap-3 w-full" }, [
Tag("div", { class: "flex items-center gap-3 w-full" }, [
getIcon("icon-[lucide--upload]"),
$html("span", { class: "text-sm opacity-70 truncate grow text-left" }, "Arrastra o selecciona archivos..."),
$html("span", { class: "text-[10px] opacity-40 shrink-0" }, `Máx ${max}MB`),
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`),
]),
$html("input", {
Tag("input", {
type: "file",
multiple: true,
accept: accept,
@@ -93,22 +93,22 @@ export const Fileinput = (props) => {
],
),
() => (error() ? $html("span", { class: "text-[10px] text-error mt-1 px-1 font-medium" }, error()) : null),
() => (error() ? Tag("span", { class: "text-[10px] text-error mt-1 px-1 font-medium" }, error()) : null),
$if(
If(
() => selectedFiles().length > 0,
() =>
$html("ul", { class: "mt-2 space-y-1" }, [
$for(
Tag("ul", { class: "mt-2 space-y-1" }, [
For(
selectedFiles,
(file, index) =>
$html("li", { class: "flex items-center justify-between p-1.5 pl-3 text-xs bg-base-200/50 rounded-md border border-base-300" }, [
$html("div", { class: "flex items-center gap-2 truncate" }, [
$html("span", { class: "opacity-50" }, "📄"),
$html("span", { class: "truncate font-medium max-w-[200px]" }, file.name),
$html("span", { class: "text-[9px] opacity-40" }, `(${(file.size / 1024).toFixed(0)} KB)`),
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)`),
]),
$html(
Tag(
"button",
{
type: "button",

6
src/components/Indicator.js
View File

@@ -1,5 +1,5 @@
// components/Indicator.js
import { $html } from "../sigpro.js";
import { Tag } from "../sigpro.js";
import { ui } from "../core/utils.js";
/**
@@ -15,12 +15,12 @@ import { ui } from "../core/utils.js";
export const Indicator = (props, children) => {
const { value, class: className, ...rest } = props;
return $html("div", {
return Tag("div", {
...rest,
class: "indicator"
}, () => [
// El indicador debe ir PRIMERO (antes que el children)
value ? $html("span", {
value ? Tag("span", {
class: ui('indicator-item badge', className)
}, () => typeof value === "function" ? value() : value) : null,
children

12
src/components/Input.js
View File

@@ -1,5 +1,5 @@
// components/Input.js
import { $, $html, $watch } from "../sigpro.js";
import { $, Tag, Watch } from "../sigpro.js";
import { val, ui, getIcon } from "../core/utils.js";
/**
@@ -71,7 +71,7 @@ export const Input = (props) => {
return classes.trim();
};
const inputElement = $html("input", {
const inputElement = Tag("input", {
...rest,
type: () => (isPassword ? (visible() ? "text" : "password") : type),
placeholder: placeholder || " ",
@@ -82,15 +82,15 @@ export const Input = (props) => {
"aria-invalid": () => hasError() ? "true" : "false",
});
return $html(
return Tag(
"div",
{ class: "relative w-full" },
() => [
inputElement,
leftIcon ? $html("div", {
leftIcon ? Tag("div", {
class: "absolute left-3 inset-y-0 flex items-center pointer-events-none text-base-content/60",
}, leftIcon) : null,
isPassword ? $html("button", {
isPassword ? Tag("button", {
type: "button",
class: ui(
"absolute right-3 inset-y-0 flex items-center",
@@ -102,7 +102,7 @@ export const Input = (props) => {
visible(!visible());
}
}, () => getPasswordIcon()) : null,
$html("div", {
Tag("div", {
class: "text-error text-xs mt-1 px-3 absolute -bottom-5 left-0",
}, () => hasError() ? errorMsg() : null),
]

14
src/components/Label.js
View File

@@ -1,5 +1,5 @@
// components/Label.js
import { $, $html } from "../sigpro.js";
import { $, Tag } from "../sigpro.js";
import { ui, val } from "../core/utils.js";
/**
@@ -13,16 +13,16 @@ export const Label = (props) => {
const { children, value, floating = false, error, required, class: className, ...rest } = props;
if (floating) {
return $html("label", { class: ui("floating-label w-full", className), ...rest }, () => [
value ? $html("span", {}, value) : null,
return Tag("label", { class: ui("floating-label w-full", className), ...rest }, () => [
value ? Tag("span", {}, value) : null,
children,
error ? $html("span", { class: "text-error text-xs" }, val(error)) : null,
error ? Tag("span", { class: "text-error text-xs" }, val(error)) : null,
]);
}
return $html("label", { class: ui("input w-full", className), ...rest }, () => [
value ? $html("span", { class: "label" }, value) : null,
return Tag("label", { class: ui("input w-full", className), ...rest }, () => [
value ? Tag("span", { class: "label" }, value) : null,
children,
error ? $html("span", { class: "text-error text-xs" }, val(error)) : null,
error ? Tag("span", { class: "text-error text-xs" }, val(error)) : null,
]);
};

10
src/components/List.js
View File

@@ -1,5 +1,5 @@
// components/List.js
import { $html, $if, $for } from "../sigpro.js";
import { Tag, If, For } from "../sigpro.js";
import { ui, val } from "../core/utils.js";
/**
@@ -14,14 +14,14 @@ import { ui, val } from "../core/utils.js";
export const List = (props) => {
const { class: className, items, header, render, keyFn = (item, index) => item.id ?? index, ...rest } = props;
const listItems = $for(
const listItems = For(
items,
(item, index) => $html("li", { class: "list-row" }, [render(item, index)]),
(item, index) => Tag("li", { class: "list-row" }, [render(item, index)]),
keyFn
);
return $html("ul", {
return Tag("ul", {
...rest,
class: ui('list bg-base-100 rounded-box shadow-md', className),
}, header ? [$if(header, () => $html("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" }, [val(header)])), listItems] : listItems);
};

18
src/components/Menu.js
View File

@@ -1,5 +1,5 @@
// components/Menu.js
import { $html, $for } from "../sigpro.js";
import { Tag, For } from "../sigpro.js";
import { val, ui } from "../core/utils.js";
/**
@@ -15,22 +15,22 @@ export const Menu = (props) => {
const { class: className, items, ...rest } = props;
const renderItems = (items) =>
$for(
For(
() => items || [],
(it) =>
$html("li", {}, [
Tag("li", {}, [
it.children
? $html("details", { open: it.open }, [
$html("summary", {}, [it.icon && $html("span", { class: "mr-2" }, it.icon), it.label]),
$html("ul", {}, renderItems(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)),
])
: $html("a", { class: () => (val(it.active) ? "active" : ""), onclick: it.onclick }, [
it.icon && $html("span", { class: "mr-2" }, it.icon),
: 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 $html("ul", { ...rest, class: ui('menu bg-base-200 rounded-box', className) }, renderItems(items));
return Tag("ul", { ...rest, class: ui('menu bg-base-200 rounded-box', className) }, renderItems(items));
};

20
src/components/Modal.js
View File

@@ -1,5 +1,5 @@
// components/Modal.js
import { $html, $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";
@@ -28,13 +28,13 @@ export const Modal = (props, children) => {
}
};
$watch(() => handleOpen());
Watch(() => handleOpen());
const close = () => {
if (typeof open === "function") open(false);
};
return $html("dialog", {
return Tag("dialog", {
...rest,
ref: (el) => {
dialogElement = el;
@@ -44,22 +44,22 @@ export const Modal = (props, children) => {
onclose: close,
oncancel: close
}, [
$html("div", { class: "modal-box" }, [
title ? $html("h3", { class: "text-lg font-bold mb-4" }, () =>
Tag("div", { class: "modal-box" }, [
title ? Tag("h3", { class: "text-lg font-bold mb-4" }, () =>
typeof title === "function" ? title() : title
) : null,
$html("div", { class: "py-2" }, [
Tag("div", { class: "py-2" }, [
typeof children === "function" ? children() : children
]),
$html("div", { class: "modal-action" }, [
$html("form", { method: "dialog", class: "flex gap-2" }, [
Tag("div", { class: "modal-action" }, [
Tag("form", { method: "dialog", class: "flex gap-2" }, [
...(Array.isArray(buttons) ? buttons : [buttons]).filter(Boolean),
Button({ type: "submit" }, tt("close")())
])
])
]),
$html("form", { method: "dialog", class: "modal-backdrop" }, [
$html("button", {}, "close")
Tag("form", { method: "dialog", class: "modal-backdrop" }, [
Tag("button", {}, "close")
])
]);
};

4
src/components/Navbar.js
View File

@@ -1,5 +1,5 @@
// components/Navbar.js
import { $html } from "../sigpro.js";
import { Tag } from "../sigpro.js";
import { ui } from "../core/utils.js";
/**
@@ -12,5 +12,5 @@ import { ui } from "../core/utils.js";
export const Navbar = (props, children) => {
const { class: className, ...rest } = props;
return $html("div", { ...rest, class: ui('navbar bg-base-100 shadow-sm px-4', className) }, children);
return Tag("div", { ...rest, class: ui('navbar bg-base-100 shadow-sm px-4', className) }, children);
};

10
src/components/Radio.js
View File

@@ -1,5 +1,5 @@
// components/Radio.js
import { $html } from "../sigpro.js";
import { Tag } from "../sigpro.js";
import { val, ui } from "../core/utils.js";
/**
@@ -15,7 +15,7 @@ import { val, ui } from "../core/utils.js";
export const Radio = (props) => {
const { class: className, label, tooltip, value, inputValue, name, ...rest } = props;
const radioEl = $html("input", {
const radioEl = Tag("input", {
...rest,
type: "radio",
name: name,
@@ -28,10 +28,10 @@ export const Radio = (props) => {
if (!label && !tooltip) return radioEl;
const layout = $html("label", { class: "label cursor-pointer justify-start gap-3" }, [
const layout = Tag("label", { class: "label cursor-pointer justify-start gap-3" }, [
radioEl,
label ? $html("span", { class: "label-text" }, label) : null,
label ? Tag("span", { class: "label-text" }, label) : null,
]);
return tooltip ? $html("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout;
return tooltip ? Tag("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout;
};

10
src/components/Range.js
View File

@@ -1,5 +1,5 @@
// components/Range.js
import { $html } from "../sigpro.js";
import { Tag } from "../sigpro.js";
import { val, ui } from "../core/utils.js";
/**
@@ -15,7 +15,7 @@ import { val, ui } from "../core/utils.js";
export const Range = (props) => {
const {class: className, label, tooltip, value, ...rest } = props;
const rangeEl = $html("input", {
const rangeEl = Tag("input", {
...rest,
type: "range",
class: ui('range', className),
@@ -25,10 +25,10 @@ export const Range = (props) => {
if (!label && !tooltip) return rangeEl;
const layout = $html("div", { class: "flex flex-col gap-2" }, [
label ? $html("span", { class: "label-text" }, label) : null,
const layout = Tag("div", { class: "flex flex-col gap-2" }, [
label ? Tag("span", { class: "label-text" }, label) : null,
rangeEl
]);
return tooltip ? $html("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout;
return tooltip ? Tag("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout;
};

6
src/components/Rating.js
View File

@@ -1,5 +1,5 @@
// components/Rating.js
import { $html } from "../sigpro.js";
import { Tag } from "../sigpro.js";
import { val, ui } from "../core/utils.js";
/**
@@ -15,7 +15,7 @@ export const Rating = (props) => {
const ratingGroup = `rating-${Math.random().toString(36).slice(2, 7)}`;
return $html(
return Tag(
"div",
{
...rest,
@@ -23,7 +23,7 @@ export const Rating = (props) => {
},
Array.from({ length: val(count) }, (_, i) => {
const starValue = i + 1;
return $html("input", {
return Tag("input", {
type: "radio",
name: ratingGroup,
class: `mask ${mask}`,

12
src/components/Select.js
View File

@@ -1,5 +1,5 @@
// components/Select.js
import { $html, $for } from "../sigpro.js";
import { Tag, For } from "../sigpro.js";
import { val, ui } from "../core/utils.js";
/**
@@ -14,17 +14,17 @@ import { val, ui } from "../core/utils.js";
export const Select = (props) => {
const { class: className, label, items, value, ...rest } = props;
const selectEl = $html(
const selectEl = Tag(
"select",
{
...rest,
class: ui('select select-bordered w-full', className),
value: value
},
$for(
For(
() => val(items) || [],
(opt) =>
$html(
Tag(
"option",
{
value: opt.value,
@@ -38,8 +38,8 @@ export const Select = (props) => {
if (!label) return selectEl;
return $html("label", { class: "fieldset-label flex flex-col gap-1" }, [
$html("span", {}, label),
return Tag("label", { class: "fieldset-label flex flex-col gap-1" }, [
Tag("span", {}, label),
selectEl
]);
};

4
src/components/Stack.js
View File

@@ -1,5 +1,5 @@
// components/Stack.js
import { $html } from "../sigpro.js";
import { Tag } from "../sigpro.js";
import { ui } from "../core/utils.js";
/**
@@ -11,5 +11,5 @@ import { ui } from "../core/utils.js";
export const Stack = (props, children) => {
const { class: className, ...rest } = props;
return $html("div", { ...rest, class: ui('stack', className) }, children);
return Tag("div", { ...rest, class: ui('stack', className) }, children);
};

12
src/components/Stat.js
View File

@@ -1,5 +1,5 @@
// components/Stat.js
import { $html } from "../sigpro.js";
import { Tag } from "../sigpro.js";
import { val, ui } from "../core/utils.js";
/**
@@ -12,10 +12,10 @@ import { val, ui } from "../core/utils.js";
export const Stat = (props) => {
const { class: className, icon, label, value, desc, ...rest } = props;
return $html("div", { ...rest, class: ui('stat', className) }, [
icon && $html("div", { class: "stat-figure text-secondary" }, icon),
label && $html("div", { class: "stat-title" }, label),
$html("div", { class: "stat-value" }, () => val(value) ?? value),
desc && $html("div", { class: "stat-desc" }, desc),
return Tag("div", { ...rest, class: ui('stat', className) }, [
icon && Tag("div", { class: "stat-figure text-secondary" }, icon),
label && Tag("div", { class: "stat-title" }, label),
Tag("div", { class: "stat-value" }, () => val(value) ?? value),
desc && Tag("div", { class: "stat-desc" }, desc),
]);
};

10
src/components/Swap.js
View File

@@ -1,5 +1,5 @@
// components/Swap.js
import { $html } from "../sigpro.js";
import { Tag } from "../sigpro.js";
import { ui, val } from "../core/utils.js";
/**
@@ -12,8 +12,8 @@ import { ui, val } from "../core/utils.js";
export const Swap = (props) => {
const { class: className, value, on, off, ...rest } = props;
return $html("label", { ...rest, class: ui('swap', className) }, [
$html("input", {
return Tag("label", { ...rest, class: ui('swap', className) }, [
Tag("input", {
type: "checkbox",
checked: () => val(value), // ← FUNCIÓN: se reevalúa cuando la señal cambia
onclick: (e) => {
@@ -22,7 +22,7 @@ export const Swap = (props) => {
}
}
}),
$html("div", { class: "swap-on" }, on),
$html("div", { class: "swap-off" }, off),
Tag("div", { class: "swap-on" }, on),
Tag("div", { class: "swap-off" }, off),
]);
};

26
src/components/Table.js
View File

@@ -1,5 +1,5 @@
// components/Table.js
import { $html, $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";
@@ -24,15 +24,15 @@ export const Table = (props) => {
const getInternalKeyFn = keyFn || ((item, idx) => item.id || idx);
return $html("div", { class: "overflow-x-auto w-full bg-base-100 rounded-box border border-base-300" }, [
$html("table", { ...rest, class: tableClass }, [
$html("thead", {}, [
$html("tr", {},
columns.map(col => $html("th", { class: col.class || "" }, col.label))
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))
)
]),
$html("tbody", {}, [
$for(items, (item, index) => {
Tag("tbody", {}, [
For(items, (item, index) => {
const it = () => {
const currentItems = val(items);
@@ -40,21 +40,21 @@ export const Table = (props) => {
return currentItems.find((u, i) => getInternalKeyFn(u, i) === key) || item;
};
return $html("tr", { class: "hover" },
return Tag("tr", { class: "hover" },
columns.map(col => {
const cellContent = () => {
const latestItem = it();
if (col.render) return col.render(latestItem, index);
return val(latestItem[col.key]);
};
return $html("td", { class: col.class || "" }, [cellContent]);
return Tag("td", { class: col.class || "" }, [cellContent]);
})
);
}, getInternalKeyFn),
$if(() => val(items).length === 0, () =>
$html("tr", {}, [
$html("td", { colspan: columns.length, class: "text-center p-10 opacity-50" }, [
If(() => val(items).length === 0, () =>
Tag("tr", {}, [
Tag("td", { colspan: columns.length, class: "text-center p-10 opacity-50" }, [
val(empty)
])
])

16
src/components/Tabs.js
View File

@@ -1,5 +1,5 @@
// components/Tabs.js
import { $, $html, $for } from "../sigpro.js";
import { $, Tag, For } from "../sigpro.js";
import { val, ui } from "../core/utils.js";
/**
@@ -15,14 +15,14 @@ export const Tabs = (props) => {
const itemsSignal = typeof items === "function" ? items : () => items || [];
const activeIndex = $(0);
$watch(() => {
Watch(() => {
const idx = itemsSignal().findIndex(it => val(it.active) === true);
if (idx !== -1 && idx !== activeIndex()) activeIndex(idx);
});
return $html("div", { ...rest, class: "w-full" }, [
return Tag("div", { ...rest, class: "w-full" }, [
// 1. Tab List: Aplanamos los botones para que sean hijos directos
$html("div", {
Tag("div", {
role: "tablist",
class: ui('tabs', className || 'tabs-box')
}, () => {
@@ -30,7 +30,7 @@ export const Tabs = (props) => {
return list.map((it, idx) => {
const isSelected = () => activeIndex() === idx;
const tab = $html("button", {
const tab = Tag("button", {
role: "tab",
class: () => ui("tab", isSelected() ? "tab-active" : ""),
onclick: (e) => {
@@ -43,7 +43,7 @@ export const Tabs = (props) => {
});
// Mantenemos el watch para el label por si es dinámico
$watch(() => {
Watch(() => {
const content = val(it.label);
if (content instanceof Node) {
tab.replaceChildren(content);
@@ -58,11 +58,11 @@ export const Tabs = (props) => {
// 2. Tab Content: Aquí el display:contents no molesta tanto,
// pero lo aplanamos por consistencia
$html("div", { class: "tab-panels" }, () => {
Tag("div", { class: "tab-panels" }, () => {
return itemsSignal().map((it, idx) => {
const isVisible = () => activeIndex() === idx;
return $html("div", {
return Tag("div", {
role: "tabpanel",
class: "tab-content bg-base-100 border-base-300 p-6",
style: () => isVisible() ? "display: block" : "display: none"

16
src/components/Timeline.js
View File

@@ -1,5 +1,5 @@
// components/Timeline.js
import { $html, $for } from "../sigpro.js";
import { Tag, For } from "../sigpro.js";
import { val, ui, getIcon } from "../core/utils.js";
/**
@@ -21,7 +21,7 @@ export const Timeline = (props) => {
error: "icon-[lucide--alert-circle]",
};
return $html(
return Tag(
"ul",
{
...rest,
@@ -44,14 +44,14 @@ export const Timeline = (props) => {
const renderSlot = (content) => (typeof content === "function" ? content() : content);
return $html("li", { class: "flex-1" }, [
!isFirst ? $html("hr", { class: () => prevCompleted() ? "bg-primary" : "" }) : null,
$html("div", { class: "timeline-start" }, [() => renderSlot(item.title)]),
$html("div", { class: "timeline-middle" }, [
return Tag("li", { class: "flex-1" }, [
!isFirst ? Tag("hr", { class: () => prevCompleted() ? "bg-primary" : "" }) : null,
Tag("div", { class: "timeline-start" }, [() => renderSlot(item.title)]),
Tag("div", { class: "timeline-middle" }, [
() => item.icon ? getIcon(item.icon) : getIcon(iconMap[itemType] || iconMap.success)
]),
$html("div", { class: "timeline-end timeline-box shadow-sm" }, [() => renderSlot(item.detail)]),
!isLast ? $html("hr", { class: () => isCompleted() ? "bg-primary" : "" }) : null,
Tag("div", { class: "timeline-end timeline-box shadow-sm" }, [() => renderSlot(item.detail)]),
!isLast ? Tag("hr", { class: () => isCompleted() ? "bg-primary" : "" }) : null,
]);
});
}

12
src/components/Toast.js
View File

@@ -1,5 +1,5 @@
// components/Toast.js
import { $html, $mount } from "../sigpro.js";
import { Tag, Mount } from "../sigpro.js";
import { getIcon } from "../core/utils.js";
import { Button } from "./Button.js";
@@ -17,14 +17,14 @@ export const Toast = (message, type = "alert-success", duration = 3500) => {
let container = document.getElementById("sigpro-toast-container");
if (!container) {
container = $html("div", {
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 = $html("div", { style: "display: contents" });
const toastHost = Tag("div", { style: "display: contents" });
container.appendChild(toastHost);
let timeoutId;
@@ -48,13 +48,13 @@ export const Toast = (message, type = "alert-success", duration = 3500) => {
const ToastComponent = () => {
const closeIcon = getIcon("icon-[lucide--x]");
const el = $html(
const el = Tag(
"div",
{
class: `alert alert-soft ${type} shadow-lg transition-all duration-300 translate-x-10 opacity-0 pointer-events-auto`,
},
[
$html("span", {}, [typeof message === "function" ? message() : message]),
Tag("span", {}, [typeof message === "function" ? message() : message]),
Button({
class: "btn-xs btn-circle btn-ghost",
onclick: close
@@ -66,7 +66,7 @@ export const Toast = (message, type = "alert-success", duration = 3500) => {
return el;
};
const instance = $mount(ToastComponent, toastHost);
const instance = Mount(ToastComponent, toastHost);
if (duration > 0) {
timeoutId = setTimeout(close, duration);

4
src/components/Tooltip.js
View File

@@ -1,5 +1,5 @@
// components/Tooltip.js
import { $html } from "../sigpro.js";
import { Tag } from "../sigpro.js";
import { ui } from "../core/utils.js";
/**
@@ -12,7 +12,7 @@ import { ui } from "../core/utils.js";
* - tooltip-open
*/
export const Tooltip = (props, children) =>
$html("div", {
Tag("div", {
...props,
class: () => ui('tooltip', props.class),
"data-tip": props.tip,