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