examples: move current examples into examples/vite

2022-06-03 14:14:05 +02:00
parent c6bda81c5e
commit 8dd7c79700
68 changed files with 94 additions and 91 deletions
--- a/docs/src/guide/getting-started.md
+++ b/docs/src/guide/getting-started.md
@@ -79,14 +79,14 @@ A basic setup would look like this:
 <CodeGroup>
  <CodeGroupItem title="Composition API" active>

-@[code vue:no-line-numbers](../../../examples/src/Basic/Basic.vue)
+@[code vue:no-line-numbers](../../../examples/vite/src/Basic/Basic.vue)

  </CodeGroupItem>


  <CodeGroupItem title="Options API">

-@[code vue:no-line-numbers](../../../examples/src/Basic/BasicOptionsAPI.vue)
+@[code vue:no-line-numbers](../../../examples/vite/src/Basic/BasicOptionsAPI.vue)

  </CodeGroupItem>
 </CodeGroup>
--- a/examples/vite/.eslintrc.js
+++ b/examples/vite/.eslintrc.js
--- a/examples/vite/.gitignore
+++ b/examples/vite/.gitignore
--- a/examples/vite/App.vue
+++ b/examples/vite/App.vue
--- a/examples/vite/Header.vue
+++ b/examples/vite/Header.vue
--- a/examples/vite/index.css
+++ b/examples/vite/index.css
@@ -1,8 +1,8 @@
 /* import the required styles */
-@import '@braks/vue-flow/dist/style.css';
+@import '../node_modules/@braks/vue-flow/dist/style.css';

 /* import the default theme (optional) */
