docs: update examples

docs/components/examples/dnd/App.vue

@@ -15,8 +15,10 @@ const { onConnect, nodes, edges, addEdges, addNodes, viewport, project } = useVu
     },
   ],
 })
+
 const onDragOver = (event) => {
   event.preventDefault()
+
   if (event.dataTransfer) {
     event.dataTransfer.dropEffect = 'move'
   }
@@ -26,13 +28,16 @@ onConnect((params) => addEdges([params]))
 
 const onDrop = (event) => {
   const type = event.dataTransfer?.getData('application/vueflow')
+
   const position = project({ x: event.clientX - 40, y: event.clientY - 18 })
+
   const newNode = {
     id: getId(),
     type,
     position,
     label: `${type} node`,
   }
+
   addNodes([newNode])
 }
 </script>
@@ -40,6 +45,7 @@ const onDrop = (event) => {
 <template>
   <div class="dndflow" @drop="onDrop">
     <VueFlow @dragover="onDragOver" />
+
     <Sidebar />
   </div>
 </template>

docs/components/examples/dnd/Sidebar.vue

@@ -10,9 +10,12 @@ const onDragStart = (event, nodeType) => {
 <template>
   <aside>
     <div class="description">You can drag these nodes to the pane.</div>
+
     <div class="nodes">
       <div class="vue-flow__node-input" :draggable="true" @dragstart="onDragStart($event, 'input')">Input Node</div>
+
       <div class="vue-flow__node-default" :draggable="true" @dragstart="onDragStart($event, 'default')">Default Node</div>
+
       <div class="vue-flow__node-output" :draggable="true" @dragstart="onDragStart($event, 'output')">Output Node</div>
     </div>
   </aside>