From 945af78c8b8ada41c358547e955a85e211021743 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 11 May 2023 13:34:41 +0200
Subject: [PATCH] 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                       | 4 +++-
 docs/components/examples/custom-node/CustomNode.vue          | 4 ++--
 docs/components/examples/dnd/App.vue                         | 2 +-
 docs/components/examples/edges/CustomEdge.vue                | 2 +-
 docs/components/examples/empty/App.vue                       | 2 +-
 docs/components/examples/horizontal/App.vue                  | 2 +-
 docs/components/examples/interaction/InteractionControls.vue | 2 +-
 docs/components/examples/nested/App.vue                      | 2 +-
 8 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/docs/components/examples/basic/App.vue b/docs/components/examples/basic/App.vue
index 43b56ad9..50fce8c2 100644
--- a/docs/components/examples/basic/App.vue
+++ b/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">
diff --git a/docs/components/examples/custom-node/CustomNode.vue b/docs/components/examples/custom-node/CustomNode.vue
index 93dc452e..3bafb359 100644
--- a/docs/components/examples/custom-node/CustomNode.vue
+++ b/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" />
diff --git a/docs/components/examples/dnd/App.vue b/docs/components/examples/dnd/App.vue
index aba78488..94c836e3 100644
--- a/docs/components/examples/dnd/App.vue
+++ b/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')
diff --git a/docs/components/examples/edges/CustomEdge.vue b/docs/components/examples/edges/CustomEdge.vue
index eb0b3ae1..87b4c336 100644
--- a/docs/components/examples/edges/CustomEdge.vue
+++ b/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>
diff --git a/docs/components/examples/empty/App.vue b/docs/components/examples/empty/App.vue
index 4171b993..128252e3 100644
--- a/docs/components/examples/empty/App.vue
+++ b/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()
diff --git a/docs/components/examples/horizontal/App.vue b/docs/components/examples/horizontal/App.vue
index 34dcb35f..744d7764 100644
--- a/docs/components/examples/horizontal/App.vue
+++ b/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>
diff --git a/docs/components/examples/interaction/InteractionControls.vue b/docs/components/examples/interaction/InteractionControls.vue
index 83b7a3b6..8c85e055 100644
--- a/docs/components/examples/interaction/InteractionControls.vue
+++ b/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))
 
diff --git a/docs/components/examples/nested/App.vue b/docs/components/examples/nested/App.vue
index dfc99ea9..48bce7a5 100644
--- a/docs/components/examples/nested/App.vue
+++ b/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