chore(docs): remove horizontal example

docs/examples/horizontal/App.vue

@@ -1,32 +0,0 @@
-<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

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

docs/examples/horizontal/initial-elements.js

@@ -1,38 +0,0 @@
-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' },
-]

docs/examples/index.ts

@@ -12,7 +12,6 @@ import { DndApp, DndBackground, DndCSS, DndScript, DndSidebar } from './dnd'
 import { HiddenApp } from './hidden'
 import { InteractionApp, InteractionCSS, InteractionControls } from './interaction'
 import { MultiApp, MultiCSS, MultiFlow } from './multi'
-import { HorizontalApp, HorizontalElements } from './horizontal'
 import { TeleportApp, TeleportCSS, TeleportSidebar, TeleportableNode, TeleportableUseTransition } from './teleport'
 import { TransitionApp, TransitionCSS, TransitionEdge } from './transition'
 import { IntersectionApp, IntersectionCSS, IntersectionElements } from './intersection'
@@ -91,10 +90,6 @@ export const exampleImports = {
     'Flow.vue': MultiFlow,
     'style.css': MultiCSS,
   },
-  horizontal: {
-    'App.vue': HorizontalApp,
-    'initial-elements.js': HorizontalElements,
-  },
   teleport: {
     'App.vue': TeleportApp,
     'Sidebar.vue': TeleportSidebar,

docs/src/.vitepress/config.mts

@@ -201,7 +201,6 @@ export default defineConfigWithTheme<DefaultTheme.Config>({
             { text: 'Save & Restore', link: '/examples/save' },
             { text: 'Drag & Drop', link: '/examples/dnd' },
             { text: 'Hide/Show', link: '/examples/hidden' },
-            { text: 'Horizontal Flow', link: '/examples/horizontal' },
             { text: 'Interactions', link: '/examples/interaction' },
             { text: 'Intersection', link: '/examples/intersection' },
             { text: 'Teleport', link: '/examples/teleport' },

docs/src/examples/empty.md

@@ -1,8 +0,0 @@
-# Empty
-
-Similar to the drag and drop example, we can also add nodes to an empty graph on a button click, 
-which triggers a push into our elements / nodes array.
-
-<div class="mt-6">
-  <Repl example="empty"></Repl>
-</div>

docs/src/examples/horizontal.md

@@ -1,10 +0,0 @@
-# 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">
-  <Repl example="horizontal"></Repl>
-</div>