docs: move examples into nodes and edges dir

docs/src/examples/edges/connection-line.md

@@ -0,0 +1,19 @@
+---
+pageClass: examples
+
+---
+
+# Custom Connection Line
+
+If the default connection lines aren't to your liking, or you want to expand on the existing 
+functionality you can use your own custom connection line.
+
+Simply pass a component in the designated template slot, and you're good to go.
+
+<div class="mt-6">
+  <client-only>
+    <Suspense>
+      <Repl example="connectionline"></Repl>
+    </Suspense>
+  </client-only>
+</div>

docs/src/examples/edges/index.md

@@ -0,0 +1,17 @@
+---
+pageClass: examples
+
+---
+
+# Edges
+
+Vue Flow comes with four pre-defined edge types - bezier-, step-, smoothstep and straight-edges.
+In addition to the built-in edge types you can create your own custom edges. You can find more information on edge types [here](/guide/edge.html#default-edge-types).
+
+<div class="mt-6">
+  <client-only>
+    <Suspense>
+      <Repl example="edges"></Repl>
+    </Suspense>
+  </client-only>
+</div>

docs/src/examples/edges/updatable-edge.md

@@ -0,0 +1,22 @@
+---
+pageClass: examples
+
+---
+
+# Updatable Edge
+
+Existing edges can be updated, meaning their source / target position can be changed interactively.
+
+Update an edge by simply dragging it from one node to another at the edge-anchor (handles).
+
+You can enable updating edges either globally by passing the `edgesUpdatable` prop or you can enable it
+for specific edges by using the `updatable` attribute.
+
+
+<div class="mt-6">
+  <client-only>
+    <Suspense>
+      <Repl example="updateEdge"></Repl>
+    </Suspense>
+  </client-only>
+</div>

docs/src/examples/edges/validation.md

@@ -0,0 +1,39 @@
+---
+pageClass: examples
+
+---
+
+# Connection Validation
+
+Connections can be validated before edges are created and nodes get connected. 
+
+## Using a handle in a custom node
+```vue:no-line-numbers
+<div>
+  [ ... ]
+
+  <Handle type="source" :is-valid-connection="isValidConnection" />
+</div>
+```
+
+## Passing as node option
+```ts
+const nodes = [
+  {
+    id: '1',
+    label: 'Node 1',
+    position: { x: 0, y: 0 },
+    isValidSourcePos: (connection) => {
+      return connection.target === '2'
+    },
+  },
+]
+```
+
+<div class="mt-6">
+  <client-only>
+    <Suspense>
+      <Repl example="validation"></Repl>
+    </Suspense>
+  </client-only>
+</div>