[{"data":1,"prerenderedAt":376},["ShallowReactive",2],{"docs:\u002Fdocs\u002Fcomponents\u002Fdescription-list":3,"component-meta:UiDescriptionList":283},{"id":4,"title":5,"body":6,"component":113,"dependsOn":271,"description":272,"emitDescriptions":273,"extension":274,"meta":275,"navigation":276,"order":277,"path":278,"seo":279,"status":280,"stem":281,"__hash__":282},"docs\u002Fdocs\u002Fcomponents\u002Fdescription-list.md","DescriptionList",{"type":7,"value":8,"toc":263},"minimark",[9,18,23,28,45,58,65,69,73,92,163,178,182,185,189,202,206,228,232,245,259],[10,11,12,13,17],"p",{},"Картка клієнта, деталі угоди, підсумок замовлення — усе, що в макеті\nвиглядає як два стовпчики тексту, а в розмітці має бути ",[14,15,16],"code",{},"\u003Cdl>",".",[19,20],"component-preview",{"name":21,"stage":22},"description-list-basic","min-h-72",[24,25,27],"h2",{"id":26},"дві-колонки-пар-а-не-назва-плюс-значення","Дві колонки пар, а не назва плюс значення",[10,29,30,33,34,36,37,40,41,44],{},[14,31,32],{},"grid-cols-2"," просто на ",[14,35,16],{}," дає не те, чого від нього чекають: у першу\nколонку йдуть усі ",[14,38,39],{},"\u003Cdt>",", у другу — всі ",[14,42,43],{},"\u003Cdd>",". Це inline-розкладка однієї\nколонки пар, а не дві колонки.",[10,46,47,48,51,52,54,55,57],{},"Дві колонки ПАР вимагають, щоб кожна пара була обгорнута у ",[14,49,50],{},"\u003Cdiv>"," — усередині\n",[14,53,16],{}," це легально з HTML5 — а сітка стояла на самому ",[14,56,16],{},". Компонент так і\nробить; помітити різницю на око майже неможливо, тому вона зафіксована тут.",[10,59,60,61,64],{},"Поле з ",[14,62,63],{},"wide: true"," займає обидві колонки: адреса чи коментар не мають\nламати ритм решти.",[19,66],{"name":67,"stage":68},"description-list-inline","min-h-56",[24,70,72],{"id":71},"значення-складніші-за-текст","Значення складніші за текст",[10,74,75,76,79,80,83,84,91],{},"Статус — це чип, менеджер — посилання, сума — моноширинне число. Для цього\nє слот ",[14,77,78],{},"value-\u003Ckey>",", названий за ключем поля, як ",[14,81,82],{},"cell-*"," у\n",[85,86,88],"a",{"href":87},"\u002Fdocs\u002Fcomponents\u002Ftable",[14,89,90],{},"UiTable",":",[93,94,99],"pre",{"className":95,"code":96,"language":97,"meta":98,"style":98},"language-vue shiki shiki-themes github-light github-dark","\u003CUiDescriptionList :items=\"items\">\n  \u003Ctemplate #value-status>\n    \u003CUiChip tone=\"success\" dot>Активний\u003C\u002FUiChip>\n  \u003C\u002Ftemplate>\n\u003C\u002FUiDescriptionList>\n","vue","",[14,100,101,135,141,147,153],{"__ignoreMap":98},[102,103,106,110,114,117,121,124,128,130,132],"span",{"class":104,"line":105},"line",1,[102,107,109],{"class":108},"sVt8B","\u003C",[102,111,113],{"class":112},"s9eBZ","UiDescriptionList",[102,115,116],{"class":108}," :",[102,118,120],{"class":119},"sScJk","items",[102,122,123],{"class":108},"=",[102,125,127],{"class":126},"sZZnC","\"",[102,129,120],{"class":108},[102,131,127],{"class":126},[102,133,134],{"class":108},">\n",[102,136,138],{"class":104,"line":137},2,[102,139,140],{"class":108},"  \u003Ctemplate #value-status>\n",[102,142,144],{"class":104,"line":143},3,[102,145,146],{"class":108},"    \u003CUiChip tone=\"success\" dot>Активний\u003C\u002FUiChip>\n",[102,148,150],{"class":104,"line":149},4,[102,151,152],{"class":108},"  \u003C\u002Ftemplate>\n",[102,154,156,159,161],{"class":104,"line":155},5,[102,157,158],{"class":108},"\u003C\u002F",[102,160,113],{"class":112},[102,162,134],{"class":108},[10,164,165,166,169,170,173,174,177],{},"Порожні значення (",[14,167,168],{},"null",", ",[14,171,172],{},"undefined",", порожній рядок) друкуються як\n",[14,175,176],{},"emptyText"," — типово тире. Порожня клітинка без символа читається як\nнедомальований інтерфейс, а не як «даних немає».",[24,179,181],{"id":180},"api","API",[183,184],"component-api",{},[24,186,188],{"id":187},"коли-використовувати","Коли використовувати",[190,191,192,196,199],"ul",{},[193,194,195],"li",{},"Картка запису: реквізити, контакти, метадані.",[193,197,198],{},"Панель деталей збоку від таблиці.",[193,200,201],{},"Підсумок форми перед підтвердженням.",[24,203,205],{"id":204},"коли-не-використовувати","Коли НЕ використовувати",[190,207,208,216,225],{},[193,209,210,211,215],{},"Для однорідних рядків з однаковими полями — це таблиця\n(",[85,212,213],{"href":87},[14,214,90],{},"), і сортування там теж знадобиться.",[193,217,218,219,17],{},"Для полів, які редагуються: подивіться на\n",[85,220,222],{"href":221},"\u002Fdocs\u002Fcomponents\u002Finline-edit",[14,223,224],{},"UiInlineEdit",[193,226,227],{},"Для однієї пари: абзац із жирною назвою простіший і чесніший.",[24,229,231],{"id":230},"доступність","Доступність",[10,233,234,235,169,237,169,239,241,242,244],{},"Розмітка — справжні ",[14,236,16],{},[14,238,39],{},[14,240,43],{},". Скрінрідери оголошують такий\nсписок як «список описів» і дозволяють переходити між парами; набір\n",[14,243,50],{},"ів із класами цього не дає.",[10,246,247,248,250,251,254,255,258],{},"Обгортка кожної пари у ",[14,249,50],{}," семантику не ламає: HTML5 явно дозволяє\nгрупувати ",[14,252,253],{},"dt","\u002F",[14,256,257],{},"dd"," таким чином.",[260,261,262],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":98,"searchDepth":137,"depth":137,"links":264},[265,266,267,268,269,270],{"id":26,"depth":137,"text":27},{"id":71,"depth":137,"text":72},{"id":180,"depth":137,"text":181},{"id":187,"depth":137,"text":188},{"id":204,"depth":137,"text":205},{"id":230,"depth":137,"text":231},[],"Пари «назва — значення» для картки запису, з довільним рендером кожного значення.",{},"md",{},true,56,"\u002Fdocs\u002Fcomponents\u002Fdescription-list",{"title":5,"description":272},"stable","docs\u002Fcomponents\u002Fdescription-list","hITomMpD0AtyGzQc5d9jjHMX7XEY3DIwMBwCJ1a3W_Y",{"mode":284,"prefetch":285,"preload":285,"filePath":286,"declarationPath":287,"pascalName":113,"kebabName":288,"chunkName":289,"priority":105,"_scanned":276,"meta":290},"all",false,"app\u002Fcomponents\u002Fui\u002FUiDescriptionList.vue","C:\u002Fproject-DS\u002FtatetUI\u002Fapp\u002Fcomponents\u002Fui\u002FUiDescriptionList.vue","ui-description-list","components\u002Fui-description-list",{"type":105,"props":291,"slots":367,"events":373,"exposed":374,"hash":375},[292,330,339,348,357,361],{"name":120,"global":285,"description":293,"tags":294,"required":276,"type":295,"schema":296},"Пари «назва — значення» у порядку показу.",[],"DescriptionItem[]",{"kind":297,"type":295,"schema":298},"array",{"0":299},{"kind":300,"type":301,"schema":302},"object","DescriptionItem",{"key":303,"term":308,"value":312,"wide":321},{"name":304,"global":285,"description":305,"tags":306,"required":276,"type":307,"schema":307},"key","Ключ поля. Він же — суфікс слота `value-\u003Ckey>`.",[],"string",{"name":309,"global":285,"description":310,"tags":311,"required":276,"type":307,"schema":307},"term","Назва поля — вміст `\u003Cdt>`.",[],{"name":313,"global":285,"description":314,"tags":315,"required":285,"type":316,"schema":317},"value","Готове значення. Складніший вміст — через слот `value-\u003Ckey>`.",[],"string | number",{"kind":318,"type":316,"schema":319},"enum",{"0":307,"1":320},"number",{"name":322,"global":285,"description":323,"tags":324,"required":285,"type":325,"schema":326},"wide","Значення займає обидві колонки: адреса, коментар, довгий опис.",[],"boolean",{"kind":318,"type":325,"schema":327},{"0":328,"1":329},"false","true",{"name":331,"global":285,"default":332,"description":333,"tags":334,"required":285,"type":335,"schema":336},"layout","\"stacked\"","`stacked` — назва над значенням; `inline` — назва ліворуч, значення\r\nправоруч. На мобільному `inline` лишається inline: саме заради цього\r\nвигляду пару «назва \u002F значення» й не роблять таблицею.",[],"\"stacked\" | \"inline\"",{"kind":318,"type":335,"schema":337},{"0":332,"1":338},"\"inline\"",{"name":340,"global":285,"default":341,"description":342,"tags":343,"required":285,"type":344,"schema":345},"columns","2","Скільки колонок ПАР на десктопі. Нижче `md` завжди одна.",[],"1 | 2",{"kind":318,"type":344,"schema":346},{"0":347,"1":341},"1",{"name":349,"global":285,"default":350,"description":351,"tags":352,"required":285,"type":353,"schema":354},"size","\"md\"","Щільність рядків.",[],"\"sm\" | \"md\"",{"kind":318,"type":353,"schema":355},{"0":356,"1":350},"\"sm\"",{"name":176,"global":285,"default":358,"description":359,"tags":360,"required":285,"type":307,"schema":307},"\"—\"","Що друкувати замість порожнього значення.",[],{"name":362,"global":285,"default":328,"description":363,"tags":364,"required":285,"type":325,"schema":365},"divided","Лінія-роздільник між рядками.",[],{"kind":318,"type":325,"schema":366},{"0":328,"1":329},[368],{"name":369,"type":370,"description":371,"tags":372,"schema":370},"empty","any","Показується замість списку, коли `items` порожній.",[],[],[],"5ae8ShK5qMbnJ4xSi9drjxcL8kbJajvih5REKtiv0I8",1788072639720]