vue-event-timeline

vue-event-timeline

Легковесный и кастомизируемый компонент таймлайна (Gantt/scheduler) для Vue 3 + TypeScript.

Демо (Playground)

🚀 Онлайн-демонстрация: https://hrant1997.github.io/vue-event-timeline/

В демо доступны: все опции компонента, переключение темы, пикеры CSS-переменных, локаль ru/en и часовой пояс.

Собрать и запустить демо локально:

npm install
npm run dev               # dev-сервер playground (http://localhost:5173)
npm run build:playground  # статичная сборка демо в docs/
npm run deploy:demo       # публикация docs/ в GitHub Pages (ветка gh-pages)

После включения GitHub Pages (Settings → Pages → Source: gh-pages) демо публикуется по адресу https://<user>.github.io/vue-event-timeline/.

Установка

npm install vue-event-timeline dayjs @vueuse/core

Peer-зависимости: vue ^3.3, dayjs ^1.11, @vueuse/core >=10.

Подключите стили один раз (в main.ts или через CSS-импорт):

import 'vue-event-timeline/style.css'
// (старый путь 'vue-event-timeline/dist/style.css' также поддерживается)

Использование

<script setup lang="ts">
import { ref } from 'vue'
import dayjs from 'dayjs'
import { EventTimeline, type TimelineEvent, type TimelineResource } from 'vue-event-timeline'

const resources = ref<TimelineResource[]>([
  { id: 1, title: 'Автобус №12' },
  { id: 2, title: 'Автобус №7' },
])

const events = ref<TimelineEvent[]>([
  {
    id: 'e1',
    resourceId: 1,
    start: dayjs().startOf('hour'),
    end: dayjs().add(90, 'minute'),
    title: 'Рейс А',
    color: '#3b82f6',
  },
])

function handleCreate(payload: { event: Omit<TimelineEvent, 'id'> }) {
  // создать событие на бэке, затем добавить в events с id
}
</script>

<template>
  <EventTimeline
    :events="events"
    :resources="resources"
    :options="{ minCellMinutes: 15, canCreate: true, showCurrentTime: true }"
    @create="handleCreate"
  />
</template>

Props

options: TimelineOptions

События (emits)

Слоты

Часовой пояс

Библиотека работает в поясе, который вы установите явно:

import { setLibraryTimezone } from 'vue-event-timeline'

setLibraryTimezone('Asia/Yerevan') // null — сброс на локальный пояс системы

localStorage библиотека не читает и не пишет — единственный источник пояса — ваш код.

Публичный API

Экспортируются: компонент EventTimeline, типы TimelineEvent, TimelineResource, TimelineOptions, TimelineSelection, TimelineEmits, все payload-типы, RulerMark, а также setLibraryTimezone / getLibraryTimezone.

Разработка

npm install
npm run build   # vite build + dts

Темизация (CSS переменные)

Все цвета и размеры компонента вынесены в CSS custom properties, объявленные на корневом элементе .tl-root (цвета карточек событий — на .tl-event). Их можно переопределять извне без сборки библиотеки — достаточно задать переменные на любом родительском контейнере или на :root.

Light / Dark

Тёмная тема включается автоматически атрибутом data-theme="dark" на <html> (перебивает light-значения):

<html data-theme="dark">

Полный список переменных

Пример переопределения извне:

/* вся страница */
:root {
  --border-color: #e5e7eb;
  --ra-aside-bg: #fafafa;
}

/* только внутри конкретного контейнера */
.my-scope {
  --plus-icon-color: rebeccapurple;
  --tl-event-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

SCSS-переменные (при сборке из исходников)

В <style lang="scss"> компонентов каждая CSS-переменная порождена из SCSS-переменной с !default ($border-color, $row-height, $event-shadow и т.д. — см. начало style-блоков Timeline.vue и TimelineEvent.vue). Если вы собираете библиотеку из исходников, значения по умолчанию можно переопределить до импорта стилей:

// ваш overrides.scss, импортируется ДО стилей компонента
$border-color: #e5e7eb;
$plus-icon-color: rebeccapurple;
@use 'vue-event-timeline/src/components/Timeline.vue'; // или ваши локальные правки

Для потребителя npm-пакета достаточно CSS custom properties из таблицы выше — они работают без пересборки.

Playground: настройка темы и цветов из UI

В демо-стенде (npm run dev) панель настроек содержит все опции компонента плюс секцию «Тема и цвета»:

• Поведение / Внешний вид / Время и зум / Локаль и пояс — все поля TimelineOptions (canCreate, canEdit, canDelete, allowOverlap, showCurrentTime, showGrid, minCellMinutes, minDurationMinutes, initialPxPerMin, locale, timezone), высота строки и состояние loading;
• Тёмная тема — переключатель устанавливает <html data-theme="dark">, таймлайн мгновенно перекрашивается в dark-дефолты;
• Цветовые пикеры для каждой CSS-переменной из таблицы выше (--border-color, --ra-text, --hover-*, --plus-*, --tl-event-* и т.д.) — правки применяются живьём через inline-стили и <style>-оверрайд на .tl-root, без перезагрузки;
• Сброс цветов — возвращает все токены к дефолтам текущей темы; «Сбросить» в шапке панели очищает и настройки, и тему.

Экспериментируя с пикерами, вы получаете готовый CSS-блок для вашего проекта: просто скопируйте переопределённые переменные в :root { … } или контейнер таймлайна (см. пример выше).

Лицензия

MIT