update(examples): move examples into src dir

examples/src/DragNDrop/DnD.vue

@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import Sidebar from './Sidebar.vue'
+import { VueFlow, FlowInstance, Node, useVueFlow } from '@braks/vue-flow'
+
+let id = 0
+const getId = () => `dndnode_${id++}`
+
+const { instance, onConnect, nodes, edges, addEdges, addNodes } = useVueFlow({
+  nodes: [
+    {
+      id: '1',
+      type: 'input',
+      label: 'input node',
+      position: { x: 250, y: 5 },
+    },
+  ],
+})
+const onDragOver = (event: DragEvent) => {
+  event.preventDefault()
+  if (event.dataTransfer) {
+    event.dataTransfer.dropEffect = 'move'
+  }
+}
+
+onConnect((params) => addEdges([params]))
+
+const onDrop = (event: DragEvent) => {
+  if (instance.value) {
+    const type = event.dataTransfer?.getData('application/vueflow')
+    const position = instance.value.project({ x: event.clientX, y: event.clientY - 40 })
+    const newNode = {
+      id: getId(),
+      type,
+      position,
+      label: `${type} node`,
+    } as Node
+    addNodes([newNode])
+  }
+}
+</script>
+<template>
+  <div class="dndflow" @drop="onDrop">
+    <VueFlow @dragover="onDragOver" />
+    <Sidebar />
+  </div>
+</template>
+<style>
+@import 'dnd.css';
+</style>

examples/src/DragNDrop/Sidebar.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+const onDragStart = (event: DragEvent, nodeType: string) => {
+  if (event.dataTransfer) {
+    event.dataTransfer.setData('application/vueflow', nodeType)
+    event.dataTransfer.effectAllowed = 'move'
+  }
+}
+</script>
+<template>
+  <aside>
+    <div class="description">You can drag these nodes to the pane on the left.</div>
+    <div class="vue-flow__node-input" :draggable="true" @dragstart="(event: DragEvent) => onDragStart(event, 'input')">
+      Input Node
+    </div>
+    <div class="vue-flow__node-default" :draggable="true" @dragstart="(event: DragEvent) => onDragStart(event, 'default')">
+      Default Node
+    </div>
+    <div class="vue-flow__node-output" :draggable="true" @dragstart="(event: DragEvent) => onDragStart(event, 'output')">
+      Output Node
+    </div>
+  </aside>
+</template>

examples/src/DragNDrop/dnd.css

@@ -0,0 +1,37 @@
+.dndflow {
+  flex-direction: column;
+  display: flex;
+  height: 100%;
+}
+
+.dndflow aside {
+  border-right: 1px solid #eee;
+  padding: 15px 10px;
+  font-size: 12px;
+  background: #fcfcfc;
+}
+
+.dndflow aside > * {
+  margin-bottom: 10px;
+  cursor: grab;
+}
+
+.dndflow aside .description {
+  margin-bottom: 10px;
+}
+
+.dndflow .vue-flow-wrapper {
+  flex-grow: 1;
+  height: 100%;
+}
+
+@media screen and (min-width: 768px) {
+  .dndflow {
+    flex-direction: row;
+  }
+
+  .dndflow aside {
+    width: 20%;
+    max-width: 180px;
+  }
+}