docs: move examples dir out of components dir

docs/examples/connectionline/App.vue

@@ -0,0 +1,22 @@
+<script setup>
+import { VueFlow } from '@vue-flow/core'
+import { ref } from 'vue'
+import CustomConnectionLine from './CustomConnectionLine.vue'
+
+const elements = ref([
+  {
+    id: '1',
+    type: 'input',
+    label: 'Node 1',
+    position: { x: 250, y: 5 },
+  },
+])
+</script>
+
+<template>
+  <VueFlow v-model="elements">
+    <template #connection-line="{ sourceX, sourceY, targetX, targetY }">
+      <CustomConnectionLine :source-x="sourceX" :source-y="sourceY" :target-x="targetX" :target-y="targetY" />
+    </template>
+  </VueFlow>
+</template>

docs/examples/connectionline/CustomConnectionLine.vue

@@ -0,0 +1,34 @@
+<script setup>
+defineProps({
+  sourceX: {
+    type: Number,
+    required: true,
+  },
+  sourceY: {
+    type: Number,
+    required: true,
+  },
+  targetX: {
+    type: Number,
+    required: true,
+  },
+  targetY: {
+    type: Number,
+    required: true,
+  },
+})
+</script>
+
+<template>
+  <g>
+    <path
+      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="4" stroke="#6F3381" :stroke-width="1.5" />
+  </g>
+</template>

docs/examples/connectionline/index.ts

@@ -0,0 +1,2 @@
+export { default as CustomConnectionLineApp } from './App.vue?raw'
+export { default as CustomConnectionLine } from './CustomConnectionLine.vue?raw'