chore: lint files

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 { MiniMapNodeProps } from '~/types'
+import type { CSSProperties, FunctionalComponent } from 'vue'
+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 { getBezierPath, getBezierCenter } from './utils'
+import type { FunctionalComponent } from 'vue'
+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'"
-      :height="edgeRefBbox.height + 2 * props.labelBgPadding[1] + 'px'"
+      :width="`${edgeRefBbox.width + 2 * props.labelBgPadding[0]}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 { MaybeRef } from '@vueuse/core'
-import { FlowOptions, FlowProps, State, VueFlowStore } from '~/types'
+import type { EffectScope } from 'vue'
+import type { MaybeRef } from '@vueuse/core'
+import type { FlowOptions, FlowProps, State, VueFlowStore } from '~/types'
 import { VueFlow } from '~/context'
-import useState from '~/store/state'
-import useGetters from '~/store/getters'
-import useActions from '~/store/actions'
+import { useActions, useGetters, useState } from '~/store'
 
 /**
  * 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 { GraphNode, ViewportFuncs, D3Selection, Getters, Dimensions } from '~/types'
+import { clampPosition, getRectOfNodes, getTransformForBounds, pointToRendererPoint } from '~/utils'
+import type { D3Selection, Dimensions, Getters, GraphNode, ViewportFuncs } from '~/types'
 
 const DEFAULT_PADDING = 0.1
 

package/src/container/EdgeRenderer/EdgeRenderer.vue

@@ -3,7 +3,7 @@ import EdgeWrapper from '../../components/Edges/EdgeWrapper.vue'
 import ConnectionLine from '../../components/ConnectionLine/ConnectionLine.vue'
 import { useVueFlow } from '../../composables'
 import { groupEdgesByZLevel } from '../../utils'
-import { EdgeComponent, GraphEdge } from '../../types'
+import type { EdgeComponent, GraphEdge } from '../../types'
 import { Slots } from '../../context'
 import MarkerDefinitions from './MarkerDefinitions.vue'
 
@@ -86,11 +86,13 @@ const getType = (edge: GraphEdge) => {
   return slot
 }
 </script>
+
 <script lang="ts">
 export default {
   name: 'Edges',
 }
 </script>
+
 <template>
   <svg v-for="group of groups" :key="group.level" class="vue-flow__edges vue-flow__container" :style="`z-index: ${group.level}`">
     <MarkerDefinitions v-if="group.isMaxLevel" :default-color="defaultMarkerColor" />

package/src/container/EdgeRenderer/Marker.vue

@@ -12,11 +12,13 @@ const {
   color = 'none',
 } = defineProps<MarkerProps>()
 </script>
+
 <script lang="ts">
 export default {
   name: 'Marker',
 }
 </script>
+
 <template>
   <marker
     :id="id"

package/src/container/EdgeRenderer/MarkerDefinitions.vue

@@ -1,8 +1,7 @@
 <script lang="ts" setup>
 import { useVueFlow } from '../../composables'
-import type { MarkerProps } from '../../types/edge'
+import type { MarkerProps, MarkerType } from '../../types/edge'
 import { getMarkerId } from '../../utils'
-import { MarkerType } from '../../types/edge'
 import Marker from './Marker.vue'
 
 interface MarkerDefinitionsProps {
@@ -31,11 +30,13 @@ const markers = computed(() => {
   }, [])
 })
 </script>
+
 <script lang="ts">
 export default {
   name: 'MarkerDefinitions',
 }
 </script>
+
 <template>
   <defs>
     <Marker

package/src/container/NodeRenderer/NodeRenderer.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import NodeWrapper from '../../components/Nodes/NodeWrapper.vue'
-import { GraphNode, NodeComponent, SnapGrid } from '../../types'
+import type { GraphNode, NodeComponent, SnapGrid } from '../../types'
 import { useVueFlow } from '../../composables'
 import { Slots } from '../../context'
 
@@ -47,11 +47,13 @@ const getType = (node: GraphNode) => {
   return slot
 }
 </script>
+
 <script lang="ts">
 export default {
   name: 'Nodes',
 }
 </script>
+
 <template>
   <div class="vue-flow__nodes vue-flow__container">
     <NodeWrapper

package/src/container/SelectionPane/SelectionPane.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { EdgeChange, NodeChange } from '../../types'
-import { useVueFlow, useKeyPress } from '../../composables'
+import type { EdgeChange, NodeChange } from '../../types'
+import { useKeyPress, useVueFlow } from '../../composables'
 import { getConnectedEdges } from '../../utils'
 import NodesSelection from '../../components/NodesSelection/NodesSelection.vue'
 import UserSelection from '../../components/UserSelection/UserSelection.vue'
@@ -69,12 +69,14 @@ const selectionKeyPressed = useKeyPress($$(selectionKeyCode), (keyPressed) => {
   })
 })
 </script>
+
 <script lang="ts">
 export default {
   name: 'SelectionPane',
   inheritAttrs: false,
 }
 </script>
+
 <template>
   <UserSelection v-if="selectionKeyPressed" :key="`user-selection-${id}`" />
   <NodesSelection v-if="nodesSelectionActive" :key="`nodes-selection-${id}`" />

package/src/container/Viewport/Transform.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import NodeRenderer from '../NodeRenderer/NodeRenderer.vue'
 import EdgeRenderer from '../EdgeRenderer/EdgeRenderer.vue'
-import { useVueFlow, useZoomPanHelper, useWindow } from '../../composables'
-import { Dimensions, FlowExportObject, FlowInstance, XYPosition } from '../../types'
+import { useVueFlow, useWindow, useZoomPanHelper } from '../../composables'
+import type { Dimensions, FlowExportObject, FlowInstance, XYPosition } from '../../types'
 import { pointToRendererPoint } from '../../utils'
 
 const { id, nodes, edges, viewport, snapToGrid, snapGrid, dimensions, setState, fitViewOnInit, emits } = $(useVueFlow())
@@ -68,11 +68,13 @@ onMounted(async () => {
   emits.paneReady(instance)
 })
 </script>
+
 <script lang="ts">
 export default {
   name: 'Transform',
 }
 </script>
+
 <template>
   <div
     :key="`transform-${id}`"

package/src/container/Viewport/Viewport.vue

@@ -1,7 +1,9 @@
 <script lang="ts" setup>
-import { D3ZoomEvent, zoom, zoomIdentity, ZoomTransform } from 'd3-zoom'
+import type { D3ZoomEvent, ZoomTransform } from 'd3-zoom'
+import { zoom, zoomIdentity } from 'd3-zoom'
 import { pointer, select } from 'd3-selection'
-import { FlowTransform, PanOnScrollMode } from '../../types'
+import type { FlowTransform } from '../../types'
+import { PanOnScrollMode } from '../../types'
 import { useKeyPress, useVueFlow } from '../../composables'
 import { clamp, clampPosition } from '../../utils'
 import SelectionPane from '../SelectionPane/SelectionPane.vue'
@@ -177,11 +179,13 @@ onMounted(() => {
   })
 })
 </script>
+
 <script lang="ts">
 export default {
   name: 'Viewport',
 }
 </script>
+
 <template>
   <div ref="viewport" :key="`viewport-${id}`" class="vue-flow__viewport vue-flow__container">
     <Transform>

package/src/container/VueFlow/VueFlow.vue

@@ -52,11 +52,13 @@ useHooks(emit, hooks.value)
 
 provide(Slots, useSlots())
 </script>
+
 <script lang="ts">
 export default {
   name: 'VueFlow',
 }
 </script>
+
 <template>
   <div class="vue-flow">
     <Viewport>

package/src/container/VueFlow/watch.ts

@@ -1,6 +1,6 @@
-import { Ref, ToRefs } from 'vue'
-import { WatchPausableReturn } from '@vueuse/core'
-import { FlowProps, GraphEdge, GraphNode, VueFlowStore } from '~/types'
+import type { Ref, ToRefs } from 'vue'
+import type { WatchPausableReturn } from '@vueuse/core'
+import type { FlowProps, GraphEdge, GraphNode, VueFlowStore } from '~/types'
 
 const isDef = <T>(val: T): val is NonNullable<T> => typeof val !== 'undefined'
 export default (models: ToRefs<Pick<FlowProps, 'nodes' | 'edges' | 'modelValue'>>, props: FlowProps, store: VueFlowStore) => {

package/src/context/index.ts

@@ -1,5 +1,5 @@
-import { InjectionKey, Slots as TSlots } from 'vue'
-import { VueFlowStore } from '~/types'
+import type { InjectionKey, Slots as TSlots } from 'vue'
+import type { VueFlowStore } from '~/types'
 
 export const VueFlow: InjectionKey<VueFlowStore> = Symbol('vueFlow')
 export const NodeId: InjectionKey<string> = Symbol('nodeId')

package/src/env.d.ts

@@ -3,7 +3,7 @@
 /// <reference types="vue/macros-global" />
 
 declare module '*.vue' {
-  import { DefineComponent } from 'vue'
+  import type { DefineComponent } from 'vue'
   // eslint-disable-next-line @typescript-eslint/ban-types
   const component: DefineComponent<{}, {}, any>
   export default component

package/src/store/actions.ts

@@ -1,6 +1,7 @@
 import useState from './state'
-import {
+import type {
   Actions,
+  ComputedGetters,
   Connection,
   CoordinateExtent,
   Edge,
@@ -13,7 +14,6 @@ import {
   NodeDimensionChange,
   NodePositionChange,
   State,
-  ComputedGetters,
 } from '~/types'
 import {
   applyChanges,

package/src/store/getters.ts

@@ -1,5 +1,5 @@
 import { defaultEdgeTypes, defaultNodeTypes } from './state'
-import { State, GraphEdge, GraphNode, ComputedGetters } from '~/types'
+import type { ComputedGetters, GraphEdge, GraphNode, State } from '~/types'
 import { getNodesInside, isEdgeVisible } from '~/utils'
 
 export default (state: State): ComputedGetters => {

package/src/store/hooks.ts

@@ -1,4 +1,4 @@
-import { EmitFunc, FlowHooks } from '~/types'
+import type { EmitFunc, FlowHooks } from '~/types'
 
 // flow event hooks
 export const createHooks = (): FlowHooks => ({

package/src/store/index.ts

@@ -1,3 +1,4 @@
 export { default as useHooks, createHooks } from './hooks'
-export * from './actions'
-export * from './state'
+export { default as useActions } from './actions'
+export { default as useState } from './state'
+export { default as useGetters } from './getters'

package/src/store/state.ts

@@ -1,22 +1,15 @@
 import { createHooks } from './hooks'
+import type { DefaultEdgeTypes, DefaultNodeTypes, FlowOptions, State } from '~/types'
+import { ConnectionLineType, ConnectionMode, PanOnScrollMode } from '~/types'
 import {
-  ConnectionMode,
-  State,
-  PanOnScrollMode,
-  DefaultNodeTypes,
-  DefaultEdgeTypes,
-  ConnectionLineType,
-  FlowOptions,
-} from '~/types'
-import {
+  BezierEdge,
   DefaultNode,
   InputNode,
   OutputNode,
-  BezierEdge,
+  SimpleBezierEdge,
   SmoothStepEdge,
   StepEdge,
   StraightEdge,
-  SimpleBezierEdge,
 } from '~/components'
 
 export const defaultNodeTypes: DefaultNodeTypes = {

package/src/types/changes.ts

@@ -1,38 +1,38 @@
-import { XYPosition, Dimensions, ElementData } from './flow'
-import { NodeHandleBounds, Node } from './node'
-import { Edge } from './edge'
+import type { Dimensions, ElementData, XYPosition } from './flow'
+import type { Node, NodeHandleBounds } from './node'
+import type { Edge } from './edge'
 
-export type NodeDimensionChange = {
+export interface NodeDimensionChange {
   id: string
   type: 'dimensions'
   dimensions: Dimensions
   handleBounds?: NodeHandleBounds
 }
 
-export type NodePositionChange = {
+export interface NodePositionChange {
   id: string
   type: 'position'
   position?: XYPosition
   dragging?: boolean
 }
 
-export type NodeSelectionChange = {
+export interface NodeSelectionChange {
   id: string
   type: 'select'
   selected: boolean
 }
 
-export type NodeRemoveChange = {
+export interface NodeRemoveChange {
   id: string
   type: 'remove'
 }
 
-export type NodeAddChange<Data = ElementData> = {
+export interface NodeAddChange<Data = ElementData> {
   item: Node<Data>
   type: 'add'
 }
 
-export type NodeResetChange<Data = ElementData> = {
+export interface NodeResetChange<Data = ElementData> {
   item: Node<Data>
   type: 'reset'
 }
@@ -47,11 +47,11 @@ export type NodeChange =
 
 export type EdgeSelectionChange = NodeSelectionChange
 export type EdgeRemoveChange = NodeRemoveChange
-export type EdgeAddChange<Data = ElementData> = {
+export interface EdgeAddChange<Data = ElementData> {
   item: Edge<Data>
   type: 'add'
 }
-export type EdgeResetChange<Data = ElementData> = {
+export interface EdgeResetChange<Data = ElementData> {
   item: Edge<Data>
   type: 'reset'
 }

package/src/types/components.ts

@@ -1,8 +1,8 @@
-import { Component, CSSProperties, DefineComponent, HTMLAttributes, VNode } from 'vue'
-import { BackgroundVariant, Dimensions, ElementData, XYPosition } from './flow'
-import { GraphNode, NodeProps } from './node'
-import { EdgeProps } from './edge'
-import { FitViewParams } from './zoom'
+import type { CSSProperties, Component, DefineComponent, HTMLAttributes, VNode } from 'vue'
+import type { BackgroundVariant, Dimensions, ElementData, XYPosition } from './flow'
+import type { GraphNode, NodeProps } from './node'
+import type { EdgeProps } from './edge'
+import type { FitViewParams } from './zoom'
 
 /** Global component names are components registered to the vue instance and are "autoloaded" by their string name */
 type GlobalComponentName = string

