docs: update examples

docs/components/examples/teleport/App.vue

@@ -36,11 +36,12 @@ const elements = ref([
 
 <template>
   <div class="teleportflow">
-    <VueFlow v-model="elements" :fit-view-on-init="true">
-      <template #node-teleportable="props">
-        <TeleportableNode v-bind="props" />
+    <VueFlow v-model="elements" fit-view-on-init>
+      <template #node-teleportable="{ id }">
+        <TeleportableNode :id="id" />
       </template>
     </VueFlow>
+
     <Sidebar />
   </div>
 </template>

docs/components/examples/teleport/Sidebar.vue

@@ -1,10 +1,11 @@
 <script setup>
-//
+// ...
 </script>
 
 <template>
   <aside>
     <div class="description">Teleport destination</div>
+
     <div id="port" class="port"></div>
   </aside>
 </template>

docs/components/examples/teleport/TeleportableNode.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { Handle, Position } from '@vue-flow/core'
-import { useTeleport } from './useTransition.js'
+import { useTeleport } from './useTeleport.js'
 
 const props = defineProps({
   id: {
@@ -27,12 +27,17 @@ export default {
     <transition :name="animation">
       <div v-if="!transition" class="teleportable">
         <Handle type="target" :position="Position.Top" />
+
         [Node {{ id }}]
+
         <div class="buttons">
           <div v-if="teleport !== '#port'" class="button" @click.prevent="onClick('#port')">Teleport To Sidebar</div>
+
           <div v-if="teleport !== null" class="button" @click.prevent="onClick(null)">Teleport To Main Graph</div>
+
           <div class="button" @click.prevent="changeAnimation">Animation: {{ animation }}</div>
         </div>
+
         <Handle type="source" :position="Position.Bottom" />
       </div>
     </transition>

docs/components/examples/teleport/useTeleport.js

@@ -12,7 +12,7 @@ export const useTeleport = (id) => {
   const transition = ref(false)
   const teleport = ref(null)
 
-  const { updateNodeInternals, getNode, edges } = useVueFlow()
+  const { updateNodeInternals, findNode, edges } = useVueFlow()
 
   /**
    * specify a selector to teleport to
@@ -65,7 +65,7 @@ export const useTeleport = (id) => {
    * i.e. if they emit events, they will still emit them up their regular tree
    */
   const onClick = (destination) => {
-    const node = getNode.value(id)
+    const node = findNode(id)
 
     transition.value = true
 
@@ -79,13 +79,13 @@ export const useTeleport = (id) => {
     // check if nodes connected to edge are teleported and hide edge if one of them is
     if (destination) {
       connectedEdges.forEach(
-        (edge) => (edge.hidden = !!getNode.value(edge.source).data.destination || !!getNode.value(edge.target).data.destination),
+        (edge) => (edge.hidden = !!findNode(edge.source).data.destination || !!findNode(edge.target).data.destination),
       )
     }
 
     const onFinish = () => {
       connectedEdges.forEach(
-        (edge) => (edge.hidden = !!getNode.value(edge.source).data.destination || !!getNode.value(edge.target).data.destination),
+        (edge) => (edge.hidden = !!findNode(edge.source).data.destination || !!findNode(edge.target).data.destination),
       )
     }