From 54e8301ddb3aacffe682ba2176cada02ff3effb0 Mon Sep 17 00:00:00 2001
From: bcakmakoglu <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 11 Feb 2022 13:36:17 +0100
Subject: [PATCH] refactor: use dist pkg for examples

Signed-off-by: bcakmakoglu <78412429+bcakmakoglu@users.noreply.github.com>
---
 examples/Basic/Basic.vue                             |  2 +-
 examples/Basic/BasicOptionsAPI.vue                   |  2 +-
 .../CustomConnectionLine/CustomConnectionLine.vue    |  2 +-
 examples/CustomNode/CustomNode.vue                   |  7 +++----
 examples/DragNDrop/DnD.vue                           | 11 ++++-------
 examples/EdgeTypes/EdgeTypesExample.vue              |  2 +-
 examples/Edges/CustomEdge.vue                        |  2 +-
 examples/Edges/CustomEdge2.vue                       |  2 +-
 examples/Edges/EdgesExample.vue                      |  4 ++--
 examples/Empty/EmptyExample.vue                      |  2 +-
 examples/Hidden/HiddenExample.vue                    |  2 +-
 examples/Interaction/InteractionExample.vue          |  4 +---
 examples/Layouting/LayoutingExample.vue              |  3 +--
 examples/MultiFlows/Flow.vue                         |  2 +-
 examples/Nesting/GroupNode.vue                       |  4 ++--
 examples/Nesting/Nesting.vue                         |  2 +-
 examples/NodeTypeChange/NodeTypeChangeExample.vue    |  2 +-
 examples/Overview/Overview.vue                       |  2 +-
 examples/Provider/ProviderExample.vue                |  2 +-
 examples/Provider/Sidebar.vue                        | 12 ++++++++++--
 examples/RGBFlow/RGBFlow.vue                         |  2 +-
 examples/RGBFlow/RGBNode.vue                         |  4 ++--
 examples/RGBFlow/RGBOutputNode.vue                   |  2 +-
 examples/SaveRestore/Controls.vue                    |  2 +-
 examples/SaveRestore/SaveRestoreExample.vue          |  2 +-
 examples/Stress/StressExample.vue                    |  2 +-
 examples/Switch/SwitchExample.vue                    |  2 +-
 examples/Unidirectional/CustomNode.vue               |  4 ++--
 examples/UpdatableEdge/UpdatableEdgeExample.vue      |  2 +-
 examples/UpdateNode/UpdateNodeExample.vue            |  2 +-
 examples/Validation/CustomInput.vue                  |  2 +-
 examples/Validation/CustomNode.vue                   |  2 +-
 examples/Validation/ValidationExample.vue            |  2 +-
 examples/index.css                                   |  2 --
 examples/main.ts                                     |  5 +++++
 package.json                                         |  1 +
 yarn.lock                                            | 11 +++++++++++
 37 files changed, 68 insertions(+), 52 deletions(-)

