docs: update examples

docs/components/examples/transition/App.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref } from 'vue'
-import { ConnectionMode, Position, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Position, VueFlow, useVueFlow } from '@vue-flow/core'
 import TransitionEdge from './TransitionEdge.vue'
 
 const elements = ref([
@@ -21,28 +21,18 @@ const elements = ref([
 
   { id: 'e1-2', type: 'custom', source: '1', target: '2', animated: true, style: { stroke: '#fff' } },
 ])
-const bgColor = ref('#1A192B')
-const connectionLineStyle = { stroke: '#fff' }
-const snapGrid = [16, 16]
 
-const { onPaneReady } = useVueFlow({
-  connectionMode: ConnectionMode.Loose,
-  connectionLineStyle,
-  snapToGrid: true,
-  snapGrid,
-  defaultZoom: 1.5,
-})
+const { onPaneReady } = useVueFlow()
 
 onPaneReady((i) => {
   i.fitView({
     nodes: ['1'],
   })
-  console.log('flow loaded:', i)
 })
 </script>
 
 <template>
-  <VueFlow v-model="elements" :style="{ backgroundColor: bgColor }">
+  <VueFlow v-model="elements" :style="{ backgroundColor: '#1A192B' }">
     <template #edge-custom="props">
       <TransitionEdge v-bind="props" />
     </template>

docs/components/examples/transition/TransitionEdge.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { TransitionPresets, useDebounceFn, useTransition, watchDebounced } from '@vueuse/core'
-import { getBezierPath, useVueFlow } from '@vue-flow/core'
-import { computed, ref } from 'vue'
+import { BezierEdge, useVueFlow } from '@vue-flow/core'
+import { ref } from 'vue'
 
 const props = defineProps({
   id: {
@@ -64,21 +64,11 @@ const showDot = ref(false)
 
 const { onNodeDoubleClick, fitBounds, fitView } = useVueFlow()
 
-const edgePath = computed(() =>
-  getBezierPath({
-    sourceX: props.sourceX,
-    sourceY: props.sourceY,
-    sourcePosition: props.sourcePosition,
-    targetX: props.targetX,
-    targetY: props.targetY,
-    targetPosition: props.targetPosition,
-  }),
-)
-
 const debouncedFitBounds = useDebounceFn(fitBounds, 1, { maxWait: 1 })
 
 onNodeDoubleClick(({ node }) => {
   const isSource = props.source === node.id
+
   const isTarget = props.target === node.id
 
   if (!showDot.value && (isSource || isTarget)) {
@@ -150,7 +140,8 @@ export default {
 </script>
 
 <template>
-  <path :id="id" ref="curve" :style="style" class="vue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
+  <BezierEdge v-bind="props" />
+
   <Transition name="fade">
     <circle
       v-if="showDot"