package/src/types/connection.ts

@@ -1,7 +1,7 @@
-import { CSSProperties } from 'vue'
-import { Position } from './flow'
-import { GraphNode } from './node'
-import { HandleElement, HandleType } from './handle'
+import type { CSSProperties } from 'vue'
+import type { Position } from './flow'
+import type { GraphNode } from './node'
+import type { HandleElement, HandleType } from './handle'
 
 /** Connection line types (same as default edge types */
 export enum ConnectionLineType {
@@ -24,7 +24,7 @@ export interface Connection {
 }
 
 /** The source nodes params when connection is initiated */
-export type OnConnectStartParams = {
+export interface OnConnectStartParams {
   /** Source node id */
   nodeId?: string
   /** Source handle id */

package/src/types/edge.ts

@@ -1,7 +1,7 @@
-import { Component, CSSProperties, VNode } from 'vue'
-import { Position, BaseElement, ElementData } from './flow'
-import { GraphNode } from './node'
-import { DefaultEdgeTypes, EdgeComponent, EdgeTextProps } from './components'
+import type { CSSProperties, Component, VNode } from 'vue'
+import type { BaseElement, ElementData, Position } from './flow'
+import type { GraphNode } from './node'
+import type { DefaultEdgeTypes, EdgeComponent, EdgeTextProps } from './components'
 
 /** Edge markers */
 export enum MarkerType {

package/src/types/flow.ts

@@ -1,9 +1,9 @@
-import { Component, CSSProperties, VNode } from 'vue'
-import { GraphEdge, Edge, DefaultEdgeOptions } from './edge'
-import { GraphNode, CoordinateExtent, Node } from './node'
-import { ConnectionLineType, ConnectionMode } from './connection'
-import { KeyCode, PanOnScrollMode, ViewportFuncs } from './zoom'
-import { DefaultEdgeTypes, DefaultNodeTypes, EdgeComponent, NodeComponent } from './components'
+import type { CSSProperties, Component, VNode } from 'vue'
+import type { DefaultEdgeOptions, Edge, GraphEdge } from './edge'
+import type { CoordinateExtent, GraphNode, Node } from './node'
+import type { ConnectionLineType, ConnectionMode } from './connection'
+import type { KeyCode, PanOnScrollMode, ViewportFuncs } from './zoom'
+import type { DefaultEdgeTypes, DefaultNodeTypes, EdgeComponent, NodeComponent } from './components'
 
 export type ElementData = any
 
@@ -77,7 +77,7 @@ export interface SelectionRect extends Rect {
   draw: boolean
 }
 
-export type FlowExportObject = {
+export interface FlowExportObject {
   nodes: GraphNode[]
   edges: GraphEdge[]
   position: [number, number]
@@ -99,9 +99,9 @@ export interface FlowProps {
   nodes?: Node[]
   edges?: Edge[]
   /** either use the edgeTypes prop to define your edge-types or use slots (<template #edge-mySpecialType="props">) */
-  edgeTypes?: { [key in keyof DefaultEdgeTypes]?: EdgeComponent } & { [key: string]: EdgeComponent }
+  edgeTypes?: { [key in keyof DefaultEdgeTypes]?: EdgeComponent } & Record<string, EdgeComponent>
   /** either use the nodeTypes prop to define your node-types or use slots (<template #node-mySpecialType="props">) */
-  nodeTypes?: { [key in keyof DefaultNodeTypes]?: NodeComponent } & { [key: string]: NodeComponent }
+  nodeTypes?: { [key in keyof DefaultNodeTypes]?: NodeComponent } & Record<string, NodeComponent>
   connectionMode?: ConnectionMode
   connectionLineType?: ConnectionLineType
   connectionLineStyle?: CSSProperties | null

package/src/types/handle.ts

@@ -1,7 +1,7 @@
-import { Dimensions, Position, XYPosition } from './flow'
-import { Connection } from './connection'
-import { GraphEdge } from './edge'
-import { GraphNode } from './node'
+import type { Dimensions, Position, XYPosition } from './flow'
+import type { Connection } from './connection'
+import type { GraphEdge } from './edge'
+import type { GraphNode } from './node'
 
 export type HandleType = 'source' | 'target'
 

package/src/types/hooks.ts

@@ -1,12 +1,12 @@
-import { EventHook, EventHookOn, EventHookTrigger } from '@vueuse/core'
-import { MouseTouchEvent } from '@braks/revue-draggable'
-import { D3ZoomEvent } from 'd3-zoom'
-import { FlowInstance } from './flow'
-import { GraphEdge } from './edge'
-import { GraphNode } from './node'
-import { Connection, OnConnectStartParams } from './connection'
-import { FlowTransform } from './zoom'
-import { EdgeChange, NodeChange } from './changes'
+import type { EventHook, EventHookOn, EventHookTrigger } from '@vueuse/core'
+import type { MouseTouchEvent } from '@braks/revue-draggable'
+import type { D3ZoomEvent } from 'd3-zoom'
+import type { FlowInstance } from './flow'
+import type { GraphEdge } from './edge'
+import type { GraphNode } from './node'
+import type { Connection, OnConnectStartParams } from './connection'
+import type { FlowTransform } from './zoom'
+import type { EdgeChange, NodeChange } from './changes'
 
 export interface FlowEvents {
   nodesChange: NodeChange[]

package/src/types/node.ts

@@ -1,12 +1,12 @@
-import { Component, VNode } from 'vue'
-import { XYPosition, Position, SnapGrid, BaseElement, XYZPosition, Dimensions, ElementData } from './flow'
-import { DefaultNodeTypes, NodeComponent } from './components'
-import { HandleElement, ValidConnectionFunc } from './handle'
+import type { Component, VNode } from 'vue'
+import type { BaseElement, Dimensions, ElementData, Position, SnapGrid, XYPosition, XYZPosition } from './flow'
+import type { DefaultNodeTypes, NodeComponent } from './components'
+import type { HandleElement, ValidConnectionFunc } from './handle'
 
 /** Defined as [[x-from, y-from], [x-to, y-to]] **/
 export type CoordinateExtent = [[number, number], [number, number]]
 
-export type NodeHandleBounds = {
+export interface NodeHandleBounds {
   source?: HandleElement[]
   target?: HandleElement[]
 }

package/src/types/store.ts

@@ -1,21 +1,35 @@
-import { ComputedRef, CSSProperties, ToRefs } from 'vue'
-import { Dimensions, ElementData, Elements, FlowElements, FlowInstance, FlowOptions, Rect, SnapGrid, XYPosition } from './flow'
-import { EdgeComponent, NodeComponent, DefaultNodeTypes, DefaultEdgeTypes } from './components'
-import { Connection, ConnectionLineType, ConnectionMode } from './connection'
-import { DefaultEdgeOptions, Edge, GraphEdge } from './edge'
-import { GraphNode, CoordinateExtent, Node } from './node'
-import { D3Selection, D3Zoom, D3ZoomHandler, KeyCode, PanOnScrollMode, Viewport } from './zoom'
-import { FlowHooks, FlowHooksEmit, FlowHooksOn } from './hooks'
-import { NodeChange, EdgeChange } from './changes'
-import { StartHandle, HandleType } from './handle'
+import type { CSSProperties, ComputedRef, ToRefs } from 'vue'
+import type {
+  Dimensions,
+  ElementData,
+  Elements,
+  FlowElements,
+  FlowInstance,
+  FlowOptions,
+  Rect,
+  SnapGrid,
+  XYPosition,
+} from './flow'
+import type { DefaultEdgeTypes, DefaultNodeTypes, EdgeComponent, NodeComponent } from './components'
+import type { Connection, ConnectionLineType, ConnectionMode } from './connection'
+import type { DefaultEdgeOptions, Edge, GraphEdge } from './edge'
+import type { CoordinateExtent, GraphNode, Node } from './node'
+import type { D3Selection, D3Zoom, D3ZoomHandler, KeyCode, PanOnScrollMode, Viewport } from './zoom'
+import type { FlowHooks, FlowHooksEmit, FlowHooksOn } from './hooks'
+import type { EdgeChange, NodeChange } from './changes'
+import type { HandleType, StartHandle } from './handle'
 
-export type UpdateNodeDimensionsParams = {
+export interface UpdateNodeDimensionsParams {
   id: string
   nodeElement: HTMLDivElement
   forceUpdate?: boolean
 }
 
-export type UpdateNodePositionsParams = { id?: string; diff?: XYPosition; dragging?: boolean }
+export interface UpdateNodePositionsParams {
+  id?: string
+  diff?: XYPosition
+  dragging?: boolean
+}
 
 export interface State extends Omit<FlowOptions, 'id' | 'modelValue'> {
   /** Event hooks, you can manipulate the triggers at your own peril */

package/src/types/zoom.ts

@@ -1,12 +1,16 @@
-import { Selection, ZoomBehavior } from 'd3'
-import { Rect, XYPosition } from './flow'
+import type { Selection, ZoomBehavior } from 'd3'
+import type { Rect, XYPosition } from './flow'
 
 export type D3Zoom = ZoomBehavior<HTMLDivElement, unknown>
 export type D3Selection = Selection<HTMLDivElement, unknown, any, any>
 export type D3ZoomHandler = (this: HTMLDivElement, event: any, d: unknown) => void
 
 /** Transform x, y, z */
-export type Viewport = { x: number; y: number; zoom: number }
+export interface Viewport {
+  x: number
+  y: number
+  zoom: number
+}
 
 export type KeyCode = number | string
 
@@ -16,7 +20,7 @@ export enum PanOnScrollMode {
   Horizontal = 'horizontal',
 }
 
-export type ViewportFuncsOptions = {
+export interface ViewportFuncsOptions {
   duration?: number
 }
 
@@ -32,7 +36,7 @@ export type FitViewParams = {
   nodes?: string[]
 } & ViewportFuncsOptions
 
-export type FlowTransform = {
+export interface FlowTransform {
   x: number
   y: number
   zoom: number

package/src/utils/changes.ts

@@ -1,23 +1,23 @@
 import { clampPosition, isGraphEdge, isGraphNode } from './graph'
-import {
+import type {
+  CoordinateExtent,
+  Edge,
   EdgeChange,
   EdgeSelectionChange,
   ElementChange,
-  FlowElements,
-  GraphNode,
-  NodeChange,
-  NodeSelectionChange,
-  NodePositionChange,
-  Getters,
-  CoordinateExtent,
-  XYPosition,
-  GraphEdge,
-  Node,
   FlowElement,
-  Edge,
+  FlowElements,
+  Getters,
+  GraphEdge,
+  GraphNode,
+  Node,
+  NodeChange,
+  NodePositionChange,
+  NodeSelectionChange,
+  XYPosition,
 } from '~/types'
 
-type CreatePositionChangeParams = {
+interface CreatePositionChangeParams {
   node: GraphNode
   nodeExtent: CoordinateExtent
   diff?: XYPosition

package/src/utils/edge.ts

@@ -1,5 +1,6 @@
 import { rectToBox } from './graph'
-import { EdgePositions, Getters, GraphEdge, GraphNode, HandleElement, Position, Rect, Viewport, XYPosition } from '~/types'
+import type { EdgePositions, Getters, GraphEdge, GraphNode, HandleElement, Rect, Viewport, XYPosition } from '~/types'
+import { Position } from '~/types'
 
 export const getHandlePosition = (position: Position, rect: Rect, handle?: HandleElement): XYPosition => {
   const x = (handle?.x ?? 0) + rect.x

package/src/utils/graph.ts

@@ -1,4 +1,4 @@
-import {
+import type {
   Box,
   Connection,
   CoordinateExtent,

package/src/utils/node.ts

@@ -1,5 +1,5 @@
 import { getDimensions } from './graph'
-import { HandleElement, Position } from '~/types'
+import type { HandleElement, Position } from '~/types'
 
 export const getHandleBoundsByHandleType = (
   selector: string,

package/tsconfig.build.json

@@ -4,10 +4,7 @@
     "baseUrl": ".",
     "module": "ESNext",
     "target": "es2017",
-    "lib": [
-      "DOM",
-      "ESNext"
-    ],
+    "lib": ["DOM", "ESNext"],
     "declaration": true,
     "declarationDir": "./dist",
     "strict": true,
@@ -19,25 +16,15 @@
     "noUnusedLocals": false,
     "strictNullChecks": true,
     "forceConsistentCasingInFileNames": true,
-    "types": [
-      "vite/client",
-      "vue/macros"
-    ],
+    "types": ["vite/client", "vue/macros"],
     "paths": {
-      "~/*": [
-        "src/*"
-      ]
+      "~/*": ["src/*"]
     },
     "plugins": [
       // Transform paths in output .d.ts files (Include this line if you output declarations files)
       { "transform": "typescript-transform-paths", "afterDeclarations": true }
     ]
   },
-  "include": [
-    "src"
-  ],
-  "exclude": [
-    "node_modules",
-    "dist",
-  ]
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
 }

package/tsconfig.docs.json

@@ -4,10 +4,7 @@
     "baseUrl": ".",
     "module": "ESNext",
     "target": "es2017",
-    "lib": [
-      "DOM",
-      "ESNext"
-    ],
+    "lib": ["DOM", "ESNext"],
     "strict": true,
     "esModuleInterop": true,
     "incremental": false,
@@ -17,20 +14,14 @@
     "noUnusedLocals": false,
     "strictNullChecks": true,
     "forceConsistentCasingInFileNames": true,
-    "types": [
-      "vite/client",
-    ],
+    "types": ["vite/client"],
     "paths": {
-      "~/*": [
-        "src/*"
-      ]
+      "~/*": ["src/*"]
     },
     "plugins": [
       // Transform paths in output .d.ts files (Include this line if you output declarations files)
       { "transform": "typescript-transform-paths", "afterDeclarations": true }
     ]
   },
-  "exclude": [
-    "node_modules"
-  ]
+  "exclude": ["node_modules"]
 }

package/tsconfig.json

@@ -3,10 +3,7 @@
     "baseUrl": ".",
     "module": "ESNext",
     "target": "es2017",
-    "lib": [
-      "DOM",
-      "ESNext"
-    ],
+    "lib": ["DOM", "ESNext"],
     "strict": true,
     "esModuleInterop": true,
     "incremental": false,
@@ -18,26 +15,16 @@
     "forceConsistentCasingInFileNames": true,
     "declaration": true,
     "declarationDir": "./dist",
-    "types": [
-      "vite/client",
-      "vue/macros"
-    ],
+    "types": ["vite/client", "vue/macros"],
     "paths": {
-      "~/*": [
-        "src/*"
-      ]
+      "~/*": ["src/*"]
     },
     "plugins": [
       // Transform paths in output .d.ts files (Include this line if you output declarations files)
       { "transform": "typescript-transform-paths", "afterDeclarations": true }
     ]
   },
-  "include": [
-    "./src"
-  ],
-  "exclude": [
-    "node_modules",
-    "dist"
-  ],
+  "include": ["./src"],
+  "exclude": ["node_modules", "dist"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }