docs: update examples

docs/components/examples/edges/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
+import { Background } from '@vue-flow/additional-components'
 import { MarkerType, VueFlow } from '@vue-flow/core'
 import { h, ref } from 'vue'
 import CustomEdge from './CustomEdge.vue'
@@ -65,11 +65,11 @@ const elements = ref([
     <template #edge-custom="props">
       <CustomEdge v-bind="props" />
     </template>
+
     <template #edge-custom2="props">
       <CustomEdge2 v-bind="props" />
     </template>
-    <MiniMap />
-    <Controls />
+
     <Background />
   </VueFlow>
 </template>

docs/components/examples/edges/CustomEdge.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { EdgeLabelRenderer, getBezierPath, useVueFlow } from '@vue-flow/core'
+import { BaseEdge, EdgeLabelRenderer, getBezierPath, useVueFlow } from '@vue-flow/core'
 import { computed } from 'vue'
 
 const props = defineProps({
@@ -57,7 +57,8 @@ export default {
 </script>
 
 <template>
-  <path :id="id" :style="style" class="vue-flow__edge-path" :d="path[0]" :marker-end="markerEnd" />
+  <!-- You can use the `BaseEdge` component to create your own custom edge more easily -->
+  <BaseEdge :id="id" :style="style" :path="path[0]" :marker-end="markerEnd" />
 
   <!-- Use the `EdgeLabelRenderer` to escape the SVG world of edges and render your own custom label in a `<div>` ctx -->
   <EdgeLabelRenderer>

docs/components/examples/edges/CustomEdge2.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { EdgeText, getBezierPath } from '@vue-flow/core'
+import { BaseEdge, getBezierPath } from '@vue-flow/core'
 import { computed } from 'vue'
 
 const props = defineProps({
@@ -63,12 +63,14 @@ export default {
 </script>
 
 <template>
-  <path :id="id" class="vue-flow__edge-path" :d="path[0]" :marker-end="markerEnd" />
-
-  <EdgeText
-    :x="path[1]"
-    :y="path[2]"
+  <BaseEdge
+    :id="id"
+    :style="style"
+    :path="path[0]"
+    :marker-end="markerEnd"
     :label="data.text"
+    :label-x="path[1]"
+    :label-y="path[2]"
     :label-style="{ fill: 'white' }"
     :label-show-bg="true"
     :label-bg-style="{ fill: 'red' }"