docs: move examples dir out of components dir

docs/examples/dnd/App.vue

@@ -0,0 +1,74 @@
+<script setup>
+import { VueFlow, useVueFlow } from '@vue-flow/core'
+import { nextTick, watch } from 'vue'
+import Sidebar from './Sidebar.vue'
+
+let id = 0
+function getId() {
+  return `dndnode_${id++}`
+}
+
+const { findNode, onConnect, addEdges, addNodes, project, vueFlowRef } = useVueFlow({
+  nodes: [
+    {
+      id: '1',
+      type: 'input',
+      label: 'input node',
+      position: { x: 250, y: 25 },
+    },
+  ],
+})
+
+function onDragOver(event) {
+  event.preventDefault()
+
+  if (event.dataTransfer) {
+    event.dataTransfer.dropEffect = 'move'
+  }
+}
+
+onConnect((params) => addEdges(params))
+
+function onDrop(event) {
+  const type = event.dataTransfer?.getData('application/vueflow')
+
+  const { left, top } = vueFlowRef.value.getBoundingClientRect()
+
+  const position = project({
+    x: event.clientX - left,
+    y: event.clientY - top,
+  })
+
+  const newNode = {
+    id: getId(),
+    type,
+    position,
+    label: `${type} node`,
+  }
+
+  addNodes([newNode])
+
+  // align node position after drop, so it's centered to the mouse
+  nextTick(() => {
+    const node = findNode(newNode.id)
+    const stop = watch(
+      () => node.dimensions,
+      (dimensions) => {
+        if (dimensions.width > 0 && dimensions.height > 0) {
+          node.position = { x: node.position.x - node.dimensions.width / 2, y: node.position.y - node.dimensions.height / 2 }
+          stop()
+        }
+      },
+      { deep: true, flush: 'post' },
+    )
+  })
+}
+</script>
+
+<template>
+  <div class="dndflow" @drop="onDrop">
+    <VueFlow @dragover="onDragOver" />
+
+    <Sidebar />
+  </div>
+</template>

docs/examples/dnd/Sidebar.vue

@@ -0,0 +1,22 @@
+<script setup>
+function onDragStart(event, nodeType) {
+  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.</div>
+
+    <div class="nodes">
+      <div class="vue-flow__node-input" :draggable="true" @dragstart="onDragStart($event, 'input')">Input Node</div>
+
+      <div class="vue-flow__node-default" :draggable="true" @dragstart="onDragStart($event, 'default')">Default Node</div>
+
+      <div class="vue-flow__node-output" :draggable="true" @dragstart="onDragStart($event, 'output')">Output Node</div>
+    </div>
+  </aside>
+</template>

docs/examples/dnd/index.ts

@@ -0,0 +1,3 @@
+export { default as DndApp } from './App.vue?raw'
+export { default as DndSidebar } from './Sidebar.vue?raw'
+export { default as DndCSS } from './style.css?inline'

docs/examples/dnd/style.css

@@ -0,0 +1,51 @@
+.dndflow {
+  flex-direction: column;
+  display: flex;
+  height: 100%;
+}
+
+.dndflow aside {
+  color: white;
+  font-weight: 700;
+  border-right: 1px solid #eee;
+  padding: 15px 10px;
+  font-size: 12px;
+  background: rgba(16, 185, 129, 0.75);
+  -webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
+  box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
+}
+
+.dndflow aside .nodes > * {
+  margin-bottom: 10px;
+  cursor: grab;
+  font-weight: 500;
+  -webkit-box-shadow: 5px 5px 10px 2px rgba(0,0,0,0.25);
+  box-shadow: 5px 5px 10px 2px rgba(0,0,0,0.25);
+}
+
+.dndflow aside .description {
+  margin-bottom: 10px;
+}
+
+.dndflow .vue-flow-wrapper {
+  flex-grow: 1;
+  height: 100%;
+}
+
+@media screen and (min-width: 640px) {
+  .dndflow {
+    flex-direction: row;
+  }
+
+  .dndflow aside {
+    min-width: 25%;
+  }
+}
+
+@media screen and (max-width: 639px) {
+  .dndflow aside .nodes {
+    display: flex;
+    flex-direction: row;
+    gap: 5px;
+  }
+}