diff --git a/examples/Basic/Basic.vue b/examples/Basic/Basic.vue
index 90b13dfc..f0a320fa 100644
--- a/examples/Basic/Basic.vue
+++ b/examples/Basic/Basic.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VueFlow, MiniMap, Controls, Background, isNode, useVueFlow, Elements } from '~/index'
+import { VueFlow, MiniMap, Controls, Background, isNode, useVueFlow, Elements } from '@braks/vue-flow'
 
 const elements = ref<Elements>([
   { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
diff --git a/examples/Basic/BasicOptionsAPI.vue b/examples/Basic/BasicOptionsAPI.vue
index 95aaf77f..08c11db2 100644
--- a/examples/Basic/BasicOptionsAPI.vue
+++ b/examples/Basic/BasicOptionsAPI.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { VueFlow, Background, MiniMap, Controls, Elements, FlowEvents, FlowInstance, isNode, addEdge } from '~/index'
+import { VueFlow, Background, MiniMap, Controls, Elements, FlowEvents, FlowInstance, isNode, addEdge } from '@braks/vue-flow'
 
 export default defineComponent({
   name: 'BasicOptionsAPI',
diff --git a/examples/CustomConnectionLine/CustomConnectionLine.vue b/examples/CustomConnectionLine/CustomConnectionLine.vue
index 8caedcde..cfe87889 100644
--- a/examples/CustomConnectionLine/CustomConnectionLine.vue
+++ b/examples/CustomConnectionLine/CustomConnectionLine.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
+import { VueFlow, Background, BackgroundVariant, Elements } from '@braks/vue-flow'
 import ConnectionLine from './ConnectionLine.vue'
-import { VueFlow, Background, BackgroundVariant, Elements } from '~/index'
 
 const elements = ref<Elements>([
   {
diff --git a/examples/CustomNode/CustomNode.vue b/examples/CustomNode/CustomNode.vue
index 7f5add23..dbb3a8d8 100644
--- a/examples/CustomNode/CustomNode.vue
+++ b/examples/CustomNode/CustomNode.vue
@@ -1,9 +1,7 @@
 <script lang="ts" setup>
-import ColorSelectorNode from './ColorSelectorNode.vue'
 import {
   ConnectionMode,
   Elements,
-  FlowElement,
   isEdge,
   Node,
   Position,
@@ -12,7 +10,8 @@ import {
   VueFlow,
   Controls,
   MiniMap,
-} from '~/index'
+} from '@braks/vue-flow'
+import ColorSelectorNode from './ColorSelectorNode.vue'
 
 const elements = ref<Elements>([])
 const bgColor = ref('#1A192B')
@@ -31,7 +30,7 @@ const nodeColor = (n: Node): string => {
 }
 
 const onChange = (event: Event) => {
-  elements.value.forEach((e: FlowElement) => {
+  elements.value.forEach((e) => {
     if (isEdge(e) || e.id !== '2') return e
     bgColor.value = (event.target as HTMLInputElement).value
   })
diff --git a/examples/DragNDrop/DnD.vue b/examples/DragNDrop/DnD.vue
index 9211f378..ae366ee0 100644
--- a/examples/DragNDrop/DnD.vue
+++ b/examples/DragNDrop/DnD.vue
@@ -1,13 +1,11 @@
 <script lang="ts" setup>
+import { VueFlow, FlowInstance, Node, useVueFlow } from '@braks/vue-flow'
 import Sidebar from './Sidebar.vue'
-import { VueFlow, FlowInstance, Node, useVueFlow } from '~/index'
 
 let id = 0
 const getId = () => `dndnode_${id++}`
 
-const flowInstance = ref<FlowInstance>()
-
-const { onPaneReady, onConnect, nodes, edges, addEdges, addNodes } = useVueFlow({
+const { instance, onConnect, nodes, edges, addEdges, addNodes } = useVueFlow({
   nodes: [
     {
       id: '1',
@@ -17,7 +15,6 @@ const { onPaneReady, onConnect, nodes, edges, addEdges, addNodes } = useVueFlow(
     },
   ],
 })
-onPaneReady((instance) => (flowInstance.value = instance))
 const onDragOver = (event: DragEvent) => {
   event.preventDefault()
   if (event.dataTransfer) {
@@ -28,9 +25,9 @@ const onDragOver = (event: DragEvent) => {
 onConnect((params) => addEdges([params]))
 
 const onDrop = (event: DragEvent) => {
-  if (flowInstance.value) {
+  if (instance.value) {
     const type = event.dataTransfer?.getData('application/vueflow')
-    const position = flowInstance.value.project({ x: event.clientX, y: event.clientY - 40 })
+    const position = instance.value.project({ x: event.clientX, y: event.clientY - 40 })
     const newNode = {
       id: getId(),
       type,
diff --git a/examples/EdgeTypes/EdgeTypesExample.vue b/examples/EdgeTypes/EdgeTypesExample.vue
index 6b9a3406..bc66d162 100644
--- a/examples/EdgeTypes/EdgeTypesExample.vue
+++ b/examples/EdgeTypes/EdgeTypesExample.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
+import { VueFlow, MiniMap, Controls, FlowInstance } from '@braks/vue-flow'
 import { getElements } from './utils'
-import { VueFlow, MiniMap, Controls, FlowInstance } from '~/index'
 
 const onLoad = (flowInstance: FlowInstance) => {
   flowInstance.fitView()
diff --git a/examples/Edges/CustomEdge.vue b/examples/Edges/CustomEdge.vue
index 5babd6d5..a06da057 100644
--- a/examples/Edges/CustomEdge.vue
+++ b/examples/Edges/CustomEdge.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { getBezierPath, getMarkerId, Position, EdgeProps } from '~/index'
+import { getBezierPath, getMarkerId, Position, EdgeProps } from '@braks/vue-flow'
 
 interface CustomEdgeProps<T = { text: string }> extends EdgeProps<T> {
   source: string
diff --git a/examples/Edges/CustomEdge2.vue b/examples/Edges/CustomEdge2.vue
index 97ce44c7..d5666c1c 100644
--- a/examples/Edges/CustomEdge2.vue
+++ b/examples/Edges/CustomEdge2.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { getEdgeCenter, getBezierPath, getMarkerId, Position, EdgeProps, EdgeText } from '~/index'
+import { getEdgeCenter, getBezierPath, getMarkerId, Position, EdgeProps, EdgeText } from '@braks/vue-flow'
 
 interface CustomEdgeProps extends EdgeProps {
   source: string
diff --git a/examples/Edges/EdgesExample.vue b/examples/Edges/EdgesExample.vue
index d3a0bdad..b5873ac5 100644
--- a/examples/Edges/EdgesExample.vue
+++ b/examples/Edges/EdgesExample.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
+import { VueFlow, MiniMap, Controls, Background, MarkerType, useVueFlow, Edge, Node } from '@braks/vue-flow'
 import CustomEdge from './CustomEdge.vue'
 import CustomEdge2 from './CustomEdge2.vue'
 import CustomLabel from './CustomLabel.vue'
-import { VueFlow, MiniMap, Controls, Background, MarkerType, useVueFlow, Edge, Node } from '~/index'
 
 const initialNodes: Node[] = [
   { id: '1', type: 'input', label: 'Input 1', position: { x: 250, y: 0 } },
@@ -71,7 +71,7 @@ const initialEdges: Edge[] = [
   },
 ]
 
-const { nodes, edges } = useVueFlow({
+useVueFlow({
   nodes: initialNodes,
   edges: initialEdges,
 })
diff --git a/examples/Empty/EmptyExample.vue b/examples/Empty/EmptyExample.vue
index ee2096a5..4fbd1c99 100644
--- a/examples/Empty/EmptyExample.vue
+++ b/examples/Empty/EmptyExample.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VueFlow, MiniMap, Controls, Background, BackgroundVariant, Node, useVueFlow } from '~/index'
+import { VueFlow, MiniMap, Controls, Background, BackgroundVariant, Node, useVueFlow } from '@braks/vue-flow'
 
 const { nodes, addNodes, edges, addEdges, onConnect, onPaneReady, onNodeDragStop, dimensions } = useVueFlow()
 
diff --git a/examples/Hidden/HiddenExample.vue b/examples/Hidden/HiddenExample.vue
index e55fb150..c67df2d4 100644
--- a/examples/Hidden/HiddenExample.vue
+++ b/examples/Hidden/HiddenExample.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VueFlow, MiniMap, Controls, useVueFlow } from '~/index'
+import { VueFlow, MiniMap, Controls, useVueFlow } from '@braks/vue-flow'
 
 const isHidden = ref(false)
 
diff --git a/examples/Interaction/InteractionExample.vue b/examples/Interaction/InteractionExample.vue
index 652fda60..c87888e3 100644
--- a/examples/Interaction/InteractionExample.vue
+++ b/examples/Interaction/InteractionExample.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VueFlow, MiniMap, Controls, useVueFlow } from '~/index'
+import { VueFlow, MiniMap, Controls, useVueFlow } from '@braks/vue-flow'
 
 const {
   nodesDraggable,
@@ -18,8 +18,6 @@ const {
   onPaneScroll,
   onPaneContextMenu,
   onMoveEnd,
-  nodes,
-  edges,
   addEdges,
 } = useVueFlow({
   modelValue: [
diff --git a/examples/Layouting/LayoutingExample.vue b/examples/Layouting/LayoutingExample.vue
index e34c0b4b..18f24cc0 100644
--- a/examples/Layouting/LayoutingExample.vue
+++ b/examples/Layouting/LayoutingExample.vue
@@ -1,9 +1,8 @@
 <script lang="ts" setup>
 import dagre from 'dagre'
+import { VueFlow, Controls, ConnectionMode, Elements, isNode, CoordinateExtent, Position } from '@braks/vue-flow'
 import initialElements from './initial-elements'
 
-import { VueFlow, Controls, ConnectionMode, Elements, isNode, CoordinateExtent, Position } from '~/index'
-
 const dagreGraph = new dagre.graphlib.Graph()
 dagreGraph.setDefaultEdgeLabel(() => ({}))
 
diff --git a/examples/MultiFlows/Flow.vue b/examples/MultiFlows/Flow.vue
index 709854f7..4dbddcd2 100644
--- a/examples/MultiFlows/Flow.vue
+++ b/examples/MultiFlows/Flow.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VueFlow, Background, Elements } from '~/index'
+import { VueFlow, Background, Elements } from '@braks/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' },
diff --git a/examples/Nesting/GroupNode.vue b/examples/Nesting/GroupNode.vue
index 6f39f519..b8063535 100644
--- a/examples/Nesting/GroupNode.vue
+++ b/examples/Nesting/GroupNode.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { Handle, Position, getNodesInside, useVueFlow } from '~/index'
-import type { NodeProps } from '~/types/node'
+import { Handle, Position, getNodesInside, useVueFlow } from '@braks/vue-flow'
+import type { NodeProps } from '@braks/vue-flow'
 
 const props = defineProps<NodeProps>()
 const { onNodeDragStop, getNodes, transform } = useVueFlow()
diff --git a/examples/Nesting/Nesting.vue b/examples/Nesting/Nesting.vue
index f25e469c..753c5082 100644
--- a/examples/Nesting/Nesting.vue
+++ b/examples/Nesting/Nesting.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ConnectionMode, useVueFlow, VueFlow, MiniMap, Background, Controls } from '~/index'
+import { ConnectionMode, useVueFlow, VueFlow, MiniMap, Background, Controls } from '@braks/vue-flow'
 
 const { onConnect, nodes, edges, addEdges } = useVueFlow({
   fitViewOnInit: true,
diff --git a/examples/NodeTypeChange/NodeTypeChangeExample.vue b/examples/NodeTypeChange/NodeTypeChangeExample.vue
index 721a41cd..0086a87c 100644
--- a/examples/NodeTypeChange/NodeTypeChangeExample.vue
+++ b/examples/NodeTypeChange/NodeTypeChangeExample.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VueFlow, addEdge, Connection, Edge, Elements, isEdge, FlowInstance, Position } from '~/index'
+import { VueFlow, addEdge, Connection, Edge, Elements, isEdge, FlowInstance, Position } from '@braks/vue-flow'
 
 const initialElements: Elements = [
   {
diff --git a/examples/Overview/Overview.vue b/examples/Overview/Overview.vue
index 9dde98e3..3033d4f4 100644
--- a/examples/Overview/Overview.vue
+++ b/examples/Overview/Overview.vue
@@ -14,7 +14,7 @@ import {
   Edge,
   FlowEvents,
   MarkerType,
-} from '~/index'
+} from '@braks/vue-flow'
 
 const onNodeDragStart = (e: FlowEvents['nodeDragStart']) => console.log('drag start', e)
 const onNodeDrag = (e: FlowEvents['nodeDrag']) => console.log('drag', e)
diff --git a/examples/Provider/ProviderExample.vue b/examples/Provider/ProviderExample.vue
index dfb97cc6..7fca8a0f 100644
--- a/examples/Provider/ProviderExample.vue
+++ b/examples/Provider/ProviderExample.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
+import { VueFlow, Controls, FlowInstance, Elements, ConnectionMode, useVueFlow } from '@braks/vue-flow'
 import Sidebar from './Sidebar.vue'
-import { VueFlow, Controls, FlowInstance, Elements, ConnectionMode, useVueFlow } from '~/index'
 
 const onLoad = (flowInstance: FlowInstance) => console.log('flow loaded:', flowInstance)
 
diff --git a/examples/Provider/Sidebar.vue b/examples/Provider/Sidebar.vue
index 09923670..cc22221f 100644
--- a/examples/Provider/Sidebar.vue
+++ b/examples/Provider/Sidebar.vue
@@ -1,11 +1,17 @@
 <script lang="ts" setup>
-import { useVueFlow } from '~/index'
+import { useVueFlow } from '@braks/vue-flow'
 const { nodesSelectionActive, addSelectedNodes, getNodes, transform } = useVueFlow()
 
 const selectAll = () => {
   addSelectedNodes(getNodes.value)
   nodesSelectionActive.value = true
 }
+
+const transformString = computed(() => [
+  transform.value[0].toFixed(2),
+  transform.value[1].toFixed(2),
+  transform.value[2].toFixed(2),
+])
 </script>
 <template>
   <aside>
@@ -13,7 +19,9 @@ const selectAll = () => {
       This is an example of how you can access the internal state outside of the Vue VueFlow component.
     </div>
     <div class="title">Zoom & pan transform</div>
-    <div class="transform">{{ [transform[0].toFixed(2), transform[1].toFixed(2), transform[2].toFixed(2)] }}</div>
+    <div class="transform">
+      {{ transformString }}
+    </div>
     <div class="title">Nodes</div>
     <div v-for="node of getNodes" :key="node.id">
       Node {{ node.id }} - x: {{ node.position.x.toFixed(2) }}, y: {{ node.position.y.toFixed(2) }}
diff --git a/examples/RGBFlow/RGBFlow.vue b/examples/RGBFlow/RGBFlow.vue
index 7ad7707b..38447755 100644
--- a/examples/RGBFlow/RGBFlow.vue
+++ b/examples/RGBFlow/RGBFlow.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { templateRef } from '@vueuse/core'
+import { Elements, FlowInstance, VueFlow } from '@braks/vue-flow'
 import RGBNode from './RGBNode.vue'
 import RGBOutputNode from './RGBOutputNode.vue'
-import { Elements, FlowInstance, VueFlow } from '~/index'
 
 type Colors = {
   red: number
diff --git a/examples/RGBFlow/RGBNode.vue b/examples/RGBFlow/RGBNode.vue
index 73751344..92dd24f9 100644
--- a/examples/RGBFlow/RGBNode.vue
+++ b/examples/RGBFlow/RGBNode.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Handle, NodeProps, Position } from '~/index'
+import { Handle, NodeProps, Position } from '@braks/vue-flow'
 
 interface RGBNodeProps extends NodeProps {
   data: {
@@ -33,7 +33,7 @@ const onChange = (e: any) => emit('change', { color, val: e.target.value })
     <input
       v-model="props.amount[color]"
       class="slider nodrag"
-      :style="{ '--color': color }"
+      :style="{ '--color': color } as any"
       type="range"
       min="0"
       max="255"
diff --git a/examples/RGBFlow/RGBOutputNode.vue b/examples/RGBFlow/RGBOutputNode.vue
index c5dbfaf1..0bcce7b3 100644
--- a/examples/RGBFlow/RGBOutputNode.vue
+++ b/examples/RGBFlow/RGBOutputNode.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Handle, NodeProps, Position } from '~/index'
+import { Handle, NodeProps, Position } from '@braks/vue-flow'
 
 interface RBGOutputNodeProps extends NodeProps {
   rgb: string
diff --git a/examples/SaveRestore/Controls.vue b/examples/SaveRestore/Controls.vue
index 39d8d5f2..1b2e1ba2 100644
--- a/examples/SaveRestore/Controls.vue
+++ b/examples/SaveRestore/Controls.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useZoomPanHelper, FlowExportObject, Node, useVueFlow } from '~/index'
+import { useZoomPanHelper, FlowExportObject, Node, useVueFlow } from '@braks/vue-flow'
 
 const flowKey = 'example-flow'
 const state = useStorage<FlowExportObject>(flowKey, {
diff --git a/examples/SaveRestore/SaveRestoreExample.vue b/examples/SaveRestore/SaveRestoreExample.vue
index 08d6b9d1..4e881a10 100644
--- a/examples/SaveRestore/SaveRestoreExample.vue
+++ b/examples/SaveRestore/SaveRestoreExample.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
+import { VueFlow, Elements } from '@braks/vue-flow'
 import Controls from './Controls.vue'
-import { VueFlow, Elements } from '~/index'
 
 const initialElements: Elements = [
   { id: '1', label: 'Node 1', position: { x: 100, y: 100 } },
diff --git a/examples/Stress/StressExample.vue b/examples/Stress/StressExample.vue
index 08dfd9e3..5cff1e7b 100644
--- a/examples/Stress/StressExample.vue
+++ b/examples/Stress/StressExample.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
+import { VueFlow, FlowInstance } from '@braks/vue-flow'
 import { getElements } from './utils'
-import { VueFlow, FlowInstance } from '~/index'
 
 const instance = ref<FlowInstance>()
 const onLoad = (flowInstance: FlowInstance) => {
diff --git a/examples/Switch/SwitchExample.vue b/examples/Switch/SwitchExample.vue
index 7ba76b96..4d7c68a8 100644
--- a/examples/Switch/SwitchExample.vue
+++ b/examples/Switch/SwitchExample.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VueFlow, Elements } from '~/index'
+import { VueFlow, Elements } from '@braks/vue-flow'
 
 const elementsA: Elements = [
   { id: '1a', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
diff --git a/examples/Unidirectional/CustomNode.vue b/examples/Unidirectional/CustomNode.vue
index 07f11d94..5f8eca06 100644
--- a/examples/Unidirectional/CustomNode.vue
+++ b/examples/Unidirectional/CustomNode.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import { Handle, Position } from '~/index'
-import type { NodeProps } from '~/types/node'
+import { Handle, Position } from '@braks/vue-flow'
+import type { NodeProps } from '@braks/vue-flow'
 
 const props = defineProps<NodeProps>()
 const nodeStyles: CSSProperties = { padding: '10px 15px', border: '1px solid #ddd' }
diff --git a/examples/UpdatableEdge/UpdatableEdgeExample.vue b/examples/UpdatableEdge/UpdatableEdgeExample.vue
index 93682a0b..2b50537f 100644
--- a/examples/UpdatableEdge/UpdatableEdgeExample.vue
+++ b/examples/UpdatableEdge/UpdatableEdgeExample.vue
@@ -10,7 +10,7 @@ import {
   Edge,
   FlowEvents,
   ConnectionMode,
-} from '~/index'
+} from '@braks/vue-flow'
 
 const initialElements: Elements = [
   {
diff --git a/examples/UpdateNode/UpdateNodeExample.vue b/examples/UpdateNode/UpdateNodeExample.vue
index a1c0f00c..36a7fede 100644
--- a/examples/UpdateNode/UpdateNodeExample.vue
+++ b/examples/UpdateNode/UpdateNodeExample.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VueFlow, Elements } from '~/index'
+import { VueFlow, Elements } from '@braks/vue-flow'
 
 const initialElements: Elements = [
   { id: '1', label: '-', position: { x: 100, y: 100 } },
diff --git a/examples/Validation/CustomInput.vue b/examples/Validation/CustomInput.vue
index d62d3577..97572fec 100644
--- a/examples/Validation/CustomInput.vue
+++ b/examples/Validation/CustomInput.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Position, Handle, ValidConnectionFunc } from '~/index'
+import { Position, Handle, ValidConnectionFunc } from '@braks/vue-flow'
 
 interface CustomInputProps {
   isValidTargetPos: ValidConnectionFunc
diff --git a/examples/Validation/CustomNode.vue b/examples/Validation/CustomNode.vue
index 702d582c..996ee1f2 100644
--- a/examples/Validation/CustomNode.vue
+++ b/examples/Validation/CustomNode.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Position, Handle, NodeProps, ValidConnectionFunc } from '~/index'
+import { Position, Handle, NodeProps, ValidConnectionFunc } from '@braks/vue-flow'
 
 interface CustomNodeProps extends NodeProps {
   id: string
diff --git a/examples/Validation/ValidationExample.vue b/examples/Validation/ValidationExample.vue
index 15d7a84d..49f863cc 100644
--- a/examples/Validation/ValidationExample.vue
+++ b/examples/Validation/ValidationExample.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
+import { VueFlow, Connection, OnConnectStartParams, FlowInstance, useVueFlow } from '@braks/vue-flow'
 import CustomInput from './CustomInput.vue'
 import CustomNode from './CustomNode.vue'
-import { VueFlow, Connection, OnConnectStartParams, FlowInstance, useVueFlow } from '~/index'
 
 const { nodes, edges, addEdges } = useVueFlow({
   nodes: [
diff --git a/examples/index.css b/examples/index.css
index 29341185..3e69d5e0 100644
--- a/examples/index.css
+++ b/examples/index.css
@@ -1,5 +1,3 @@
-@import "../src/theme-default.css";
-
 body {
   color: #111;
   padding: 5px;
diff --git a/examples/main.ts b/examples/main.ts
index 928d4040..74eb0b99 100644
--- a/examples/main.ts
+++ b/examples/main.ts
@@ -3,6 +3,11 @@ import './index.css'
 import { DraggablePlugin } from '@braks/revue-draggable'
 import App from './App.vue'
 import { router } from './router'
+/* import the required styles */
+import '@braks/vue-flow/dist/style.css'
+
+/* import the default theme (optional) */
+import '@braks/vue-flow/dist/theme-default.css'
 
 const app = createApp(App)
 
diff --git a/package.json b/package.json
index a53a67ef..a1e0f239 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "lint": "yarn lint:js"
   },
   "dependencies": {
+    "@braks/vue-flow": "file:./",
     "@braks/revue-draggable": "^0.4.2",
     "@types/d3": "^7.1.0",
     "@vueuse/core": "^7.5.5",
diff --git a/yarn.lock b/yarn.lock
index 608182f3..c7315a5d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -301,6 +301,17 @@
     "@vueuse/core" "^7.0.1"
     vue-demi latest
 
+"@braks/vue-flow@file:.":
+  version "0.4.0-0"
+  dependencies:
+    "@braks/revue-draggable" "^0.4.2"
+    "@braks/vue-flow" "file:../../../Library/Caches/Yarn/v6/npm-@braks-vue-flow-0.4.0-0-82c09b22-99a3-47c5-b788-6368f57f2185-1644498505992/node_modules/@braks/vue-flow"
+    "@types/d3" "^7.1.0"
+    "@vueuse/core" "^7.5.5"
+    d3 "^7.1.1"
+    d3-selection "^3.0.0"
+    d3-zoom "^3.0.0"
+
 "@cypress/mount-utils@1.0.2":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@cypress/mount-utils/-/mount-utils-1.0.2.tgz#afbc4f8c350b7cd86edc5ad0db0cbe1e0181edc8"