chore: lint files

README.md

@@ -57,9 +57,6 @@ A simple setup could look like this:
 
 ```vue
 <!-- Flowchart.vue -->
-<template>
-  <VueFlow v-model="elements"></VueFlow>
-</template>
 <script setup>
 import { VueFlow } from '@braks/vue-flow'
 
@@ -81,6 +78,10 @@ const elements = ref([
   },
 ])
 </script>
+
+<template>
+  <VueFlow v-model="elements"></VueFlow>
+</template>
 ```
 
 ### __Make sure to import the necessary styles:__

docs/components/home/Acknowledgement.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import Heart from '~icons/mdi/heart'
 </script>
+
 <template>
   <div id="acknowledgement" class="w-full bg-black text-white border-y-1 border-white">
     <div class="max-w-11/12 md:max-w-6/12 m-auto py-4 md:(pb-12 pt-6) text-center">

docs/components/home/Banner.vue

@@ -6,6 +6,7 @@ import Download from '~icons/carbon/download'
 const githubData = await $fetch('https://api.github.com/repos/bcakmakoglu/vue-flow?page=$i&per_page=100')
 const npmData = await $fetch('https://api.npmjs.org/downloads/point/last-month/@braks/vue-flow')
 </script>
+
 <template>
   <div class="w-full bg-black text-white border-b-1 border-white">
     <div class="max-w-full md:max-w-11/12 m-auto py-4 md:py-12 <md:(dark:border-t-1 border-white)">

docs/components/home/Features.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { reactive, watch } from 'vue'
-import { useBreakpoints, breakpointsTailwind } from '@vueuse/core'
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
-import { FlowInstance } from '@braks/vue-flow'
+import type { FlowInstance } from '@braks/vue-flow'
 
 const breakpoints = useBreakpoints(breakpointsTailwind)
 
@@ -22,6 +22,7 @@ watch([breakpoints.sm, breakpoints.md, breakpoints.lg, breakpoints.xl, breakpoin
   }, 5),
 )
 </script>
+
 <template>
   <div class="w-full dark:(bg-black text-white)">
     <div
