docs: update examples

docs/components/examples/connectionline/App.vue

@@ -1,5 +1,4 @@
 <script setup>
-import { Background, BackgroundVariant, Controls, MiniMap } from '@vue-flow/additional-components'
 import { VueFlow } from '@vue-flow/core'
 import { ref } from 'vue'
 import CustomConnectionLine from './CustomConnectionLine.vue'
@@ -16,10 +15,8 @@ const elements = ref([
 
 <template>
   <VueFlow v-model="elements">
-    <template #connection-line="props">
-      <CustomConnectionLine v-bind="props" />
+    <template #connection-line="{ sourceX, sourceY, targetX, targetY }">
+      <CustomConnectionLine :source-x="sourceX" :source-y="sourceY" :target-x="targetX" :target-y="targetY" />
     </template>
-
-    <Background :variant="BackgroundVariant.Lines" />
   </VueFlow>
 </template>

docs/components/examples/connectionline/CustomConnectionLine.vue

@@ -22,12 +22,13 @@ const props = defineProps({
 <template>
   <g>
     <path
-      class="animated"
+      class="vue-flow__connection animated"
       fill="none"
       stroke="#6F3381"
       :stroke-width="2.5"
       :d="`M${sourceX},${sourceY} C ${sourceX} ${targetY} ${sourceX} ${targetY} ${targetX},${targetY}`"
     />
-    <circle :cx="targetX" :cy="targetY" fill="#fff" :r="5" stroke="#6F3381" :stroke-width="1.5" />
+
+    <circle :cx="targetX" :cy="targetY" fill="#fff" :r="4" stroke="#6F3381" :stroke-width="1.5" />
   </g>
 </template>