GrTimeline

<script setup lang="ts">
import { GrTimeline, GrTimelineItem } from '@feugene/granularity'
</script>

<template>
  <div class="max-w-md">
    <GrTimeline>
      <GrTimelineItem
        time="10:24"
        datetime="2026-08-12T10:24"
        title="Заказ создан"
        description="Иванов И., через корзину"
        tone="primary"
      />
      <GrTimelineItem
        time="11:03"
        datetime="2026-08-12T11:03"
        title="Оплачен"
        description="Картой •• 4242"
        tone="success"
      />
      <GrTimelineItem
        time="14:47"
        datetime="2026-08-12T14:47"
        title="Передан в доставку"
        description="Трек-номер RU8412093"
        tone="info"
      />
      <GrTimelineItem
        time="ожидается"
        title="Вручение получателю"
        tone="neutral"
        pending
      />
    </GrTimeline>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { GrSegmented, GrTimeline, GrTimelineItem } from '@feugene/granularity'

type Layout = 'stacked' | 'time' | 'alternate' | 'horizontal'

const layout = ref<Layout>('time')

const options = [
  { value: 'stacked', label: 'Одна ось' },
  { value: 'time', label: 'Колонка времени' },
  { value: 'alternate', label: 'Чередование' },
  { value: 'horizontal', label: 'Горизонталь' },
]

const events = [
  { at: '09:15', title: 'Сборка запущена', tone: 'primary' as const },
  { at: '09:22', title: 'Тесты пройдены', tone: 'success' as const },
  { at: '09:24', title: 'Задеплоено на stage', tone: 'info' as const },
  { at: '09:40', title: 'Ждём approve', tone: 'warning' as const, pending: true },
]
</script>

<template>
  <div class="grid gap-5">
    <GrSegmented v-model="layout" :options="options" size="sm" />

    <GrTimeline
      :items="events"
      item-key="at"
      :layout="layout === 'horizontal' ? 'stacked' : layout"
      :orientation="layout === 'horizontal' ? 'horizontal' : 'vertical'"
    >
      <template #item="{ item }">
        <GrTimelineItem
          :time="item.at"
          :title="item.title"
          :tone="item.tone"
          :pending="item.pending"
        />
      </template>
    </GrTimeline>
  </div>
</template>

<script setup lang="ts">
import { GrBadge, GrTimeline, GrTimelineItem } from '@feugene/granularity'

interface AuditEvent {
  id: number
  day: string
  at: string
  actor: string
  action: string
  tone: 'neutral' | 'success' | 'warning' | 'danger'
}

const events: AuditEvent[] = [
  { id: 1, day: '12 августа', at: '18:02', actor: 'Петрова А.', action: 'Изменила права роли «Менеджер»', tone: 'warning' },
  { id: 2, day: '12 августа', at: '11:41', actor: 'Иванов И.', action: 'Пригласил пользователя', tone: 'success' },
  { id: 3, day: '11 августа', at: '20:15', actor: 'Система', action: 'Ротация ключей API', tone: 'neutral' },
  { id: 4, day: '11 августа', at: '09:03', actor: 'Сидоров П.', action: 'Удалил проект «Архив 2024»', tone: 'danger' },
]
</script>

<template>
  <div class="max-w-lg">
    <GrTimeline :items="events" item-key="id" group-by="day" density="compact">
      <template #group="{ group, items }">
        {{ group }} · {{ items.length }}
      </template>

      <template #item="{ item }">
        <GrTimelineItem :time="item.at" :tone="item.tone">
          <template #title>
            {{ item.action }}
          </template>
          <template #description>
            {{ item.actor }}
          </template>
        </GrTimelineItem>
      </template>
    </GrTimeline>

    <p class="mt-4 text-[length:var(--gr-text-xs)] text-[var(--gr-muted-fg)]">
      Порядок задаёт приложение: <GrBadge size="xs">groupBy</GrBadge> только режет набор на группы и не сортирует его.
    </p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import { GrSegmented, GrTimeline, GrTimelineItem } from '@feugene/granularity'

/**
 * Ширина контейнера, а не окна: сжатие считается по доступному месту, поэтому
 * увидеть его можно не трогая размер браузера.
 *
 * Заголовки намеренно длинные и с `truncate`: пока трек ленты держал минимум по
 * содержимому, усечение не срабатывало — усекать было нечего, колонка раздавалась
 * под текст и выносила строку за край.
 */
const width = ref('260')
const widths = [
  { value: '260', label: '260px' },
  { value: '320', label: '320px' },
  { value: '480', label: '480px' },
]

const events = [
  { id: 1, at: '10:24', title: 'Списание за подписку «Расширенный доступ» на месяц', tone: 'neutral' as const },
  { id: 2, at: '11:02', title: 'Пополнение с карты •• 4417 через платёжный шлюз', tone: 'success' as const },
  { id: 3, at: '14:47', title: 'Возврат по отменённой операции от 11 августа', tone: 'warning' as const },
]
</script>

<template>
  <div class="grid gap-4">
    <GrSegmented v-model="width" :options="widths" size="sm" class="justify-self-start" />

    <div
      data-demo-narrow-box
      class="rounded-[var(--gr-radius-md)] border border-dashed border-[var(--gr-brd)] p-3"
      :style="{ width: `${width}px`, maxWidth: '100%' }"
    >
      <GrTimeline layout="time" density="compact">
        <GrTimelineItem
          v-for="event in events"
          :key="event.id"
          :time="event.at"
          :tone="event.tone"
        >
          <template #title>
            <span class="block truncate">{{ event.title }}</span>
          </template>
        </GrTimelineItem>
      </GrTimeline>
    </div>
  </div>
</template>