[{"data":1,"prerenderedAt":385},["ShallowReactive",2],{"docs:\u002Fdocs\u002Fcomponents\u002Ftimeline":3,"component-meta:UiTimeline":204},{"id":4,"title":5,"body":6,"component":191,"dependsOn":192,"description":193,"emitDescriptions":194,"extension":195,"meta":196,"navigation":197,"order":198,"path":199,"seo":200,"status":201,"stem":202,"__hash__":203},"docs\u002Fdocs\u002Fcomponents\u002Ftimeline.md","Timeline",{"type":7,"value":8,"toc":181},"minimark",[9,13,18,23,44,62,72,76,80,83,90,94,97,101,114,118,144,148,167,174],[10,11,12],"p",{},"Історія угоди, стрічка подій замовлення, журнал змін тікета. Компонент\nвідповідає за розкладку й семантику часу; що саме сталося — вирішує\nспоживач.",[14,15],"component-preview",{"name":16,"stage":17},"timeline-basic","min-h-80",[19,20,22],"h2",{"id":21},"час-мусить-бути-детермінованим","Час мусить бути детермінованим",[10,24,25,26,30,31,35,36,39,40,43],{},"Сторінки цього сайту прередеряться в Node, а гідратуються в браузері. Якщо\nдозволити ",[27,28,29],"code",{},"Intl"," узяти часовий пояс процесу, сервер надрукує одну годину,\nклієнт — іншу, і Vue поскаржиться на розсинхрон гідрації ",[32,33,34],"strong",{},"на кожній\nподії",". Тому ",[27,37,38],{},"timeZone"," — явний props із типовим ",[27,41,42],{},"Europe\u002FKyiv",".",[10,45,46,47,50,51,54,55,58,59,43],{},"З тієї ж причини серед значень ",[27,48,49],{},"dateFormat"," ",[32,52,53],{},"немає"," відносного часу\n(«2 години тому»): він не може збігтися між сервером і клієнтом навіть\nтеоретично. Якщо відносний підпис потрібен, порахуйте його на клієнті й\nпередайте готовим у ",[27,56,57],{},"item.time"," — він перекриває форматування ",[27,60,61],{},"datetime",[10,63,64,65,67,68,71],{},"Поле ",[27,66,61],{}," при цьому лишається потрібним: воно йде в атрибут\n",[27,69,70],{},"\u003Ctime datetime>",", і саме звідти машини дізнаються справжній момент.",[19,73,75],{"id":74},"конектор","Конектор",[14,77],{"name":78,"stage":79},"timeline-compact","min-h-64",[10,81,82],{},"Лінія між крапками малюється окремим сегментом на кожній події, крім\nостанньої. Одна наскрізна лінія на контейнері виглядає простіше, але\nзвисає нижче останньої крапки щоразу, коли остання подія коротша за\nпопередні — а в стрічці активності остання подія зазвичай і є найкоротшою.",[10,84,85,86,89],{},"Положення крапки, відступ і координата лінії беруться з однієї константи\nна щільність. Розвести їх по різних місцях означає розсинхронізувати\nкрапку з лінією на пів пікселя при зміні ",[27,87,88],{},"density"," — і це видно.",[19,91,93],{"id":92},"api","API",[95,96],"component-api",{},[19,98,100],{"id":99},"коли-використовувати","Коли використовувати",[102,103,104,108,111],"ul",{},[105,106,107],"li",{},"Історія запису в CRM: що відбувалося з угодою, клієнтом, тікетом.",[105,109,110],{},"Журнал змін: хто і коли змінив статус.",[105,112,113],{},"Стрічка доставки замовлення.",[19,115,117],{"id":116},"коли-не-використовувати","Коли НЕ використовувати",[102,119,120,131,141],{},[105,121,122,123,130],{},"Для покрокового процесу з поточним кроком — це\n",[124,125,127],"a",{"href":126},"\u002Fdocs\u002Fcomponents\u002Fstepper",[27,128,129],{},"UiStepper",": там кроки попереду ще не сталися.",[105,132,133,134,140],{},"Для сотень подій без віртуалізації: розгляньте\n",[124,135,137],{"href":136},"\u002Fdocs\u002Fcomponents\u002Fvirtual-list",[27,138,139],{},"UiVirtualList"," як обгортку.",[105,142,143],{},"Для однорідних записів із полями, які треба сортувати — це таблиця.",[19,145,147],{"id":146},"доступність","Доступність",[10,149,150,151,154,155,158,159,162,163,166],{},"Корінь — ",[27,152,153],{},"\u003Col>"," (або ",[27,156,157],{},"\u003Cul>"," через ",[27,160,161],{},"as","), кожна подія — ",[27,164,165],{},"\u003Cli>",". Хронологія\nза замовчуванням упорядкована, і скрінрідер оголошує «список із N\nелементів» разом із номером поточного.",[10,168,169,170,173],{},"Крапка декоративна й має ",[27,171,172],{},"aria-hidden",": колір несе ту саму інформацію, що\nй текст поруч, і дублювати її голосом немає сенсу.",[10,175,176,177,180],{},"Час обгорнутий у ",[27,178,179],{},"\u003Ctime :datetime>",", тож видимий скорочений підпис не\nзаважає машинам прочитати повний момент.",{"title":182,"searchDepth":183,"depth":183,"links":184},"",2,[185,186,187,188,189,190],{"id":21,"depth":183,"text":22},{"id":74,"depth":183,"text":75},{"id":92,"depth":183,"text":93},{"id":99,"depth":183,"text":100},{"id":116,"depth":183,"text":117},{"id":146,"depth":183,"text":147},"UiTimeline",[],"Стрічка активності запису — дзвінки, нотатки, зміни статусу — з машинним часом і смисловими крапками.",{},"md",{},true,57,"\u002Fdocs\u002Fcomponents\u002Ftimeline",{"title":5,"description":193},"stable","docs\u002Fcomponents\u002Ftimeline","bh7wAb5NzRd_BteGhpqh8e4NgMQm4S3d_Z53HLuZulw",{"mode":205,"prefetch":206,"preload":206,"filePath":207,"declarationPath":208,"pascalName":191,"kebabName":209,"chunkName":210,"priority":211,"_scanned":197,"meta":212},"all",false,"app\u002Fcomponents\u002Fui\u002FUiTimeline.vue","C:\u002Fproject-DS\u002FtatetUI\u002Fapp\u002Fcomponents\u002Fui\u002FUiTimeline.vue","ui-timeline","components\u002Fui-timeline",1,{"type":211,"props":213,"slots":312,"events":382,"exposed":383,"hash":384},[214,264,272,280,289,293,298,303],{"name":215,"global":206,"description":216,"tags":217,"required":197,"type":218,"schema":219},"items","Події в порядку показу.",[],"TimelineItem[]",{"kind":220,"type":218,"schema":221},"array",{"0":222},{"kind":223,"type":224,"schema":225},"object","TimelineItem",{"id":226,"title":236,"description":240,"datetime":244,"time":247,"tone":251},{"name":227,"global":206,"description":228,"tags":229,"required":197,"type":230,"schema":231},"id","Стабільний ключ для `:key`.",[],"string | number",{"kind":232,"type":230,"schema":233},"enum",{"0":234,"1":235},"string","number",{"name":237,"global":206,"description":238,"tags":239,"required":197,"type":234,"schema":234},"title","Що сталося. Формулюйте як подію, а не як стан.",[],{"name":241,"global":206,"description":242,"tags":243,"required":206,"type":234,"schema":234},"description","Подробиці під заголовком.",[],{"name":61,"global":206,"description":245,"tags":246,"required":206,"type":234,"schema":234},"Машинна мітка ISO 8601 для `\u003Ctime datetime>`. Джерело і семантики, і —\r\nякщо немає `time` — видимого підпису.",[],{"name":248,"global":206,"description":249,"tags":250,"required":206,"type":234,"schema":234},"time","Готовий видимий підпис часу. Перекриває форматування `datetime`.",[],{"name":252,"global":206,"description":253,"tags":254,"required":206,"type":255,"schema":256},"tone","Смисловий колір крапки.",[],"\"accent\" | \"success\" | \"warning\" | \"danger\" | \"info\" | \"neutral\"",{"kind":232,"type":255,"schema":257},{"0":258,"1":259,"2":260,"3":261,"4":262,"5":263},"\"accent\"","\"success\"","\"warning\"","\"danger\"","\"info\"","\"neutral\"",{"name":161,"global":206,"default":265,"description":266,"tags":267,"required":206,"type":268,"schema":269},"\"ol\"","Тег кореня. `ol` — хронологія, `ul` — набір подій без порядку.",[],"\"ol\" | \"ul\"",{"kind":232,"type":268,"schema":270},{"0":265,"1":271},"\"ul\"",{"name":88,"global":206,"default":273,"description":274,"tags":275,"required":206,"type":276,"schema":277},"\"md\"","Щільність. `sm` для довгих стрічок.",[],"\"sm\" | \"md\"",{"kind":232,"type":276,"schema":278},{"0":279,"1":273},"\"sm\"",{"name":49,"global":206,"default":281,"description":282,"tags":283,"required":206,"type":284,"schema":285},"\"datetime\"","Що саме друкувати з `datetime`.",[],"\"datetime\" | \"date\" | \"time\"",{"kind":232,"type":284,"schema":286},{"0":281,"1":287,"2":288},"\"date\"","\"time\"",{"name":38,"global":206,"default":290,"description":291,"tags":292,"required":206,"type":234,"schema":234},"\"Europe\u002FKyiv\"","Часовий пояс форматування — ЯВНИЙ навмисно.\r\n\r\nСторінки прередеряться в Node, а гідратуються в браузері. Без\r\nфіксованого поясу `Intl` бере пояс процесу, і сервер із клієнтом\r\nдрукують різний час — гідратаційний розсинхрон на кожній події.",[],{"name":294,"global":206,"default":295,"description":296,"tags":297,"required":206,"type":234,"schema":234},"locale","\"uk-UA\"","Локаль форматування дати.",[],{"name":299,"global":206,"default":300,"description":301,"tags":302,"required":206,"type":234,"schema":234},"emptyText","\"Подій немає\"","Текст, коли подій немає.",[],{"name":304,"global":206,"default":305,"description":306,"tags":307,"required":206,"type":308,"schema":309},"connector","true","Лінія-конектор між крапками.",[],"boolean",{"kind":232,"type":308,"schema":310},{"0":311,"1":305},"false",[313,348,377],{"name":314,"type":315,"description":316,"tags":317,"schema":318},"item","{ item: TimelineItem; index: number; last: boolean; }","Повний рендер однієї події замість заголовка й опису.",[],{"kind":223,"type":315,"schema":319},{"item":320,"index":340,"last":343},{"name":314,"global":206,"description":182,"tags":321,"required":197,"type":224,"schema":322},[],{"kind":223,"type":224,"schema":323},{"id":324,"title":328,"description":330,"datetime":332,"time":334,"tone":336},{"name":227,"global":206,"description":228,"tags":325,"required":197,"type":230,"schema":326},[],{"kind":232,"type":230,"schema":327},{"0":234,"1":235},{"name":237,"global":206,"description":238,"tags":329,"required":197,"type":234,"schema":234},[],{"name":241,"global":206,"description":242,"tags":331,"required":206,"type":234,"schema":234},[],{"name":61,"global":206,"description":245,"tags":333,"required":206,"type":234,"schema":234},[],{"name":248,"global":206,"description":249,"tags":335,"required":206,"type":234,"schema":234},[],{"name":252,"global":206,"description":253,"tags":337,"required":206,"type":255,"schema":338},[],{"kind":232,"type":255,"schema":339},{"0":258,"1":259,"2":260,"3":261,"4":262,"5":263},{"name":341,"global":206,"description":182,"tags":342,"required":197,"type":235,"schema":235},"index",[],{"name":344,"global":206,"description":182,"tags":345,"required":197,"type":308,"schema":346},"last",[],{"kind":232,"type":308,"schema":347},{"0":311,"1":305},{"name":349,"type":350,"description":351,"tags":352,"schema":353},"dot","{ item: TimelineItem; index: number; }","Вміст маркера: іконка замість крапки.",[],{"kind":223,"type":350,"schema":354},{"item":355,"index":375},{"name":314,"global":206,"description":182,"tags":356,"required":197,"type":224,"schema":357},[],{"kind":223,"type":224,"schema":358},{"id":359,"title":363,"description":365,"datetime":367,"time":369,"tone":371},{"name":227,"global":206,"description":228,"tags":360,"required":197,"type":230,"schema":361},[],{"kind":232,"type":230,"schema":362},{"0":234,"1":235},{"name":237,"global":206,"description":238,"tags":364,"required":197,"type":234,"schema":234},[],{"name":241,"global":206,"description":242,"tags":366,"required":206,"type":234,"schema":234},[],{"name":61,"global":206,"description":245,"tags":368,"required":206,"type":234,"schema":234},[],{"name":248,"global":206,"description":249,"tags":370,"required":206,"type":234,"schema":234},[],{"name":252,"global":206,"description":253,"tags":372,"required":206,"type":255,"schema":373},[],{"kind":232,"type":255,"schema":374},{"0":258,"1":259,"2":260,"3":261,"4":262,"5":263},{"name":341,"global":206,"description":182,"tags":376,"required":197,"type":235,"schema":235},[],{"name":378,"type":379,"description":380,"tags":381,"schema":379},"empty","any","Показується замість `emptyText`, коли подій немає.",[],[],[],"PC7XiH47t1iaNcNs5m89OLS5BYTElGZMLpOaYCJPawo",1788072641287]