[{"data":1,"prerenderedAt":9309},["ShallowReactive",2],{"navigation-source":3,"navigation-es":271,"docs-\u002Fes\u002Fdocs\u002Fgetting-started\u002Fmigrating-from-v2":474,"docs-surround-\u002Fes\u002Fdocs\u002Fgetting-started\u002Fmigrating-from-v2":9304},[4],{"title":5,"path":6,"stem":7,"children":8,"page":35},"Docs","\u002Fdocs","docs",[9,36,122,198,251],{"title":10,"icon":11,"path":12,"stem":13,"children":14,"page":35},"Getting started","i-lucide-rocket","\u002Fdocs\u002Fgetting-started","docs\u002F1.getting-started",[15,20,25,30],{"title":16,"path":17,"stem":18,"icon":19},"Introduction","\u002Fdocs\u002Fgetting-started\u002Fintroduction","docs\u002F1.getting-started\u002F1.introduction","i-lucide-book-open",{"title":21,"path":22,"stem":23,"icon":24},"Installation","\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002F1.getting-started\u002F2.installation","i-lucide-download",{"title":26,"path":27,"stem":28,"icon":29},"Quick start","\u002Fdocs\u002Fgetting-started\u002Fquick-start","docs\u002F1.getting-started\u002F3.quick-start","i-lucide-zap",{"title":31,"path":32,"stem":33,"icon":34},"Migrating from v2","\u002Fdocs\u002Fgetting-started\u002Fmigrating-from-v2","docs\u002F1.getting-started\u002F4.migrating-from-v2","i-lucide-arrow-right-left",false,{"title":37,"icon":38,"path":39,"stem":40,"children":41,"page":35},"Guides","i-lucide-book-marked","\u002Fdocs\u002Fguides","docs\u002F2.guides",[42,47,52,57,62,67,72,77,82,87,92,97,102,107,112,117],{"title":43,"path":44,"stem":45,"icon":46},"The provider","\u002Fdocs\u002Fguides\u002Fprovider","docs\u002F2.guides\u002F01.provider","i-lucide-layers",{"title":48,"path":49,"stem":50,"icon":51},"Drag and drop","\u002Fdocs\u002Fguides\u002Fdrag-and-drop","docs\u002F2.guides\u002F02.drag-and-drop","i-lucide-move",{"title":53,"path":54,"stem":55,"icon":56},"Sortable lists","\u002Fdocs\u002Fguides\u002Fsortable-lists","docs\u002F2.guides\u002F03.sortable-lists","i-lucide-list-ordered",{"title":58,"path":59,"stem":60,"icon":61},"Lists that share items","\u002Fdocs\u002Fguides\u002Fshared-lists","docs\u002F2.guides\u002F04.shared-lists","i-lucide-kanban",{"title":63,"path":64,"stem":65,"icon":66},"Trees","\u002Fdocs\u002Fguides\u002Ftrees","docs\u002F2.guides\u002F05.trees","i-lucide-folder-tree",{"title":68,"path":69,"stem":70,"icon":71},"Multi-drag and selection","\u002Fdocs\u002Fguides\u002Fmulti-drag","docs\u002F2.guides\u002F06.multi-drag","i-lucide-copy",{"title":73,"path":74,"stem":75,"icon":76},"The overlay","\u002Fdocs\u002Fguides\u002Foverlay","docs\u002F2.guides\u002F07.overlay","i-lucide-mouse-pointer-2",{"title":78,"path":79,"stem":80,"icon":81},"Axes, bounds and grids","\u002Fdocs\u002Fguides\u002Fconstraints","docs\u002F2.guides\u002F08.constraints","i-lucide-axis-3d",{"title":83,"path":84,"stem":85,"icon":86},"Deciding a drop","\u002Fdocs\u002Fguides\u002Fdrop-decisions","docs\u002F2.guides\u002F09.drop-decisions","i-lucide-check-check",{"title":88,"path":89,"stem":90,"icon":91},"Animations","\u002Fdocs\u002Fguides\u002Fanimations","docs\u002F2.guides\u002F10.animations","i-lucide-sparkles",{"title":93,"path":94,"stem":95,"icon":96},"Accessibility","\u002Fdocs\u002Fguides\u002Faccessibility","docs\u002F2.guides\u002F11.accessibility","i-lucide-accessibility",{"title":98,"path":99,"stem":100,"icon":101},"Virtual lists","\u002Fdocs\u002Fguides\u002Fvirtual-lists","docs\u002F2.guides\u002F12.virtual-lists","i-lucide-rows-3",{"title":103,"path":104,"stem":105,"icon":106},"Styling","\u002Fdocs\u002Fguides\u002Fstyling","docs\u002F2.guides\u002F13.styling","i-lucide-palette",{"title":108,"path":109,"stem":110,"icon":111},"Sensors and programmatic drags","\u002Fdocs\u002Fguides\u002Fsensors","docs\u002F2.guides\u002F14.sensors","i-lucide-joystick",{"title":113,"path":114,"stem":115,"icon":116},"DevTools","\u002Fdocs\u002Fguides\u002Fdevtools","docs\u002F2.guides\u002F15.devtools","i-lucide-bug",{"title":118,"path":119,"stem":120,"icon":121},"Files and other apps","\u002Fdocs\u002Fguides\u002Fnative","docs\u002F2.guides\u002F16.native","i-lucide-app-window",{"title":123,"icon":124,"path":125,"stem":126,"children":127,"page":35},"API","i-lucide-braces","\u002Fdocs\u002Fapi","docs\u002F3.api",[128,133,137,142,146,151,156,161,166,171,175,180,184,188,193],{"title":129,"path":130,"stem":131,"icon":132},"DnDProvider","\u002Fdocs\u002Fapi\u002Fdnd-provider","docs\u002F3.api\u002F01.dnd-provider","i-lucide-box",{"title":134,"path":135,"stem":136,"icon":51},"makeDraggable","\u002Fdocs\u002Fapi\u002Fmake-draggable","docs\u002F3.api\u002F02.make-draggable",{"title":138,"path":139,"stem":140,"icon":141},"makeDroppable","\u002Fdocs\u002Fapi\u002Fmake-droppable","docs\u002F3.api\u002F03.make-droppable","i-lucide-inbox",{"title":143,"path":144,"stem":145,"icon":56},"makeSortableList","\u002Fdocs\u002Fapi\u002Fmake-sortable-list","docs\u002F3.api\u002F04.make-sortable-list",{"title":147,"path":148,"stem":149,"icon":150},"makeSortableItem","\u002Fdocs\u002Fapi\u002Fmake-sortable-item","docs\u002F3.api\u002F05.make-sortable-item","i-lucide-grip-vertical",{"title":152,"path":153,"stem":154,"icon":155},"makeSortableTree","\u002Fdocs\u002Fapi\u002Fmake-sortable-tree","docs\u002F3.api\u002F06.make-sortable-tree","i-lucide-list-tree",{"title":157,"path":158,"stem":159,"icon":160},"makeSelectionArea","\u002Fdocs\u002Fapi\u002Fmake-selection-area","docs\u002F3.api\u002F07.make-selection-area","i-lucide-square-dashed-mouse-pointer",{"title":162,"path":163,"stem":164,"icon":165},"makeDragArea","\u002Fdocs\u002Fapi\u002Fmake-drag-area","docs\u002F3.api\u002F08.make-drag-area","i-lucide-frame",{"title":167,"path":168,"stem":169,"icon":170},"useDnD and monitors","\u002Fdocs\u002Fapi\u002Fuse-dnd","docs\u002F3.api\u002F09.use-dnd","i-lucide-radio",{"title":172,"path":173,"stem":174,"icon":29},"Events","\u002Fdocs\u002Fapi\u002Fevents","docs\u002F3.api\u002F10.events",{"title":176,"path":177,"stem":178,"icon":179},"Modifiers and collision","\u002Fdocs\u002Fapi\u002Fmodifiers","docs\u002F3.api\u002F11.modifiers","i-lucide-sliders-horizontal",{"title":181,"path":182,"stem":183,"icon":71},"DragPreview and overlay props","\u002Fdocs\u002Fapi\u002Fdrag-preview","docs\u002F3.api\u002F12.drag-preview",{"title":88,"path":185,"stem":186,"icon":187},"\u002Fdocs\u002Fapi\u002Fanimations","docs\u002F3.api\u002F13.animations","i-lucide-wand-sparkles",{"title":189,"path":190,"stem":191,"icon":192},"Sensors","\u002Fdocs\u002Fapi\u002Fsensors","docs\u002F3.api\u002F14.sensors","i-lucide-gamepad-2",{"title":194,"path":195,"stem":196,"icon":197},"Common types","\u002Fdocs\u002Fapi\u002Ftypes","docs\u002F3.api\u002F15.types","i-lucide-shapes",{"title":199,"path":200,"stem":201,"children":202,"icon":205},"Examples","\u002Fdocs\u002Fexamples","docs\u002F4.examples\u002F00.index",[203,206,211,216,221,226,231,236,241,246],{"title":204,"path":200,"stem":201,"icon":205},"Overview","i-lucide-layout-grid",{"title":207,"path":208,"stem":209,"icon":210},"Project board","\u002Fdocs\u002Fexamples\u002Fboard","docs\u002F4.examples\u002F01.board","i-lucide-square-kanban",{"title":212,"path":213,"stem":214,"icon":215},"Week calendar","\u002Fdocs\u002Fexamples\u002Fcalendar","docs\u002F4.examples\u002F02.calendar","i-lucide-calendar-days",{"title":217,"path":218,"stem":219,"icon":220},"File manager","\u002Fdocs\u002Fexamples\u002Ffile-manager","docs\u002F4.examples\u002F03.file-manager","i-lucide-folder-open",{"title":222,"path":223,"stem":224,"icon":225},"Block editor","\u002Fdocs\u002Fexamples\u002Fblock-editor","docs\u002F4.examples\u002F04.block-editor","i-lucide-blocks",{"title":227,"path":228,"stem":229,"icon":230},"Chess","\u002Fdocs\u002Fexamples\u002Fchess","docs\u002F4.examples\u002F05.chess","i-lucide-chess-knight",{"title":232,"path":233,"stem":234,"icon":235},"Form builder","\u002Fdocs\u002Fexamples\u002Fform-builder","docs\u002F4.examples\u002F06.form-builder","i-lucide-text-cursor-input",{"title":237,"path":238,"stem":239,"icon":240},"Design canvas","\u002Fdocs\u002Fexamples\u002Fdesign-canvas","docs\u002F4.examples\u002F07.design-canvas","i-lucide-pen-tool",{"title":242,"path":243,"stem":244,"icon":245},"Page builder","\u002Fdocs\u002Fexamples\u002Fpage-builder","docs\u002F4.examples\u002F08.page-builder","i-lucide-layout-template",{"title":247,"path":248,"stem":249,"icon":250},"Data table","\u002Fdocs\u002Fexamples\u002Fdata-table","docs\u002F4.examples\u002F09.data-table","i-lucide-table-2",{"title":252,"path":253,"stem":254,"children":255,"icon":257},"Changelog","\u002Fdocs\u002Fchangelog","docs\u002F5.changelog\u002F0.index",[256,258,263,267],{"title":204,"path":253,"stem":254,"icon":257},"i-lucide-history",{"title":259,"path":260,"stem":261,"icon":262},"3.0.0","\u002Fdocs\u002Fchangelog\u002Fv3-0-0","docs\u002F5.changelog\u002F997.v3-0-0","i-lucide-tag",{"title":264,"path":265,"stem":266,"icon":262},"3.0.0-beta.2","\u002Fdocs\u002Fchangelog\u002Fv3-0-0-beta-2","docs\u002F5.changelog\u002F998.v3-0-0-beta-2",{"title":268,"path":269,"stem":270,"icon":262},"3.0.0-beta.1","\u002Fdocs\u002Fchangelog\u002Fv3-0-0-beta-1","docs\u002F5.changelog\u002F999.v3-0-0-beta-1",[272],{"title":273,"path":274,"stem":275,"children":276,"page":35},"Es","\u002Fes","es",[277],{"title":278,"source":279,"path":280,"stem":281,"children":282,"page":35},"Documentación","6556add362","\u002Fes\u002Fdocs","es\u002Fdocs",[283,305,374,430],{"title":284,"source":285,"icon":11,"path":286,"stem":287,"children":288,"page":35},"Primeros pasos","e345edbff3","\u002Fes\u002Fdocs\u002Fgetting-started","es\u002Fdocs\u002F1.getting-started",[289,293,297,301],{"title":290,"path":291,"stem":292,"icon":19},"Introducción","\u002Fes\u002Fdocs\u002Fgetting-started\u002Fintroduction","es\u002Fdocs\u002F1.getting-started\u002F1.introduction",{"title":294,"path":295,"stem":296,"icon":24},"Instalación","\u002Fes\u002Fdocs\u002Fgetting-started\u002Finstallation","es\u002Fdocs\u002F1.getting-started\u002F2.installation",{"title":298,"path":299,"stem":300,"icon":29},"Inicio rápido","\u002Fes\u002Fdocs\u002Fgetting-started\u002Fquick-start","es\u002Fdocs\u002F1.getting-started\u002F3.quick-start",{"title":302,"path":303,"stem":304,"icon":34},"Migrar desde la v2","\u002Fes\u002Fdocs\u002Fgetting-started\u002Fmigrating-from-v2","es\u002Fdocs\u002F1.getting-started\u002F4.migrating-from-v2",{"title":306,"source":307,"icon":38,"path":308,"stem":309,"children":310,"page":35},"Guías","0338bbaa33","\u002Fes\u002Fdocs\u002Fguides","es\u002Fdocs\u002F2.guides",[311,315,319,323,327,331,335,339,343,347,351,355,359,363,367,370],{"title":312,"path":313,"stem":314,"icon":46},"El provider","\u002Fes\u002Fdocs\u002Fguides\u002Fprovider","es\u002Fdocs\u002F2.guides\u002F01.provider",{"title":316,"path":317,"stem":318,"icon":51},"Arrastrar y soltar","\u002Fes\u002Fdocs\u002Fguides\u002Fdrag-and-drop","es\u002Fdocs\u002F2.guides\u002F02.drag-and-drop",{"title":320,"path":321,"stem":322,"icon":56},"Listas ordenables","\u002Fes\u002Fdocs\u002Fguides\u002Fsortable-lists","es\u002Fdocs\u002F2.guides\u002F03.sortable-lists",{"title":324,"path":325,"stem":326,"icon":61},"Listas que comparten ítems","\u002Fes\u002Fdocs\u002Fguides\u002Fshared-lists","es\u002Fdocs\u002F2.guides\u002F04.shared-lists",{"title":328,"path":329,"stem":330,"icon":66},"Árboles","\u002Fes\u002Fdocs\u002Fguides\u002Ftrees","es\u002Fdocs\u002F2.guides\u002F05.trees",{"title":332,"path":333,"stem":334,"icon":71},"Multi-drag y selección","\u002Fes\u002Fdocs\u002Fguides\u002Fmulti-drag","es\u002Fdocs\u002F2.guides\u002F06.multi-drag",{"title":336,"path":337,"stem":338,"icon":76},"El overlay","\u002Fes\u002Fdocs\u002Fguides\u002Foverlay","es\u002Fdocs\u002F2.guides\u002F07.overlay",{"title":340,"path":341,"stem":342,"icon":81},"Ejes, límites y cuadrículas","\u002Fes\u002Fdocs\u002Fguides\u002Fconstraints","es\u002Fdocs\u002F2.guides\u002F08.constraints",{"title":344,"path":345,"stem":346,"icon":86},"Decidir un drop","\u002Fes\u002Fdocs\u002Fguides\u002Fdrop-decisions","es\u002Fdocs\u002F2.guides\u002F09.drop-decisions",{"title":348,"path":349,"stem":350,"icon":91},"Animaciones","\u002Fes\u002Fdocs\u002Fguides\u002Fanimations","es\u002Fdocs\u002F2.guides\u002F10.animations",{"title":352,"path":353,"stem":354,"icon":96},"Accesibilidad","\u002Fes\u002Fdocs\u002Fguides\u002Faccessibility","es\u002Fdocs\u002F2.guides\u002F11.accessibility",{"title":356,"path":357,"stem":358,"icon":101},"Listas virtuales","\u002Fes\u002Fdocs\u002Fguides\u002Fvirtual-lists","es\u002Fdocs\u002F2.guides\u002F12.virtual-lists",{"title":360,"path":361,"stem":362,"icon":106},"Estilos","\u002Fes\u002Fdocs\u002Fguides\u002Fstyling","es\u002Fdocs\u002F2.guides\u002F13.styling",{"title":364,"path":365,"stem":366,"icon":111},"Sensores y arrastres programáticos","\u002Fes\u002Fdocs\u002Fguides\u002Fsensors","es\u002Fdocs\u002F2.guides\u002F14.sensors",{"title":113,"path":368,"stem":369,"icon":116},"\u002Fes\u002Fdocs\u002Fguides\u002Fdevtools","es\u002Fdocs\u002F2.guides\u002F15.devtools",{"title":371,"path":372,"stem":373,"icon":121},"Archivos y otras apps","\u002Fes\u002Fdocs\u002Fguides\u002Fnative","es\u002Fdocs\u002F2.guides\u002F16.native",{"title":123,"source":375,"icon":124,"path":376,"stem":377,"children":378,"page":35},"5c96005c70","\u002Fes\u002Fdocs\u002Fapi","es\u002Fdocs\u002F3.api",[379,382,385,388,391,394,397,400,403,407,411,415,419,422,426],{"title":129,"path":380,"stem":381,"icon":132},"\u002Fes\u002Fdocs\u002Fapi\u002Fdnd-provider","es\u002Fdocs\u002F3.api\u002F01.dnd-provider",{"title":134,"path":383,"stem":384,"icon":51},"\u002Fes\u002Fdocs\u002Fapi\u002Fmake-draggable","es\u002Fdocs\u002F3.api\u002F02.make-draggable",{"title":138,"path":386,"stem":387,"icon":141},"\u002Fes\u002Fdocs\u002Fapi\u002Fmake-droppable","es\u002Fdocs\u002F3.api\u002F03.make-droppable",{"title":143,"path":389,"stem":390,"icon":56},"\u002Fes\u002Fdocs\u002Fapi\u002Fmake-sortable-list","es\u002Fdocs\u002F3.api\u002F04.make-sortable-list",{"title":147,"path":392,"stem":393,"icon":150},"\u002Fes\u002Fdocs\u002Fapi\u002Fmake-sortable-item","es\u002Fdocs\u002F3.api\u002F05.make-sortable-item",{"title":152,"path":395,"stem":396,"icon":155},"\u002Fes\u002Fdocs\u002Fapi\u002Fmake-sortable-tree","es\u002Fdocs\u002F3.api\u002F06.make-sortable-tree",{"title":157,"path":398,"stem":399,"icon":160},"\u002Fes\u002Fdocs\u002Fapi\u002Fmake-selection-area","es\u002Fdocs\u002F3.api\u002F07.make-selection-area",{"title":162,"path":401,"stem":402,"icon":165},"\u002Fes\u002Fdocs\u002Fapi\u002Fmake-drag-area","es\u002Fdocs\u002F3.api\u002F08.make-drag-area",{"title":404,"path":405,"stem":406,"icon":170},"useDnD y monitores","\u002Fes\u002Fdocs\u002Fapi\u002Fuse-dnd","es\u002Fdocs\u002F3.api\u002F09.use-dnd",{"title":408,"path":409,"stem":410,"icon":29},"Eventos","\u002Fes\u002Fdocs\u002Fapi\u002Fevents","es\u002Fdocs\u002F3.api\u002F10.events",{"title":412,"path":413,"stem":414,"icon":179},"Modificadores y colisión","\u002Fes\u002Fdocs\u002Fapi\u002Fmodifiers","es\u002Fdocs\u002F3.api\u002F11.modifiers",{"title":416,"path":417,"stem":418,"icon":71},"DragPreview y props del overlay","\u002Fes\u002Fdocs\u002Fapi\u002Fdrag-preview","es\u002Fdocs\u002F3.api\u002F12.drag-preview",{"title":348,"path":420,"stem":421,"icon":187},"\u002Fes\u002Fdocs\u002Fapi\u002Fanimations","es\u002Fdocs\u002F3.api\u002F13.animations",{"title":423,"path":424,"stem":425,"icon":192},"Sensores","\u002Fes\u002Fdocs\u002Fapi\u002Fsensors","es\u002Fdocs\u002F3.api\u002F14.sensors",{"title":427,"path":428,"stem":429,"icon":197},"Tipos comunes","\u002Fes\u002Fdocs\u002Fapi\u002Ftypes","es\u002Fdocs\u002F3.api\u002F15.types",{"title":431,"path":432,"stem":433,"children":434,"icon":205,"source":473},"Ejemplos","\u002Fes\u002Fdocs\u002Fexamples","es\u002Fdocs\u002F4.examples\u002F00.index",[435,437,441,445,449,453,457,461,465,469],{"title":436,"path":432,"stem":433,"icon":205},"Resumen",{"title":438,"path":439,"stem":440,"icon":210},"Tablero de proyecto","\u002Fes\u002Fdocs\u002Fexamples\u002Fboard","es\u002Fdocs\u002F4.examples\u002F01.board",{"title":442,"path":443,"stem":444,"icon":215},"Calendario semanal","\u002Fes\u002Fdocs\u002Fexamples\u002Fcalendar","es\u002Fdocs\u002F4.examples\u002F02.calendar",{"title":446,"path":447,"stem":448,"icon":220},"Gestor de archivos","\u002Fes\u002Fdocs\u002Fexamples\u002Ffile-manager","es\u002Fdocs\u002F4.examples\u002F03.file-manager",{"title":450,"path":451,"stem":452,"icon":225},"Editor de bloques","\u002Fes\u002Fdocs\u002Fexamples\u002Fblock-editor","es\u002Fdocs\u002F4.examples\u002F04.block-editor",{"title":454,"path":455,"stem":456,"icon":230},"Ajedrez","\u002Fes\u002Fdocs\u002Fexamples\u002Fchess","es\u002Fdocs\u002F4.examples\u002F05.chess",{"title":458,"path":459,"stem":460,"icon":235},"Constructor de formularios","\u002Fes\u002Fdocs\u002Fexamples\u002Fform-builder","es\u002Fdocs\u002F4.examples\u002F06.form-builder",{"title":462,"path":463,"stem":464,"icon":240},"Lienzo de diseño","\u002Fes\u002Fdocs\u002Fexamples\u002Fdesign-canvas","es\u002Fdocs\u002F4.examples\u002F07.design-canvas",{"title":466,"path":467,"stem":468,"icon":245},"Constructor de páginas","\u002Fes\u002Fdocs\u002Fexamples\u002Fpage-builder","es\u002Fdocs\u002F4.examples\u002F08.page-builder",{"title":470,"path":471,"stem":472,"icon":250},"Tabla de datos","\u002Fes\u002Fdocs\u002Fexamples\u002Fdata-table","es\u002Fdocs\u002F4.examples\u002F09.data-table","bd60379aec",{"page":475,"fallback":35},{"id":476,"title":302,"body":477,"category":284,"description":9296,"extension":9297,"links":9298,"meta":9299,"navigation":9301,"path":303,"seo":9302,"stem":304,"__hash__":9303},"docs_es\u002Fes\u002Fdocs\u002F1.getting-started\u002F4.migrating-from-v2.md",{"type":478,"value":479,"toc":9265},"minimark",[480,484,489,620,624,695,765,798,801,863,867,873,878,1054,1057,1250,1326,1332,1592,1606,1611,1946,1951,2144,2148,2413,2417,2666,2679,2682,2688,2805,2815,2818,3068,3074,3078,3249,3254,3258,3364,3369,3373,3488,3492,3612,3617,3621,3785,3793,3890,3906,3910,4122,4126,4142,4279,4292,4296,4300,4304,4630,4910,4914,5187,5433,5472,5476,5480,5912,6140,6144,6378,6559,6594,6597,6601,6946,6950,7259,7465,7476,7607,7623,7627,7631,7688,7903,7907,7980,8254,8286,8289,8293,8329,8333,8364,8379,8383,8387,8528,8532,8622,8625,8721,8728,8732,8819,8823,9049,9059,9063,9261],[481,482,483],"p",{},"La v3 es una reescritura de la v2. El modelo se mantiene: un provider, y composables que llamas sobre\ntus propios elementos. Pero la mayoría de los nombres y de las opciones cambiaron, la ordenación pasó\na la biblioteca, y el handler de drop que escribías para cada lista desaparece. Esta página relaciona\ncada parte de la v2 con la v3 y luego muestra los casos habituales antes y después.",[485,486,488],"h2",{"id":487},"what-changed","Qué cambió",[490,491,492,523,533,551,561,567,581,593,599,614],"ul",{},[493,494,495,499,500,504,505,508,509,512,513,515,516,518,519,522],"li",{},[496,497,498],"strong",{},"La ordenación viene incluida."," En la v2, una lista era una zona de drop, sus filas eran\nelementos arrastrables con un payload ",[501,502,503],"code",{},"[index, items]",", y ordenabas en ",[501,506,507],{},"onDrop"," con\n",[501,510,511],{},"e.helpers.suggestSort()",". En la v3 lo hacen ",[501,514,143],{}," y ",[501,517,147],{},": la lista\nrenderiza un ",[496,520,521],{},"borrador"," de tu array que se reordena mientras arrastras, y el drop escribe el\nnuevo array en tu ref. La mayoría de los handlers de drop de la v2 se borran, no se portan.",[493,524,525,528,529,532],{},[496,526,527],{},"Las cosas se mueven solas."," Las filas se deslizan a sus nuevos sitios (FLIP), el overlay\naterriza en su hueco al soltar y vuelve a su sitio al cancelar. ",[501,530,531],{},"\u003CTransitionGroup>"," desaparece.",[493,534,535,538,539,542,543,546,547,550],{},[496,536,537],{},"Sigue siendo un solo paquete."," ",[501,540,541],{},"@vue-dnd-kit\u002Fcore"," contiene las listas, los árboles, el\nmulti-drag, los modificadores, los sensores y las funciones de colisión. El módulo de Nuxt se\nmantiene; ",[501,544,545],{},"@vue-dnd-kit\u002Factions"," (arrastres programáticos) y ",[501,548,549],{},"@vue-dnd-kit\u002Fdevtools"," son nuevos y\nopcionales.",[493,552,553,556,557,560],{},[496,554,555],{},"Un overlay de verdad."," Se teletransporta a ",[501,558,559],{},"body"," y muestra un clon profundo, con el tamaño del\nhueco en el que aterrizará. Los componentes de overlay reciben el arrastre como props en lugar de\nleer las interioridades del provider.",[493,562,563,566],{},[496,564,565],{},"Ids, no elementos."," La selección, los eventos y el estado del arrastre usan como clave ids de\ntus datos. No hay mapas de elementos del DOM que leer.",[493,568,569,572,573,576,577,580],{},[496,570,571],{},"Los tipos y las reglas de aceptación"," sustituyen a ",[501,574,575],{},"groups"," para los elementos arrastrables\nsimples y los destinos. Las listas intercambian ítems por el nombre de su ",[501,578,579],{},"group",".",[493,582,583,538,586,589,590,592],{},[496,584,585],{},"Decisiones antes del drop.",[501,587,588],{},"onBeforeDrop"," acepta, rechaza, mantiene el arrastre en curso o se\nqueda con parte de los ítems. ",[501,591,507],{}," solo aplica.",[493,594,595,598],{},[496,596,597],{},"Sensores."," La entrada de puntero y la de teclado son sensores. La activación se configura por\ntipo de puntero, y los arrastres táctiles empiezan con una pulsación larga, así que las listas se\nsiguen desplazando bajo el dedo.",[493,600,601,538,604,606,607,515,610,613],{},[496,602,603],{},"Áreas.",[501,605,162],{}," sustituye a ",[501,608,609],{},"makeConstraintArea",[501,611,612],{},"makeAutoScroll",", y el desplazamiento\nautomático funciona en todo contenedor desplazable sin código.",[493,615,616,619],{},[496,617,618],{},"La accesibilidad viene activada por defecto",": atributos ARIA, un foco que vuelve tras el drop y\nanuncios para lectores de pantalla.",[485,621,623],{"id":622},"upgrade","Actualizar",[625,626,627,652,667,681],"code-group",{},[628,629,635],"pre",{"className":630,"code":631,"filename":632,"language":633,"meta":634,"style":634},"language-bash shiki shiki-themes dnd-light dnd-light dnd-dark","npm i @vue-dnd-kit\u002Fcore@^3\n","npm","bash","",[501,636,637],{"__ignoreMap":634},[638,639,642,645,649],"span",{"class":640,"line":641},"line",1,[638,643,632],{"class":644},"sbwC8",[638,646,648],{"class":647},"sN8r7"," i",[638,650,651],{"class":647}," @vue-dnd-kit\u002Fcore@^3\n",[628,653,656],{"className":630,"code":654,"filename":655,"language":633,"meta":634,"style":634},"yarn add @vue-dnd-kit\u002Fcore@^3\n","yarn",[501,657,658],{"__ignoreMap":634},[638,659,660,662,665],{"class":640,"line":641},[638,661,655],{"class":644},[638,663,664],{"class":647}," add",[638,666,651],{"class":647},[628,668,671],{"className":630,"code":669,"filename":670,"language":633,"meta":634,"style":634},"pnpm add @vue-dnd-kit\u002Fcore@^3\n","pnpm",[501,672,673],{"__ignoreMap":634},[638,674,675,677,679],{"class":640,"line":641},[638,676,670],{"class":644},[638,678,664],{"class":647},[638,680,651],{"class":647},[628,682,685],{"className":630,"code":683,"filename":684,"language":633,"meta":634,"style":634},"bun add @vue-dnd-kit\u002Fcore@^3\n","bun",[501,686,687],{"__ignoreMap":634},[638,688,689,691,693],{"class":640,"line":641},[638,690,684],{"class":644},[638,692,664],{"class":647},[638,694,651],{"class":647},[696,697,698,714],"table",{},[699,700,701],"thead",{},[702,703,704,708,711],"tr",{},[705,706,707],"th",{},"Paquete",[705,709,710],{},"v2",[705,712,713],{},"v3",[715,716,717,730,742,754],"tbody",{},[702,718,719,724,727],{},[720,721,722],"td",{},[501,723,541],{},[720,725,726],{},"2.4.x",[720,728,729],{},"3.x",[702,731,732,737,740],{},[720,733,734],{},[501,735,736],{},"@vue-dnd-kit\u002Fnuxt",[720,738,739],{},"1.x",[720,741,729],{},[702,743,744,748,751],{},[720,745,746],{},[501,747,545],{},[720,749,750],{},"—",[720,752,753],{},"1.x, opcional",[702,755,756,760,762],{},[720,757,758],{},[501,759,549],{},[720,761,750],{},[720,763,764],{},"3.x, opcional",[490,766,767,781,792,795],{},[493,768,769,770,773,774,777,778,580],{},"Una app que tiene ",[501,771,772],{},"\"@vue-dnd-kit\u002Fcore\": \"^2…\""," en su ",[501,775,776],{},"package.json"," se queda en la v2 hasta que el\nrango diga ",[501,779,780],{},"^3",[493,782,783,784,787,788,791],{},"Vue ",[496,785,786],{},"3.5"," o posterior. La v2 no tenía dependencias; la v3 tiene una, ",[501,789,790],{},"@vueuse\u002Fcore"," (14 o 15).",[493,793,794],{},"Navegadores: Chrome y Edge 104+, Safari 15.4+, Firefox 104+.",[493,796,797],{},"La v2 y la v3 comparten nombre de paquete, así que una app pasa a la v3 de una vez. No hay capa de\ncompatibilidad. La documentación de la v2 sigue disponible desde el menú de versiones de la parte\nsuperior de la página.",[481,799,800],{},"Un buen orden de trabajo:",[802,803,804,813,821,824,831,842],"ol",{},[493,805,806,807,812],{},"Actualiza los paquetes y renombra las props del provider (",[808,809,811],"a",{"href":810},"#the-provider","más abajo",").",[493,814,815,816,515,818,820],{},"Convierte cada lista ordenable en ",[501,817,143],{},[501,819,147],{},", y borra su handler de\ndrop.",[493,822,823],{},"Porta los elementos arrastrables simples y las zonas de drop.",[493,825,826,827,830],{},"Porta las vistas previas personalizadas a componentes de overlay o al slot ",[501,828,829],{},"#overlay"," del\nprovider.",[493,832,833,834,515,836,838,839,841],{},"Sustituye ",[501,835,609],{},[501,837,612],{}," por ",[501,840,162],{},", o por nada.",[493,843,844,845,515,848,851,852,855,856,858,859,862],{},"Borra los apaños de la v2: ",[501,846,847],{},"tabindex",[501,849,850],{},"aria-grabbed"," en los elementos arrastrables,\n",[501,853,854],{},"touch-action: none"," en ítems enteros, ",[501,857,531],{}," alrededor de las filas, ",[501,860,861],{},"markRaw","\nalrededor de los componentes de vista previa.",[485,864,866],{"id":865},"old-to-new","De lo antiguo a lo nuevo",[481,868,869,872],{},[496,870,871],{},"Sin equivalente"," en una tabla significa que la v3 no tiene nada con ese nombre; la celda dice qué\nusar en su lugar.",[874,875,877],"h3",{"id":876},"at-a-glance","De un vistazo",[696,879,880,888],{},[699,881,882],{},[702,883,884,886],{},[705,885,710],{},[705,887,713],{},[715,889,890,903,917,934,944,954,970,987,1002,1014,1031],{},[702,891,892,896],{},[720,893,894],{},[501,895,129],{},[720,897,898,900,901,580],{},[501,899,129],{},", con props nuevas y un slot ",[501,902,829],{},[702,904,905,909],{},[720,906,907],{},[501,908,134],{},[720,910,911,913,914,916],{},[501,912,134],{}," para el arrastre libre; ",[501,915,147],{}," para las filas de una lista.",[702,918,919,923],{},[720,920,921],{},[501,922,138],{},[720,924,925,927,928,930,931,933],{},[501,926,138],{}," para destinos de drop simples; ",[501,929,143],{}," o ",[501,932,152],{}," para listas y árboles.",[702,935,936,940],{},[720,937,938],{},[501,939,157],{},[720,941,942,580],{},[501,943,157],{},[702,945,946,950],{},[720,947,948],{},[501,949,609],{},[720,951,952,580],{},[501,953,162],{},[702,955,956,960],{},[720,957,958],{},[501,959,612],{},[720,961,962,963,965,966,969],{},"Nada: el desplazamiento automático es automático. ",[501,964,162],{}," o el ",[501,967,968],{},"autoScroll"," de una lista lo ajustan.",[702,971,972,977],{},[720,973,974],{},[501,975,976],{},"useDnDProvider",[720,978,979,982,983,986],{},[501,980,981],{},"useDnD"," para el estado, ",[501,984,985],{},"useDnDMonitor"," para los eventos.",[702,988,989,994],{},[720,990,991],{},[501,992,993],{},"injectionKey",[720,995,996,515,999,580],{},[501,997,998],{},"useDnDContext()",[501,1000,1001],{},"provideDnDContext(app, context)",[702,1003,1004,1009],{},[720,1005,1006],{},[501,1007,1008],{},"DragPreview",[720,1010,1011,1013],{},[501,1012,1008],{},": ahora el clon de un ítem arrastrado, para overlays propios.",[702,1015,1016,1025],{},[720,1017,1018,1021,1022],{},[501,1019,1020],{},"makeSnappedOverlayPosition",", ",[501,1023,1024],{},"\u003CDragPreview :grid>",[720,1026,1027,1028,580],{},"El modificador ",[501,1029,1030],{},"snapToGrid",[702,1032,1033,1047],{},[720,1034,1035,1021,1038,1021,1041,1021,1044],{},[501,1036,1037],{},"e.helpers.suggestSort",[501,1039,1040],{},"suggestSwap",[501,1042,1043],{},"suggestCopy",[501,1045,1046],{},"suggestRemove",[720,1048,1049,1050,580],{},"Integrados en las listas: consulta ",[808,1051,1053],{"href":1052},"#sorting","ordenación",[874,1055,312],{"id":1056},"the-provider",[696,1058,1059,1067],{},[699,1060,1061],{},[702,1062,1063,1065],{},[705,1064,710],{},[705,1066,713],{},[715,1068,1069,1093,1111,1150,1173,1186,1210,1242],{},[702,1070,1071,1077],{},[720,1072,1073,1076],{},[501,1074,1075],{},"autoScrollViewport",", desactivado salvo que se active",[720,1078,1079,1081,1082,1085,1086,1089,1090,580],{},[501,1080,968],{},": ",[496,1083,1084],{},"activado por defecto",", para la ventana y todo contenedor desplazable. ",[501,1087,1088],{},"{ threshold, maxSpeed, acceleration }",", o ",[501,1091,1092],{},"false",[702,1094,1095,1101],{},[720,1096,1097,1100],{},[501,1098,1099],{},"previewTo",", renderizado por defecto dentro del provider",[720,1102,1103,1106,1107,1110],{},[501,1104,1105],{},"overlayTo",": un selector o un elemento, ",[501,1108,1109],{},"'body'"," por defecto.",[702,1112,1113,1119],{},[720,1114,1115,1116],{},"Slot ",[501,1117,1118],{},"#preview=\"{ preview }\"",[720,1120,1115,1121,1123,1124,1021,1127,1021,1130,1021,1133,1021,1136,1021,1139,1021,1142,1145,1146,580],{},[501,1122,829],{},", con el arrastre como props: ",[501,1125,1126],{},"items",[501,1128,1129],{},"active",[501,1131,1132],{},"over",[501,1134,1135],{},"accepted",[501,1137,1138],{},"status",[501,1140,1141],{},"mode",[501,1143,1144],{},"to",". Consulta ",[808,1147,1149],{"href":1148},"#the-overlay","el overlay",[702,1151,1152,1168],{},[720,1153,1154,1021,1157,1021,1160,1163,1164,1167],{},[501,1155,1156],{},"keyboard.keys.forDrag",[501,1158,1159],{},"forDrop",[501,1161,1162],{},"forCancel"," (configurados en ",[501,1165,1166],{},"useDnDProvider()",")",[720,1169,1170,580],{},[501,1171,1172],{},":keyboard=\"{ keys: { start, drop, cancel } }\"",[702,1174,1175,1180],{},[720,1176,1177],{},[501,1178,1179],{},"keyboard.step",[720,1181,1182,1185],{},[501,1183,1184],{},":keyboard=\"{ step }\"",": 25 px por defecto, para arrastres libres.",[702,1187,1188,1199],{},[720,1189,1190,1021,1193,1021,1196],{},[501,1191,1192],{},"keyboard.keys.forMove",[501,1194,1195],{},"forMoveFaster",[501,1197,1198],{},"keyboard.moveFaster",[720,1200,1201,1204,1205,1209],{},[496,1202,1203],{},"Sin equivalente."," Las flechas mueven; ",[1206,1207],"kbd",{"value":1208},"Shift"," hace cuatro veces más grandes los pasos de un arrastre libre.",[702,1211,1212,1217],{},[720,1213,1214],{},[501,1215,1216],{},"collision.throttle",[720,1218,1219,538,1221,1224,1225,1228,1229,1021,1232,1021,1235,1021,1238,1241],{},[496,1220,1203],{},[501,1222,1223],{},"collision"," elige cómo se encuentra el destino: ",[501,1226,1227],{},"pointerFirst"," (por defecto), ",[501,1230,1231],{},"pointerWithin",[501,1233,1234],{},"rectIntersection",[501,1236,1237],{},"closestCenter",[501,1239,1240],{},"closestCorners"," o una función tuya.",[702,1243,1244,1247],{},[720,1245,1246],{},"Un provider por página, nunca anidado",[720,1248,1249],{},"Anidar funciona: el provider más cercano gestiona cada ítem. Un provider para toda la app sigue siendo el objetivo.",[481,1251,1252,1253,1021,1256,1021,1259,1021,1262,1265,1266,1021,1269,1021,1272,1021,1275,1021,1278,1021,1281,1265,1284,1021,1287,1021,1290,1021,1293,1296,1297,1300,1301,1021,1304,1021,1307,1021,1310,1265,1313,1021,1316,515,1319,1322,1323,580],{},"Props nuevas sin equivalente en la v2: ",[501,1254,1255],{},"activation",[501,1257,1258],{},"modifiers",[501,1260,1261],{},"sensors",[501,1263,1264],{},"animation",",\n",[501,1267,1268],{},"dropAnimation",[501,1270,1271],{},"animateChanges",[501,1273,1274],{},"haptics",[501,1276,1277],{},"copyModifier",[501,1279,1280],{},"overlayFit",[501,1282,1283],{},"overlayClass",[501,1285,1286],{},"overlayTransition",[501,1288,1289],{},"overlayPreviews",[501,1291,1292],{},"announcements",[501,1294,1295],{},"screenReaderInstructions"," y\n",[501,1298,1299],{},"defaultStyles",". El provider también emite ",[501,1302,1303],{},"drag-start",[501,1305,1306],{},"drag-move",[501,1308,1309],{},"drag-over",[501,1311,1312],{},"drag-end",[501,1314,1315],{},"drag-cancel",[501,1317,1318],{},"drag-resume",[501,1320,1321],{},"drag-settle",". Todo está en ",[808,1324,1325],{"href":44},"la guía del provider",[874,1327,1329,1330,634],{"id":1328},"reading-the-state-usednd","Leer el estado: ",[501,1331,981],{},[696,1333,1334,1344],{},[699,1335,1336],{},[702,1337,1338,1342],{},[705,1339,1340],{},[501,1341,1166],{},[705,1343,713],{},[715,1345,1346,1397,1414,1446,1480,1505,1528,1555,1576],{},[702,1347,1348,1368],{},[720,1349,1350,1081,1353,1021,1356,1021,1359,1021,1362,930,1365],{},[501,1351,1352],{},"state",[501,1354,1355],{},"'dragging'",[501,1357,1358],{},"'activating'",[501,1360,1361],{},"'selecting'",[501,1363,1364],{},"'pending'",[501,1366,1367],{},"null",[720,1369,1370,1081,1373,1021,1376,1021,1378,1021,1380,930,1383,1385,1386,1388,1389,1391,1392,1394,1395,580],{},[501,1371,1372],{},"useDnD().status",[501,1374,1375],{},"'idle'",[501,1377,1358],{},[501,1379,1355],{},[501,1381,1382],{},"'dropping'",[501,1384,1361],{},". ",[501,1387,1364],{}," (un drop asíncrono) es ",[501,1390,1382],{},"; ",[501,1393,1367],{}," es ",[501,1396,1375],{},[702,1398,1399,1404],{},[720,1400,1401],{},[501,1402,1403],{},"pointer.value.current",[720,1405,1406,1409,1410,1413],{},[501,1407,1408],{},"useDnD().pointer",", tras los modificadores. Cada evento tiene además ",[501,1411,1412],{},"delta",", el desplazamiento desde el inicio.",[702,1415,1416,1421],{},[720,1417,1418],{},[501,1419,1420],{},"entities.draggingMap",[720,1422,1423,1081,1426,1021,1429,1021,1432,1021,1434,1021,1437,1021,1440,1021,1443,580],{},[501,1424,1425],{},"useDnD().active",[501,1427,1428],{},"id",[501,1430,1431],{},"ids",[501,1433,1126],{},[501,1435,1436],{},"data",[501,1438,1439],{},"type",[501,1441,1442],{},"element",[501,1444,1445],{},"rect",[702,1447,1448,1454],{},[720,1449,1450,1453],{},[501,1451,1452],{},"entities.selectedSet"," (elementos)",[720,1455,1456,1459,1460,1021,1463,1021,1466,1021,1469,1021,1472,1021,1475,1021,1478,580],{},[501,1457,1458],{},"useDnD().selection"," (ids): ",[501,1461,1462],{},"has",[501,1464,1465],{},"add",[501,1467,1468],{},"delete",[501,1470,1471],{},"toggle",[501,1473,1474],{},"set",[501,1476,1477],{},"clear",[501,1479,1431],{},[702,1481,1482,1490],{},[720,1483,1484,1021,1487],{},[501,1485,1486],{},"hovered.droppable",[501,1488,1489],{},"hovered.draggable",[720,1491,1492,1081,1495,1021,1497,1021,1499,1021,1501,1021,1503,580],{},[501,1493,1494],{},"useDnD().over",[501,1496,1428],{},[501,1498,1436],{},[501,1500,1442],{},[501,1502,1445],{},[501,1504,1135],{},[702,1506,1507,1515],{},[720,1508,1509,1021,1512],{},[501,1510,1511],{},"delay.progress",[501,1513,1514],{},"distanceProgress",[720,1516,1517,1520,1521,1524,1525,580],{},[501,1518,1519],{},"useDnD().activation.progress",", de ",[501,1522,1523],{},"0"," a ",[501,1526,1527],{},"1",[702,1529,1530,1544],{},[720,1531,1532,1021,1535,1021,1538,1021,1541],{},[501,1533,1534],{},"preview.position",[501,1536,1537],{},"preview.size",[501,1539,1540],{},"preview.render",[501,1542,1543],{},"preview.to",[720,1545,1546,1548,1549,1551,1552,1554],{},[496,1547,1203],{}," La biblioteca coloca y dimensiona el overlay. Usa ",[501,1550,1105],{},", el slot ",[501,1553,829],{}," o componentes de overlay.",[702,1556,1557,1572],{},[720,1558,1559,1021,1562,1565,1566,1021,1569],{},[501,1560,1561],{},"entities.draggableMap",[501,1563,1564],{},"droppableMap",", los ",[501,1567,1568],{},"visible…Set",[501,1570,1571],{},"scrollPosition",[720,1573,1574],{},[496,1575,1203],{},[702,1577,1578,1580],{},[720,1579,750],{},[720,1581,1582,1583,1021,1586,1021,1589,580],{},"Nuevo: ",[501,1584,1585],{},"useDnD().cancel()",[501,1587,1588],{},"position",[501,1590,1591],{},"isAutoScrolling",[481,1593,1594,1595,1597,1598,1602,1603,580],{},"Los eventos pasaron a ",[501,1596,985],{},": consulta ",[808,1599,1601],{"href":1600},"#events-and-drop-decisions","eventos y decisiones de drop",".\nLas formas completas están en la ",[808,1604,1605],{"href":168},"API de useDnD",[874,1607,1609,634],{"id":1608},"makedraggable",[501,1610,134],{},[696,1612,1613,1621],{},[699,1614,1615],{},[702,1616,1617,1619],{},[705,1618,710],{},[705,1620,713],{},[715,1622,1623,1639,1655,1673,1694,1707,1718,1731,1754,1769,1784,1803,1832,1859,1873,1898,1913],{},[702,1624,1625,1630],{},[720,1626,1627],{},[501,1628,1629],{},"makeDraggable(ref, options, payload)",[720,1631,1632,1635,1636,580],{},[501,1633,1634],{},"makeDraggable(ref, options)",": sin tercer argumento. Las filas de una lista usan ",[501,1637,1638],{},"makeSortableItem(ref, { item })",[702,1640,1641,1646],{},[720,1642,1643,1645],{},[501,1644,1428],{},", necesario en listas virtuales",[720,1647,1648,1650,1651,1654],{},[501,1649,1428],{},": pásalo desde tus datos, como getter. El valor por defecto viene de ",[501,1652,1653],{},"useId()"," y es nuevo en cada instancia del componente.",[702,1656,1657,1662],{},[720,1658,1659],{},[501,1660,1661],{},"data: () => card",[720,1663,1664,1666,1667,515,1670,580],{},[501,1665,1436],{},": un valor, una ref o un getter. Se lee como ",[501,1668,1669],{},"active.data",[501,1671,1672],{},"active.items[i].data",[702,1674,1675,1680],{},[720,1676,1677],{},[501,1678,1679],{},"groups: ['dev']",[720,1681,1682,1685,1686,1689,1690,580],{},[501,1683,1684],{},"type: 'dev'",", comparado con el ",[501,1687,1688],{},"accept"," de los destinos. Consulta ",[808,1691,1693],{"href":1692},"#groups","grupos",[702,1695,1696,1701],{},[720,1697,1698],{},[501,1699,1700],{},"dragHandle: '.handle'",[720,1702,1703,1706],{},[501,1704,1705],{},"handle",": un selector o una ref de elemento.",[702,1708,1709,1714],{},[720,1710,1711],{},[501,1712,1713],{},"disabled",[720,1715,1716,580],{},[501,1717,1713],{},[702,1719,1720,1725],{},[720,1721,1722],{},[501,1723,1724],{},"modifier: { keys, method }",[720,1726,1727,1730],{},[501,1728,1729],{},"canDrag: (event) => event.altKey",": un filtro para cada pulsación.",[702,1732,1733,1738],{},[720,1734,1735],{},[501,1736,1737],{},"activation: { distance, delay }",[720,1739,1740,1742,1743,1746,1747,515,1750,1753],{},[501,1741,1255],{}," por tipo de puntero: ",[501,1744,1745],{},"{ mouse: { distance }, touch: { delay, tolerance }, pen }",". Con ",[501,1748,1749],{},"distance",[501,1751,1752],{},"delay"," a la vez, el arrastre empieza con lo que llegue primero.",[702,1755,1756,1761],{},[720,1757,1758],{},[501,1759,1760],{},"activation.distance: { x, y, condition }",[720,1762,1763,1765,1766,1768],{},[496,1764,1203],{}," Una ",[501,1767,1749],{}," por tipo de puntero.",[702,1770,1771,1776],{},[720,1772,1773],{},[501,1774,1775],{},"render: markRaw(Preview)",[720,1777,1778,1781,1782,580],{},[501,1779,1780],{},"overlay: Preview",": el componente recibe el arrastre como props. Consulta ",[808,1783,1149],{"href":1148},[702,1785,1786,1791],{},[720,1787,1788],{},[501,1789,1790],{},"placementMargins",[720,1792,1793,1795,1796,1145,1799,580],{},[496,1794,1203],{}," Un destino de drop sobre un ítem ordenable cuenta en su parte central (del 25 al 75 %); los árboles anidan con ",[501,1797,1798],{},"nesting: 'hover'",[808,1800,1802],{"href":1801},"\u002Fdocs\u002Fguides\u002Fdrag-and-drop#drop-into-a-sortable-item","soltar dentro de un ítem ordenable",[702,1804,1805,1819],{},[720,1806,1807,1021,1810,1021,1813,1021,1816],{},[501,1808,1809],{},"events.onSelfDragStart",[501,1811,1812],{},"onSelfDragMove",[501,1814,1815],{},"onSelfDragEnd",[501,1817,1818],{},"onSelfDragCancel",[720,1820,1821,1823,1824,1089,1826,1145,1829,580],{},[496,1822,871],{}," en el elemento arrastrable: ",[501,1825,985],{},[501,1827,1828],{},"watch(isDragging)",[808,1830,1831],{"href":1600},"eventos",[702,1833,1834,1847],{},[720,1835,1836,1021,1839,1842,1843,1846],{},[501,1837,1838],{},"events.onHover",[501,1840,1841],{},"onLeave",", y su ",[501,1844,1845],{},"onDragStart","… para los arrastres que pasan por encima",[720,1848,1849,1850,1852,1853,1021,1856,580],{},"Un ",[501,1851,138],{}," en el mismo elemento: ",[501,1854,1855],{},"onDragEnter",[501,1857,1858],{},"onDragLeave",[702,1860,1861,1870],{},[720,1862,1863,1864,1021,1867],{},"Devuelve ",[501,1865,1866],{},"isDragging",[501,1868,1869],{},"selected",[720,1871,1872],{},"Lo mismo.",[702,1874,1875,1880],{},[720,1876,1863,1877],{},[501,1878,1879],{},"isDragOver",[720,1881,1882,1883,1886,1887,1890,1891,1894,1895,580],{},"Los ítems ordenables devuelven ",[501,1884,1885],{},"indicator"," (con ",[501,1888,1889],{},"placeholder: 'indicator'",") e ",[501,1892,1893],{},"isPlaceholder","; los destinos devuelven ",[501,1896,1897],{},"placement",[702,1899,1900,1905],{},[720,1901,1863,1902],{},[501,1903,1904],{},"isAllowed",[720,1906,1907,1909,1910,580],{},[496,1908,871],{}," en los elementos arrastrables. Los destinos devuelven ",[501,1911,1912],{},"isAccepting",[702,1914,1915,1917],{},[720,1916,750],{},[720,1918,1582,1919,1021,1922,1021,1925,1021,1927,1021,1930,1933,1934,1937,1938,1021,1940,1021,1943,580],{},[501,1920,1921],{},"label",[501,1923,1924],{},"axis",[501,1926,1258],{},[501,1928,1929],{},"keyboardMode",[501,1931,1932],{},"overlay: false"," con el ",[501,1935,1936],{},"transform"," devuelto, ",[501,1939,1268],{},[501,1941,1942],{},"attributes",[501,1944,1945],{},"native",[874,1947,1949,634],{"id":1948},"makedroppable",[501,1950,138],{},[696,1952,1953,1961],{},[699,1954,1955],{},[702,1956,1957,1959],{},[705,1958,710],{},[705,1960,713],{},[715,1962,1963,1978,1992,2009,2029,2051,2063,2077,2087,2097,2121],{},[702,1964,1965,1970],{},[720,1966,1967],{},[501,1968,1969],{},"makeDroppable(ref, options, () => items)",[720,1971,1972,1975,1976,580],{},[501,1973,1974],{},"makeDroppable(ref, options)",". Una zona que contiene una lista es un ",[501,1977,143],{},[702,1979,1980,1984],{},[720,1981,1982],{},[501,1983,575],{},[720,1985,1986,1081,1988,1991],{},[501,1987,1688],{},[501,1989,1990],{},"'*'",", un tipo, una lista de tipos o una función.",[702,1993,1994,2002],{},[720,1995,1996,1021,1999],{},[501,1997,1998],{},"groupMatch: 'every'",[501,2000,2001],{},"'some'",[720,2003,2004,1021,2007,580],{},[501,2005,2006],{},"acceptMode: 'all'",[501,2008,2001],{},[702,2010,2011,2019],{},[720,2012,2013,1021,2016],{},[501,2014,2015],{},"events.onEnter",[501,2017,2018],{},"events.onLeave",[720,2020,2021,1021,2023,2025,2026,580],{},[501,2022,1855],{},[501,2024,1858],{},": opciones propias, sin objeto ",[501,2027,2028],{},"events",[702,2030,2031,2040],{},[720,2032,2033,2036,2037,2039],{},[501,2034,2035],{},"events.onDrop",", que podía devolver ",[501,2038,1092],{}," o una promesa",[720,2041,2042,2044,2045,2047,2048,580],{},[501,2043,588],{}," decide, ",[501,2046,507],{}," aplica. Consulta ",[808,2049,2050],{"href":1600},"decisiones de drop",[702,2052,2053,2058],{},[720,2054,2055],{},[501,2056,2057],{},"events.onValidate",[720,2059,2060,2062],{},[501,2061,588],{},", devolviendo los ids que se aceptan.",[702,2064,2065,2069],{},[720,2066,2067],{},[501,2068,1436],{},[720,2070,2071,2073,2074,580],{},[501,2072,1436],{},", que se lee como ",[501,2075,2076],{},"over.data",[702,2078,2079,2083],{},[720,2080,2081],{},[501,2082,1713],{},[720,2084,2085,580],{},[501,2086,1713],{},[702,2088,2089,2093],{},[720,2090,1863,2091],{},[501,2092,1904],{},[720,2094,2095,580],{},[501,2096,1912],{},[702,2098,2099,2106],{},[720,2100,1863,2101,1081,2103],{},[501,2102,1879],{},[501,2104,2105],{},"{ top, right, bottom, left, center }",[720,2107,2108,2111,2112,1081,2114,2117,2118,580],{},[501,2109,2110],{},"isOver"," (un booleano), y ",[501,2113,1897],{},[501,2115,2116],{},"{ top, right, bottom, left }",", las mitades en las que está el puntero. No hay ",[501,2119,2120],{},"center",[702,2122,2123,2125],{},[720,2124,750],{},[720,2126,1582,2127,1021,2129,1021,2131,1021,2134,1021,2137,1021,2140,2143],{},[501,2128,1428],{},[501,2130,1921],{},[501,2132,2133],{},"priority",[501,2135,2136],{},"overOverlay",[501,2138,2139],{},"overDropAnimation",[501,2141,2142],{},"external"," (archivos del ordenador).",[874,2145,2147],{"id":2146},"the-drop-event","El evento de drop",[696,2149,2150,2162],{},[699,2151,2152],{},[702,2153,2154,2160],{},[705,2155,2156,2159],{},[501,2157,2158],{},"IDragEvent"," de la v2",[705,2161,713],{},[715,2163,2164,2186,2198,2217,2251,2267,2280,2297,2324,2341,2353,2383,2395],{},[702,2165,2166,2171],{},[720,2167,2168],{},[501,2169,2170],{},"e.draggedItems",[720,2172,2173,1081,2176,2179,2180,515,2183,580],{},[501,2174,2175],{},"e.active.items",[501,2177,2178],{},"{ id, item, data, label, type }"," cada uno, empezando por el que se agarró. Las listas reciben ",[501,2181,2182],{},"e.items",[501,2184,2185],{},"e.keys",[702,2187,2188,2193],{},[720,2189,2190],{},[501,2191,2192],{},"e.draggedItems[0].data",[720,2194,2195,580],{},[501,2196,2197],{},"e.active.data",[702,2199,2200,2208],{},[720,2201,2202,1021,2205],{},[501,2203,2204],{},"e.draggedItems[i].index",[501,2206,2207],{},".items",[720,2209,2210,2211,1021,2214,580],{},"Listas: ",[501,2212,2213],{},"e.from",[501,2215,2216],{},"{ list, index }",[702,2218,2219,2230],{},[720,2220,2221,1081,2224,1021,2226,1021,2228],{},[501,2222,2223],{},"e.dropZone",[501,2225,1126],{},[501,2227,1897],{},[501,2229,1436],{},[720,2231,2232,1081,2235,1021,2237,1021,2239,1021,2241,1021,2243,2245,2246,1021,2249,580],{},[501,2233,2234],{},"e.over",[501,2236,1428],{},[501,2238,1436],{},[501,2240,1442],{},[501,2242,1445],{},[501,2244,1135],{},". Listas: ",[501,2247,2248],{},"e.to",[501,2250,2216],{},[702,2252,2253,2258],{},[720,2254,2255],{},[501,2256,2257],{},"e.hoveredDraggable",[720,2259,2260,2262,2263,2266],{},[496,2261,871],{},": las listas calculan ",[501,2264,2265],{},"e.to.index"," por sí mismas.",[702,2268,2269,2273],{},[720,2270,2271],{},[501,2272,511],{},[720,2274,2275,2276,2279],{},"Las listas escriben el drop; ",[501,2277,2278],{},"e.result"," contiene el nuevo array de cada lista que cambia.",[702,2281,2282,2287],{},[720,2283,2284],{},[501,2285,2286],{},"e.helpers.suggestSwap()",[720,2288,2289,2292,2293,2296],{},[501,2290,2291],{},"behavior: 'swap'"," en la lista; ",[501,2294,2295],{},"e.partner"," es el ítem con el que se intercambió.",[702,2298,2299,2304],{},[720,2300,2301],{},[501,2302,2303],{},"e.helpers.suggestCopy()",[720,2305,2306,2309,2310,2313,2314,2317,2318,1394,2321,580],{},[501,2307,2308],{},"group: { name, pull: 'clone' }"," o la tecla de copia (",[1206,2311],{"value":2312},"Alt","), con el ",[501,2315,2316],{},"clone"," de la lista; ",[501,2319,2320],{},"e.mode",[501,2322,2323],{},"'copy'",[702,2325,2326,2331],{},[720,2327,2328],{},[501,2329,2330],{},"e.helpers.suggestRemove()",[720,2332,2333,2336,2337,2340],{},[501,2334,2335],{},"e.source.remove()"," en un destino de drop, o el ",[501,2338,2339],{},"dropOutside: 'remove'"," de la lista.",[702,2342,2343,2348],{},[720,2344,2345],{},[501,2346,2347],{},"result.sameList",[720,2349,2350,580],{},[501,2351,2352],{},"e.sameList",[702,2354,2355,2378],{},[720,2356,2357,1021,2360,1021,2363,1021,2366,1021,2369,1021,2372,1021,2375],{},[501,2358,2359],{},"e.helpers.insertAt",[501,2361,2362],{},"removeAt",[501,2364,2365],{},"removeIndexes",[501,2367,2368],{},"swapAt",[501,2370,2371],{},"getInsertSide",[501,2373,2374],{},"isAtZoneStart",[501,2376,2377],{},"isAtZoneEnd",[720,2379,2380,2382],{},[496,2381,1203],{}," Las listas no los necesitan; para un destino simple, cambia tus datos como quieras.",[702,2384,2385,2390],{},[720,2386,2387],{},[501,2388,2389],{},"e.provider",[720,2391,2392,580],{},[501,2393,2394],{},"useDnD()",[702,2396,2397,2399],{},[720,2398,750],{},[720,2400,1582,2401,1021,2404,1021,2407,2410,2411,580],{},[501,2402,2403],{},"e.pointer",[501,2405,2406],{},"e.delta",[501,2408,2409],{},"e.position"," (dónde poner un ítem soltado sobre un tablero), ",[501,2412,2320],{},[874,2414,2416],{"id":2415},"sorting","Ordenación",[696,2418,2419,2427],{},[699,2420,2421],{},[702,2422,2423,2425],{},[705,2424,710],{},[705,2426,713],{},[715,2428,2429,2445,2460,2471,2492,2506,2519,2543,2554,2576,2591,2614,2630,2648],{},[702,2430,2431,2440],{},[720,2432,2433,2434,2436,2437],{},"Una lista ",[501,2435,138],{}," con ",[501,2438,2439],{},"() => items",[720,2441,2442,580],{},[501,2443,2444],{},"makeSortableList(listRef, { items })",[702,2446,2447,2455],{},[720,2448,2449,2450,2436,2452],{},"Una fila ",[501,2451,134],{},[501,2453,2454],{},"() => [index, items]",[720,2456,2457,580],{},[501,2458,2459],{},"makeSortableItem(el, { item: () => props.task })",[702,2461,2462,2465],{},[720,2463,2464],{},"Renderizar tu array",[720,2466,2467,2468,2470],{},"Renderizar los ",[501,2469,1126],{}," devueltos: el borrador que se reordena mientras arrastras.",[702,2472,2473,2481],{},[720,2474,2475,1021,2478],{},[501,2476,2477],{},"suggestSort('vertical')",[501,2479,2480],{},"suggestSort('horizontal')",[720,2482,2483,1228,2486,930,2489,580],{},[501,2484,2485],{},"strategy: 'vertical'",[501,2487,2488],{},"'horizontal'",[501,2490,2491],{},"'grid'",[702,2493,2494,2503],{},[720,2495,2496,2497,515,2500],{},"Comprobaciones de identidad para encontrar los arrays de origen y de destino, y luego asignar ",[501,2498,2499],{},"sourceItems",[501,2501,2502],{},"targetItems",[720,2504,2505],{},"Nada: el drop escribe cada lista que cambia.",[702,2507,2508,2512],{},[720,2509,2510],{},[501,2511,531],{},[720,2513,2514,2515,2518],{},"Incluido. ",[501,2516,2517],{},"animateChanges: true"," anima los cambios que no hizo ningún arrastre (añadir, quitar, barajar).",[702,2520,2521,2530],{},[720,2522,2523,2524,1021,2527],{},"Una línea de inserción a partir de ",[501,2525,2526],{},"isDragOver.top",[501,2528,2529],{},".bottom",[720,2531,2532,2534,2535,2538,2539,580],{},[501,2533,1889],{}," y el ",[501,2536,2537],{},"indicator.side"," del ítem. Consulta ",[808,2540,2542],{"href":2541},"\u002Fdocs\u002Fguides\u002Fsortable-lists#an-insertion-line","una línea de inserción",[702,2544,2545,2550],{},[720,2546,2547],{},[501,2548,2549],{},"suggestSwap()",[720,2551,2552,580],{},[501,2553,2291],{},[702,2555,2556,2566],{},[720,2557,2558,2559,2562,2563,1167],{},"Una paleta que solo copia (",[501,2560,2561],{},"suggestCopy()"," y un flag ",[501,2564,2565],{},"copyOnly",[720,2567,2568,1021,2571,515,2574,580],{},[501,2569,2570],{},"group: { name, pull: 'clone', put: false }",[501,2572,2573],{},"sort: false",[501,2575,2316],{},[702,2577,2578,2584],{},[720,2579,2580,2581],{},"Una papelera con ",[501,2582,2583],{},"suggestRemove()",[720,2585,2586,1089,2589,580],{},[501,2587,2588],{},"makeDroppable(trash, { onDrop: (e) => e.source?.remove() })",[501,2590,2339],{},[702,2592,2593,2596],{},[720,2594,2595],{},"Pinia o datos inmutables: asignar tú el resultado",[720,2597,2598,2600,2601,2604,2605,2607,2608,1145,2610,580],{},[501,2599,1126],{}," como getter, luego ",[501,2602,2603],{},"e.preventDefault()"," en ",[501,2606,507],{}," y aplicar ",[501,2609,2278],{},[808,2611,2613],{"href":2612},"\u002Fdocs\u002Fguides\u002Fshared-lists#controlled-lists","listas controladas",[702,2615,2616,2622],{},[720,2617,2618,2619],{},"Un árbol recursivo: un droppable por carpeta y ",[501,2620,2621],{},"applyToTree",[720,2623,2624,2626,2627,580],{},[501,2625,152],{},": un solo contenedor, filas renderizadas en plano con su profundidad. Consulta ",[808,2628,2629],{"href":64},"árboles",[702,2631,2632,2639],{},[720,2633,2634,2635,2638],{},"Grupos anidados con ",[501,2636,2637],{},"v-model"," (un droppable por grupo)",[720,2640,2641,2642,2644,2645,580],{},"Una lista dentro de una lista, todas en un mismo ",[501,2643,579],{},", cada una con ",[501,2646,2647],{},"items: defineModel()",[702,2649,2650,2656],{},[720,2651,2652,2653,2655],{},"Listas virtuales: ",[501,2654,1428],{}," en cada elemento arrastrable",[720,2657,2658,2659,2662,2663,580],{},"Pasa el borrador al virtualizador, ",[501,2660,2661],{},"id: () => props.item.id"," en las filas. Consulta ",[808,2664,2665],{"href":99},"listas virtuales",[481,2667,2668,2669,2672,2673,515,2676,580],{},"El código de antes y después está ",[808,2670,811],{"href":2671},"#a-sortable-list",". Todo sobre las listas está en\n",[808,2674,2675],{"href":54},"listas ordenables",[808,2677,2678],{"href":59},"listas que comparten ítems",[874,2680,2681],{"id":575},"Grupos",[481,2683,2684,2685,2687],{},"La v2 tenía una sola opción ",[501,2686,575],{}," para todo. La v3 la divide en dos:",[696,2689,2690,2698],{},[699,2691,2692],{},[702,2693,2694,2696],{},[705,2695,710],{},[705,2697,713],{},[715,2699,2700,2712,2724,2741,2761,2775,2793],{},[702,2701,2702,2707],{},[720,2703,2704],{},[501,2705,2706],{},"makeDraggable(el, { groups: ['dev'] })",[720,2708,2709,580],{},[501,2710,2711],{},"makeDraggable(el, { type: 'dev' })",[702,2713,2714,2719],{},[720,2715,2716],{},[501,2717,2718],{},"makeDroppable(el, { groups: ['dev'] })",[720,2720,2721,580],{},[501,2722,2723],{},"makeDroppable(el, { accept: 'dev' })",[702,2725,2726,2732],{},[720,2727,2728,2731],{},[501,2729,2730],{},"groups: ['dev', 'ops']"," en una zona",[720,2733,2734,2737,2738,580],{},[501,2735,2736],{},"accept: ['dev', 'ops']",", o una función: ",[501,2739,2740],{},"({ active, items, types }) => boolean",[702,2742,2743,2749],{},[720,2744,2745,2748],{},[501,2746,2747],{},"groups: []",", o ninguno",[720,2750,2751,2752,2754,2755,2757,2758,2760],{},"Sin ",[501,2753,1439],{}," ni ",[501,2756,1688],{},". Las reglas de la v2 se mantienen: un elemento arrastrable sin tipo encaja en cualquier regla, y un destino sin ",[501,2759,1688],{}," lo acepta todo.",[702,2762,2763,2769],{},[720,2764,2765,1021,2767],{},[501,2766,1998],{},[501,2768,2001],{},[720,2770,2771,1021,2773,580],{},[501,2772,2006],{},[501,2774,2001],{},[702,2776,2777,2782],{},[720,2778,2779,2781],{},[501,2780,575],{}," en la zona de una lista y en sus filas",[720,2783,2784,2604,2787,1385,2789,2792],{},[501,2785,2786],{},"group: 'board'",[501,2788,143],{},[501,2790,2791],{},"group: { name, pull, put }"," dice qué puede salir y entrar.",[702,2794,2795,2801],{},[720,2796,2797,2604,2799],{},[501,2798,575],{},[501,2800,157],{},[720,2802,2803,580],{},[501,2804,1688],{},[481,2806,2807,2808,2810,2811,580],{},"Una lista sin ",[501,2809,579],{}," es un grupo propio y no intercambia con ninguna otra lista. En la v2, una zona\nsin grupos lo aceptaba todo. Consulta ",[808,2812,2814],{"href":2813},"\u002Fdocs\u002Fguides\u002Fdrag-and-drop#which-drags-a-target-takes","qué arrastres acepta un destino",[874,2816,336],{"id":2817},"the-overlay",[696,2819,2820,2828],{},[699,2821,2822],{},[702,2823,2824,2826],{},[705,2825,710],{},[705,2827,713],{},[715,2829,2830,2845,2864,2901,2917,2935,2959,2976,2992,3024,3048,3060],{},[702,2831,2832,2837],{},[720,2833,2834,2835],{},"Una vista previa renderizada en el provider, teletransportada con ",[501,2836,1099],{},[720,2838,2839,2840,2842,2843,580],{},"Siempre teletransportado, a ",[501,2841,559],{}," o a ",[501,2844,1105],{},[702,2846,2847,2854],{},[720,2848,2849,2850,2853],{},"Un clon: la misma etiqueta, su ",[501,2851,2852],{},"innerHTML"," y su tamaño",[720,2855,2856,2857,2860,2861,580],{},"Un clon profundo: los valores de los formularios, los píxeles de ",[501,2858,2859],{},"\u003Ccanvas>",", los estilos heredados y las celdas de tabla vienen incluidos. Marca lo que se queda fuera con ",[501,2862,2863],{},"data-dnd-no-clone",[702,2865,2866,2874],{},[720,2867,2868,2870,2871],{},[501,2869,1775],{},", que lee ",[501,2872,2873],{},"useDnDProvider().entities",[720,2875,2876,2878,2879,1021,2881,1021,2883,1021,2885,1021,2887,1021,2889,515,2891,2893,2894,2896,2897,2900],{},[501,2877,1780],{},", que recibe ",[501,2880,1126],{},[501,2882,1129],{},[501,2884,1132],{},[501,2886,1135],{},[501,2888,1138],{},[501,2890,1141],{},[501,2892,1144],{}," como props. Sin ",[501,2895,861],{},"; usa un ",[501,2898,2899],{},"shallowRef"," para cambiarlo.",[702,2902,2903,2912],{},[720,2904,2905,2906,2909,2910],{},"El slot ",[501,2907,2908],{},"#preview",", posicionado a partir de ",[501,2911,1534],{},[720,2913,2905,2914,2916],{},[501,2915,829],{},": la biblioteca coloca y dimensiona la caja. Si no renderiza nada, se vuelve al clon.",[702,2918,2919,2924],{},[720,2920,2921],{},[501,2922,2923],{},"useDnDProvider().preview.render.value = …",[720,2925,2905,2926,2928,2929,2931,2932,580],{},[501,2927,829],{},", o un ",[501,2930,2899],{}," pasado como ",[501,2933,2934],{},"overlay",[702,2936,2937,2945],{},[720,2938,2939,2940,515,2943],{},"Un aspecto nuevo sobre una zona, desde ",[501,2941,2942],{},"onEnter",[501,2944,1841],{},[720,2946,2947,2604,2949,2951,2952,2954,2955,580],{},[501,2948,2136],{},[501,2950,138],{}," o en una lista, o leer ",[501,2953,1132],{}," en el componente de overlay. Consulta ",[808,2956,2958],{"href":2957},"\u002Fdocs\u002Fguides\u002Foverlay#targets-that-change-the-overlay","destinos que cambian el overlay",[702,2960,2961,2966],{},[720,2962,2963],{},[501,2964,2965],{},"\u003CDragPreview v-slot=\"{ draggingMap }\">",[720,2967,2968,2969,2971,2972,2975],{},"Los ",[501,2970,1126],{}," de las props del overlay; ",[501,2973,2974],{},"\u003CDragPreview :id=\"item.id\" \u002F>"," renderiza un clon.",[702,2977,2978,2984],{},[720,2979,2980,1021,2982],{},[501,2981,1024],{},[501,2983,1020],{},[720,2985,1027,2986,2988,2989,2991],{},[501,2987,1030],{},". Ajusta a la cuadrícula el punto donde se buscan los destinos y también la ",[501,2990,1588],{}," del drop, no solo la imagen.",[702,2993,2994,3005],{},[720,2995,2996,965,2999,3002,3003],{},[501,2997,2998],{},"\u003CTransition>",[501,3000,3001],{},"AnimatePresence"," de motion alrededor de ",[501,3004,1008],{},[720,3006,3007,2436,3010,3013,3014,3016,3017,3019,3020,580],{},[501,3008,3009],{},"overlay-class",[501,3011,3012],{},"@starting-style"," para el agarre, ",[501,3015,1268],{}," para el aterrizaje, ",[501,3018,1286],{}," entre componentes. Consulta ",[808,3021,3023],{"href":3022},"\u002Fdocs\u002Fguides\u002Fanimations#the-overlay-lift-tilt-settle","levantar, inclinar, asentar",[702,3025,3026,3031],{},[720,3027,3028],{},[501,3029,3030],{},".dnd-kit-preview",[720,3032,3033,3036,3037,1021,3040,3043,3044,3047],{},[501,3034,3035],{},"[data-dnd-overlay]"," (",[501,3038,3039],{},"\"dragging\"",[501,3041,3042],{},"\"dropping\"",") en la caja, ",[501,3045,3046],{},"[data-dnd-overlay-content]"," dentro de ella.",[702,3049,3050,3055],{},[720,3051,3052,3054],{},[501,3053,1537],{},", actualizado a mano",[720,3056,3057,3058,812],{},"La caja toma el tamaño del hueco en el que aterrizará (",[501,3059,1280],{},[702,3061,3062,3065],{},[720,3063,3064],{},"La vista previa desaparece al soltar",[720,3066,3067],{},"Aterriza en su hueco, o vuelve a su sitio al cancelar.",[481,3069,3070,3071,580],{},"Más en ",[808,3072,3073],{"href":74},"la guía del overlay",[874,3075,3077],{"id":3076},"selection-and-multi-drag","Selección y multi-drag",[696,3079,3080,3088],{},[699,3081,3082],{},[702,3083,3084,3086],{},[705,3085,710],{},[705,3087,713],{},[715,3089,3090,3107,3119,3137,3166,3178,3188,3200,3208,3229],{},[702,3091,3092,3099],{},[720,3093,3094,3096,3097],{},[501,3095,1869],{},", devuelto por ",[501,3098,134],{},[720,3100,3101,3096,3103,515,3105,580],{},[501,3102,1869],{},[501,3104,134],{},[501,3106,147],{},[702,3108,3109,3114],{},[720,3110,3111,3113],{},[501,3112,1452],{},", un conjunto de elementos",[720,3115,3116,3118],{},[501,3117,1458],{},", con ids como clave.",[702,3120,3121,3130],{},[720,3122,3123,3125,3126,3129],{},[501,3124,157],{},": Ctrl (",[501,3127,3128],{},"ControlLeft",") pulsado por defecto",[720,3131,3132,3133,3136],{},"Sin tecla por defecto: una pulsación en el espacio vacío del área dibuja el rectángulo. ",[501,3134,3135],{},"modifier: { keys: ['Control'], method: 'every' }"," recupera Ctrl.",[702,3138,3139,3148],{},[720,3140,3141,3144,3145],{},[501,3142,3143],{},"modifier.keys"," como ",[501,3146,3147],{},"KeyboardEvent.code",[720,3149,3150,3036,3153,1021,3156,3159,3160,3036,3163,812],{},[501,3151,3152],{},"KeyboardEvent.key",[501,3154,3155],{},"'Control'",[501,3157,3158],{},"'Shift'",") o ",[501,3161,3162],{},".code",[501,3164,3165],{},"'ControlLeft'",[702,3167,3168,3176],{},[720,3169,3170,1021,3173],{},[501,3171,3172],{},"strategy: 'toggle'",[501,3174,3175],{},"'select'",[720,3177,1872],{},[702,3179,3180,3184],{},[720,3181,3182],{},[501,3183,575],{},[720,3185,3186,580],{},[501,3187,1688],{},[702,3189,3190,3195],{},[720,3191,3192],{},[501,3193,3194],{},"events.onSelected(elements)",[720,3196,3197,580],{},[501,3198,3199],{},"onSelected(ids)",[702,3201,3202,3206],{},[720,3203,3204],{},[501,3205,1713],{},[720,3207,1872],{},[702,3209,3210,3216],{},[720,3211,3212,3215],{},[501,3213,3214],{},"suggestSort()"," moviendo la selección en bloque",[720,3217,3218,3219,1228,3222,930,3225,3228],{},"Las listas la mueven. ",[501,3220,3221],{},"multiple: 'group'",[501,3223,3224],{},"'gaps'",[501,3226,3227],{},"'stack'"," dice qué hacen los demás ítems por el camino.",[702,3230,3231,3237],{},[720,3232,3233,3236],{},[501,3234,3235],{},"onValidate"," para selecciones mixtas",[720,3238,3239,515,3242,3244,3245,580],{},[501,3240,3241],{},"acceptMode: 'some'",[501,3243,588],{}," devolviendo ids. Consulta ",[808,3246,3248],{"href":3247},"\u002Fdocs\u002Fguides\u002Fmulti-drag#taking-only-some","aceptar solo algunos",[481,3250,3070,3251,580],{},[808,3252,3253],{"href":69},"multi-drag y selección",[874,3255,3257],{"id":3256},"axes-bounds-and-snapping","Ejes, límites y ajuste",[696,3259,3260,3268],{},[699,3261,3262],{},[702,3263,3264,3266],{},[705,3265,710],{},[705,3267,713],{},[715,3269,3270,3286,3297,3316,3327,3348],{},[702,3271,3272,3277],{},[720,3273,3274],{},[501,3275,3276],{},"makeConstraintArea(el, { axis: 'x' })",[720,3278,3279,3282,3283,3285],{},[501,3280,3281],{},"makeDragArea(el, { axis: 'x' })",", para los arrastres que empiezan dentro de ella. ",[501,3284,1924],{}," también funciona en un elemento arrastrable, una lista, un árbol o un ítem.",[702,3287,3288,3293],{},[720,3289,3290],{},[501,3291,3292],{},"axis: 'both'",[720,3294,2751,3295,580],{},[501,3296,1924],{},[702,3298,3299,3304],{},[720,3300,3301],{},[501,3302,3303],{},"restrictToArea: true",[720,3305,3306,3309,3310,515,3313,580],{},[501,3307,3308],{},"makeDragArea(el, { restrictToArea: true })",", o los modificadores ",[501,3311,3312],{},"restrictToParent",[501,3314,3315],{},"restrictToElement(el)",[702,3317,3318,3321],{},[720,3319,3320],{},"Un provider por región, para mantener las reglas separadas",[720,3322,3323,3324,3326],{},"Un provider y un ",[501,3325,162],{}," por región. Sus ítems pueden seguir moviéndose a cualquier sitio.",[702,3328,3329,3336],{},[720,3330,3331,1021,3334],{},[501,3332,3333],{},"\u003CDragPreview :grid=\"20\">",[501,3335,1020],{},[720,3337,3338,930,3341,3344,3345,3347],{},[501,3339,3340],{},"snapToGrid(20)",[501,3342,3343],{},"snapToGrid({ x, y, origin, smooth })",", en los ",[501,3346,1258],{}," del provider, de un área, de una lista o de un elemento arrastrable.",[702,3349,3350,3352],{},[720,3351,750],{},[720,3353,1582,3354,1021,3357,1021,3360,3363],{},[501,3355,3356],{},"restrictToWindowEdges",[501,3358,3359],{},"restrictToFirstScrollableAncestor",[501,3361,3362],{},"snapCenterToCursor"," y modificadores propios.",[481,3365,3070,3366,580],{},[808,3367,3368],{"href":79},"ejes, límites y cuadrículas",[874,3370,3372],{"id":3371},"auto-scroll","Desplazamiento automático",[696,3374,3375,3383],{},[699,3376,3377],{},[702,3378,3379,3381],{},[705,3380,710],{},[705,3382,713],{},[715,3384,3385,3400,3422,3442,3460,3472],{},[702,3386,3387,3393],{},[720,3388,3389,3392],{},[501,3390,3391],{},"\u003CDnDProvider :autoScrollViewport=\"true\">",", desactivado por defecto",[720,3394,3395,3396,3399],{},"Activado por defecto, para la ventana y todo contenedor desplazable. ",[501,3397,3398],{},":auto-scroll=\"false\""," lo desactiva.",[702,3401,3402,3407],{},[720,3403,3404],{},[501,3405,3406],{},"makeAutoScroll(el, { threshold, speed })",[720,3408,3409,3410,930,3413,3416,3417,965,3420,2340],{},"Nada: cualquier elemento con ",[501,3411,3412],{},"overflow: auto",[501,3414,3415],{},"scroll"," se desplaza. Para ajustar uno: ",[501,3418,3419],{},"makeDragArea(el, { autoScroll: { … } })",[501,3421,968],{},[702,3423,3424,3430],{},[720,3425,3426,3429],{},[501,3427,3428],{},"threshold"," en px, o por lado",[720,3431,3432,3434,3435,3438,3439,3441],{},[501,3433,3428],{},": una fracción del tamaño del contenedor (",[501,3436,3437],{},"0.2","), entre 24 y 96 px. ",[496,3440,871],{}," para umbrales por lado.",[702,3443,3444,3450],{},[720,3445,3446,3449],{},[501,3447,3448],{},"speed",", un multiplicador",[720,3451,3452,3455,3456,3459],{},[501,3453,3454],{},"maxSpeed"," (25 px por frame) y ",[501,3457,3458],{},"acceleration"," (10).",[702,3461,3462,3467],{},[720,3463,3464],{},[501,3465,3466],{},"disabled: true",[720,3468,3469,580],{},[501,3470,3471],{},"autoScroll: false",[702,3473,3474,3479],{},[720,3475,3476],{},[501,3477,3478],{},"isScrolling",[720,3480,3481,1520,3483,3485,3486,580],{},[501,3482,1591],{},[501,3484,162],{}," o de ",[501,3487,2394],{},[874,3489,3491],{"id":3490},"keyboard-and-accessibility","Teclado y accesibilidad",[696,3493,3494,3502],{},[699,3495,3496],{},[702,3497,3498,3500],{},[705,3499,710],{},[705,3501,713],{},[715,3503,3504,3530,3544,3565,3582,3596],{},[702,3505,3506,3511],{},[720,3507,3508,2655],{},[501,3509,3510],{},"tabindex=\"0\"",[720,3512,3513,3514,1021,3517,1021,3520,1021,3523,515,3526,3529],{},"Se pone por ti, con ",[501,3515,3516],{},"role",[501,3518,3519],{},"aria-roledescription",[501,3521,3522],{},"aria-describedby",[501,3524,3525],{},"aria-disabled",[501,3527,3528],{},"aria-pressed",". Tus propios atributos tienen prioridad.",[702,3531,3532,3538],{},[720,3533,3534,3537],{},[501,3535,3536],{},":aria-grabbed=\"isDragging\""," a mano",[720,3539,3540,3541,3543],{},"Quítalo: ",[501,3542,3528],{}," sigue el arrastre.",[702,3545,3546,3552],{},[720,3547,3548,3549],{},"Teclas configuradas en ",[501,3550,3551],{},"useDnDProvider().keyboard.keys",[720,3553,3554,3555,3558,3559,930,3562,580],{},"La prop ",[501,3556,3557],{},"keyboard"," del provider. Las asignaciones coinciden con ",[501,3560,3561],{},"event.code",[501,3563,3564],{},"event.key",[702,3566,3567,3572],{},[720,3568,3569,3570],{},"Las flechas mueven la vista previa ",[501,3571,1179],{},[720,3573,3574,3575,3577,3578,3581],{},"Arrastres libres: ",[501,3576,1179],{}," px. Listas: de hueco en hueco, y hacia la siguiente lista del grupo. ",[501,3579,3580],{},"keyboardMode: 'droppables'"," salta entre destinos.",[702,3583,3584,3592],{},[720,3585,3586,3587,1021,3590,1167],{},"Reasignar las flechas (",[501,3588,3589],{},"forMove",[501,3591,1195],{},[720,3593,3594],{},[496,3595,1203],{},[702,3597,3598,3601],{},[720,3599,3600],{},"Sin anuncios",[720,3602,3603,3604,3606,3607,515,3609,3611],{},"Una región viva anuncia cada agarre, movimiento, drop y cancelación. ",[501,3605,1921],{}," pone nombre a las cosas; ",[501,3608,1292],{},[501,3610,1295],{}," cambian su redacción.",[481,3613,3070,3614,580],{},[808,3615,3616],{"href":94},"accesibilidad",[874,3618,3620],{"id":3619},"events-and-drop-decisions","Eventos y decisiones de drop",[696,3622,3623,3631],{},[699,3624,3625],{},[702,3626,3627,3629],{},[705,3628,710],{},[705,3630,713],{},[715,3632,3633,3652,3665,3685,3695,3717,3732,3749,3762],{},[702,3634,3635,3640],{},[720,3636,3637,3639],{},[501,3638,1809],{}," del elemento arrastrable",[720,3641,3642,3645,3646,3649,3650,580],{},[501,3643,3644],{},"useDnDMonitor({ onDragStart })",", comprobando ",[501,3647,3648],{},"active.ids",". Para una clase, basta con ",[501,3651,1866],{},[702,3653,3654,3658],{},[720,3655,3656],{},[501,3657,1812],{},[720,3659,3660,3661,3664],{},"El ",[501,3662,3663],{},"onDragMove"," del monitor.",[702,3666,3667,3672],{},[720,3668,3669,3671],{},[501,3670,1815],{},", soltado o cancelado",[720,3673,3660,3674,3677,3678,1385,3681,3684],{},[501,3675,3676],{},"onDragEnd"," del monitor (un drop) y ",[501,3679,3680],{},"onDragCancel",[501,3682,3683],{},"onDragSettle"," escucha ambos, una vez que el overlay ha aterrizado.",[702,3686,3687,3691],{},[720,3688,3689],{},[501,3690,1818],{},[720,3692,3660,3693,3664],{},[501,3694,3680],{},[702,3696,3697,3707],{},[720,3698,3699,1021,3702,3704,3705,1846],{},[501,3700,3701],{},"onHover",[501,3703,1841],{}," del elemento arrastrable, y su ",[501,3706,1845],{},[720,3708,3709,3711,3712,1021,3714,3716],{},[501,3710,138],{}," en el elemento: ",[501,3713,1855],{},[501,3715,1858],{},". Las filas de una lista no necesitan nada.",[702,3718,3719,3726],{},[720,3720,3721,1021,3723,3725],{},[501,3722,2015],{},[501,3724,1841],{}," del droppable",[720,3727,3728,1021,3730,580],{},[501,3729,1855],{},[501,3731,1858],{},[702,3733,3734,3738],{},[720,3735,3736,3725],{},[501,3737,2035],{},[720,3739,3740,3742,3743,3745,3746,3748],{},[501,3741,588],{}," decide, luego ",[501,3744,507],{}," aplica. ",[501,3747,507],{}," es síncrono, y lo que devuelve se ignora.",[702,3750,3751,3755],{},[720,3752,3753,3725],{},[501,3754,2057],{},[720,3756,3757,3759,3760,580],{},[501,3758,588],{},", con ",[501,3761,3241],{},[702,3763,3764,3766],{},[720,3765,750],{},[720,3767,3768,3769,3772,3773,3776,3777,1021,3780,515,3782,3664],{},"Nuevo: los ",[501,3770,3771],{},"@drag-start"," … ",[501,3774,3775],{},"@drag-settle"," del provider, y los ",[501,3778,3779],{},"onDragOver",[501,3781,588],{},[501,3783,3784],{},"onDragResume",[481,3786,1849,3787,3789,3790,3792],{},[501,3788,507],{}," de la v2 podía devolver un valor, o una promesa de uno, para decidir el drop. En la v3\nesa es la tarea de ",[501,3791,588],{},", en listas, árboles, destinos de drop y monitores:",[696,3794,3795,3809],{},[699,3796,3797],{},[702,3798,3799,3804],{},[705,3800,3801,3803],{},[501,3802,507],{}," de la v2 devuelve",[705,3805,3806,3808],{},[501,3807,588],{}," de la v3 devuelve",[715,3810,3811,3828,3845,3858,3877],{},[702,3812,3813,3820],{},[720,3814,3815,3816,3819],{},"Nada, o ",[501,3817,3818],{},"true",": el drop se completa",[720,3821,3822,1021,3825,3827],{},[501,3823,3824],{},"'accept'",[501,3826,3818],{}," o nada.",[702,3829,3830,3835],{},[720,3831,3832,3834],{},[501,3833,1092],{},": este drop se descarta, el arrastre sigue activo",[720,3836,3837,1385,3840],{},[501,3838,3839],{},"'continue'",[496,3841,3842,3844],{},[501,3843,1092],{}," ahora rechaza el drop.",[702,3846,3847,3850],{},[720,3848,3849],{},"Una promesa rechazada, o una excepción: el arrastre se cancela",[720,3851,3852,930,3855,3857],{},[501,3853,3854],{},"'reject'",[501,3856,1092],{},". Una excepción también rechaza.",[702,3859,3860,3867],{},[720,3861,3862,3863,1394,3865],{},"Una promesa; mientras tanto ",[501,3864,1352],{},[501,3866,1364],{},[720,3868,3862,3869,1394,3871,3873,3874,580],{},[501,3870,1138],{},[501,3872,1382],{}," y el overlay espera con ",[501,3875,3876],{},"data-dnd-overlay=\"dropping\"",[702,3878,3879,3887],{},[720,3880,3881,3883,3884],{},[501,3882,3235],{}," devuelve ",[501,3885,3886],{},"IDragItem[]",[720,3888,3889],{},"Un array de ids: solo esos se sueltan, los demás vuelven a su sitio.",[481,3891,3892,3893,3895,3896,3898,3899,3902,3903,580],{},"Los monitores responden primero, luego el destino. Después se ejecuta el ",[501,3894,507],{}," del destino, una\nlista escribe sus nuevos arrays y le sigue ",[501,3897,3676],{},". Más en ",[808,3900,3901],{"href":84},"decidir un drop","\ny en la ",[808,3904,3905],{"href":173},"API de eventos",[874,3907,3909],{"id":3908},"types","Tipos",[696,3911,3912,3920],{},[699,3913,3914],{},[702,3915,3916,3918],{},[705,3917,710],{},[705,3919,713],{},[715,3921,3922,3943,3955,3967,3978,4008,4022,4037,4049,4061,4073,4085,4100],{},[702,3923,3924,3928],{},[720,3925,3926],{},[501,3927,2158],{},[720,3929,3930,3933,3934,3937,3938,3036,3941,812],{},[501,3931,3932],{},"DnDEvent"," (destinos, monitores), ",[501,3935,3936],{},"SortableDropEvent"," (listas), ",[501,3939,3940],{},"DnDEndEvent",[501,3942,3676],{},[702,3944,3945,3950],{},[720,3946,3947],{},[501,3948,3949],{},"IDragItem",[720,3951,3952,580],{},[501,3953,3954],{},"DragItem",[702,3956,3957,3962],{},[720,3958,3959],{},[501,3960,3961],{},"IDropZoneContext",[720,3963,3964,580],{},[501,3965,3966],{},"Over",[702,3968,3969,3974],{},[720,3970,3971],{},[501,3972,3973],{},"IHoveredDraggableContext",[720,3975,3976],{},[496,3977,1203],{},[702,3979,3980,3994],{},[720,3981,3982,1021,3985,1021,3988,1021,3991],{},[501,3983,3984],{},"ISuggestSortResult",[501,3986,3987],{},"ISuggestSwapResult",[501,3989,3990],{},"ISuggestCopyResult",[501,3992,3993],{},"ISuggestRemoveResult",[720,3995,3996,1081,3998,1021,4001,1021,4003,1021,4005,580],{},[501,3997,3936],{},[501,3999,4000],{},"result",[501,4002,1144],{},[501,4004,1141],{},[501,4006,4007],{},"partner",[702,4009,4010,4015],{},[720,4011,4012],{},[501,4013,4014],{},"IDropValidateEvent",[720,4016,4017,4019,4020,580],{},[501,4018,3932],{},", en ",[501,4021,588],{},[702,4023,4024,4029],{},[720,4025,4026],{},[501,4027,4028],{},"IPlacement",[720,4030,4031,4034,4035,580],{},[501,4032,4033],{},"Placement",", sin ",[501,4036,2120],{},[702,4038,4039,4044],{},[720,4040,4041],{},[501,4042,4043],{},"ICoordinates",[720,4045,4046,580],{},[501,4047,4048],{},"Coordinates",[702,4050,4051,4056],{},[720,4052,4053],{},[501,4054,4055],{},"IDragActivationOptions",[720,4057,4058,580],{},[501,4059,4060],{},"ActivationOptions",[702,4062,4063,4068],{},[720,4064,4065],{},[501,4066,4067],{},"IAutoScrollOptions",[720,4069,4070,580],{},[501,4071,4072],{},"AutoScrollOptions",[702,4074,4075,4080],{},[720,4076,4077],{},[501,4078,4079],{},"TDnDState",[720,4081,4082,580],{},[501,4083,4084],{},"DnDStatus",[702,4086,4087,4092],{},[720,4088,4089],{},[501,4090,4091],{},"IDnDProviderExternal",[720,4093,4094,4097,4098,580],{},[501,4095,4096],{},"DnDState",", lo que devuelve ",[501,4099,2394],{},[702,4101,4102,4110],{},[720,4103,4104,1021,4107],{},[501,4105,4106],{},"IDraggableEvents",[501,4108,4109],{},"IDroppableEvents",[720,4111,4112,4113,1021,4116,515,4119,580],{},"Callbacks en ",[501,4114,4115],{},"DraggableOptions",[501,4117,4118],{},"DroppableOptions",[501,4120,4121],{},"DnDMonitor",[874,4123,4125],{"id":4124},"nuxt","Nuxt",[628,4127,4129],{"className":630,"code":4128,"language":633,"meta":634,"style":634},"npm i @vue-dnd-kit\u002Fnuxt@^3 @vue-dnd-kit\u002Fcore@^3\n",[501,4130,4131],{"__ignoreMap":634},[638,4132,4133,4135,4137,4140],{"class":640,"line":641},[638,4134,632],{"class":644},[638,4136,648],{"class":647},[638,4138,4139],{"class":647}," @vue-dnd-kit\u002Fnuxt@^3",[638,4141,651],{"class":647},[696,4143,4144,4160],{},[699,4145,4146],{},[702,4147,4148,4154],{},[705,4149,4150,4151,4153],{},"v2 (",[501,4152,736],{}," 1.x)",[705,4155,4156,4157,4159],{},"v3 (",[501,4158,736],{}," 3.x)",[715,4161,4162,4199,4224,4234,4249,4266],{},[702,4163,4164,4179],{},[720,4165,4166,4167,1021,4169,1021,4171,1021,4173,1021,4175,1021,4177],{},"Importa automáticamente ",[501,4168,134],{},[501,4170,138],{},[501,4172,157],{},[501,4174,609],{},[501,4176,612],{},[501,4178,976],{},[720,4180,4166,4181,1021,4183,1021,4185,1021,4187,1021,4189,1021,4191,1021,4193,1021,4195,1021,4197,580],{},[501,4182,134],{},[501,4184,138],{},[501,4186,143],{},[501,4188,147],{},[501,4190,152],{},[501,4192,157],{},[501,4194,162],{},[501,4196,981],{},[501,4198,985],{},[702,4200,4201,4204],{},[720,4202,4203],{},"Ningún tipo importado automáticamente",[720,4205,4206,4207,1021,4209,1021,4211,4214,4215,1021,4218,1021,4221,4223],{},"Los tipos principales sí (",[501,4208,3932],{},[501,4210,3936],{},[501,4212,4213],{},"OverlayProps","…). Los genéricos (",[501,4216,4217],{},"Key",[501,4219,4220],{},"Active",[501,4222,3966],{},") se importan a mano.",[702,4225,4226,4228],{},[720,4227,750],{},[720,4229,4230,4231,580],{},"Modificadores, funciones de colisión y sensores, a petición: ",[501,4232,4233],{},"vueDndKit: { autoImports: { modifiers: true, collision: true, sensors: true } }",[702,4235,4236,4243],{},[720,4237,4238,515,4240,4242],{},[501,4239,129],{},[501,4241,1008],{}," globales",[720,4244,4245,4246,580],{},"Lo mismo, con una opción ",[501,4247,4248],{},"prefix",[702,4250,4251,4257],{},[720,4252,4253,4256],{},[501,4254,4255],{},"\u003CDragPreview \u002F>"," en el layout, dentro del provider",[720,4258,4259,4260,4262,4263,4265],{},"Quítalo: el provider renderiza el overlay. ",[501,4261,1008],{}," recibe un ",[501,4264,1428],{}," y va dentro de los componentes de overlay.",[702,4267,4268,4274],{},[720,4269,4270,4271,4273],{},"Dependencia peer ",[501,4272,541],{}," 2",[720,4275,4270,4276,4278],{},[501,4277,541],{}," 3; Nuxt 4.",[481,4280,4281,2604,4284,4287,4288,580],{},[501,4282,4283],{},"modules: ['@vue-dnd-kit\u002Fnuxt']",[501,4285,4286],{},"nuxt.config.ts"," se queda como estaba. Consulta\n",[808,4289,4291],{"href":4290},"\u002Fdocs\u002Fgetting-started\u002Finstallation#nuxt","instalación",[485,4293,4295],{"id":4294},"before-and-after","Antes y después",[874,4297,4299],{"id":4298},"a-draggable-and-a-drop-zone","Un elemento arrastrable y una zona de drop",[481,4301,4302],{},[496,4303,710],{},[628,4305,4310],{"className":4306,"code":4307,"filename":4308,"language":4309,"meta":634,"style":634},"language-vue shiki shiki-themes dnd-light dnd-light dnd-dark","\u003Cscript setup lang=\"ts\">\nimport { useTemplateRef } from 'vue';\nimport { makeDraggable } from '@vue-dnd-kit\u002Fcore';\n\nconst props = defineProps\u003C{ card: Card }>();\nconst el = useTemplateRef\u003CHTMLElement>('el');\n\nconst { isDragging } = makeDraggable(el, {\n  groups: ['task'],\n  dragHandle: '.handle',\n  data: () => props.card,\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv ref=\"el\" tabindex=\"0\" :class=\"{ dragging: isDragging }\">\n    \u003Cspan class=\"handle\">⋮⋮\u003C\u002Fspan>\n    {{ card.title }}\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","Card.vue","vue",[501,4311,4312,4335,4361,4380,4387,4417,4445,4450,4480,4497,4510,4534,4540,4546,4551,4557,4589,4612,4618,4624],{"__ignoreMap":634},[638,4313,4314,4318,4322,4325,4329,4332],{"class":640,"line":641},[638,4315,4317],{"class":4316},"sf6mc","\u003Cscript",[638,4319,4321],{"class":4320},"sVvmN"," setup",[638,4323,4324],{"class":4320}," lang",[638,4326,4328],{"class":4327},"s6cML","=",[638,4330,4331],{"class":647},"\"ts\"",[638,4333,4334],{"class":4316},">\n",[638,4336,4338,4342,4345,4349,4352,4355,4358],{"class":640,"line":4337},2,[638,4339,4341],{"class":4340},"s78Kj","import",[638,4343,4344],{"class":4327}," {",[638,4346,4348],{"class":4347},"snmWg"," useTemplateRef ",[638,4350,4351],{"class":4327},"}",[638,4353,4354],{"class":4340}," from",[638,4356,4357],{"class":647}," 'vue'",[638,4359,4360],{"class":4327},";\n",[638,4362,4364,4366,4368,4371,4373,4375,4378],{"class":640,"line":4363},3,[638,4365,4341],{"class":4340},[638,4367,4344],{"class":4327},[638,4369,4370],{"class":4347}," makeDraggable ",[638,4372,4351],{"class":4327},[638,4374,4354],{"class":4340},[638,4376,4377],{"class":647}," '@vue-dnd-kit\u002Fcore'",[638,4379,4360],{"class":4327},[638,4381,4383],{"class":640,"line":4382},4,[638,4384,4386],{"emptyLinePlaceholder":4385},true,"\n",[638,4388,4390,4393,4396,4398,4401,4404,4407,4410,4414],{"class":640,"line":4389},5,[638,4391,4392],{"class":4340},"const",[638,4394,4395],{"class":4347}," props ",[638,4397,4328],{"class":4327},[638,4399,4400],{"class":644}," defineProps",[638,4402,4403],{"class":4327},"\u003C{",[638,4405,4406],{"class":4347}," card",[638,4408,4409],{"class":4327},":",[638,4411,4413],{"class":4412},"sR6Ar"," Card",[638,4415,4416],{"class":4327}," }>();\n",[638,4418,4420,4422,4425,4427,4430,4433,4436,4439,4442],{"class":640,"line":4419},6,[638,4421,4392],{"class":4340},[638,4423,4424],{"class":4347}," el ",[638,4426,4328],{"class":4327},[638,4428,4429],{"class":644}," useTemplateRef",[638,4431,4432],{"class":4327},"\u003C",[638,4434,4435],{"class":4412},"HTMLElement",[638,4437,4438],{"class":4327},">(",[638,4440,4441],{"class":647},"'el'",[638,4443,4444],{"class":4327},");\n",[638,4446,4448],{"class":640,"line":4447},7,[638,4449,4386],{"emptyLinePlaceholder":4385},[638,4451,4453,4455,4457,4460,4462,4465,4468,4471,4474,4477],{"class":640,"line":4452},8,[638,4454,4392],{"class":4340},[638,4456,4344],{"class":4327},[638,4458,4459],{"class":4347}," isDragging ",[638,4461,4351],{"class":4327},[638,4463,4464],{"class":4327}," =",[638,4466,4467],{"class":644}," makeDraggable",[638,4469,4470],{"class":4327},"(",[638,4472,4473],{"class":4347},"el",[638,4475,4476],{"class":4327},",",[638,4478,4479],{"class":4327}," {\n",[638,4481,4483,4486,4488,4491,4494],{"class":640,"line":4482},9,[638,4484,4485],{"class":4320},"  groups",[638,4487,4409],{"class":4327},[638,4489,4490],{"class":4327}," [",[638,4492,4493],{"class":647},"'task'",[638,4495,4496],{"class":4327},"],\n",[638,4498,4500,4503,4505,4508],{"class":640,"line":4499},10,[638,4501,4502],{"class":4320},"  dragHandle",[638,4504,4409],{"class":4327},[638,4506,4507],{"class":647}," '.handle'",[638,4509,1265],{"class":4327},[638,4511,4513,4516,4518,4521,4524,4527,4529,4532],{"class":640,"line":4512},11,[638,4514,4515],{"class":644},"  data",[638,4517,4409],{"class":4327},[638,4519,4520],{"class":4327}," ()",[638,4522,4523],{"class":4340}," =>",[638,4525,4526],{"class":4347}," props",[638,4528,580],{"class":4327},[638,4530,4531],{"class":4347},"card",[638,4533,1265],{"class":4327},[638,4535,4537],{"class":640,"line":4536},12,[638,4538,4539],{"class":4327},"});\n",[638,4541,4543],{"class":640,"line":4542},13,[638,4544,4545],{"class":4316},"\u003C\u002Fscript>\n",[638,4547,4549],{"class":640,"line":4548},14,[638,4550,4386],{"emptyLinePlaceholder":4385},[638,4552,4554],{"class":640,"line":4553},15,[638,4555,4556],{"class":4316},"\u003Ctemplate>\n",[638,4558,4560,4563,4566,4568,4571,4574,4576,4579,4582,4584,4587],{"class":640,"line":4559},16,[638,4561,4562],{"class":4316},"  \u003Cdiv",[638,4564,4565],{"class":4320}," ref",[638,4567,4328],{"class":4327},[638,4569,4570],{"class":647},"\"el\"",[638,4572,4573],{"class":4320}," tabindex",[638,4575,4328],{"class":4327},[638,4577,4578],{"class":647},"\"0\"",[638,4580,4581],{"class":4320}," :class",[638,4583,4328],{"class":4327},[638,4585,4586],{"class":647},"\"{ dragging: isDragging }\"",[638,4588,4334],{"class":4316},[638,4590,4592,4595,4598,4600,4603,4606,4609],{"class":640,"line":4591},17,[638,4593,4594],{"class":4316},"    \u003Cspan",[638,4596,4597],{"class":4320}," class",[638,4599,4328],{"class":4327},[638,4601,4602],{"class":647},"\"handle\"",[638,4604,4605],{"class":4316},">",[638,4607,4608],{"class":4347},"⋮⋮",[638,4610,4611],{"class":4316},"\u003C\u002Fspan>\n",[638,4613,4615],{"class":640,"line":4614},18,[638,4616,4617],{"class":4347},"    {{ card.title }}\n",[638,4619,4621],{"class":640,"line":4620},19,[638,4622,4623],{"class":4316},"  \u003C\u002Fdiv>\n",[638,4625,4627],{"class":640,"line":4626},20,[638,4628,4629],{"class":4316},"\u003C\u002Ftemplate>\n",[628,4631,4634],{"className":4306,"code":4632,"filename":4633,"language":4309,"meta":634,"style":634},"\u003Cscript setup lang=\"ts\">\nimport { useTemplateRef } from 'vue';\nimport { makeDroppable } from '@vue-dnd-kit\u002Fcore';\n\nconst emit = defineEmits\u003C{ drop: [cards: Card[]] }>();\nconst el = useTemplateRef\u003CHTMLElement>('el');\n\nconst { isDragOver, isAllowed } = makeDroppable(el, {\n  groups: ['task'],\n  events: {\n    onDrop: (e) => emit('drop', e.draggedItems.map((item) => item.data as Card)),\n  },\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv ref=\"el\" :class=\"{ over: isDragOver && isAllowed }\">\u003Cslot \u002F>\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","Zone.vue",[501,4635,4636,4650,4666,4683,4687,4720,4740,4744,4773,4785,4794,4859,4864,4868,4872,4876,4880,4906],{"__ignoreMap":634},[638,4637,4638,4640,4642,4644,4646,4648],{"class":640,"line":641},[638,4639,4317],{"class":4316},[638,4641,4321],{"class":4320},[638,4643,4324],{"class":4320},[638,4645,4328],{"class":4327},[638,4647,4331],{"class":647},[638,4649,4334],{"class":4316},[638,4651,4652,4654,4656,4658,4660,4662,4664],{"class":640,"line":4337},[638,4653,4341],{"class":4340},[638,4655,4344],{"class":4327},[638,4657,4348],{"class":4347},[638,4659,4351],{"class":4327},[638,4661,4354],{"class":4340},[638,4663,4357],{"class":647},[638,4665,4360],{"class":4327},[638,4667,4668,4670,4672,4675,4677,4679,4681],{"class":640,"line":4363},[638,4669,4341],{"class":4340},[638,4671,4344],{"class":4327},[638,4673,4674],{"class":4347}," makeDroppable ",[638,4676,4351],{"class":4327},[638,4678,4354],{"class":4340},[638,4680,4377],{"class":647},[638,4682,4360],{"class":4327},[638,4684,4685],{"class":640,"line":4382},[638,4686,4386],{"emptyLinePlaceholder":4385},[638,4688,4689,4691,4694,4696,4699,4701,4704,4706,4708,4711,4713,4715,4718],{"class":640,"line":4389},[638,4690,4392],{"class":4340},[638,4692,4693],{"class":4347}," emit ",[638,4695,4328],{"class":4327},[638,4697,4698],{"class":644}," defineEmits",[638,4700,4403],{"class":4327},[638,4702,4703],{"class":4347}," drop",[638,4705,4409],{"class":4327},[638,4707,4490],{"class":4327},[638,4709,4710],{"class":4347},"cards",[638,4712,4409],{"class":4327},[638,4714,4413],{"class":4412},[638,4716,4717],{"class":4327},"[]]",[638,4719,4416],{"class":4327},[638,4721,4722,4724,4726,4728,4730,4732,4734,4736,4738],{"class":640,"line":4419},[638,4723,4392],{"class":4340},[638,4725,4424],{"class":4347},[638,4727,4328],{"class":4327},[638,4729,4429],{"class":644},[638,4731,4432],{"class":4327},[638,4733,4435],{"class":4412},[638,4735,4438],{"class":4327},[638,4737,4441],{"class":647},[638,4739,4444],{"class":4327},[638,4741,4742],{"class":640,"line":4447},[638,4743,4386],{"emptyLinePlaceholder":4385},[638,4745,4746,4748,4750,4753,4755,4758,4760,4762,4765,4767,4769,4771],{"class":640,"line":4452},[638,4747,4392],{"class":4340},[638,4749,4344],{"class":4327},[638,4751,4752],{"class":4347}," isDragOver",[638,4754,4476],{"class":4327},[638,4756,4757],{"class":4347}," isAllowed ",[638,4759,4351],{"class":4327},[638,4761,4464],{"class":4327},[638,4763,4764],{"class":644}," makeDroppable",[638,4766,4470],{"class":4327},[638,4768,4473],{"class":4347},[638,4770,4476],{"class":4327},[638,4772,4479],{"class":4327},[638,4774,4775,4777,4779,4781,4783],{"class":640,"line":4482},[638,4776,4485],{"class":4320},[638,4778,4409],{"class":4327},[638,4780,4490],{"class":4327},[638,4782,4493],{"class":647},[638,4784,4496],{"class":4327},[638,4786,4787,4790,4792],{"class":640,"line":4499},[638,4788,4789],{"class":4320},"  events",[638,4791,4409],{"class":4327},[638,4793,4479],{"class":4327},[638,4795,4796,4799,4801,4803,4806,4808,4810,4813,4815,4818,4820,4823,4825,4828,4830,4833,4836,4839,4841,4843,4846,4848,4851,4854,4856],{"class":640,"line":4512},[638,4797,4798],{"class":644},"    onDrop",[638,4800,4409],{"class":4327},[638,4802,3036],{"class":4327},[638,4804,4805],{"class":4320},"e",[638,4807,1167],{"class":4327},[638,4809,4523],{"class":4340},[638,4811,4812],{"class":644}," emit",[638,4814,4470],{"class":4327},[638,4816,4817],{"class":647},"'drop'",[638,4819,4476],{"class":4327},[638,4821,4822],{"class":644}," e",[638,4824,580],{"class":4327},[638,4826,4827],{"class":644},"draggedItems",[638,4829,580],{"class":4327},[638,4831,4832],{"class":644},"map",[638,4834,4835],{"class":4327},"((",[638,4837,4838],{"class":4320},"item",[638,4840,1167],{"class":4327},[638,4842,4523],{"class":4340},[638,4844,4845],{"class":4347}," item",[638,4847,580],{"class":4327},[638,4849,4850],{"class":4347},"data ",[638,4852,4853],{"class":4340},"as",[638,4855,4413],{"class":4412},[638,4857,4858],{"class":4327},")),\n",[638,4860,4861],{"class":640,"line":4536},[638,4862,4863],{"class":4327},"  },\n",[638,4865,4866],{"class":640,"line":4542},[638,4867,4539],{"class":4327},[638,4869,4870],{"class":640,"line":4548},[638,4871,4545],{"class":4316},[638,4873,4874],{"class":640,"line":4553},[638,4875,4386],{"emptyLinePlaceholder":4385},[638,4877,4878],{"class":640,"line":4559},[638,4879,4556],{"class":4316},[638,4881,4882,4884,4886,4888,4890,4892,4894,4897,4900,4903],{"class":640,"line":4591},[638,4883,4562],{"class":4316},[638,4885,4565],{"class":4320},[638,4887,4328],{"class":4327},[638,4889,4570],{"class":647},[638,4891,4581],{"class":4320},[638,4893,4328],{"class":4327},[638,4895,4896],{"class":647},"\"{ over: isDragOver && isAllowed }\"",[638,4898,4899],{"class":4316},">\u003Cslot",[638,4901,4902],{"class":4347}," \u002F",[638,4904,4905],{"class":4316},">\u003C\u002Fdiv>\n",[638,4907,4908],{"class":640,"line":4614},[638,4909,4629],{"class":4316},[481,4911,4912],{},[496,4913,713],{},[628,4915,4917],{"className":4306,"code":4916,"filename":4308,"language":4309,"meta":634,"style":634},"\u003Cscript setup lang=\"ts\">\nimport { useTemplateRef } from 'vue';\nimport { makeDraggable } from '@vue-dnd-kit\u002Fcore';\n\nconst props = defineProps\u003C{ card: Card }>();\nconst el = useTemplateRef\u003CHTMLElement>('el');\n\nconst { isDragging } = makeDraggable(el, {\n  id: () => props.card.id,   \u002F\u002F read back as `active.id`\n  type: 'task',              \u002F\u002F matched by the targets' `accept`\n  handle: '.handle',\n  data: () => props.card,\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv ref=\"el\" :class=\"{ dragging: isDragging }\">\n    \u003Cbutton type=\"button\" class=\"handle\" :aria-label=\"`Move ${card.title}`\">⋮⋮\u003C\u002Fbutton>\n    {{ card.title }}\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[501,4918,4919,4933,4949,4965,4969,4989,5009,5013,5035,5062,5077,5088,5106,5110,5114,5118,5122,5140,5174,5178,5182],{"__ignoreMap":634},[638,4920,4921,4923,4925,4927,4929,4931],{"class":640,"line":641},[638,4922,4317],{"class":4316},[638,4924,4321],{"class":4320},[638,4926,4324],{"class":4320},[638,4928,4328],{"class":4327},[638,4930,4331],{"class":647},[638,4932,4334],{"class":4316},[638,4934,4935,4937,4939,4941,4943,4945,4947],{"class":640,"line":4337},[638,4936,4341],{"class":4340},[638,4938,4344],{"class":4327},[638,4940,4348],{"class":4347},[638,4942,4351],{"class":4327},[638,4944,4354],{"class":4340},[638,4946,4357],{"class":647},[638,4948,4360],{"class":4327},[638,4950,4951,4953,4955,4957,4959,4961,4963],{"class":640,"line":4363},[638,4952,4341],{"class":4340},[638,4954,4344],{"class":4327},[638,4956,4370],{"class":4347},[638,4958,4351],{"class":4327},[638,4960,4354],{"class":4340},[638,4962,4377],{"class":647},[638,4964,4360],{"class":4327},[638,4966,4967],{"class":640,"line":4382},[638,4968,4386],{"emptyLinePlaceholder":4385},[638,4970,4971,4973,4975,4977,4979,4981,4983,4985,4987],{"class":640,"line":4389},[638,4972,4392],{"class":4340},[638,4974,4395],{"class":4347},[638,4976,4328],{"class":4327},[638,4978,4400],{"class":644},[638,4980,4403],{"class":4327},[638,4982,4406],{"class":4347},[638,4984,4409],{"class":4327},[638,4986,4413],{"class":4412},[638,4988,4416],{"class":4327},[638,4990,4991,4993,4995,4997,4999,5001,5003,5005,5007],{"class":640,"line":4419},[638,4992,4392],{"class":4340},[638,4994,4424],{"class":4347},[638,4996,4328],{"class":4327},[638,4998,4429],{"class":644},[638,5000,4432],{"class":4327},[638,5002,4435],{"class":4412},[638,5004,4438],{"class":4327},[638,5006,4441],{"class":647},[638,5008,4444],{"class":4327},[638,5010,5011],{"class":640,"line":4447},[638,5012,4386],{"emptyLinePlaceholder":4385},[638,5014,5015,5017,5019,5021,5023,5025,5027,5029,5031,5033],{"class":640,"line":4452},[638,5016,4392],{"class":4340},[638,5018,4344],{"class":4327},[638,5020,4459],{"class":4347},[638,5022,4351],{"class":4327},[638,5024,4464],{"class":4327},[638,5026,4467],{"class":644},[638,5028,4470],{"class":4327},[638,5030,4473],{"class":4347},[638,5032,4476],{"class":4327},[638,5034,4479],{"class":4327},[638,5036,5037,5040,5042,5044,5046,5048,5050,5052,5054,5056,5058],{"class":640,"line":4482},[638,5038,5039],{"class":644},"  id",[638,5041,4409],{"class":4327},[638,5043,4520],{"class":4327},[638,5045,4523],{"class":4340},[638,5047,4526],{"class":4347},[638,5049,580],{"class":4327},[638,5051,4531],{"class":4347},[638,5053,580],{"class":4327},[638,5055,1428],{"class":4347},[638,5057,4476],{"class":4327},[638,5059,5061],{"class":5060},"sytrG","   \u002F\u002F read back as `active.id`\n",[638,5063,5064,5067,5069,5072,5074],{"class":640,"line":4499},[638,5065,5066],{"class":4320},"  type",[638,5068,4409],{"class":4327},[638,5070,5071],{"class":647}," 'task'",[638,5073,4476],{"class":4327},[638,5075,5076],{"class":5060},"              \u002F\u002F matched by the targets' `accept`\n",[638,5078,5079,5082,5084,5086],{"class":640,"line":4512},[638,5080,5081],{"class":4320},"  handle",[638,5083,4409],{"class":4327},[638,5085,4507],{"class":647},[638,5087,1265],{"class":4327},[638,5089,5090,5092,5094,5096,5098,5100,5102,5104],{"class":640,"line":4536},[638,5091,4515],{"class":644},[638,5093,4409],{"class":4327},[638,5095,4520],{"class":4327},[638,5097,4523],{"class":4340},[638,5099,4526],{"class":4347},[638,5101,580],{"class":4327},[638,5103,4531],{"class":4347},[638,5105,1265],{"class":4327},[638,5107,5108],{"class":640,"line":4542},[638,5109,4539],{"class":4327},[638,5111,5112],{"class":640,"line":4548},[638,5113,4545],{"class":4316},[638,5115,5116],{"class":640,"line":4553},[638,5117,4386],{"emptyLinePlaceholder":4385},[638,5119,5120],{"class":640,"line":4559},[638,5121,4556],{"class":4316},[638,5123,5124,5126,5128,5130,5132,5134,5136,5138],{"class":640,"line":4591},[638,5125,4562],{"class":4316},[638,5127,4565],{"class":4320},[638,5129,4328],{"class":4327},[638,5131,4570],{"class":647},[638,5133,4581],{"class":4320},[638,5135,4328],{"class":4327},[638,5137,4586],{"class":647},[638,5139,4334],{"class":4316},[638,5141,5142,5145,5148,5150,5153,5155,5157,5159,5162,5164,5167,5169,5171],{"class":640,"line":4614},[638,5143,5144],{"class":4316},"    \u003Cbutton",[638,5146,5147],{"class":4320}," type",[638,5149,4328],{"class":4327},[638,5151,5152],{"class":647},"\"button\"",[638,5154,4597],{"class":4320},[638,5156,4328],{"class":4327},[638,5158,4602],{"class":647},[638,5160,5161],{"class":4320}," :aria-label",[638,5163,4328],{"class":4327},[638,5165,5166],{"class":647},"\"`Move ${card.title}`\"",[638,5168,4605],{"class":4316},[638,5170,4608],{"class":4347},[638,5172,5173],{"class":4316},"\u003C\u002Fbutton>\n",[638,5175,5176],{"class":640,"line":4620},[638,5177,4617],{"class":4347},[638,5179,5180],{"class":640,"line":4626},[638,5181,4623],{"class":4316},[638,5183,5185],{"class":640,"line":5184},21,[638,5186,4629],{"class":4316},[628,5188,5190],{"className":4306,"code":5189,"filename":4633,"language":4309,"meta":634,"style":634},"\u003Cscript setup lang=\"ts\">\nimport { useTemplateRef } from 'vue';\nimport { makeDroppable } from '@vue-dnd-kit\u002Fcore';\n\nconst emit = defineEmits\u003C{ drop: [cards: Card[]] }>();\nconst el = useTemplateRef\u003CHTMLElement>('el');\n\nconst { isOver, isAccepting } = makeDroppable(el, {\n  accept: 'task',\n  onDrop: (e) => emit('drop', e.active.items.map((item) => item.data as Card)),\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv ref=\"el\" :class=\"{ over: isOver && isAccepting }\">\u003Cslot \u002F>\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[501,5191,5192,5206,5222,5238,5242,5270,5290,5294,5322,5333,5390,5394,5398,5402,5406,5429],{"__ignoreMap":634},[638,5193,5194,5196,5198,5200,5202,5204],{"class":640,"line":641},[638,5195,4317],{"class":4316},[638,5197,4321],{"class":4320},[638,5199,4324],{"class":4320},[638,5201,4328],{"class":4327},[638,5203,4331],{"class":647},[638,5205,4334],{"class":4316},[638,5207,5208,5210,5212,5214,5216,5218,5220],{"class":640,"line":4337},[638,5209,4341],{"class":4340},[638,5211,4344],{"class":4327},[638,5213,4348],{"class":4347},[638,5215,4351],{"class":4327},[638,5217,4354],{"class":4340},[638,5219,4357],{"class":647},[638,5221,4360],{"class":4327},[638,5223,5224,5226,5228,5230,5232,5234,5236],{"class":640,"line":4363},[638,5225,4341],{"class":4340},[638,5227,4344],{"class":4327},[638,5229,4674],{"class":4347},[638,5231,4351],{"class":4327},[638,5233,4354],{"class":4340},[638,5235,4377],{"class":647},[638,5237,4360],{"class":4327},[638,5239,5240],{"class":640,"line":4382},[638,5241,4386],{"emptyLinePlaceholder":4385},[638,5243,5244,5246,5248,5250,5252,5254,5256,5258,5260,5262,5264,5266,5268],{"class":640,"line":4389},[638,5245,4392],{"class":4340},[638,5247,4693],{"class":4347},[638,5249,4328],{"class":4327},[638,5251,4698],{"class":644},[638,5253,4403],{"class":4327},[638,5255,4703],{"class":4347},[638,5257,4409],{"class":4327},[638,5259,4490],{"class":4327},[638,5261,4710],{"class":4347},[638,5263,4409],{"class":4327},[638,5265,4413],{"class":4412},[638,5267,4717],{"class":4327},[638,5269,4416],{"class":4327},[638,5271,5272,5274,5276,5278,5280,5282,5284,5286,5288],{"class":640,"line":4419},[638,5273,4392],{"class":4340},[638,5275,4424],{"class":4347},[638,5277,4328],{"class":4327},[638,5279,4429],{"class":644},[638,5281,4432],{"class":4327},[638,5283,4435],{"class":4412},[638,5285,4438],{"class":4327},[638,5287,4441],{"class":647},[638,5289,4444],{"class":4327},[638,5291,5292],{"class":640,"line":4447},[638,5293,4386],{"emptyLinePlaceholder":4385},[638,5295,5296,5298,5300,5303,5305,5308,5310,5312,5314,5316,5318,5320],{"class":640,"line":4452},[638,5297,4392],{"class":4340},[638,5299,4344],{"class":4327},[638,5301,5302],{"class":4347}," isOver",[638,5304,4476],{"class":4327},[638,5306,5307],{"class":4347}," isAccepting ",[638,5309,4351],{"class":4327},[638,5311,4464],{"class":4327},[638,5313,4764],{"class":644},[638,5315,4470],{"class":4327},[638,5317,4473],{"class":4347},[638,5319,4476],{"class":4327},[638,5321,4479],{"class":4327},[638,5323,5324,5327,5329,5331],{"class":640,"line":4482},[638,5325,5326],{"class":4320},"  accept",[638,5328,4409],{"class":4327},[638,5330,5071],{"class":647},[638,5332,1265],{"class":4327},[638,5334,5335,5338,5340,5342,5344,5346,5348,5350,5352,5354,5356,5358,5360,5362,5364,5366,5368,5370,5372,5374,5376,5378,5380,5382,5384,5386,5388],{"class":640,"line":4499},[638,5336,5337],{"class":644},"  onDrop",[638,5339,4409],{"class":4327},[638,5341,3036],{"class":4327},[638,5343,4805],{"class":4320},[638,5345,1167],{"class":4327},[638,5347,4523],{"class":4340},[638,5349,4812],{"class":644},[638,5351,4470],{"class":4327},[638,5353,4817],{"class":647},[638,5355,4476],{"class":4327},[638,5357,4822],{"class":644},[638,5359,580],{"class":4327},[638,5361,1129],{"class":644},[638,5363,580],{"class":4327},[638,5365,1126],{"class":644},[638,5367,580],{"class":4327},[638,5369,4832],{"class":644},[638,5371,4835],{"class":4327},[638,5373,4838],{"class":4320},[638,5375,1167],{"class":4327},[638,5377,4523],{"class":4340},[638,5379,4845],{"class":4347},[638,5381,580],{"class":4327},[638,5383,4850],{"class":4347},[638,5385,4853],{"class":4340},[638,5387,4413],{"class":4412},[638,5389,4858],{"class":4327},[638,5391,5392],{"class":640,"line":4512},[638,5393,4539],{"class":4327},[638,5395,5396],{"class":640,"line":4536},[638,5397,4545],{"class":4316},[638,5399,5400],{"class":640,"line":4542},[638,5401,4386],{"emptyLinePlaceholder":4385},[638,5403,5404],{"class":640,"line":4548},[638,5405,4556],{"class":4316},[638,5407,5408,5410,5412,5414,5416,5418,5420,5423,5425,5427],{"class":640,"line":4553},[638,5409,4562],{"class":4316},[638,5411,4565],{"class":4320},[638,5413,4328],{"class":4327},[638,5415,4570],{"class":647},[638,5417,4581],{"class":4320},[638,5419,4328],{"class":4327},[638,5421,5422],{"class":647},"\"{ over: isOver && isAccepting }\"",[638,5424,4899],{"class":4316},[638,5426,4902],{"class":4347},[638,5428,4905],{"class":4316},[638,5430,5431],{"class":640,"line":4559},[638,5432,4629],{"class":4316},[490,5434,5435,5451,5464],{},[493,5436,5437,5438,1021,5440,5442,5443,5446,5447,5450],{},"La tarjeta recibe ",[501,5439,847],{},[501,5441,3516],{}," y los atributos ",[501,5444,5445],{},"aria-*"," por sí sola. Un asa ",[501,5448,5449],{},"\u003Cbutton>"," puede\nrecibir el foco, y los arrastres con teclado empiezan desde ella.",[493,5452,5453,5455,5456,5458,5459,5461,5462,580],{},[501,5454,575],{}," pasó a ser ",[501,5457,1439],{}," en el elemento arrastrable y ",[501,5460,1688],{}," en el destino. Los callbacks\nsalieron del objeto ",[501,5463,2028],{},[493,5465,5466,5468,5469,5471],{},[501,5467,2110],{}," sin ",[501,5470,1912],{}," es un destino que rechaza el arrastre: un drop ahí vuelve a su sitio.",[874,5473,5475],{"id":5474},"a-sortable-list","Una lista ordenable",[481,5477,5478],{},[496,5479,710],{},[628,5481,5484],{"className":4306,"code":5482,"filename":5483,"language":4309,"meta":634,"style":634},"\u003Cscript setup lang=\"ts\">\nimport { useTemplateRef } from 'vue';\nimport { makeDroppable, type IDragEvent } from '@vue-dnd-kit\u002Fcore';\nimport TaskItem from '.\u002FTaskItem.vue';\n\nconst tasks = defineModel\u003CTask[]>({ required: true });\nconst el = useTemplateRef\u003CHTMLElement>('el');\n\nmakeDroppable(\n  el,\n  {\n    events: {\n      onDrop(e: IDragEvent) {\n        const r = e.helpers.suggestSort('vertical');\n        if (r) tasks.value = r.targetItems as Task[];\n      },\n    },\n  },\n  () => tasks.value,\n);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv ref=\"el\">\n    \u003CTransitionGroup name=\"list\">\n      \u003CTaskItem v-for=\"(task, index) in tasks\" :key=\"task.id\" :task=\"task\" :index=\"index\" :tasks=\"tasks\" \u002F>\n    \u003C\u002FTransitionGroup>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","TaskList.vue",[501,5485,5486,5500,5516,5539,5554,5558,5590,5610,5614,5621,5628,5633,5642,5660,5689,5727,5732,5737,5741,5757,5761,5765,5770,5775,5788,5804,5896,5902,5907],{"__ignoreMap":634},[638,5487,5488,5490,5492,5494,5496,5498],{"class":640,"line":641},[638,5489,4317],{"class":4316},[638,5491,4321],{"class":4320},[638,5493,4324],{"class":4320},[638,5495,4328],{"class":4327},[638,5497,4331],{"class":647},[638,5499,4334],{"class":4316},[638,5501,5502,5504,5506,5508,5510,5512,5514],{"class":640,"line":4337},[638,5503,4341],{"class":4340},[638,5505,4344],{"class":4327},[638,5507,4348],{"class":4347},[638,5509,4351],{"class":4327},[638,5511,4354],{"class":4340},[638,5513,4357],{"class":647},[638,5515,4360],{"class":4327},[638,5517,5518,5520,5522,5524,5526,5528,5531,5533,5535,5537],{"class":640,"line":4363},[638,5519,4341],{"class":4340},[638,5521,4344],{"class":4327},[638,5523,4764],{"class":4347},[638,5525,4476],{"class":4327},[638,5527,5147],{"class":4340},[638,5529,5530],{"class":4347}," IDragEvent ",[638,5532,4351],{"class":4327},[638,5534,4354],{"class":4340},[638,5536,4377],{"class":647},[638,5538,4360],{"class":4327},[638,5540,5541,5543,5546,5549,5552],{"class":640,"line":4382},[638,5542,4341],{"class":4340},[638,5544,5545],{"class":4347}," TaskItem ",[638,5547,5548],{"class":4340},"from",[638,5550,5551],{"class":647}," '.\u002FTaskItem.vue'",[638,5553,4360],{"class":4327},[638,5555,5556],{"class":640,"line":4389},[638,5557,4386],{"emptyLinePlaceholder":4385},[638,5559,5560,5562,5565,5567,5570,5572,5575,5578,5581,5583,5587],{"class":640,"line":4419},[638,5561,4392],{"class":4340},[638,5563,5564],{"class":4347}," tasks ",[638,5566,4328],{"class":4327},[638,5568,5569],{"class":644}," defineModel",[638,5571,4432],{"class":4327},[638,5573,5574],{"class":4412},"Task",[638,5576,5577],{"class":4327},"[]>({",[638,5579,5580],{"class":4320}," required",[638,5582,4409],{"class":4327},[638,5584,5586],{"class":5585},"s3IRZ"," true",[638,5588,5589],{"class":4327}," });\n",[638,5591,5592,5594,5596,5598,5600,5602,5604,5606,5608],{"class":640,"line":4447},[638,5593,4392],{"class":4340},[638,5595,4424],{"class":4347},[638,5597,4328],{"class":4327},[638,5599,4429],{"class":644},[638,5601,4432],{"class":4327},[638,5603,4435],{"class":4412},[638,5605,4438],{"class":4327},[638,5607,4441],{"class":647},[638,5609,4444],{"class":4327},[638,5611,5612],{"class":640,"line":4452},[638,5613,4386],{"emptyLinePlaceholder":4385},[638,5615,5616,5618],{"class":640,"line":4482},[638,5617,138],{"class":644},[638,5619,5620],{"class":4327},"(\n",[638,5622,5623,5626],{"class":640,"line":4499},[638,5624,5625],{"class":4347},"  el",[638,5627,1265],{"class":4327},[638,5629,5630],{"class":640,"line":4512},[638,5631,5632],{"class":4327},"  {\n",[638,5634,5635,5638,5640],{"class":640,"line":4536},[638,5636,5637],{"class":4320},"    events",[638,5639,4409],{"class":4327},[638,5641,4479],{"class":4327},[638,5643,5644,5647,5649,5651,5653,5656,5658],{"class":640,"line":4542},[638,5645,5646],{"class":644},"      onDrop",[638,5648,4470],{"class":4327},[638,5650,4805],{"class":4320},[638,5652,4409],{"class":4327},[638,5654,5655],{"class":4412}," IDragEvent",[638,5657,1167],{"class":4327},[638,5659,4479],{"class":4327},[638,5661,5662,5665,5668,5670,5672,5674,5677,5679,5682,5684,5687],{"class":640,"line":4548},[638,5663,5664],{"class":4340},"        const",[638,5666,5667],{"class":4347}," r ",[638,5669,4328],{"class":4327},[638,5671,4822],{"class":644},[638,5673,580],{"class":4327},[638,5675,5676],{"class":644},"helpers",[638,5678,580],{"class":4327},[638,5680,5681],{"class":644},"suggestSort",[638,5683,4470],{"class":4327},[638,5685,5686],{"class":647},"'vertical'",[638,5688,4444],{"class":4327},[638,5690,5691,5694,5696,5699,5701,5704,5706,5709,5711,5714,5716,5719,5721,5724],{"class":640,"line":4553},[638,5692,5693],{"class":4340},"        if",[638,5695,3036],{"class":4327},[638,5697,5698],{"class":4347},"r",[638,5700,1167],{"class":4327},[638,5702,5703],{"class":4347}," tasks",[638,5705,580],{"class":4327},[638,5707,5708],{"class":4347},"value ",[638,5710,4328],{"class":4327},[638,5712,5713],{"class":4347}," r",[638,5715,580],{"class":4327},[638,5717,5718],{"class":4347},"targetItems ",[638,5720,4853],{"class":4340},[638,5722,5723],{"class":4412}," Task",[638,5725,5726],{"class":4327},"[];\n",[638,5728,5729],{"class":640,"line":4559},[638,5730,5731],{"class":4327},"      },\n",[638,5733,5734],{"class":640,"line":4591},[638,5735,5736],{"class":4327},"    },\n",[638,5738,5739],{"class":640,"line":4614},[638,5740,4863],{"class":4327},[638,5742,5743,5746,5748,5750,5752,5755],{"class":640,"line":4620},[638,5744,5745],{"class":4327},"  ()",[638,5747,4523],{"class":4340},[638,5749,5703],{"class":4347},[638,5751,580],{"class":4327},[638,5753,5754],{"class":4347},"value",[638,5756,1265],{"class":4327},[638,5758,5759],{"class":640,"line":4626},[638,5760,4444],{"class":4327},[638,5762,5763],{"class":640,"line":5184},[638,5764,4545],{"class":4316},[638,5766,5768],{"class":640,"line":5767},22,[638,5769,4386],{"emptyLinePlaceholder":4385},[638,5771,5773],{"class":640,"line":5772},23,[638,5774,4556],{"class":4316},[638,5776,5778,5780,5782,5784,5786],{"class":640,"line":5777},24,[638,5779,4562],{"class":4316},[638,5781,4565],{"class":4320},[638,5783,4328],{"class":4327},[638,5785,4570],{"class":647},[638,5787,4334],{"class":4316},[638,5789,5791,5794,5797,5799,5802],{"class":640,"line":5790},25,[638,5792,5793],{"class":4316},"    \u003CTransitionGroup",[638,5795,5796],{"class":4320}," name",[638,5798,4328],{"class":4327},[638,5800,5801],{"class":647},"\"list\"",[638,5803,4334],{"class":4316},[638,5805,5807,5810,5813,5815,5818,5820,5823,5825,5828,5830,5833,5835,5837,5840,5843,5845,5847,5849,5851,5853,5855,5857,5859,5861,5863,5865,5867,5869,5872,5874,5876,5878,5880,5882,5885,5887,5889,5891,5893],{"class":640,"line":5806},26,[638,5808,5809],{"class":4316},"      \u003CTaskItem",[638,5811,5812],{"class":4340}," v-for",[638,5814,4328],{"class":4327},[638,5816,5817],{"class":647},"\"",[638,5819,4470],{"class":4327},[638,5821,5822],{"class":4347},"task",[638,5824,4476],{"class":4327},[638,5826,5827],{"class":4347}," index",[638,5829,1167],{"class":4327},[638,5831,5832],{"class":4327}," in",[638,5834,5703],{"class":4347},[638,5836,5817],{"class":647},[638,5838,5839],{"class":4327}," :",[638,5841,5842],{"class":4320},"key",[638,5844,4328],{"class":4327},[638,5846,5817],{"class":647},[638,5848,5822],{"class":4347},[638,5850,580],{"class":4327},[638,5852,1428],{"class":4347},[638,5854,5817],{"class":647},[638,5856,5839],{"class":4327},[638,5858,5822],{"class":4320},[638,5860,4328],{"class":4327},[638,5862,5817],{"class":647},[638,5864,5822],{"class":4347},[638,5866,5817],{"class":647},[638,5868,5839],{"class":4327},[638,5870,5871],{"class":4320},"index",[638,5873,4328],{"class":4327},[638,5875,5817],{"class":647},[638,5877,5871],{"class":4347},[638,5879,5817],{"class":647},[638,5881,5839],{"class":4327},[638,5883,5884],{"class":4320},"tasks",[638,5886,4328],{"class":4327},[638,5888,5817],{"class":647},[638,5890,5884],{"class":4347},[638,5892,5817],{"class":647},[638,5894,5895],{"class":4316}," \u002F>\n",[638,5897,5899],{"class":640,"line":5898},27,[638,5900,5901],{"class":4316},"    \u003C\u002FTransitionGroup>\n",[638,5903,5905],{"class":640,"line":5904},28,[638,5906,4623],{"class":4316},[638,5908,5910],{"class":640,"line":5909},29,[638,5911,4629],{"class":4316},[628,5913,5916],{"className":4306,"code":5914,"filename":5915,"language":4309,"meta":634,"style":634},"\u003Cscript setup lang=\"ts\">\nimport { useTemplateRef } from 'vue';\nimport { makeDraggable } from '@vue-dnd-kit\u002Fcore';\n\nconst props = defineProps\u003C{ task: Task; index: number; tasks: Task[] }>();\nconst el = useTemplateRef\u003CHTMLElement>('el');\n\nconst { isDragging } = makeDraggable(el, { id: props.task.id }, () => [props.index, props.tasks]);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv ref=\"el\" :class=\"{ 'is-dragging': isDragging }\">{{ task.title }}\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","TaskItem.vue",[501,5917,5918,5932,5948,5964,5968,6010,6030,6034,6099,6103,6107,6111,6136],{"__ignoreMap":634},[638,5919,5920,5922,5924,5926,5928,5930],{"class":640,"line":641},[638,5921,4317],{"class":4316},[638,5923,4321],{"class":4320},[638,5925,4324],{"class":4320},[638,5927,4328],{"class":4327},[638,5929,4331],{"class":647},[638,5931,4334],{"class":4316},[638,5933,5934,5936,5938,5940,5942,5944,5946],{"class":640,"line":4337},[638,5935,4341],{"class":4340},[638,5937,4344],{"class":4327},[638,5939,4348],{"class":4347},[638,5941,4351],{"class":4327},[638,5943,4354],{"class":4340},[638,5945,4357],{"class":647},[638,5947,4360],{"class":4327},[638,5949,5950,5952,5954,5956,5958,5960,5962],{"class":640,"line":4363},[638,5951,4341],{"class":4340},[638,5953,4344],{"class":4327},[638,5955,4370],{"class":4347},[638,5957,4351],{"class":4327},[638,5959,4354],{"class":4340},[638,5961,4377],{"class":647},[638,5963,4360],{"class":4327},[638,5965,5966],{"class":640,"line":4382},[638,5967,4386],{"emptyLinePlaceholder":4385},[638,5969,5970,5972,5974,5976,5978,5980,5983,5985,5987,5990,5992,5994,5997,5999,6001,6003,6005,6008],{"class":640,"line":4389},[638,5971,4392],{"class":4340},[638,5973,4395],{"class":4347},[638,5975,4328],{"class":4327},[638,5977,4400],{"class":644},[638,5979,4403],{"class":4327},[638,5981,5982],{"class":4347}," task",[638,5984,4409],{"class":4327},[638,5986,5723],{"class":4412},[638,5988,5989],{"class":4327},";",[638,5991,5827],{"class":4347},[638,5993,4409],{"class":4327},[638,5995,5996],{"class":4412}," number",[638,5998,5989],{"class":4327},[638,6000,5703],{"class":4347},[638,6002,4409],{"class":4327},[638,6004,5723],{"class":4412},[638,6006,6007],{"class":4327},"[]",[638,6009,4416],{"class":4327},[638,6011,6012,6014,6016,6018,6020,6022,6024,6026,6028],{"class":640,"line":4419},[638,6013,4392],{"class":4340},[638,6015,4424],{"class":4347},[638,6017,4328],{"class":4327},[638,6019,4429],{"class":644},[638,6021,4432],{"class":4327},[638,6023,4435],{"class":4412},[638,6025,4438],{"class":4327},[638,6027,4441],{"class":647},[638,6029,4444],{"class":4327},[638,6031,6032],{"class":640,"line":4447},[638,6033,4386],{"emptyLinePlaceholder":4385},[638,6035,6036,6038,6040,6042,6044,6046,6048,6050,6052,6054,6056,6059,6061,6063,6065,6067,6069,6072,6075,6077,6079,6081,6084,6086,6088,6090,6092,6094,6096],{"class":640,"line":4452},[638,6037,4392],{"class":4340},[638,6039,4344],{"class":4327},[638,6041,4459],{"class":4347},[638,6043,4351],{"class":4327},[638,6045,4464],{"class":4327},[638,6047,4467],{"class":644},[638,6049,4470],{"class":4327},[638,6051,4473],{"class":4347},[638,6053,4476],{"class":4327},[638,6055,4344],{"class":4327},[638,6057,6058],{"class":4320}," id",[638,6060,4409],{"class":4327},[638,6062,4526],{"class":4347},[638,6064,580],{"class":4327},[638,6066,5822],{"class":4347},[638,6068,580],{"class":4327},[638,6070,6071],{"class":4347},"id ",[638,6073,6074],{"class":4327},"},",[638,6076,4520],{"class":4327},[638,6078,4523],{"class":4340},[638,6080,4490],{"class":4327},[638,6082,6083],{"class":4347},"props",[638,6085,580],{"class":4327},[638,6087,5871],{"class":4347},[638,6089,4476],{"class":4327},[638,6091,4526],{"class":4347},[638,6093,580],{"class":4327},[638,6095,5884],{"class":4347},[638,6097,6098],{"class":4327},"]);\n",[638,6100,6101],{"class":640,"line":4482},[638,6102,4545],{"class":4316},[638,6104,6105],{"class":640,"line":4499},[638,6106,4386],{"emptyLinePlaceholder":4385},[638,6108,6109],{"class":640,"line":4512},[638,6110,4556],{"class":4316},[638,6112,6113,6115,6117,6119,6121,6123,6125,6128,6130,6133],{"class":640,"line":4536},[638,6114,4562],{"class":4316},[638,6116,4565],{"class":4320},[638,6118,4328],{"class":4327},[638,6120,4570],{"class":647},[638,6122,4581],{"class":4320},[638,6124,4328],{"class":4327},[638,6126,6127],{"class":647},"\"{ 'is-dragging': isDragging }\"",[638,6129,4605],{"class":4316},[638,6131,6132],{"class":4347},"{{ task.title }}",[638,6134,6135],{"class":4316},"\u003C\u002Fdiv>\n",[638,6137,6138],{"class":640,"line":4542},[638,6139,4629],{"class":4316},[481,6141,6142],{},[496,6143,713],{},[628,6145,6147],{"className":4306,"code":6146,"filename":5483,"language":4309,"meta":634,"style":634},"\u003Cscript setup lang=\"ts\">\nimport { useTemplateRef } from 'vue';\nimport { makeSortableList } from '@vue-dnd-kit\u002Fcore';\nimport TaskItem from '.\u002FTaskItem.vue';\n\nconst tasks = defineModel\u003CTask[]>({ required: true });\nconst el = useTemplateRef\u003CHTMLElement>('el');\n\nconst { items } = makeSortableList(el, { items: tasks });\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cul ref=\"el\">\n    \u003CTaskItem v-for=\"task in items\" :key=\"task.id\" :task=\"task\" \u002F>\n  \u003C\u002Ful>\n\u003C\u002Ftemplate>\n",[501,6148,6149,6163,6179,6196,6208,6212,6236,6256,6260,6293,6297,6301,6305,6318,6369,6374],{"__ignoreMap":634},[638,6150,6151,6153,6155,6157,6159,6161],{"class":640,"line":641},[638,6152,4317],{"class":4316},[638,6154,4321],{"class":4320},[638,6156,4324],{"class":4320},[638,6158,4328],{"class":4327},[638,6160,4331],{"class":647},[638,6162,4334],{"class":4316},[638,6164,6165,6167,6169,6171,6173,6175,6177],{"class":640,"line":4337},[638,6166,4341],{"class":4340},[638,6168,4344],{"class":4327},[638,6170,4348],{"class":4347},[638,6172,4351],{"class":4327},[638,6174,4354],{"class":4340},[638,6176,4357],{"class":647},[638,6178,4360],{"class":4327},[638,6180,6181,6183,6185,6188,6190,6192,6194],{"class":640,"line":4363},[638,6182,4341],{"class":4340},[638,6184,4344],{"class":4327},[638,6186,6187],{"class":4347}," makeSortableList ",[638,6189,4351],{"class":4327},[638,6191,4354],{"class":4340},[638,6193,4377],{"class":647},[638,6195,4360],{"class":4327},[638,6197,6198,6200,6202,6204,6206],{"class":640,"line":4382},[638,6199,4341],{"class":4340},[638,6201,5545],{"class":4347},[638,6203,5548],{"class":4340},[638,6205,5551],{"class":647},[638,6207,4360],{"class":4327},[638,6209,6210],{"class":640,"line":4389},[638,6211,4386],{"emptyLinePlaceholder":4385},[638,6213,6214,6216,6218,6220,6222,6224,6226,6228,6230,6232,6234],{"class":640,"line":4419},[638,6215,4392],{"class":4340},[638,6217,5564],{"class":4347},[638,6219,4328],{"class":4327},[638,6221,5569],{"class":644},[638,6223,4432],{"class":4327},[638,6225,5574],{"class":4412},[638,6227,5577],{"class":4327},[638,6229,5580],{"class":4320},[638,6231,4409],{"class":4327},[638,6233,5586],{"class":5585},[638,6235,5589],{"class":4327},[638,6237,6238,6240,6242,6244,6246,6248,6250,6252,6254],{"class":640,"line":4447},[638,6239,4392],{"class":4340},[638,6241,4424],{"class":4347},[638,6243,4328],{"class":4327},[638,6245,4429],{"class":644},[638,6247,4432],{"class":4327},[638,6249,4435],{"class":4412},[638,6251,4438],{"class":4327},[638,6253,4441],{"class":647},[638,6255,4444],{"class":4327},[638,6257,6258],{"class":640,"line":4452},[638,6259,4386],{"emptyLinePlaceholder":4385},[638,6261,6262,6264,6266,6269,6271,6273,6276,6278,6280,6282,6284,6287,6289,6291],{"class":640,"line":4482},[638,6263,4392],{"class":4340},[638,6265,4344],{"class":4327},[638,6267,6268],{"class":4347}," items ",[638,6270,4351],{"class":4327},[638,6272,4464],{"class":4327},[638,6274,6275],{"class":644}," makeSortableList",[638,6277,4470],{"class":4327},[638,6279,4473],{"class":4347},[638,6281,4476],{"class":4327},[638,6283,4344],{"class":4327},[638,6285,6286],{"class":4320}," items",[638,6288,4409],{"class":4327},[638,6290,5564],{"class":4347},[638,6292,4539],{"class":4327},[638,6294,6295],{"class":640,"line":4499},[638,6296,4545],{"class":4316},[638,6298,6299],{"class":640,"line":4512},[638,6300,4386],{"emptyLinePlaceholder":4385},[638,6302,6303],{"class":640,"line":4536},[638,6304,4556],{"class":4316},[638,6306,6307,6310,6312,6314,6316],{"class":640,"line":4542},[638,6308,6309],{"class":4316},"  \u003Cul",[638,6311,4565],{"class":4320},[638,6313,4328],{"class":4327},[638,6315,4570],{"class":647},[638,6317,4334],{"class":4316},[638,6319,6320,6323,6325,6327,6329,6332,6335,6337,6339,6341,6343,6345,6347,6349,6351,6353,6355,6357,6359,6361,6363,6365,6367],{"class":640,"line":4548},[638,6321,6322],{"class":4316},"    \u003CTaskItem",[638,6324,5812],{"class":4340},[638,6326,4328],{"class":4327},[638,6328,5817],{"class":647},[638,6330,6331],{"class":4347},"task ",[638,6333,6334],{"class":4327},"in",[638,6336,6286],{"class":4347},[638,6338,5817],{"class":647},[638,6340,5839],{"class":4327},[638,6342,5842],{"class":4320},[638,6344,4328],{"class":4327},[638,6346,5817],{"class":647},[638,6348,5822],{"class":4347},[638,6350,580],{"class":4327},[638,6352,1428],{"class":4347},[638,6354,5817],{"class":647},[638,6356,5839],{"class":4327},[638,6358,5822],{"class":4320},[638,6360,4328],{"class":4327},[638,6362,5817],{"class":647},[638,6364,5822],{"class":4347},[638,6366,5817],{"class":647},[638,6368,5895],{"class":4316},[638,6370,6371],{"class":640,"line":4553},[638,6372,6373],{"class":4316},"  \u003C\u002Ful>\n",[638,6375,6376],{"class":640,"line":4559},[638,6377,4629],{"class":4316},[628,6379,6381],{"className":4306,"code":6380,"filename":5915,"language":4309,"meta":634,"style":634},"\u003Cscript setup lang=\"ts\">\nimport { useTemplateRef } from 'vue';\nimport { makeSortableItem } from '@vue-dnd-kit\u002Fcore';\n\nconst props = defineProps\u003C{ task: Task }>();\nconst el = useTemplateRef\u003CHTMLElement>('el');\n\nconst { isPlaceholder } = makeSortableItem(el, { item: () => props.task });\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cli ref=\"el\" :class=\"{ slot: isPlaceholder }\">{{ task.title }}\u003C\u002Fli>\n\u003C\u002Ftemplate>\n",[501,6382,6383,6397,6413,6430,6434,6454,6474,6478,6518,6522,6526,6530,6555],{"__ignoreMap":634},[638,6384,6385,6387,6389,6391,6393,6395],{"class":640,"line":641},[638,6386,4317],{"class":4316},[638,6388,4321],{"class":4320},[638,6390,4324],{"class":4320},[638,6392,4328],{"class":4327},[638,6394,4331],{"class":647},[638,6396,4334],{"class":4316},[638,6398,6399,6401,6403,6405,6407,6409,6411],{"class":640,"line":4337},[638,6400,4341],{"class":4340},[638,6402,4344],{"class":4327},[638,6404,4348],{"class":4347},[638,6406,4351],{"class":4327},[638,6408,4354],{"class":4340},[638,6410,4357],{"class":647},[638,6412,4360],{"class":4327},[638,6414,6415,6417,6419,6422,6424,6426,6428],{"class":640,"line":4363},[638,6416,4341],{"class":4340},[638,6418,4344],{"class":4327},[638,6420,6421],{"class":4347}," makeSortableItem ",[638,6423,4351],{"class":4327},[638,6425,4354],{"class":4340},[638,6427,4377],{"class":647},[638,6429,4360],{"class":4327},[638,6431,6432],{"class":640,"line":4382},[638,6433,4386],{"emptyLinePlaceholder":4385},[638,6435,6436,6438,6440,6442,6444,6446,6448,6450,6452],{"class":640,"line":4389},[638,6437,4392],{"class":4340},[638,6439,4395],{"class":4347},[638,6441,4328],{"class":4327},[638,6443,4400],{"class":644},[638,6445,4403],{"class":4327},[638,6447,5982],{"class":4347},[638,6449,4409],{"class":4327},[638,6451,5723],{"class":4412},[638,6453,4416],{"class":4327},[638,6455,6456,6458,6460,6462,6464,6466,6468,6470,6472],{"class":640,"line":4419},[638,6457,4392],{"class":4340},[638,6459,4424],{"class":4347},[638,6461,4328],{"class":4327},[638,6463,4429],{"class":644},[638,6465,4432],{"class":4327},[638,6467,4435],{"class":4412},[638,6469,4438],{"class":4327},[638,6471,4441],{"class":647},[638,6473,4444],{"class":4327},[638,6475,6476],{"class":640,"line":4447},[638,6477,4386],{"emptyLinePlaceholder":4385},[638,6479,6480,6482,6484,6487,6489,6491,6494,6496,6498,6500,6502,6504,6506,6508,6510,6512,6514,6516],{"class":640,"line":4452},[638,6481,4392],{"class":4340},[638,6483,4344],{"class":4327},[638,6485,6486],{"class":4347}," isPlaceholder ",[638,6488,4351],{"class":4327},[638,6490,4464],{"class":4327},[638,6492,6493],{"class":644}," makeSortableItem",[638,6495,4470],{"class":4327},[638,6497,4473],{"class":4347},[638,6499,4476],{"class":4327},[638,6501,4344],{"class":4327},[638,6503,4845],{"class":644},[638,6505,4409],{"class":4327},[638,6507,4520],{"class":4327},[638,6509,4523],{"class":4340},[638,6511,4526],{"class":4347},[638,6513,580],{"class":4327},[638,6515,6331],{"class":4347},[638,6517,4539],{"class":4327},[638,6519,6520],{"class":640,"line":4482},[638,6521,4545],{"class":4316},[638,6523,6524],{"class":640,"line":4499},[638,6525,4386],{"emptyLinePlaceholder":4385},[638,6527,6528],{"class":640,"line":4512},[638,6529,4556],{"class":4316},[638,6531,6532,6535,6537,6539,6541,6543,6545,6548,6550,6552],{"class":640,"line":4536},[638,6533,6534],{"class":4316},"  \u003Cli",[638,6536,4565],{"class":4320},[638,6538,4328],{"class":4327},[638,6540,4570],{"class":647},[638,6542,4581],{"class":4320},[638,6544,4328],{"class":4327},[638,6546,6547],{"class":647},"\"{ slot: isPlaceholder }\"",[638,6549,4605],{"class":4316},[638,6551,6132],{"class":4347},[638,6553,6554],{"class":4316},"\u003C\u002Fli>\n",[638,6556,6557],{"class":640,"line":4542},[638,6558,4629],{"class":4316},[490,6560,6561,6577,6585],{},[493,6562,6563,6564,6566,6567,6569,6570,6573,6574,580],{},"Renderiza ",[501,6565,1126],{},", el borrador: se reordena mientras arrastras. ",[501,6568,5884],{}," recibe el nuevo orden al\nsoltar, y ",[501,6571,6572],{},"defineModel"," emite ",[501,6575,6576],{},"update:modelValue",[493,6578,6579,6580,4034,6582,6584],{},"Sin índice, sin payload, sin ",[501,6581,507],{},[501,6583,531],{},": las filas se deslizan solas.",[493,6586,6587,6588,930,6590,6593],{},"La fila arrastrada se queda en la lista como el hueco en el que aterrizará. Dale estilo con\n",[501,6589,1893],{},[501,6591,6592],{},"[data-dnd-placeholder]"," en lugar de ocultarla.",[874,6595,324],{"id":6596},"lists-that-share-items",[481,6598,6599],{},[496,6600,710],{},[628,6602,6607],{"className":6603,"code":6604,"filename":6605,"language":6606,"meta":634,"style":634},"language-ts shiki shiki-themes dnd-light dnd-light dnd-dark","\u002F\u002F Each column's makeDroppable calls this from its onDrop, with its array as the payload.\nfunction applySort(e: IDragEvent) {\n  const r = e.helpers.suggestSort('vertical');\n  if (!r) return;\n\n  const src = e.draggedItems[0]?.items;\n  const tgt = e.hoveredDraggable?.items ?? e.dropZone?.items;\n\n  if (src === todo.value) todo.value = r.sourceItems as Task[];\n  else if (src === done.value) done.value = r.sourceItems as Task[];\n\n  if (!r.sameList) {\n    if (tgt === todo.value) todo.value = r.targetItems as Task[];\n    else if (tgt === done.value) done.value = r.targetItems as Task[];\n  }\n}\n","Board.vue","ts",[501,6608,6609,6614,6634,6659,6676,6680,6707,6745,6749,6791,6834,6838,6855,6895,6936,6941],{"__ignoreMap":634},[638,6610,6611],{"class":640,"line":641},[638,6612,6613],{"class":5060},"\u002F\u002F Each column's makeDroppable calls this from its onDrop, with its array as the payload.\n",[638,6615,6616,6619,6622,6624,6626,6628,6630,6632],{"class":640,"line":4337},[638,6617,6618],{"class":4340},"function",[638,6620,6621],{"class":644}," applySort",[638,6623,4470],{"class":4327},[638,6625,4805],{"class":4320},[638,6627,4409],{"class":4327},[638,6629,5655],{"class":4412},[638,6631,1167],{"class":4327},[638,6633,4479],{"class":4327},[638,6635,6636,6639,6641,6643,6645,6647,6649,6651,6653,6655,6657],{"class":640,"line":4363},[638,6637,6638],{"class":4340},"  const",[638,6640,5667],{"class":4347},[638,6642,4328],{"class":4327},[638,6644,4822],{"class":644},[638,6646,580],{"class":4327},[638,6648,5676],{"class":644},[638,6650,580],{"class":4327},[638,6652,5681],{"class":644},[638,6654,4470],{"class":4327},[638,6656,5686],{"class":647},[638,6658,4444],{"class":4327},[638,6660,6661,6664,6667,6669,6671,6674],{"class":640,"line":4382},[638,6662,6663],{"class":4340},"  if",[638,6665,6666],{"class":4327}," (!",[638,6668,5698],{"class":4347},[638,6670,1167],{"class":4327},[638,6672,6673],{"class":4340}," return",[638,6675,4360],{"class":4327},[638,6677,6678],{"class":640,"line":4389},[638,6679,4386],{"emptyLinePlaceholder":4385},[638,6681,6682,6684,6687,6689,6691,6693,6695,6698,6700,6703,6705],{"class":640,"line":4419},[638,6683,6638],{"class":4340},[638,6685,6686],{"class":4347}," src ",[638,6688,4328],{"class":4327},[638,6690,4822],{"class":4347},[638,6692,580],{"class":4327},[638,6694,4827],{"class":4347},[638,6696,6697],{"class":4327},"[",[638,6699,1523],{"class":5585},[638,6701,6702],{"class":4327},"]?.",[638,6704,1126],{"class":4347},[638,6706,4360],{"class":4327},[638,6708,6709,6711,6714,6716,6718,6720,6723,6726,6729,6732,6734,6736,6739,6741,6743],{"class":640,"line":4447},[638,6710,6638],{"class":4340},[638,6712,6713],{"class":4347}," tgt ",[638,6715,4328],{"class":4327},[638,6717,4822],{"class":4347},[638,6719,580],{"class":4327},[638,6721,6722],{"class":4347},"hoveredDraggable",[638,6724,6725],{"class":4327},"?.",[638,6727,6728],{"class":4347},"items ",[638,6730,6731],{"class":4327},"??",[638,6733,4822],{"class":4347},[638,6735,580],{"class":4327},[638,6737,6738],{"class":4347},"dropZone",[638,6740,6725],{"class":4327},[638,6742,1126],{"class":4347},[638,6744,4360],{"class":4327},[638,6746,6747],{"class":640,"line":4452},[638,6748,4386],{"emptyLinePlaceholder":4385},[638,6750,6751,6753,6755,6758,6761,6764,6766,6768,6770,6772,6774,6776,6778,6780,6782,6785,6787,6789],{"class":640,"line":4482},[638,6752,6663],{"class":4340},[638,6754,3036],{"class":4327},[638,6756,6757],{"class":4347},"src ",[638,6759,6760],{"class":4327},"===",[638,6762,6763],{"class":4347}," todo",[638,6765,580],{"class":4327},[638,6767,5754],{"class":4347},[638,6769,1167],{"class":4327},[638,6771,6763],{"class":4347},[638,6773,580],{"class":4327},[638,6775,5708],{"class":4347},[638,6777,4328],{"class":4327},[638,6779,5713],{"class":4347},[638,6781,580],{"class":4327},[638,6783,6784],{"class":4347},"sourceItems ",[638,6786,4853],{"class":4340},[638,6788,5723],{"class":4412},[638,6790,5726],{"class":4327},[638,6792,6793,6796,6799,6801,6803,6805,6808,6810,6812,6814,6816,6818,6820,6822,6824,6826,6828,6830,6832],{"class":640,"line":4499},[638,6794,6795],{"class":4340},"  else",[638,6797,6798],{"class":4340}," if",[638,6800,3036],{"class":4327},[638,6802,6757],{"class":4347},[638,6804,6760],{"class":4327},[638,6806,6807],{"class":4347}," done",[638,6809,580],{"class":4327},[638,6811,5754],{"class":4347},[638,6813,1167],{"class":4327},[638,6815,6807],{"class":4347},[638,6817,580],{"class":4327},[638,6819,5708],{"class":4347},[638,6821,4328],{"class":4327},[638,6823,5713],{"class":4347},[638,6825,580],{"class":4327},[638,6827,6784],{"class":4347},[638,6829,4853],{"class":4340},[638,6831,5723],{"class":4412},[638,6833,5726],{"class":4327},[638,6835,6836],{"class":640,"line":4512},[638,6837,4386],{"emptyLinePlaceholder":4385},[638,6839,6840,6842,6844,6846,6848,6851,6853],{"class":640,"line":4536},[638,6841,6663],{"class":4340},[638,6843,6666],{"class":4327},[638,6845,5698],{"class":4347},[638,6847,580],{"class":4327},[638,6849,6850],{"class":4347},"sameList",[638,6852,1167],{"class":4327},[638,6854,4479],{"class":4327},[638,6856,6857,6860,6862,6865,6867,6869,6871,6873,6875,6877,6879,6881,6883,6885,6887,6889,6891,6893],{"class":640,"line":4542},[638,6858,6859],{"class":4340},"    if",[638,6861,3036],{"class":4327},[638,6863,6864],{"class":4347},"tgt ",[638,6866,6760],{"class":4327},[638,6868,6763],{"class":4347},[638,6870,580],{"class":4327},[638,6872,5754],{"class":4347},[638,6874,1167],{"class":4327},[638,6876,6763],{"class":4347},[638,6878,580],{"class":4327},[638,6880,5708],{"class":4347},[638,6882,4328],{"class":4327},[638,6884,5713],{"class":4347},[638,6886,580],{"class":4327},[638,6888,5718],{"class":4347},[638,6890,4853],{"class":4340},[638,6892,5723],{"class":4412},[638,6894,5726],{"class":4327},[638,6896,6897,6900,6902,6904,6906,6908,6910,6912,6914,6916,6918,6920,6922,6924,6926,6928,6930,6932,6934],{"class":640,"line":4548},[638,6898,6899],{"class":4340},"    else",[638,6901,6798],{"class":4340},[638,6903,3036],{"class":4327},[638,6905,6864],{"class":4347},[638,6907,6760],{"class":4327},[638,6909,6807],{"class":4347},[638,6911,580],{"class":4327},[638,6913,5754],{"class":4347},[638,6915,1167],{"class":4327},[638,6917,6807],{"class":4347},[638,6919,580],{"class":4327},[638,6921,5708],{"class":4347},[638,6923,4328],{"class":4327},[638,6925,5713],{"class":4347},[638,6927,580],{"class":4327},[638,6929,5718],{"class":4347},[638,6931,4853],{"class":4340},[638,6933,5723],{"class":4412},[638,6935,5726],{"class":4327},[638,6937,6938],{"class":640,"line":4553},[638,6939,6940],{"class":4327},"  }\n",[638,6942,6943],{"class":640,"line":4559},[638,6944,6945],{"class":4327},"}\n",[481,6947,6948],{},[496,6949,713],{},[628,6951,6954],{"className":4306,"code":6952,"filename":6953,"language":4309,"meta":634,"style":634},"\u003Cscript setup lang=\"ts\">\nimport { toRef, useTemplateRef } from 'vue';\nimport { makeSortableList } from '@vue-dnd-kit\u002Fcore';\nimport TaskItem from '.\u002FTaskItem.vue';\n\nconst props = defineProps\u003C{ column: { id: string; tasks: Task[] } }>();\nconst el = useTemplateRef\u003CHTMLElement>('el');\n\nconst { items } = makeSortableList(el, {\n  id: props.column.id,                   \u002F\u002F `from.list` and `to.list` in drop events\n  items: toRef(props.column, 'tasks'),   \u002F\u002F writable: the parent passes a reactive column\n  group: 'board',                        \u002F\u002F same name: tasks move between these lists\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cul ref=\"el\">\n    \u003CTaskItem v-for=\"task in items\" :key=\"task.id\" :task=\"task\" \u002F>\n  \u003C\u002Ful>\n\u003C\u002Ftemplate>\n","Column.vue",[501,6955,6956,6970,6991,7007,7019,7023,7064,7084,7088,7110,7132,7160,7175,7179,7183,7187,7191,7203,7251,7255],{"__ignoreMap":634},[638,6957,6958,6960,6962,6964,6966,6968],{"class":640,"line":641},[638,6959,4317],{"class":4316},[638,6961,4321],{"class":4320},[638,6963,4324],{"class":4320},[638,6965,4328],{"class":4327},[638,6967,4331],{"class":647},[638,6969,4334],{"class":4316},[638,6971,6972,6974,6976,6979,6981,6983,6985,6987,6989],{"class":640,"line":4337},[638,6973,4341],{"class":4340},[638,6975,4344],{"class":4327},[638,6977,6978],{"class":4347}," toRef",[638,6980,4476],{"class":4327},[638,6982,4348],{"class":4347},[638,6984,4351],{"class":4327},[638,6986,4354],{"class":4340},[638,6988,4357],{"class":647},[638,6990,4360],{"class":4327},[638,6992,6993,6995,6997,6999,7001,7003,7005],{"class":640,"line":4363},[638,6994,4341],{"class":4340},[638,6996,4344],{"class":4327},[638,6998,6187],{"class":4347},[638,7000,4351],{"class":4327},[638,7002,4354],{"class":4340},[638,7004,4377],{"class":647},[638,7006,4360],{"class":4327},[638,7008,7009,7011,7013,7015,7017],{"class":640,"line":4382},[638,7010,4341],{"class":4340},[638,7012,5545],{"class":4347},[638,7014,5548],{"class":4340},[638,7016,5551],{"class":647},[638,7018,4360],{"class":4327},[638,7020,7021],{"class":640,"line":4389},[638,7022,4386],{"emptyLinePlaceholder":4385},[638,7024,7025,7027,7029,7031,7033,7035,7038,7040,7042,7044,7046,7049,7051,7053,7055,7057,7059,7062],{"class":640,"line":4419},[638,7026,4392],{"class":4340},[638,7028,4395],{"class":4347},[638,7030,4328],{"class":4327},[638,7032,4400],{"class":644},[638,7034,4403],{"class":4327},[638,7036,7037],{"class":4347}," column",[638,7039,4409],{"class":4327},[638,7041,4344],{"class":4327},[638,7043,6058],{"class":4347},[638,7045,4409],{"class":4327},[638,7047,7048],{"class":4412}," string",[638,7050,5989],{"class":4327},[638,7052,5703],{"class":4347},[638,7054,4409],{"class":4327},[638,7056,5723],{"class":4412},[638,7058,6007],{"class":4327},[638,7060,7061],{"class":4327}," }",[638,7063,4416],{"class":4327},[638,7065,7066,7068,7070,7072,7074,7076,7078,7080,7082],{"class":640,"line":4447},[638,7067,4392],{"class":4340},[638,7069,4424],{"class":4347},[638,7071,4328],{"class":4327},[638,7073,4429],{"class":644},[638,7075,4432],{"class":4327},[638,7077,4435],{"class":4412},[638,7079,4438],{"class":4327},[638,7081,4441],{"class":647},[638,7083,4444],{"class":4327},[638,7085,7086],{"class":640,"line":4452},[638,7087,4386],{"emptyLinePlaceholder":4385},[638,7089,7090,7092,7094,7096,7098,7100,7102,7104,7106,7108],{"class":640,"line":4482},[638,7091,4392],{"class":4340},[638,7093,4344],{"class":4327},[638,7095,6268],{"class":4347},[638,7097,4351],{"class":4327},[638,7099,4464],{"class":4327},[638,7101,6275],{"class":644},[638,7103,4470],{"class":4327},[638,7105,4473],{"class":4347},[638,7107,4476],{"class":4327},[638,7109,4479],{"class":4327},[638,7111,7112,7114,7116,7118,7120,7123,7125,7127,7129],{"class":640,"line":4499},[638,7113,5039],{"class":4320},[638,7115,4409],{"class":4327},[638,7117,4526],{"class":4347},[638,7119,580],{"class":4327},[638,7121,7122],{"class":4347},"column",[638,7124,580],{"class":4327},[638,7126,1428],{"class":4347},[638,7128,4476],{"class":4327},[638,7130,7131],{"class":5060},"                   \u002F\u002F `from.list` and `to.list` in drop events\n",[638,7133,7134,7137,7139,7141,7143,7145,7147,7149,7151,7154,7157],{"class":640,"line":4512},[638,7135,7136],{"class":4320},"  items",[638,7138,4409],{"class":4327},[638,7140,6978],{"class":644},[638,7142,4470],{"class":4327},[638,7144,6083],{"class":4347},[638,7146,580],{"class":4327},[638,7148,7122],{"class":4347},[638,7150,4476],{"class":4327},[638,7152,7153],{"class":647}," 'tasks'",[638,7155,7156],{"class":4327},"),",[638,7158,7159],{"class":5060},"   \u002F\u002F writable: the parent passes a reactive column\n",[638,7161,7162,7165,7167,7170,7172],{"class":640,"line":4536},[638,7163,7164],{"class":4320},"  group",[638,7166,4409],{"class":4327},[638,7168,7169],{"class":647}," 'board'",[638,7171,4476],{"class":4327},[638,7173,7174],{"class":5060},"                        \u002F\u002F same name: tasks move between these lists\n",[638,7176,7177],{"class":640,"line":4542},[638,7178,4539],{"class":4327},[638,7180,7181],{"class":640,"line":4548},[638,7182,4545],{"class":4316},[638,7184,7185],{"class":640,"line":4553},[638,7186,4386],{"emptyLinePlaceholder":4385},[638,7188,7189],{"class":640,"line":4559},[638,7190,4556],{"class":4316},[638,7192,7193,7195,7197,7199,7201],{"class":640,"line":4591},[638,7194,6309],{"class":4316},[638,7196,4565],{"class":4320},[638,7198,4328],{"class":4327},[638,7200,4570],{"class":647},[638,7202,4334],{"class":4316},[638,7204,7205,7207,7209,7211,7213,7215,7217,7219,7221,7223,7225,7227,7229,7231,7233,7235,7237,7239,7241,7243,7245,7247,7249],{"class":640,"line":4614},[638,7206,6322],{"class":4316},[638,7208,5812],{"class":4340},[638,7210,4328],{"class":4327},[638,7212,5817],{"class":647},[638,7214,6331],{"class":4347},[638,7216,6334],{"class":4327},[638,7218,6286],{"class":4347},[638,7220,5817],{"class":647},[638,7222,5839],{"class":4327},[638,7224,5842],{"class":4320},[638,7226,4328],{"class":4327},[638,7228,5817],{"class":647},[638,7230,5822],{"class":4347},[638,7232,580],{"class":4327},[638,7234,1428],{"class":4347},[638,7236,5817],{"class":647},[638,7238,5839],{"class":4327},[638,7240,5822],{"class":4320},[638,7242,4328],{"class":4327},[638,7244,5817],{"class":647},[638,7246,5822],{"class":4347},[638,7248,5817],{"class":647},[638,7250,5895],{"class":4316},[638,7252,7253],{"class":640,"line":4620},[638,7254,6373],{"class":4316},[638,7256,7257],{"class":640,"line":4626},[638,7258,4629],{"class":4316},[628,7260,7262],{"className":4306,"code":7261,"filename":6605,"language":4309,"meta":634,"style":634},"\u003Cscript setup lang=\"ts\">\nimport { reactive } from 'vue';\nimport Column from '.\u002FColumn.vue';\n\nconst columns = reactive([\n  { id: 'todo', tasks: [{ id: 't1', title: 'Write the docs' }] },\n  { id: 'done', tasks: [] },\n]);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CColumn v-for=\"column in columns\" :key=\"column.id\" :column=\"column\" \u002F>\n\u003C\u002Ftemplate>\n",[501,7263,7264,7278,7295,7309,7313,7328,7372,7394,7398,7402,7406,7410,7461],{"__ignoreMap":634},[638,7265,7266,7268,7270,7272,7274,7276],{"class":640,"line":641},[638,7267,4317],{"class":4316},[638,7269,4321],{"class":4320},[638,7271,4324],{"class":4320},[638,7273,4328],{"class":4327},[638,7275,4331],{"class":647},[638,7277,4334],{"class":4316},[638,7279,7280,7282,7284,7287,7289,7291,7293],{"class":640,"line":4337},[638,7281,4341],{"class":4340},[638,7283,4344],{"class":4327},[638,7285,7286],{"class":4347}," reactive ",[638,7288,4351],{"class":4327},[638,7290,4354],{"class":4340},[638,7292,4357],{"class":647},[638,7294,4360],{"class":4327},[638,7296,7297,7299,7302,7304,7307],{"class":640,"line":4363},[638,7298,4341],{"class":4340},[638,7300,7301],{"class":4347}," Column ",[638,7303,5548],{"class":4340},[638,7305,7306],{"class":647}," '.\u002FColumn.vue'",[638,7308,4360],{"class":4327},[638,7310,7311],{"class":640,"line":4382},[638,7312,4386],{"emptyLinePlaceholder":4385},[638,7314,7315,7317,7320,7322,7325],{"class":640,"line":4389},[638,7316,4392],{"class":4340},[638,7318,7319],{"class":4347}," columns ",[638,7321,4328],{"class":4327},[638,7323,7324],{"class":644}," reactive",[638,7326,7327],{"class":4327},"([\n",[638,7329,7330,7333,7335,7337,7340,7342,7344,7346,7349,7351,7353,7356,7358,7361,7363,7366,7369],{"class":640,"line":4419},[638,7331,7332],{"class":4327},"  {",[638,7334,6058],{"class":4320},[638,7336,4409],{"class":4327},[638,7338,7339],{"class":647}," 'todo'",[638,7341,4476],{"class":4327},[638,7343,5703],{"class":4320},[638,7345,4409],{"class":4327},[638,7347,7348],{"class":4327}," [{",[638,7350,6058],{"class":4320},[638,7352,4409],{"class":4327},[638,7354,7355],{"class":647}," 't1'",[638,7357,4476],{"class":4327},[638,7359,7360],{"class":4320}," title",[638,7362,4409],{"class":4327},[638,7364,7365],{"class":647}," 'Write the docs'",[638,7367,7368],{"class":4327}," }]",[638,7370,7371],{"class":4327}," },\n",[638,7373,7374,7376,7378,7380,7383,7385,7387,7389,7392],{"class":640,"line":4447},[638,7375,7332],{"class":4327},[638,7377,6058],{"class":4320},[638,7379,4409],{"class":4327},[638,7381,7382],{"class":647}," 'done'",[638,7384,4476],{"class":4327},[638,7386,5703],{"class":4320},[638,7388,4409],{"class":4327},[638,7390,7391],{"class":4327}," []",[638,7393,7371],{"class":4327},[638,7395,7396],{"class":640,"line":4452},[638,7397,6098],{"class":4327},[638,7399,7400],{"class":640,"line":4482},[638,7401,4545],{"class":4316},[638,7403,7404],{"class":640,"line":4499},[638,7405,4386],{"emptyLinePlaceholder":4385},[638,7407,7408],{"class":640,"line":4512},[638,7409,4556],{"class":4316},[638,7411,7412,7415,7417,7419,7421,7424,7426,7429,7431,7433,7435,7437,7439,7441,7443,7445,7447,7449,7451,7453,7455,7457,7459],{"class":640,"line":4536},[638,7413,7414],{"class":4316},"  \u003CColumn",[638,7416,5812],{"class":4340},[638,7418,4328],{"class":4327},[638,7420,5817],{"class":647},[638,7422,7423],{"class":4347},"column ",[638,7425,6334],{"class":4327},[638,7427,7428],{"class":4347}," columns",[638,7430,5817],{"class":647},[638,7432,5839],{"class":4327},[638,7434,5842],{"class":4320},[638,7436,4328],{"class":4327},[638,7438,5817],{"class":647},[638,7440,7122],{"class":4347},[638,7442,580],{"class":4327},[638,7444,1428],{"class":4347},[638,7446,5817],{"class":647},[638,7448,5839],{"class":4327},[638,7450,7122],{"class":4320},[638,7452,4328],{"class":4327},[638,7454,5817],{"class":647},[638,7456,7122],{"class":4347},[638,7458,5817],{"class":647},[638,7460,5895],{"class":4316},[638,7462,7463],{"class":640,"line":4542},[638,7464,4629],{"class":4316},[481,7466,7467,7468,7470,7471,2562,7473,7475],{},"El drop escribe los dos arrays, el que la tarea dejó y aquel en el que entró. ",[501,7469,5915],{}," es el de\nla lista ordenable de arriba. Una paleta que reparte copias era ",[501,7472,2561],{},[501,7474,2565],{},";\nahora es una lista:",[628,7477,7480],{"className":6603,"code":7478,"filename":7479,"language":6606,"meta":634,"style":634},"makeSortableList(el, {\n  items: blocks,\n  group: { name: 'board', pull: 'clone', put: false },  \u002F\u002F copies go out, nothing comes in\n  sort: false,                                          \u002F\u002F its own order stays\n  clone: (block) => ({ ...block, id: crypto.randomUUID() }),\n});\n","Palette.vue",[501,7481,7482,7494,7505,7545,7559,7603],{"__ignoreMap":634},[638,7483,7484,7486,7488,7490,7492],{"class":640,"line":641},[638,7485,143],{"class":644},[638,7487,4470],{"class":4327},[638,7489,4473],{"class":4347},[638,7491,4476],{"class":4327},[638,7493,4479],{"class":4327},[638,7495,7496,7498,7500,7503],{"class":640,"line":4337},[638,7497,7136],{"class":4320},[638,7499,4409],{"class":4327},[638,7501,7502],{"class":4347}," blocks",[638,7504,1265],{"class":4327},[638,7506,7507,7509,7511,7513,7515,7517,7519,7521,7524,7526,7529,7531,7534,7536,7539,7542],{"class":640,"line":4363},[638,7508,7164],{"class":4320},[638,7510,4409],{"class":4327},[638,7512,4344],{"class":4327},[638,7514,5796],{"class":4320},[638,7516,4409],{"class":4327},[638,7518,7169],{"class":647},[638,7520,4476],{"class":4327},[638,7522,7523],{"class":4320}," pull",[638,7525,4409],{"class":4327},[638,7527,7528],{"class":647}," 'clone'",[638,7530,4476],{"class":4327},[638,7532,7533],{"class":4320}," put",[638,7535,4409],{"class":4327},[638,7537,7538],{"class":5585}," false",[638,7540,7541],{"class":4327}," },",[638,7543,7544],{"class":5060},"  \u002F\u002F copies go out, nothing comes in\n",[638,7546,7547,7550,7552,7554,7556],{"class":640,"line":4382},[638,7548,7549],{"class":4320},"  sort",[638,7551,4409],{"class":4327},[638,7553,7538],{"class":5585},[638,7555,4476],{"class":4327},[638,7557,7558],{"class":5060},"                                          \u002F\u002F its own order stays\n",[638,7560,7561,7564,7566,7568,7571,7573,7575,7578,7581,7583,7585,7587,7589,7592,7594,7597,7600],{"class":640,"line":4389},[638,7562,7563],{"class":644},"  clone",[638,7565,4409],{"class":4327},[638,7567,3036],{"class":4327},[638,7569,7570],{"class":4320},"block",[638,7572,1167],{"class":4327},[638,7574,4523],{"class":4340},[638,7576,7577],{"class":4327}," ({",[638,7579,7580],{"class":4327}," ...",[638,7582,7570],{"class":4347},[638,7584,4476],{"class":4327},[638,7586,6058],{"class":4320},[638,7588,4409],{"class":4327},[638,7590,7591],{"class":644}," crypto",[638,7593,580],{"class":4327},[638,7595,7596],{"class":644},"randomUUID",[638,7598,7599],{"class":4327},"()",[638,7601,7602],{"class":4327}," }),\n",[638,7604,7605],{"class":640,"line":4419},[638,7606,4539],{"class":4327},[481,7608,7609,7610,7612,7613,2604,7615,7617,7618,7620,7621,580],{},"Para un store de Pinia u otro estado que no escribes directamente, pasa ",[501,7611,1126],{}," como getter, llama a\n",[501,7614,2603],{},[501,7616,507],{}," y aplica ",[501,7619,2278],{},": consulta\n",[808,7622,2613],{"href":2612},[874,7624,7626],{"id":7625},"a-custom-overlay","Un overlay personalizado",[481,7628,7629],{},[496,7630,710],{},[628,7632,7634],{"className":6603,"code":7633,"filename":5915,"language":6606,"meta":634,"style":634},"makeDraggable(el, {\n  render: markRaw(TaskOverlay),\n  data: () => props.task,\n});\n",[501,7635,7636,7648,7666,7684],{"__ignoreMap":634},[638,7637,7638,7640,7642,7644,7646],{"class":640,"line":641},[638,7639,134],{"class":644},[638,7641,4470],{"class":4327},[638,7643,4473],{"class":4347},[638,7645,4476],{"class":4327},[638,7647,4479],{"class":4327},[638,7649,7650,7653,7655,7658,7660,7663],{"class":640,"line":4337},[638,7651,7652],{"class":4320},"  render",[638,7654,4409],{"class":4327},[638,7656,7657],{"class":644}," markRaw",[638,7659,4470],{"class":4327},[638,7661,7662],{"class":4347},"TaskOverlay",[638,7664,7665],{"class":4327},"),\n",[638,7667,7668,7670,7672,7674,7676,7678,7680,7682],{"class":640,"line":4363},[638,7669,4515],{"class":644},[638,7671,4409],{"class":4327},[638,7673,4520],{"class":4327},[638,7675,4523],{"class":4340},[638,7677,4526],{"class":4347},[638,7679,580],{"class":4327},[638,7681,5822],{"class":4347},[638,7683,1265],{"class":4327},[638,7685,7686],{"class":640,"line":4382},[638,7687,4539],{"class":4327},[628,7689,7692],{"className":4306,"code":7690,"filename":7691,"language":4309,"meta":634,"style":634},"\u003Cscript setup lang=\"ts\">\nimport { computed } from 'vue';\nimport { useDnDProvider } from '@vue-dnd-kit\u002Fcore';\n\nconst { entities } = useDnDProvider();\nconst task = computed(() => {\n  const [node] = entities.draggingMap.keys();\n  return node ? (entities.draggableMap.get(node)?.data?.() as Task) : null;\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"task-preview\">{{ task?.title }}\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","TaskOverlay.vue",[501,7693,7694,7708,7725,7742,7746,7765,7784,7813,7865,7869,7873,7877,7881,7899],{"__ignoreMap":634},[638,7695,7696,7698,7700,7702,7704,7706],{"class":640,"line":641},[638,7697,4317],{"class":4316},[638,7699,4321],{"class":4320},[638,7701,4324],{"class":4320},[638,7703,4328],{"class":4327},[638,7705,4331],{"class":647},[638,7707,4334],{"class":4316},[638,7709,7710,7712,7714,7717,7719,7721,7723],{"class":640,"line":4337},[638,7711,4341],{"class":4340},[638,7713,4344],{"class":4327},[638,7715,7716],{"class":4347}," computed ",[638,7718,4351],{"class":4327},[638,7720,4354],{"class":4340},[638,7722,4357],{"class":647},[638,7724,4360],{"class":4327},[638,7726,7727,7729,7731,7734,7736,7738,7740],{"class":640,"line":4363},[638,7728,4341],{"class":4340},[638,7730,4344],{"class":4327},[638,7732,7733],{"class":4347}," useDnDProvider ",[638,7735,4351],{"class":4327},[638,7737,4354],{"class":4340},[638,7739,4377],{"class":647},[638,7741,4360],{"class":4327},[638,7743,7744],{"class":640,"line":4382},[638,7745,4386],{"emptyLinePlaceholder":4385},[638,7747,7748,7750,7752,7755,7757,7759,7762],{"class":640,"line":4389},[638,7749,4392],{"class":4340},[638,7751,4344],{"class":4327},[638,7753,7754],{"class":4347}," entities ",[638,7756,4351],{"class":4327},[638,7758,4464],{"class":4327},[638,7760,7761],{"class":644}," useDnDProvider",[638,7763,7764],{"class":4327},"();\n",[638,7766,7767,7769,7772,7774,7777,7780,7782],{"class":640,"line":4419},[638,7768,4392],{"class":4340},[638,7770,7771],{"class":4347}," task ",[638,7773,4328],{"class":4327},[638,7775,7776],{"class":644}," computed",[638,7778,7779],{"class":4327},"(()",[638,7781,4523],{"class":4340},[638,7783,4479],{"class":4327},[638,7785,7786,7788,7790,7793,7796,7798,7801,7803,7806,7808,7811],{"class":640,"line":4447},[638,7787,6638],{"class":4340},[638,7789,4490],{"class":4327},[638,7791,7792],{"class":4347},"node",[638,7794,7795],{"class":4327},"]",[638,7797,4464],{"class":4327},[638,7799,7800],{"class":644}," entities",[638,7802,580],{"class":4327},[638,7804,7805],{"class":644},"draggingMap",[638,7807,580],{"class":4327},[638,7809,7810],{"class":644},"keys",[638,7812,7764],{"class":4327},[638,7814,7815,7818,7821,7824,7826,7829,7831,7834,7836,7839,7841,7843,7846,7848,7851,7854,7856,7858,7860,7863],{"class":640,"line":4452},[638,7816,7817],{"class":4340},"  return",[638,7819,7820],{"class":4347}," node ",[638,7822,7823],{"class":4327},"?",[638,7825,3036],{"class":4327},[638,7827,7828],{"class":644},"entities",[638,7830,580],{"class":4327},[638,7832,7833],{"class":644},"draggableMap",[638,7835,580],{"class":4327},[638,7837,7838],{"class":644},"get",[638,7840,4470],{"class":4327},[638,7842,7792],{"class":4347},[638,7844,7845],{"class":4327},")?.",[638,7847,1436],{"class":644},[638,7849,7850],{"class":4327},"?.()",[638,7852,7853],{"class":4340}," as",[638,7855,5723],{"class":4412},[638,7857,1167],{"class":4327},[638,7859,5839],{"class":4327},[638,7861,7862],{"class":5585}," null",[638,7864,4360],{"class":4327},[638,7866,7867],{"class":640,"line":4482},[638,7868,4539],{"class":4327},[638,7870,7871],{"class":640,"line":4499},[638,7872,4545],{"class":4316},[638,7874,7875],{"class":640,"line":4512},[638,7876,4386],{"emptyLinePlaceholder":4385},[638,7878,7879],{"class":640,"line":4536},[638,7880,4556],{"class":4316},[638,7882,7883,7885,7887,7889,7892,7894,7897],{"class":640,"line":4542},[638,7884,4562],{"class":4316},[638,7886,4597],{"class":4320},[638,7888,4328],{"class":4327},[638,7890,7891],{"class":647},"\"task-preview\"",[638,7893,4605],{"class":4316},[638,7895,7896],{"class":4347},"{{ task?.title }}",[638,7898,6135],{"class":4316},[638,7900,7901],{"class":640,"line":4548},[638,7902,4629],{"class":4316},[481,7904,7905],{},[496,7906,713],{},[628,7908,7910],{"className":6603,"code":7909,"filename":5915,"language":6606,"meta":634,"style":634},"makeDraggable(el, {\n  id: () => props.task.id,\n  overlay: TaskOverlay,\n  data: () => props.task,\n});\n",[501,7911,7912,7924,7946,7958,7976],{"__ignoreMap":634},[638,7913,7914,7916,7918,7920,7922],{"class":640,"line":641},[638,7915,134],{"class":644},[638,7917,4470],{"class":4327},[638,7919,4473],{"class":4347},[638,7921,4476],{"class":4327},[638,7923,4479],{"class":4327},[638,7925,7926,7928,7930,7932,7934,7936,7938,7940,7942,7944],{"class":640,"line":4337},[638,7927,5039],{"class":644},[638,7929,4409],{"class":4327},[638,7931,4520],{"class":4327},[638,7933,4523],{"class":4340},[638,7935,4526],{"class":4347},[638,7937,580],{"class":4327},[638,7939,5822],{"class":4347},[638,7941,580],{"class":4327},[638,7943,1428],{"class":4347},[638,7945,1265],{"class":4327},[638,7947,7948,7951,7953,7956],{"class":640,"line":4363},[638,7949,7950],{"class":4320},"  overlay",[638,7952,4409],{"class":4327},[638,7954,7955],{"class":4347}," TaskOverlay",[638,7957,1265],{"class":4327},[638,7959,7960,7962,7964,7966,7968,7970,7972,7974],{"class":640,"line":4382},[638,7961,4515],{"class":644},[638,7963,4409],{"class":4327},[638,7965,4520],{"class":4327},[638,7967,4523],{"class":4340},[638,7969,4526],{"class":4347},[638,7971,580],{"class":4327},[638,7973,5822],{"class":4347},[638,7975,1265],{"class":4327},[638,7977,7978],{"class":640,"line":4389},[638,7979,4539],{"class":4327},[628,7981,7983],{"className":4306,"code":7982,"filename":7691,"language":4309,"meta":634,"style":634},"\u003Cscript setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type { DragItem, Over } from '@vue-dnd-kit\u002Fcore';\n\nconst props = defineProps\u003C{ items: DragItem[]; over: Over | null; accepted: boolean }>();\nconst task = computed(() => props.items[0]!.data as Task);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003C!-- Fills the overlay box, which takes the size of the slot. -->\n  \u003Cdiv class=\"task-preview\" :class=\"{ refused: over && !accepted }\">\n    {{ task.title }}\n    \u003Cspan v-if=\"items.length > 1\" class=\"count\">{{ items.length }}\u003C\u002Fspan>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.task-preview { width: 100%; height: 100%; }\n\u003C\u002Fstyle>\n",[501,7984,7985,7999,8015,8039,8043,8089,8124,8128,8132,8136,8141,8160,8165,8191,8195,8199,8203,8213,8249],{"__ignoreMap":634},[638,7986,7987,7989,7991,7993,7995,7997],{"class":640,"line":641},[638,7988,4317],{"class":4316},[638,7990,4321],{"class":4320},[638,7992,4324],{"class":4320},[638,7994,4328],{"class":4327},[638,7996,4331],{"class":647},[638,7998,4334],{"class":4316},[638,8000,8001,8003,8005,8007,8009,8011,8013],{"class":640,"line":4337},[638,8002,4341],{"class":4340},[638,8004,4344],{"class":4327},[638,8006,7716],{"class":4347},[638,8008,4351],{"class":4327},[638,8010,4354],{"class":4340},[638,8012,4357],{"class":647},[638,8014,4360],{"class":4327},[638,8016,8017,8019,8021,8023,8026,8028,8031,8033,8035,8037],{"class":640,"line":4363},[638,8018,4341],{"class":4340},[638,8020,5147],{"class":4340},[638,8022,4344],{"class":4327},[638,8024,8025],{"class":4347}," DragItem",[638,8027,4476],{"class":4327},[638,8029,8030],{"class":4347}," Over ",[638,8032,4351],{"class":4327},[638,8034,4354],{"class":4340},[638,8036,4377],{"class":647},[638,8038,4360],{"class":4327},[638,8040,8041],{"class":640,"line":4382},[638,8042,4386],{"emptyLinePlaceholder":4385},[638,8044,8045,8047,8049,8051,8053,8055,8057,8059,8061,8064,8067,8069,8072,8075,8077,8079,8082,8084,8087],{"class":640,"line":4389},[638,8046,4392],{"class":4340},[638,8048,4395],{"class":4347},[638,8050,4328],{"class":4327},[638,8052,4400],{"class":644},[638,8054,4403],{"class":4327},[638,8056,6286],{"class":4347},[638,8058,4409],{"class":4327},[638,8060,8025],{"class":4412},[638,8062,8063],{"class":4327},"[];",[638,8065,8066],{"class":4347}," over",[638,8068,4409],{"class":4327},[638,8070,8071],{"class":4412}," Over",[638,8073,8074],{"class":4327}," |",[638,8076,7862],{"class":4412},[638,8078,5989],{"class":4327},[638,8080,8081],{"class":4347}," accepted",[638,8083,4409],{"class":4327},[638,8085,8086],{"class":4412}," boolean",[638,8088,4416],{"class":4327},[638,8090,8091,8093,8095,8097,8099,8101,8103,8105,8107,8109,8111,8113,8116,8118,8120,8122],{"class":640,"line":4419},[638,8092,4392],{"class":4340},[638,8094,7771],{"class":4347},[638,8096,4328],{"class":4327},[638,8098,7776],{"class":644},[638,8100,7779],{"class":4327},[638,8102,4523],{"class":4340},[638,8104,4526],{"class":4347},[638,8106,580],{"class":4327},[638,8108,1126],{"class":4347},[638,8110,6697],{"class":4327},[638,8112,1523],{"class":5585},[638,8114,8115],{"class":4327},"]!.",[638,8117,4850],{"class":4347},[638,8119,4853],{"class":4340},[638,8121,5723],{"class":4412},[638,8123,4444],{"class":4327},[638,8125,8126],{"class":640,"line":4447},[638,8127,4545],{"class":4316},[638,8129,8130],{"class":640,"line":4452},[638,8131,4386],{"emptyLinePlaceholder":4385},[638,8133,8134],{"class":640,"line":4482},[638,8135,4556],{"class":4316},[638,8137,8138],{"class":640,"line":4499},[638,8139,8140],{"class":5060},"  \u003C!-- Fills the overlay box, which takes the size of the slot. -->\n",[638,8142,8143,8145,8147,8149,8151,8153,8155,8158],{"class":640,"line":4512},[638,8144,4562],{"class":4316},[638,8146,4597],{"class":4320},[638,8148,4328],{"class":4327},[638,8150,7891],{"class":647},[638,8152,4581],{"class":4320},[638,8154,4328],{"class":4327},[638,8156,8157],{"class":647},"\"{ refused: over && !accepted }\"",[638,8159,4334],{"class":4316},[638,8161,8162],{"class":640,"line":4536},[638,8163,8164],{"class":4347},"    {{ task.title }}\n",[638,8166,8167,8169,8172,8174,8177,8179,8181,8184,8186,8189],{"class":640,"line":4542},[638,8168,4594],{"class":4316},[638,8170,8171],{"class":4320}," v-if",[638,8173,4328],{"class":4327},[638,8175,8176],{"class":647},"\"items.length > 1\"",[638,8178,4597],{"class":4320},[638,8180,4328],{"class":4327},[638,8182,8183],{"class":647},"\"count\"",[638,8185,4605],{"class":4316},[638,8187,8188],{"class":4347},"{{ items.length }}",[638,8190,4611],{"class":4316},[638,8192,8193],{"class":640,"line":4548},[638,8194,4623],{"class":4316},[638,8196,8197],{"class":640,"line":4553},[638,8198,4629],{"class":4316},[638,8200,8201],{"class":640,"line":4559},[638,8202,4386],{"emptyLinePlaceholder":4385},[638,8204,8205,8208,8211],{"class":640,"line":4591},[638,8206,8207],{"class":4316},"\u003Cstyle",[638,8209,8210],{"class":4320}," scoped",[638,8212,4334],{"class":4316},[638,8214,8215,8217,8220,8222,8225,8227,8230,8233,8235,8238,8240,8242,8244,8246],{"class":640,"line":4614},[638,8216,580],{"class":4327},[638,8218,8219],{"class":4320},"task-preview",[638,8221,4344],{"class":4327},[638,8223,8224],{"class":4412}," width",[638,8226,4409],{"class":4327},[638,8228,8229],{"class":5585}," 100",[638,8231,8232],{"class":4340},"%",[638,8234,5989],{"class":4327},[638,8236,8237],{"class":4412}," height",[638,8239,4409],{"class":4327},[638,8241,8229],{"class":5585},[638,8243,8232],{"class":4340},[638,8245,5989],{"class":4327},[638,8247,8248],{"class":4327}," }\n",[638,8250,8251],{"class":640,"line":4620},[638,8252,8253],{"class":4316},"\u003C\u002Fstyle>\n",[490,8255,8256,8276],{},[493,8257,8258,8259,8261,8262,1021,8264,1021,8266,1021,8268,515,8270,8272,8273,580],{},"El componente recibe el arrastre como props: ",[501,8260,1126],{}," (cada ítem arrastrado, empezando por el que se\nagarró), ",[501,8263,1132],{},[501,8265,1135],{},[501,8267,1138],{},[501,8269,1141],{},[501,8271,1144],{},". Declara solo las que lees. Para las filas de\nuna lista, el ítem de la lista es ",[501,8274,8275],{},"items[0].item",[493,8277,8278,8279,8281,8282,8285],{},"Pásalo tal cual. Cámbialo con un ",[501,8280,2899],{},", nunca con una ",[501,8283,8284],{},"ref"," profunda.",[481,8287,8288],{},"El slot del provider cambia de la misma forma, y tu componente ya no se posiciona a sí mismo:",[481,8290,8291],{},[496,8292,710],{},[628,8294,8297],{"className":4306,"code":8295,"filename":8296,"language":4309,"meta":634,"style":634},"\u003CDnDProvider>\n  \u003CRouterView \u002F>\n  \u003Ctemplate #preview>\n    \u003CMyOverlay \u002F>  \u003C!-- moved itself with useDnDProvider().preview.position -->\n  \u003C\u002Ftemplate>\n\u003C\u002FDnDProvider>\n","App.vue",[501,8298,8299,8304,8309,8314,8319,8324],{"__ignoreMap":634},[638,8300,8301],{"class":640,"line":641},[638,8302,8303],{"class":4316},"\u003CDnDProvider>\n",[638,8305,8306],{"class":640,"line":4337},[638,8307,8308],{"class":4347},"  \u003CRouterView \u002F>\n",[638,8310,8311],{"class":640,"line":4363},[638,8312,8313],{"class":4347},"  \u003Ctemplate #preview>\n",[638,8315,8316],{"class":640,"line":4382},[638,8317,8318],{"class":4347},"    \u003CMyOverlay \u002F>  \u003C!-- moved itself with useDnDProvider().preview.position -->\n",[638,8320,8321],{"class":640,"line":4389},[638,8322,8323],{"class":4347},"  \u003C\u002Ftemplate>\n",[638,8325,8326],{"class":640,"line":4419},[638,8327,8328],{"class":4316},"\u003C\u002FDnDProvider>\n",[481,8330,8331],{},[496,8332,713],{},[628,8334,8336],{"className":4306,"code":8335,"filename":8296,"language":4309,"meta":634,"style":634},"\u003CDnDProvider>\n  \u003CRouterView \u002F>\n  \u003Ctemplate #overlay=\"{ items, over, accepted }\">\n    \u003CMyOverlay :items=\"items\" :over=\"over\" :accepted=\"accepted\" \u002F>\n  \u003C\u002Ftemplate>\n\u003C\u002FDnDProvider>\n",[501,8337,8338,8342,8346,8351,8356,8360],{"__ignoreMap":634},[638,8339,8340],{"class":640,"line":641},[638,8341,8303],{"class":4316},[638,8343,8344],{"class":640,"line":4337},[638,8345,8308],{"class":4347},[638,8347,8348],{"class":640,"line":4363},[638,8349,8350],{"class":4347},"  \u003Ctemplate #overlay=\"{ items, over, accepted }\">\n",[638,8352,8353],{"class":640,"line":4382},[638,8354,8355],{"class":4347},"    \u003CMyOverlay :items=\"items\" :over=\"over\" :accepted=\"accepted\" \u002F>\n",[638,8357,8358],{"class":640,"line":4389},[638,8359,8323],{"class":4347},[638,8361,8362],{"class":640,"line":4419},[638,8363,8328],{"class":4316},[481,8365,8366,8367,8369,8370,8372,8373,508,8375,1597,8377,580],{},"Una aparición que envolvía ",[501,8368,1008],{}," en un ",[501,8371,2998],{}," pasa a ser ",[501,8374,3009],{},[501,8376,3012],{},[808,8378,3023],{"href":3022},[874,8380,8382],{"id":8381},"a-drop-you-confirm","Un drop que confirmas",[481,8384,8385],{},[496,8386,710],{},[628,8388,8390],{"className":6603,"code":8389,"filename":4633,"language":6606,"meta":634,"style":634},"makeDroppable(el, {\n  events: {\n    onDrop: (e) =>\n      new Promise\u003Cvoid | boolean>((resolve) => {\n        if (!window.confirm('Drop here?')) return resolve(false); \u002F\u002F keep dragging\n        place(e.draggedItems);\n        resolve();\n      }),\n  },\n});\n",[501,8391,8392,8404,8412,8427,8456,8493,8508,8515,8520,8524],{"__ignoreMap":634},[638,8393,8394,8396,8398,8400,8402],{"class":640,"line":641},[638,8395,138],{"class":644},[638,8397,4470],{"class":4327},[638,8399,4473],{"class":4347},[638,8401,4476],{"class":4327},[638,8403,4479],{"class":4327},[638,8405,8406,8408,8410],{"class":640,"line":4337},[638,8407,4789],{"class":4320},[638,8409,4409],{"class":4327},[638,8411,4479],{"class":4327},[638,8413,8414,8416,8418,8420,8422,8424],{"class":640,"line":4363},[638,8415,4798],{"class":644},[638,8417,4409],{"class":4327},[638,8419,3036],{"class":4327},[638,8421,4805],{"class":4320},[638,8423,1167],{"class":4327},[638,8425,8426],{"class":4340}," =>\n",[638,8428,8429,8432,8435,8437,8440,8442,8444,8447,8450,8452,8454],{"class":640,"line":4382},[638,8430,8431],{"class":4340},"      new",[638,8433,8434],{"class":4412}," Promise",[638,8436,4432],{"class":4327},[638,8438,8439],{"class":4412},"void",[638,8441,8074],{"class":4327},[638,8443,8086],{"class":4412},[638,8445,8446],{"class":4327},">((",[638,8448,8449],{"class":4320},"resolve",[638,8451,1167],{"class":4327},[638,8453,4523],{"class":4340},[638,8455,4479],{"class":4327},[638,8457,8458,8460,8462,8465,8467,8470,8472,8475,8478,8480,8483,8485,8487,8490],{"class":640,"line":4389},[638,8459,5693],{"class":4340},[638,8461,6666],{"class":4327},[638,8463,8464],{"class":644},"window",[638,8466,580],{"class":4327},[638,8468,8469],{"class":644},"confirm",[638,8471,4470],{"class":4327},[638,8473,8474],{"class":647},"'Drop here?'",[638,8476,8477],{"class":4327},"))",[638,8479,6673],{"class":4340},[638,8481,8482],{"class":644}," resolve",[638,8484,4470],{"class":4327},[638,8486,1092],{"class":5585},[638,8488,8489],{"class":4327},");",[638,8491,8492],{"class":5060}," \u002F\u002F keep dragging\n",[638,8494,8495,8498,8500,8502,8504,8506],{"class":640,"line":4419},[638,8496,8497],{"class":644},"        place",[638,8499,4470],{"class":4327},[638,8501,4805],{"class":4347},[638,8503,580],{"class":4327},[638,8505,4827],{"class":4347},[638,8507,4444],{"class":4327},[638,8509,8510,8513],{"class":640,"line":4447},[638,8511,8512],{"class":644},"        resolve",[638,8514,7764],{"class":4327},[638,8516,8517],{"class":640,"line":4452},[638,8518,8519],{"class":4327},"      }),\n",[638,8521,8522],{"class":640,"line":4482},[638,8523,4863],{"class":4327},[638,8525,8526],{"class":640,"line":4499},[638,8527,4539],{"class":4327},[481,8529,8530],{},[496,8531,713],{},[628,8533,8535],{"className":6603,"code":8534,"filename":4633,"language":6606,"meta":634,"style":634},"makeDroppable(el, {\n  onBeforeDrop: () => (window.confirm('Drop here?') ? 'accept' : 'continue'),\n  onDrop: (e) => place(e.active.items),\n});\n",[501,8536,8537,8549,8587,8618],{"__ignoreMap":634},[638,8538,8539,8541,8543,8545,8547],{"class":640,"line":641},[638,8540,138],{"class":644},[638,8542,4470],{"class":4327},[638,8544,4473],{"class":4347},[638,8546,4476],{"class":4327},[638,8548,4479],{"class":4327},[638,8550,8551,8554,8556,8558,8560,8562,8564,8566,8568,8570,8572,8574,8577,8580,8582,8585],{"class":640,"line":4337},[638,8552,8553],{"class":644},"  onBeforeDrop",[638,8555,4409],{"class":4327},[638,8557,4520],{"class":4327},[638,8559,4523],{"class":4340},[638,8561,3036],{"class":4327},[638,8563,8464],{"class":644},[638,8565,580],{"class":4327},[638,8567,8469],{"class":644},[638,8569,4470],{"class":4327},[638,8571,8474],{"class":647},[638,8573,1167],{"class":4327},[638,8575,8576],{"class":4327}," ?",[638,8578,8579],{"class":647}," 'accept'",[638,8581,5839],{"class":4327},[638,8583,8584],{"class":647}," 'continue'",[638,8586,7665],{"class":4327},[638,8588,8589,8591,8593,8595,8597,8599,8601,8604,8606,8608,8610,8612,8614,8616],{"class":640,"line":4363},[638,8590,5337],{"class":644},[638,8592,4409],{"class":4327},[638,8594,3036],{"class":4327},[638,8596,4805],{"class":4320},[638,8598,1167],{"class":4327},[638,8600,4523],{"class":4340},[638,8602,8603],{"class":644}," place",[638,8605,4470],{"class":4327},[638,8607,4805],{"class":4347},[638,8609,580],{"class":4327},[638,8611,1129],{"class":4347},[638,8613,580],{"class":4327},[638,8615,1126],{"class":4347},[638,8617,7665],{"class":4327},[638,8619,8620],{"class":640,"line":4382},[638,8621,4539],{"class":4327},[481,8623,8624],{},"Una lista pregunta de la misma forma, y una promesa te permite abrir un diálogo propio. El overlay\nespera donde se soltó hasta que la promesa se resuelve:",[628,8626,8628],{"className":6603,"code":8627,"filename":6953,"language":6606,"meta":634,"style":634},"makeSortableList(el, {\n  items: toRef(props.column, 'tasks'),\n  group: 'board',\n  \u002F\u002F `ask` opens a dialog and resolves 'accept', 'continue' or 'reject'.\n  onBeforeDrop: (e) => (e.sameList ? 'accept' : ask(e)),\n});\n",[501,8629,8630,8642,8664,8674,8679,8717],{"__ignoreMap":634},[638,8631,8632,8634,8636,8638,8640],{"class":640,"line":641},[638,8633,143],{"class":644},[638,8635,4470],{"class":4327},[638,8637,4473],{"class":4347},[638,8639,4476],{"class":4327},[638,8641,4479],{"class":4327},[638,8643,8644,8646,8648,8650,8652,8654,8656,8658,8660,8662],{"class":640,"line":4337},[638,8645,7136],{"class":4320},[638,8647,4409],{"class":4327},[638,8649,6978],{"class":644},[638,8651,4470],{"class":4327},[638,8653,6083],{"class":4347},[638,8655,580],{"class":4327},[638,8657,7122],{"class":4347},[638,8659,4476],{"class":4327},[638,8661,7153],{"class":647},[638,8663,7665],{"class":4327},[638,8665,8666,8668,8670,8672],{"class":640,"line":4363},[638,8667,7164],{"class":4320},[638,8669,4409],{"class":4327},[638,8671,7169],{"class":647},[638,8673,1265],{"class":4327},[638,8675,8676],{"class":640,"line":4382},[638,8677,8678],{"class":5060},"  \u002F\u002F `ask` opens a dialog and resolves 'accept', 'continue' or 'reject'.\n",[638,8680,8681,8683,8685,8687,8689,8691,8693,8695,8697,8699,8702,8704,8706,8708,8711,8713,8715],{"class":640,"line":4389},[638,8682,8553],{"class":644},[638,8684,4409],{"class":4327},[638,8686,3036],{"class":4327},[638,8688,4805],{"class":4320},[638,8690,1167],{"class":4327},[638,8692,4523],{"class":4340},[638,8694,3036],{"class":4327},[638,8696,4805],{"class":4347},[638,8698,580],{"class":4327},[638,8700,8701],{"class":4347},"sameList ",[638,8703,7823],{"class":4327},[638,8705,8579],{"class":647},[638,8707,5839],{"class":4327},[638,8709,8710],{"class":644}," ask",[638,8712,4470],{"class":4327},[638,8714,4805],{"class":4347},[638,8716,4858],{"class":4327},[638,8718,8719],{"class":640,"line":4419},[638,8720,4539],{"class":4327},[481,8722,8723,8724,8727],{},"Una zona que aceptaba solo la parte coincidente de una selección mixta (",[501,8725,8726],{},"groupMatch: 'some'","):",[481,8729,8730],{},[496,8731,710],{},[628,8733,8735],{"className":6603,"code":8734,"filename":4633,"language":6606,"meta":634,"style":634},"makeDroppable(el, {\n  groups: ['frontend'],\n  groupMatch: 'some',\n  events: {\n    onDrop: (e) => place(e.draggedItems), \u002F\u002F only the items of the group arrive\n  },\n});\n",[501,8736,8737,8749,8762,8774,8782,8811,8815],{"__ignoreMap":634},[638,8738,8739,8741,8743,8745,8747],{"class":640,"line":641},[638,8740,138],{"class":644},[638,8742,4470],{"class":4327},[638,8744,4473],{"class":4347},[638,8746,4476],{"class":4327},[638,8748,4479],{"class":4327},[638,8750,8751,8753,8755,8757,8760],{"class":640,"line":4337},[638,8752,4485],{"class":4320},[638,8754,4409],{"class":4327},[638,8756,4490],{"class":4327},[638,8758,8759],{"class":647},"'frontend'",[638,8761,4496],{"class":4327},[638,8763,8764,8767,8769,8772],{"class":640,"line":4363},[638,8765,8766],{"class":4320},"  groupMatch",[638,8768,4409],{"class":4327},[638,8770,8771],{"class":647}," 'some'",[638,8773,1265],{"class":4327},[638,8775,8776,8778,8780],{"class":640,"line":4382},[638,8777,4789],{"class":4320},[638,8779,4409],{"class":4327},[638,8781,4479],{"class":4327},[638,8783,8784,8786,8788,8790,8792,8794,8796,8798,8800,8802,8804,8806,8808],{"class":640,"line":4389},[638,8785,4798],{"class":644},[638,8787,4409],{"class":4327},[638,8789,3036],{"class":4327},[638,8791,4805],{"class":4320},[638,8793,1167],{"class":4327},[638,8795,4523],{"class":4340},[638,8797,8603],{"class":644},[638,8799,4470],{"class":4327},[638,8801,4805],{"class":4347},[638,8803,580],{"class":4327},[638,8805,4827],{"class":4347},[638,8807,7156],{"class":4327},[638,8809,8810],{"class":5060}," \u002F\u002F only the items of the group arrive\n",[638,8812,8813],{"class":640,"line":4419},[638,8814,4863],{"class":4327},[638,8816,8817],{"class":640,"line":4447},[638,8818,4539],{"class":4327},[481,8820,8821],{},[496,8822,713],{},[628,8824,8826],{"className":6603,"code":8825,"filename":4633,"language":6606,"meta":634,"style":634},"import type { DragItem } from '@vue-dnd-kit\u002Fcore';\n\nconst fits = (item: DragItem) => item.type.length === 0 || item.type.includes('frontend');\n\nmakeDroppable(el, {\n  accept: 'frontend',\n  acceptMode: 'some',\n  onBeforeDrop: (e) => e.active.items.filter(fits).map((item) => item.id), \u002F\u002F the others fly back\n  onDrop: (e) => place(e.active.items.filter(fits)), \u002F\u002F `active.items` still lists every dragged item\n});\n",[501,8827,8828,8847,8851,8908,8912,8924,8935,8946,9003,9045],{"__ignoreMap":634},[638,8829,8830,8832,8834,8836,8839,8841,8843,8845],{"class":640,"line":641},[638,8831,4341],{"class":4340},[638,8833,5147],{"class":4340},[638,8835,4344],{"class":4327},[638,8837,8838],{"class":4347}," DragItem ",[638,8840,4351],{"class":4327},[638,8842,4354],{"class":4340},[638,8844,4377],{"class":647},[638,8846,4360],{"class":4327},[638,8848,8849],{"class":640,"line":4337},[638,8850,4386],{"emptyLinePlaceholder":4385},[638,8852,8853,8855,8858,8860,8862,8864,8866,8868,8870,8872,8874,8876,8878,8880,8883,8885,8888,8891,8893,8895,8897,8899,8902,8904,8906],{"class":640,"line":4363},[638,8854,4392],{"class":4340},[638,8856,8857],{"class":644}," fits",[638,8859,4464],{"class":4327},[638,8861,3036],{"class":4327},[638,8863,4838],{"class":4320},[638,8865,4409],{"class":4327},[638,8867,8025],{"class":4412},[638,8869,1167],{"class":4327},[638,8871,4523],{"class":4340},[638,8873,4845],{"class":4347},[638,8875,580],{"class":4327},[638,8877,1439],{"class":4347},[638,8879,580],{"class":4327},[638,8881,8882],{"class":4347},"length ",[638,8884,6760],{"class":4327},[638,8886,8887],{"class":5585}," 0",[638,8889,8890],{"class":4327}," ||",[638,8892,4845],{"class":644},[638,8894,580],{"class":4327},[638,8896,1439],{"class":644},[638,8898,580],{"class":4327},[638,8900,8901],{"class":644},"includes",[638,8903,4470],{"class":4327},[638,8905,8759],{"class":647},[638,8907,4444],{"class":4327},[638,8909,8910],{"class":640,"line":4382},[638,8911,4386],{"emptyLinePlaceholder":4385},[638,8913,8914,8916,8918,8920,8922],{"class":640,"line":4389},[638,8915,138],{"class":644},[638,8917,4470],{"class":4327},[638,8919,4473],{"class":4347},[638,8921,4476],{"class":4327},[638,8923,4479],{"class":4327},[638,8925,8926,8928,8930,8933],{"class":640,"line":4419},[638,8927,5326],{"class":4320},[638,8929,4409],{"class":4327},[638,8931,8932],{"class":647}," 'frontend'",[638,8934,1265],{"class":4327},[638,8936,8937,8940,8942,8944],{"class":640,"line":4447},[638,8938,8939],{"class":4320},"  acceptMode",[638,8941,4409],{"class":4327},[638,8943,8771],{"class":647},[638,8945,1265],{"class":4327},[638,8947,8948,8950,8952,8954,8956,8958,8960,8962,8964,8966,8968,8970,8972,8975,8977,8980,8982,8984,8986,8988,8990,8992,8994,8996,8998,9000],{"class":640,"line":4452},[638,8949,8553],{"class":644},[638,8951,4409],{"class":4327},[638,8953,3036],{"class":4327},[638,8955,4805],{"class":4320},[638,8957,1167],{"class":4327},[638,8959,4523],{"class":4340},[638,8961,4822],{"class":644},[638,8963,580],{"class":4327},[638,8965,1129],{"class":644},[638,8967,580],{"class":4327},[638,8969,1126],{"class":644},[638,8971,580],{"class":4327},[638,8973,8974],{"class":644},"filter",[638,8976,4470],{"class":4327},[638,8978,8979],{"class":4347},"fits",[638,8981,812],{"class":4327},[638,8983,4832],{"class":644},[638,8985,4835],{"class":4327},[638,8987,4838],{"class":4320},[638,8989,1167],{"class":4327},[638,8991,4523],{"class":4340},[638,8993,4845],{"class":4347},[638,8995,580],{"class":4327},[638,8997,1428],{"class":4347},[638,8999,7156],{"class":4327},[638,9001,9002],{"class":5060}," \u002F\u002F the others fly back\n",[638,9004,9005,9007,9009,9011,9013,9015,9017,9019,9021,9023,9025,9027,9029,9031,9033,9035,9037,9039,9042],{"class":640,"line":4482},[638,9006,5337],{"class":644},[638,9008,4409],{"class":4327},[638,9010,3036],{"class":4327},[638,9012,4805],{"class":4320},[638,9014,1167],{"class":4327},[638,9016,4523],{"class":4340},[638,9018,8603],{"class":644},[638,9020,4470],{"class":4327},[638,9022,4805],{"class":644},[638,9024,580],{"class":4327},[638,9026,1129],{"class":644},[638,9028,580],{"class":4327},[638,9030,1126],{"class":644},[638,9032,580],{"class":4327},[638,9034,8974],{"class":644},[638,9036,4470],{"class":4327},[638,9038,8979],{"class":4347},[638,9040,9041],{"class":4327},")),",[638,9043,9044],{"class":5060}," \u002F\u002F `active.items` still lists every dragged item\n",[638,9046,9047],{"class":640,"line":4499},[638,9048,4539],{"class":4327},[481,9050,9051,9052,9054,9055,9058],{},"Las listas lo hacen sin código: con ",[501,9053,3241],{},", aterrizan los ítems que acepta su\n",[501,9056,9057],{},"group.put",", y los demás vuelven a su sitio.",[485,9060,9062],{"id":9061},"pitfalls-when-upgrading","Escollos al actualizar",[490,9064,9065,9083,9095,9115,9138,9146,9155,9167,9178,9199,9221,9230,9242,9251],{},[493,9066,9067,538,9070,2604,9072,9074,9075,9078,9079,9082],{},[496,9068,9069],{},"Instala la v3 con su rango.",[501,9071,780],{},[501,9073,776],{},": un ",[501,9076,9077],{},"npm update"," mantiene ",[501,9080,9081],{},"^2"," en la v2.",[493,9084,9085,9088,9089,9091,9092,9094],{},[496,9086,9087],{},"Renderiza el borrador."," Una lista renderiza los ",[501,9090,1126],{}," que devuelve ",[501,9093,143],{},", no tu\narray. Si renderizas tu array, nada se mueve hasta el drop.",[493,9096,9097,9100,9101,9103,9104,9106,9107,9109,9110,9112,9113,580],{},[496,9098,9099],{},"No ordenes dos veces."," Borra el código de ",[501,9102,5681],{}," de las listas: una lista escribe cada\ndrop en una ref ",[501,9105,1126],{}," escribible después de su ",[501,9108,507],{},". Para aplicarlo tú, llama a\n",[501,9111,2603],{}," y usa ",[501,9114,2278],{},[493,9116,9117,9122,9123,9125,9126,9128,9129,9131,9132,9134,9135,9137],{},[496,9118,9119,9121],{},[501,9120,1092],{}," rechaza el drop."," En la v2, un ",[501,9124,507],{}," que resolvía ",[501,9127,1092],{}," mantenía el arrastre en\ncurso. En la v3, devuelve ",[501,9130,3839],{}," desde ",[501,9133,588],{},". Una promesa devuelta desde ",[501,9136,507],{}," se\nignora.",[493,9139,9140,9145],{},[496,9141,9142,9143,580],{},"Las listas solo comparten dentro de un ",[501,9144,579],{}," Una lista sin él no intercambia con ninguna otra\nlista.",[493,9147,9148,538,9151,9154],{},[496,9149,9150],{},"Da a las filas el id como clave.",[501,9152,9153],{},":key=\"index\""," anima las filas equivocadas. Pasa también ids\ndesde tus datos: un id por defecto es nuevo en cada instancia del componente.",[493,9156,9157,9166],{},[496,9158,2751,9159,4034,9161,2604,9164,580],{},[501,9160,531],{},[501,9162,9163],{},"transition",[501,9165,1936],{}," La biblioteca mueve las filas ella\nmisma, y los movimientos se animarían dos veces.",[493,9168,9169,538,9172,9174,9175,580],{},[496,9170,9171],{},"Deshaz el apaño táctil.",[501,9173,854],{}," en un ítem entero impide que la página se desplace\nbajo el dedo; la v3 empieza los arrastres táctiles con una pulsación larga. Mantenlo en un asa que\ndeba arrastrar enseguida, con ",[501,9176,9177],{},"activation: { touch: { distance: 4 } }",[493,9179,9180,9183,9184,9186,9187,9189,9190,9192,9193,9195,9196,9198],{},[496,9181,9182],{},"Quita los atributos obsoletos."," La biblioteca pone el ",[501,9185,847],{},", el ",[501,9188,3516],{}," y los ",[501,9191,5445],{}," que\nnecesita y nunca sobrescribe los tuyos, así que un ",[501,9194,3516],{}," o un ",[501,9197,850],{}," que hayan quedado se\nmantienen como los dejaste.",[493,9200,9201,538,9204,9206,9207,9210,9211,9213,9214,9217,9218,9220],{},[496,9202,9203],{},"Vuelve a dar estilo al overlay.",[501,9205,3030],{}," ya no existe: da estilo a lo que hay dentro\nde ",[501,9208,9209],{},"[data-dnd-overlay='dragging']",", nunca al ",[501,9212,1936],{}," de la caja. Dale ",[501,9215,9216],{},"width: 100%; height: 100%","\na la raíz de un componente de overlay, y saca ",[501,9219,4255],{}," de tus layouts.",[493,9222,9223,9226,9227,9229],{},[496,9224,9225],{},"El desplazamiento automático está activado."," Pasa ",[501,9228,3398],{}," donde la v2 nunca se\ndesplazaba.",[493,9231,9232,538,9235,9237,9238,9241],{},[496,9233,9234],{},"Un rectángulo no necesita tecla.",[501,9236,157],{}," dibuja con una pulsación simple en su\nespacio vacío. Añade un ",[501,9239,9240],{},"modifier"," para conservar el Ctrl de la v2.",[493,9243,9244,9247,9248,9250],{},[496,9245,9246],{},"Un provider, áreas dentro."," Los ítems no pueden pasar de un provider a otro. Una página que usaba\nun provider por región para mantener separadas sus reglas necesita un provider y un ",[501,9249,162],{},"\npor región.",[493,9252,9253,538,9256,515,9258,9260],{},[496,9254,9255],{},"Dos argumentos.",[501,9257,134],{},[501,9259,138],{}," reciben una ref y un objeto de opciones, sin\npayload.",[9262,9263,9264],"style",{},"html pre.shiki code .sbwC8, html code.shiki .sbwC8{--shiki-light:#0969DA;--shiki-default:#0969DA;--shiki-dark:#7CC4FF}html pre.shiki code .sN8r7, html code.shiki .sN8r7{--shiki-light:#9A6700;--shiki-default:#9A6700;--shiki-dark:#E9C46A}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 .sf6mc, html code.shiki .sf6mc{--shiki-light:#CF2257;--shiki-default:#CF2257;--shiki-dark:#FF7B9C}html pre.shiki code .sVvmN, html code.shiki .sVvmN{--shiki-light:#7C4DCC;--shiki-default:#7C4DCC;--shiki-dark:#C3A6FF}html pre.shiki code .s6cML, html code.shiki .s6cML{--shiki-light:#5B5B63;--shiki-default:#5B5B63;--shiki-dark:#9F9FA9}html pre.shiki code .s78Kj, html code.shiki .s78Kj{--shiki-light:#1F8A5B;--shiki-default:#1F8A5B;--shiki-dark:#42B883}html pre.shiki code .snmWg, html code.shiki .snmWg{--shiki-light:#27272A;--shiki-default:#27272A;--shiki-dark:#E4E4E7}html pre.shiki code .sR6Ar, html code.shiki .sR6Ar{--shiki-light:#0F766E;--shiki-default:#0F766E;--shiki-dark:#7EE0C0}html pre.shiki code .sytrG, html code.shiki .sytrG{--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-default:#85858D;--shiki-default-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic}html pre.shiki code .s3IRZ, html code.shiki .s3IRZ{--shiki-light:#BC4C00;--shiki-default:#BC4C00;--shiki-dark:#F4A261}",{"title":634,"searchDepth":4363,"depth":4363,"links":9266},[9267,9268,9269,9288,9295],{"id":487,"depth":4337,"text":488},{"id":622,"depth":4337,"text":623},{"id":865,"depth":4337,"text":866,"children":9270},[9271,9272,9273,9275,9276,9277,9278,9279,9280,9281,9282,9283,9284,9285,9286,9287],{"id":876,"depth":4363,"text":877},{"id":1056,"depth":4363,"text":312},{"id":1328,"depth":4363,"text":9274},"Leer el estado: useDnD",{"id":1608,"depth":4363,"text":134},{"id":1948,"depth":4363,"text":138},{"id":2146,"depth":4363,"text":2147},{"id":2415,"depth":4363,"text":2416},{"id":575,"depth":4363,"text":2681},{"id":2817,"depth":4363,"text":336},{"id":3076,"depth":4363,"text":3077},{"id":3256,"depth":4363,"text":3257},{"id":3371,"depth":4363,"text":3372},{"id":3490,"depth":4363,"text":3491},{"id":3619,"depth":4363,"text":3620},{"id":3908,"depth":4363,"text":3909},{"id":4124,"depth":4363,"text":4125},{"id":4294,"depth":4337,"text":4295,"children":9289},[9290,9291,9292,9293,9294],{"id":4298,"depth":4363,"text":4299},{"id":5474,"depth":4363,"text":5475},{"id":6596,"depth":4363,"text":324},{"id":7625,"depth":4363,"text":7626},{"id":8381,"depth":4363,"text":8382},{"id":9061,"depth":4337,"text":9062},"Pasa una app de la v2 a la v3 — qué cambió y por qué, la actualización, un mapa de cada API de la v2 a su sustituta en la v3, código de antes y después para los casos habituales, y los escollos.","md",null,{"source":9300},"ac4ad39457",{"icon":34},{"title":302,"description":9296},"MmUlo2XgV8bjQJ1MA_j-AY5MZg6Ze8V9E7O8Hmzqiwo",[9305,9307],{"title":298,"path":299,"stem":300,"description":9306,"icon":29},"Una lista ordenable en tres archivos — un provider, una lista y sus filas.",{"title":312,"path":313,"stem":314,"description":9308,"icon":46},"DnDProvider gestiona todos los arrastres que hay debajo. Encuentra el destino, inicia los arrastres, desplaza y cuenta a useDnD y useDnDMonitor todo lo que pasa.",1793707571367]