[{"data":1,"prerenderedAt":1659},["ShallowReactive",2],{"navigation":3,"\u002Fcomponents\u002Fsortable":313,"\u002Fcomponents\u002Fsortable-surround":1654},[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":244,"body":315,"description":1643,"extension":1030,"links":1644,"meta":1650,"navigation":1651,"package":60,"path":245,"seo":1652,"stem":246,"__hash__":1653},"docs\u002F3.components\u002Fsortable.md",{"type":316,"value":317,"toc":1627},"minimark",[318,323,338,343,351,365,369,381,849,852,857,864,927,930,934,937,992,1047,1050,1054,1060,1106,1110,1153,1157,1299,1328,1332,1362,1379,1383,1412,1424,1428,1437,1482,1485,1533,1546,1549,1557,1560,1564,1591,1595,1623],[319,320,322],"h2",{"id":321},"overview","Overview",[324,325,326,330,331,333,334,337],"p",{},[327,328,329],"code",{},"VySortable"," renders a styled, vertically reorderable list on top of the ",[327,332,31],{}," Sortable primitives. A long press lifts a row, movement shifts neighboring rows on the main thread, and release writes the new array order through ",[327,335,336],{},"v-model",".",[339,340],"component-code",{"height":341,"name":342},"280px","sortable-example",[344,345,348],"callout",{"icon":346,"color":347},"i-lucide-pointer","warning",[324,349,350],{},"Drag-to-reorder isn't wired up in the web preview yet, so the items won't move here — view this on a device or in Lynx Explorer for the real interaction. The code below runs as-is on iOS and Android.",[344,352,353],{"icon":34},[324,354,355,356,358,359,364],{},"Styled on top of the ",[327,357,31],{}," Sortable primitives, whose underlying gesture is the headless ",[360,361,362],"a",{"href":124},[327,363,123],{}," primitive. Reach for those when you need a non-list drag interaction.",[319,366,368],{"id":367},"usage","Usage",[324,370,371,373,374,376,377,380],{},[327,372,329],{}," is a controlled component in normal use. Bind an array with ",[327,375,336],{}," and render each row through the ",[327,378,379],{},"item"," slot.",[382,383,388],"pre",{"className":384,"code":385,"language":386,"meta":387,"style":387},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { VyIcon, VySortable } from '@vyui\u002Fkit'\n\nconst tasks = ref([\n  { id: 'design', label: 'Design the screen' },\n  { id: 'build', label: 'Build the interaction' },\n  { id: 'test', label: 'Test on device' },\n  { id: 'ship', label: 'Ship the release' },\n])\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CVySortable v-model=\"tasks\">\n    \u003Ctemplate #item=\"{ item, index }\">\n      \u003Cview class=\"flex min-w-0 flex-1 flex-row items-center gap-3\">\n        \u003CVyIcon name=\"i-lucide-grip-vertical\" class=\"shrink-0 text-neutral-400\" \u002F>\n        \u003Ctext class=\"min-w-0 flex-1\">{{ index + 1 }}. {{ item.label }}\u003C\u002Ftext>\n      \u003C\u002Fview>\n    \u003C\u002Ftemplate>\n  \u003C\u002FVySortable>\n\u003C\u002Ftemplate>\n","vue","",[327,389,390,425,453,479,486,503,540,571,602,633,639,649,654,664,686,721,744,779,810,820,830,840],{"__ignoreMap":387},[391,392,395,399,403,407,410,413,416,420,422],"span",{"class":393,"line":394},"line",1,[391,396,398],{"class":397},"sMK4o","\u003C",[391,400,402],{"class":401},"swJcz","script",[391,404,406],{"class":405},"spNyl"," setup",[391,408,409],{"class":405}," lang",[391,411,412],{"class":397},"=",[391,414,415],{"class":397},"\"",[391,417,419],{"class":418},"sfazB","ts",[391,421,415],{"class":397},[391,423,424],{"class":397},">\n",[391,426,428,432,435,439,442,445,448,450],{"class":393,"line":427},2,[391,429,431],{"class":430},"s7zQu","import",[391,433,434],{"class":397}," {",[391,436,438],{"class":437},"sTEyZ"," ref",[391,440,441],{"class":397}," }",[391,443,444],{"class":430}," from",[391,446,447],{"class":397}," '",[391,449,386],{"class":418},[391,451,452],{"class":397},"'\n",[391,454,456,458,460,463,466,469,471,473,475,477],{"class":393,"line":455},3,[391,457,431],{"class":430},[391,459,434],{"class":397},[391,461,462],{"class":437}," VyIcon",[391,464,465],{"class":397},",",[391,467,468],{"class":437}," VySortable",[391,470,441],{"class":397},[391,472,444],{"class":430},[391,474,447],{"class":397},[391,476,36],{"class":418},[391,478,452],{"class":397},[391,480,482],{"class":393,"line":481},4,[391,483,485],{"emptyLinePlaceholder":484},true,"\n",[391,487,489,492,495,497,500],{"class":393,"line":488},5,[391,490,491],{"class":405},"const",[391,493,494],{"class":437}," tasks ",[391,496,412],{"class":397},[391,498,438],{"class":499},"s2Zo4",[391,501,502],{"class":437},"([\n",[391,504,506,509,512,515,517,520,523,525,528,530,532,535,537],{"class":393,"line":505},6,[391,507,508],{"class":397},"  {",[391,510,511],{"class":401}," id",[391,513,514],{"class":397},":",[391,516,447],{"class":397},[391,518,519],{"class":418},"design",[391,521,522],{"class":397},"'",[391,524,465],{"class":397},[391,526,527],{"class":401}," label",[391,529,514],{"class":397},[391,531,447],{"class":397},[391,533,534],{"class":418},"Design the screen",[391,536,522],{"class":397},[391,538,539],{"class":397}," },\n",[391,541,543,545,547,549,551,554,556,558,560,562,564,567,569],{"class":393,"line":542},7,[391,544,508],{"class":397},[391,546,511],{"class":401},[391,548,514],{"class":397},[391,550,447],{"class":397},[391,552,553],{"class":418},"build",[391,555,522],{"class":397},[391,557,465],{"class":397},[391,559,527],{"class":401},[391,561,514],{"class":397},[391,563,447],{"class":397},[391,565,566],{"class":418},"Build the interaction",[391,568,522],{"class":397},[391,570,539],{"class":397},[391,572,574,576,578,580,582,585,587,589,591,593,595,598,600],{"class":393,"line":573},8,[391,575,508],{"class":397},[391,577,511],{"class":401},[391,579,514],{"class":397},[391,581,447],{"class":397},[391,583,584],{"class":418},"test",[391,586,522],{"class":397},[391,588,465],{"class":397},[391,590,527],{"class":401},[391,592,514],{"class":397},[391,594,447],{"class":397},[391,596,597],{"class":418},"Test on device",[391,599,522],{"class":397},[391,601,539],{"class":397},[391,603,605,607,609,611,613,616,618,620,622,624,626,629,631],{"class":393,"line":604},9,[391,606,508],{"class":397},[391,608,511],{"class":401},[391,610,514],{"class":397},[391,612,447],{"class":397},[391,614,615],{"class":418},"ship",[391,617,522],{"class":397},[391,619,465],{"class":397},[391,621,527],{"class":401},[391,623,514],{"class":397},[391,625,447],{"class":397},[391,627,628],{"class":418},"Ship the release",[391,630,522],{"class":397},[391,632,539],{"class":397},[391,634,636],{"class":393,"line":635},10,[391,637,638],{"class":437},"])\n",[391,640,642,645,647],{"class":393,"line":641},11,[391,643,644],{"class":397},"\u003C\u002F",[391,646,402],{"class":401},[391,648,424],{"class":397},[391,650,652],{"class":393,"line":651},12,[391,653,485],{"emptyLinePlaceholder":484},[391,655,657,659,662],{"class":393,"line":656},13,[391,658,398],{"class":397},[391,660,661],{"class":401},"template",[391,663,424],{"class":397},[391,665,667,670,672,675,677,679,682,684],{"class":393,"line":666},14,[391,668,669],{"class":397},"  \u003C",[391,671,329],{"class":401},[391,673,674],{"class":405}," v-model",[391,676,412],{"class":397},[391,678,415],{"class":397},[391,680,681],{"class":418},"tasks",[391,683,415],{"class":397},[391,685,424],{"class":397},[391,687,689,692,694,697,699,701,703,706,709,711,714,717,719],{"class":393,"line":688},15,[391,690,691],{"class":397},"    \u003C",[391,693,661],{"class":401},[391,695,696],{"class":397}," #",[391,698,379],{"class":405},[391,700,412],{"class":397},[391,702,415],{"class":397},[391,704,705],{"class":397},"{",[391,707,708],{"class":437}," item",[391,710,465],{"class":397},[391,712,713],{"class":437}," index ",[391,715,716],{"class":397},"}",[391,718,415],{"class":397},[391,720,424],{"class":397},[391,722,724,727,730,733,735,737,740,742],{"class":393,"line":723},16,[391,725,726],{"class":397},"      \u003C",[391,728,729],{"class":401},"view",[391,731,732],{"class":405}," class",[391,734,412],{"class":397},[391,736,415],{"class":397},[391,738,739],{"class":418},"flex min-w-0 flex-1 flex-row items-center gap-3",[391,741,415],{"class":397},[391,743,424],{"class":397},[391,745,747,750,753,756,758,760,763,765,767,769,771,774,776],{"class":393,"line":746},17,[391,748,749],{"class":397},"        \u003C",[391,751,752],{"class":401},"VyIcon",[391,754,755],{"class":405}," name",[391,757,412],{"class":397},[391,759,415],{"class":397},[391,761,762],{"class":418},"i-lucide-grip-vertical",[391,764,415],{"class":397},[391,766,732],{"class":405},[391,768,412],{"class":397},[391,770,415],{"class":397},[391,772,773],{"class":418},"shrink-0 text-neutral-400",[391,775,415],{"class":397},[391,777,778],{"class":397}," \u002F>\n",[391,780,782,784,787,789,791,793,796,798,801,804,806,808],{"class":393,"line":781},18,[391,783,749],{"class":397},[391,785,786],{"class":401},"text",[391,788,732],{"class":405},[391,790,412],{"class":397},[391,792,415],{"class":397},[391,794,795],{"class":418},"min-w-0 flex-1",[391,797,415],{"class":397},[391,799,800],{"class":397},">",[391,802,803],{"class":437},"{{ index + 1 }}. {{ item.label }}",[391,805,644],{"class":397},[391,807,786],{"class":401},[391,809,424],{"class":397},[391,811,813,816,818],{"class":393,"line":812},19,[391,814,815],{"class":397},"      \u003C\u002F",[391,817,729],{"class":401},[391,819,424],{"class":397},[391,821,823,826,828],{"class":393,"line":822},20,[391,824,825],{"class":397},"    \u003C\u002F",[391,827,661],{"class":401},[391,829,424],{"class":397},[391,831,833,836,838],{"class":393,"line":832},21,[391,834,835],{"class":397},"  \u003C\u002F",[391,837,329],{"class":401},[391,839,424],{"class":397},[391,841,843,845,847],{"class":393,"line":842},22,[391,844,644],{"class":397},[391,846,661],{"class":401},[391,848,424],{"class":397},[324,850,851],{},"Press and hold a row for 250 ms, then drag vertically. A quick tap or an early scroll movement does not start a reorder.",[853,854,856],"h3",{"id":855},"immediate-drag","Immediate drag",[324,858,859,860,863],{},"Set ",[327,861,862],{},"longPressMs=\"0\""," when the list is not inside a vertical scroller and should engage as soon as touch begins.",[382,865,867],{"className":384,"code":866,"language":386,"meta":387,"style":387},"\u003CVySortable v-model=\"items\" :long-press-ms=\"0\">\n  \u003Ctemplate #item=\"{ item }\">\n    \u003Ctext class=\"flex-1\">{{ item.label }}\u003C\u002Ftext>\n  \u003C\u002Ftemplate>\n\u003C\u002FVySortable>\n",[327,868,869,904,909,914,919],{"__ignoreMap":387},[391,870,871,873,875,877,879,881,884,886,889,892,894,896,900,902],{"class":393,"line":394},[391,872,398],{"class":397},[391,874,329],{"class":401},[391,876,674],{"class":405},[391,878,412],{"class":397},[391,880,415],{"class":397},[391,882,883],{"class":437},"items",[391,885,415],{"class":397},[391,887,888],{"class":397}," :",[391,890,891],{"class":405},"long-press-ms",[391,893,412],{"class":397},[391,895,415],{"class":397},[391,897,899],{"class":898},"sbssI","0",[391,901,415],{"class":397},[391,903,424],{"class":397},[391,905,906],{"class":393,"line":427},[391,907,908],{"class":437},"  \u003Ctemplate #item=\"{ item }\">\n",[391,910,911],{"class":393,"line":455},[391,912,913],{"class":437},"    \u003Ctext class=\"flex-1\">{{ item.label }}\u003C\u002Ftext>\n",[391,915,916],{"class":393,"line":481},[391,917,918],{"class":437},"  \u003C\u002Ftemplate>\n",[391,920,921,923,925],{"class":393,"line":488},[391,922,644],{"class":397},[391,924,329],{"class":401},[391,926,424],{"class":397},[324,928,929],{},"Immediate activation can compete with scrolling, so retain the default delay for lists embedded in scrollable screens.",[853,931,933],{"id":932},"sizes","Sizes",[324,935,936],{},"The size controls both the themed row padding and the fixed height used by the reorder calculations.",[382,938,940],{"className":384,"code":939,"language":386,"meta":387,"style":387},"\u003CVySortable v-model=\"items\" size=\"lg\">\n  \u003Ctemplate #item=\"{ item }\">\n    \u003Ctext class=\"flex-1\">{{ item.label }}\u003C\u002Ftext>\n  \u003C\u002Ftemplate>\n\u003C\u002FVySortable>\n",[327,941,942,972,976,980,984],{"__ignoreMap":387},[391,943,944,946,948,950,952,954,956,958,961,963,965,968,970],{"class":393,"line":394},[391,945,398],{"class":397},[391,947,329],{"class":401},[391,949,674],{"class":405},[391,951,412],{"class":397},[391,953,415],{"class":397},[391,955,883],{"class":437},[391,957,415],{"class":397},[391,959,960],{"class":405}," size",[391,962,412],{"class":397},[391,964,415],{"class":397},[391,966,967],{"class":418},"lg",[391,969,415],{"class":397},[391,971,424],{"class":397},[391,973,974],{"class":393,"line":427},[391,975,908],{"class":437},[391,977,978],{"class":393,"line":455},[391,979,913],{"class":437},[391,981,982],{"class":393,"line":481},[391,983,918],{"class":437},[391,985,986,988,990],{"class":393,"line":488},[391,987,644],{"class":397},[391,989,329],{"class":401},[391,991,424],{"class":397},[993,994,995,1008],"table",{},[996,997,998],"thead",{},[999,1000,1001,1005],"tr",{},[1002,1003,1004],"th",{},"Size",[1002,1006,1007],{},"Fixed row height",[1009,1010,1011,1024,1036],"tbody",{},[999,1012,1013,1019],{},[1014,1015,1016],"td",{},[327,1017,1018],{},"sm",[1014,1020,1021],{},[327,1022,1023],{},"40px",[999,1025,1026,1031],{},[1014,1027,1028],{},[327,1029,1030],{},"md",[1014,1032,1033],{},[327,1034,1035],{},"52px",[999,1037,1038,1042],{},[1014,1039,1040],{},[327,1041,967],{},[1014,1043,1044],{},[327,1045,1046],{},"68px",[324,1048,1049],{},"Keep slot content within the selected row height. Variable-height rows are not supported by the kit wrapper.",[853,1051,1053],{"id":1052},"disabled-list","Disabled list",[324,1055,859,1056,1059],{},[327,1057,1058],{},"disabled"," to prevent every row from arming or dragging.",[382,1061,1063],{"className":384,"code":1062,"language":386,"meta":387,"style":387},"\u003CVySortable v-model=\"items\" disabled>\n  \u003Ctemplate #item=\"{ item }\">\n    \u003Ctext class=\"flex-1\">{{ item.label }}\u003C\u002Ftext>\n  \u003C\u002Ftemplate>\n\u003C\u002FVySortable>\n",[327,1064,1065,1086,1090,1094,1098],{"__ignoreMap":387},[391,1066,1067,1069,1071,1073,1075,1077,1079,1081,1084],{"class":393,"line":394},[391,1068,398],{"class":397},[391,1070,329],{"class":401},[391,1072,674],{"class":405},[391,1074,412],{"class":397},[391,1076,415],{"class":397},[391,1078,883],{"class":437},[391,1080,415],{"class":397},[391,1082,1083],{"class":405}," disabled",[391,1085,424],{"class":397},[391,1087,1088],{"class":393,"line":427},[391,1089,908],{"class":437},[391,1091,1092],{"class":393,"line":455},[391,1093,913],{"class":437},[391,1095,1096],{"class":393,"line":481},[391,1097,918],{"class":437},[391,1099,1100,1102,1104],{"class":393,"line":488},[391,1101,644],{"class":397},[391,1103,329],{"class":401},[391,1105,424],{"class":397},[319,1107,1109],{"id":1108},"features-and-behavior","Features and behavior",[1111,1112,1113,1117,1120,1123,1126,1133,1136,1139,1147],"ul",{},[1114,1115,1116],"li",{},"Reordering is vertical and uses the row's index in the bound array.",[1114,1118,1119],{},"A press must remain within six pixels of its starting point until the long-press delay elapses. Earlier movement disarms the pending drag so normal scrolling can continue.",[1114,1121,1122],{},"During a drag, the lifted row follows the finger and affected siblings translate by one fixed row height.",[1114,1124,1125],{},"The provisional target is the starting index plus the rounded drag distance divided by the fixed item height, clamped to the mounted list bounds.",[1114,1127,1128,1129,1132],{},"A release velocity of at least ",[327,1130,1131],{},"300px\u002Fs"," can carry the item one additional row in the same direction.",[1114,1134,1135],{},"Releasing or cancelling the touch clears every temporary transform. The reordered array is emitted only when the final index differs from the starting index.",[1114,1137,1138],{},"Only one row can own the drag gesture at a time.",[1114,1140,1141,1143,1144,1146],{},[327,1142,1058],{}," blocks all rows. The kit wrapper does not expose the core primitive's per-row ",[327,1145,1058],{}," prop.",[1114,1148,1149,1150,1152],{},"The wrapper keys rendered rows by their current index. Treat the ",[327,1151,379],{}," slot data as the source of truth after each reorder.",[319,1154,1156],{"id":1155},"props","Props",[993,1158,1159,1175],{},[996,1160,1161],{},[999,1162,1163,1166,1169,1172],{},[1002,1164,1165],{},"Prop",[1002,1167,1168],{},"Type",[1002,1170,1171],{},"Default",[1002,1173,1174],{},"Description",[1009,1176,1177,1199,1218,1241,1261,1280],{},[999,1178,1179,1184,1189,1194],{},[1014,1180,1181],{},[327,1182,1183],{},"modelValue",[1014,1185,1186],{},[327,1187,1188],{},"T[]",[1014,1190,1191],{},[327,1192,1193],{},"undefined",[1014,1195,1196,1197,337],{},"Controlled ordered items, used by ",[327,1198,336],{},[999,1200,1201,1205,1210,1215],{},[1014,1202,1203],{},[327,1204,1058],{},[1014,1206,1207],{},[327,1208,1209],{},"boolean",[1014,1211,1212],{},[327,1213,1214],{},"false",[1014,1216,1217],{},"Prevents drag activation for every row.",[999,1219,1220,1225,1230,1235],{},[1014,1221,1222],{},[327,1223,1224],{},"longPressMs",[1014,1226,1227],{},[327,1228,1229],{},"number",[1014,1231,1232],{},[327,1233,1234],{},"250",[1014,1236,1237,1238,1240],{},"Hold duration in milliseconds before a row lifts. Use ",[327,1239,899],{}," for immediate activation.",[999,1242,1243,1248,1253,1258],{},[1014,1244,1245],{},[327,1246,1247],{},"size",[1014,1249,1250],{},[327,1251,1252],{},"'sm' | 'md' | 'lg'",[1014,1254,1255],{},[327,1256,1257],{},"'md'",[1014,1259,1260],{},"Themed row scale and fixed reorder height.",[999,1262,1263,1268,1273,1277],{},[1014,1264,1265],{},[327,1266,1267],{},"class",[1014,1269,1270],{},[327,1271,1272],{},"any",[1014,1274,1275],{},[327,1276,1193],{},[1014,1278,1279],{},"Classes merged onto the root slot.",[999,1281,1282,1287,1292,1296],{},[1014,1283,1284],{},[327,1285,1286],{},"ui",[1014,1288,1289],{},[327,1290,1291],{},"Partial\u003CRecord\u003CSortableSlot, any>>",[1014,1293,1294],{},[327,1295,1193],{},[1014,1297,1298],{},"Per-instance theme slot overrides.",[324,1300,1301,1302,1305,1306,1305,1309,1312,1313,1316,1317,1320,1321,1324,1325,1327],{},"The kit wrapper does not expose the core ",[327,1303,1304],{},"defaultValue",", ",[327,1307,1308],{},"itemHeight",[327,1310,1311],{},"autoScrollEdge",", or ",[327,1314,1315],{},"autoScrollSpeed"," props. Use ",[327,1318,1319],{},"SortableRoot"," and ",[327,1322,1323],{},"SortableItem"," from ",[327,1326,31],{}," when those controls are required.",[319,1329,1331],{"id":1330},"emits","Emits",[993,1333,1334,1346],{},[996,1335,1336],{},[999,1337,1338,1341,1344],{},[1002,1339,1340],{},"Event",[1002,1342,1343],{},"Payload",[1002,1345,1174],{},[1009,1347,1348],{},[999,1349,1350,1355,1359],{},[1014,1351,1352],{},[327,1353,1354],{},"update:modelValue",[1014,1356,1357],{},[327,1358,1188],{},[1014,1360,1361],{},"Emitted with a new array after a row changes position.",[324,1363,1364,1365,1305,1368,1371,1372,1375,1376,1378],{},"The underlying core root also defines ",[327,1366,1367],{},"reorder",[327,1369,1370],{},"dragStart",", and ",[327,1373,1374],{},"dragEnd",", but ",[327,1377,329],{}," does not declare or explicitly re-emit them as part of its typed kit API.",[319,1380,1382],{"id":1381},"slots","Slots",[993,1384,1385,1396],{},[996,1386,1387],{},[999,1388,1389,1392,1394],{},[1002,1390,1391],{},"Slot",[1002,1393,1156],{},[1002,1395,1174],{},[1009,1397,1398],{},[999,1399,1400,1404,1409],{},[1014,1401,1402],{},[327,1403,379],{},[1014,1405,1406],{},[327,1407,1408],{},"{ item: T, index: number }",[1014,1410,1411],{},"Content rendered inside each fixed-height sortable row.",[324,1413,1414,1415,1417,1418,1421,1422,380],{},"The core ",[327,1416,1323],{}," slot also receives ",[327,1419,1420],{},"dragging",", but the kit wrapper does not forward that value to its ",[327,1423,379],{},[319,1425,1427],{"id":1426},"styling-and-theming","Styling and theming",[324,1429,1430,1431,1434,1435,337],{},"Override globally through ",[327,1432,1433],{},"appConfig.ui.sortable"," or locally with ",[327,1436,1286],{},[993,1438,1439,1449],{},[996,1440,1441],{},[999,1442,1443,1446],{},[1002,1444,1445],{},"UI slot",[1002,1447,1448],{},"Purpose",[1009,1450,1451,1461,1470],{},[999,1452,1453,1458],{},[1014,1454,1455],{},[327,1456,1457],{},"root",[1014,1459,1460],{},"Full-width vertical list container and overflow behavior.",[999,1462,1463,1467],{},[1014,1464,1465],{},[327,1466,379],{},[1014,1468,1469],{},"Row layout, background, divider, spacing, and disabled opacity.",[999,1471,1472,1477],{},[1014,1473,1474],{},[327,1475,1476],{},"handle",[1014,1478,1479,1480,337],{},"Reserved drag-handle styling; currently not applied by ",[327,1481,329],{},[324,1483,1484],{},"Theme variants are:",[993,1486,1487,1500],{},[996,1488,1489],{},[999,1490,1491,1494,1497],{},[1002,1492,1493],{},"Variant",[1002,1495,1496],{},"Values",[1002,1498,1499],{},"Effect",[1009,1501,1502,1519],{},[999,1503,1504,1508,1516],{},[1014,1505,1506],{},[327,1507,1247],{},[1014,1509,1510,1305,1512,1305,1514],{},[327,1511,1018],{},[327,1513,1030],{},[327,1515,967],{},[1014,1517,1518],{},"Changes row padding and text size; the wrapper also selects the matching fixed pixel height.",[999,1520,1521,1525,1530],{},[1014,1522,1523],{},[327,1524,1058],{},[1014,1526,1527],{},[327,1528,1529],{},"true",[1014,1531,1532],{},"Dims every row and adds the disabled cursor style.",[324,1534,1535,1536,1539,1540,1542,1543,1545],{},"The default root uses ",[327,1537,1538],{},"overflow-hidden",", and rows use a white background with neutral dividers. Add your own handle element in the ",[327,1541,379],{}," slot; the declared ",[327,1544,1476],{}," theme slot is not wired to a rendered element in the current wrapper.",[319,1547,299],{"id":1548},"accessibility",[324,1550,1551,1553,1554,1556],{},[327,1552,329],{}," currently uses touch-enabled Lynx ",[327,1555,729],{}," elements without an explicit accessibility role, label, state announcement, or keyboard\u002Fassistive reordering controls. The visual grip in an item slot is also decorative unless you provide additional semantics.",[324,1558,1559],{},"Do not make drag reordering the only way to perform an essential ordering task. Provide accessible move-up and move-down controls or another equivalent flow, announce successful order changes where appropriate, and test the complete interaction with VoiceOver and TalkBack.",[319,1561,1563],{"id":1562},"native-gesture-and-platform-notes","Native gesture and platform notes",[1111,1565,1566,1569,1579,1582,1585,1588],{},[1114,1567,1568],{},"Touch tracking, row transforms, sibling shifts, velocity sampling, and edge scrolling run in main-thread worklets to avoid a background-thread round trip on every move.",[1114,1570,1571,1572,1575,1576,337],{},"Long-press timing uses a main-thread ",[327,1573,1574],{},"requestAnimationFrame"," poller because the Lynx worklet runtime does not expose ",[327,1577,1578],{},"setTimeout",[1114,1580,1581],{},"The gesture listens to native touch start, move, end, and cancel events. It does not provide keyboard or mouse-specific drag behavior.",[1114,1583,1584],{},"Reorder state is committed back on the background thread only at drag start\u002Fend boundaries, rather than during every movement frame.",[1114,1586,1587],{},"The core primitive can nudge a scroll container near its top or bottom edge. The kit wrapper does not expose the edge and speed settings, and its default themed root hides overflow, so use the core primitives for custom long-list autoscroll composition.",[1114,1589,1590],{},"All mounted rows must share the same height. The transform and target-index math cannot account for variable-height content.",[319,1592,1594],{"id":1593},"related-components","Related components",[1111,1596,1597,1603,1608,1614],{},[1114,1598,1599,1602],{},[327,1600,1601],{},"FeedList"," for long scrolling collections that do not need reordering.",[1114,1604,1605,1607],{},[327,1606,103],{}," for static grouped content.",[1114,1609,1610,1613],{},[327,1611,1612],{},"SwipeAction"," for horizontal per-row actions.",[1114,1615,1616,1320,1618,1324,1620,1622],{},[327,1617,1319],{},[327,1619,1323],{},[327,1621,31],{}," for custom row heights, per-item disabling, drag lifecycle events, and autoscroll tuning.",[1624,1625,1626],"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 .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":387,"searchDepth":394,"depth":427,"links":1628},[1629,1630,1635,1636,1637,1638,1639,1640,1641,1642],{"id":321,"depth":427,"text":322},{"id":367,"depth":427,"text":368,"children":1631},[1632,1633,1634],{"id":855,"depth":455,"text":856},{"id":932,"depth":455,"text":933},{"id":1052,"depth":455,"text":1053},{"id":1108,"depth":427,"text":1109},{"id":1155,"depth":427,"text":1156},{"id":1330,"depth":427,"text":1331},{"id":1381,"depth":427,"text":1382},{"id":1426,"depth":427,"text":1427},{"id":1548,"depth":427,"text":299},{"id":1562,"depth":427,"text":1563},{"id":1593,"depth":427,"text":1594},"Reorder a vertical list with a native long-press drag gesture.",[1645],{"label":1646,"icon":1647,"to":1648,"target":1649},"Source","i-simple-icons-github","https:\u002F\u002Fgithub.com\u002FKealanAU\u002Fvyui\u002Fblob\u002Fmain\u002Fpackages\u002Fkit\u002Fsrc\u002Fcomponents\u002FSortable.vue","_blank",{},{"icon":247},{"title":244,"description":1643},"ht66muiwJdiDZcx2ok41L1AfGLZMfOMTIChpHvkmO_8",[1655,1657],{"title":239,"path":240,"stem":241,"description":1656,"icon":-1,"children":-1,"navigation":-1},"Select one value or a range by dragging along a track.",{"title":249,"path":250,"stem":251,"description":1658,"icon":-1,"children":-1,"navigation":-1},"Show progress through an ordered, optionally linear sequence of steps.",1783464078391]