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