chore: lint files

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 { Handle, Position, Connection, Edge, NodeProps } from '@braks/vue-flow'
+import type { CSSProperties } from 'vue'
+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 {
-  ConnectionMode,
-  Controls,
-  Elements,
-  isEdge,
-  MiniMap,
-  Node,
-  Position,
-  SnapGrid,
-  useVueFlow,
-  VueFlow,
-} from '@braks/vue-flow'
+import type { Elements, Node, SnapGrid } from '@braks/vue-flow'
+import { ConnectionMode, Controls, MiniMap, Position, VueFlow, isEdge, useVueFlow } 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 { getBezierPath, GraphNode, EdgeProps, MarkerType } from '@braks/vue-flow'
+import type { CSSProperties } from 'vue'
+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 {
-  VueFlow,
-  addEdge,
-  MiniMap,
-  Controls,
-  Background,
-  Node,
-  Elements,
-  FlowInstance,
-  FlowTransform,
-  SnapGrid,
-  Connection,
-  Edge,
-  FlowEvents,
-  MarkerType,
-} from '@braks/vue-flow'
+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'
 
 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 { Handle, NodeProps, Position } from '@braks/vue-flow'
+import type { CSSProperties } from 'vue'
+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 {
-  VueFlow,
-  Controls,
-  updateEdge,
-  addEdge,
-  Elements,
-  FlowInstance,
-  Connection,
-  Edge,
-  FlowEvents,
-  ConnectionMode,
-} from '@braks/vue-flow'
+import type { Connection, Edge, Elements, FlowEvents, FlowInstance } from '@braks/vue-flow'
+import { ConnectionMode, Controls, VueFlow, addEdge, updateEdge } 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": [
-      "DOM",
-      "ESNext"
-    ],
+    "lib": ["DOM", "ESNext"],
     "noEmit": true,
     "declaration": false,
     "strict": true,
@@ -18,18 +15,11 @@
     "noUnusedLocals": false,
     "strictNullChecks": true,
     "forceConsistentCasingInFileNames": true,
-    "types": [
-      "vite/client"
-    ],
+    "types": ["vite/client"],
     "paths": {
-      "~/*": [
-        "../package/src/*"
-      ]
+      "~/*": ["../package/src/*"]
     }
   },
-  "exclude": [
-    "node_modules",
-    "dist"
-  ],
+  "exclude": ["node_modules", "dist"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }