[{"data":1,"prerenderedAt":2675},["ShallowReactive",2],{"navigation":3,"\u002Fcomponents\u002Fswipe-action":313,"\u002Fcomponents\u002Fswipe-action-surround":2670},[4,24,41,48,293,298,303,308],{"title":5,"path":6,"stem":7,"children":8,"package":11,"icon":23},"Getting Started","\u002Fgetting-started","1.getting-started\u002F1.index",[9,13,18],{"title":10,"path":6,"stem":7,"package":11,"icon":12},"Introduction",null,"i-lucide-house",{"title":14,"path":15,"stem":16,"package":11,"icon":17},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":19,"path":20,"stem":21,"package":11,"icon":22},"Icons","\u002Fgetting-started\u002Ficons","1.getting-started\u002F3.icons","i-lucide-sparkles","i-lucide-rocket",{"title":25,"package":11,"icon":26,"path":27,"stem":28,"children":29,"page":40},"Packages","i-lucide-package","\u002Fpackages","2.packages",[30,35],{"title":31,"path":32,"stem":33,"package":11,"icon":34},"@vyui\u002Fcore","\u002Fpackages\u002Fcore","2.packages\u002F1.core","i-lucide-box",{"title":36,"path":37,"stem":38,"package":11,"icon":39},"@vyui\u002Fkit","\u002Fpackages\u002Fkit","2.packages\u002F2.kit","i-lucide-layers",false,{"title":42,"path":43,"stem":44,"children":45,"package":11,"icon":47},"CLI","\u002Fcli","3.cli\u002F1.index",[46],{"title":42,"path":43,"stem":44,"package":11,"icon":47},"i-lucide-terminal",{"title":49,"package":11,"icon":50,"path":51,"stem":52,"children":53},"Components","i-lucide-layout-grid","\u002Fcomponents","3.components",[54,56,62,67,72,77,82,87,92,97,102,107,112,117,122,127,132,136,141,145,150,155,160,165,170,175,180,185,190,195,200,205,210,215,220,225,230,234,238,243,248,253,258,263,268,272,276,280,284,288],{"title":49,"path":51,"stem":55,"package":11,"icon":50},"3.components\u002Findex",{"title":57,"path":58,"stem":59,"package":60,"icon":61},"Accordion","\u002Fcomponents\u002Faccordion","3.components\u002Faccordion","kit","i-lucide-list-collapse",{"title":63,"path":64,"stem":65,"package":60,"icon":66},"Action Sheet","\u002Fcomponents\u002Faction-sheet","3.components\u002Faction-sheet","i-lucide-panel-bottom",{"title":68,"path":69,"stem":70,"package":60,"icon":71},"Alert","\u002Fcomponents\u002Falert","3.components\u002Falert","i-lucide-triangle-alert",{"title":73,"path":74,"stem":75,"package":76,"icon":71},"Alert Dialog","\u002Fcomponents\u002Falert-dialog","3.components\u002Falert-dialog","core",{"title":78,"path":79,"stem":80,"package":60,"icon":81},"Aspect Ratio","\u002Fcomponents\u002Faspect-ratio","3.components\u002Faspect-ratio","i-lucide-ratio",{"title":83,"path":84,"stem":85,"package":60,"icon":86},"Avatar","\u002Fcomponents\u002Favatar","3.components\u002Favatar","i-lucide-circle-user-round",{"title":88,"path":89,"stem":90,"package":60,"icon":91},"Avatar Group","\u002Fcomponents\u002Favatar-group","3.components\u002Favatar-group","i-lucide-users-round",{"title":93,"path":94,"stem":95,"package":60,"icon":96},"Button","\u002Fcomponents\u002Fbutton","3.components\u002Fbutton","i-lucide-square-mouse-pointer",{"title":98,"path":99,"stem":100,"package":60,"icon":101},"Calendar","\u002Fcomponents\u002Fcalendar","3.components\u002Fcalendar","i-lucide-calendar-days",{"title":103,"path":104,"stem":105,"package":60,"icon":106},"Card","\u002Fcomponents\u002Fcard","3.components\u002Fcard","i-lucide-square",{"title":108,"path":109,"stem":110,"package":60,"icon":111},"Checkbox","\u002Fcomponents\u002Fcheckbox","3.components\u002Fcheckbox","i-lucide-square-check",{"title":113,"path":114,"stem":115,"package":76,"icon":116},"Collapsible","\u002Fcomponents\u002Fcollapsible","3.components\u002Fcollapsible","i-lucide-chevrons-down-up",{"title":118,"path":119,"stem":120,"package":76,"icon":121},"Dialog","\u002Fcomponents\u002Fdialog","3.components\u002Fdialog","i-lucide-app-window",{"title":123,"path":124,"stem":125,"package":76,"icon":126},"Draggable","\u002Fcomponents\u002Fdraggable","3.components\u002Fdraggable","i-lucide-move",{"title":128,"path":129,"stem":130,"package":60,"icon":131},"Form","\u002Fcomponents\u002Fform","3.components\u002Fform","i-lucide-clipboard-list",{"title":133,"path":134,"stem":135,"package":76,"icon":22},"Icon","\u002Fcomponents\u002Ficon","3.components\u002Ficon",{"title":137,"path":138,"stem":139,"package":60,"icon":140},"Input","\u002Fcomponents\u002Finput","3.components\u002Finput","i-lucide-text-cursor-input",{"title":142,"path":143,"stem":144,"package":60,"icon":66},"Island","\u002Fcomponents\u002Fisland","3.components\u002Fisland",{"title":146,"path":147,"stem":148,"package":60,"icon":149},"Island Button","\u002Fcomponents\u002Fisland-button","3.components\u002Fisland-button","i-lucide-circle-ellipsis",{"title":151,"path":152,"stem":153,"package":60,"icon":154},"Island Group","\u002Fcomponents\u002Fisland-group","3.components\u002Fisland-group","i-lucide-panels-top-left",{"title":156,"path":157,"stem":158,"package":60,"icon":159},"KeyboardAware","\u002Fcomponents\u002Fkeyboard-aware","3.components\u002Fkeyboard-aware","i-lucide-keyboard",{"title":161,"path":162,"stem":163,"package":60,"icon":164},"Label","\u002Fcomponents\u002Flabel","3.components\u002Flabel","i-lucide-tag",{"title":166,"path":167,"stem":168,"package":60,"icon":169},"Modal","\u002Fcomponents\u002Fmodal","3.components\u002Fmodal","i-lucide-gallery-vertical-end",{"title":171,"path":172,"stem":173,"package":76,"icon":174},"Navigation","\u002Fcomponents\u002Fnavigation","3.components\u002Fnavigation","i-lucide-route",{"title":176,"path":177,"stem":178,"package":60,"icon":179},"Number Field","\u002Fcomponents\u002Fnumber-field","3.components\u002Fnumber-field","i-lucide-list-plus",{"title":181,"path":182,"stem":183,"package":76,"icon":184},"Pagination","\u002Fcomponents\u002Fpagination","3.components\u002Fpagination","i-lucide-ellipsis",{"title":186,"path":187,"stem":188,"package":60,"icon":189},"Pin Input","\u002Fcomponents\u002Fpin-input","3.components\u002Fpin-input","i-lucide-key-round",{"title":191,"path":192,"stem":193,"package":60,"icon":194},"Placeholder","\u002Fcomponents\u002Fplaceholder","3.components\u002Fplaceholder","i-lucide-square-dashed",{"title":196,"path":197,"stem":198,"package":60,"icon":199},"Popover","\u002Fcomponents\u002Fpopover","3.components\u002Fpopover","i-lucide-message-square-more",{"title":201,"path":202,"stem":203,"package":60,"icon":204},"Progress","\u002Fcomponents\u002Fprogress","3.components\u002Fprogress","i-lucide-chart-no-axes-column-increasing",{"title":206,"path":207,"stem":208,"package":60,"icon":209},"Radio Group","\u002Fcomponents\u002Fradio-group","3.components\u002Fradio-group","i-lucide-circle-dot",{"title":211,"path":212,"stem":213,"package":60,"icon":214},"Rating","\u002Fcomponents\u002Frating","3.components\u002Frating","i-lucide-star",{"title":216,"path":217,"stem":218,"package":76,"icon":219},"Scroll View","\u002Fcomponents\u002Fscroll-view","3.components\u002Fscroll-view","i-lucide-scroll",{"title":221,"path":222,"stem":223,"package":60,"icon":224},"Select","\u002Fcomponents\u002Fselect","3.components\u002Fselect","i-lucide-list-check",{"title":226,"path":227,"stem":228,"package":60,"icon":229},"Separator","\u002Fcomponents\u002Fseparator","3.components\u002Fseparator","i-lucide-separator-horizontal",{"title":231,"path":232,"stem":233,"package":76,"icon":66},"Sheet","\u002Fcomponents\u002Fsheet","3.components\u002Fsheet",{"title":235,"path":236,"stem":237,"package":60,"icon":154},"Skeleton","\u002Fcomponents\u002Fskeleton","3.components\u002Fskeleton",{"title":239,"path":240,"stem":241,"package":60,"icon":242},"Slider","\u002Fcomponents\u002Fslider","3.components\u002Fslider","i-lucide-sliders-horizontal",{"title":244,"path":245,"stem":246,"package":60,"icon":247},"Sortable","\u002Fcomponents\u002Fsortable","3.components\u002Fsortable","i-lucide-list-restart",{"title":249,"path":250,"stem":251,"package":60,"icon":252},"Stepper","\u002Fcomponents\u002Fstepper","3.components\u002Fstepper","i-lucide-list-ordered",{"title":254,"path":255,"stem":256,"package":60,"icon":257},"Swipe Action","\u002Fcomponents\u002Fswipe-action","3.components\u002Fswipe-action","i-lucide-move-horizontal",{"title":259,"path":260,"stem":261,"package":60,"icon":262},"Swiper","\u002Fcomponents\u002Fswiper","3.components\u002Fswiper","i-lucide-gallery-horizontal-end",{"title":264,"path":265,"stem":266,"package":60,"icon":267},"Switch","\u002Fcomponents\u002Fswitch","3.components\u002Fswitch","i-lucide-toggle-right",{"title":269,"path":270,"stem":271,"package":60,"icon":154},"Tabs","\u002Fcomponents\u002Ftabs","3.components\u002Ftabs",{"title":273,"path":274,"stem":275,"package":60,"icon":140},"Textarea","\u002Fcomponents\u002Ftextarea","3.components\u002Ftextarea",{"title":277,"path":278,"stem":279,"package":60,"icon":199},"Toast","\u002Fcomponents\u002Ftoast","3.components\u002Ftoast",{"title":281,"path":282,"stem":283,"package":60,"icon":267},"Toggle","\u002Fcomponents\u002Ftoggle","3.components\u002Ftoggle",{"title":285,"path":286,"stem":287,"package":60,"icon":154},"Toggle Group","\u002Fcomponents\u002Ftoggle-group","3.components\u002Ftoggle-group",{"title":289,"path":290,"stem":291,"package":60,"icon":292},"Tray","\u002Fcomponents\u002Ftray","3.components\u002Ftray","i-lucide-square-dashed-bottom",{"title":294,"path":295,"stem":296,"package":11,"icon":297},"Theming","\u002Ftheming","4.theming","i-lucide-palette",{"title":299,"path":300,"stem":301,"package":11,"icon":302},"Accessibility","\u002Faccessibility","5.accessibility","i-lucide-accessibility",{"title":304,"path":305,"stem":306,"package":11,"icon":307},"i18n","\u002Fi18n","6.i18n","i-lucide-languages",{"title":309,"path":310,"stem":311,"package":11,"icon":312},"Roadmap","\u002Froadmap","7.roadmap","i-lucide-map",{"id":314,"title":254,"body":315,"description":2658,"extension":2659,"links":2660,"meta":2666,"navigation":2667,"package":60,"path":255,"seo":2668,"stem":256,"__hash__":2669},"docs\u002F3.components\u002Fswipe-action.md",{"type":316,"value":317,"toc":2639},"minimark",[318,323,335,340,348,352,363,949,958,963,973,1470,1474,1479,1666,1670,1681,1778,1782,1792,1963,1967,2029,2033,2140,2151,2176,2185,2189,2373,2385,2389,2431,2436,2440,2482,2486,2495,2538,2557,2560,2568,2581,2585,2607,2611,2635],[319,320,322],"h2",{"id":321},"overview","Overview",[324,325,326,330,331,334],"p",{},[327,328,329],"code",{},"VySwipeAction"," places an action panel behind a foreground row. A leftward drag reveals the panel, a short rightward flick closes it, and a sufficiently long or fast leftward swipe emits ",[327,332,333],{},"commit",".",[336,337],"component-code",{"height":338,"name":339},"160px","swipe-action-example",[341,342,345],"callout",{"color":343,"icon":344},"warning","i-lucide-pointer",[324,346,347],{},"Swipe gestures aren't wired up in the web preview yet, so the row won't slide here — view this on a device or in Lynx Explorer for the real interaction. The code below runs as-is on iOS and Android.",[319,349,351],{"id":350},"usage","Usage",[324,353,354,355,358,359,362],{},"Both ",[327,356,357],{},"rowWidth"," and ",[327,360,361],{},"actionWidth"," are required because the core gesture primitive performs its threshold and translation calculations in pixels.",[364,365,370],"pre",{"className":366,"code":367,"language":368,"meta":369,"style":369},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { VySwipeAction } from '@vyui\u002Fkit'\n\nconst open = ref(false)\nconst archived = ref(false)\n\nfunction archive() {\n  archived.value = true\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CVySwipeAction\n    v-if=\"!archived\"\n    v-model:open=\"open\"\n    :row-width=\"360\"\n    :action-width=\"96\"\n    @commit=\"archive\"\n  >\n    \u003Cview class=\"h-16 px-4 justify-center bg-white\">\n      \u003Ctext class=\"font-medium\">Quarterly report\u003C\u002Ftext>\n      \u003Ctext class=\"text-sm text-neutral-500\">Swipe left to archive\u003C\u002Ftext>\n    \u003C\u002Fview>\n\n    \u003Ctemplate #actions=\"{ close }\">\n      \u003Cview\n        class=\"w-24 items-center justify-center bg-primary-600\"\n        accessibility-element=\"true\"\n        accessibility-traits=\"button\"\n        accessibility-label=\"Archive quarterly report\"\n        @tap=\"archive(); close()\"\n      >\n        \u003Ctext class=\"text-white font-medium\">Archive\u003C\u002Ftext>\n      \u003C\u002Fview>\n    \u003C\u002Ftemplate>\n  \u003C\u002FVySwipeAction>\n\u003C\u002Ftemplate>\n","vue","",[327,371,372,407,435,455,462,486,504,509,524,541,547,557,562,572,581,597,612,627,642,657,663,686,718,747,757,762,792,800,815,830,845,860,875,881,911,921,930,940],{"__ignoreMap":369},[373,374,377,381,385,389,392,395,398,402,404],"span",{"class":375,"line":376},"line",1,[373,378,380],{"class":379},"sMK4o","\u003C",[373,382,384],{"class":383},"swJcz","script",[373,386,388],{"class":387},"spNyl"," setup",[373,390,391],{"class":387}," lang",[373,393,394],{"class":379},"=",[373,396,397],{"class":379},"\"",[373,399,401],{"class":400},"sfazB","ts",[373,403,397],{"class":379},[373,405,406],{"class":379},">\n",[373,408,410,414,417,421,424,427,430,432],{"class":375,"line":409},2,[373,411,413],{"class":412},"s7zQu","import",[373,415,416],{"class":379}," {",[373,418,420],{"class":419},"sTEyZ"," ref",[373,422,423],{"class":379}," }",[373,425,426],{"class":412}," from",[373,428,429],{"class":379}," '",[373,431,368],{"class":400},[373,433,434],{"class":379},"'\n",[373,436,438,440,442,445,447,449,451,453],{"class":375,"line":437},3,[373,439,413],{"class":412},[373,441,416],{"class":379},[373,443,444],{"class":419}," VySwipeAction",[373,446,423],{"class":379},[373,448,426],{"class":412},[373,450,429],{"class":379},[373,452,36],{"class":400},[373,454,434],{"class":379},[373,456,458],{"class":375,"line":457},4,[373,459,461],{"emptyLinePlaceholder":460},true,"\n",[373,463,465,468,471,473,476,479,483],{"class":375,"line":464},5,[373,466,467],{"class":387},"const",[373,469,470],{"class":419}," open ",[373,472,394],{"class":379},[373,474,420],{"class":475},"s2Zo4",[373,477,478],{"class":419},"(",[373,480,482],{"class":481},"sfNiH","false",[373,484,485],{"class":419},")\n",[373,487,489,491,494,496,498,500,502],{"class":375,"line":488},6,[373,490,467],{"class":387},[373,492,493],{"class":419}," archived ",[373,495,394],{"class":379},[373,497,420],{"class":475},[373,499,478],{"class":419},[373,501,482],{"class":481},[373,503,485],{"class":419},[373,505,507],{"class":375,"line":506},7,[373,508,461],{"emptyLinePlaceholder":460},[373,510,512,515,518,521],{"class":375,"line":511},8,[373,513,514],{"class":387},"function",[373,516,517],{"class":475}," archive",[373,519,520],{"class":379},"()",[373,522,523],{"class":379}," {\n",[373,525,527,530,532,535,538],{"class":375,"line":526},9,[373,528,529],{"class":419},"  archived",[373,531,334],{"class":379},[373,533,534],{"class":419},"value",[373,536,537],{"class":379}," =",[373,539,540],{"class":481}," true\n",[373,542,544],{"class":375,"line":543},10,[373,545,546],{"class":379},"}\n",[373,548,550,553,555],{"class":375,"line":549},11,[373,551,552],{"class":379},"\u003C\u002F",[373,554,384],{"class":383},[373,556,406],{"class":379},[373,558,560],{"class":375,"line":559},12,[373,561,461],{"emptyLinePlaceholder":460},[373,563,565,567,570],{"class":375,"line":564},13,[373,566,380],{"class":379},[373,568,569],{"class":383},"template",[373,571,406],{"class":379},[373,573,575,578],{"class":375,"line":574},14,[373,576,577],{"class":379},"  \u003C",[373,579,580],{"class":383},"VySwipeAction\n",[373,582,584,587,589,591,594],{"class":375,"line":583},15,[373,585,586],{"class":387},"    v-if",[373,588,394],{"class":379},[373,590,397],{"class":379},[373,592,593],{"class":400},"!archived",[373,595,596],{"class":379},"\"\n",[373,598,600,603,605,607,610],{"class":375,"line":599},16,[373,601,602],{"class":387},"    v-model:open",[373,604,394],{"class":379},[373,606,397],{"class":379},[373,608,609],{"class":400},"open",[373,611,596],{"class":379},[373,613,615,618,620,622,625],{"class":375,"line":614},17,[373,616,617],{"class":387},"    :row-width",[373,619,394],{"class":379},[373,621,397],{"class":379},[373,623,624],{"class":400},"360",[373,626,596],{"class":379},[373,628,630,633,635,637,640],{"class":375,"line":629},18,[373,631,632],{"class":387},"    :action-width",[373,634,394],{"class":379},[373,636,397],{"class":379},[373,638,639],{"class":400},"96",[373,641,596],{"class":379},[373,643,645,648,650,652,655],{"class":375,"line":644},19,[373,646,647],{"class":387},"    @commit",[373,649,394],{"class":379},[373,651,397],{"class":379},[373,653,654],{"class":400},"archive",[373,656,596],{"class":379},[373,658,660],{"class":375,"line":659},20,[373,661,662],{"class":379},"  >\n",[373,664,666,669,672,675,677,679,682,684],{"class":375,"line":665},21,[373,667,668],{"class":379},"    \u003C",[373,670,671],{"class":383},"view",[373,673,674],{"class":387}," class",[373,676,394],{"class":379},[373,678,397],{"class":379},[373,680,681],{"class":400},"h-16 px-4 justify-center bg-white",[373,683,397],{"class":379},[373,685,406],{"class":379},[373,687,689,692,695,697,699,701,704,706,709,712,714,716],{"class":375,"line":688},22,[373,690,691],{"class":379},"      \u003C",[373,693,694],{"class":383},"text",[373,696,674],{"class":387},[373,698,394],{"class":379},[373,700,397],{"class":379},[373,702,703],{"class":400},"font-medium",[373,705,397],{"class":379},[373,707,708],{"class":379},">",[373,710,711],{"class":419},"Quarterly report",[373,713,552],{"class":379},[373,715,694],{"class":383},[373,717,406],{"class":379},[373,719,721,723,725,727,729,731,734,736,738,741,743,745],{"class":375,"line":720},23,[373,722,691],{"class":379},[373,724,694],{"class":383},[373,726,674],{"class":387},[373,728,394],{"class":379},[373,730,397],{"class":379},[373,732,733],{"class":400},"text-sm text-neutral-500",[373,735,397],{"class":379},[373,737,708],{"class":379},[373,739,740],{"class":419},"Swipe left to archive",[373,742,552],{"class":379},[373,744,694],{"class":383},[373,746,406],{"class":379},[373,748,750,753,755],{"class":375,"line":749},24,[373,751,752],{"class":379},"    \u003C\u002F",[373,754,671],{"class":383},[373,756,406],{"class":379},[373,758,760],{"class":375,"line":759},25,[373,761,461],{"emptyLinePlaceholder":460},[373,763,765,767,769,772,775,777,779,782,785,788,790],{"class":375,"line":764},26,[373,766,668],{"class":379},[373,768,569],{"class":383},[373,770,771],{"class":379}," #",[373,773,774],{"class":387},"actions",[373,776,394],{"class":379},[373,778,397],{"class":379},[373,780,781],{"class":379},"{",[373,783,784],{"class":419}," close ",[373,786,787],{"class":379},"}",[373,789,397],{"class":379},[373,791,406],{"class":379},[373,793,795,797],{"class":375,"line":794},27,[373,796,691],{"class":379},[373,798,799],{"class":383},"view\n",[373,801,803,806,808,810,813],{"class":375,"line":802},28,[373,804,805],{"class":387},"        class",[373,807,394],{"class":379},[373,809,397],{"class":379},[373,811,812],{"class":400},"w-24 items-center justify-center bg-primary-600",[373,814,596],{"class":379},[373,816,818,821,823,825,828],{"class":375,"line":817},29,[373,819,820],{"class":387},"        accessibility-element",[373,822,394],{"class":379},[373,824,397],{"class":379},[373,826,827],{"class":400},"true",[373,829,596],{"class":379},[373,831,833,836,838,840,843],{"class":375,"line":832},30,[373,834,835],{"class":387},"        accessibility-traits",[373,837,394],{"class":379},[373,839,397],{"class":379},[373,841,842],{"class":400},"button",[373,844,596],{"class":379},[373,846,848,851,853,855,858],{"class":375,"line":847},31,[373,849,850],{"class":387},"        accessibility-label",[373,852,394],{"class":379},[373,854,397],{"class":379},[373,856,857],{"class":400},"Archive quarterly report",[373,859,596],{"class":379},[373,861,863,866,868,870,873],{"class":375,"line":862},32,[373,864,865],{"class":387},"        @tap",[373,867,394],{"class":379},[373,869,397],{"class":379},[373,871,872],{"class":400},"archive(); close()",[373,874,596],{"class":379},[373,876,878],{"class":375,"line":877},33,[373,879,880],{"class":379},"      >\n",[373,882,884,887,889,891,893,895,898,900,902,905,907,909],{"class":375,"line":883},34,[373,885,886],{"class":379},"        \u003C",[373,888,694],{"class":383},[373,890,674],{"class":387},[373,892,394],{"class":379},[373,894,397],{"class":379},[373,896,897],{"class":400},"text-white font-medium",[373,899,397],{"class":379},[373,901,708],{"class":379},[373,903,904],{"class":419},"Archive",[373,906,552],{"class":379},[373,908,694],{"class":383},[373,910,406],{"class":379},[373,912,914,917,919],{"class":375,"line":913},35,[373,915,916],{"class":379},"      \u003C\u002F",[373,918,671],{"class":383},[373,920,406],{"class":379},[373,922,924,926,928],{"class":375,"line":923},36,[373,925,752],{"class":379},[373,927,569],{"class":383},[373,929,406],{"class":379},[373,931,933,936,938],{"class":375,"line":932},37,[373,934,935],{"class":379},"  \u003C\u002F",[373,937,329],{"class":383},[373,939,406],{"class":379},[373,941,943,945,947],{"class":375,"line":942},38,[373,944,552],{"class":379},[373,946,569],{"class":383},[373,948,406],{"class":379},[324,950,951,952,954,955,957],{},"Handle ",[327,953,333],{}," by completing or confirming the action. A committed row animates through the full ",[327,956,357],{},"; removing the completed row from its list is the usual pattern.",[959,960,962],"h3",{"id":961},"delete-action","Delete action",[324,964,965,966,969,970,334],{},"Use the slot's ",[327,967,968],{},"close"," function after a panel action. This animates the row closed and updates ",[327,971,972],{},"v-model:open",[364,974,976],{"className":366,"code":975,"language":368,"meta":369,"style":369},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { VySwipeAction } from '@vyui\u002Fkit'\n\nconst open = ref(false)\nconst deleted = ref(false)\n\nfunction remove() {\n  deleted.value = true\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CVySwipeAction\n    v-if=\"!deleted\"\n    v-model:open=\"open\"\n    :row-width=\"320\"\n    :action-width=\"88\"\n    @commit=\"remove\"\n  >\n    \u003Ctemplate #default=\"{ open: isOpen }\">\n      \u003Cview class=\"h-16 px-4 flex-row items-center justify-between bg-white\">\n        \u003Ctext>Draft message\u003C\u002Ftext>\n        \u003Ctext class=\"text-sm text-neutral-500\">{{ isOpen ? 'Actions open' : 'Swipe left' }}\u003C\u002Ftext>\n      \u003C\u002Fview>\n    \u003C\u002Ftemplate>\n\n    \u003Ctemplate #actions=\"{ close }\">\n      \u003Cview\n        class=\"w-[88px] items-center justify-center bg-error-600\"\n        accessibility-element=\"true\"\n        accessibility-traits=\"button\"\n        accessibility-label=\"Delete draft message\"\n        @tap=\"remove(); close()\"\n      >\n        \u003Ctext class=\"text-white font-medium\">Delete\u003C\u002Ftext>\n      \u003C\u002Fview>\n    \u003C\u002Ftemplate>\n  \u003C\u002FVySwipeAction>\n\u003C\u002Ftemplate>\n",[327,977,978,998,1016,1034,1038,1054,1071,1075,1086,1099,1103,1111,1115,1123,1129,1142,1154,1167,1180,1193,1197,1229,1248,1265,1292,1300,1308,1312,1336,1342,1355,1367,1379,1392,1405,1409,1436,1444,1452,1461],{"__ignoreMap":369},[373,979,980,982,984,986,988,990,992,994,996],{"class":375,"line":376},[373,981,380],{"class":379},[373,983,384],{"class":383},[373,985,388],{"class":387},[373,987,391],{"class":387},[373,989,394],{"class":379},[373,991,397],{"class":379},[373,993,401],{"class":400},[373,995,397],{"class":379},[373,997,406],{"class":379},[373,999,1000,1002,1004,1006,1008,1010,1012,1014],{"class":375,"line":409},[373,1001,413],{"class":412},[373,1003,416],{"class":379},[373,1005,420],{"class":419},[373,1007,423],{"class":379},[373,1009,426],{"class":412},[373,1011,429],{"class":379},[373,1013,368],{"class":400},[373,1015,434],{"class":379},[373,1017,1018,1020,1022,1024,1026,1028,1030,1032],{"class":375,"line":437},[373,1019,413],{"class":412},[373,1021,416],{"class":379},[373,1023,444],{"class":419},[373,1025,423],{"class":379},[373,1027,426],{"class":412},[373,1029,429],{"class":379},[373,1031,36],{"class":400},[373,1033,434],{"class":379},[373,1035,1036],{"class":375,"line":457},[373,1037,461],{"emptyLinePlaceholder":460},[373,1039,1040,1042,1044,1046,1048,1050,1052],{"class":375,"line":464},[373,1041,467],{"class":387},[373,1043,470],{"class":419},[373,1045,394],{"class":379},[373,1047,420],{"class":475},[373,1049,478],{"class":419},[373,1051,482],{"class":481},[373,1053,485],{"class":419},[373,1055,1056,1058,1061,1063,1065,1067,1069],{"class":375,"line":488},[373,1057,467],{"class":387},[373,1059,1060],{"class":419}," deleted ",[373,1062,394],{"class":379},[373,1064,420],{"class":475},[373,1066,478],{"class":419},[373,1068,482],{"class":481},[373,1070,485],{"class":419},[373,1072,1073],{"class":375,"line":506},[373,1074,461],{"emptyLinePlaceholder":460},[373,1076,1077,1079,1082,1084],{"class":375,"line":511},[373,1078,514],{"class":387},[373,1080,1081],{"class":475}," remove",[373,1083,520],{"class":379},[373,1085,523],{"class":379},[373,1087,1088,1091,1093,1095,1097],{"class":375,"line":526},[373,1089,1090],{"class":419},"  deleted",[373,1092,334],{"class":379},[373,1094,534],{"class":419},[373,1096,537],{"class":379},[373,1098,540],{"class":481},[373,1100,1101],{"class":375,"line":543},[373,1102,546],{"class":379},[373,1104,1105,1107,1109],{"class":375,"line":549},[373,1106,552],{"class":379},[373,1108,384],{"class":383},[373,1110,406],{"class":379},[373,1112,1113],{"class":375,"line":559},[373,1114,461],{"emptyLinePlaceholder":460},[373,1116,1117,1119,1121],{"class":375,"line":564},[373,1118,380],{"class":379},[373,1120,569],{"class":383},[373,1122,406],{"class":379},[373,1124,1125,1127],{"class":375,"line":574},[373,1126,577],{"class":379},[373,1128,580],{"class":383},[373,1130,1131,1133,1135,1137,1140],{"class":375,"line":583},[373,1132,586],{"class":387},[373,1134,394],{"class":379},[373,1136,397],{"class":379},[373,1138,1139],{"class":400},"!deleted",[373,1141,596],{"class":379},[373,1143,1144,1146,1148,1150,1152],{"class":375,"line":599},[373,1145,602],{"class":387},[373,1147,394],{"class":379},[373,1149,397],{"class":379},[373,1151,609],{"class":400},[373,1153,596],{"class":379},[373,1155,1156,1158,1160,1162,1165],{"class":375,"line":614},[373,1157,617],{"class":387},[373,1159,394],{"class":379},[373,1161,397],{"class":379},[373,1163,1164],{"class":400},"320",[373,1166,596],{"class":379},[373,1168,1169,1171,1173,1175,1178],{"class":375,"line":629},[373,1170,632],{"class":387},[373,1172,394],{"class":379},[373,1174,397],{"class":379},[373,1176,1177],{"class":400},"88",[373,1179,596],{"class":379},[373,1181,1182,1184,1186,1188,1191],{"class":375,"line":644},[373,1183,647],{"class":387},[373,1185,394],{"class":379},[373,1187,397],{"class":379},[373,1189,1190],{"class":400},"remove",[373,1192,596],{"class":379},[373,1194,1195],{"class":375,"line":659},[373,1196,662],{"class":379},[373,1198,1199,1201,1203,1205,1208,1210,1212,1214,1217,1220,1223,1225,1227],{"class":375,"line":665},[373,1200,668],{"class":379},[373,1202,569],{"class":383},[373,1204,771],{"class":379},[373,1206,1207],{"class":387},"default",[373,1209,394],{"class":379},[373,1211,397],{"class":379},[373,1213,781],{"class":379},[373,1215,1216],{"class":383}," open",[373,1218,1219],{"class":379},":",[373,1221,1222],{"class":419}," isOpen ",[373,1224,787],{"class":379},[373,1226,397],{"class":379},[373,1228,406],{"class":379},[373,1230,1231,1233,1235,1237,1239,1241,1244,1246],{"class":375,"line":688},[373,1232,691],{"class":379},[373,1234,671],{"class":383},[373,1236,674],{"class":387},[373,1238,394],{"class":379},[373,1240,397],{"class":379},[373,1242,1243],{"class":400},"h-16 px-4 flex-row items-center justify-between bg-white",[373,1245,397],{"class":379},[373,1247,406],{"class":379},[373,1249,1250,1252,1254,1256,1259,1261,1263],{"class":375,"line":720},[373,1251,886],{"class":379},[373,1253,694],{"class":383},[373,1255,708],{"class":379},[373,1257,1258],{"class":419},"Draft message",[373,1260,552],{"class":379},[373,1262,694],{"class":383},[373,1264,406],{"class":379},[373,1266,1267,1269,1271,1273,1275,1277,1279,1281,1283,1286,1288,1290],{"class":375,"line":749},[373,1268,886],{"class":379},[373,1270,694],{"class":383},[373,1272,674],{"class":387},[373,1274,394],{"class":379},[373,1276,397],{"class":379},[373,1278,733],{"class":400},[373,1280,397],{"class":379},[373,1282,708],{"class":379},[373,1284,1285],{"class":419},"{{ isOpen ? 'Actions open' : 'Swipe left' }}",[373,1287,552],{"class":379},[373,1289,694],{"class":383},[373,1291,406],{"class":379},[373,1293,1294,1296,1298],{"class":375,"line":759},[373,1295,916],{"class":379},[373,1297,671],{"class":383},[373,1299,406],{"class":379},[373,1301,1302,1304,1306],{"class":375,"line":764},[373,1303,752],{"class":379},[373,1305,569],{"class":383},[373,1307,406],{"class":379},[373,1309,1310],{"class":375,"line":794},[373,1311,461],{"emptyLinePlaceholder":460},[373,1313,1314,1316,1318,1320,1322,1324,1326,1328,1330,1332,1334],{"class":375,"line":802},[373,1315,668],{"class":379},[373,1317,569],{"class":383},[373,1319,771],{"class":379},[373,1321,774],{"class":387},[373,1323,394],{"class":379},[373,1325,397],{"class":379},[373,1327,781],{"class":379},[373,1329,784],{"class":419},[373,1331,787],{"class":379},[373,1333,397],{"class":379},[373,1335,406],{"class":379},[373,1337,1338,1340],{"class":375,"line":817},[373,1339,691],{"class":379},[373,1341,799],{"class":383},[373,1343,1344,1346,1348,1350,1353],{"class":375,"line":832},[373,1345,805],{"class":387},[373,1347,394],{"class":379},[373,1349,397],{"class":379},[373,1351,1352],{"class":400},"w-[88px] items-center justify-center bg-error-600",[373,1354,596],{"class":379},[373,1356,1357,1359,1361,1363,1365],{"class":375,"line":847},[373,1358,820],{"class":387},[373,1360,394],{"class":379},[373,1362,397],{"class":379},[373,1364,827],{"class":400},[373,1366,596],{"class":379},[373,1368,1369,1371,1373,1375,1377],{"class":375,"line":862},[373,1370,835],{"class":387},[373,1372,394],{"class":379},[373,1374,397],{"class":379},[373,1376,842],{"class":400},[373,1378,596],{"class":379},[373,1380,1381,1383,1385,1387,1390],{"class":375,"line":877},[373,1382,850],{"class":387},[373,1384,394],{"class":379},[373,1386,397],{"class":379},[373,1388,1389],{"class":400},"Delete draft message",[373,1391,596],{"class":379},[373,1393,1394,1396,1398,1400,1403],{"class":375,"line":883},[373,1395,865],{"class":387},[373,1397,394],{"class":379},[373,1399,397],{"class":379},[373,1401,1402],{"class":400},"remove(); close()",[373,1404,596],{"class":379},[373,1406,1407],{"class":375,"line":913},[373,1408,880],{"class":379},[373,1410,1411,1413,1415,1417,1419,1421,1423,1425,1427,1430,1432,1434],{"class":375,"line":923},[373,1412,886],{"class":379},[373,1414,694],{"class":383},[373,1416,674],{"class":387},[373,1418,394],{"class":379},[373,1420,397],{"class":379},[373,1422,897],{"class":400},[373,1424,397],{"class":379},[373,1426,708],{"class":379},[373,1428,1429],{"class":419},"Delete",[373,1431,552],{"class":379},[373,1433,694],{"class":383},[373,1435,406],{"class":379},[373,1437,1438,1440,1442],{"class":375,"line":932},[373,1439,916],{"class":379},[373,1441,671],{"class":383},[373,1443,406],{"class":379},[373,1445,1446,1448,1450],{"class":375,"line":942},[373,1447,752],{"class":379},[373,1449,569],{"class":383},[373,1451,406],{"class":379},[373,1453,1455,1457,1459],{"class":375,"line":1454},39,[373,1456,935],{"class":379},[373,1458,329],{"class":383},[373,1460,406],{"class":379},[373,1462,1464,1466,1468],{"class":375,"line":1463},40,[373,1465,552],{"class":379},[373,1467,569],{"class":383},[373,1469,406],{"class":379},[959,1471,1473],{"id":1472},"multiple-actions","Multiple actions",[324,1475,1476,1477,334],{},"The action panel can contain more than one control as long as their combined width matches ",[327,1478,361],{},[364,1480,1482],{"className":366,"code":1481,"language":368,"meta":369,"style":369},"\u003CVySwipeAction\n  v-model:open=\"open\"\n  :row-width=\"360\"\n  :action-width=\"176\"\n>\n  \u003Cview class=\"h-16 px-4 justify-center bg-white\">\n    \u003Ctext>Conversation\u003C\u002Ftext>\n  \u003C\u002Fview>\n\n  \u003Ctemplate #actions=\"{ close }\">\n    \u003Cview\n      class=\"w-[88px] items-center justify-center bg-neutral-200\"\n      accessibility-element=\"true\"\n      accessibility-traits=\"button\"\n      accessibility-label=\"Mark conversation unread\"\n      @tap=\"markUnread(); close()\"\n    >\n      \u003Ctext>Unread\u003C\u002Ftext>\n    \u003C\u002Fview>\n    \u003Cview\n      class=\"w-[88px] items-center justify-center bg-error-600\"\n      accessibility-element=\"true\"\n      accessibility-traits=\"button\"\n      accessibility-label=\"Delete conversation\"\n      @tap=\"remove(); close()\"\n    >\n      \u003Ctext class=\"text-white\">Delete\u003C\u002Ftext>\n    \u003C\u002Fview>\n  \u003C\u002Ftemplate>\n\u003C\u002FVySwipeAction>\n",[327,1483,1484,1490,1507,1524,1540,1544,1549,1554,1559,1563,1568,1573,1578,1583,1588,1593,1598,1603,1608,1613,1617,1622,1626,1630,1635,1640,1644,1649,1653,1658],{"__ignoreMap":369},[373,1485,1486,1488],{"class":375,"line":376},[373,1487,380],{"class":379},[373,1489,580],{"class":383},[373,1491,1492,1495,1497,1499,1501,1503,1505],{"class":375,"line":409},[373,1493,1494],{"class":387},"  v-model",[373,1496,1219],{"class":379},[373,1498,609],{"class":387},[373,1500,394],{"class":379},[373,1502,397],{"class":379},[373,1504,609],{"class":419},[373,1506,596],{"class":379},[373,1508,1509,1512,1515,1517,1519,1522],{"class":375,"line":437},[373,1510,1511],{"class":379},"  :",[373,1513,1514],{"class":387},"row-width",[373,1516,394],{"class":379},[373,1518,397],{"class":379},[373,1520,624],{"class":1521},"sbssI",[373,1523,596],{"class":379},[373,1525,1526,1528,1531,1533,1535,1538],{"class":375,"line":457},[373,1527,1511],{"class":379},[373,1529,1530],{"class":387},"action-width",[373,1532,394],{"class":379},[373,1534,397],{"class":379},[373,1536,1537],{"class":1521},"176",[373,1539,596],{"class":379},[373,1541,1542],{"class":375,"line":464},[373,1543,406],{"class":379},[373,1545,1546],{"class":375,"line":488},[373,1547,1548],{"class":419},"  \u003Cview class=\"h-16 px-4 justify-center bg-white\">\n",[373,1550,1551],{"class":375,"line":506},[373,1552,1553],{"class":419},"    \u003Ctext>Conversation\u003C\u002Ftext>\n",[373,1555,1556],{"class":375,"line":511},[373,1557,1558],{"class":419},"  \u003C\u002Fview>\n",[373,1560,1561],{"class":375,"line":526},[373,1562,461],{"emptyLinePlaceholder":460},[373,1564,1565],{"class":375,"line":543},[373,1566,1567],{"class":419},"  \u003Ctemplate #actions=\"{ close }\">\n",[373,1569,1570],{"class":375,"line":549},[373,1571,1572],{"class":419},"    \u003Cview\n",[373,1574,1575],{"class":375,"line":559},[373,1576,1577],{"class":419},"      class=\"w-[88px] items-center justify-center bg-neutral-200\"\n",[373,1579,1580],{"class":375,"line":564},[373,1581,1582],{"class":419},"      accessibility-element=\"true\"\n",[373,1584,1585],{"class":375,"line":574},[373,1586,1587],{"class":419},"      accessibility-traits=\"button\"\n",[373,1589,1590],{"class":375,"line":583},[373,1591,1592],{"class":419},"      accessibility-label=\"Mark conversation unread\"\n",[373,1594,1595],{"class":375,"line":599},[373,1596,1597],{"class":419},"      @tap=\"markUnread(); close()\"\n",[373,1599,1600],{"class":375,"line":614},[373,1601,1602],{"class":419},"    >\n",[373,1604,1605],{"class":375,"line":629},[373,1606,1607],{"class":419},"      \u003Ctext>Unread\u003C\u002Ftext>\n",[373,1609,1610],{"class":375,"line":644},[373,1611,1612],{"class":419},"    \u003C\u002Fview>\n",[373,1614,1615],{"class":375,"line":659},[373,1616,1572],{"class":419},[373,1618,1619],{"class":375,"line":665},[373,1620,1621],{"class":419},"      class=\"w-[88px] items-center justify-center bg-error-600\"\n",[373,1623,1624],{"class":375,"line":688},[373,1625,1582],{"class":419},[373,1627,1628],{"class":375,"line":720},[373,1629,1587],{"class":419},[373,1631,1632],{"class":375,"line":749},[373,1633,1634],{"class":419},"      accessibility-label=\"Delete conversation\"\n",[373,1636,1637],{"class":375,"line":759},[373,1638,1639],{"class":419},"      @tap=\"remove(); close()\"\n",[373,1641,1642],{"class":375,"line":764},[373,1643,1602],{"class":419},[373,1645,1646],{"class":375,"line":794},[373,1647,1648],{"class":419},"      \u003Ctext class=\"text-white\">Delete\u003C\u002Ftext>\n",[373,1650,1651],{"class":375,"line":802},[373,1652,1612],{"class":419},[373,1654,1655],{"class":375,"line":817},[373,1656,1657],{"class":419},"  \u003C\u002Ftemplate>\n",[373,1659,1660,1662,1664],{"class":375,"line":832},[373,1661,552],{"class":379},[373,1663,329],{"class":383},[373,1665,406],{"class":379},[959,1667,1669],{"id":1668},"default-open-and-disabled","Default open and disabled",[324,1671,1672,1673,1676,1677,1680],{},"Use ",[327,1674,1675],{},"defaultOpen"," for uncontrolled initial state. ",[327,1678,1679],{},"disabled"," prevents drag interaction.",[364,1682,1684],{"className":366,"code":1683,"language":368,"meta":369,"style":369},"\u003CVySwipeAction\n  :row-width=\"320\"\n  :action-width=\"88\"\n  default-open\n  disabled\n>\n  \u003Cview class=\"h-16 px-4 justify-center bg-white\">\n    \u003Ctext>Locked row\u003C\u002Ftext>\n  \u003C\u002Fview>\n  \u003Ctemplate #actions>\n    \u003Cview class=\"w-[88px] items-center justify-center bg-neutral-200\">\n      \u003Ctext>Locked\u003C\u002Ftext>\n    \u003C\u002Fview>\n  \u003C\u002Ftemplate>\n\u003C\u002FVySwipeAction>\n",[327,1685,1686,1692,1706,1720,1725,1730,1734,1738,1743,1747,1752,1757,1762,1766,1770],{"__ignoreMap":369},[373,1687,1688,1690],{"class":375,"line":376},[373,1689,380],{"class":379},[373,1691,580],{"class":383},[373,1693,1694,1696,1698,1700,1702,1704],{"class":375,"line":409},[373,1695,1511],{"class":379},[373,1697,1514],{"class":387},[373,1699,394],{"class":379},[373,1701,397],{"class":379},[373,1703,1164],{"class":1521},[373,1705,596],{"class":379},[373,1707,1708,1710,1712,1714,1716,1718],{"class":375,"line":437},[373,1709,1511],{"class":379},[373,1711,1530],{"class":387},[373,1713,394],{"class":379},[373,1715,397],{"class":379},[373,1717,1177],{"class":1521},[373,1719,596],{"class":379},[373,1721,1722],{"class":375,"line":457},[373,1723,1724],{"class":387},"  default-open\n",[373,1726,1727],{"class":375,"line":464},[373,1728,1729],{"class":387},"  disabled\n",[373,1731,1732],{"class":375,"line":488},[373,1733,406],{"class":379},[373,1735,1736],{"class":375,"line":506},[373,1737,1548],{"class":419},[373,1739,1740],{"class":375,"line":511},[373,1741,1742],{"class":419},"    \u003Ctext>Locked row\u003C\u002Ftext>\n",[373,1744,1745],{"class":375,"line":526},[373,1746,1558],{"class":419},[373,1748,1749],{"class":375,"line":543},[373,1750,1751],{"class":419},"  \u003Ctemplate #actions>\n",[373,1753,1754],{"class":375,"line":549},[373,1755,1756],{"class":419},"    \u003Cview class=\"w-[88px] items-center justify-center bg-neutral-200\">\n",[373,1758,1759],{"class":375,"line":559},[373,1760,1761],{"class":419},"      \u003Ctext>Locked\u003C\u002Ftext>\n",[373,1763,1764],{"class":375,"line":564},[373,1765,1612],{"class":419},[373,1767,1768],{"class":375,"line":574},[373,1769,1657],{"class":419},[373,1771,1772,1774,1776],{"class":375,"line":583},[373,1773,552],{"class":379},[373,1775,329],{"class":383},[373,1777,406],{"class":379},[959,1779,1781],{"id":1780},"custom-styles","Custom styles",[324,1783,1672,1784,1787,1788,1791],{},[327,1785,1786],{},"class"," for the root or ",[327,1789,1790],{},"ui"," for the foreground and action panel wrappers.",[364,1793,1795],{"className":366,"code":1794,"language":368,"meta":369,"style":369},"\u003CVySwipeAction\n  v-model:open=\"open\"\n  :row-width=\"360\"\n  :action-width=\"96\"\n  class=\"rounded-xl\"\n  :ui=\"{\n    content: 'bg-neutral-50',\n    actions: 'bg-error-50',\n  }\"\n>\n  \u003Cview class=\"h-16 px-4 justify-center\">\n    \u003Ctext>Styled row\u003C\u002Ftext>\n  \u003C\u002Fview>\n  \u003Ctemplate #actions=\"{ close }\">\n    \u003Cview class=\"w-24 items-center justify-center\" @tap=\"close\">\n      \u003Ctext class=\"text-error-700\">Close\u003C\u002Ftext>\n    \u003C\u002Fview>\n  \u003C\u002Ftemplate>\n\u003C\u002FVySwipeAction>\n",[327,1796,1797,1803,1819,1833,1847,1861,1874,1892,1908,1915,1919,1924,1929,1933,1937,1942,1947,1951,1955],{"__ignoreMap":369},[373,1798,1799,1801],{"class":375,"line":376},[373,1800,380],{"class":379},[373,1802,580],{"class":383},[373,1804,1805,1807,1809,1811,1813,1815,1817],{"class":375,"line":409},[373,1806,1494],{"class":387},[373,1808,1219],{"class":379},[373,1810,609],{"class":387},[373,1812,394],{"class":379},[373,1814,397],{"class":379},[373,1816,609],{"class":419},[373,1818,596],{"class":379},[373,1820,1821,1823,1825,1827,1829,1831],{"class":375,"line":437},[373,1822,1511],{"class":379},[373,1824,1514],{"class":387},[373,1826,394],{"class":379},[373,1828,397],{"class":379},[373,1830,624],{"class":1521},[373,1832,596],{"class":379},[373,1834,1835,1837,1839,1841,1843,1845],{"class":375,"line":457},[373,1836,1511],{"class":379},[373,1838,1530],{"class":387},[373,1840,394],{"class":379},[373,1842,397],{"class":379},[373,1844,639],{"class":1521},[373,1846,596],{"class":379},[373,1848,1849,1852,1854,1856,1859],{"class":375,"line":464},[373,1850,1851],{"class":387},"  class",[373,1853,394],{"class":379},[373,1855,397],{"class":379},[373,1857,1858],{"class":400},"rounded-xl",[373,1860,596],{"class":379},[373,1862,1863,1865,1867,1869,1871],{"class":375,"line":488},[373,1864,1511],{"class":379},[373,1866,1790],{"class":387},[373,1868,394],{"class":379},[373,1870,397],{"class":379},[373,1872,1873],{"class":379},"{\n",[373,1875,1876,1879,1881,1883,1886,1889],{"class":375,"line":506},[373,1877,1878],{"class":383},"    content",[373,1880,1219],{"class":379},[373,1882,429],{"class":379},[373,1884,1885],{"class":400},"bg-neutral-50",[373,1887,1888],{"class":379},"'",[373,1890,1891],{"class":379},",\n",[373,1893,1894,1897,1899,1901,1904,1906],{"class":375,"line":511},[373,1895,1896],{"class":383},"    actions",[373,1898,1219],{"class":379},[373,1900,429],{"class":379},[373,1902,1903],{"class":400},"bg-error-50",[373,1905,1888],{"class":379},[373,1907,1891],{"class":379},[373,1909,1910,1913],{"class":375,"line":526},[373,1911,1912],{"class":379},"  }",[373,1914,596],{"class":379},[373,1916,1917],{"class":375,"line":543},[373,1918,406],{"class":379},[373,1920,1921],{"class":375,"line":549},[373,1922,1923],{"class":419},"  \u003Cview class=\"h-16 px-4 justify-center\">\n",[373,1925,1926],{"class":375,"line":559},[373,1927,1928],{"class":419},"    \u003Ctext>Styled row\u003C\u002Ftext>\n",[373,1930,1931],{"class":375,"line":564},[373,1932,1558],{"class":419},[373,1934,1935],{"class":375,"line":574},[373,1936,1567],{"class":419},[373,1938,1939],{"class":375,"line":583},[373,1940,1941],{"class":419},"    \u003Cview class=\"w-24 items-center justify-center\" @tap=\"close\">\n",[373,1943,1944],{"class":375,"line":599},[373,1945,1946],{"class":419},"      \u003Ctext class=\"text-error-700\">Close\u003C\u002Ftext>\n",[373,1948,1949],{"class":375,"line":614},[373,1950,1612],{"class":419},[373,1952,1953],{"class":375,"line":629},[373,1954,1657],{"class":419},[373,1956,1957,1959,1961],{"class":375,"line":644},[373,1958,552],{"class":379},[373,1960,329],{"class":383},[373,1962,406],{"class":379},[319,1964,1966],{"id":1965},"features-and-behavior","Features and behavior",[1968,1969,1970,1980,1991,2000,2015,2021,2026],"ul",{},[1971,1972,1973,1974,1976,1977,1979],"li",{},"Bind ",[327,1975,972],{}," for controlled open state, or use ",[327,1978,1675],{}," for an uncontrolled initial state.",[1971,1981,1982,1983,1986,1987,1990],{},"The foreground row translates from ",[327,1984,1985],{},"0"," when closed to ",[327,1988,1989],{},"-actionWidth"," when open.",[1971,1992,1993,1994,358,1996,1999],{},"During a drag, translation is clamped between ",[327,1995,1985],{},[327,1997,1998],{},"-rowWidth",", allowing a full-swipe commit beyond the visible action panel.",[1971,2001,2002,2003,358,2005,2007,2008,2010,2011,2014],{},"The ",[327,2004,1207],{},[327,2006,774],{}," slots both receive the resolved ",[327,2009,609],{}," state and a ",[327,2012,2013],{},"close()"," function.",[1971,2016,2017,2018,2020],{},"External changes to ",[327,2019,609],{}," animate the row to its open or closed position.",[1971,2022,2023,2025],{},[327,2024,1679],{}," ignores touch start, so the current state remains unchanged.",[1971,2027,2028],{},"Vertical intent is yielded to a surrounding list after the gesture direction is resolved.",[959,2030,2032],{"id":2031},"gesture-behavior","Gesture behavior",[2034,2035,2036,2052],"table",{},[2037,2038,2039],"thead",{},[2040,2041,2042,2046,2049],"tr",{},[2043,2044,2045],"th",{},"Release condition",[2043,2047,2048],{},"Default",[2043,2050,2051],{},"Result",[2053,2054,2055,2072,2086,2098,2112,2127],"tbody",{},[2040,2056,2057,2064,2069],{},[2058,2059,2060,2061],"td",{},"Drag past ",[327,2062,2063],{},"threshold × actionWidth",[2058,2065,2066],{},[327,2067,2068],{},"0.5 × actionWidth",[2058,2070,2071],{},"Snaps the row open.",[2040,2073,2074,2080,2083],{},[2058,2075,2076,2077],{},"Leftward velocity at least ",[327,2078,2079],{},"400px\u002Fs",[2058,2081,2082],{},"Core default",[2058,2084,2085],{},"Snaps open even before the position threshold.",[2040,2087,2088,2093,2095],{},[2058,2089,2090,2091],{},"Rightward velocity at least ",[327,2092,2079],{},[2058,2094,2082],{},[2058,2096,2097],{},"Closes even when the row is past the open threshold.",[2040,2099,2100,2105,2107],{},[2058,2101,2060,2102],{},[327,2103,2104],{},"0.5 × rowWidth",[2058,2106,2082],{},[2058,2108,2109,2110,334],{},"Animates through the row and emits ",[327,2111,333],{},[2040,2113,2114,2119,2121],{},[2058,2115,2076,2116],{},[327,2117,2118],{},"1200px\u002Fs",[2058,2120,2082],{},[2058,2122,2123,2124,2126],{},"Emits ",[327,2125,333],{}," regardless of position.",[2040,2128,2129,2132,2137],{},[2058,2130,2131],{},"Release animation",[2058,2133,2134],{},[327,2135,2136],{},"240ms",[2058,2138,2139],{},"Animates to closed, open, or committed position.",[324,2141,2142,2143,2146,2147,2150],{},"The gesture stays undecided for the first ",[327,2144,2145],{},"8px",". It then claims drags within the horizontal ",[327,2148,2149],{},"45°"," cone and yields predominantly vertical drags for the rest of that touch.",[324,2152,2153,2154,2157,2158,2160,2161,2164,2165,2164,2168,2171,2172,2175],{},"Only the open ",[327,2155,2156],{},"threshold"," is exposed by ",[327,2159,329],{},". The core primitive also has ",[327,2162,2163],{},"commitThreshold",", ",[327,2166,2167],{},"commitVelocity",[327,2169,2170],{},"velocityThreshold",", and ",[327,2173,2174],{},"duration"," props, but the current kit wrapper does not forward them.",[343,2177,2178],{},[324,2179,2180,2181,2184],{},"The action panel is physically anchored to the trailing right edge and opens with a leftward swipe. ",[327,2182,2183],{},"side=\"left\""," currently changes action alignment styling only; it does not move the panel or reverse the gesture.",[319,2186,2188],{"id":2187},"props","Props",[2034,2190,2191,2206],{},[2037,2192,2193],{},[2040,2194,2195,2198,2201,2203],{},[2043,2196,2197],{},"Prop",[2043,2199,2200],{},"Type",[2043,2202,2048],{},[2043,2204,2205],{},"Description",[2053,2207,2208,2225,2240,2261,2278,2295,2317,2337,2355],{},[2040,2209,2210,2214,2219,2222],{},[2058,2211,2212],{},[327,2213,361],{},[2058,2215,2216],{},[327,2217,2218],{},"number",[2058,2220,2221],{},"Required",[2058,2223,2224],{},"Revealed action-panel width in pixels and the basis for the open threshold.",[2040,2226,2227,2231,2235,2237],{},[2058,2228,2229],{},[327,2230,357],{},[2058,2232,2233],{},[327,2234,2218],{},[2058,2236,2221],{},[2058,2238,2239],{},"Full row width in pixels and the basis for the commit threshold.",[2040,2241,2242,2246,2251,2256],{},[2058,2243,2244],{},[327,2245,609],{},[2058,2247,2248],{},[327,2249,2250],{},"boolean",[2058,2252,2253],{},[327,2254,2255],{},"undefined",[2058,2257,2258,2259,334],{},"Controlled open state used by ",[327,2260,972],{},[2040,2262,2263,2267,2271,2275],{},[2058,2264,2265],{},[327,2266,1675],{},[2058,2268,2269],{},[327,2270,2250],{},[2058,2272,2273],{},[327,2274,482],{},[2058,2276,2277],{},"Initial open state when uncontrolled.",[2040,2279,2280,2284,2288,2292],{},[2058,2281,2282],{},[327,2283,1679],{},[2058,2285,2286],{},[327,2287,2250],{},[2058,2289,2290],{},[327,2291,482],{},[2058,2293,2294],{},"Disables drag interaction.",[2040,2296,2297,2301,2305,2311],{},[2058,2298,2299],{},[327,2300,2156],{},[2058,2302,2303],{},[327,2304,2218],{},[2058,2306,2307,2310],{},[327,2308,2309],{},"0.5"," in core",[2058,2312,2313,2314,2316],{},"Fraction of ",[327,2315,361],{}," required to snap open without a velocity override.",[2040,2318,2319,2324,2329,2334],{},[2058,2320,2321],{},[327,2322,2323],{},"side",[2058,2325,2326],{},[327,2327,2328],{},"'left' | 'right'",[2058,2330,2331],{},[327,2332,2333],{},"'right'",[2058,2335,2336],{},"Action alignment theme variant; the physical panel remains on the right.",[2040,2338,2339,2343,2348,2352],{},[2058,2340,2341],{},[327,2342,1786],{},[2058,2344,2345],{},[327,2346,2347],{},"any",[2058,2349,2350],{},[327,2351,2255],{},[2058,2353,2354],{},"Classes merged onto the root slot.",[2040,2356,2357,2361,2366,2370],{},[2058,2358,2359],{},[327,2360,1790],{},[2058,2362,2363],{},[327,2364,2365],{},"Partial\u003CRecord\u003CSwipeActionSlot, any>>",[2058,2367,2368],{},[327,2369,2255],{},[2058,2371,2372],{},"Per-instance theme slot overrides.",[324,2374,2375,2376,2378,2379,358,2381,2384],{},"Keep ",[327,2377,2156],{}," between ",[327,2380,1985],{},[327,2382,2383],{},"1",". Widths must match the rendered layout; stale or approximate values produce incorrect snap and commit points.",[319,2386,2388],{"id":2387},"emits","Emits",[2034,2390,2391,2403],{},[2037,2392,2393],{},[2040,2394,2395,2398,2401],{},[2043,2396,2397],{},"Event",[2043,2399,2400],{},"Payload",[2043,2402,2205],{},[2053,2404,2405,2419],{},[2040,2406,2407,2412,2416],{},[2058,2408,2409],{},[327,2410,2411],{},"update:open",[2058,2413,2414],{},[327,2415,2250],{},[2058,2417,2418],{},"The row snapped open, closed, or was closed through the slot helper.",[2040,2420,2421,2425,2428],{},[2058,2422,2423],{},[327,2424,333],{},[2058,2426,2427],{},"none",[2058,2429,2430],{},"A release crossed the core full-swipe position or velocity threshold.",[324,2432,2433,2435],{},[327,2434,333],{}," describes the gesture; it does not delete, archive, or otherwise mutate application data for you.",[319,2437,2439],{"id":2438},"slots","Slots",[2034,2441,2442,2453],{},[2037,2443,2444],{},[2040,2445,2446,2449,2451],{},[2043,2447,2448],{},"Slot",[2043,2450,2188],{},[2043,2452,2205],{},[2053,2454,2455,2469],{},[2040,2456,2457,2461,2466],{},[2058,2458,2459],{},[327,2460,1207],{},[2058,2462,2463],{},[327,2464,2465],{},"{ open: boolean, close: () => void }",[2058,2467,2468],{},"Foreground row content that moves with the gesture.",[2040,2470,2471,2475,2479],{},[2058,2472,2473],{},[327,2474,774],{},[2058,2476,2477],{},[327,2478,2465],{},[2058,2480,2481],{},"Trailing action-panel content revealed beneath the row.",[319,2483,2485],{"id":2484},"styling-and-theming","Styling and theming",[324,2487,2488,2489,2492,2493,334],{},"Override globally through ",[327,2490,2491],{},"appConfig.ui.swipeAction"," or locally with ",[327,2494,1790],{},[2034,2496,2497,2507],{},[2037,2498,2499],{},[2040,2500,2501,2504],{},[2043,2502,2503],{},"UI slot",[2043,2505,2506],{},"Purpose",[2053,2508,2509,2519,2528],{},[2040,2510,2511,2516],{},[2058,2512,2513],{},[327,2514,2515],{},"root",[2058,2517,2518],{},"Relative clipping container around the primitive.",[2040,2520,2521,2525],{},[2058,2522,2523],{},[327,2524,774],{},[2058,2526,2527],{},"Flex wrapper inside the trailing action panel.",[2040,2529,2530,2535],{},[2058,2531,2532],{},[327,2533,2534],{},"content",[2058,2536,2537],{},"Flex wrapper around the foreground row content.",[324,2539,2002,2540,2542,2543,2546,2547,2550,2551,2553,2554,334],{},[327,2541,2323],{}," variant sets ",[327,2544,2545],{},"justify-start"," or ",[327,2548,2549],{},"justify-end"," on ",[327,2552,774],{},". The default theme is light-mode-oriented: the foreground is white and the action wrapper uses ",[327,2555,2556],{},"neutral-100",[319,2558,299],{"id":2559},"accessibility",[324,2561,2562,2564,2565,2567],{},[327,2563,329],{}," does not currently add native button, adjustable, group, expanded-state, or gesture instructions to the row. Swipe gestures also have no direct keyboard or switch-control equivalent. Every action in the ",[327,2566,774],{}," slot should therefore be an independently labeled native control, and any destructive full-swipe behavior should have a visible, non-gesture alternative.",[324,2569,2570,2571,2164,2574,2171,2577,2580],{},"The examples add Lynx ",[327,2572,2573],{},"accessibility-element",[327,2575,2576],{},"accessibility-traits",[327,2578,2579],{},"accessibility-label"," attributes to tappable action views. Also expose the same operation elsewhere when a row can be committed by swiping, and consider confirmation or undo for destructive actions.",[319,2582,2584],{"id":2583},"platform-notes","Platform notes",[1968,2586,2587,2590,2593,2601,2604],{},[1971,2588,2589],{},"Touch tracking, axis locking, velocity calculation, clamping, and release animation run on the Lynx main thread.",[1971,2591,2592],{},"The component is designed for rows inside vertical native lists; predominantly vertical gestures are released without moving or snapping the row.",[1971,2594,2595,2596,358,2598,2600],{},"There is no automatic measurement. Recalculate and pass ",[327,2597,357],{},[327,2599,361],{}," when layout width changes.",[1971,2602,2603],{},"Only a trailing right-edge panel and leftward reveal gesture are implemented today. RTL and leading-edge reveal are not exposed.",[1971,2605,2606],{},"A full-swipe commit should update or remove the affected row promptly so the completed translation does not leave stale content on screen.",[319,2608,2610],{"id":2609},"related-components","Related components",[1968,2612,2613,2621,2629],{},[1971,2614,2615,2620],{},[2616,2617,2618],"a",{"href":260},[327,2619,259],{}," for paging between full content panels.",[1971,2622,2623,2628],{},[2616,2624,2625],{"href":64},[327,2626,2627],{},"ActionSheet"," for presenting a temporary list of actions.",[1971,2630,2631,2634],{},[327,2632,2633],{},"DropdownMenu"," for actions opened by an explicit trigger.",[2636,2637,2638],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":369,"searchDepth":376,"depth":409,"links":2640},[2641,2642,2648,2651,2652,2653,2654,2655,2656,2657],{"id":321,"depth":409,"text":322},{"id":350,"depth":409,"text":351,"children":2643},[2644,2645,2646,2647],{"id":961,"depth":437,"text":962},{"id":1472,"depth":437,"text":1473},{"id":1668,"depth":437,"text":1669},{"id":1780,"depth":437,"text":1781},{"id":1965,"depth":409,"text":1966,"children":2649},[2650],{"id":2031,"depth":437,"text":2032},{"id":2187,"depth":409,"text":2188},{"id":2387,"depth":409,"text":2388},{"id":2438,"depth":409,"text":2439},{"id":2484,"depth":409,"text":2485},{"id":2559,"depth":409,"text":299},{"id":2583,"depth":409,"text":2584},{"id":2609,"depth":409,"text":2610},"Reveal trailing row actions or commit an action with a full swipe.","md",[2661],{"label":2662,"icon":2663,"to":2664,"target":2665},"Source","i-simple-icons-github","https:\u002F\u002Fgithub.com\u002FKealanAU\u002Fvyui\u002Fblob\u002Fmain\u002Fpackages\u002Fkit\u002Fsrc\u002Fcomponents\u002FSwipeAction.vue","_blank",{},{"icon":257},{"title":254,"description":2658},"KVelyXqKVMgoN2ieVVmQT-xQKu03J3P6J-kjqkY1Oi4",[2671,2673],{"title":249,"path":250,"stem":251,"description":2672,"icon":-1,"children":-1,"navigation":-1},"Show progress through an ordered, optionally linear sequence of steps.",{"title":259,"path":260,"stem":261,"description":2674,"icon":-1,"children":-1,"navigation":-1},"Present swipeable, snapping content as a paged carousel.",1783464078670]