chore(docs): update examples with new API for add/remove

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

docs/components/examples/basic/App.vue

@@ -32,7 +32,7 @@ onNodeDragStop((e) => console.log('drag stop', e))
  * onConnect is called when a new connection is created.
  * You can add additional properties to your new edge (like a type or label) or block the creation altogether
  */
-onConnect((params) => addEdges([params]))
+onConnect((params) => addEdges(params))
 
 const dark = ref(false)
 
@@ -73,7 +73,9 @@ function toggleClass() {
 <template>
   <VueFlow v-model="elements" :class="{ dark }" class="basicflow" :default-viewport="{ zoom: 1.5 }" :min-zoom="0.2" :max-zoom="4">
     <Background :pattern-color="dark ? '#FFFFFB' : '#aaa'" gap="8" />
+
     <MiniMap />
+
     <Controls />
 
     <Panel :position="PanelPosition.TopRight" class="controls">

docs/components/examples/custom-node/CustomNode.vue

@@ -37,10 +37,10 @@ const sourceHandleStyleB = computed(() => ({
     style="display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; max-width: 90%; margin: auto; gap: 3px"
   >
     <template v-for="color of colors" :key="color.name">
-      <button :title="color.name" :style="{ backgroundColor: color.value }" type="button" @click="onSelect(color)"></button>
+      <button :title="color.name" :style="{ backgroundColor: color.value }" type="button" @click="onSelect(color)" />
     </template>
 
-    <button class="animated-bg-gradient" title="gradient" type="button" @click="onGradient"></button>
+    <button class="animated-bg-gradient" title="gradient" type="button" @click="onGradient" />
   </div>
 
   <Handle id="a" type="source" :position="Position.Right" :style="sourceHandleStyleA" />

docs/components/examples/dnd/App.vue

@@ -27,7 +27,7 @@ function onDragOver(event) {
   }
 }
 
-onConnect((params) => addEdges([params]))
+onConnect((params) => addEdges(params))
 
 function onDrop(event) {
   const type = event.dataTransfer?.getData('application/vueflow')

docs/components/examples/edges/CustomEdge.vue

@@ -70,7 +70,7 @@ export default {
       }"
       class="nodrag nopan"
     >
-      <button class="edgebutton" @click="removeEdges([id])">×</button>
+      <button class="edgebutton" @click="removeEdges(id)">×</button>
     </div>
   </EdgeLabelRenderer>
 </template>

docs/components/examples/empty/App.vue

@@ -5,7 +5,7 @@ import { MiniMap } from '@vue-flow/minimap'
 
 const { nodes, addNodes, addEdges, onConnect, dimensions } = useVueFlow()
 
-onConnect((params) => addEdges([params]))
+onConnect((params) => addEdges(params))
 
 function addRandomNode() {
   const nodeId = (nodes.value.length + 1).toString()

docs/components/examples/horizontal/App.vue

@@ -10,7 +10,7 @@ const { onConnect, addEdges } = useVueFlow()
 
 const elements = ref(initialElements)
 
-onConnect((params) => addEdges([params]))
+onConnect((params) => addEdges(params))
 </script>
 
 <template>

docs/components/examples/interaction/InteractionControls.vue

@@ -26,7 +26,7 @@ const captureZoomClick = ref(false)
 
 const captureZoomScroll = ref(false)
 
-onConnect((params) => addEdges([params]))
+onConnect((params) => addEdges(params))
 
 onNodeDragStart((e) => console.log('drag start', e))
 

docs/components/examples/nested/App.vue

@@ -68,7 +68,7 @@ const { onConnect, addEdges, addNodes } = useVueFlow({
   ],
 })
 
-onConnect((params) => addEdges([params]))
+onConnect((params) => addEdges(params))
 
 onMounted(() => {
   // add nodes to parent