docs: move examples dir out of components dir

docs/examples/horizontal/App.vue

@@ -0,0 +1,32 @@
+<script setup>
+import { VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background } from '@vue-flow/background'
+import { Controls } from '@vue-flow/controls'
+import { MiniMap } from '@vue-flow/minimap'
+import { ref } from 'vue'
+import { initialElements } from './initial-elements.js'
+
+const { onConnect, addEdges } = useVueFlow()
+
+const elements = ref(initialElements)
+
+onConnect((params) => addEdges(params))
+</script>
+
+<template>
+  <VueFlow
+    v-model="elements"
+    class="basicflow"
+    :default-edge-options="{ type: 'smoothstep' }"
+    :default-viewport="{ zoom: 1.5 }"
+    :min-zoom="0.2"
+    :max-zoom="4"
+    fit-view-on-init
+  >
+    <Background pattern-color="#aaa" gap="8" />
+
+    <MiniMap />
+
+    <Controls />
+  </VueFlow>
+</template>

docs/examples/horizontal/index.ts

@@ -0,0 +1,2 @@
+export { default as HorizontalApp } from './App.vue?raw'
+export { default as HorizontalElements } from './initial-elements.js?raw'

docs/examples/horizontal/initial-elements.js

@@ -0,0 +1,38 @@
+import { MarkerType, Position } from '@vue-flow/core'
+
+export const initialElements = [
+  {
+    id: '1',
+    type: 'input',
+    label: 'Node 1',
+    position: { x: 0, y: 50 },
+    sourcePosition: Position.Right,
+  },
+  {
+    id: '2',
+    type: 'output',
+    label: 'Node 2',
+    position: { x: 250, y: 0 },
+    targetPosition: Position.Left,
+  },
+  { id: '3', label: 'Node 3', position: { x: 250, y: 100 }, sourcePosition: Position.Right, targetPosition: Position.Left },
+  { id: '4', label: 'Node 4', position: { x: 500, y: 150 }, sourcePosition: Position.Right, targetPosition: Position.Left },
+  {
+    id: '5',
+    type: 'output',
+    label: 'Node 5',
+    position: { x: 750, y: 50 },
+    sourcePosition: Position.Right,
+    targetPosition: Position.Left,
+  },
+  { id: 'e1-2', source: '1', target: '2', animated: true },
+  { id: 'e1-3', source: '1', target: '3', markerEnd: MarkerType.Arrow },
+  {
+    id: 'e4-5',
+    source: '4',
+    target: '5',
+    style: { stroke: 'orange' },
+    labelBgStyle: { fill: 'orange' },
+  },
+  { id: 'e3-4', source: '3', target: '4' },
+]