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

Updateing Docs

Browse Source
This commit is contained in:
natxocc
2026-04-02 19:31:39 +02:00
parent 5a77deb442
commit f0c710f8c2
138 changed files with 25729 additions and 3918 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/Accordion.js
View File

@@ -1,24 +1,29 @@
// components/Accordion.js
import { $html } from "sigpro";
import { joinClass } from "../core/utils.js";
import { ui, val } from "../core/utils.js";
/** ACCORDION */
/**
* Accordion component
*
* daisyUI classes used:
* - collapse, collapse-arrow, collapse-plus, collapse-title, collapse-content
* - collapse-open, collapse-close
* - bg-base-200, bg-base-100, bg-primary, bg-secondary
* - mb-2, mt-2, rounded-box
*/
export const Accordion = (props, children) => {
const { title, name, open, ...rest } = props;
const { class: className, title, name, open, ...rest } = props;
return $html(
"div",
{
...rest,
class: joinClass("collapse collapse-arrow bg-base-200 mb-2", props.class),
},
[
$html("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),
],
);
};
return $html("div", {
...rest,
class: ui('collapse collapse-arrow bg-base-200 mb-2', className),
}, [
$html("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),
]);
};

76
src/components/Alert.js
View File

@@ -1,50 +1,42 @@
// components/Alert.js
import { $html } from "sigpro";
import { val } from "../core/utils.js";
import { iconInfo, iconSuccess, iconWarning, iconError } from "../core/icons.js";
import { ui, getIcon } from "../core/utils.js";
/** ALERT */
/**
* Alert component
*
* daisyUI classes used:
* - alert, alert-info, alert-success, alert-warning, alert-error
* - alert-soft, alert-outline, alert-dash
*/
export const Alert = (props, children) => {
const { type = "info", soft = true, ...rest } = props;
const icons = {
info: iconInfo,
success: iconSuccess,
warning: iconWarning,
error: iconError,
const { class: className, actions, type = 'info', soft = true, ...rest } = props;
const iconMap = {
info: "icon-[lucide--info]",
success: "icon-[lucide--check-circle]",
warning: "icon-[lucide--alert-triangle]",
error: "icon-[lucide--alert-circle]",
};
const typeClass = () => {
const t = val(type);
const map = {
info: "alert-info",
success: "alert-success",
warning: "alert-warning",
error: "alert-error",
};
return map[t] || t;
};
// Build the complete class string
const typeClass = `alert-${type}`;
const softClass = soft ? 'alert-soft' : '';
const allClasses = [typeClass, softClass, className].filter(Boolean).join(' ');
const content = children || props.message;
return $html(
"div",
{
...rest,
role: "alert",
class: () => `alert ${typeClass()} ${val(soft) ? "alert-soft" : ""} ${props.class || ""}`,
},
[
$html("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])
]),
props.actions ? $html("div", { class: "flex-none" }, [
typeof props.actions === "function" ? props.actions() : props.actions
]) : null,
],
);
};
return $html("div", {
...rest,
role: "alert",
class: ui('alert', allClasses),
}, () => [
getIcon(iconMap[type]),
$html("div", { class: "flex-1" }, [
$html("span", {}, [typeof content === "function" ? content() : content])
]),
actions ? $html("div", { class: "flex-none" }, [
typeof actions === "function" ? actions() : actions
]) : null,
].filter(Boolean));
};

25
src/components/Autocomplete.js
View File

