Timeline

<script setup lang="ts">
import {
  Timeline,
  TimelineConnector,
  TimelineDescription,
  TimelineItem,
  TimelineMarker,
  TimelineTime,
  TimelineTitle,
} from "@ui-sdk/vue/timeline"

const events = [
  {
    title: "Deployed to production",
    dateTime: "2026-11-10T14:32",
    time: "Today, 2:32 PM",
    description: "Version 2.4.1 is live in every region.",
  },
  {
    title: "Checks passed",
    dateTime: "2026-11-10T14:20",
    time: "Today, 2:20 PM",
    description: "312 tests and the bundle size budget.",
  },
  {
    title: "Pull request merged",
    dateTime: "2026-11-10T13:58",
    time: "Today, 1:58 PM",
    description: "Ada merged Cache search results into main.",
  },
  {
    title: "Review requested",
    dateTime: "2026-11-09T17:05",
    time: "Yesterday, 5:05 PM",
    description: "Grace and Linus were asked to review.",
  },
]
</script>

<template>
  <Timeline aria-label="Activity">
    <TimelineItem v-for="event in events" :key="event.title">
      <TimelineMarker />
      <TimelineConnector />
      <TimelineTitle>{{ event.title }}</TimelineTitle>
      <TimelineTime :datetime="event.dateTime">{{ event.time }}</TimelineTime>
      <TimelineDescription>{{ event.description }}</TimelineDescription>
    </TimelineItem>
  </Timeline>
</template>

<script setup lang="ts">
import {
  Timeline,
  TimelineConnector,
  TimelineItem,
  TimelineMarker,
  TimelineTime,
  TimelineTitle,
} from "@ui-sdk/vue/timeline"

const milestones = [
  { title: "Kickoff", dateTime: "2026-01", time: "January" },
  { title: "Design review", dateTime: "2026-03", time: "March" },
  { title: "Beta", dateTime: "2026-06", time: "June" },
  { title: "Launch", dateTime: "2026-09", time: "September" },
]
</script>

<template>
  <Timeline orientation="horizontal" :loop="false" aria-label="Roadmap">
    <TimelineItem v-for="milestone in milestones" :key="milestone.title">
      <TimelineMarker />
      <TimelineConnector />
      <TimelineTitle>{{ milestone.title }}</TimelineTitle>
      <TimelineTime :datetime="milestone.dateTime">
        {{ milestone.time }}
      </TimelineTime>
    </TimelineItem>
  </Timeline>
</template>

<script setup lang="ts">
import { CheckIcon } from "@lucide/vue"
import {
  Timeline,
  TimelineConnector,
  TimelineDescription,
  TimelineItem,
  TimelineMarker,
  TimelineTime,
  TimelineTitle,
  createTimelineController,
  type TimelineStatus,
} from "@ui-sdk/vue/timeline"

const steps: {
  value: string
  title: string
  dateTime: string
  time: string
  description: string
  status: TimelineStatus
}[] = [
  {
    value: "placed",
    title: "Order placed",
    dateTime: "2026-11-01",
    time: "Nov 1",
    description: "We received your order.",
    status: "complete",
  },
  {
    value: "packed",
    title: "Packed",
    dateTime: "2026-11-02",
    time: "Nov 2",
    description: "Your items left the shelf.",
    status: "complete",
  },
  {
    value: "shipped",
    title: "Shipped",
    dateTime: "2026-11-03",
    time: "Nov 3",
    description: "On its way with the carrier.",
    status: "current",
  },
  {
    value: "delivered",
    title: "Delivered",
    dateTime: "2026-11-05",
    time: "Nov 5",
    description: "Expected by Thursday.",
    status: "upcoming",
  },
]

const controller = createTimelineController()
</script>

<template>
  <div data-slot="stack">
    <div data-slot="controls">
      <button type="button" @click="controller.focus('shipped')">
        Go to Current Step
      </button>
    </div>
    <Timeline aria-label="Order status" :controller="controller">
      <TimelineItem
        v-for="step in steps"
        :key="step.value"
        :value="step.value"
        :status="step.status"
      >
        <TimelineMarker>
          <CheckIcon v-if="step.status === 'complete'" aria-hidden="true" />
        </TimelineMarker>
        <TimelineConnector />
        <TimelineTitle>{{ step.title }}</TimelineTitle>
        <TimelineTime :datetime="step.dateTime">{{ step.time }}</TimelineTime>
        <TimelineDescription>{{ step.description }}</TimelineDescription>
      </TimelineItem>
    </Timeline>
  </div>
</template>

