58 lines
1.6 KiB
JavaScript
58 lines
1.6 KiB
JavaScript
// components/Fab.js
|
|
import { $html } from "sigpro";
|
|
import { val, ui, getIcon } from "../core/utils.js";
|
|
|
|
/**
|
|
* 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 { class: className, icon, label, actions = [], position = "bottom-6 right-6", ...rest } = props;
|
|
|
|
return $html(
|
|
"div",
|
|
{
|
|
...rest,
|
|
class: ui(`fab absolute ${position} flex flex-col-reverse items-end gap-3 z-[100]`, className),
|
|
},
|
|
[
|
|
$html(
|
|
"div",
|
|
{
|
|
tabindex: 0,
|
|
role: "button",
|
|
class: "btn btn-lg btn-circle btn-primary shadow-2xl",
|
|
},
|
|
[
|
|
icon ? getIcon(icon) : null,
|
|
!icon && label ? label : null
|
|
],
|
|
),
|
|
|
|
...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 ? getIcon(act.icon) : act.text || ""],
|
|
),
|
|
]),
|
|
),
|
|
],
|
|
);
|
|
}; |