chore(docs): update validation example

Author: bcakmakoglu

docs/examples/validation/App.vue

@@ -9,38 +9,42 @@ const { addEdges } = useVueFlow()
 const nodes = ref([
   {
     id: '0',
-    type: 'custominput',
+    type: 'input',
     position: { x: 0, y: 150 },
-    isValidTargetPos: (connection) => connection.target === 'B',
+    // only target `B` is valid for this node
+    data: { validTarget: 'B', validSource: '0' },
   },
   {
     id: 'A',
     type: 'custom',
     position: { x: 250, y: 0 },
-    isValidSourcePos: () => false,
+    // no valid connections can be made for this node
+    data: {},
   },
   {
     id: 'B',
     type: 'custom',
     position: { x: 250, y: 150 },
-    isValidSourcePos: (connection) => connection.target === 'B',
+    // only source `0` is valid for this node
+    data: { validTarget: 'B', validSource: '0' },
   },
   {
     id: 'C',
     type: 'custom',
     position: { x: 250, y: 300 },
-    isValidSourcePos: (connection) => connection.target === 'B',
+    // no valid connections can be made for this node
+    data: {},
   },
 ])
 
 const edges = ref([])
 
 function onConnectStart({ nodeId, handleType }) {
-  return console.log('on connect start', { nodeId, handleType })
+  console.log('on connect start', { nodeId, handleType })
 }
 
 function onConnectEnd(event) {
-  return console.log('on connect end', event)
+  console.log('on connect end', event)
 }
 
 function onConnect(params) {
@@ -59,12 +63,12 @@ function onConnect(params) {
     @connect-start="onConnectStart"
     @connect-end="onConnectEnd"
   >
-    <template #node-custominput="props">
-      <CustomInput v-bind="props" />
+    <template #node-input="props">
+      <CustomInput :data="props.data" />
     </template>
 
     <template #node-custom="props">
-      <CustomNode v-bind="props" />
+      <CustomNode :id="props.id" :data="props.data" />
     </template>
   </VueFlow>
 </template>

docs/examples/validation/CustomInput.vue

@@ -2,11 +2,15 @@
 import { Handle, Position } from '@vue-flow/core'
 
 const props = defineProps({
-  isValidTargetPos: {
-    type: Function,
-    required: false,
+  data: {
+    type: Object,
+    required: true,
   },
 })
+
+function isValidConnection(connection) {
+  return connection.target === props.data.validTarget && connection.source === props.data.validSource
+}
 </script>
 
 <script>
@@ -16,6 +20,6 @@ export default {
 </script>
 
 <template>
-  <div>Only connectable with B</div>
-  <Handle type="source" :position="Position.Right" :is-valid-connection="props.isValidTargetPos" />
+  <div>Only connectable with {{ data.validTarget }}</div>
+  <Handle type="source" :position="Position.Right" :is-valid-connection="isValidConnection" />
 </template>

docs/examples/validation/CustomNode.vue

@@ -6,11 +6,15 @@ const props = defineProps({
     type: String,
     required: true,
   },
-  isValidSourcePos: {
-    type: Function,
-    required: false,
+  data: {
+    type: Object,
+    required: true,
   },
 })
+
+function isValidConnection(connection) {
+  return connection.target === props.data.validTarget && connection.source === props.data.validSource
+}
 </script>
 
 <script>
@@ -20,6 +24,6 @@ export default {
 </script>
 
 <template>
-  <Handle type="target" :position="Position.Left" :is-valid-connection="props.isValidSourcePos" />
+  <Handle type="target" :position="Position.Left" :is-valid-connection="isValidConnection" />
   <div>{{ props.id }}</div>
 </template>

docs/src/examples/edges/validation.md

@@ -9,10 +9,14 @@ This function will be applied to *all* connections in the flow (even existing on
 ## Using a handle in a custom node
 
 ```vue
-<div>
-  <!-- ... -->
-  <Handle type="source" :is-valid-connection="isValidConnection"/>
-</div>
+<script setup>
+import { Handle, Position } from '@vue-flow/core'
+</script>
+
+<template>
+  <Handle type="source" :position="Position.Right" />
+  <Handle type="target" :position="Position.Left" />
+</template>
 ```
 
 <div class="mt-6">