chore: lint files

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')