From 0192c6515f34a6775f2b9d9380be85b0d8aeb619 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 6 Feb 2023 21:38:16 +0100
Subject: [PATCH] chore(docs): replace `default-zoom` with `defaut-viewport`

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 docs/components/examples/basic/App.vue        |  2 +-
 docs/components/examples/custom-node/App.vue  |  2 +-
 docs/components/examples/horizontal/App.vue   |  2 +-
 docs/components/examples/intersection/App.vue |  2 +-
 packages/pathfinding-edge/example/App.vue     | 13 ++++++-------
 packages/pathfinding-edge/example/elements.ts |  2 +-
 6 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/docs/components/examples/basic/App.vue b/docs/components/examples/basic/App.vue
index faf9ea38..dd2c53b4 100644
--- a/docs/components/examples/basic/App.vue
+++ b/docs/components/examples/basic/App.vue
@@ -64,7 +64,7 @@ const toggleClass = () => (dark.value = !dark.value)
 </script>
 
 <template>
-  <VueFlow v-model="elements" :class="{ dark }" class="basicflow" :default-zoom="1.5" :min-zoom="0.2" :max-zoom="4">
+  <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 />
diff --git a/docs/components/examples/custom-node/App.vue b/docs/components/examples/custom-node/App.vue
index c22e08dc..df9db52c 100644
--- a/docs/components/examples/custom-node/App.vue
+++ b/docs/components/examples/custom-node/App.vue
@@ -105,7 +105,7 @@ onMounted(() => {
     :class="[gradient ? 'animated-bg-gradient' : '']"
     :style="{ backgroundColor: bgColor }"
     :connection-line-style="connectionLineStyle"
-    :default-zoom="1.5"
+    :default-viewport="{ zoom: 1.5 }"
     fit-view-on-init
   >
     <template #node-custom="{ data }">
diff --git a/docs/components/examples/horizontal/App.vue b/docs/components/examples/horizontal/App.vue
index 5cb9e32c..34dcb35f 100644
--- a/docs/components/examples/horizontal/App.vue
+++ b/docs/components/examples/horizontal/App.vue
@@ -18,7 +18,7 @@ onConnect((params) => addEdges([params]))
     v-model="elements"
     class="basicflow"
     :default-edge-options="{ type: 'smoothstep' }"
-    :default-zoom="1.5"
+    :default-viewport="{ zoom: 1.5 }"
     :min-zoom="0.2"
     :max-zoom="4"
     fit-view-on-init
diff --git a/docs/components/examples/intersection/App.vue b/docs/components/examples/intersection/App.vue
index 6e1b986d..610bbbeb 100644
--- a/docs/components/examples/intersection/App.vue
+++ b/docs/components/examples/intersection/App.vue
@@ -22,5 +22,5 @@ onNodeDrag(({ intersections }) => {
 </script>
 
 <template>
-  <VueFlow v-model="elements" fit-view-on-init :default-zoom="1.5" :min-zoom="0.2" :max-zoom="4" />
+  <VueFlow v-model="elements" fit-view-on-init :default-viewport="{ zoom: 1.5 }" :min-zoom="0.2" :max-zoom="4" />
 </template>
diff --git a/packages/pathfinding-edge/example/App.vue b/packages/pathfinding-edge/example/App.vue
index 4fe8f895..c41a97ea 100644
--- a/packages/pathfinding-edge/example/App.vue
+++ b/packages/pathfinding-edge/example/App.vue
@@ -1,13 +1,15 @@
 <script lang="ts" setup>
-import type { Connection, Edge, Elements } from '@vue-flow/core'
-import { VueFlow, addEdge } from '@vue-flow/core'
-import { Background } from '@vue-flow/additional-components'
+import type { Elements } from '@vue-flow/core'
+import { VueFlow, useVueFlow } from '@vue-flow/core'
 import { ref } from 'vue'
 import initialElements from './elements'
 import { PathFindingEdge, PerfectArrow } from '~/index'
 
 const elements = ref<Elements>(initialElements)
-const onConnect = (params: Edge | Connection) => (elements.value = addEdge(params, elements.value))
+
+const { addEdges, onConnect } = useVueFlow()
+
+onConnect((params) => addEdges([params]))
 </script>
 
 <template>
@@ -17,7 +19,6 @@ const onConnect = (params: Edge | Connection) => (elements.value = addEdge(param
       :default-edge-options="{ type: 'perfectArrow' }"
       :fit-view-on-init="true"
       class="vue-flow-basic-example"
-      @connect="onConnect"
     >
       <template #edge-pathFinding="props">
         <PathFindingEdge v-bind="props" />
@@ -25,8 +26,6 @@ const onConnect = (params: Edge | Connection) => (elements.value = addEdge(param
       <template #edge-perfectArrow="props">
         <PerfectArrow v-bind="props" />
       </template>
-
-      <Background color="#aaa" :gap="8" />
     </VueFlow>
   </div>
 </template>
diff --git a/packages/pathfinding-edge/example/elements.ts b/packages/pathfinding-edge/example/elements.ts
index eb751d74..3cb36864 100644
--- a/packages/pathfinding-edge/example/elements.ts
+++ b/packages/pathfinding-edge/example/elements.ts
@@ -123,7 +123,7 @@ export default [
     id: 'e2a2b',
     source: '2a',
     target: '2b',
-    type: 'pathFinding',
+    type: 'perfectArrow',
     markerEnd,
   },
 ] as Elements