38 lines
919 B
Vue
38 lines
919 B
Vue
|
<script setup lang="ts">
|
||
|
|
import type { HTMLAttributes } from "vue"
|
||
|
|
import type { TimelineItemData } from "."
|
||
|
|
import TimelineItem from "./TimelineItem.vue"
|
||
|
|
import { cn } from "@/lib/utils"
|
||
|
|
|
||
|
|
const props = defineProps<{
|
||
|
|
/** Array of timeline items. When provided, renders TimelineItem for each. */
|
||
|
|
items?: TimelineItemData[]
|
||
|
|
class?: HTMLAttributes["class"]
|
||
|
|
}>()
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div
|
||
|
|
data-slot="timeline"
|
||
|
|
role="list"
|
||
|
|
:class="
|
||
|
|
cn(
|
||
|
|
'relative flex flex-col [&>[data-slot=timeline-item]:last-child_.timeline-item-connector]:hidden',
|
||
|
|
props.class,
|
||
|
|
)
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<template v-if="props.items?.length">
|
||
|
|
<TimelineItem
|
||
|
|
v-for="(item, index) in props.items"
|
||
|
|
:key="index"
|
||
|
|
:title="item.title"
|
||
|
|
:date="item.date"
|
||
|
|
:time="item.time"
|
||
|
|
:state="item.state ?? 'pending'"
|
||
|
|
/>
|
||
|
|
</template>
|
||
|
|
<slot v-else />
|
||
|
|
</div>
|
||
|
|
</template>
|