docs: move examples dir out of components dir

docs/examples/validation/App.vue

@@ -0,0 +1,50 @@
+<script setup>
+import { VueFlow, addEdge } from '@vue-flow/core'
+import { ref } from 'vue'
+import CustomInput from './CustomInput.vue'
+import CustomNode from './CustomNode.vue'
+
+const elements = ref([
+  { id: '0', type: 'custominput', position: { x: 0, y: 150 }, isValidTargetPos: (connection) => connection.target === 'B' },
+  {
+    id: 'A',
+    type: 'custom',
+    position: { x: 250, y: 0 },
+    isValidSourcePos: () => false,
+  },
+  { id: 'B', type: 'custom', position: { x: 250, y: 150 }, isValidSourcePos: (connection) => connection.target === 'B' },
+  { id: 'C', type: 'custom', position: { x: 250, y: 300 }, isValidSourcePos: (connection) => connection.target === 'B' },
+])
+
+function onConnectStart({ nodeId, handleType }) {
+  return console.log('on connect start', { nodeId, handleType })
+}
+
+function onConnectEnd(event) {
+  return console.log('on connect end', event)
+}
+
+function onConnect(params) {
+  console.log('on connect', params)
+  addEdge(params, elements.value)
+}
+</script>
+
+<template>
+  <VueFlow
+    v-model="elements"
+    fit-view-on-init
+    class="validationflow"
+    @connect="onConnect"
+    @connect-start="onConnectStart"
+    @connect-end="onConnectEnd"
+  >
+    <template #node-custominput="props">
+      <CustomInput v-bind="props" />
+    </template>
+
+    <template #node-custom="props">
+      <CustomNode v-bind="props" />
+    </template>
+  </VueFlow>
+</template>

docs/examples/validation/CustomInput.vue

@@ -0,0 +1,21 @@
+<script setup>
+import { Handle, Position } from '@vue-flow/core'
+
+const props = defineProps({
+  isValidTargetPos: {
+    type: Function,
+    required: false,
+  },
+})
+</script>
+
+<script>
+export default {
+  inheritAttrs: false,
+}
+</script>
+
+<template>
+  <div>Only connectable with B</div>
+  <Handle type="source" :position="Position.Right" :is-valid-connection="props.isValidTargetPos" />
+</template>

docs/examples/validation/CustomNode.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { Handle, Position } from '@vue-flow/core'
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  isValidSourcePos: {
+    type: Function,
+    required: false,
+  },
+})
+</script>
+
+<script>
+export default {
+  inheritAttrs: false,
+}
+</script>
+
+<template>
+  <Handle type="target" :position="Position.Left" :is-valid-connection="props.isValidSourcePos" />
+  <div>{{ props.id }}</div>
+</template>

docs/examples/validation/index.ts

@@ -0,0 +1,4 @@
+export { default as ValidationApp } from './App.vue?raw'
+export { default as ValidationCustomInput } from './CustomInput.vue?raw'
+export { default as ValidationCustomNode } from './CustomNode.vue?raw'
+export { default as ValidationCSS } from './style.css?inline'

docs/examples/validation/style.css

@@ -0,0 +1,31 @@
+.validationflow .vue-flow__node {
+  width: 150px;
+  border-radius: 5px;
+  padding: 10px;
+  color: #555;
+  border: 1px solid #ddd;
+  text-align: center;
+  font-size: 12px;
+}
+
+.validationflow .vue-flow__node-customnode {
+  background: #e6e6e9;
+  border: 1px solid #ddd;
+}
+
+.validationflow .vue-flow__node-custominput .vue-flow__handle {
+  background: #e6e6e9;
+}
+
+.validationflow .vue-flow__node-custominput {
+  background: #fff;
+
+}
+
+.validationflow .vue-flow__handle-connecting {
+  background: #ff6060;
+}
+
+.validationflow .vue-flow__handle-valid {
+  background: #55dd99;
+}