Timeline
Стрічка активності запису — дзвінки, нотатки, зміни статусу — з машинним часом і смисловими крапками.
Історія угоди, стрічка подій замовлення, журнал змін тікета. Компонент відповідає за розкладку й семантику часу; що саме сталося — вирішує споживач.
Історія угоди
Угоду виграно
Підписано договір на ₴420 000, термін — 12 місяців.
Надіслано комерційну пропозицію
Версія 3 — з урахуванням знижки за річну оплату.
Дзвінок, 14 хвилин
Обговорили міграцію даних і терміни впровадження.
Ліда створено
Час мусить бути детермінованим
Сторінки цього сайту прередеряться в Node, а гідратуються в браузері. Якщо
дозволити Intl узяти часовий пояс процесу, сервер надрукує одну годину,
клієнт — іншу, і Vue поскаржиться на розсинхрон гідрації на кожній
події. Тому timeZone — явний props із типовим Europe/Kyiv.
З тієї ж причини серед значень dateFormat немає відносного часу
(«2 години тому»): він не може збігтися між сервером і клієнтом навіть
теоретично. Якщо відносний підпис потрібен, порахуйте його на клієнті й
передайте готовим у item.time — він перекриває форматування datetime.
Поле datetime при цьому лишається потрібним: воно йде в атрибут
<time datetime>, і саме звідти машини дізнаються справжній момент.
Конектор
Статус → Оплачено
Рахунок надіслано
Не вдалося списати кошти
Замовлення створено
Лінія між крапками малюється окремим сегментом на кожній події, крім останньої. Одна наскрізна лінія на контейнері виглядає простіше, але звисає нижче останньої крапки щоразу, коли остання подія коротша за попередні — а в стрічці активності остання подія зазвичай і є найкоротшою.
Положення крапки, відступ і координата лінії беруться з однієї константи
на щільність. Розвести їх по різних місцях означає розсинхронізувати
крапку з лінією на пів пікселя при зміні density — і це видно.
API
Props
| Назва | Тип | Типово | Опис |
|---|---|---|---|
items* | TimelineItem[] | — | Події в порядку показу. |
as | olul | "ol" | Тег кореня. `ol` — хронологія, `ul` — набір подій без порядку. |
density | smmd | "md" | Щільність. `sm` для довгих стрічок. |
dateFormat | datetimedatetime | "datetime" | Що саме друкувати з `datetime`. |
timeZone | string | "Europe/Kyiv" | Часовий пояс форматування — ЯВНИЙ навмисно. Сторінки прередеряться в Node, а гідратуються в браузері. Без фіксованого поясу `Intl` бере пояс процесу, і сервер із клієнтом друкують різний час — гідратаційний розсинхрон на кожній події. |
locale | string | "uk-UA" | Локаль форматування дати. |
emptyText | string | "Подій немає" | Текст, коли подій немає. |
connector | boolean | true | Лінія-конектор між крапками. |
Слоти
| Назва | Опис |
|---|---|
item | Повний рендер однієї події замість заголовка й опису. |
dot | Вміст маркера: іконка замість крапки. |
empty | Показується замість `emptyText`, коли подій немає. |
Коли використовувати
- Історія запису в CRM: що відбувалося з угодою, клієнтом, тікетом.
- Журнал змін: хто і коли змінив статус.
- Стрічка доставки замовлення.
Коли НЕ використовувати
- Для покрокового процесу з поточним кроком — це
UiStepper: там кроки попереду ще не сталися. - Для сотень подій без віртуалізації: розгляньте
UiVirtualListяк обгортку. - Для однорідних записів із полями, які треба сортувати — це таблиця.
Доступність
Корінь — <ol> (або <ul> через as), кожна подія — <li>. Хронологія
за замовчуванням упорядкована, і скрінрідер оголошує «список із N
елементів» разом із номером поточного.
Крапка декоративна й має aria-hidden: колір несе ту саму інформацію, що
й текст поруч, і дублювати її голосом немає сенсу.
Час обгорнутий у <time :datetime>, тож видимий скорочений підпис не
заважає машинам прочитати повний момент.