[{"data":1,"prerenderedAt":393},["ShallowReactive",2],{"docs:\u002Fdocs\u002Fcomponents\u002Fswipe-stack":3,"component-meta:UiSwipeStack":328},{"id":4,"title":5,"body":6,"component":69,"dependsOn":312,"description":316,"emitDescriptions":317,"extension":319,"meta":320,"navigation":321,"order":322,"path":323,"seo":324,"status":325,"stem":326,"__hash__":327},"docs\u002Fdocs\u002Fcomponents\u002Fswipe-stack.md","SwipeStack",{"type":7,"value":8,"toc":303},"minimark",[9,18,23,28,48,145,149,172,183,187,198,250,254,257,261,268,272,288,292,299],[10,11,12,13,17],"p",{},"Навігація телефона як у нативному застосунку: верхній екран (деталі)\nв'їжджає справа, нижній (список) відступає ліворуч у тінь і лишається\nзмонтованим — повернення миттєве, прокрутка й пошук на місці. Свайп\nправоруч з будь-якого місця верхнього екрана тягне його за пальцем, і під\nним видно нижній. Відпустили далі ~40% ширини чи кидком — компонент\nдоводить екран за край і шле ",[14,15,16],"code",{},"back","; кидок назад чи коротший рух повертає\nекран на місце.",[19,20,22],"h2",{"id":21},"приклад","Приклад",[24,25],"component-preview",{"name":26,"stage":27},"swipe-stack-basic","min-h-96",[10,29,30,31,34,35,37,38,40,41,43,44,47],{},"Стан тримає батько: ",[14,32,33],{},"open"," — чи відкритий верхній екран, а на ",[14,36,16],{}," він\nйого закриває. Зазвичай це роутер: ",[14,39,33],{}," — «маршрут не корінь», ",[14,42,16],{}," —\n",[14,45,46],{},"router.back()",". Тоді і системне «назад» браузера, і кнопка «Назад» у шапці\nдають ту саму анімацію.",[49,50,55],"pre",{"className":51,"code":52,"language":53,"meta":54,"style":54},"language-vue shiki shiki-themes github-light github-dark","\u003CUiSwipeStack :open=\"route.name !== 'home'\" class=\"h-full\" @back=\"router.back()\">\n  \u003Ctemplate #base>\u003CChatList \u002F>\u003C\u002Ftemplate>\n  \u003Ctemplate #page>\u003CRouterView \u002F>\u003C\u002Ftemplate>\n\u003C\u002FUiSwipeStack>\n","vue","",[14,56,57,123,129,135],{"__ignoreMap":54},[58,59,62,66,70,73,76,79,83,86,90,93,96,98,101,104,106,108,110,113,115,118,120],"span",{"class":60,"line":61},"line",1,[58,63,65],{"class":64},"sVt8B","\u003C",[58,67,69],{"class":68},"s9eBZ","UiSwipeStack",[58,71,72],{"class":64}," :",[58,74,33],{"class":75},"sScJk",[58,77,78],{"class":64},"=",[58,80,82],{"class":81},"sZZnC","\"",[58,84,85],{"class":64},"route.name ",[58,87,89],{"class":88},"szBVR","!==",[58,91,92],{"class":81}," 'home'\"",[58,94,95],{"class":75}," class",[58,97,78],{"class":64},[58,99,100],{"class":81},"\"h-full\"",[58,102,103],{"class":64}," @",[58,105,16],{"class":75},[58,107,78],{"class":64},[58,109,82],{"class":81},[58,111,112],{"class":64},"router.",[58,114,16],{"class":75},[58,116,117],{"class":64},"()",[58,119,82],{"class":81},[58,121,122],{"class":64},">\n",[58,124,126],{"class":60,"line":125},2,[58,127,128],{"class":64},"  \u003Ctemplate #base>\u003CChatList \u002F>\u003C\u002Ftemplate>\n",[58,130,132],{"class":60,"line":131},3,[58,133,134],{"class":64},"  \u003Ctemplate #page>\u003CRouterView \u002F>\u003C\u002Ftemplate>\n",[58,136,138,141,143],{"class":60,"line":137},4,[58,139,140],{"class":64},"\u003C\u002F",[58,142,69],{"class":68},[58,144,122],{"class":64},[19,146,148],{"id":147},"жест","Жест",[10,150,151,152,155,156,159,160,163,164,167,168,171],{},"Свайп не починається з полів, повзунків, полотна й елементів із\n",[14,153,154],{},"touch-action: none"," — вони самі обробляють палець; для решти є\n",[14,157,158],{},"data-no-swipe"," і проп ",[14,161,162],{},"swipe",". Області вертикальної прокрутки всередині\nверхнього екрана (",[14,165,166],{},"overflow-y-auto",") компонент сам переводить у\n",[14,169,170],{},"touch-action: pan-y pinch-zoom",": без цього кожна з них забирала б\nгоризонтальний рух собі. Горизонтальні області прокрутки (код, вкладки)\nлишаються як є — там палець прокручує вбік.",[10,173,174,175,178,179,182],{},"Власний свайп «назад» браузера (Safari на iPhone, жест Android) уже показує\nсвою анімацію: компонент це бачить (",[14,176,177],{},"hasUAVisualTransition",") і другої\nповерх неї не програє. Зі зменшеним рухом (",[14,180,181],{},"prefers-reduced-motion",") екрани\nзмінюються без зсуву, а жест лишається — його рух веде палець.",[19,184,186],{"id":185},"своя-розмітка","Своя розмітка",[10,188,189,190,193,194,197],{},"Коли нижній і верхній екрани не вкладаються в слоти (у розмітки є власні\nобгортки й обробники), логіку дає композабл ",[14,191,192],{},"useSwipeStack",": стилі обох\nекранів, затемнення, тінь і хуки для ",[14,195,196],{},"\u003CTransition>"," — без глобального CSS.",[49,199,203],{"className":200,"code":201,"language":202,"meta":54,"style":54},"language-ts shiki shiki-themes github-light github-dark","const stack = useSwipeStack({ open, pageEl, back: () => router.back() })\n\u002F\u002F \u003Cdiv :style=\"stack.underStyle.value\" :class=\"stack.underHidden.value ? 'invisible' : ''\">…\u003C\u002Fdiv>\n\u002F\u002F \u003CTransition v-bind=\"stack.transition\">\u003Cdiv v-if=\"open\" ref=\"pageEl\" :style=\"stack.pageStyle.value\">…\u003C\u002Fdiv>\u003C\u002FTransition>\n","ts",[14,204,205,239,245],{"__ignoreMap":54},[58,206,207,210,214,217,220,223,225,228,231,234,236],{"class":60,"line":61},[58,208,209],{"class":88},"const",[58,211,213],{"class":212},"sj4cs"," stack",[58,215,216],{"class":88}," =",[58,218,219],{"class":75}," useSwipeStack",[58,221,222],{"class":64},"({ open, pageEl, ",[58,224,16],{"class":75},[58,226,227],{"class":64},": () ",[58,229,230],{"class":88},"=>",[58,232,233],{"class":64}," router.",[58,235,16],{"class":75},[58,237,238],{"class":64},"() })\n",[58,240,241],{"class":60,"line":125},[58,242,244],{"class":243},"sJ8bj","\u002F\u002F \u003Cdiv :style=\"stack.underStyle.value\" :class=\"stack.underHidden.value ? 'invisible' : ''\">…\u003C\u002Fdiv>\n",[58,246,247],{"class":60,"line":131},[58,248,249],{"class":243},"\u002F\u002F \u003CTransition v-bind=\"stack.transition\">\u003Cdiv v-if=\"open\" ref=\"pageEl\" :style=\"stack.pageStyle.value\">…\u003C\u002Fdiv>\u003C\u002FTransition>\n",[19,251,253],{"id":252},"api","API",[255,256],"component-api",{},[19,258,260],{"id":259},"коли-використовувати","Коли використовувати",[10,262,263,264,267],{},"Для телефонної розкладки «список → деталі»: чати й переписка, пошта й лист,\nналаштування й підрозділ. На широкому екрані ті самі екрани зазвичай стоять\nпоруч (",[14,265,266],{},"UiResizablePanels","), і стек не потрібен.",[19,269,271],{"id":270},"коли-не-використовувати","Коли НЕ використовувати",[10,273,274,275,277,278,280,281,277,284,287],{},"Не для глибокої навігації: стек має рівно два рівні. Третій рівень (деталі\nдеталей) — ще один ",[14,276,69],{}," чи ",[14,279,192],{}," усередині верхнього\nекрана. Не для модальних дій — це ",[14,282,283],{},"UiModal",[14,285,286],{},"UiDrawer",": вони мають\nзатемнений фон, пастку фокуса й Escape.",[19,289,291],{"id":290},"доступність","Доступність",[10,293,294,295,298],{},"Нижній екран, поки на ньому стоїть верхній, позначено ",[14,296,297],{},"inert",": до нього не\nдоходять ні Tab, ні скрінрідер, а після завершення переходу він ще й\nневидимий. Свайп — додатковий шлях: у верхньому екрані має бути видима\nкнопка «Назад».",[300,301,302],"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 pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}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);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":54,"searchDepth":125,"depth":125,"links":304},[305,306,307,308,309,310,311],{"id":21,"depth":125,"text":22},{"id":147,"depth":125,"text":148},{"id":185,"depth":125,"text":186},{"id":252,"depth":125,"text":253},{"id":259,"depth":125,"text":260},{"id":270,"depth":125,"text":271},{"id":290,"depth":125,"text":291},[313,314,315],"app\u002Fcomposables\u002FuseSwipeStack.ts","app\u002Fcomposables\u002FuseReducedMotion.ts","app\u002Futils\u002Fswipe.ts","Стек двох екранів на телефоні — деталі в'їжджають поверх списку, свайп праворуч повертає назад.",{"back":318},"Свайп довів верхній екран за край — закрийте його (зазвичай крок назад у роутері).","md",{},true,64,"\u002Fdocs\u002Fcomponents\u002Fswipe-stack",{"title":5,"description":316},"stable","docs\u002Fcomponents\u002Fswipe-stack","QXlCKyT6Ighjb2j3cAtSd3oYmLbK23A2c3yBiJcZmrg",{"mode":329,"prefetch":330,"preload":330,"filePath":331,"declarationPath":332,"pascalName":69,"kebabName":333,"chunkName":334,"priority":61,"_scanned":321,"meta":335},"all",false,"app\u002Fcomponents\u002Fui\u002FUiSwipeStack.vue","\u002Fapp\u002Fapp\u002Fcomponents\u002Fui\u002FUiSwipeStack.vue","ui-swipe-stack","components\u002Fui-swipe-stack",{"type":61,"props":336,"slots":367,"events":377,"exposed":383,"hash":392},[337,343,349,353,362],{"name":338,"global":330,"default":339,"description":340,"tags":341,"required":330,"type":342,"schema":342},"parallax","28","На скільки (% ширини) нижній екран відступає під верхній.",[],"number",{"name":344,"global":330,"default":345,"description":346,"tags":347,"required":330,"type":348,"schema":348},"baseClass","\"bg-card\"","Класи нижнього екрана — тло й розкладка вмісту.",[],"string",{"name":350,"global":330,"default":345,"description":351,"tags":352,"required":330,"type":348,"schema":348},"pageClass","Класи верхнього екрана — тло й розкладка вмісту.",[],{"name":33,"global":330,"default":354,"description":355,"tags":356,"required":330,"type":357,"schema":358},"false","Верхній екран відкрито: він в'їжджає справа поверх нижнього.",[],"boolean",{"kind":359,"type":357,"schema":360},"enum",{"0":354,"1":361},"true",{"name":162,"global":330,"default":361,"description":363,"tags":364,"required":330,"type":357,"schema":365},"Свайп праворуч з будь-якого місця верхнього екрана повертає назад.\nВимкніть для екрана, що сам обробляє горизонтальні жести (полотно,\nкарта) — з таких елементів жест і так не починається.",[],{"kind":359,"type":357,"schema":366},{"0":354,"1":361},[368,373],{"name":369,"type":370,"description":371,"tags":372,"schema":370},"base","any","Нижній екран — корінь стеку (список). Лишається змонтованим під\nверхнім: повернення миттєве, прокрутка й пошук на місці.",[],{"name":374,"type":370,"description":375,"tags":376,"schema":370},"page","Верхній екран (деталі). Рендериться, поки `open`.",[],[378],{"name":16,"description":54,"tags":379,"type":380,"signature":381,"schema":382},[],"[]","(event: \"back\"): void",[],[384],{"name":385,"type":386,"description":387,"tags":388,"schema":389},"reset","() => void","Скинути стан жесту — наприклад, коли батько закрив екран сам.",[],{"kind":390,"type":391},"event","(): void","yLNSYNe7tnBnX365Jo5R9gDzQf5bPDTzD-hbjOvzUgU",1792004323350]