docs: add horizontal layout example

docs/components/examples/horizontal/App.vue

@@ -0,0 +1,27 @@
+<script setup>
+import { Background, Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
+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-zoom="1.5"
+    :min-zoom="0.2"
+    :max-zoom="4"
+    :fit-view-on-init="true"
+  >
+    <Background pattern-color="#aaa" gap="8" />
+    <MiniMap />
+    <Controls />
+  </VueFlow>
+</template>

docs/components/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/components/examples/horizontal/initial-elements.js

@@ -0,0 +1,38 @@
+import { MarkerType, Position } from '@braks/vue-flow'
+
+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' },
+]

docs/components/examples/index.ts

@@ -13,6 +13,7 @@ import { EmptyApp } from './empty'
 import { HiddenApp } from './hidden'
 import { InteractionApp, InteractionCSS, InteractionControls } from './interaction'
 import { MultiApp, MultiCSS, MultiFlow } from './multi'
+import { HorizontalApp, HorizontalElements } from './horizontal'
 
 export const exampleImports = {
   basic: {
@@ -84,4 +85,8 @@ export const exampleImports = {
     'Flow.vue': MultiFlow,
     'style.css': MultiCSS,
   },
+  horizontal: {
+    'App.vue': HorizontalApp,
+    'initial-elements.js': HorizontalElements,
+  },
 }

docs/src/.vuepress/config.ts

@@ -114,6 +114,7 @@ export default defineUserConfig<DefaultThemeOptions>({
             '/examples/hidden',
             '/examples/interaction',
             '/examples/multi',
+            '/examples/horizontal',
             '/examples/pinia',
             '/examples/stress',
           ],

docs/src/examples/horizontal.md

@@ -0,0 +1,19 @@
+---
+pageClass: examples
+
+---
+
+# Horizontal Layout
+
+Vue Flow doesn't require you to use vertical layouts.
+You can use horizontal layouts with the default node types as well.
+
+You can define where source or target handle positions are with the `sourcePosition` or `targetPosition` properties of nodes.
+
+<div class="mt-6">
+  <client-only>
+    <Suspense>
+      <Repl example="horizontal"></Repl>
+    </Suspense>
+  </client-only>
+</div>