update(examples): move examples into src dir

examples/src/Validation/CustomInput.vue

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

examples/src/Validation/CustomNode.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import { Position, Handle, NodeProps, ValidConnectionFunc } from '@braks/vue-flow'
+
+interface CustomNodeProps extends NodeProps {
+  id: string
+  isValidSourcePos: ValidConnectionFunc
+}
+
+const props = defineProps<CustomNodeProps>()
+</script>
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>
+<template>
+  <Handle type="target" :position="Position.Left" :is-valid-connection="props.isValidSourcePos" />
+  <div>{{ props.id }}</div>
+</template>

examples/src/Validation/ValidationExample.vue

@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import CustomInput from './CustomInput.vue'
+import CustomNode from './CustomNode.vue'
+import { VueFlow, Connection, OnConnectStartParams, FlowInstance, useVueFlow } from '@braks/vue-flow'
+
+const { nodes, edges, addEdges } = useVueFlow({
+  nodes: [
+    { id: '0', type: 'custominput', position: { x: 0, y: 150 }, isValidTargetPos: (connection) => connection.target === 'B' },
+    {
+      id: 'A',
+      type: 'customnode',
+      position: { x: 250, y: 0 },
+      isValidSourcePos: () => false,
+    },
+    { id: 'B', type: 'customnode', position: { x: 250, y: 150 }, isValidSourcePos: (connection) => connection.target === 'B' },
+    { id: 'C', type: 'customnode', position: { x: 250, y: 300 }, isValidSourcePos: (connection) => connection.target === 'B' },
+  ],
+})
+const onLoad = (flowInstance: FlowInstance) => flowInstance.fitView()
+const onConnectStart = ({ nodeId, handleType }: OnConnectStartParams) => console.log('on connect start', { nodeId, handleType })
+const onConnectStop = (event: MouseEvent) => console.log('on connect stop', event)
+const onConnectEnd = (event: MouseEvent) => console.log('on connect end', event)
+
+const onConnect = (params: Connection) => {
+  console.log('on connect', params)
+  addEdges([params])
+}
+</script>
+<template>
+  <VueFlow
+    :select-nodes-on-drag="false"
+    class="validationflow"
+    @connect="onConnect"
+    @pane-ready="onLoad"
+    @connect-start="onConnectStart"
+    @connect-stop="onConnectStop"
+    @connect-end="onConnectEnd"
+  >
+    <template #node-custominput="props">
+      <CustomInput v-bind="props" />
+    </template>
+    <template #node-customnode="props">
+      <CustomNode v-bind="props" />
+    </template>
+  </VueFlow>
+</template>
+<style>
+@import 'validation.css';
+</style>

examples/src/Validation/validation.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;
+}
+
+.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;
+}