@@ -42,6 +43,7 @@ watch([breakpoints.sm, breakpoints.md, breakpoints.lg, breakpoints.xl, breakpoin
     </div>
   </div>
 </template>
+
 <style>
 .button {
   @apply z-1 shadow-lg transition-colors duration-200 text-white font-semibold text-lg mt-4 px-5 py-3 rounded-lg bg-green-500;

docs/components/home/Home.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useBreakpoints, breakpointsTailwind } from '@vueuse/core'
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 import Blobity from 'blobity'
 import Intro from './flows/Intro.vue'
 
@@ -29,11 +29,13 @@ onMounted(() => {
   }
 })
 </script>
+
 <template>
   <div class="relative h-[90vh] md:h-[75vh]">
     <Intro />
   </div>
 </template>
+
 <style>
 button:focus {
   outline: none;

docs/components/home/edges/Custom.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
-import { MarkerType, getBezierPath, Position, EdgeProps } from '@braks/vue-flow'
+import type { EdgeProps, MarkerType, Position } from '@braks/vue-flow'
+import { getBezierPath } from '@braks/vue-flow'
 
 interface CustomEdgeProps extends EdgeProps {
   source: string
@@ -33,11 +34,13 @@ const edgePath = computed(() =>
   }),
 )
 </script>
+
 <script lang="ts">
 export default {
   inheritAttrs: false,
 }
 </script>
+
 <template>
   <path
     :id="props.id"
@@ -47,12 +50,7 @@ export default {
     :marker-end="props.markerEnd"
   />
   <text>
-    <textPath
+    <textPath :href="`#${props.id}`" :style="{ fontSize: '1.25rem', fill: 'white' }" startOffset="50%" text-anchor="middle">
-      :href="`#${props.id}`"
-      :style="{ fontSize: '1.25rem', fill: 'white' }"
-      startOffset="50%"
-      text-anchor="middle"
-    >
       {{ props.data?.text }}
     </textPath>
   </text>

docs/components/home/flows/Additional.vue

@@ -1,6 +1,9 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { Position, Elements, VueFlow, Controls, MiniMap, Background, useVueFlow } from '@braks/vue-flow'
+import type { Elements } from '@braks/vue-flow'
+import { Background, Controls, MiniMap, Position, VueFlow, useVueFlow } from '@braks/vue-flow'
+
+const emit = defineEmits(['pane'])
 
 const elements = ref<Elements>([
   {
@@ -77,8 +80,6 @@ const elements = ref<Elements>([
   { id: 'e6-8', type: 'step', source: '7', target: '8', animated: true },
 ])
 
-const emit = defineEmits(['pane'])
-
 const { onPaneReady } = useVueFlow({
   modelValue: elements.value,
   zoomOnScroll: false,
@@ -87,6 +88,7 @@ const { onPaneReady } = useVueFlow({
 
 onPaneReady((i) => emit('pane', i))
 </script>
+
 <template>
   <div class="w-full h-[300px] md:min-h-[400px] shadow-xl rounded-xl font-mono uppercase overflow-hidden border-2">
     <VueFlow>

docs/components/home/flows/Intro.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useVueFlow, VueFlow, Handle, Position } from '@braks/vue-flow'
+import { Handle, Position, VueFlow, useVueFlow } from '@braks/vue-flow'
 import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 import BoxNode from '../nodes/Box.vue'
 import Heart from '~icons/mdi/heart'
@@ -170,6 +170,7 @@ const scrollTo = () => {
   }
 }
 </script>
+
 <template>
   <VueFlow ref="el" class="dark:bg-black bg-white transition-colors duration-200 ease-in-out">
     <template #node-box="props">
@@ -208,6 +209,7 @@ const scrollTo = () => {
     </template>
   </VueFlow>
 </template>
+
 <style>
 .intro {
   @apply cursor-pointer

docs/components/home/flows/Nested.vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import { ConnectionMode, useVueFlow, VueFlow, Background, Controls } from '@braks/vue-flow'
+import { Background, ConnectionMode, Controls, VueFlow, useVueFlow } from '@braks/vue-flow'
 import { breakpointsTailwind } from '@vueuse/core'
 
-const breakpoints = useBreakpoints(breakpointsTailwind)
-
 const emit = defineEmits(['pane'])
 
+const breakpoints = useBreakpoints(breakpointsTailwind)
+
 const nodeClasses = ['!normal-case font-semibold !text-white', '!border-1', 'shadow-md'].join(' ')
 const childClasses = `${nodeClasses} !bg-green-500/70 !border-white`
 
@@ -55,6 +55,7 @@ watch(
 
 onPaneReady((i) => emit('pane', i))
 </script>
+
 <template>
   <div class="md:max-w-1/3 flex flex-col justify-center <md:pt-12">
     <div class="flex flex-col gap-2 items-center md:items-start">
@@ -76,6 +77,7 @@ onPaneReady((i) => emit('pane', i))
     </VueFlow>
   </div>
 </template>
+
 <style>
 .nested .vue-flow__handle {
   opacity: 0;

docs/components/home/flows/RGB.vue

@@ -1,20 +1,21 @@
 <script lang="ts" setup>
-import { BackgroundVariant, VueFlow, Background, Controls, MiniMap, MiniMapNodeFunc, useVueFlow } from '@braks/vue-flow'
+import type { MiniMapNodeFunc } from '@braks/vue-flow'
+import { Background, BackgroundVariant, Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
 import { breakpointsTailwind } from '@vueuse/core'
 import CustomEdge from '../edges/Custom.vue'
 import RGBNode from '../nodes/Input.vue'
 import RGBOutputNode from '../nodes/Output.vue'
 
+const emit = defineEmits(['pane'])
+
 const breakpoints = useBreakpoints(breakpointsTailwind)
 
-type Colors = {
+interface Colors {
   red: number
   green: number
   blue: number
 }
 
-const emit = defineEmits(['pane'])
-
 const { onPaneReady, getNode, panOnDrag } = useVueFlow({
   id: 'rgb-flow',
   nodes: [
@@ -73,6 +74,7 @@ const nodeColor: MiniMapNodeFunc = (node) => {
   return ''
 }
 </script>
+
 <template>
   <div
     ref="el"
@@ -103,7 +105,8 @@ const nodeColor: MiniMapNodeFunc = (node) => {
     <div class="flex flex-col gap-2 items-center md:items-start">
       <h1>Customizable</h1>
       <p>
-        You can expand on the existing features by using your own custom nodes and edges and implement any design and functionality you want.
+        You can expand on the existing features by using your own custom nodes and edges and implement any design and
+        functionality you want.
       </p>
       <router-link class="button max-w-max" to="/guide/">Documentation</router-link>
     </div>

docs/components/home/nodes/Box.vue

@@ -3,6 +3,7 @@ import { Handle, Position } from '@braks/vue-flow'
 
 const emit = defineEmits(['next'])
 </script>
+
 <template>
   <div class="px-4 py-2 shadow-lg rounded-md border-2 border-solid border-black">
     <slot />

docs/components/home/nodes/Input.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { Handle, NodeProps, Position } from '@braks/vue-flow'
+import type { NodeProps } from '@braks/vue-flow'
+import { Handle, Position } from '@braks/vue-flow'
 
 interface RGBNodeProps extends NodeProps {
   data: {
@@ -27,6 +28,7 @@ switch (props.data?.color) {
 }
 const onChange = (e: any) => emit('change', { color, val: e.target.value })
 </script>
+
 <template>
   <div class="px-4 py-2 bg-white rounded-md border-2 border-solid border-black text-left transform scale-75 lg:scale-100">
     <div class="text-md" :style="{ color }">{{ `${color} Amount`.toUpperCase() }}</div>

docs/components/home/nodes/Output.vue

@@ -1,15 +1,19 @@
 <script lang="ts" setup>
-import { Handle, NodeProps, Position } from "@braks/vue-flow";
+import type { NodeProps } from '@braks/vue-flow'
+import { Handle, Position } from '@braks/vue-flow'
 
 interface RBGOutputNodeProps extends NodeProps {
-  rgb: string;
+  rgb: string
 }
 
-const props = defineProps<RBGOutputNodeProps>();
+const props = defineProps<RBGOutputNodeProps>()
 </script>
+
 <template>
-  <div :style="{ backgroundColor: props.rgb }"
+  <div
-       class="px-6 py-2 rounded-xl text-white text-center min-w-[220px] border-2 border-white">
+    :style="{ backgroundColor: props.rgb }"
+    class="px-6 py-2 rounded-xl text-white text-center min-w-[220px] border-2 border-white"
+  >
     <div class="text-xl font-bold">Color Output</div>
     <div class="font-semibold">{{ props.rgb }}</div>
     <Handle type="target" :position="Position.Left" />

docs/src/examples/validation.md

@@ -22,10 +22,10 @@ const nodes = [
   {
     id: '1',
     label: 'Node 1',
-    position: { x: 0 , y: 0 },
+    position: { x: 0, y: 0 },
     isValidSourcePos: (connection) => {
       return connection.target === '2'
-    }
+    },
   },
 ]
 ```

docs/src/guide/composables.md

@@ -61,16 +61,16 @@ This is how the default handle component is built:
 
 ```vue
 <script lang="ts" setup>
-import { useHandle, useVueFlow, Position, NodeId } from '@braks/vue-flow'
+import { NodeId, useHandle, useVueFlow } from '@braks/vue-flow'
-import type { HandleProps } from '@braks/vue-flow'
+import type { HandleProps, Position } from '@braks/vue-flow'
 
-const { id, hooks, connectionStartHandle } = useVueFlow()
 const props = withDefaults(defineProps<HandleProps>(), {
   type: 'source',
   position: 'top' as Position,
   connectable: true,
 })
 
+const { id, hooks, connectionStartHandle } = useVueFlow()
 const nodeId = inject(NodeId, '')
 
 const { onMouseDown, onClick } = useHandle()
@@ -80,21 +80,22 @@ const onMouseDownHandler = (event: MouseEvent) =>
   )
 const onClickHandler = (event: MouseEvent) => onClick(event, props.id ?? null, nodeId, props.type, props.isValidConnection)
 </script>
+
 <script lang="ts">
 export default {
   name: 'Handle',
 }
 </script>
+
 <template>
   <div
     :data-handleid="props.id"
     :data-nodeid="nodeId"
     :data-handlepos="props.position"
+    class="vue-flow__handle nodrag"
     :class="[
-      'vue-flow__handle',
       `vue-flow__handle-${props.position}`,
       `vue-flow__handle-${id}`,
-      'nodrag',
       {
         source: props.type !== 'target',
         target: props.type === 'target',

docs/tsconfig.json

@@ -3,10 +3,7 @@
     "baseUrl": ".",
     "module": "ESNext",
     "target": "es2017",
-    "lib": [
+    "lib": ["DOM", "ESNext"],
-      "DOM",
-      "ESNext"
-    ],
     "noEmit": true,
     "declaration": false,
     "strict": true,
@@ -18,20 +15,9 @@
     "noUnusedLocals": false,
     "strictNullChecks": true,
     "forceConsistentCasingInFileNames": true,
-    "types": [
+    "types": ["vite/client", "@types/node", "unplugin-icons/types/vue"]
-      "vite/client",
-      "@types/node",
-      "unplugin-icons/types/vue"
-    ]
   },
-  "include": [
+  "include": ["components", "src", "src/.vuepress/auto-imports.d.ts"],
-    "components",
+  "exclude": ["node_modules", "dist"],
-    "src",
-    "src/.vuepress/auto-imports.d.ts"
-  ],
-  "exclude": [
-    "node_modules",
-    "dist"
-  ],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

e2e/cypress/integration/1-store/setElements.spec.ts

@@ -1,4 +1,5 @@
-import { useVueFlow, isEdge, isNode, Edge, Node, SetState, VueFlowStore } from '@braks/vue-flow'
+import type { Edge, Node, SetState, VueFlowStore } from '@braks/vue-flow'
+import { isEdge, isNode, useVueFlow } from '@braks/vue-flow'
 import { getElements } from '../../../../examples/src/Stress/utils'
 
 describe('test store action setElements', () => {

e2e/cypress/integration/1-store/setState.spec.ts

@@ -1,5 +1,6 @@
 import { isRef } from 'vue'
-import { useVueFlow, State } from '@braks/vue-flow'
+import type { State } from '@braks/vue-flow'
+import { useVueFlow } from '@braks/vue-flow'
 
 describe('test store state', () => {
   let store = useVueFlow()

e2e/cypress/integration/2-flow/container.spec.ts

@@ -1,5 +1,6 @@
 import { mount } from '@cypress/vue'
-import { VueFlow, isEdge, isNode, Elements } from '@braks/vue-flow'
+import type { Elements } from '@braks/vue-flow'
+import { VueFlow, isEdge, isNode } from '@braks/vue-flow'
 import '@braks/vue-flow/dist/style.css'
 import '@braks/vue-flow/dist/theme-default.css'
 

e2e/tsconfig.json

@@ -3,10 +3,7 @@
     "baseUrl": ".",
     "module": "ESNext",
     "target": "es2017",
-    "lib": [
+    "lib": ["DOM", "ESNext"],
-      "DOM",
-      "ESNext"
-    ],
     "noEmit": true,
     "declaration": false,
     "strict": true,
@@ -18,12 +15,8 @@
     "noUnusedLocals": false,
     "strictNullChecks": true,
     "forceConsistentCasingInFileNames": true,
-    "types": [
+    "types": ["vite/client"]
-      "vite/client"
-    ],
   },
   "include": ["cypress"],
-  "exclude": [
+  "exclude": ["node_modules"]
-    "node_modules",
-  ],
 }

examples/App.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import Header from './Header.vue'
 </script>
+
 <template>
   <Header />
   <router-view />

examples/Header.vue

@@ -17,6 +17,7 @@ const computedRoutes = computed(() => {
     }))
 })
 </script>
+
 <template>
   <header>
     <a class="logo" href="https://github.com/bcakmakoglu/vue-flow"> Vue Flow Dev </a>

examples/router.ts

@@ -1,4 +1,5 @@
-import { createRouter, createWebHashHistory, RouterOptions } from 'vue-router'
+import type { RouterOptions } from 'vue-router'
+import { createRouter, createWebHashHistory } from 'vue-router'
 
 export const routes: RouterOptions['routes'] = [
   {

examples/src/Basic/Basic.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { VueFlow, MiniMap, Controls, Background, isNode, useVueFlow, Elements } from '@braks/vue-flow'
+import type { Elements } from '@braks/vue-flow'
+import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@braks/vue-flow'
 
 const elements = ref<Elements>([
   { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
@@ -35,6 +36,7 @@ const logToObject = () => console.log(instance.value?.toObject())
 const resetTransform = () => instance.value?.setTransform({ x: 0, y: 0, zoom: 1 })
 const toggleclass = () => elements.value.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
 </script>
+
 <template>
   <VueFlow v-model="elements" class="vue-flow-basic-example">
     <Background />

examples/src/Basic/BasicOptionsAPI.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
-import { VueFlow, Background, MiniMap, Controls, Elements, FlowEvents, FlowInstance, isNode, addEdge } from '@braks/vue-flow'
+import type { Elements, FlowEvents, FlowInstance } from '@braks/vue-flow'
+import { Background, Controls, MiniMap, VueFlow, addEdge, isNode } from '@braks/vue-flow'
 
 export default defineComponent({
   name: 'BasicOptionsAPI',
@@ -50,6 +51,7 @@ export default defineComponent({
   },
 })
 </script>
+
 <template>
   <VueFlow
     v-model="elements"

examples/src/Basic/ResizableNode.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { Position, Handle, ValidConnectionFunc } from '@braks/vue-flow'
+import type { Position, ValidConnectionFunc } from '@braks/vue-flow'
+import { Handle } from '@braks/vue-flow'
 
 interface Props {
   id: string
@@ -17,12 +18,14 @@ const props = withDefaults(defineProps<Props>(), {
   targetPosition: 'top' as Position,
 })
 </script>
+
 <script lang="ts">
 export default {
   name: 'ResizableNode',
   inheritAttrs: false,
 }
 </script>
+
 <template>
   <Handle
     type="target"
@@ -41,6 +44,7 @@ export default {
     :is-valid-connection="props.isValidSourcePos"
   />
 </template>
+
 <style>
 .resize-node {
   padding: 1rem;

examples/src/CustomConnectionLine/ConnectionLine.vue

@@ -7,6 +7,7 @@ interface CustomConnectionLineProps {
 }
 const props = defineProps<CustomConnectionLineProps>()
 </script>
+
 <template>
   <g>
     <path

examples/src/CustomConnectionLine/CustomConnectionLine.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { VueFlow, Background, BackgroundVariant, Elements } from '@braks/vue-flow'
+import type { Elements } from '@braks/vue-flow'
+import { Background, BackgroundVariant, VueFlow } from '@braks/vue-flow'
 import ConnectionLine from './ConnectionLine.vue'
 
 const elements = ref<Elements>([
@@ -11,6 +12,7 @@ const elements = ref<Elements>([
   },
 ])
 </script>
+
 <template>
   <VueFlow v-model="elements">
     <template #connection-line="props">

examples/src/CustomNode/ColorSelectorNode.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
-import { CSSProperties } from 'vue'
+import type { CSSProperties } from 'vue'
-import { Handle, Position, Connection, Edge, NodeProps } from '@braks/vue-flow'
+import type { Connection, Edge, NodeProps } from '@braks/vue-flow'
+import { Handle, Position } from '@braks/vue-flow'
 
 interface ColorSelectorNodeProps extends NodeProps {
   data: {
@@ -16,11 +17,13 @@ const sourceHandleStyleB: CSSProperties = { ...targetHandleStyle, bottom: '10px'
 
 const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params)
 </script>
+
 <script lang="ts">
 export default {
   inheritAttrs: false,
 }
 </script>
+
 <template>
   <Handle type="target" :position="Position.Left" :style="targetHandleStyle" :on-connect="onConnect" />
   <div>

examples/src/CustomNode/CustomNode.vue

@@ -1,16 +1,6 @@
 <script lang="ts" setup>
-import {
+import type { Elements, Node, SnapGrid } from '@braks/vue-flow'
-  ConnectionMode,
+import { ConnectionMode, Controls, MiniMap, Position, VueFlow, isEdge, useVueFlow } from '@braks/vue-flow'
-  Controls,
-  Elements,
-  isEdge,
-  MiniMap,
-  Node,
-  Position,
-  SnapGrid,
-  useVueFlow,
-  VueFlow,
-} from '@braks/vue-flow'
 import ColorSelectorNode from './ColorSelectorNode.vue'
 
 const elements = ref<Elements>([])
@@ -85,6 +75,7 @@ onPaneReady((i) => {
   console.log('flow loaded:', i)
 })
 </script>
+
 <template>
   <VueFlow v-model="elements" :style="{ backgroundColor: bgColor }">
     <template #node-selectorNode="props">

examples/src/DragNDrop/DnD.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { VueFlow, Node, useVueFlow } from '@braks/vue-flow'
+import type { Node } from '@braks/vue-flow'
+import { VueFlow, useVueFlow } from '@braks/vue-flow'
 import Sidebar from './Sidebar.vue'
 
 let id = 0
@@ -38,12 +39,14 @@ const onDrop = (event: DragEvent) => {
   }
 }
 </script>
+
 <template>
   <div class="dndflow" @drop="onDrop">
     <VueFlow @dragover="onDragOver" />
     <Sidebar />
   </div>
 </template>
+
 <style>
 @import 'dnd.css';
 </style>

examples/src/DragNDrop/Sidebar.vue

@@ -6,6 +6,7 @@ const onDragStart = (event: DragEvent, nodeType: string) => {
   }
 }
 </script>
+
 <template>
   <aside>
     <div class="description">You can drag these nodes to the pane on the left.</div>

examples/src/EdgeTypes/EdgeTypesExample.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
+import type { FlowInstance } from '@braks/vue-flow'
+import { Controls, MiniMap, VueFlow } from '@braks/vue-flow'
 import { getElements } from './utils'
-import { VueFlow, MiniMap, Controls, FlowInstance } from '@braks/vue-flow'
 
 const onLoad = (flowInstance: FlowInstance) => {
   flowInstance.fitView()
@@ -9,6 +10,7 @@ const onLoad = (flowInstance: FlowInstance) => {
 
 const elements = getElements()
 </script>
+
 <template>
   <VueFlow v-model="elements" :min-zoom="0.2" @pane-ready="onLoad">
     <MiniMap />

examples/src/EdgeTypes/utils.ts

@@ -1,4 +1,5 @@
-import { Elements, Position } from '@braks/vue-flow'
+import type { Elements } from '@braks/vue-flow'
+import { Position } from '@braks/vue-flow'
 
 const nodeWidth = 80
 const nodeGapWidth = nodeWidth * 2

examples/src/Edges/CustomEdge.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { getEdgeCenter, getBezierPath, Position, useVueFlow, EdgeProps } from '@braks/vue-flow'
+import type { EdgeProps, Position } from '@braks/vue-flow'
+import { getBezierPath, getEdgeCenter, useVueFlow } from '@braks/vue-flow'
 
 interface CustomEdgeProps<T = any> extends EdgeProps<T> {
   id: string
@@ -42,11 +43,13 @@ const center = computed(() =>
   }),
 )
 </script>
+
 <script lang="ts">
 export default {
   inheritAttrs: false,
 }
 </script>
+
 <template>
   <path :id="props.id" :style="props.style" class="vue-flow__edge-path" :d="edgePath" :marker-end="props.markerEnd" />
   <foreignObject
@@ -62,6 +65,7 @@ export default {
     </body>
   </foreignObject>
 </template>
+
 <style>
 .edgebutton {
   border-radius: 999px;

examples/src/Edges/CustomEdge2.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { getEdgeCenter, getBezierPath, getMarkerId, Position, EdgeProps, EdgeText } from '@braks/vue-flow'
+import type { EdgeProps, Position } from '@braks/vue-flow'
+import { EdgeText, getBezierPath, getEdgeCenter, getMarkerId } from '@braks/vue-flow'
 
 interface CustomEdgeProps extends EdgeProps {
   source: string
@@ -42,11 +43,13 @@ const center = computed(() =>
 )
 const onClick = () => console.log(props.data)
 </script>
+
 <script lang="ts">
 export default {
   inheritAttrs: false,
 }
 </script>
+
 <template>
   <path :id="props.id" class="vue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
   <EdgeText

examples/src/Edges/CustomLabel.vue

@@ -5,6 +5,7 @@ interface CustomLabelProps {
 
 const props = defineProps<CustomLabelProps>()
 </script>
+
 <template>
   <tspan dy="10" x="0">{{ props.label }}</tspan>
 </template>

examples/src/Edges/EdgesExample.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { VueFlow, MiniMap, Controls, Background, MarkerType, useVueFlow, Edge, Node } from '@braks/vue-flow'
+import type { Edge, Node } from '@braks/vue-flow'
+import { Background, Controls, MarkerType, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
 import CustomEdge from './CustomEdge.vue'
 import CustomEdge2 from './CustomEdge2.vue'
 import CustomLabel from './CustomLabel.vue'
@@ -71,6 +72,7 @@ useVueFlow({
   edges: initialEdges,
 })
 </script>
+
 <template>
   <VueFlow :fit-view-on-init="true" :snap-to-grid="true">
     <template #edge-custom="props">

examples/src/Empty/EmptyExample.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { VueFlow, MiniMap, Controls, Background, BackgroundVariant, Node, useVueFlow } from '@braks/vue-flow'
+import type { Node } from '@braks/vue-flow'
+import { Background, BackgroundVariant, Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
 
 const { nodes, addNodes, edges, addEdges, onConnect, onPaneReady, onNodeDragStop, dimensions } = useVueFlow()
 
@@ -17,6 +18,7 @@ const addRandomNode = () => {
   addNodes([newNode])
 }
 </script>
+
 <template>
   <VueFlow>
     <MiniMap />

examples/src/FloatingEdges/FloatingConnectionLine.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { getBezierPath, GraphNode, Position } from '@braks/vue-flow'
+import type { GraphNode, Position } from '@braks/vue-flow'
+import { getBezierPath } from '@braks/vue-flow'
 import { getEdgeParams } from './floating-edge-utils'
 
 interface FloatingConnectionLineProps {
@@ -30,6 +31,7 @@ const d = computed(() =>
   }),
 )
 </script>
+
 <template>
   <g>
     <path fill="none" stroke="#222" :stroke-width="1.5" class="animated" :d="d" />

examples/src/FloatingEdges/FloatingEdge.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
-import { CSSProperties } from 'vue'
+import type { CSSProperties } from 'vue'
-import { getBezierPath, GraphNode, EdgeProps, MarkerType } from '@braks/vue-flow'
+import type { EdgeProps, GraphNode, MarkerType } from '@braks/vue-flow'
+import { getBezierPath } from '@braks/vue-flow'
 import { getEdgeParams } from './floating-edge-utils'
 
 interface FloatingEdgeProps extends EdgeProps {
@@ -33,6 +34,7 @@ const d = computed(
     '',
 )
 </script>
+
 <template>
   <g class="vue-flow__connection">
     <path

examples/src/FloatingEdges/FloatingEdges.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VueFlow, Background, MiniMap, Controls, MarkerType, useVueFlow } from '@braks/vue-flow'
+import { Background, Controls, MarkerType, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
 import FloatingEdge from './FloatingEdge.vue'
 import FloatingConnectionLine from './FloatingConnectionLine.vue'
 import { createElements } from './floating-edge-utils'
@@ -10,6 +10,7 @@ const { addEdges, onConnect, onPaneReady, getNodes } = useVueFlow({
 onPaneReady(({ fitView }) => fitView())
 onConnect((params) => addEdges([{ ...params, type: 'floating', markerEnd: MarkerType.Arrow }]))
 </script>
+
 <template>
   <div class="floatingedges">
     <VueFlow>
@@ -26,6 +27,7 @@ onConnect((params) => addEdges([{ ...params, type: 'floating', markerEnd: Marker
     </VueFlow>
   </div>
 </template>
+
 <style>
 .floatingedges {
   flex-direction: column;

examples/src/FloatingEdges/floating-edge-utils.ts

@@ -1,4 +1,5 @@
-import { Position, MarkerType, XYPosition, GraphNode, Edge } from '@braks/vue-flow'
+import type { Edge, GraphNode, XYPosition } from '@braks/vue-flow'
+import { MarkerType, Position } from '@braks/vue-flow'
 
 // this helper function returns the intersection point
 // of the line between the center of the intersectionNode and the target node

examples/src/Hidden/HiddenExample.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VueFlow, MiniMap, Controls, useVueFlow } from '@braks/vue-flow'
+import { Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
 
 const isHidden = ref(false)
 
@@ -21,6 +21,7 @@ watchEffect(() => {
   edges.value.forEach((e) => (e.hidden = isHidden.value))
 })
 </script>
+
 <template>
   <VueFlow>
     <MiniMap />

examples/src/Interaction/InteractionExample.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VueFlow, MiniMap, Controls, useVueFlow } from '@braks/vue-flow'
+import { Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
 
 const {
   nodesDraggable,
@@ -41,6 +41,7 @@ onPaneScroll((event) => captureZoomScroll.value && console.log('pane scroll', ev
 onPaneContextMenu((event) => captureZoomClick && console.log('pane ctx menu', event))
 onMoveEnd((flowTransform) => console.log('move end', flowTransform))
 </script>
+
 <template>
   <VueFlow>
     <MiniMap />

examples/src/Layouting/LayoutingExample.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import dagre from 'dagre'
-import { VueFlow, Controls, ConnectionMode, Elements, isNode, CoordinateExtent, Position } from '@braks/vue-flow'
+import type { CoordinateExtent, Elements } from '@braks/vue-flow'
+import { ConnectionMode, Controls, Position, VueFlow, isNode } from '@braks/vue-flow'
 import initialElements from './initial-elements'
 
 const dagreGraph = new dagre.graphlib.Graph()
@@ -37,6 +38,7 @@ const onLayout = (direction: string) => {
   })
 }
 </script>
+
 <template>
   <div class="layoutflow">
     <VueFlow v-model="elements" :node-extent="nodeExtent" :connection-mode="ConnectionMode.Loose" @pane-ready="onLayout('TB')">
@@ -48,6 +50,7 @@ const onLayout = (direction: string) => {
     </div>
   </div>
 </template>
+
 <style>
 @import 'layouting.css';
 </style>

examples/src/Layouting/initial-elements.ts

@@ -1,4 +1,4 @@
-import { Elements, XYPosition } from '@braks/vue-flow'
+import type { Elements, XYPosition } from '@braks/vue-flow'
 
 const position: XYPosition = { x: 0, y: 0 }
 

examples/src/MultiFlows/Flow.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { VueFlow, Background, Elements } from '@braks/vue-flow'
+import type { Elements } from '@braks/vue-flow'
+import { Background, VueFlow } 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' },
@@ -11,6 +12,7 @@ const initialElements: Elements = [
 
 const elements = ref<Elements>(initialElements)
 </script>
+
 <template>
   <VueFlow v-model="elements" :fit-view-on-init="true">
     <Background />

examples/src/MultiFlows/MultiFlowsExample.vue

@@ -1,12 +1,14 @@
 <script lang="ts" setup>
 import Flow from './Flow.vue'
 </script>
+
 <template>
   <div class="vue-flow__example-multiflows">
     <Flow />
     <Flow />
   </div>
 </template>
+
 <style>
 @import 'multiflows.css';
 </style>

examples/src/Nesting/GroupNode.vue

@@ -25,6 +25,7 @@ onNodeDragStop(({ node }) => {
   }
 })
 </script>
+
 <template>
   <div class="vue-flow__group-node">
     <Handle type="target" :position="Position.Top" />
@@ -32,6 +33,7 @@ onNodeDragStop(({ node }) => {
     <Handle type="source" :position="Position.Bottom" />
   </div>
 </template>
+
 <style>
 .vue-flow__group-node {
   padding: 15px;

examples/src/Nesting/Nesting.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ConnectionMode, useVueFlow, VueFlow, MiniMap, Background, Controls } from '@braks/vue-flow'
+import { Background, ConnectionMode, Controls, MiniMap, VueFlow, useVueFlow } from '@braks/vue-flow'
 
 const { onConnect, nodes, edges, addEdges, addNodes } = useVueFlow({
   fitViewOnInit: true,
@@ -87,6 +87,7 @@ onMounted(() => {
   ])
 })
 </script>
+
 <template>
   <VueFlow>
     <MiniMap />

examples/src/NodeTypeChange/NodeTypeChangeExample.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { VueFlow, addEdge, Connection, Edge, Elements, isEdge, FlowInstance, Position } from '@braks/vue-flow'
+import type { Connection, Edge, Elements, FlowInstance } from '@braks/vue-flow'
+import { Position, VueFlow, addEdge, isEdge } from '@braks/vue-flow'
 
 const initialElements: Elements = [
   {
@@ -33,6 +34,7 @@ const changeType = () => {
   })
 }
 </script>
+
 <template>
   <VueFlow v-model="elements" @connect="onConnect" @pane-ready="onLoad">
     <button :style="{ position: 'absolute', right: 10, top: 30, zIndex: 4 }" @click="changeType">change type</button>

examples/src/Overview/Overview.vue

@@ -1,20 +1,6 @@
 <script lang="ts" setup>
-import {
+import type { Connection, Edge, Elements, FlowEvents, FlowInstance, FlowTransform, Node, SnapGrid } from '@braks/vue-flow'
-  VueFlow,
+import { Background, Controls, MarkerType, MiniMap, VueFlow, addEdge } from '@braks/vue-flow'
-  addEdge,
-  MiniMap,
-  Controls,
-  Background,
-  Node,
-  Elements,
-  FlowInstance,
-  FlowTransform,
-  SnapGrid,
-  Connection,
-  Edge,
-  FlowEvents,
-  MarkerType,
-} from '@braks/vue-flow'
 
 const onNodeDragStart = (e: FlowEvents['nodeDragStart']) => console.log('drag start', e)
 const onNodeDrag = (e: FlowEvents['nodeDrag']) => console.log('drag', e)
@@ -114,6 +100,7 @@ const nodeColor = (n: Node): string => {
 const elements = ref<Elements>(initialElements)
 const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
 </script>
+
 <template>
   <VueFlow
     v-model="elements"

examples/src/Provider/ProviderExample.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
+import type { Elements, FlowInstance } from '@braks/vue-flow'
+import { ConnectionMode, Controls, VueFlow, useVueFlow } from '@braks/vue-flow'
 import Sidebar from './Sidebar.vue'
-import { VueFlow, Controls, FlowInstance, Elements, ConnectionMode, useVueFlow } from '@braks/vue-flow'
 
 const onLoad = (flowInstance: FlowInstance) => console.log('flow loaded:', flowInstance)
 
@@ -16,6 +17,7 @@ const initialElements: Elements = [
 useVueFlow()
 const elements = ref<Elements>(initialElements)
 </script>
+
 <template>
   <div class="providerflow">
     <Sidebar />
@@ -26,6 +28,7 @@ const elements = ref<Elements>(initialElements)
     </div>
   </div>
 </template>
+
 <style>
 @import 'provider.css';
 </style>

examples/src/Provider/Sidebar.vue

@@ -7,6 +7,7 @@ const selectAll = () => {
   nodesSelectionActive.value = true
 }
 </script>
+
 <template>
   <aside>
     <div class="description">

examples/src/RGBFlow/RGBFlow.vue

@@ -1,10 +1,11 @@
 <script lang="ts" setup>
 import { templateRef } from '@vueuse/core'
+import type { Elements, FlowInstance } from '@braks/vue-flow'
+import { VueFlow } from '@braks/vue-flow'
 import RGBNode from './RGBNode.vue'
 import RGBOutputNode from './RGBOutputNode.vue'
-import { Elements, FlowInstance, VueFlow } from '@braks/vue-flow'
 
-type Colors = {
+interface Colors {
   red: number
   green: number
   blue: number
@@ -31,6 +32,7 @@ const color = ref<Colors>({
 })
 const onChange = ({ color: c, val }: { color: keyof Colors; val: number }) => (color.value[c] = Number(val))
 </script>
+
 <template>
   <div ref="page" class="demo-flow">
     <VueFlow v-model="elements" @pane-ready="onLoad">
@@ -43,6 +45,7 @@ const onChange = ({ color: c, val }: { color: keyof Colors; val: number }) => (c
     </VueFlow>
   </div>
 </template>
+
 <style>
 .demo-flow {
   display: flex;

examples/src/RGBFlow/RGBNode.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
-import { CSSProperties } from 'vue'
+import type { CSSProperties } from 'vue'
-import { Handle, NodeProps, Position } from '@braks/vue-flow'
+import type { NodeProps } from '@braks/vue-flow'
+import { Handle, Position } from '@braks/vue-flow'
 
 interface RGBNodeProps extends NodeProps {
   data: {
@@ -37,6 +38,7 @@ const colorVal = computed({
 
 const style = { '--color': color } as CSSProperties
 </script>
+
 <template>
   <div class="wrapper">
     <div class="text-md" :style="{ color }">{{ `${color} Amount`.toUpperCase() }}</div>
@@ -44,6 +46,7 @@ const style = { '--color': color } as CSSProperties
     <Handle type="source" :position="Position.Right" :style="{ backgroundColor: color }" />
   </div>
 </template>
+
 <style>
 .wrapper {
   padding: 16px;

examples/src/RGBFlow/RGBOutputNode.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { Handle, NodeProps, Position } from '@braks/vue-flow'
+import type { NodeProps } from '@braks/vue-flow'
+import { Handle, Position } from '@braks/vue-flow'
 
 interface RBGOutputNodeProps extends NodeProps {
   rgb: string
@@ -7,12 +8,14 @@ interface RBGOutputNodeProps extends NodeProps {
 
 const props = defineProps<RBGOutputNodeProps>()
 </script>
+
 <template>
   <div :style="{ backgroundColor: props.rgb }" class="rgb-output-node">
     <div class="text-md uppercase">{{ props.rgb }}</div>
     <Handle type="target" :position="Position.Left" />
   </div>
 </template>
+
 <style>
 .rgb-output-node {
   padding: 9px;

examples/src/SaveRestore/Controls.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { useZoomPanHelper, FlowExportObject, Node, useVueFlow } from '@braks/vue-flow'
+import type { FlowExportObject, Node } from '@braks/vue-flow'
+import { useVueFlow, useZoomPanHelper } from '@braks/vue-flow'
 
 const flowKey = 'example-flow'
 const state = useStorage<FlowExportObject>(flowKey, {
@@ -38,6 +39,7 @@ const onAdd = () => {
   addNodes([newNode])
 }
 </script>
+
 <template>
   <div class="save__controls">
     <button @click="onSave">save</button>

examples/src/SaveRestore/SaveRestoreExample.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
+import type { Elements } from '@braks/vue-flow'
+import { VueFlow } from '@braks/vue-flow'
 import Controls from './Controls.vue'
-import { VueFlow, Elements } from '@braks/vue-flow'
 
 const initialElements: Elements = [
   { id: '1', label: 'Node 1', position: { x: 100, y: 100 } },
@@ -10,11 +11,13 @@ const initialElements: Elements = [
 
 const elements = ref(initialElements)
 </script>
+
 <template>
   <VueFlow v-model="elements">
     <Controls />
   </VueFlow>
 </template>
+
 <style>
 @import 'save.css';
 </style>

examples/src/Stress/StressExample.vue

@@ -16,6 +16,7 @@ onPaneReady((i) => {
   console.log(i.getElements())
 })
 </script>
+
 <template>
   <VueFlow />
 </template>

examples/src/Stress/utils.ts

@@ -1,4 +1,4 @@
-import { Edge, Node } from '@braks/vue-flow'
+import type { Edge, Node } from '@braks/vue-flow'
 
 export function getElements(xElements = 10, yElements = 10) {
   const initialNodes: Node[] = []

examples/src/Switch/SwitchExample.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { VueFlow, Elements } from '@braks/vue-flow'
+import type { Elements } from '@braks/vue-flow'
+import { VueFlow } from '@braks/vue-flow'
 
 const elementsA: Elements = [
   { id: '1a', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
@@ -25,6 +26,7 @@ const elementsB: Elements = [
 
 const elements = ref(elementsA)
 </script>
+
 <template>
   <VueFlow v-model="elements">
     <div :style="{ position: 'absolute', right: 10, top: 10, zIndex: 4 }">

examples/src/Unidirectional/CustomNode.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { CSSProperties } from 'vue'
+import type { CSSProperties } from 'vue'
 import { Handle, Position } from '@braks/vue-flow'
 
 interface Props {
@@ -9,6 +9,7 @@ interface Props {
 const props = defineProps<Props>()
 const nodeStyles: CSSProperties = { padding: '10px 15px', border: '1px solid #ddd' }
 </script>
+
 <template>
   <div :key="props.id" :style="nodeStyles">
     <div>node {{ props.id }}</div>

examples/src/Unidirectional/UnidirectionalExample.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
+import type { Elements, Node } from '@braks/vue-flow'
+import { ConnectionLineType, ConnectionMode, MarkerType, VueFlow, useZoomPanHelper } from '@braks/vue-flow'
 import CustomNode from './CustomNode.vue'
-import { VueFlow, useZoomPanHelper, Elements, Node, ConnectionLineType, ConnectionMode, MarkerType } from '@braks/vue-flow'
 
 const initialElements: Elements = [
   {
@@ -171,6 +172,7 @@ const onPaneClick = (evt: MouseEvent) =>
     type: 'custom',
   } as Node))
 </script>
+
 <template>
   <VueFlow
     v-model="elements"

examples/src/UpdatableEdge/UpdatableEdgeExample.vue

@@ -1,16 +1,6 @@
 <script lang="ts" setup>
-import {
+import type { Connection, Edge, Elements, FlowEvents, FlowInstance } from '@braks/vue-flow'
-  VueFlow,
+import { ConnectionMode, Controls, VueFlow, addEdge, updateEdge } from '@braks/vue-flow'
-  Controls,
-  updateEdge,
-  addEdge,
-  Elements,
-  FlowInstance,
-  Connection,
-  Edge,
-  FlowEvents,
-  ConnectionMode,
-} from '@braks/vue-flow'
 
 const initialElements: Elements = [
   {
@@ -42,6 +32,7 @@ const onEdgeUpdate = ({ edge, connection }: FlowEvents['edgeUpdate']) => {
 }
 const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
 </script>
+
 <template>
   <VueFlow
     v-model="elements"

examples/src/UpdateNode/UpdateNodeExample.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { VueFlow, Elements } from '@braks/vue-flow'
+import type { Elements } from '@braks/vue-flow'
+import { VueFlow } from '@braks/vue-flow'
 
 const initialElements: Elements = [
   { id: '1', label: '-', position: { x: 100, y: 100 } },
@@ -27,6 +28,7 @@ const updateNode = () => {
 
 onMounted(updateNode)
 </script>
+
 <template>
   <VueFlow v-model="elements" :default-zoom="1.5" :min-zoom="0.2" :max-zoom="4">
     <div class="updatenode__controls">
@@ -43,6 +45,7 @@ onMounted(updateNode)
     </div>
   </VueFlow>
 </template>
+
 <style>
 @import 'updatenode.css';
 </style>

examples/src/Validation/CustomInput.vue

@@ -1,16 +1,19 @@
 <script lang="ts" setup>
-import { Position, Handle, ValidConnectionFunc } from '@braks/vue-flow'
+import type { ValidConnectionFunc } from '@braks/vue-flow'
+import { Handle, Position } from '@braks/vue-flow'
 
 interface CustomInputProps {
   isValidTargetPos: ValidConnectionFunc
 }
 const props = defineProps<CustomInputProps>()
 </script>
+
 <script lang="ts">
 export default {
   inheritAttrs: false,
 }
 </script>
+
 <template>
   <div>Only connectable with B</div>
   <Handle type="source" :position="Position.Right" :is-valid-connection="props.isValidTargetPos" />

examples/src/Validation/CustomNode.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { Position, Handle, NodeProps, ValidConnectionFunc } from '@braks/vue-flow'
+import type { NodeProps, ValidConnectionFunc } from '@braks/vue-flow'
+import { Handle, Position } from '@braks/vue-flow'
 
 interface CustomNodeProps extends NodeProps {
   id: string
@@ -8,11 +9,13 @@ interface CustomNodeProps extends NodeProps {
 
 const props = defineProps<CustomNodeProps>()
 </script>
+
 <script lang="ts">
 export default {
   inheritAttrs: false,
 }
 </script>
+
 <template>
   <Handle type="target" :position="Position.Left" :is-valid-connection="props.isValidSourcePos" />
   <div>{{ props.id }}</div>

examples/src/Validation/ValidationExample.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
+import type { Connection, FlowInstance, OnConnectStartParams } from '@braks/vue-flow'
+import { VueFlow, useVueFlow } from '@braks/vue-flow'
 import CustomInput from './CustomInput.vue'
 import CustomNode from './CustomNode.vue'
-import { VueFlow, Connection, OnConnectStartParams, FlowInstance, useVueFlow } from '@braks/vue-flow'
 
 const { nodes, edges, addEdges } = useVueFlow({
   nodes: [
@@ -26,6 +27,7 @@ const onConnect = (params: Connection) => {
   addEdges([params])
 }
 </script>
+
 <template>
   <VueFlow
     :select-nodes-on-drag="false"
@@ -44,6 +46,7 @@ const onConnect = (params: Connection) => {
     </template>
   </VueFlow>
 </template>
+
 <style>
 @import 'validation.css';
 </style>

examples/tsconfig.json

@@ -3,10 +3,7 @@
     "baseUrl": ".",
     "module": "ESNext",
     "target": "es2017",
-    "lib": [
+    "lib": ["DOM", "ESNext"],
-      "DOM",
-      "ESNext"
-    ],
     "noEmit": true,
     "declaration": false,
     "strict": true,
@@ -18,18 +15,11 @@
     "noUnusedLocals": false,
     "strictNullChecks": true,
     "forceConsistentCasingInFileNames": true,
-    "types": [
+    "types": ["vite/client"],
-      "vite/client"
-    ],
     "paths": {
-      "~/*": [
+      "~/*": ["../package/src/*"]
-        "../package/src/*"
-      ]
     }
   },
-  "exclude": [
+  "exclude": ["node_modules", "dist"],
-    "node_modules",
-    "dist"
-  ],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

package/package.json

@@ -2,19 +2,19 @@
   "name": "@braks/vue-flow",
   "version": "0.4.8",
   "private": false,
+  "license": "MIT",
+  "author": "Burak Cakmakoglu<78412429+bcakmakoglu@users.noreply.github.com>",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/bcakmakoglu/vue-flow"
   },
-  "license": "MIT",
-  "author": "Burak Cakmakoglu<78412429+bcakmakoglu@users.noreply.github.com>",
   "homepage": "https://github.com/bcakmakoglu/vue-flow#readme",
   "bugs": {
     "url": "https://github.com/bcakmakoglu/vue-flow/issues"
   },
   "main": "./dist/vue-flow.cjs.js",
-  "types": "./dist/index.d.ts",
   "module": "./dist/vue-flow.es.js",
+  "types": "./dist/index.d.ts",
   "unpkg": "./dist/vue-flow.iife.js",
   "jsdelivr": "./dist/vue-flow.iife.js",
   "files": [
@@ -33,6 +33,9 @@
     "release": "yarn np",
     "postpublish": "shx rm README.md"
   },
+  "peerDependencies": {
+    "vue": "^3.2.25"
+  },
   "dependencies": {
     "@braks/revue-draggable": "^0.4.2",
     "@types/d3": "^7.1.0",
@@ -58,9 +61,6 @@
     "vite-svg-loader": "^2.2.0",
     "vue-tsc": "^0.33.9"
   },
-  "peerDependencies": {
-    "vue": "^3.2.25"
-  },
   "publishConfig": {
     "access": "public",
     "registry": "http://registry.npmjs.org/"

package/src/additional-components/Background/Background.vue

@@ -45,11 +45,13 @@ const d = computed(
   () => `M${background.scaledGap / 2} 0 V${background.scaledGap} M0 ${background.scaledGap / 2} H${background.scaledGap}`,
 )
 </script>
+
 <script lang="ts">
 export default {
   name: 'Background',
 }
 </script>
+
 <template>
   <svg
     class="vue-flow__background"

package/src/additional-components/Controls/ControlButton.vue

@@ -3,6 +3,7 @@ export default {
   name: 'ControlButton',
 }
 </script>
+
 <template>
   <button class="vue-flow__controls-button">
     <slot></slot>

package/src/additional-components/Controls/Controls.vue

@@ -41,11 +41,13 @@ const onInteractiveChangeHandler = () => {
   emit('interaction-change', !isInteractive.value)
 }
 </script>
+
 <script lang="ts">
 export default {
   name: 'Controls',
 }
 </script>
+
 <template>
   <div class="vue-flow__controls">
     <template v-if="showZoom">

package/src/additional-components/MiniMap/MiniMap.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ShapeRendering, MiniMapNodeFunc, GraphNode } from '../../types'
+import type { GraphNode, MiniMapNodeFunc, ShapeRendering } from '../../types'
 import { useVueFlow, useWindow } from '../../composables'
 import { getBoundsofRects, getRectOfNodes } from '../../utils'
 import type { MiniMapProps } from '../../types/components'
@@ -90,11 +90,13 @@ const onNodeDblClick = (event: MouseEvent, node: GraphNode) => {
   hooks.miniMapNodeDoubleClick.trigger({ event, node })
 }
 </script>
+
 <script lang="ts">
 export default {
   name: 'MiniMap',
 }
 </script>
+
 <template>
   <svg
     :width="elementWidth"

package/src/additional-components/MiniMap/MiniMapNode.ts

@@ -1,5 +1,5 @@
-import { CSSProperties, FunctionalComponent } from 'vue'
+import type { CSSProperties, FunctionalComponent } from 'vue'
-import { MiniMapNodeProps } from '~/types'
+import type { MiniMapNodeProps } from '~/types'
 
 const MiniMapNode: FunctionalComponent<MiniMapNodeProps> = function (
   {

package/src/components/ConnectionLine/ConnectionLine.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { getBezierPath, getSmoothStepPath } from '../Edges/utils'
-import { ConnectionLineType, GraphNode, HandleElement, HandleType, Position } from '../../types'
+import type { GraphNode, HandleElement, HandleType } from '../../types'
+import { ConnectionLineType, Position } from '../../types'
 import { useVueFlow } from '../../composables'
 import { Slots } from '../../context'
 
@@ -81,11 +82,13 @@ const dAttr = computed(() => {
   return path
 })
 </script>
+
 <script lang="ts">
 export default {
   name: 'ConnectionLine',
 }
 </script>
+
 <template>
   <g class="vue-flow__connection">
     <component

package/src/components/Edges/BaseEdge.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, FunctionalComponent } from 'vue'
+import type { CSSProperties, FunctionalComponent } from 'vue'
 import EdgeText from './EdgeText.vue'
 
 interface Props {

package/src/components/Edges/BezierEdge.ts

@@ -1,5 +1,5 @@
-import { FunctionalComponent } from 'vue'
+import type { FunctionalComponent } from 'vue'
-import { getBezierPath, getBezierCenter } from './utils'
+import { getBezierCenter, getBezierPath } from './utils'
 import BaseEdge from './BaseEdge'
 import { Position } from '~/types'
 import type { EdgeProps } from '~/types'

package/src/components/Edges/EdgeAnchor.ts

@@ -1,4 +1,4 @@
-import { FunctionalComponent, HTMLAttributes } from 'vue'
+import type { FunctionalComponent, HTMLAttributes } from 'vue'
 import { Position } from '~/types'
 
 interface Props extends HTMLAttributes {

package/src/components/Edges/EdgeText.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { EdgeTextProps } from '../../types/components'
-import { Rect } from '../../types'
+import type { Rect } from '../../types'
 
 const props = withDefaults(defineProps<EdgeTextProps>(), {
   labelStyle: () => ({}),
@@ -19,18 +19,20 @@ onMounted(() => {
 })
 const transform = computed(() => `translate(${props.x - edgeRefBbox.width / 2} ${props.y - edgeRefBbox.height / 2})`)
 </script>
+
 <script lang="ts">
 export default {
   name: 'EdgeText',
 }
 </script>
+
 <template>
   <g :transform="transform" :class="props.class" class="vue-flow__edge-textwrapper">
     <rect
       v-if="props.labelShowBg"
       class="vue-flow__edge-textbg"
-      :width="edgeRefBbox.width + 2 * props.labelBgPadding[0] + 'px'"
+      :width="`${edgeRefBbox.width + 2 * props.labelBgPadding[0]}px`"
-      :height="edgeRefBbox.height + 2 * props.labelBgPadding[1] + 'px'"
+      :height="`${edgeRefBbox.height + 2 * props.labelBgPadding[1]}px`"
       :x="-props.labelBgPadding[0]"
       :y="-props.labelBgPadding[1]"
       :style="props.labelBgStyle"

package/src/components/Edges/EdgeWrapper.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
-import { CSSProperties } from 'vue'
+import type { CSSProperties } from 'vue'
 import { useHandle, useVueFlow } from '../../composables'
-import { ConnectionMode, EdgeComponent, GraphEdge, Position } from '../../types'
+import type { EdgeComponent, GraphEdge } from '../../types'
+import { ConnectionMode, Position } from '../../types'
 import { connectionExists, getEdgePositions, getHandle, getMarkerId } from '../../utils'
 import EdgeAnchor from './EdgeAnchor'
 
@@ -161,12 +162,14 @@ const getClass = () => {
 
 const getStyle = () => (edge.style instanceof Function ? edge.style(edge) : edge.style) as CSSProperties
 </script>
+
 <script lang="ts">
 export default {
   name: 'Edge',
   inheritAttrs: false,
 }
 </script>
+
 <template>
   <g
     :class="getClass()"

package/src/components/Edges/SimpleBezierEdge.ts

@@ -1,4 +1,4 @@
-import { FunctionalComponent } from 'vue'
+import type { FunctionalComponent } from 'vue'
 import { getSimpleBezierCenter, getSimpleBezierPath } from './utils'
 import BaseEdge from './BaseEdge'
 import { Position } from '~/types'

package/src/components/Edges/SmoothStepEdge.ts

@@ -1,7 +1,8 @@
-import { FunctionalComponent } from 'vue'
+import type { FunctionalComponent } from 'vue'
 import { getCenter, getSmoothStepPath } from './utils'
 import BaseEdge from './BaseEdge'
-import { Position, SmoothStepEdgeProps } from '~/types'
+import type { SmoothStepEdgeProps } from '~/types'
+import { Position } from '~/types'
 
 const SmoothStepEdge: FunctionalComponent<SmoothStepEdgeProps> = function ({
   sourcePosition = Position.Bottom,

package/src/components/Edges/StepEdge.ts

@@ -1,6 +1,6 @@
-import { FunctionalComponent } from 'vue'
+import type { FunctionalComponent } from 'vue'
 import SmoothStepEdge from './SmoothStepEdge'
-import { EdgeProps } from '~/types'
+import type { EdgeProps } from '~/types'
 
 const StepEdge: FunctionalComponent<EdgeProps> = function (props) {
   return h(SmoothStepEdge, { ...props, borderRadius: 0 })

package/src/components/Edges/StraightEdge.ts

@@ -1,6 +1,6 @@
-import { FunctionalComponent } from 'vue'
+import type { FunctionalComponent } from 'vue'
 import BaseEdge from './BaseEdge'
-import { EdgeProps } from '~/types'
+import type { EdgeProps } from '~/types'
 
 const StraightEdge: FunctionalComponent<EdgeProps> = function ({
   label,

package/src/components/Handle/Handle.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { useHandle, useVueFlow } from '../../composables'
-import { ConnectionMode, Position } from '../../types'
+import type { Position } from '../../types'
+import { ConnectionMode } from '../../types'
 import { NodeId } from '../../context'
 import type { HandleProps } from '../../types/handle'
 
@@ -49,11 +50,13 @@ const getClasses = computed(() => {
   ]
 })
 </script>
+
 <script lang="ts">
 export default {
   name: 'Handle',
 }
 </script>
+
 <template>
   <div
     :data-handleid="handleId"

package/src/components/Nodes/DefaultNode.ts

@@ -1,6 +1,7 @@
-import { FunctionalComponent } from 'vue'
+import type { FunctionalComponent } from 'vue'
 import Handle from '../Handle/Handle.vue'
-import { NodeProps, Position } from '~/types'
+import type { NodeProps } from '~/types'
+import { Position } from '~/types'
 
 const DefaultNode: FunctionalComponent<NodeProps> = function ({
   sourcePosition = Position.Bottom,

package/src/components/Nodes/InputNode.ts

@@ -1,6 +1,7 @@
-import { FunctionalComponent } from 'vue'
+import type { FunctionalComponent } from 'vue'
 import Handle from '../Handle/Handle.vue'
-import { NodeProps, Position } from '~/types'
+import type { NodeProps } from '~/types'
+import { Position } from '~/types'
 
 const InputNode: FunctionalComponent<NodeProps> = function ({
   sourcePosition = Position.Bottom,

package/src/components/Nodes/NodeWrapper.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { useDraggableCore } from '@braks/revue-draggable'
-import { CSSProperties } from 'vue'
+import type { CSSProperties } from 'vue'
 import { useVueFlow } from '../../composables'
-import { GraphNode, NodeComponent, SnapGrid } from '../../types'
+import type { GraphNode, NodeComponent, SnapGrid } from '../../types'
 import { NodeId } from '../../context'
 import { getHandleBounds, getXYZPos } from '../../utils'
 
@@ -238,12 +238,14 @@ const getStyle = computed(() => {
   } as CSSProperties
 })
 </script>
+
 <script lang="ts">
 export default {
   name: 'Node',
   inheritAttrs: false,
 }
 </script>
+
 <template>
   <div
     ref="nodeElement"

package/src/components/Nodes/OutputNode.ts

@@ -1,6 +1,7 @@
-import { FunctionalComponent } from 'vue'
+import type { FunctionalComponent } from 'vue'
 import Handle from '../Handle/Handle.vue'
-import { NodeProps, Position } from '~/types'
+import type { NodeProps } from '~/types'
+import { Position } from '~/types'
 
 const OutputNode: FunctionalComponent<NodeProps> = function ({
   targetPosition = Position.Top,

package/src/components/NodesSelection/NodesSelection.vue

@@ -54,11 +54,13 @@ onDragStop(({ event }) => {
   getSelectedNodes.forEach((node) => (node.dragging = false))
 })
 </script>
+
 <script lang="ts">
 export default {
   name: 'NodesSelection',
 }
 </script>
+
 <template>
   <div class="vue-flow__nodesselection vue-flow__container" :class="noPanClassName" :style="{ transform }">
     <div ref="el" class="vue-flow__nodesselection-rect" :style="innerStyle" @contextmenu="onContextMenu" />

package/src/components/UserSelection/SelectionRect.vue

@@ -8,11 +8,13 @@ interface SelectionRectProps {
 
 const { width, height, x, y } = defineProps<SelectionRectProps>()
 </script>
+
 <script lang="ts">
 export default {
   name: 'SelectionRect',
 }
 </script>
+
 <template>
   <div
     class="vue-flow__selection"

package/src/components/UserSelection/UserSelection.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { useVueFlow } from '../../composables'
-import { SelectionRect as Rect } from '../../types'
+import type { SelectionRect as Rect } from '../../types'
 import { getConnectedEdges, getNodesInside } from '../../utils'
 import SelectionRect from './SelectionRect.vue'
 import { getMousePosition } from './utils'
@@ -110,11 +110,13 @@ onBeforeUnmount(() => {
   reset()
 })
 </script>
+
 <script lang="ts">
 export default {
   name: 'UserSelection',
 }
 </script>
+
 <template>
   <div ref="user-selection" class="vue-flow__selectionpane vue-flow__container">
     <SelectionRect v-if="rect.draw" :width="rect.width" :height="rect.height" :x="rect.x" :y="rect.y" />

package/src/components/UserSelection/utils.ts

@@ -1,4 +1,4 @@
-import { XYPosition } from '../../types'
+import type { XYPosition } from '../../types'
 
 export function getMousePosition(event: MouseEvent): XYPosition | void {
   const flowNode = (event.target as Element).closest('.vue-flow')

package/src/composables/useHandle.ts

@@ -1,8 +1,9 @@
 import useVueFlow from './useVueFlow'
 import { getHostForElement } from '~/utils'
-import { Connection, ConnectionMode, Getters, GraphEdge, HandleType, ValidConnectionFunc } from '~/types'
+import type { Connection, Getters, GraphEdge, HandleType, ValidConnectionFunc } from '~/types'
+import { ConnectionMode } from '~/types'
 
-type Result = {
+interface Result {
   elementBelow: Element | null
   isValid: boolean
   connection: Connection

package/src/composables/useKeyPress.ts

@@ -1,7 +1,7 @@
-import { Ref } from 'vue'
+import type { Ref } from 'vue'
 import { onKeyDown, onKeyPressed, onKeyUp } from '@vueuse/core'
 import useWindow from './useWindow'
-import { KeyCode } from '~/types'
+import type { KeyCode } from '~/types'
 import { isInputDOMNode } from '~/utils'
 
 export default (keyCode: Ref<KeyCode>, onChange?: (keyPressed: boolean) => void): Ref<boolean> => {

package/src/composables/useVueFlow.ts

@@ -1,10 +1,8 @@
-import { EffectScope } from 'vue'
+import type { EffectScope } from 'vue'
-import { MaybeRef } from '@vueuse/core'
+import type { MaybeRef } from '@vueuse/core'
-import { FlowOptions, FlowProps, State, VueFlowStore } from '~/types'
+import type { FlowOptions, FlowProps, State, VueFlowStore } from '~/types'
 import { VueFlow } from '~/context'
-import useState from '~/store/state'
+import { useActions, useGetters, useState } from '~/store'
-import useGetters from '~/store/getters'
-import useActions from '~/store/actions'
 
 /**
  * Stores all currently created store instances

package/src/composables/useZoomPanHelper.ts

@@ -1,8 +1,8 @@
 import { zoomIdentity } from 'd3-zoom'
 import useVueFlow from './useVueFlow'
 import useWindow from './useWindow'
-import { getRectOfNodes, pointToRendererPoint, getTransformForBounds, clampPosition } from '~/utils'
+import { clampPosition, getRectOfNodes, getTransformForBounds, pointToRendererPoint } from '~/utils'
-import { GraphNode, ViewportFuncs, D3Selection, Getters, Dimensions } from '~/types'
+import type { D3Selection, Dimensions, Getters, GraphNode, ViewportFuncs } from '~/types'
 
 const DEFAULT_PADDING = 0.1