47 lines
1.3 KiB
JavaScript
47 lines
1.3 KiB
JavaScript
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 Tag(
|
|
"div",
|
|
{
|
|
...rest,
|
|
class: `fab absolute ${position} flex flex-col-reverse items-end gap-3 z-[100] ${className}`,
|
|
},
|
|
[
|
|
Tag(
|
|
"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
|
|
],
|
|
),
|
|
|
|
...val(actions).map((act) =>
|
|
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",
|
|
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 || ""],
|
|
),
|
|
]),
|
|
),
|
|
],
|
|
);
|
|
}; |