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/confirm-delete/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue'
+import { h, ref } from 'vue'
 import { VueFlow, useVueFlow } from '@vue-flow/core'
 import { Background } from '@vue-flow/background'
 import { useDialog } from './useDialog'
@@ -10,16 +10,26 @@ const { onConnect, addEdges, onNodesChange, onEdgesChange, applyNodeChanges, app
 const dialog = useDialog()
 
 const nodes = ref([
-  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
-  { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },
-  { id: '3', label: 'Node 3', position: { x: 400, y: 100 }, class: 'light' },
-  { id: '4', label: 'Node 4', position: { x: 400, y: 200 }, class: 'light' },
+  { id: '1', type: 'input', data: { label: 'Click me and' }, position: { x: 0, y: 0 } },
+  { id: '2', data: { label: `press 'Backspace' to delete me` }, position: { x: 0, y: 100 } },
 ])
 
-const edges = ref([
-  { id: 'e1-2', source: '1', target: '2', animated: true },
-  { id: 'e1-3', source: '1', target: '3' },
-])
+const edges = ref([{ id: 'e1-2', source: '1', target: '2' }])
+
+function dialogMsg(id) {
+  return h(
+    'span',
+    {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: '8px',
+      },
+    },
+    [`Are you sure?`, h('br'), h('span', `[ELEMENT_ID: ${id}]`)],
+  )
+}
 
 onConnect(addEdges)
 
@@ -28,7 +38,7 @@ onNodesChange(async (changes) => {
 
   for (const change of changes) {
     if (change.type === 'remove') {
-      const isConfirmed = await dialog.confirm(`Do you really want to delete this node: ${change.id}?`)
+      const isConfirmed = await dialog.confirm(dialogMsg(change.id))
 
       if (isConfirmed) {
         nextChanges.push(change)
@@ -46,7 +56,7 @@ onEdgesChange(async (changes) => {
 
   for (const change of changes) {
     if (change.type === 'remove') {
-      const isConfirmed = await dialog.confirm(`Do you really want to delete this edge: ${change.id}?`)
+      const isConfirmed = await dialog.confirm(dialogMsg(change.id))
 
       if (isConfirmed) {
         nextChanges.push(change)
@@ -61,7 +71,7 @@ onEdgesChange(async (changes) => {
 </script>
 
 <template>
-  <VueFlow :nodes="nodes" :edges="edges" :apply-default="false" fit-view-on-init class="vue-flow-basic-example">
+  <VueFlow :nodes="nodes" :edges="edges" :apply-default="false" fit-view-on-init class="confirm-flow">
     <Background />
 
     <Dialog />

docs/examples/confirm-delete/Dialog.vue

@@ -17,9 +17,17 @@ function cancel() {
 <template>
   <div v-if="isVisible" class="dialog-overlay">
     <div class="dialog">
-      <p>{{ message }}</p>
+      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
+        <path
+          fill="#e53e3e"
+          d="M7 21q-.825 0-1.412-.587T5 19V6H4V4h5V3h6v1h5v2h-1v13q0 .825-.587 1.413T17 21zm2-4h2V8H9zm4 0h2V8h-2z"
+        />
+      </svg>
 
-      <div class="dialog-actions">
+      <p v-if="typeof message === 'string'">{{ message }}</p>
+      <component :is="message" v-else />
+
+      <div class="actions">
         <button @click="confirm">Confirm</button>
         <button @click="cancel">Cancel</button>
       </div>
@@ -42,16 +50,34 @@ function cancel() {
 }
 
 .dialog {
-  background: white;
+  background: #2d3748;
   padding: 20px;
   border-radius: 5px;
   text-align: center;
+  color: white;
 }
 
-.dialog-actions {
+.dialog .actions {
   margin-top: 20px;
   display: flex;
   justify-content: center;
   gap: 8px;
 }
+
+.dialog .actions button {
+  background: #4a5568;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.dialog .actions button:first-of-type:hover {
+  background: #2563eb;
+}
+
+.dialog .actions button:last-of-type:hover {
+  background: #e53e3e;
+}
 </style>

docs/examples/confirm-delete/useDialog.js

@@ -1,5 +1,8 @@
 import { ref } from 'vue'
 
+/**
+ * In a real world example you would want to avoid creating refs in a global scope like this
+ */
 const isVisible = ref(false)
 const message = ref('')
 let resolveCallback