65 lines
1.8 KiB
JavaScript
65 lines
1.8 KiB
JavaScript
// components/Tabs.js
|
|
import { $, $html, $for } from "sigpro";
|
|
import { val, ui } from "../core/utils.js";
|
|
|
|
/**
|
|
* Tabs component
|
|
*
|
|
* daisyUI classes used:
|
|
* - tabs, tabs-box, tabs-lifted, tabs-bordered
|
|
* - tab, tab-active, tab-disabled
|
|
* - flex, flex-col, gap-4, w-full, p-4
|
|
*/
|
|
export const Tabs = (props) => {
|
|
const { class: className, items, activeIndex = $(0), ...rest } = props;
|
|
|
|
const itemsSignal = typeof items === "function" ? items : () => items || [];
|
|
|
|
// Si no se provee activeIndex, creamos uno interno
|
|
const internalActive = $(0);
|
|
const currentActive = activeIndex !== undefined ? activeIndex : internalActive;
|
|
|
|
const handleTabClick = (idx, onClick) => (e) => {
|
|
if (typeof currentActive === "function") {
|
|
currentActive(idx);
|
|
}
|
|
onClick?.(e);
|
|
};
|
|
|
|
return $html("div", { ...rest, class: "flex flex-col gap-4 w-full" }, [
|
|
$html(
|
|
"div",
|
|
{
|
|
role: "tablist",
|
|
class: ui('tabs tabs-box', className),
|
|
},
|
|
$for(
|
|
itemsSignal,
|
|
(it, idx) => {
|
|
const isActive = val(it.active) ?? (currentActive() === idx);
|
|
|
|
return $html(
|
|
"a",
|
|
{
|
|
role: "tab",
|
|
class: () => ui('tab', isActive ? 'tab-active' : '', val(it.disabled) ? 'tab-disabled' : ''),
|
|
onclick: !val(it.disabled) ? handleTabClick(idx, it.onclick) : undefined,
|
|
},
|
|
it.label,
|
|
);
|
|
},
|
|
(t, idx) => t.label + idx,
|
|
),
|
|
),
|
|
() => {
|
|
const activeItem = itemsSignal().find((it, idx) =>
|
|
val(it.active) ?? (currentActive() === idx)
|
|
);
|
|
if (!activeItem) return null;
|
|
const content = val(activeItem.content);
|
|
return $html("div", { class: "p-4" }, [
|
|
typeof content === "function" ? content() : content
|
|
]);
|
|
},
|
|
]);
|
|
}; |