@@ -1,11 +1,21 @@
// components/Autocomplete.js
import { $, $html, $for } from "sigpro";
import { val } from "../core/utils.js";
import { tt } from "../core/i18n.js";
import { Input } from "./Input.js"; // Importamos el componente hermano
import { Input } from "./Input.js";
/** AUTOCOMPLETE */
/**
* Autocomplete component
*
* daisyUI classes used:
* - input, input-bordered, input-primary, input-secondary
* - menu, menu-dropdown, menu-dropdown-show
* - bg-base-100, rounded-box, shadow-xl, border, border-base-300
* - absolute, left-0, w-full, mt-1, p-2, max-h-60, overflow-y-auto
* - z-50, active, bg-primary, text-primary-content
*/
export const Autocomplete = (props) => {
const { options = [], value, onSelect, label, placeholder, ...rest } = props;
const { class: className, items = [], value, onSelect, label, placeholder, ...rest } = props;
const query = $(val(value) || "");
const isOpen = $(false);
@@ -13,7 +23,7 @@ export const Autocomplete = (props) => {
const list = $(() => {
const q = query().toLowerCase();
const data = val(options) || [];
const data = val(items) || [];
return q
? data.filter((o) => (typeof o === "string" ? o : o.label).toLowerCase().includes(q))
: data;
@@ -48,9 +58,10 @@ export const Autocomplete = (props) => {
}
};
return $html("div", { class: "relative w-full" }, [
return $html("div", { class: 'relative w-full' }, [
Input({
label,
class: className,
placeholder: placeholder || tt("search")(),
value: query,
onfocus: () => isOpen(true),
@@ -88,8 +99,8 @@ 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 : $html("li", { class: "p-2 text-center opacity-50" }, tt("nodata")())),
],
),
]);
};
};

23
src/components/Badge.js
View File

@@ -1,6 +1,21 @@
// components/Badge.js
import { $html } from "sigpro";
import { joinClass } from "../core/utils.js";
import { ui } from "../core/utils.js";
/** BADGE */
export const Badge = (props, children) =>
$html("span", { ...props, class: joinClass("badge", props.class) }, children);
/**
* Badge component
*
* daisyUI classes used:
* - badge, badge-primary, badge-secondary, badge-accent
* - badge-info, badge-success, badge-warning, badge-error
* - badge-outline, badge-soft, badge-dash
* - badge-xs, badge-sm, badge-md, badge-lg
*/
export const Badge = (props, children) => {
const { class: className, ...rest } = props;
return $html("span", {
...rest,
class: ui('badge', className),
}, children);
};

57
src/components/Button.js
View File

@@ -1,37 +1,30 @@
// components/Button.js
import { $html } from "sigpro";
import { val, joinClass } from "../core/utils.js";
import { ui, val, getIcon } from "../core/utils.js";
/** BUTTON */
/**
* Button component
*
* daisyUI classes used:
* - btn, btn-primary, btn-secondary, btn-accent, btn-ghost
* - btn-info, btn-success, btn-warning, btn-error, btn-neutral
* - btn-xs, btn-sm, btn-md, btn-lg, btn-xl
* - btn-outline, btn-soft, btn-dash, btn-link
* - btn-circle, btn-square, btn-wide, btn-block
* - btn-active, btn-disabled
*/
export const Button = (props, children) => {
const { badge, badgeClass, tooltip, icon, loading, ...rest } = props;
const { class: className, loading, icon, ...rest } = props;
const btn = $html(
"button",
{
...rest,
class: joinClass("btn", props.class)
},
[
() => (val(loading) ? $html("span", { class: "loading loading-spinner" }) : null),
icon ? $html("span", { class: "mr-1" }, icon) : null,
children,
]
);
const iconEl = getIcon(icon);
let out = btn;
if (badge) {
out = $html("div", { class: "indicator" }, [
$html(
"span",
{ class: joinClass("indicator-item badge", badgeClass || "badge-secondary") },
badge
),
out,
]);
}
return tooltip
? $html("div", { class: "tooltip", "data-tip": tooltip }, out)
: out;
};
return $html("button", {
...rest,
class: ui('btn', className),
disabled: () => val(loading) || val(props.disabled),
}, () => [
val(loading) && $html("span", { class: "loading loading-spinner" }),
iconEl,
children
].filter(Boolean));
};

21
src/components/Checkbox.js
View File

@@ -1,14 +1,25 @@
// components/Checkbox.js
import { $html } from "sigpro";
import { val } from "../core/utils.js";
import { val, ui } from "../core/utils.js";
/** CHECKBOX */
/**
* Checkbox component
*
* daisyUI classes used:
* - checkbox, checkbox-primary, checkbox-secondary, checkbox-accent
* - checkbox-info, checkbox-success, checkbox-warning, checkbox-error
* - checkbox-xs, checkbox-sm, checkbox-md, checkbox-lg
* - toggle, toggle-primary, toggle-secondary, toggle-accent
* - toggle-xs, toggle-sm, toggle-md, toggle-lg
* - label, label-text, cursor-pointer
*/
export const Checkbox = (props) => {
const { value, tooltip, toggle, label, ...rest } = props;
const { class: className, value, tooltip, toggle, label, ...rest } = props;
const checkEl = $html("input", {
...rest,
type: "checkbox",
class: () => (val(toggle) ? "toggle" : "checkbox"),
class: () => ui(val(toggle) ? "toggle" : "checkbox", className),
checked: value
});
@@ -18,4 +29,4 @@ export const Checkbox = (props) => {
]);
return tooltip ? $html("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout;
};
};

21
src/components/Colorpicker.js
View File

@@ -1,9 +1,20 @@
// components/Colorpicker.js
import { $, $html, $if } from "sigpro";
import { val } from "../core/utils.js";
import { val, ui } from "../core/utils.js";
/** COLORPICKER */
/**
* Colorpicker component
*
* daisyUI classes used:
* - btn, btn-primary, btn-secondary, btn-accent, btn-ghost
* - bg-base-100, border, border-base-300, shadow-sm, shadow-2xl
* - rounded-box, rounded-sm, fixed, inset-0
* - z-50, z-110, absolute, left-0, mt-2, p-3, w-64
* - grid, grid-cols-8, gap-1, ring, ring-offset-1, ring-primary
* - scale-110, transition-all, hover:scale-125, active:scale-95
*/
export const Colorpicker = (props) => {
const { value, label, ...rest } = props;
const { class: className, value, label, ...rest } = props;
const isOpen = $(false);
const palette = [
@@ -19,7 +30,7 @@ export const Colorpicker = (props) => {
const getColor = () => val(value) || "#000000";
return $html("div", { class: "relative w-fit" }, [
return $html("div", { class: ui('relative w-fit', className) }, [
$html(
"button",
{
@@ -78,4 +89,4 @@ export const Colorpicker = (props) => {
}),
),
]);
};
};

40
src/components/Datepicker.js
View File

@@ -1,17 +1,23 @@
// components/Datepicker.js
import { $, $html, $if } from "sigpro";
import { val } from "../core/utils.js";
import {
iconCalendar,
iconLeft,
iconRight,
iconLLeft,
iconRRight
} from "../core/icons.js";
import { val, ui, getIcon } from "../core/utils.js";
import { Input } from "./Input.js";
/** DATEPICKER */
/**
* Datepicker component
*
* daisyUI classes used:
* - input, input-bordered, input-primary
* - btn, btn-ghost, btn-xs, btn-circle
* - bg-base-100, border, border-base-300, shadow-2xl, rounded-box
* - absolute, left-0, mt-2, p-4, w-80, z-100, z-90
* - grid, grid-cols-7, gap-1, text-center
* - ring, ring-primary, ring-inset, font-black
* - range, range-xs
* - tooltip, tooltip-top, tooltip-bottom
*/
export const Datepicker = (props) => {
const { value, range, label, placeholder, hour = false, ...rest } = props;
const { class: className, value, range, label, placeholder, hour = false, ...rest } = props;
const isOpen = $(false);
const internalDate = $(new Date());
@@ -113,13 +119,13 @@ export const Datepicker = (props) => {
]);
};
return $html("div", { class: "relative w-full" }, [
return $html("div", { class: ui('relative w-full', className) }, [
Input({
label,
placeholder: placeholder || (isRangeMode() ? "Seleccionar rango..." : "Seleccionar fecha..."),
value: displayValue,
readonly: true,
icon: $html("img", { src: iconCalendar, class: "opacity-40" }),
icon: getIcon("icon-[lucide--calendar]"),
onclick: (e) => {
e.stopPropagation();
isOpen(!isOpen());
@@ -138,10 +144,10 @@ export const Datepicker = (props) => {
$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" })
getIcon("icon-[lucide--chevrons-left]")
),
$html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) },
$html("img", { src: iconLeft, class: "opacity-40" })
getIcon("icon-[lucide--chevron-left]")
),
]),
$html("span", { class: "font-bold uppercase flex-1 text-center" }, [
@@ -149,10 +155,10 @@ export const Datepicker = (props) => {
]),
$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" })
getIcon("icon-[lucide--chevron-right]")
),
$html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) },
$html("img", { src: iconRRight, class: "opacity-40" })
getIcon("icon-[lucide--chevrons-right]")
),
]),
]),
@@ -249,4 +255,4 @@ export const Datepicker = (props) => {
$if(isOpen, () => $html("div", { class: "fixed inset-0 z-[90]", onclick: () => isOpen(false) })),
]);
};
};