<script setup lang="ts">
import { ChevronDownIcon } from "@lucide/vue"
import {
  Timeline,
  TimelineConnector,
  TimelineDescription,
  TimelineItem,
  TimelineMarker,
  TimelineTime,
  TimelineTitle,
} from "@ui-sdk/vue/timeline"
import {
  Collapsible,
  CollapsiblePanel,
  CollapsibleTrigger,
} from "@ui-sdk/vue/collapsible"

const releases = [
  {
    title: "Version 2.4",
    dateTime: "2026-10-28",
    time: "October 28",
    description: "Faster search and resumable uploads.",
    changes: [
      "Search now matches file contents, not only names.",
      "Uploads resume after the connection drops.",
    ],
  },
  {
    title: "Version 2.3",
    dateTime: "2026-09-30",
    time: "September 30",
    description: "Shared links and a new sidebar.",
    changes: [
      "Shared links remember the folder they were opened from.",
      "The sidebar collapses to icons on narrow screens.",
    ],
  },
  {
    title: "Version 2.2",
    dateTime: "2026-08-26",
    time: "August 26",
    description: "Dark mode follows your system.",
    changes: ["Dark mode follows the system setting.", "Avatars are sharper."],
  },
]
</script>

<template>
  <Timeline aria-label="Changelog">
    <TimelineItem v-for="release in releases" :key="release.title">
      <TimelineMarker />
      <TimelineConnector />
      <TimelineTitle>{{ release.title }}</TimelineTitle>
      <TimelineTime :datetime="release.dateTime">
        {{ release.time }}
      </TimelineTime>
      <TimelineDescription>{{ release.description }}</TimelineDescription>
      <Collapsible>
        <CollapsibleTrigger>
          What Changed
          <ChevronDownIcon aria-hidden="true" />
        </CollapsibleTrigger>
        <CollapsiblePanel>
          <ul>
            <li v-for="change in release.changes" :key="change">
              {{ change }}
            </li>
          </ul>
        </CollapsiblePanel>
      </Collapsible>
    </TimelineItem>
  </Timeline>
</template>

<script setup lang="ts">
import {
  Timeline,
  TimelineConnector,
  TimelineDescription,
  TimelineItem,
  TimelineMarker,
  TimelineTime,
  TimelineTitle,
} from "@ui-sdk/vue/timeline"
import { computed, ref } from "vue"
import { useLog } from "./log"

const updates = [
  {
    id: 1,
    author: "Ada",
    date: "2026-11-10",
    time: "Nov 10",
    text: "Shipped the new onboarding flow.",
  },
  {
    id: 2,
    author: "Grace",
    date: "2026-11-10",
    time: "Nov 10",
    text: "Fixed the flaky upload test.",
  },
  {
    id: 3,
    author: "Linus",
    date: "2026-11-09",
    time: "Nov 9",
    text: "Moved the docs to the new theme.",
  },
  {
    id: 4,
    author: "Margaret",
    date: "2026-11-09",
    time: "Nov 9",
    text: "Wrote the launch checklist.",
  },
  {
    id: 5,
    author: "Ada",
    date: "2026-11-08",
    time: "Nov 8",
    text: "Cut search latency in half.",
  },
  {
    id: 6,
    author: "Grace",
    date: "2026-11-07",
    time: "Nov 7",
    text: "Added keyboard shortcuts to the editor.",
  },
  {
    id: 7,
    author: "Linus",
    date: "2026-11-06",
    time: "Nov 6",
    text: "Cleaned up the old billing code.",
  },
  {
    id: 8,
    author: "Margaret",
    date: "2026-11-05",
    time: "Nov 5",
    text: "Ran the accessibility review.",
  },
  {
    id: 9,
    author: "Ada",
    date: "2026-11-04",
    time: "Nov 4",
    text: "Started the mobile layout.",
  },
]

const pageSize = 3

const log = useLog()
const count = ref(pageSize)
const busy = ref(false)
const shown = computed(() => updates.slice(0, count.value))

function loadMore() {
  busy.value = true
  setTimeout(() => {
    count.value += pageSize
    busy.value = false
    log(`Loaded ${pageSize} more updates`)
  }, 600)
}
</script>

<template>
  <div data-slot="stack">
    <div data-slot="controls">
      <button
        type="button"
        :disabled="busy || count >= updates.length"
        @click="loadMore"
      >
        {{ busy ? "Loading…" : "Load More" }}
      </button>
    </div>
    <Timeline feed :busy="busy" aria-label="Team updates">
      <TimelineItem v-for="update in shown" :key="update.id">
        <TimelineMarker />
        <TimelineConnector />
        <TimelineTitle>{{ update.author }}</TimelineTitle>
        <TimelineTime :datetime="update.date">{{ update.time }}</TimelineTime>
        <TimelineDescription>{{ update.text }}</TimelineDescription>
      </TimelineItem>
    </Timeline>
  </div>
</template>