52 lines
1.5 KiB
JavaScript
52 lines
1.5 KiB
JavaScript
import { $html } 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", ...rest } = props;
|
|
|
|
return $html(
|
|
"div",
|
|
{
|
|
...rest,
|
|
class: () => `fab fixed ${val(position)} flex flex-col-reverse items-end gap-3 z-[100] ${
|
|
props.class || ""
|
|
}`,
|
|
},
|
|
[
|
|
// Botón principal
|
|
$html(
|
|
"div",
|
|
{
|
|
tabindex: 0,
|
|
role: "button",
|
|
class: "btn btn-lg btn-circle btn-primary shadow-2xl",
|
|
},
|
|
[
|
|
icon ? (typeof icon === "function" ? icon() : icon) : null,
|
|
!icon && label ? label : null
|
|
],
|
|
),
|
|
|
|
// 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,
|
|
$html(
|
|
"button",
|
|
{
|
|
type: "button",
|
|
class: `btn btn-circle shadow-lg ${act.class || ""}`,
|
|
onclick: (e) => {
|
|
e.stopPropagation();
|
|
act.onclick?.(e);
|
|
},
|
|
},
|
|
[act.icon ? (typeof act.icon === "function" ? act.icon() : act.icon) : act.text || ""],
|
|
),
|
|
]),
|
|
),
|
|
],
|
|
);
|
|
};
|