50
src/components/Drawer.js
View File

@@ -1,18 +1,48 @@
// components/Drawer.js
import { $html } from "sigpro";
import { joinClass } from "../core/utils.js";
import { ui } from "../core/utils.js";
/** DRAWER */
export const Drawer = (props) =>
$html("div", { class: joinClass("drawer", props.class) }, [
/**
* Drawer component
*
* daisyUI classes used:
* - drawer, drawer-toggle, drawer-content, drawer-side, drawer-overlay
* - bg-base-200, w-80, min-h-full
*/
export const Drawer = (props, children) => {
const { class: className, id, open, side, content, ...rest } = props;
// Generar un id único si no se proporciona
const drawerId = id || `drawer-${Math.random().toString(36).slice(2, 9)}`;
return $html("div", {
...rest,
class: ui('drawer', className),
}, [
$html("input", {
id: props.id,
id: drawerId,
type: "checkbox",
class: "drawer-toggle",
checked: props.open,
checked: () => typeof open === "function" ? open() : open,
onchange: (e) => {
if (typeof open === "function") open(e.target.checked);
}
}),
$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),
$html("div", { class: "drawer-content" }, [
typeof content === "function" ? content() : content
]),
$html("div", { class: "drawer-side" }, [
// El overlay debe tener for apuntando al checkbox
$html("label", {
for: drawerId,
class: "drawer-overlay",
onclick: () => {
if (typeof open === "function") open(false);
}
}),
$html("div", { class: "min-h-full bg-base-200 w-80" }, [
typeof side === "function" ? side() : side
])
])
]);
};

18
src/components/Dropdown.js
View File

@@ -1,8 +1,20 @@
// components/Dropdown.js
import { $html, $for } from "sigpro";
import { val } from "../core/utils.js";
import { ui } from "../core/utils.js";
/**
* Dropdown component
*
* daisyUI classes used:
* - dropdown, dropdown-content, dropdown-end, dropdown-top, dropdown-bottom
* - menu, menu-dropdown, menu-dropdown-show
* - btn, btn-ghost, btn-sm, btn-md, btn-lg
* - bg-base-100, shadow, rounded-box, border, border-base-300
* - z-50, p-2, w-52, min-w-max
* - m-1, flex, items-center, gap-2
*/
export const Dropdown = (props, children) => {
const { label, icon, items, ...rest } = props;
const { class: className, label, icon, items, ...rest } = props;
const renderContent = () => {
if (items) {
@@ -38,7 +50,7 @@ export const Dropdown = (props, children) => {
return $html("div", {
...rest,
class: () => `dropdown ${val(props.class) || ""}`,
class: ui('dropdown', className),
}, [
$html("div", {
tabindex: 0,

23
src/components/Fab.js
View File

@@ -1,15 +1,26 @@
// components/Fab.js
import { $html } from "sigpro";
import { val } from "../core/utils.js";
import { val, ui, getIcon } from "../core/utils.js";
/** FAB (Floating Action Button) */
/**
* Fab (Floating Action Button) component
*
* daisyUI classes used:
* - btn, btn-lg, btn-circle, btn-primary
* - shadow-2xl, shadow-lg
* - badge, badge-ghost, shadow-sm, whitespace-nowrap
* - absolute, flex, flex-col-reverse, items-end, gap-3
* - z-100, transition-all, duration-300
* - bottom-6, right-6, top-6, left-6
*/
export const Fab = (props) => {
const { icon, label, actions = [], position = "bottom-6 right-6", class: className = "", ...rest } = props;
const { class: className, icon, label, actions = [], position = "bottom-6 right-6", ...rest } = props;
return $html(
"div",
{
...rest,
class: `fab absolute ${position} flex flex-col-reverse items-end gap-3 z-[100] ${className}`,
class: ui(`fab absolute ${position} flex flex-col-reverse items-end gap-3 z-[100]`, className),
},
[
$html(
@@ -20,7 +31,7 @@ export const Fab = (props) => {
class: "btn btn-lg btn-circle btn-primary shadow-2xl",
},
[
icon ? (typeof icon === "function" ? icon() : icon) : null,
icon ? getIcon(icon) : null,
!icon && label ? label : null
],
),
@@ -38,7 +49,7 @@ export const Fab = (props) => {
act.onclick?.(e);
},
},
[act.icon ? (typeof act.icon === "function" ? act.icon() : act.icon) : act.text || ""],
[act.icon ? getIcon(act.icon) : act.text || ""],
),
]),
),

25
src/components/Fieldset.js
View File

@@ -1,19 +1,30 @@
// components/Fieldset.js
import { $html } from "sigpro";
import { val, joinClass } from "../core/utils.js";
import { val, ui } from "../core/utils.js";
/** FIELDSET */
export const Fieldset = (props, children) =>
$html(
/**
* Fieldset component
*
* daisyUI classes used:
* - fieldset, fieldset-legend
* - bg-base-200, border, border-base-300
* - p-4, rounded-lg, font-bold
*/
export const Fieldset = (props, children) => {
const { class: className, legend, ...rest } = props;
return $html(
"fieldset",
{
...props,
class: joinClass("fieldset bg-base-200 border border-base-300 p-4 rounded-lg", props.class),
...rest,
class: ui('fieldset bg-base-200 border border-base-300 p-4 rounded-lg', className),
},
[
() => {
const legendText = val(props.legend);
const legendText = val(legend);
return legendText ? $html("legend", { class: "fieldset-legend font-bold" }, [legendText]) : null;
},
children,
],
);
};

31
src/components/Fileinput.js
View File

@@ -1,9 +1,26 @@
// components/Fileinput.js
import { $, $html, $if, $for } from "sigpro";
import { iconUpload, iconClose } from "../core/icons.js";
import { ui, getIcon } from "../core/utils.js";
/** FILEINPUT */
/**
* Fileinput component
*
* daisyUI classes used:
* - fieldset, w-full, p-0
* - tooltip, tooltip-top, before:z-50, after:z-50
* - relative, flex, items-center, justify-between, w-full, h-12, px-4
* - border-2, border-dashed, rounded-lg, cursor-pointer, transition-all, duration-200
* - border-primary, bg-primary/10, border-base-content/20, bg-base-100, hover:bg-base-200
* - text-sm, opacity-70, truncate, grow, text-left
* - text-[10px], opacity-40, shrink-0
* - text-error, text-[10px], mt-1, px-1, font-medium
* - mt-2, space-y-1
* - flex, items-center, justify-between, p-1.5, pl-3, text-xs, bg-base-200/50, rounded-md, border, border-base-300
* - gap-2, truncate, opacity-50, font-medium, max-w-[200px]
* - btn, btn-ghost, btn-xs, btn-circle
*/
export const Fileinput = (props) => {
const { tooltip, max = 2, accept = "*", onSelect } = props;
const { class: className, tooltip, max = 2, accept = "*", onSelect, ...rest } = props;
const selectedFiles = $([]);
const isDragging = $(false);
@@ -30,7 +47,7 @@ export const Fileinput = (props) => {
onSelect?.(updated);
};
return $html("fieldset", { class: "fieldset w-full p-0" }, [
return $html("fieldset", { ...rest, class: ui('fieldset w-full p-0', className) }, [
$html(
"div",
{
@@ -60,7 +77,7 @@ 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" }),
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`),
]),
@@ -102,7 +119,7 @@ export const Fileinput = (props) => {
removeFile(index);
},
},
[$html("img", { src: iconClose, class: "w-3 h-3 opacity-70" })],
[getIcon("icon-[lucide--x]")]
),
]),
(file) => file.name + file.lastModified,
@@ -110,4 +127,4 @@ export const Fileinput = (props) => {
]),
),
]);
};
};

20
src/components/Indicator.js
View File

@@ -1,9 +1,19 @@
// components/Indicator.js
import { $html } from "sigpro";
import { joinClass } from "../core/utils.js";
import { ui } from "../core/utils.js";
/** INDICATOR */
/**
* Indicator component
*
* daisyUI classes used:
* - indicator, indicator-item
* - badge, badge-primary, badge-secondary, badge-accent
* - badge-info, badge-success, badge-warning, badge-error
* - badge-outline, badge-soft, badge-dash
* - badge-xs, badge-sm, badge-md, badge-lg
*/
export const Indicator = (props, children) =>
$html("div", { class: joinClass("indicator", props.class) }, [
$html("div", { class: "indicator" }, () => [
children,
$html("span", { class: joinClass("indicator-item badge", props.badgeClass) }, props.badge),
]);
props.value && $html("span", { class: ui('indicator-item badge', props.class) }, props.value),
].filter(Boolean));

141
src/components/Input.js
View File

@@ -1,77 +1,88 @@
// components/Input.js
import { $, $html } from "sigpro";
import { val, joinClass } from "../core/utils.js";
import { tt } from "../core/i18n.js";
import {
iconAbc,
iconLock,
iconCalendar,
icon123,
iconMail,
iconShow,
iconHide
} from "../core/icons.js";
import { val, ui, getIcon } from "../core/utils.js";
/** INPUT */
/**
* Input component - Solo el input con ícono integrado a la izquierda
*
* daisyUI classes used:
* - input, input-bordered, input-ghost, input-primary, input-secondary
* - input-accent, input-info, input-success, input-warning, input-error
* - input-xs, input-sm, input-md, input-lg
* - btn, btn-ghost, btn-xs, btn-sm, btn-md, btn-circle, opacity-50, hover:opacity-100
*/
export const Input = (props) => {
const { label, tip, value, error, isSearch, icon, type = "text", ...rest } = props;
const {
class: className,
value,
type = "text",
icon,
oninput,
placeholder,
disabled,
size, // para poder pasar el tamaño también al botón
...rest
} = props;
const isPassword = type === "password";
const visible = $(false);
const iconsByType = {
text: iconAbc,
password: iconLock,
date: iconCalendar,
number: icon123,
email: iconMail,
const iconMap = {
text: "icon-[lucide--text]",
password: "icon-[lucide--lock]",
date: "icon-[lucide--calendar]",
number: "icon-[lucide--hash]",
email: "icon-[lucide--mail]",
search: "icon-[lucide--search]",
tel: "icon-[lucide--phone]",
url: "icon-[lucide--link]",
};
const inputEl = $html("input", {
...rest,
type: () => (isPassword ? (visible() ? "text" : "password") : type),
placeholder: props.placeholder || label || (isSearch ? tt("search")() : " "),
class: joinClass("grow order-2 focus:outline-none", props.class),
value: value,
oninput: (e) => props.oninput?.(e),
disabled: () => val(props.disabled),
});
const leftIcon = icon ? getIcon(icon) : (iconMap[type] ? getIcon(iconMap[type]) : null);
const leftIcon = icon ? icon : iconsByType[type] ? $html("img", { src: iconsByType[type], class: "opacity-50", alt: type }) : null;
const getPasswordIcon = () => getIcon(visible() ? "icon-[lucide--eye-off]" : "icon-[lucide--eye]");
const paddingLeft = leftIcon ? "pl-10" : "";
const paddingRight = isPassword ? "pr-10" : "";
const buttonSize = () => {
if (className?.includes('input-xs')) return 'btn-xs';
if (className?.includes('input-sm')) return 'btn-sm';
if (className?.includes('input-lg')) return 'btn-lg';
return 'btn-md';
};
return $html(
"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,
inputEl,
isPassword
? $html(
"button",
{
type: "button",
class: "order-3 btn btn-ghost btn-xs btn-circle opacity-50 hover:opacity-100",
onclick: (e) => {
e.preventDefault();
visible(!visible());
},
},
() =>
$html("img", {
class: "w-5 h-5",
src: visible() ? iconShow : iconHide,
}),
)
: null,
tip
? $html(
"div",
{ class: "tooltip tooltip-left order-4", "data-tip": tip },
$html("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),
],
"div",
{ class: "relative w-full" },
() => [
// Input
$html("input", {
...rest,
type: () => (isPassword ? (visible() ? "text" : "password") : type),
placeholder: placeholder || " ",
class: ui('input w-full', `${paddingLeft} ${paddingRight} ${className || ''}`.trim()),
value: value,
oninput: (e) => oninput?.(e),
disabled: () => val(disabled),
}),
leftIcon ? $html("div", {
class: "absolute left-3 inset-y-0 flex items-center pointer-events-none text-base-content/60",
}, leftIcon) : null,
isPassword ? $html("button", {
type: "button",
class: ui(
"absolute right-3 inset-y-0 flex items-center",
"btn btn-ghost btn-circle opacity-50 hover:opacity-100",
buttonSize()
),
onclick: (e) => {
e.preventDefault();
visible(!visible());
}
}, () => getPasswordIcon()) : null,
]
);
};
};

28
src/components/Label.js Normal file
View File

@@ -0,0 +1,28 @@
// components/Label.js
import { $, $html } from "sigpro";
import { ui, val } from "../core/utils.js";
/**
* Label component
*
* daisyUI classes used:
* - label
* - floating-label
*/
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,
children,
error ? $html("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,
children,
error ? $html("span", { class: "text-error text-xs" }, val(error)) : null,
]);
};

28
src/components/List.js
View File

@@ -1,20 +1,22 @@
// components/List.js
import { $html, $if, $for } from "sigpro";
import { joinClass, val } from "../core/utils.js";
import { ui, val } from "../core/utils.js";
/** LIST */
/**
* List component
*
* daisyUI classes used:
* - list, list-row, list-bullet, list-image, list-none
* - bg-base-100, rounded-box, shadow-md
* - p-4, pb-2, text-xs, opacity-60
* - flex, items-center, gap-2
*/
export const List = (props) => {
const {
items,
header,
render,
keyFn = (item, index) => index,
class: className,
...rest
} = props;
const { class: className, items, header, render, keyFn = (item, index) => index, ...rest } = props;
const listItems = $for(
items,
(item, index) => $html("li", { class: "list-row" }, [render(item, index)]),
items,
(item, index) => $html("li", { class: "list-row" }, [render(item, index)]),
keyFn
);
@@ -22,7 +24,7 @@ export const List = (props) => {
"ul",
{
...rest,
class: joinClass("list bg-base-100 rounded-box shadow-md", className),
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
);

19
src/components/Menu.js
View File

@@ -1,8 +1,19 @@
// components/Menu.js
import { $html, $for } from "sigpro";
import { val, joinClass } from "../core/utils.js";
import { val, ui } from "../core/utils.js";
/** MENU */
/**
* Menu component
*
* daisyUI classes used:
* - menu, menu-dropdown, menu-dropdown-show
* - bg-base-200, rounded-box
* - details, summary, ul, li, a
* - mr-2, active
*/
export const Menu = (props) => {
const { class: className, items, ...rest } = props;
const renderItems = (items) =>
$for(
() => items || [],
@@ -21,5 +32,5 @@ export const Menu = (props) => {
(it, i) => it.label || i,
);
return $html("ul", { ...props, class: joinClass("menu bg-base-200 rounded-box", props.class) }, renderItems(props.items));
};
return $html("ul", { ...rest, class: ui('menu bg-base-200 rounded-box', className) }, renderItems(items));
};

26
src/components/Modal.js
View File

@@ -1,19 +1,27 @@
// components/Modal.js
import { $html, $watch } from "sigpro";
import { ui, val } from "../core/utils.js";
import { tt } from "../core/i18n.js";
import { Button } from "./Button.js";
/** MODAL REACTIVO NATIVO */
/**
* Modal component
*
* daisyUI classes used:
* - modal, modal-box, modal-action, modal-backdrop
* - modal-open, modal-middle, modal-top, modal-bottom
* - text-lg, font-bold, mb-4, py-2
* - flex, gap-2
*/
export const Modal = (props, children) => {
const { title, buttons, open, ...rest } = props;
const { class: className, title, buttons, open, ...rest } = props;
const dialogRef = { current: null };
// Sincronizamos la señal con los métodos nativos del navegador
$watch(() => {
const dialog = dialogRef.current;
if (!dialog) return;
if (open()) {
// Solo abrimos si no está ya abierto (evita bucles)
if (val(open)) {
if (!dialog.open) dialog.showModal();
} else {
if (dialog.open) dialog.close();
@@ -22,15 +30,14 @@ export const Modal = (props, children) => {
const close = (e) => {
if (e && e.preventDefault) e.preventDefault();
open(false);
if (typeof open === "function") open(false);
};
return $html("dialog", {
...rest,
ref: dialogRef,
class: "modal",
// Importante: Si el usuario pulsa ESC, actualizamos la señal
oncancel: () => open(false)
class: ui('modal', className),
oncancel: () => typeof open === "function" && open(false)
}, [
$html("div", { class: "modal-box" }, [
title ? $html("h3", { class: "text-lg font-bold mb-4" }, title) : null,
@@ -42,7 +49,6 @@ export const Modal = (props, children) => {
Button({ type: "button", onclick: close }, tt("close")()),
]),
]),
// Backdrop nativo que sincroniza con la señal
$html("form", {
method: "dialog",
class: "modal-backdrop",

18
src/components/Navbar.js
View File

@@ -1,6 +1,16 @@
// components/Navbar.js
import { $html } from "sigpro";
import { joinClass } from "../core/utils.js";
import { ui } 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);
/**
* Navbar component
*
* daisyUI classes used:
* - navbar, navbar-start, navbar-center, navbar-end
* - bg-base-100, shadow-sm, px-4
*/
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);
};

22
src/components/Radio.js
View File

@@ -1,15 +1,25 @@
// components/Radio.js
import { $html } from "sigpro";
import { val, joinClass } from "../core/utils.js";
import { val, ui } from "../core/utils.js";
/** RADIO */
/**
* Radio component
*
* daisyUI classes used:
* - radio, radio-primary, radio-secondary, radio-accent
* - radio-info, radio-success, radio-warning, radio-error
* - radio-xs, radio-sm, radio-md, radio-lg
* - label, label-text, cursor-pointer, justify-start, gap-3
* - tooltip, tooltip-top, tooltip-bottom, tooltip-left, tooltip-right
*/
export const Radio = (props) => {
const { label, tooltip, value, inputValue, name, ...rest } = props;
const { class: className, label, tooltip, value, inputValue, name, ...rest } = props;
const radioEl = $html("input", {
...rest,
type: "radio",
name: name,
class: joinClass("radio", props.class),
class: ui('radio', className),
checked: () => val(value) === inputValue,
onclick: () => {
if (typeof value === "function") value(inputValue);
@@ -18,8 +28,10 @@ export const Radio = (props) => {
if (!label && !tooltip) return radioEl;
return $html("label", { class: "label cursor-pointer justify-start gap-3" }, [
const layout = $html("label", { class: "label cursor-pointer justify-start gap-3" }, [
radioEl,
label ? $html("span", { class: "label-text" }, label) : null,
]);
return tooltip ? $html("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout;
};

20
src/components/Range.js
View File

@@ -1,14 +1,24 @@
// components/Range.js
import { $html } from "sigpro";
import { val, joinClass } from "../core/utils.js";
import { val, ui } from "../core/utils.js";
/** RANGE */
/**
* Range component
*
* daisyUI classes used:
* - range, range-primary, range-secondary, range-accent
* - range-info, range-success, range-warning, range-error
* - range-xs, range-sm, range-md, range-lg
* - label-text, flex, flex-col, gap-2
* - tooltip, tooltip-top, tooltip-bottom, tooltip-left, tooltip-right
*/
export const Range = (props) => {
const { label, tooltip, value, ...rest } = props;
const {class: className, label, tooltip, value, ...rest } = props;
const rangeEl = $html("input", {
...rest,
type: "range",
class: joinClass("range", props.class),
class: ui('range', className),
value: value,
disabled: () => val(props.disabled)
});
@@ -21,4 +31,4 @@ export const Range = (props) => {
]);
return tooltip ? $html("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout;
};
};

17
src/components/Rating.js
View File

@@ -1,16 +1,25 @@
// components/Rating.js
import { $html } from "sigpro";
import { val } from "../core/utils.js";
import { val, ui } from "../core/utils.js";
/** RATING */
/**
* Rating component
*
* daisyUI classes used:
* - rating, rating-half, rating-hidden
* - mask, mask-star, mask-star-2, mask-heart, mask-circle
* - pointer-events-none
*/
export const Rating = (props) => {
const { value, count = 5, mask = "mask-star", readonly = false, onchange, ...rest } = props;
const { class: className, value, count = 5, mask = "mask-star", readonly = false, onchange, ...rest } = props;
const ratingGroup = `rating-${Math.random().toString(36).slice(2, 7)}`;
return $html(
"div",
{
...rest,
class: () => `rating ${val(readonly) ? "pointer-events-none" : ""} ${props.class || ""}`,
class: () => ui(`rating ${val(readonly) ? "pointer-events-none" : ""}`, className),
},
Array.from({ length: val(count) }, (_, i) => {
const starValue = i + 1;

21
src/components/Select.js
View File

@@ -1,19 +1,28 @@
// components/Select.js
import { $html, $for } from "sigpro";
import { val, joinClass } from "../core/utils.js";
import { val, ui } from "../core/utils.js";
/** SELECT */
/**
* Select component
*
* daisyUI classes used:
* - select, select-bordered, select-primary, select-secondary
* - select-accent, select-info, select-success, select-warning, select-error
* - select-xs, select-sm, select-md, select-lg
* - fieldset-label, flex, flex-col, gap-1, w-full
*/
export const Select = (props) => {
const { label, options, value, ...rest } = props;
const { class: className, label, items, value, ...rest } = props;
const selectEl = $html(
"select",
{
...rest,
class: joinClass("select select-bordered w-full", props.class),
class: ui('select select-bordered w-full', className),
value: value
},
$for(
() => val(options) || [],
() => val(items) || [],
(opt) =>
$html(
"option",
@@ -33,4 +42,4 @@ export const Select = (props) => {
$html("span", {}, label),
selectEl
]);
};
};

17
src/components/Stack.js
View File

@@ -1,6 +1,15 @@
// components/Stack.js
import { $html } from "sigpro";
import { joinClass } from "../core/utils.js";
import { ui } from "../core/utils.js";
/** STACK */
export const Stack = (props, children) =>
$html("div", { ...props, class: joinClass("stack", props.class) }, children);
/**
* Stack component
*
* daisyUI classes used:
* - stack, stack-top, stack-bottom, stack-start, stack-end
*/
export const Stack = (props, children) => {
const { class: className, ...rest } = props;
return $html("div", { ...rest, class: ui('stack', className) }, children);
};

26
src/components/Stat.js
View File

@@ -1,11 +1,21 @@
// components/Stat.js
import { $html } from "sigpro";
import { val, joinClass } from "../core/utils.js";
import { val, ui } 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),
/**
* Stat component
*
* daisyUI classes used:
* - stat, stat-figure, stat-title, stat-value, stat-desc
* - text-secondary
*/
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),
]);
};

24
src/components/Swap.js
View File

@@ -1,13 +1,23 @@
// components/Swap.js
import { $html } from "sigpro";
import { joinClass } from "../core/utils.js";
import { ui, val } from "../core/utils.js";
/** SWAP */
export const Swap = (props) =>
$html("label", { class: joinClass("swap", props.class) }, [
/**
* Swap component
*
* daisyUI classes used:
* - swap, swap-on, swap-off, swap-active
* - swap-rotate, swap-flip, swap-indeterminate
*/
export const Swap = (props) => {
const { class: className, value, on, off, ...rest } = props;
return $html("label", { ...rest, class: ui('swap', className) }, [
$html("input", {
type: "checkbox",
checked: props.value
checked: val(value)
}),
$html("div", { class: "swap-on" }, props.on),
$html("div", { class: "swap-off" }, props.off),
$html("div", { class: "swap-on" }, on),
$html("div", { class: "swap-off" }, off),
]);
};

47
src/components/Table.js
View File

@@ -1,34 +1,37 @@
// components/Table.js
import { $html, $for, $if } from "sigpro";
import { val, joinClass } from "../core/utils.js";
import { val, ui } from "../core/utils.js";
import { tt } from "../core/i18n.js";
/** TABLE */
/**
* Table component
*
* daisyUI classes used:
* - table, table-zebra, table-pin-rows, table-pin-cols
* - table-xs, table-sm, table-md, table-lg
* - overflow-x-auto, w-full, bg-base-100, rounded-box, border, border-base-300
* - thead, tbody, tfoot, tr, th, td
* - hover, text-center, p-10, opacity-50
*/
export const Table = (props) => {
const {
items = [],
columns = [],
keyFn,
zebra = false,
pinRows = false,
empty = tt("nodata")(),
...rest
} = props;
const { class: className, items = [], columns = [], keyFn, zebra = false, pinRows = false, empty = tt("nodata")(), ...rest } = props;
const tableClass = () => joinClass(
"table",
`${val(zebra) ? "table-zebra" : ""} ${val(pinRows) ? "table-pin-rows" : ""} ${props.class || ""}`
);
const tableClass = () => {
const zebraClass = val(zebra) ? "table-zebra" : "";
const pinRowsClass = val(pinRows) ? "table-pin-rows" : "";
return ui('table', className, zebraClass, pinRowsClass);
};
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", {},
$html("tr", {},
columns.map(col => $html("th", { class: col.class || "" }, col.label))
)
]),
$html("tbody", {}, [
$for(items, (item, index) => {
return $html("tr", { class: "hover" },
return $html("tr", { class: "hover" },
columns.map(col => {
const cellContent = () => {
if (col.render) return col.render(item, index);
@@ -39,8 +42,8 @@ export const Table = (props) => {
})
);
}, keyFn || ((item, idx) => item.id || idx)),
$if(() => val(items).length === 0, () =>
$if(() => val(items).length === 0, () =>
$html("tr", {}, [
$html("td", { colspan: columns.length, class: "text-center p-10 opacity-50" }, [
val(empty)
@@ -48,13 +51,13 @@ export const Table = (props) => {
])
)
]),
$if(() => columns.some(c => c.footer), () =>
$if(() => columns.some(c => c.footer), () =>
$html("tfoot", {}, [
$html("tr", {},
$html("tr", {},
columns.map(col => $html("th", {}, col.footer || ""))
)
])
)
])
]);
};
};

61
src/components/Tabs.js
View File

@@ -1,46 +1,65 @@
import { $html, $for } from "sigpro";
import { val, joinClass } from "../core/utils.js";
// components/Tabs.js
import { $, $html, $for } from "sigpro";
import { val, ui } from "../core/utils.js";
/** TABS */
/**
* Tabs component
*
* daisyUI classes used:
* - tabs, tabs-box, tabs-lifted, tabs-bordered
* - tab, tab-active, tab-disabled
* - flex, flex-col, gap-4, w-full, p-4
*/
export const Tabs = (props) => {
const { items, ...rest } = props;
const { class: className, items, activeIndex = $(0), ...rest } = props;
const itemsSignal = typeof items === "function" ? items : () => items || [];
// Si no se provee activeIndex, creamos uno interno
const internalActive = $(0);
const currentActive = activeIndex !== undefined ? activeIndex : internalActive;
const handleTabClick = (idx, onClick) => (e) => {
if (typeof currentActive === "function") {
currentActive(idx);
}
onClick?.(e);
};
return $html("div", { ...rest, class: "flex flex-col gap-4 w-full" }, [
$html(
"div",
{
role: "tablist",
class: joinClass("tabs tabs-box", props.class),
class: ui('tabs tabs-box', className),
},
$for(
itemsSignal,
(it) =>
$html(
(it, idx) => {
const isActive = val(it.active) ?? (currentActive() === idx);
return $html(
"a",
{
role: "tab",
class: () => joinClass(
"tab",
val(it.active) && "tab-active",
val(it.disabled) && "tab-disabled",
it.tip && "tooltip"
),
"data-tip": it.tip,
onclick: (e) => !val(it.disabled) && it.onclick?.(e),
class: () => ui('tab', isActive ? 'tab-active' : '', val(it.disabled) ? 'tab-disabled' : ''),
onclick: !val(it.disabled) ? handleTabClick(idx, it.onclick) : undefined,
},
it.label,
),
(t) => t.label,
);
},
(t, idx) => t.label + idx,
),
),
() => {
const active = itemsSignal().find((it) => val(it.active));
if (!active) return null;
const content = val(active.content);
const activeItem = itemsSignal().find((it, idx) =>
val(it.active) ?? (currentActive() === idx)
);
if (!activeItem) return null;
const content = val(activeItem.content);
return $html("div", { class: "p-4" }, [
typeof content === "function" ? content() : content
]);
},
]);
};
};

42
src/components/Timeline.js
View File

@@ -1,26 +1,32 @@
// components/Timeline.js
import { $html, $for } from "sigpro";
import { val } from "../core/utils.js";
import { iconInfo, iconSuccess, iconWarning, iconError } from "../core/icons.js";
import { val, ui, getIcon } from "../core/utils.js";
/** TIMELINE */
/**
* Timeline component
*
* daisyUI classes used:
* - timeline, timeline-vertical, timeline-horizontal, timeline-compact
* - timeline-start, timeline-middle, timeline-end, timeline-box
* - flex-1, shadow-sm
* - hr, bg-primary
*/
export const Timeline = (props) => {
const { items = [], vertical = true, compact = false, ...rest } = props;
const { class: className, items = [], vertical = true, compact = false, ...rest } = props;
const icons = {
info: iconInfo,
success: iconSuccess,
warning: iconWarning,
error: iconError,
const iconMap = {
info: "icon-[lucide--info]",
success: "icon-[lucide--check-circle]",
warning: "icon-[lucide--alert-triangle]",
error: "icon-[lucide--alert-circle]",
};
return $html(
"ul",
{
...rest,
class: () =>
`timeline ${val(vertical) ? "timeline-vertical" : "timeline-horizontal"} ${
val(compact) ? "timeline-compact" : ""
} ${props.class || ""}`,
class: () => ui(
`timeline ${val(vertical) ? "timeline-vertical" : "timeline-horizontal"} ${val(compact) ? "timeline-compact" : ""}`, className),
},
[
$for(
@@ -35,11 +41,9 @@ export const Timeline = (props) => {
!isFirst ? $html("hr", { class: item.completed ? "bg-primary" : "" }) : null,
$html("div", { class: "timeline-start" }, [renderSlot(item.title)]),
$html("div", { class: "timeline-middle" }, [
$html("img", {
src: icons[itemType] || item.icon || icons.success,
class: "w-4 h-4 object-contain mx-1",
alt: itemType,
}),
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: item.completed ? "bg-primary" : "" }) : null,
@@ -49,4 +53,4 @@ export const Timeline = (props) => {
),
],
);
};
};

25
src/components/Toast.js
View File

@@ -1,11 +1,21 @@
// components/Toast.js
import { $html, $mount } from "sigpro";
import { getIcon } from "../core/utils.js";
import { Button } from "./Button.js";
/** TOAST (Imperative Function) */
/**
* Toast (Imperative Function)
*
* daisyUI classes used:
* - alert, alert-soft, alert-info, alert-success, alert-warning, alert-error
* - shadow-lg, transition-all, duration-300
* - translate-x-10, opacity-0, pointer-events-auto
* - fixed, top-0, right-0, z-[9999], p-4, flex, flex-col, gap-2
* - btn, btn-xs, btn-circle, btn-ghost
*/
export const Toast = (message, type = "alert-success", duration = 3500) => {
let container = document.getElementById("sigpro-toast-container");
// Crear el contenedor global si no existe
if (!container) {
container = $html("div", {
id: "sigpro-toast-container",
@@ -27,7 +37,6 @@ export const Toast = (message, type = "alert-success", duration = 3500) => {
setTimeout(() => {
instance.destroy();
toastHost.remove();
// Limpiar el contenedor si ya no hay más toasts
if (!container.hasChildNodes()) container.remove();
}, 300);
} else {
@@ -37,6 +46,8 @@ export const Toast = (message, type = "alert-success", duration = 3500) => {
};
const ToastComponent = () => {
const closeIcon = getIcon("icon-[lucide--x]");
const el = $html(
"div",
{
@@ -44,11 +55,13 @@ export const Toast = (message, type = "alert-success", duration = 3500) => {
},
[
$html("span", {}, [typeof message === "function" ? message() : message]),
Button({ class: "btn-xs btn-circle btn-ghost", onclick: close }, "✕")
Button({
class: "btn-xs btn-circle btn-ghost",
onclick: close
}, closeIcon)
],
);
// Animación de entrada
requestAnimationFrame(() => el.classList.remove("translate-x-10", "opacity-0"));
return el;
};
@@ -60,4 +73,4 @@ export const Toast = (message, type = "alert-success", duration = 3500) => {
}
return close;
};
};

19
src/components/Tooltip.js
View File

@@ -1,6 +1,19 @@
// components/Tooltip.js
import { $html } from "sigpro";
import { joinClass } from "../core/utils.js";
import { ui } from "../core/utils.js";
/** TOOLTIP */
/**
* Tooltip component
*
* daisyUI classes used:
* - tooltip, tooltip-top, tooltip-bottom, tooltip-left, tooltip-right
* - tooltip-primary, tooltip-secondary, tooltip-accent
* - tooltip-info, tooltip-success, tooltip-warning, tooltip-error
* - tooltip-open
*/
export const Tooltip = (props, children) =>
$html("div", { ...props, class: joinClass("tooltip", props.class), "data-tip": props.tip }, children);
$html("div", {
...props,
class: () => ui('tooltip', props.ui, props.class),
"data-tip": props.tip,
}, children);

3
src/components/index.js
View File

@@ -13,6 +13,7 @@ import * as FieldsetModule from './Fieldset.js';
import * as FileinputModule from './Fileinput.js';
import * as IndicatorModule from './Indicator.js';
import * as InputModule from './Input.js';
import * as LabelModule from './Label.js';
import * as ListModule from './List.js';
import * as LoadingModule from './Loading.js';
import * as MenuModule from './Menu.js';
@@ -46,6 +47,7 @@ export * from './Fieldset.js';
export * from './Fileinput.js';
export * from './Indicator.js';
export * from './Input.js';
export * from './Label.js';
export * from './List.js';
export * from './Loading.js';
export * from './Menu.js';
@@ -80,6 +82,7 @@ const Components = {
...FileinputModule,
...IndicatorModule,
...InputModule,
...LabelModule,
...ListModule,
...LoadingModule,
...MenuModule,