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

Update new functions

Browse Source
This commit is contained in:
natxocc
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,

10
src/components_OLD/Accordion.js
View File

@@ -1,24 +1,24 @@
import { $html } from "sigpro";
import { Tag } from "sigpro";
import { joinClass } from "../core/utils.js";
/** ACCORDION */
export const Accordion = (props, children) => {
const { title, name, open, ...rest } = props;
return $html(
return Tag(
"div",
{
...rest,
class: joinClass("collapse collapse-arrow bg-base-200 mb-2", props.class),
},
[
$html("input", {
Tag("input", {
type: name ? "radio" : "checkbox",
name: name,
checked: 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),
],
);
};

12
src/components_OLD/Alert.js
View File

@@ -1,4 +1,4 @@
import { $html } from "sigpro";
import { Tag } from "sigpro";
import { val } from "../core/utils.js";
import { iconInfo, iconSuccess, iconWarning, iconError } from "../core/icons.js";
@@ -26,7 +26,7 @@ export const Alert = (props, children) => {
const content = children || props.message;
return $html(
return Tag(
"div",
{
...rest,
@@ -34,15 +34,15 @@ export const Alert = (props, children) => {
class: () => `alert ${typeClass()} ${val(soft) ? "alert-soft" : ""} ${props.class || ""}`,
},
[
$html("img", {
Tag("img", {
src: icons[val(type)] || icons.info,
class: "w-4 h-4 object-contain",
alt: val(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])
]),
props.actions ? $html("div", { class: "flex-none" }, [
props.actions ? Tag("div", { class: "flex-none" }, [
typeof props.actions === "function" ? props.actions() : props.actions
]) : null,
],

14
src/components_OLD/Autocomplete.js
View File

@@ -1,4 +1,4 @@
import { $, $html, $for } from "sigpro";
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
@@ -48,7 +48,7 @@ export const Autocomplete = (props) => {
}
};
return $html("div", { class: "relative w-full" }, [
return Tag("div", { class: "relative w-full" }, [
Input({
label,
placeholder: placeholder || tt("search")(),
@@ -65,18 +65,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" : ""}`,
@@ -88,7 +88,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" }, "No results")),
() => (list().length ? null : Tag("li", { class: "p-2 text-center opacity-50" }, "No results")),
],
),
]);

4
src/components_OLD/Badge.js
View File

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

14
src/components_OLD/Button.js
View File

@@ -1,19 +1,19 @@
import { $html } from "sigpro";
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 = $html(
const btn = Tag(
"button",
{
...rest,
class: joinClass("btn", props.class)
},
[
() => (val(loading) ? $html("span", { class: "loading loading-spinner" }) : null),
icon ? $html("span", { class: "mr-1" }, icon) : null,
() => (val(loading) ? Tag("span", { class: "loading loading-spinner" }) : null),
icon ? Tag("span", { class: "mr-1" }, icon) : null,
children,
]
);
@@ -21,8 +21,8 @@ export const Button = (props, children) => {
let out = btn;
if (badge) {
out = $html("div", { class: "indicator" }, [
$html(
out = Tag("div", { class: "indicator" }, [
Tag(
"span",
{ class: joinClass("indicator-item badge", badgeClass || "badge-secondary") },
badge
@@ -32,6 +32,6 @@ export const Button = (props, children) => {
}
return tooltip
? $html("div", { class: "tooltip", "data-tip": tooltip }, out)
? Tag("div", { class: "tooltip", "data-tip": tooltip }, out)
: out;
};

10
src/components_OLD/Checkbox.js
View File

@@ -1,21 +1,21 @@
import { $html } from "sigpro";
import { Tag } from "sigpro";
import { val } from "../core/utils.js";
/** CHECKBOX */
export const Checkbox = (props) => {
const { value, tooltip, toggle, label, ...rest } = props;
const checkEl = $html("input", {
const checkEl = Tag("input", {
...rest,
type: "checkbox",
class: () => (val(toggle) ? "toggle" : "checkbox"),
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_OLD/Colorpicker.js
View File

@@ -1,4 +1,4 @@
import { $, $html, $if } from "sigpro";
import { $, Tag, If } from "sigpro";
import { val } from "../core/utils.js";
/** COLORPICKER */
@@ -19,8 +19,8 @@ export const Colorpicker = (props) => {
const getColor = () => val(value) || "#000000";
return $html("div", { class: "relative w-fit" }, [
$html(
return Tag("div", { class: "relative w-fit" }, [
Tag(
"button",
{
type: "button",
@@ -32,27 +32,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: () => {
@@ -71,8 +71,8 @@ export const Colorpicker = (props) => {
),
),
$if(isOpen, () =>
$html("div", {
If(isOpen, () =>
Tag("div", {
class: "fixed inset-0 z-[100]",
onclick: () => isOpen(false),
}),

56
src/components_OLD/Datepicker.js
View File

@@ -1,4 +1,4 @@
import { $, $html, $if } from "sigpro";
import { $, Tag, If } from "sigpro";
import { val } from "../core/utils.js";
import {
iconCalendar,
@@ -93,9 +93,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,
@@ -106,20 +106,20 @@ 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: "relative w-full" }, [
return Tag("div", { class: "relative w-full" }, [
Input({
label,
placeholder: placeholder || (isRangeMode() ? "Seleccionar rango..." : "Seleccionar fecha..."),
value: displayValue,
readonly: true,
icon: $html("img", { src: iconCalendar, class: "opacity-40" }),
icon: Tag("img", { src: iconCalendar, class: "opacity-40" }),
onclick: (e) => {
e.stopPropagation();
isOpen(!isOpen());
@@ -127,38 +127,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) },
$html("img", { src: iconLLeft, class: "opacity-40" })
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" })
),
$html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) },
$html("img", { src: iconLeft, 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" })
),
]),
$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) },
$html("img", { src: iconRight, class: "opacity-40" })
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" })
),
$html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) },
$html("img", { src: iconRRight, 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" })
),
]),
]),
$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();
@@ -168,14 +168,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",
@@ -212,9 +212,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) => {
@@ -247,6 +247,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_OLD/Drawer.js
View File

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

20
src/components_OLD/Dropdown.js
View File

@@ -1,4 +1,4 @@
import { $html, $for } from "sigpro";
import { Tag, For } from "sigpro";
import { val } from "../core/utils.js";
export const Dropdown = (props, children) => {
@@ -7,28 +7,28 @@ export const Dropdown = (props, children) => {
const renderContent = () => {
if (items) {
const source = typeof items === "function" ? items : () => items;
return $html("ul", {
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) =>
$html("li", {}, [
$html("a", {
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 ? $html("span", {}, item.icon) : null,
$html("span", {}, item.label)
item.icon ? Tag("span", {}, item.icon) : null,
Tag("span", {}, item.label)
])
])
)
]);
}
return $html("div", {
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"
}, [
@@ -36,11 +36,11 @@ export const Dropdown = (props, children) => {
]);
};
return $html("div", {
return Tag("div", {
...rest,
class: () => `dropdown ${val(props.class) || ""}`,
}, [
$html("div", {
Tag("div", {
tabindex: 0,
role: "button",
class: "btn m-1 flex items-center gap-2",

12
src/components_OLD/Fab.js
View File

@@ -1,18 +1,18 @@
import { $html } from "sigpro";
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 $html(
return Tag(
"div",
{
...rest,
class: `fab absolute ${position} flex flex-col-reverse items-end gap-3 z-[100] ${className}`,
},
[
$html(
Tag(
"div",
{
tabindex: 0,
@@ -26,9 +26,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_OLD/Fieldset.js
View File

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

40
src/components_OLD/Fileinput.js
View File

@@ -1,4 +1,4 @@
import { $, $html, $if, $for } from "sigpro";
import { $, Tag, If, For } from "sigpro";
import { iconUpload, iconClose } from "../core/icons.js";
/** FILEINPUT */
@@ -30,15 +30,15 @@ export const Fileinput = (props) => {
onSelect?.(updated);
};
return $html("fieldset", { class: "fieldset w-full p-0" }, [
$html(
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,
},
[
$html(
Tag(
"label",
{
class: () => `
@@ -59,12 +59,12 @@ export const Fileinput = (props) => {
},
},
[
$html("div", { class: "flex items-center gap-3 w-full" }, [
$html("img", { src: iconUpload, class: "w-5 h-5 opacity-50 shrink-0" }),
$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("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`),
]),
$html("input", {
Tag("input", {
type: "file",
multiple: true,
accept: accept,
@@ -76,22 +76,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",
@@ -102,7 +102,7 @@ export const Fileinput = (props) => {
removeFile(index);
},
},
[$html("img", { src: iconClose, class: "w-3 h-3 opacity-70" })],
[Tag("img", { src: iconClose, class: "w-3 h-3 opacity-70" })],
),
]),
(file) => file.name + file.lastModified,

6
src/components_OLD/Indicator.js
View File

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

22
src/components_OLD/Input.js
View File

@@ -1,4 +1,4 @@
import { $, $html } from "sigpro";
import { $, Tag } from "sigpro";
import { val, joinClass } from "../core/utils.js";
import { tt } from "../core/i18n.js";
import {
@@ -25,7 +25,7 @@ export const Input = (props) => {
email: iconMail,
};
const inputEl = $html("input", {
const inputEl = Tag("input", {
...rest,
type: () => (isPassword ? (visible() ? "text" : "password") : type),
placeholder: props.placeholder || label || (isSearch ? tt("search")() : " "),
@@ -35,19 +35,19 @@ export const Input = (props) => {
disabled: () => val(props.disabled),
});
const leftIcon = icon ? icon : iconsByType[type] ? $html("img", { src: iconsByType[type], class: "opacity-50", alt: type }) : null;
const leftIcon = icon ? icon : iconsByType[type] ? Tag("img", { src: iconsByType[type], class: "opacity-50", alt: type }) : null;
return $html(
return Tag(
"label",
{
class: () => joinClass("input input-bordered floating-label flex items-center gap-2 w-full relative", val(error) ? "input-error" : ""),
},
[
leftIcon ? $html("div", { class: "order-1 shrink-0" }, leftIcon) : null,
label ? $html("span", { class: "text-base-content/60 order-0" }, label) : null,
leftIcon ? Tag("div", { class: "order-1 shrink-0" }, leftIcon) : null,
label ? Tag("span", { class: "text-base-content/60 order-0" }, label) : null,
inputEl,
isPassword
? $html(
? Tag(
"button",
{
type: "button",
@@ -58,20 +58,20 @@ export const Input = (props) => {
},
},
() =>
$html("img", {
Tag("img", {
class: "w-5 h-5",
src: visible() ? iconShow : iconHide,
}),
)
: null,
tip
? $html(
? Tag(
"div",
{ class: "tooltip tooltip-left order-4", "data-tip": tip },
$html("span", { class: "badge badge-ghost badge-xs cursor-help" }, "?"),
Tag("span", { class: "badge badge-ghost badge-xs cursor-help" }, "?"),
)
: null,
() => (val(error) ? $html("span", { class: "text-error text-[10px] absolute -bottom-5 left-2" }, val(error)) : null),
() => (val(error) ? Tag("span", { class: "text-error text-[10px] absolute -bottom-5 left-2" }, val(error)) : null),
],
);
};

10
src/components_OLD/List.js
View File

@@ -1,4 +1,4 @@
import { $html, $if, $for } from "sigpro";
import { Tag, If, For } from "sigpro";
import { joinClass, val } from "../core/utils.js";
/** LIST */
@@ -12,18 +12,18 @@ export const List = (props) => {
...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(
return Tag(
"ul",
{
...rest,
class: joinClass("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
);
};

8
src/components_OLD/Loading.js
View File

@@ -1,13 +1,13 @@
import { $html, $if } from "sigpro";
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, () =>
$html("div", {
return If(props.$show, () =>
Tag("div", {
class: "fixed inset-0 z-[100] flex items-center justify-center backdrop-blur-sm bg-base-100/30"
}, [
$html("span", { class: "loading loading-spinner loading-lg text-primary" }),
Tag("span", { class: "loading loading-spinner loading-lg text-primary" }),
]),
);
};

18
src/components_OLD/Menu.js
View File

@@ -1,25 +1,25 @@
import { $html, $for } from "sigpro";
import { Tag, For } from "sigpro";
import { val, joinClass } from "../core/utils.js";
/** MENU */
export const Menu = (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", { ...props, class: joinClass("menu bg-base-200 rounded-box", props.class) }, renderItems(props.items));
return Tag("ul", { ...props, class: joinClass("menu bg-base-200 rounded-box", props.class) }, renderItems(props.items));
};

18
src/components_OLD/Modal.js
View File

@@ -1,4 +1,4 @@
import { $html, $watch } from "sigpro";
import { Tag, Watch } from "sigpro";
import { tt } from "../core/i18n.js";
import { Button } from "./Button.js";
@@ -8,7 +8,7 @@ export const Modal = (props, children) => {
const dialogRef = { current: null };
// Sincronizamos la señal con los métodos nativos del navegador
$watch(() => {
Watch(() => {
const dialog = dialogRef.current;
if (!dialog) return;
@@ -25,30 +25,30 @@ export const Modal = (props, children) => {
open(false);
};
return $html("dialog", {
return Tag("dialog", {
...rest,
ref: dialogRef,
class: "modal",
// Importante: Si el usuario pulsa ESC, actualizamos la señal
oncancel: () => open(false)
}, [
$html("div", { class: "modal-box" }, [
title ? $html("h3", { class: "text-lg font-bold mb-4" }, title) : null,
$html("div", { class: "py-2" }, [
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
]),
$html("div", { class: "modal-action flex gap-2" }, [
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
$html("form", {
Tag("form", {
method: "dialog",
class: "modal-backdrop",
onsubmit: close
}, [
$html("button", {}, "close")
Tag("button", {}, "close")
])
]);
};

4
src/components_OLD/Navbar.js
View File

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

8
src/components_OLD/Radio.js
View File

@@ -1,11 +1,11 @@
import { $html } from "sigpro";
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 = $html("input", {
const radioEl = Tag("input", {
...rest,
type: "radio",
name: name,
@@ -18,8 +18,8 @@ export const Radio = (props) => {
if (!label && !tooltip) return radioEl;
return $html("label", { class: "label cursor-pointer justify-start gap-3" }, [
return 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,
]);
};

10
src/components_OLD/Range.js
View File

@@ -1,11 +1,11 @@
import { $html } from "sigpro";
import { Tag } from "sigpro";
import { val, joinClass } from "../core/utils.js";
/** RANGE */
export const Range = (props) => {
const { label, tooltip, value, ...rest } = props;
const rangeEl = $html("input", {
const rangeEl = Tag("input", {
...rest,
type: "range",
class: joinClass("range", props.class),
@@ -15,10 +15,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_OLD/Rating.js
View File

@@ -1,4 +1,4 @@
import { $html } from "sigpro";
import { Tag } from "sigpro";
import { val } from "../core/utils.js";
/** RATING */
@@ -6,7 +6,7 @@ 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 $html(
return Tag(
"div",
{
...rest,
@@ -14,7 +14,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_OLD/Select.js
View File

@@ -1,21 +1,21 @@
import { $html, $for } from "sigpro";
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 = $html(
const selectEl = Tag(
"select",
{
...rest,
class: joinClass("select select-bordered w-full", props.class),
value: value
},
$for(
For(
() => val(options) || [],
(opt) =>
$html(
Tag(
"option",
{
value: opt.value,
@@ -29,8 +29,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_OLD/Stack.js
View File

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

12
src/components_OLD/Stat.js
View File

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

10
src/components_OLD/Swap.js
View File

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

34
src/components_OLD/Table.js
View File

@@ -1,4 +1,4 @@
import { $html, $for, $if } from "sigpro";
import { Tag, For, If } from "sigpro";
import { val, joinClass } from "../core/utils.js";
import { tt } from "../core/i18n.js";
@@ -19,39 +19,39 @@ export const Table = (props) => {
`${val(zebra) ? "table-zebra" : ""} ${val(pinRows) ? "table-pin-rows" : ""} ${props.class || ""}`
);
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) => {
return $html("tr", { class: "hover" },
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 $html("td", { class: col.class || "" }, [cellContent]);
return Tag("td", { class: col.class || "" }, [cellContent]);
})
);
}, keyFn || ((item, idx) => item.id || idx)),
$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)
])
])
)
]),
$if(() => columns.some(c => c.footer), () =>
$html("tfoot", {}, [
$html("tr", {},
columns.map(col => $html("th", {}, col.footer || ""))
If(() => columns.some(c => c.footer), () =>
Tag("tfoot", {}, [
Tag("tr", {},
columns.map(col => Tag("th", {}, col.footer || ""))
)
])
)

12
src/components_OLD/Tabs.js
View File

@@ -1,4 +1,4 @@
import { $html, $for } from "sigpro";
import { Tag, For } from "sigpro";
import { val, joinClass } from "../core/utils.js";
/** TABS */
@@ -6,17 +6,17 @@ export const Tabs = (props) => {
const { items, ...rest } = props;
const itemsSignal = typeof items === "function" ? items : () => items || [];
return $html("div", { ...rest, class: "flex flex-col gap-4 w-full" }, [
$html(
return Tag("div", { ...rest, class: "flex flex-col gap-4 w-full" }, [
Tag(
"div",
{
role: "tablist",
class: joinClass("tabs tabs-box", props.class),
},
$for(
For(
itemsSignal,
(it) =>
$html(
Tag(
"a",
{
role: "tab",
@@ -38,7 +38,7 @@ export const Tabs = (props) => {
const active = itemsSignal().find((it) => val(it.active));
if (!active) return null;
const content = val(active.content);
return $html("div", { class: "p-4" }, [
return Tag("div", { class: "p-4" }, [
typeof content === "function" ? content() : content
]);
},

20
src/components_OLD/Timeline.js
View File

@@ -1,4 +1,4 @@
import { $html, $for } from "sigpro";
import { Tag, For } from "sigpro";
import { val } from "../core/utils.js";
import { iconInfo, iconSuccess, iconWarning, iconError } from "../core/icons.js";
@@ -13,7 +13,7 @@ export const Timeline = (props) => {
error: iconError,
};
return $html(
return Tag(
"ul",
{
...rest,
@@ -23,7 +23,7 @@ export const Timeline = (props) => {
} ${props.class || ""}`,
},
[
$for(
For(
items,
(item, i) => {
const isFirst = i === 0;
@@ -31,18 +31,18 @@ export const Timeline = (props) => {
const itemType = item.type || "success";
const renderSlot = (content) => (typeof content === "function" ? content() : content);
return $html("li", { class: "flex-1" }, [
!isFirst ? $html("hr", { class: item.completed ? "bg-primary" : "" }) : null,
$html("div", { class: "timeline-start" }, [renderSlot(item.title)]),
$html("div", { class: "timeline-middle" }, [
$html("img", {
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,
}),
]),
$html("div", { class: "timeline-end timeline-box shadow-sm" }, [renderSlot(item.detail)]),
!isLast ? $html("hr", { class: item.completed ? "bg-primary" : "" }) : null,
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,

12
src/components_OLD/Toast.js
View File

@@ -1,4 +1,4 @@
import { $html, $mount } from "sigpro";
import { Tag, Mount } from "sigpro";
import { Button } from "./Button.js";
/** TOAST (Imperative Function) */
@@ -7,14 +7,14 @@ export const Toast = (message, type = "alert-success", duration = 3500) => {
// Crear el contenedor global si no existe
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;
@@ -37,13 +37,13 @@ export const Toast = (message, type = "alert-success", duration = 3500) => {
};
const ToastComponent = () => {
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 }, "✕")
],
);
@@ -53,7 +53,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_OLD/Tooltip.js
View File

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

10
src/core/utils.js
View File

@@ -1,5 +1,5 @@
// core/utils.js
import { $html } from "../sigpro.js";
import { Tag } from "../sigpro.js";
export const val = t => typeof t === "function" ? t() : t;
@@ -12,11 +12,11 @@ export const getIcon = (icon) => {
if (!icon) return null;
if (typeof icon === 'function') {
return $html("span", { class: "mr-1" }, icon());
return Tag("span", { class: "mr-1" }, icon());
}
if (typeof icon === 'object') {
return $html("span", { class: "mr-1" }, icon);
return Tag("span", { class: "mr-1" }, icon);
}
if (typeof icon === 'string') {
@@ -26,10 +26,10 @@ export const getIcon = (icon) => {
const spacing = hasRight ? 'ml-1' : 'mr-1';
if (iconClass && !iconClass.startsWith('icon-[') && !iconClass.includes('--')) {
return $html("span", { class: spacing }, iconClass);
return Tag("span", { class: spacing }, iconClass);
}
return $html("span", { class: `${iconClass} ${spacing}`.trim() });
return Tag("span", { class: `${iconClass} ${spacing}`.trim() });
}
return null;