update: create vue.d.ts files

* add vue-tsc to emit d.ts files from vue components
* use absolute paths in components
* avoids conflicts with ts custom paths in vue-tsc generated vue.d.ts files

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

src/additional-components/Background/Background.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { SVGAttributes } from 'vue'
-import { BackgroundVariant } from '~/types'
-import { useStore } from '~/composables'
+import { BackgroundVariant } from '../../types'
+import { useStore } from '../../composables'
 
 export interface BackgroundProps extends SVGAttributes {
   variant?: BackgroundVariant

src/additional-components/Controls/Controls.vue

@@ -1,13 +1,13 @@
 <script lang="ts" setup>
 import { HTMLAttributes } from 'vue'
+import { FitViewParams } from '../../types'
+import { useZoomPanHelper, useStore } from '../../composables'
 import ControlButton from './ControlButton.vue'
 import PlusIcon from '~/assets/icons/plus.svg'
 import MinusIcon from '~/assets/icons/minus.svg'
 import Fitview from '~/assets/icons/fitview.svg'
 import Lock from '~/assets/icons/lock.svg'
 import Unlock from '~/assets/icons/unlock.svg'
-import { FitViewParams } from '~/types'
-import { useZoomPanHelper, useStore } from '~/composables'
 
 export interface ControlProps extends HTMLAttributes {
   showZoom?: boolean

src/additional-components/MiniMap/MiniMap.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { HTMLAttributes } from 'vue'
+import { Node } from '../../types'
+import { useStore, useWindow } from '../../composables'
 import MiniMapNode from './MiniMapNode.vue'
 import { getBoundsofRects, getRectOfNodes } from '~/utils'
-import { Node } from '~/types'
-import { useStore, useWindow } from '~/composables'
 
 type StringFunc = (node: Node) => string
 type ShapeRendering = 'inherit' | 'auto' | 'geometricPrecision' | 'optimizeSpeed' | 'crispEdges' | undefined

src/components/ConnectionLine/ConnectionLine.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
 import { getBezierPath, getSmoothStepPath } from '../Edges/utils'
-import { ConnectionLineType, HandleElement, Node, Position } from '~/types'
-import { useStore } from '~/composables'
+import { useStore } from '../../composables'
+import { ConnectionLineType, HandleElement, Node, Position } from '../../types'
 
 interface ConnectionLineProps {
   sourceNode: Node

src/components/Edges/BezierEdge.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
+import { ArrowHeadType, EdgeProps, ElementId, Position } from '../../types'
 import { getCenter, getMarkerEnd, getBezierPath } from './utils'
 import EdgeText from './EdgeText.vue'
-import { ArrowHeadType, EdgeProps, ElementId, Position } from '~/types'
 
 interface BezierEdgeProps extends EdgeProps {
   id: ElementId

src/components/Edges/Edge.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
+import { useHandle, useHooks, useStore } from '../../composables'
+import { ConnectionMode, Edge, EdgePositions, EdgeType, Position } from '../../types'
 import EdgeAnchor from './EdgeAnchor.vue'
 import { getEdgePositions, getHandle, getSourceTargetNodes, isEdgeVisible } from '~/container/EdgeRenderer/utils'
 import { isEdge } from '~/utils'
-import { ConnectionMode, Edge, EdgePositions, EdgeType, Position } from '~/types'
-import { useHandle, useHooks, useStore } from '~/composables'
 
 interface EdgeProps {
   type: EdgeType

src/components/Edges/EdgeAnchor.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { HTMLAttributes } from 'vue'
-import { Position } from '~/types'
+import { Position } from '../../types'
 
 const shiftX = (x: number, shift: number, position: Position): number => {
   if (position === Position.Left) return x - shift

src/components/Edges/SmoothStepEdge.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
+import { ArrowHeadType, EdgeProps, ElementId, Position } from '../../types'
 import EdgeText from './EdgeText.vue'
 import { getCenter, getMarkerEnd, getSmoothStepPath } from './utils'
-import { ArrowHeadType, EdgeProps, ElementId, Position } from '~/types'
 
 interface SmoothStepEdgeProps extends EdgeProps {
   id: ElementId

src/components/Edges/StepEdge.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
+import { ArrowHeadType, EdgeProps, ElementId, Position } from '../../types'
 import SmoothStepEdge from './SmoothStepEdge.vue'
-import { ArrowHeadType, EdgeProps, ElementId, Position } from '~/types'
 
 export interface StepEdgeProps extends EdgeProps {
   id: ElementId

src/components/Edges/StraightEdge.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
+import { ArrowHeadType, EdgeProps, ElementId, Position } from '../../types'
 import EdgeText from './EdgeText.vue'
 import { getMarkerEnd, getBezierPath } from './utils'
-import { ArrowHeadType, EdgeProps, ElementId, Position } from '~/types'
 
 interface StraightEdgeProps extends EdgeProps {
   id: ElementId

src/components/Handle/Handle.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { Position, ValidConnectionFunc } from '~/types'
+import { useHandle, useHooks, useStore } from '../../composables'
+import { Position, ValidConnectionFunc } from '../../types'
 import { NodeIdContextKey } from '~/context'
-import { useHandle, useHooks, useStore } from '~/composables'
 
 interface HandleProps {
   id?: string

src/components/Nodes/DefaultNode.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import Handle from '../Handle/Handle.vue'
-import { NodeProps, Position } from '~/types'
+import { NodeProps, Position } from '../../types'
 
 interface DefaultNodeProps extends NodeProps {
   data?: NodeProps['data']

src/components/Nodes/InputNode.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import Handle from '../Handle/Handle.vue'
-import { NodeProps, Position } from '~/types'
+import { NodeProps, Position } from '../../types'
 
 interface InputNodeProps extends NodeProps {
   data?: NodeProps['data']

src/components/Nodes/Node.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { DraggableEventListener, DraggableCore } from '@braks/revue-draggable'
-import { Node, NodeType, SnapGrid } from '~/types'
+import { useHooks, useStore } from '../../composables'
+import { Node, NodeType, SnapGrid } from '../../types'
 import { NodeIdContextKey } from '~/context'
-import { useHooks, useStore } from '~/composables'
 
 interface NodeProps {
   node: Node

src/components/Nodes/OutputNode.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import Handle from '../Handle/Handle.vue'
-import { NodeProps, Position } from '~/types'
+import { NodeProps, Position } from '../../types'
 
 interface OutputNodeProps extends NodeProps {
   data?: NodeProps['data']

src/components/NodesSelection/NodesSelection.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { Draggable, DraggableEventListener } from '@braks/revue-draggable'
-import { Node } from '~/types'
+import { useHooks, useStore } from '../../composables'
+import { Node } from '../../types'
 import { getRectOfNodes, isNode } from '~/utils'
-import { useHooks, useStore } from '~/composables'
 
 const store = useStore()
 const hooks = useHooks()

src/components/UserSelection/UserSelection.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
+import { useStore } from '../../composables'
 import SelectionRect from './SelectionRect.vue'
 import { getMousePosition } from './utils'
-import { useStore } from '~/composables'
 
 const store = useStore()
 const el = templateRef('user-selection', null)

src/components/UserSelection/utils.ts

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

src/container/EdgeRenderer/EdgeRenderer.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
+import { ConnectionLineType, EdgeType } from '../../types'
+import { useStore } from '../../composables'
+import Edge from '../../components/Edges/Edge.vue'
+import ConnectionLine from '../../components/ConnectionLine/ConnectionLine.vue'
 import MarkerDefinitions from './MarkerDefinitions.vue'
-import Edge from '~/components/Edges/Edge.vue'
-import ConnectionLine from '~/components/ConnectionLine/ConnectionLine.vue'
-import { ConnectionLineType, EdgeType } from '~/types'
-import { useStore } from '~/composables'
 
 interface EdgeRendererProps {
   edgeTypes: Record<string, EdgeType>

src/container/EdgeRenderer/utils.ts

@@ -1,5 +1,5 @@
+import { Edge, EdgePositions, ElementId, HandleElement, Node, Position, Transform, XYPosition } from '../../types'
 import { rectToBox } from '~/utils'
-import { Edge, EdgePositions, ElementId, HandleElement, Node, Position, Transform, XYPosition } from '~/types'
 
 export function getHandlePosition(position: Position, node: Node, handle: any | null = null): XYPosition {
   const x = (handle?.x || 0) + node.__rf?.position?.x

src/container/NodeRenderer/NodeRenderer.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import Node from '~/components/Nodes/Node.vue'
-import { NodeType, Node as TNode } from '~/types'
+import { NodeType, Node as TNode } from '../../types'
+import { useStore } from '../../composables'
+import Node from '../../components/Nodes/Node.vue'
 import { getNodesInside } from '~/utils'
-import { useStore } from '~/composables'
 
 interface NodeRendererProps {
   nodeTypes: Record<string, NodeType>

src/container/SelectionPane/SelectionPane.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { ElementId, FlowElement, KeyCode } from '~/types'
-import NodesSelection from '~/components/NodesSelection/NodesSelection.vue'
-import UserSelection from '~/components/UserSelection/UserSelection.vue'
-import { getConnectedEdges, isNode } from '~/utils'
-import { useHooks, useStore, useKeyPress } from '~/composables'
+import { ElementId, FlowElement, KeyCode } from '../../types'
+import { useHooks, useStore, useKeyPress } from '../../composables'
+import NodesSelection from '../../components/NodesSelection/NodesSelection.vue'
+import UserSelection from '../../components/UserSelection/UserSelection.vue'
+import { getConnectedEdges, isNode } from '../../utils'
 
 interface SelectionPaneProps {
   selectionKeyCode?: KeyCode

src/container/VueFlow/VueFlow.vue

@@ -1,9 +1,5 @@
 <script lang="ts" setup>
 import { CSSProperties, onBeforeUnmount } from 'vue'
-import ZoomPane from '~/container/ZoomPane/ZoomPane.vue'
-import SelectionPane from '~/container/SelectionPane/SelectionPane.vue'
-import NodeRenderer from '~/container/NodeRenderer/NodeRenderer.vue'
-import EdgeRenderer from '~/container/EdgeRenderer/EdgeRenderer.vue'
 import {
   ConnectionLineType,
   ConnectionMode,
@@ -15,10 +11,14 @@ import {
   TranslateExtent,
   NodeExtent,
   FlowOptions,
-} from '~/types'
-import { DefaultNode, InputNode, OutputNode } from '~/components/Nodes'
-import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '~/components/Edges'
-import { useHooks, useStore, createHooks } from '~/composables'
+} from '../../types'
+import { useHooks, useStore, createHooks } from '../../composables'
+import ZoomPane from '../../container/ZoomPane/ZoomPane.vue'
+import SelectionPane from '../../container/SelectionPane/SelectionPane.vue'
+import NodeRenderer from '../../container/NodeRenderer/NodeRenderer.vue'
+import EdgeRenderer from '../../container/EdgeRenderer/EdgeRenderer.vue'
+import { DefaultNode, InputNode, OutputNode } from '../../components/Nodes'
+import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '../../components/Edges'
 
 export interface FlowProps extends FlowOptions {
   elements: Elements

src/container/ZoomPane/ZoomPane.vue

@@ -2,9 +2,9 @@
 import { D3ZoomEvent, zoom, zoomIdentity, ZoomTransform } from 'd3-zoom'
 import { get } from '@vueuse/core'
 import { pointer, select } from 'd3-selection'
-import { FlowTransform, KeyCode, PanOnScrollMode } from '~/types'
-import { useHooks, useKeyPress, useStore, useZoomPanHelper } from '~/composables'
-import { clamp, onLoadGetElements, onLoadProject, onLoadToObject } from '~/utils'
+import { FlowTransform, KeyCode, PanOnScrollMode } from '../../types'
+import { useHooks, useKeyPress, useStore, useZoomPanHelper } from '../../composables'
+import { clamp, onLoadGetElements, onLoadProject, onLoadToObject } from '../../utils'
 
 interface ZoomPaneProps {
   selectionKeyCode?: KeyCode