-@import '@braks/vue-flow/dist/theme-default.css';
+@import '../node_modules/@braks/vue-flow/dist/theme-default.css';

 body {
  color: #111;
--- a/examples/vite/index.html
+++ b/examples/vite/index.html
@@ -8,6 +8,6 @@
 </head>
 <body>
 <div id="root"></div>
-<script type="module" src="./main.ts"></script>
+<script type="module" src="main.ts"></script>
 </body>
 </html>
--- a/examples/vite/main.ts
+++ b/examples/vite/main.ts
--- a/examples/vite/package.json
+++ b/examples/vite/package.json
@@ -3,10 +3,10 @@
  "version": "0.0.0",
  "private": true,
  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "serve": "vite serve",
-    "lint": "eslint --ext \".js,.jsx,.ts,.tsx\" --fix --ignore-path .gitignore ."
+    "dev": "../node_modules/.bin/vite",
+    "build": "../node_modules/.bin/vite build",
+    "serve": "../node_modules/.bin/vite serve",
+    "lint": "eslint --ext \\\".js,.jsx,.ts,.tsx\\\" --fix --ignore-path .gitignore ."
  },
  "dependencies": {
    "@braks/vue-flow": "workspace:*"
--- a/examples/vite/router.ts
+++ b/examples/vite/router.ts
--- a/examples/vite/src/Basic/Basic.vue
+++ b/examples/vite/src/Basic/Basic.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Elements } from '@braks/vue-flow'
-import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@braks/vue-flow'
+import type { Elements } from '../../packages/vue-flow'
+import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '../../packages/vue-flow'

 const elements = ref<Elements>([
  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
--- a/examples/vite/src/Basic/BasicOptionsAPI.vue
+++ b/examples/vite/src/Basic/BasicOptionsAPI.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
-import type { Elements, FlowEvents, FlowInstance } from '@braks/vue-flow'
-import { Background, Controls, MiniMap, VueFlow, addEdge, isNode } from '@braks/vue-flow'
+import type { Elements, FlowEvents, FlowInstance } from '../../packages/vue-flow'
+import { Background, Controls, MiniMap, VueFlow, addEdge, isNode } from '../../packages/vue-flow'

 export default defineComponent({
  name: 'BasicOptionsAPI',
--- a/examples/vite/src/Basic/ResizableNode.vue
+++ b/examples/vite/src/Basic/ResizableNode.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Position, ValidConnectionFunc } from '@braks/vue-flow'
-import { Handle } from '@braks/vue-flow'
+import type { Position, ValidConnectionFunc } from '../../packages/vue-flow'
+import { Handle } from '../../packages/vue-flow'

 interface Props {
  id: string
--- a/examples/vite/src/CustomConnectionLine/ConnectionLine.vue
+++ b/examples/vite/src/CustomConnectionLine/ConnectionLine.vue
--- a/examples/vite/src/CustomConnectionLine/CustomConnectionLine.vue
+++ b/examples/vite/src/CustomConnectionLine/CustomConnectionLine.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Elements } from '@braks/vue-flow'
-import { Background, BackgroundVariant, VueFlow } from '@braks/vue-flow'
+import type { Elements } from '../../packages/vue-flow'
+import { Background, BackgroundVariant, VueFlow } from '../../packages/vue-flow'
 import ConnectionLine from './ConnectionLine.vue'

 const elements = ref<Elements>([
--- a/examples/vite/src/CustomNode/ColorSelectorNode.vue
+++ b/examples/vite/src/CustomNode/ColorSelectorNode.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { CSSProperties } from 'vue'
-import type { Connection, Edge, NodeProps } from '@braks/vue-flow'
-import { Handle, Position } from '@braks/vue-flow'
+import type { Connection, Edge, NodeProps } from '../../packages/vue-flow'
+import { Handle, Position } from '../../packages/vue-flow'

 interface ColorSelectorNodeProps extends NodeProps {
  data: {
--- a/examples/vite/src/CustomNode/CustomNode.vue
+++ b/examples/vite/src/CustomNode/CustomNode.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Elements, Node, SnapGrid } from '@braks/vue-flow'
-import { ConnectionMode, Controls, MiniMap, Position, VueFlow, isEdge, useVueFlow } from '@braks/vue-flow'
+import type { Elements, Node, SnapGrid } from '../../packages/vue-flow'
+import { ConnectionMode, Controls, MiniMap, Position, VueFlow, isEdge, useVueFlow } from '../../packages/vue-flow'
 import ColorSelectorNode from './ColorSelectorNode.vue'

 const elements = ref<Elements>([])
--- a/examples/vite/src/DragNDrop/DnD.vue
+++ b/examples/vite/src/DragNDrop/DnD.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Node } from '@braks/vue-flow'
-import { VueFlow, useVueFlow } from '@braks/vue-flow'
+import type { Node } from '../../packages/vue-flow'
+import { VueFlow, useVueFlow } from '../../packages/vue-flow'
 import Sidebar from './Sidebar.vue'

 let id = 0
--- a/examples/vite/src/DragNDrop/Sidebar.vue
+++ b/examples/vite/src/DragNDrop/Sidebar.vue
--- a/examples/vite/src/DragNDrop/dnd.css
+++ b/examples/vite/src/DragNDrop/dnd.css
--- a/examples/vite/src/EdgeTypes/EdgeTypesExample.vue
+++ b/examples/vite/src/EdgeTypes/EdgeTypesExample.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { FlowInstance } from '@braks/vue-flow'
-import { Controls, MiniMap, VueFlow } from '@braks/vue-flow'
+import type { FlowInstance } from '../../packages/vue-flow'
+import { Controls, MiniMap, VueFlow } from '../../packages/vue-flow'
 import { getElements } from './utils'

 const onLoad = (flowInstance: FlowInstance) => {
--- a/examples/vite/src/EdgeTypes/utils.ts
+++ b/examples/vite/src/EdgeTypes/utils.ts
@@ -1,5 +1,5 @@
-import type { Elements } from '@braks/vue-flow'
-import { Position } from '@braks/vue-flow'
+import type { Elements } from '../../packages/vue-flow'
+import { Position } from '../../packages/vue-flow'

 const nodeWidth = 80
 const nodeGapWidth = nodeWidth * 2
--- a/examples/vite/src/Edges/CustomEdge.vue
+++ b/examples/vite/src/Edges/CustomEdge.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { EdgeProps, Position } from '@braks/vue-flow'
-import { getBezierPath, getEdgeCenter, useVueFlow } from '@braks/vue-flow'
+import type { EdgeProps, Position } from '../../packages/vue-flow'
+import { getBezierPath, getEdgeCenter, useVueFlow } from '../../packages/vue-flow'

 interface CustomEdgeProps<T = any> extends EdgeProps<T> {
  id: string
--- a/examples/vite/src/Edges/CustomEdge2.vue
+++ b/examples/vite/src/Edges/CustomEdge2.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { EdgeProps, Position } from '@braks/vue-flow'
-import { EdgeText, getBezierPath, getEdgeCenter, getMarkerId } from '@braks/vue-flow'
+import type { EdgeProps, Position } from '../../packages/vue-flow'
+import { EdgeText, getBezierPath, getEdgeCenter, getMarkerId } from '../../packages/vue-flow'

 interface CustomEdgeProps extends EdgeProps {
  source: string
--- a/examples/vite/src/Edges/CustomLabel.vue
+++ b/examples/vite/src/Edges/CustomLabel.vue
--- a/examples/vite/src/Edges/EdgesExample.vue
+++ b/examples/vite/src/Edges/EdgesExample.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Edge, Node } from '@braks/vue-flow'
-import { Background, Controls, MarkerType, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
+import type { Edge, Node } from '../../packages/vue-flow'
+import { Background, Controls, MarkerType, MiniMap, VueFlow, useVueFlow } from '../../packages/vue-flow'
 import CustomEdge from './CustomEdge.vue'
 import CustomEdge2 from './CustomEdge2.vue'
 import CustomLabel from './CustomLabel.vue'
--- a/examples/vite/src/Empty/EmptyExample.vue
+++ b/examples/vite/src/Empty/EmptyExample.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Node } from '@braks/vue-flow'
-import { Background, BackgroundVariant, Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
+import type { Node } from '../../packages/vue-flow'
+import { Background, BackgroundVariant, Controls, MiniMap, VueFlow, useVueFlow } from '../../packages/vue-flow'

 const { nodes, addNodes, edges, addEdges, onConnect, onPaneReady, onNodeDragStop, dimensions } = useVueFlow()

--- a/examples/vite/src/FloatingEdges/FloatingConnectionLine.vue
+++ b/examples/vite/src/FloatingEdges/FloatingConnectionLine.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { GraphNode, Position } from '@braks/vue-flow'
-import { getBezierPath } from '@braks/vue-flow'
+import type { GraphNode, Position } from '../../packages/vue-flow'
+import { getBezierPath } from '../../packages/vue-flow'
 import { getEdgeParams } from './floating-edge-utils'

 interface FloatingConnectionLineProps {
--- a/examples/vite/src/FloatingEdges/FloatingEdge.vue
+++ b/examples/vite/src/FloatingEdges/FloatingEdge.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { CSSProperties } from 'vue'
-import type { EdgeProps, GraphNode, MarkerType } from '@braks/vue-flow'
-import { getBezierPath } from '@braks/vue-flow'
+import type { EdgeProps, GraphNode, MarkerType } from '../../packages/vue-flow'
+import { getBezierPath } from '../../packages/vue-flow'
 import { getEdgeParams } from './floating-edge-utils'

 interface FloatingEdgeProps extends EdgeProps {
--- a/examples/vite/src/FloatingEdges/FloatingEdges.vue
+++ b/examples/vite/src/FloatingEdges/FloatingEdges.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Background, Controls, MarkerType, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
+import { Background, Controls, MarkerType, MiniMap, VueFlow, useVueFlow } from '../../packages/vue-flow'
 import FloatingEdge from './FloatingEdge.vue'
 import FloatingConnectionLine from './FloatingConnectionLine.vue'
 import { createElements } from './floating-edge-utils'
--- a/examples/vite/src/FloatingEdges/floating-edge-utils.ts
+++ b/examples/vite/src/FloatingEdges/floating-edge-utils.ts
@@ -1,5 +1,5 @@
-import type { Edge, GraphNode, XYPosition } from '@braks/vue-flow'
-import { MarkerType, Position } from '@braks/vue-flow'
+import type { Edge, GraphNode, XYPosition } from '../../packages/vue-flow'
+import { MarkerType, Position } from '../../packages/vue-flow'

 // this helper function returns the intersection point
 // of the line between the center of the intersectionNode and the target node
--- a/examples/vite/src/Hidden/HiddenExample.vue
+++ b/examples/vite/src/Hidden/HiddenExample.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
+import { Controls, MiniMap, VueFlow, useVueFlow } from '../../packages/vue-flow'

 const isHidden = ref(false)

--- a/examples/vite/src/Interaction/InteractionExample.vue
+++ b/examples/vite/src/Interaction/InteractionExample.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
+import { Controls, MiniMap, VueFlow, useVueFlow } from '../../packages/vue-flow'

 const {
  nodesDraggable,
--- a/examples/vite/src/Layouting/LayoutingExample.vue
+++ b/examples/vite/src/Layouting/LayoutingExample.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import dagre from 'dagre'
-import type { CoordinateExtent, Elements } from '@braks/vue-flow'
-import { ConnectionMode, Controls, Position, VueFlow, isNode } from '@braks/vue-flow'
+import type { CoordinateExtent, Elements } from '../../packages/vue-flow'
+import { ConnectionMode, Controls, Position, VueFlow, isNode } from '../../packages/vue-flow'
 import initialElements from './initial-elements'

 const dagreGraph = new dagre.graphlib.Graph()
--- a/examples/vite/src/Layouting/initial-elements.ts
+++ b/examples/vite/src/Layouting/initial-elements.ts
@@ -1,4 +1,4 @@
-import type { Elements, XYPosition } from '@braks/vue-flow'
+import type { Elements, XYPosition } from '../../packages/vue-flow'

 const position: XYPosition = { x: 0, y: 0 }

--- a/examples/vite/src/Layouting/layouting.css
+++ b/examples/vite/src/Layouting/layouting.css
--- a/examples/vite/src/MultiFlows/Flow.vue
+++ b/examples/vite/src/MultiFlows/Flow.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Elements } from '@braks/vue-flow'
-import { Background, VueFlow } from '@braks/vue-flow'
+import type { Elements } from '../../packages/vue-flow'
+import { Background, VueFlow } from '../../packages/vue-flow'
 const initialElements: Elements = [
  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
  { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },
--- a/examples/vite/src/MultiFlows/MultiFlowsExample.vue
+++ b/examples/vite/src/MultiFlows/MultiFlowsExample.vue
--- a/examples/vite/src/MultiFlows/multiflows.css
+++ b/examples/vite/src/MultiFlows/multiflows.css
--- a/examples/vite/src/Nesting/GroupNode.vue
+++ b/examples/vite/src/Nesting/GroupNode.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { Handle, Position, getNodesInside, useVueFlow } from '@braks/vue-flow'
-import type { NodeProps } from '@braks/vue-flow'
+import { Handle, Position, getNodesInside, useVueFlow } from '../../packages/vue-flow'
+import type { NodeProps } from '../../packages/vue-flow'

 const props = defineProps<NodeProps>()
 const { onNodeDragStop, getNodes, viewport } = useVueFlow()
--- a/examples/vite/src/Nesting/Nesting.vue
+++ b/examples/vite/src/Nesting/Nesting.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Background, ConnectionMode, Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
+import { Background, ConnectionMode, Controls, MiniMap, VueFlow, useVueFlow } from '../../packages/vue-flow'

 const { onConnect, nodes, edges, addEdges, addNodes } = useVueFlow({
  fitViewOnInit: true,
--- a/examples/vite/src/NodeTypeChange/NodeTypeChangeExample.vue
+++ b/examples/vite/src/NodeTypeChange/NodeTypeChangeExample.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Connection, Edge, Elements, FlowInstance } from '@braks/vue-flow'
-import { Position, VueFlow, addEdge, isEdge } from '@braks/vue-flow'
+import type { Connection, Edge, Elements, FlowInstance } from '../../packages/vue-flow'
+import { Position, VueFlow, addEdge, isEdge } from '../../packages/vue-flow'

 const initialElements: Elements = [
  {
--- a/examples/vite/src/Overview/Overview.vue
+++ b/examples/vite/src/Overview/Overview.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Connection, Edge, Elements, FlowEvents, FlowInstance, FlowTransform, Node, SnapGrid } from '@braks/vue-flow'
-import { Background, Controls, MarkerType, MiniMap, VueFlow, addEdge } from '@braks/vue-flow'
+import type { Connection, Edge, Elements, FlowEvents, FlowInstance, FlowTransform, Node, SnapGrid } from '../../packages/vue-flow'
+import { Background, Controls, MarkerType, MiniMap, VueFlow, addEdge } from '../../packages/vue-flow'

 const onNodeDragStart = (e: FlowEvents['nodeDragStart']) => console.log('drag start', e)
 const onNodeDrag = (e: FlowEvents['nodeDrag']) => console.log('drag', e)
--- a/examples/vite/src/Provider/ProviderExample.vue
+++ b/examples/vite/src/Provider/ProviderExample.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Elements, FlowInstance } from '@braks/vue-flow'
-import { ConnectionMode, Controls, VueFlow, useVueFlow } from '@braks/vue-flow'
+import type { Elements, FlowInstance } from '../../packages/vue-flow'
+import { ConnectionMode, Controls, VueFlow, useVueFlow } from '../../packages/vue-flow'
 import Sidebar from './Sidebar.vue'

 const onLoad = (flowInstance: FlowInstance) => console.log('flow loaded:', flowInstance)
--- a/examples/vite/src/Provider/Sidebar.vue
+++ b/examples/vite/src/Provider/Sidebar.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useVueFlow } from '@braks/vue-flow'
+import { useVueFlow } from '../../packages/vue-flow'
 const { nodesSelectionActive, addSelectedNodes, getNodes, viewport } = useVueFlow()

 const selectAll = () => {
--- a/examples/vite/src/Provider/provider.css
+++ b/examples/vite/src/Provider/provider.css
--- a/examples/vite/src/RGBFlow/RGBFlow.vue
+++ b/examples/vite/src/RGBFlow/RGBFlow.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { templateRef } from '@vueuse/core'
-import type { Elements, FlowInstance } from '@braks/vue-flow'
-import { VueFlow } from '@braks/vue-flow'
+import type { Elements, FlowInstance } from '../../packages/vue-flow'
+import { VueFlow } from '../../packages/vue-flow'
 import RGBNode from './RGBNode.vue'
 import RGBOutputNode from './RGBOutputNode.vue'

--- a/examples/vite/src/RGBFlow/RGBNode.vue
+++ b/examples/vite/src/RGBFlow/RGBNode.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { CSSProperties } from 'vue'
-import type { NodeProps } from '@braks/vue-flow'
-import { Handle, Position } from '@braks/vue-flow'
+import type { NodeProps } from '../../packages/vue-flow'
+import { Handle, Position } from '../../packages/vue-flow'

 interface RGBNodeProps extends NodeProps {
  data: {
--- a/examples/vite/src/RGBFlow/RGBOutputNode.vue
+++ b/examples/vite/src/RGBFlow/RGBOutputNode.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { NodeProps } from '@braks/vue-flow'
-import { Handle, Position } from '@braks/vue-flow'
+import type { NodeProps } from '../../packages/vue-flow'
+import { Handle, Position } from '../../packages/vue-flow'

 interface RBGOutputNodeProps extends NodeProps {
  rgb: string
--- a/examples/vite/src/SaveRestore/Controls.vue
+++ b/examples/vite/src/SaveRestore/Controls.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { FlowExportObject, Node } from '@braks/vue-flow'
-import { useVueFlow, useZoomPanHelper } from '@braks/vue-flow'
+import type { FlowExportObject, Node } from '../../packages/vue-flow'
+import { useVueFlow, useZoomPanHelper } from '../../packages/vue-flow'

 const flowKey = 'example-flow'
 const state = useStorage<FlowExportObject>(flowKey, {
--- a/examples/vite/src/SaveRestore/SaveRestoreExample.vue
+++ b/examples/vite/src/SaveRestore/SaveRestoreExample.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Elements } from '@braks/vue-flow'
-import { VueFlow } from '@braks/vue-flow'
+import type { Elements } from '../../packages/vue-flow'
+import { VueFlow } from '../../packages/vue-flow'
 import Controls from './Controls.vue'

 const initialElements: Elements = [
--- a/examples/vite/src/SaveRestore/save.css
+++ b/examples/vite/src/SaveRestore/save.css
--- a/examples/vite/src/Stress/StressExample.vue
+++ b/examples/vite/src/Stress/StressExample.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VueFlow, useVueFlow } from '@braks/vue-flow'
+import { VueFlow, useVueFlow } from '../../packages/vue-flow'
 import { getElements } from './utils'

 const { nodes, edges } = getElements(10, 10)
--- a/examples/vite/src/Stress/utils.ts
+++ b/examples/vite/src/Stress/utils.ts
@@ -1,4 +1,4 @@
-import type { Edge, Node } from '@braks/vue-flow'
+import type { Edge, Node } from '../../packages/vue-flow'

 export function getElements(xElements = 10, yElements = 10) {
  const initialNodes: Node[] = []
--- a/examples/vite/src/Switch/SwitchExample.vue
+++ b/examples/vite/src/Switch/SwitchExample.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Elements } from '@braks/vue-flow'
-import { VueFlow } from '@braks/vue-flow'
+import type { Elements } from '../../packages/vue-flow'
+import { VueFlow } from '../../packages/vue-flow'

 const elementsA: Elements = [
  { id: '1a', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
--- a/examples/vite/src/Unidirectional/CustomNode.vue
+++ b/examples/vite/src/Unidirectional/CustomNode.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { CSSProperties } from 'vue'
-import { Handle, Position } from '@braks/vue-flow'
+import { Handle, Position } from '../../packages/vue-flow'

 interface Props {
  id: string
--- a/examples/vite/src/Unidirectional/UnidirectionalExample.vue
+++ b/examples/vite/src/Unidirectional/UnidirectionalExample.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Elements, Node } from '@braks/vue-flow'
-import { ConnectionLineType, ConnectionMode, MarkerType, VueFlow, useZoomPanHelper } from '@braks/vue-flow'
+import type { Elements, Node } from '../../packages/vue-flow'
+import { ConnectionLineType, ConnectionMode, MarkerType, VueFlow, useZoomPanHelper } from '../../packages/vue-flow'
 import CustomNode from './CustomNode.vue'

 const initialElements: Elements = [
--- a/examples/vite/src/UpdatableEdge/UpdatableEdgeExample.vue
+++ b/examples/vite/src/UpdatableEdge/UpdatableEdgeExample.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Connection, Edge, Elements, FlowEvents, FlowInstance } from '@braks/vue-flow'
-import { ConnectionMode, Controls, VueFlow, addEdge, updateEdge } from '@braks/vue-flow'
+import type { Connection, Edge, Elements, FlowEvents, FlowInstance } from '../../packages/vue-flow'
+import { ConnectionMode, Controls, VueFlow, addEdge, updateEdge } from '../../packages/vue-flow'

 const initialElements: Elements = [
  {
--- a/examples/vite/src/UpdateNode/UpdateNodeExample.vue
+++ b/examples/vite/src/UpdateNode/UpdateNodeExample.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Elements } from '@braks/vue-flow'
-import { VueFlow } from '@braks/vue-flow'
+import type { Elements } from '../../packages/vue-flow'
+import { VueFlow } from '../../packages/vue-flow'

 const initialElements: Elements = [
  { id: '1', label: '-', position: { x: 100, y: 100 } },
--- a/examples/vite/src/UpdateNode/updatenode.css
+++ b/examples/vite/src/UpdateNode/updatenode.css
--- a/examples/vite/src/Validation/CustomInput.vue
+++ b/examples/vite/src/Validation/CustomInput.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { ValidConnectionFunc } from '@braks/vue-flow'
-import { Handle, Position } from '@braks/vue-flow'
+import type { ValidConnectionFunc } from '../../packages/vue-flow'
+import { Handle, Position } from '../../packages/vue-flow'

 interface CustomInputProps {
  isValidTargetPos: ValidConnectionFunc
--- a/examples/vite/src/Validation/CustomNode.vue
+++ b/examples/vite/src/Validation/CustomNode.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { NodeProps, ValidConnectionFunc } from '@braks/vue-flow'
-import { Handle, Position } from '@braks/vue-flow'
+import type { NodeProps, ValidConnectionFunc } from '../../packages/vue-flow'
+import { Handle, Position } from '../../packages/vue-flow'

 interface CustomNodeProps extends NodeProps {
  id: string
--- a/examples/vite/src/Validation/ValidationExample.vue
+++ b/examples/vite/src/Validation/ValidationExample.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { Connection, FlowInstance, OnConnectStartParams } from '@braks/vue-flow'
-import { VueFlow, useVueFlow } from '@braks/vue-flow'
+import type { Connection, FlowInstance, OnConnectStartParams } from '../../packages/vue-flow'
+import { VueFlow, useVueFlow } from '../../packages/vue-flow'
 import CustomInput from './CustomInput.vue'
 import CustomNode from './CustomNode.vue'

--- a/examples/vite/src/Validation/validation.css
+++ b/examples/vite/src/Validation/validation.css
--- a/examples/vite/tsconfig.json
+++ b/examples/vite/tsconfig.json
@@ -1,6 +1,6 @@
 {
  "compilerOptions": {
-    "baseUrl": ".",
+    "baseUrl": "..",
    "module": "ESNext",
    "target": "es2017",
    "lib": ["DOM", "ESNext"],
@@ -20,6 +20,7 @@
      "~/*": ["../package/src/*"]
    }
  },
-  "exclude": ["node_modules", "dist"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "exclude": [
+    "../node_modules", "dist"],
+  "references": [{ "path": "./tsconfig.node.json"}]
 }
--- a/examples/vite/tsconfig.node.json
+++ b/examples/vite/tsconfig.node.json
@@ -4,5 +4,7 @@
    "module": "esnext",
    "moduleResolution": "node"
  },
-  "include": ["vite.config.ts"]
+  "include": [
+    "vite.config.ts"
+  ]
 }
--- a/examples/vite/vite.config.ts
+++ b/examples/vite/vite.config.ts
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,5 +1,5 @@
 packages:
  - packages/*
-  - examples
+  - examples/*
  - e2e
  - docs