new structure

packages/sigproui/components/Fab.js

@@ -0,0 +1,37 @@
+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"],
+);