[{"data":1,"prerenderedAt":531},["ShallowReactive",2],{"docs:\u002Fdocs\u002Fcomponents\u002Ftoast":3,"component-meta:UiToaster":518},{"id":4,"title":5,"body":6,"component":260,"dependsOn":506,"description":508,"emitDescriptions":509,"extension":510,"meta":511,"navigation":69,"order":512,"path":513,"seo":514,"status":515,"stem":516,"__hash__":517},"docs\u002Fdocs\u002Fcomponents\u002Ftoast.md","Toast",{"type":7,"value":8,"toc":494},"minimark",[9,18,23,27,31,255,271,275,278,282,367,377,381,384,395,402,405,409,412,416,422,425,429,447,450,453,468,472,483,490],[10,11,12,13,17],"p",{},"Стан черги оголошено на рівні модуля, тому ",[14,15,16],"code",{},"useToast()"," — singleton: усі\nвиклики в застосунку працюють з однією чергою. Показати повідомлення можна\nзвідки завгодно, не заводячи Pinia-стор і нічого не прокидаючи через дерево.",[19,20,22],"h2",{"id":21},"приклад","Приклад",[24,25],"component-preview",{"name":26},"toast-types",[19,28,30],{"id":29},"використання","Використання",[32,33,38],"pre",{"className":34,"code":35,"language":36,"meta":37,"style":37},"language-ts shiki shiki-themes github-light github-dark","const toast = useToast()\n\ntoast.success('Зміни збережено')\ntoast.error('Не вдалося зберегти')\n\n\u002F\u002F Прибрати всі повідомлення та їхні таймери, включно з duration: 0.\ntoast.dismissAll()\n\n\u002F\u002F Кнопки дій під повідомленням: дії — дані тоста, а не слот, бо черга\n\u002F\u002F живе в composable поза шаблоном. Клік по дії сам тост не закриває —\n\u002F\u002F закривайте через dismiss(id), коли потрібно.\nconst id = toast.info('Файл завеликий', {\n  duration: 0,\n  actions: [\n    { label: 'Стиснути', onClick: () => compress() },\n    { label: 'Закрити', onClick: () => toast.dismiss(id) },\n  ],\n})\n","ts","",[14,39,40,64,71,90,105,110,117,127,132,138,144,150,174,186,192,219,243,249],{"__ignoreMap":37},[41,42,45,49,53,56,60],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"szBVR","const",[41,50,52],{"class":51},"sj4cs"," toast",[41,54,55],{"class":47}," =",[41,57,59],{"class":58},"sScJk"," useToast",[41,61,63],{"class":62},"sVt8B","()\n",[41,65,67],{"class":43,"line":66},2,[41,68,70],{"emptyLinePlaceholder":69},true,"\n",[41,72,74,77,80,83,87],{"class":43,"line":73},3,[41,75,76],{"class":62},"toast.",[41,78,79],{"class":58},"success",[41,81,82],{"class":62},"(",[41,84,86],{"class":85},"sZZnC","'Зміни збережено'",[41,88,89],{"class":62},")\n",[41,91,93,95,98,100,103],{"class":43,"line":92},4,[41,94,76],{"class":62},[41,96,97],{"class":58},"error",[41,99,82],{"class":62},[41,101,102],{"class":85},"'Не вдалося зберегти'",[41,104,89],{"class":62},[41,106,108],{"class":43,"line":107},5,[41,109,70],{"emptyLinePlaceholder":69},[41,111,113],{"class":43,"line":112},6,[41,114,116],{"class":115},"sJ8bj","\u002F\u002F Прибрати всі повідомлення та їхні таймери, включно з duration: 0.\n",[41,118,120,122,125],{"class":43,"line":119},7,[41,121,76],{"class":62},[41,123,124],{"class":58},"dismissAll",[41,126,63],{"class":62},[41,128,130],{"class":43,"line":129},8,[41,131,70],{"emptyLinePlaceholder":69},[41,133,135],{"class":43,"line":134},9,[41,136,137],{"class":115},"\u002F\u002F Кнопки дій під повідомленням: дії — дані тоста, а не слот, бо черга\n",[41,139,141],{"class":43,"line":140},10,[41,142,143],{"class":115},"\u002F\u002F живе в composable поза шаблоном. Клік по дії сам тост не закриває —\n",[41,145,147],{"class":43,"line":146},11,[41,148,149],{"class":115},"\u002F\u002F закривайте через dismiss(id), коли потрібно.\n",[41,151,153,155,158,160,163,166,168,171],{"class":43,"line":152},12,[41,154,48],{"class":47},[41,156,157],{"class":51}," id",[41,159,55],{"class":47},[41,161,162],{"class":62}," toast.",[41,164,165],{"class":58},"info",[41,167,82],{"class":62},[41,169,170],{"class":85},"'Файл завеликий'",[41,172,173],{"class":62},", {\n",[41,175,177,180,183],{"class":43,"line":176},13,[41,178,179],{"class":62},"  duration: ",[41,181,182],{"class":51},"0",[41,184,185],{"class":62},",\n",[41,187,189],{"class":43,"line":188},14,[41,190,191],{"class":62},"  actions: [\n",[41,193,195,198,201,204,207,210,213,216],{"class":43,"line":194},15,[41,196,197],{"class":62},"    { label: ",[41,199,200],{"class":85},"'Стиснути'",[41,202,203],{"class":62},", ",[41,205,206],{"class":58},"onClick",[41,208,209],{"class":62},": () ",[41,211,212],{"class":47},"=>",[41,214,215],{"class":58}," compress",[41,217,218],{"class":62},"() },\n",[41,220,222,224,227,229,231,233,235,237,240],{"class":43,"line":221},16,[41,223,197],{"class":62},[41,225,226],{"class":85},"'Закрити'",[41,228,203],{"class":62},[41,230,206],{"class":58},[41,232,209],{"class":62},[41,234,212],{"class":47},[41,236,162],{"class":62},[41,238,239],{"class":58},"dismiss",[41,241,242],{"class":62},"(id) },\n",[41,244,246],{"class":43,"line":245},17,[41,247,248],{"class":62},"  ],\n",[41,250,252],{"class":43,"line":251},18,[41,253,254],{"class":62},"})\n",[10,256,257,258,261,262,266,267,270],{},"Контейнер ",[14,259,260],{},"UiToaster"," монтується ",[263,264,265],"strong",{},"рівно один раз",", зазвичай в ",[14,268,269],{},"app.vue",".",[19,272,274],{"id":273},"api","API",[276,277],"component-api",{},[279,280,16],"h3",{"id":281},"usetoast",[283,284,285,298],"table",{},[286,287,288],"thead",{},[289,290,291,295],"tr",{},[292,293,294],"th",{},"Метод",[292,296,297],{},"Призначення",[299,300,301,327,337,347,357],"tbody",{},[289,302,303,309],{},[304,305,306],"td",{},[14,307,308],{},"show(options): number",[304,310,311,312,203,315,203,318,203,321,203,324,270],{},"Додає повідомлення й повертає його id. Опції: ",[14,313,314],{},"message",[14,316,317],{},"title",[14,319,320],{},"type",[14,322,323],{},"duration",[14,325,326],{},"actions",[289,328,329,334],{},[304,330,331],{},[14,332,333],{},"success \u002F info \u002F warning \u002F error(message, options?): number",[304,335,336],{},"Скорочені виклики для відповідного статусу.",[289,338,339,344],{},[304,340,341],{},[14,342,343],{},"dismiss(id): void",[304,345,346],{},"Закриває одне повідомлення та скасовує його таймер.",[289,348,349,354],{},[304,350,351],{},[14,352,353],{},"dismissAll(): void",[304,355,356],{},"Очищає всю чергу й усі таймери. Безпечний для порожньої черги.",[289,358,359,364],{},[304,360,361],{},[14,362,363],{},"pause(id) \u002F resume(id): void",[304,365,366],{},"Призупиняє або відновлює автозакриття; після відновлення лишається щонайменше секунда.",[10,368,369,372,373,376],{},[14,370,371],{},"toasts"," — спільний реактивний список у порядку надходження. Дії не\nзакривають Toast автоматично; ",[14,374,375],{},"duration: 0"," залишає його до ручного закриття.",[19,378,380],{"id":379},"черга-та-мобільні-пристрої","Черга та мобільні пристрої",[10,382,383],{},"На екранах від 768 px Toast з’являються зверху праворуч, до 400 px\nзавширшки. На телефоні — знизу, із полями та відступом від системної панелі.\nВисота області обмежена: до 70% екрана на комп’ютері й 50% на мобільному.\nДовга черга прокручується, а панель керування лишається доступною.",[10,385,386,387,390,391,394],{},"Від ",[263,388,389],{},"трьох повідомлень"," з’являються лічильник і ",[263,392,393],{},"«Очистити всі»",".\nКнопка прибирає також постійні повідомлення. Нові Toast додаються в кінець;\nсписок слідує за ними лише тоді, коли ви вже перебуваєте біля кінця.",[10,396,397,398,401],{},"Свайп ",[263,399,400],{},"ліворуч або праворуч на 48 px"," закриває окрему картку. Короткий\nабо скасований жест повертає її на місце. Вертикальний рух прокручує\nсписок. Натискання кнопок дій не починає свайп.",[10,403,404],{},"Поки курсор, фокус або дотик перебувають у черзі, автозакриття всіх її\nповідомлень призупинене, включно з новими. Відлік продовжиться після\nзавершення всіх взаємодій.",[19,406,408],{"id":407},"коли-використовувати","Коли використовувати",[10,410,411],{},"Для результату дії, який не вимагає реакції: збережено, надіслано, скопійовано.",[19,413,415],{"id":414},"коли-не-використовувати","Коли НЕ використовувати",[10,417,418,419,270],{},"Не повідомляйте тостом про те, що потребує рішення. Тост зникає — питання\nлишається. Для цього є ",[14,420,421],{},"useConfirm()",[10,423,424],{},"Не дублюйте тостом помилку поля форми: її місце під самим полем, де видно,\nщо виправляти.",[19,426,428],{"id":427},"доступність","Доступність",[10,430,431,432,435,436,439,440,435,443,446],{},"Помилки отримують ",[14,433,434],{},"role=\"alert\""," і ",[14,437,438],{},"aria-live=\"assertive\""," — їх скрінрідер\nзачитає одразу. Решта — ",[14,441,442],{},"role=\"status\"",[14,444,445],{},"polite",", щоб не перебивати те,\nщо користувач читає.",[10,448,449],{},"Поява Toast не перехоплює фокус. Кнопки доступні з клавіатури й мають\nвидимий індикатор фокуса; мобільні цілі натискання — щонайменше 44×44 px.\nСистемне налаштування зменшеного руху прибирає анімації переміщення.",[10,451,452],{},"Тривалість різна за типом: помилка тримається 6 секунд, попередження 5,\nрешта 3. Помилку треба встигнути прочитати, а не побачити спалах на місці,\nде щойно щось пішло не так.",[10,454,455,456,459,460,463,464,467],{},"Контейнер має ",[14,457,458],{},"data-overlay-ignore"," — маркер, який поважає ",[14,461,462],{},"useFocusTrap",".\nБез нього тости, що з'явилися під відкритою модалкою, отримали б ",[14,465,466],{},"inert","\nразом з рештою фону, і закрити їх було б неможливо.",[19,469,471],{"id":470},"що-виправлено-проти-вихідної-версії","Що виправлено проти вихідної версії",[10,473,474,475,478,479,482],{},"Таймер автозакриття тепер скасовується при ручному. Раніше він лишався\nжити: користувач закривав тост хрестиком, а через секунду спрацьовував\nвідкладений ",[14,476,477],{},"splice"," і зносив ",[263,480,481],{},"інший"," тост, який на той час опинився на\nйого місці в масиві.",[10,484,485,486,489],{},"Тони беруть токени статусів. Вихідна версія малювала попередження білим по\n",[14,487,488],{},"bg-amber-500"," — контраст ≈1.9:1, тобто найгірше читабельним було саме те\nповідомлення, яке найважливіше прочитати.",[491,492,493],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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":37,"searchDepth":66,"depth":66,"links":495},[496,497,498,501,502,503,504,505],{"id":21,"depth":66,"text":22},{"id":29,"depth":66,"text":30},{"id":273,"depth":66,"text":274,"children":499},[500],{"id":281,"depth":73,"text":16},{"id":379,"depth":66,"text":380},{"id":407,"depth":66,"text":408},{"id":414,"depth":66,"text":415},{"id":427,"depth":66,"text":428},{"id":470,"depth":66,"text":471},[507],"app\u002Fcomposables\u002FuseToast.ts","Черга сповіщень, доступна з будь-якого місця без прокидання пропсів.",{},"md",{},20,"\u002Fdocs\u002Fcomponents\u002Ftoast",{"title":5,"description":508},"stable","docs\u002Fcomponents\u002Ftoast","88Kc8ez_dC80zrgoPe7-PiMOCLY1OWy42Ald9ZOmNX8",{"mode":519,"prefetch":520,"preload":520,"filePath":521,"declarationPath":522,"pascalName":260,"kebabName":523,"chunkName":524,"priority":44,"_scanned":69,"meta":525},"all",false,"app\u002Fcomponents\u002Fui\u002FUiToaster.vue","\u002Fapp\u002Fapp\u002Fcomponents\u002Fui\u002FUiToaster.vue","ui-toaster","components\u002Fui-toaster",{"type":44,"props":526,"slots":527,"events":528,"exposed":529,"hash":530},[],[],[],[],"N-vvA-R-vUW4MljV7JXhAg6jSuat0a66QvOkLsb6nl4",1789660506386]