47 lines
1.2 KiB
JavaScript
47 lines
1.2 KiB
JavaScript
import { $html, $for } from "sigpro";
|
|
import { val, joinClass } from "../core/utils.js";
|
|
|
|
/** TABS */
|
|
export const Tabs = (props) => {
|
|
const { items, ...rest } = props;
|
|
const itemsSignal = typeof items === "function" ? items : () => items || [];
|
|
|
|
return $html("div", { ...rest, class: "flex flex-col gap-4 w-full" }, [
|
|
$html(
|
|
"div",
|
|
{
|
|
role: "tablist",
|
|
class: joinClass("tabs tabs-box", props.class),
|
|
},
|
|
$for(
|
|
itemsSignal,
|
|
(it) =>
|
|
$html(
|
|
"a",
|
|
{
|
|
role: "tab",
|
|
class: () => joinClass(
|
|
"tab",
|
|
val(it.active) && "tab-active",
|
|
val(it.disabled) && "tab-disabled",
|
|
it.tip && "tooltip"
|
|
),
|
|
"data-tip": it.tip,
|
|
onclick: (e) => !val(it.disabled) && it.onclick?.(e),
|
|
},
|
|
it.label,
|
|
),
|
|
(t) => t.label,
|
|
),
|
|
),
|
|
() => {
|
|
const active = itemsSignal().find((it) => val(it.active));
|
|
if (!active) return null;
|
|
const content = val(active.content);
|
|
return $html("div", { class: "p-4" }, [
|
|
typeof content === "function" ? content() : content
|
|
]);
|
|
},
|
|
]);
|
|
};
|