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