chore(docs): update example styles (#1469)

* chore(docs): update basic example styles

* chore(docs): update confirm delete example styles

* chore(docs): update dnd example styles

* chore(docs): update hidden example

* chore(docs): update update node example

* chore(docs): update node toolbar example styles

* chore(docs): update transition example styles

* chore(docs): cleanup basic example els

* chore(docs): cleanup examples

docs/examples/dnd/App.vue

@@ -15,14 +15,16 @@ onConnect(addEdges)
 </script>
 
 <template>
-  <div class="dndflow" @drop="onDrop">
+  <div class="dnd-flow" @drop="onDrop">
     <VueFlow :nodes="nodes" @dragover="onDragOver" @dragleave="onDragLeave">
       <DropzoneBackground
         :style="{
           backgroundColor: isDragOver ? '#e7f3ff' : 'transparent',
           transition: 'background-color 0.2s ease',
         }"
-      />
+      >
+        <p v-if="isDragOver">Drop here</p>
+      </DropzoneBackground>
     </VueFlow>
 
     <Sidebar />

docs/examples/dnd/DropzoneBackground.vue

@@ -3,9 +3,11 @@ import { Background } from '@vue-flow/background'
 </script>
 
 <template>
-  <div style="height: 100%; width: 100%">
-    <Background :size="2" :gap="20" pattern-color="#BDBDBD">
+  <div class="dropzone-background">
+    <Background :size="2" :gap="20" pattern-color="#BDBDBD" />
+
+    <div class="overlay">
       <slot />
-    </Background>
+    </div>
   </div>
 </template>

docs/examples/dnd/style.css

@@ -1,51 +1,70 @@
-.dndflow {
+.dnd-flow {
   flex-direction: column;
   display: flex;
   height: 100%;
 }
 
-.dndflow aside {
+.dnd-flow aside {
   color: white;
   font-weight: 700;
   border-right: 1px solid #eee;
   padding: 15px 10px;
   font-size: 12px;
   background: rgba(16, 185, 129, 0.75);
-  -webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
-  box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
+  -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.3);
+  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.3);
 }
 
-.dndflow aside .nodes > * {
+.dnd-flow aside .nodes > * {
   margin-bottom: 10px;
   cursor: grab;
   font-weight: 500;
-  -webkit-box-shadow: 5px 5px 10px 2px rgba(0,0,0,0.25);
-  box-shadow: 5px 5px 10px 2px rgba(0,0,0,0.25);
+  -webkit-box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.25);
+  box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.25);
 }
 
-.dndflow aside .description {
+.dnd-flow aside .description {
   margin-bottom: 10px;
 }
 
-.dndflow .vue-flow-wrapper {
+.dnd-flow .vue-flow-wrapper {
   flex-grow: 1;
   height: 100%;
 }
 
 @media screen and (min-width: 640px) {
-  .dndflow {
+  .dnd-flow {
     flex-direction: row;
   }
 
-  .dndflow aside {
+  .dnd-flow aside {
     min-width: 25%;
   }
 }
 
 @media screen and (max-width: 639px) {
-  .dndflow aside .nodes {
+  .dnd-flow aside .nodes {
     display: flex;
     flex-direction: row;
     gap: 5px;
   }
 }
+
+.dropzone-background {
+  position: relative;
+  height: 100%;
+  width: 100%
+}
+
+.dropzone-background .overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+  pointer-events: none;
+}

docs/examples/dnd/useDnD.js

@@ -89,7 +89,7 @@ export default function useDragAndDrop() {
       id: nodeId,
       type: draggedType.value,
       position,
-      label: `[${nodeId}]`,
+      data: { label: nodeId },
     }
 
     /**