38 lines
1.3 KiB
JavaScript
38 lines
1.3 KiB
JavaScript
import { $, html } from "sigpro";
|
|
|
|
$.component(
|
|
"c-fab",
|
|
(props, { emit }) => {
|
|
const handleClick = (e, item) => {
|
|
if (item.onclick) item.onclick(e);
|
|
emit("select", item);
|
|
if (document.activeElement instanceof HTMLElement) document.activeElement.blur();
|
|
};
|
|
|
|
return html`
|
|
<div class="dropdown dropdown-top dropdown-end fixed bottom-6 right-6 z-100">
|
|
<div tabindex="0" role="button" .class=${() => `btn btn-lg btn-circle btn-primary shadow-2xl ${props.ui() ?? ""}`}>
|
|
<span class="${() => props["main-icon"]() || "icon-[lucide--plus]"} w-6 h-6"></span>
|
|
</div>
|
|
|
|
<ul tabindex="0" class="dropdown-content menu mb-4 p-0 flex flex-col gap-3 items-center">
|
|
${() =>
|
|
(props.actions() || []).map(
|
|
(item) => html`
|
|
<li class="p-0">
|
|
<button
|
|
.class=${() => `btn btn-circle shadow-lg ${item.ui() ?? "btn-secondary"}`}
|
|
@click=${(e) => handleClick(e, item)}
|
|
.title=${item.label}>
|
|
<span class="${item.icon} w-5 h-5"></span>
|
|
</button>
|
|
</li>
|
|
`,
|
|
)}
|
|
</ul>
|
|
</div>
|
|
`;
|
|
},
|
|
["main-icon", "actions", "ui"],
|
|
);
|