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

Complete 1 fase docs components

Browse Source
This commit is contained in:
natxocc
2026-04-01 09:26:52 +02:00
parent cacdbc26ad
commit c9411be600
21 changed files with 6748 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
dist/sigpro-ui.esm.js vendored
View File

@@ -746,39 +746,55 @@ var DrawerModule = /*#__PURE__*/Object.freeze({
Drawer: Drawer
});
/** DROPDOWN */
const Dropdown = (props, children) => {
const { label, icon, ...rest } = props;
const { label, icon, items, ...rest } = props;
return $html(
"div",
{
...rest,
class: () => `dropdown ${val(props.class) || props.class || ""}`,
},
[
$html(
"div",
{
tabindex: 0,
role: "button",
class: "btn m-1 flex items-center gap-2",
},
[
icon ? (typeof icon === "function" ? icon() : icon) : null,
label ? (typeof label === "function" ? label() : label) : null
],
),
$html(
"ul",
{
tabindex: 0,
class: "dropdown-content z-[50] menu p-2 shadow bg-base-100 rounded-box min-w-max border border-base-300",
},
[typeof children === "function" ? children() : children],
),
],
);
const renderContent = () => {
if (items) {
const source = typeof items === "function" ? items : () => items;
return $html("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", {
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)
])
])
)
]);
}
return $html("div", {
tabindex: 0,
class: "dropdown-content z-[50] p-2 shadow bg-base-100 rounded-box min-w-max border border-base-300"
}, [
typeof children === "function" ? children() : children
]);
};
return $html("div", {
...rest,
class: () => `dropdown ${val(props.class) || ""}`,
}, [
$html("div", {
tabindex: 0,
role: "button",
class: "btn m-1 flex items-center gap-2",
}, [
icon ? (typeof icon === "function" ? icon() : icon) : null,
label ? (typeof label === "function" ? label() : label) : null
]),
renderContent()
]);
};
var DropdownModule = /*#__PURE__*/Object.freeze({
@@ -788,18 +804,15 @@ var DropdownModule = /*#__PURE__*/Object.freeze({
/** FAB (Floating Action Button) */
const Fab = (props) => {
const { icon, label, actions = [], position = "bottom-6 right-6", ...rest } = props;
const { icon, label, actions = [], position = "bottom-6 right-6", class: className = "", ...rest } = props;
return $html(
"div",
{
...rest,
class: () => `fab fixed ${val(position)} flex flex-col-reverse items-end gap-3 z-[100] ${
props.class || ""
}`,
class: `fab absolute ${position} flex flex-col-reverse items-end gap-3 z-[100] ${className}`,
},
[
// Botón principal
$html(
"div",
{
@@ -813,7 +826,6 @@ const Fab = (props) => {
],
),
// Acciones secundarias (se despliegan hacia arriba)
...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,