53 lines
1.7 KiB
JavaScript
53 lines
1.7 KiB
JavaScript
import { $html, $for } from "sigpro";
|
|
import { val } from "../core/utils.js";
|
|
import { iconInfo, iconSuccess, iconWarning, iconError } from "../core/icons.js";
|
|
|
|
/** TIMELINE */
|
|
export const Timeline = (props) => {
|
|
const { items = [], vertical = true, compact = false, ...rest } = props;
|
|
|
|
const icons = {
|
|
info: iconInfo,
|
|
success: iconSuccess,
|
|
warning: iconWarning,
|
|
error: iconError,
|
|
};
|
|
|
|
return $html(
|
|
"ul",
|
|
{
|
|
...rest,
|
|
class: () =>
|
|
`timeline ${val(vertical) ? "timeline-vertical" : "timeline-horizontal"} ${
|
|
val(compact) ? "timeline-compact" : ""
|
|
} ${props.class || ""}`,
|
|
},
|
|
[
|
|
$for(
|
|
items,
|
|
(item, i) => {
|
|
const isFirst = i === 0;
|
|
const isLast = i === val(items).length - 1;
|
|
const itemType = item.type || "success";
|
|
const renderSlot = (content) => (typeof content === "function" ? content() : content);
|
|
|
|
return $html("li", { class: "flex-1" }, [
|
|
!isFirst ? $html("hr", { class: item.completed ? "bg-primary" : "" }) : null,
|
|
$html("div", { class: "timeline-start" }, [renderSlot(item.title)]),
|
|
$html("div", { class: "timeline-middle" }, [
|
|
$html("img", {
|
|
src: icons[itemType] || item.icon || icons.success,
|
|
class: "w-4 h-4 object-contain mx-1",
|
|
alt: itemType,
|
|
}),
|
|
]),
|
|
$html("div", { class: "timeline-end timeline-box shadow-sm" }, [renderSlot(item.detail)]),
|
|
!isLast ? $html("hr", { class: item.completed ? "bg-primary" : "" }) : null,
|
|
]);
|
|
},
|
|
(item, i) => item.id || i,
|
|
),
|
|
],
|
|
);
|
|
};
|