fix: typings for UseVueFlow

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

examples/router.ts

@@ -13,6 +13,10 @@ export const routes: RouterOptions['routes'] = [
     path: '/basic',
     component: () => import('./Basic/Basic.vue'),
   },
+  {
+    path: '/basic-options-api',
+    component: () => import('./Basic/BasicOptionsAPI.vue'),
+  },
   {
     path: '/custom-connectionline',
     component: () => import('./CustomConnectionLine/CustomConnectionLine.vue'),

src/components/Edges/BezierEdge.vue

@@ -9,6 +9,7 @@ const props = withDefaults(defineProps<EdgeProps>(), {
   sourcePosition: 'bottom' as Position,
   targetPosition: 'top' as Position,
   labelStyle: () => ({}),
+  label: () => '',
   labelShowBg: true,
   labelBgStyle: () => ({}),
 })

src/components/Edges/SmoothStepEdge.vue

@@ -8,7 +8,7 @@ const props = withDefaults(defineProps<SmoothStepEdgeProps>(), {
   selected: false,
   sourcePosition: 'bottom' as Position,
   targetPosition: 'top' as Position,
-  label: '',
+  label: () => '',
   labelStyle: () => ({}),
   labelShowBg: true,
   labelBgStyle: () => ({}),

src/components/Edges/StepEdge.vue

@@ -7,7 +7,7 @@ const props = withDefaults(defineProps<EdgeProps>(), {
   selected: false,
   sourcePosition: 'bottom' as Position,
   targetPosition: 'top' as Position,
-  label: '',
+  label: () => '',
   labelStyle: () => ({}),
   labelShowBg: true,
   labelBgStyle: () => ({}),

src/components/Edges/StraightEdge.vue

@@ -8,7 +8,7 @@ const props = withDefaults(defineProps<EdgeProps>(), {
   selected: false,
   sourcePosition: 'bottom' as Position,
   targetPosition: 'top' as Position,
-  label: '',
+  label: () => '',
   labelStyle: () => ({}),
   labelShowBg: true,
   labelBgStyle: () => ({}),

src/composables/useVueFlow.ts

@@ -19,7 +19,7 @@ export default <N = any, E = N>(options?: Partial<FlowOptions<N, E>>): UseVueFlo
       ...store.getters,
       ...store.actions,
       ...store.hooksOn,
-    } as unknown as UseVueFlow<N, E>
+    } as unknown as UseVueFlow
   }
   if (currentInstance) {
     provide(VueFlow, vueFlow)

src/store/actions.ts

@@ -2,7 +2,7 @@ import {
   CoordinateExtent,
   EdgeChange,
   Actions,
-  Getters,
+  ComputedGetters,
   State,
   GraphNode,
   Node,
@@ -101,7 +101,7 @@ export const parseChildren = (
   }
 }
 
-export default (state: State, getters: Getters): Actions => {
+export default (state: State, getters: ComputedGetters): Actions => {
   const updateNodePosition: Actions['updateNodePosition'] = ({ id, diff = { x: 0, y: 0 }, dragging }) => {
     const changes: NodeDimensionChange[] = []
 

src/store/getters.ts

@@ -1,8 +1,8 @@
 import { defaultEdgeTypes, defaultNodeTypes } from './state'
-import { Getters, State, GraphEdge, GraphNode } from '~/types'
+import { ComputedGetters, State, GraphEdge, GraphNode } from '~/types'
 import { getNodesInside, isEdgeVisible } from '~/utils'
 
-export default (state: State): Getters => {
+export default (state: State): ComputedGetters => {
   const getEdgeTypes = computed(() => {
     const edgeTypes: Record<string, any> = {
       ...defaultEdgeTypes,
@@ -69,17 +69,17 @@ export default (state: State): Getters => {
     return []
   })
 
-  const getSelectedNodes: Getters['getSelectedNodes'] = computed(() => state.nodes.filter((n) => n.selected))
+  const getSelectedNodes: ComputedGetters['getSelectedNodes'] = computed(() => state.nodes.filter((n) => n.selected))
-  const getSelectedEdges: Getters['getSelectedEdges'] = computed(() => state.edges.filter((e) => e.selected))
+  const getSelectedEdges: ComputedGetters['getSelectedEdges'] = computed(() => state.edges.filter((e) => e.selected))
-  const getSelectedElements: Getters['getSelectedElements'] = computed(() => [
+  const getSelectedElements: ComputedGetters['getSelectedElements'] = computed(() => [
     ...(getSelectedNodes.value ?? []),
     ...(getSelectedEdges.value ?? []),
   ])
 
   const nodeIds = computed(() => state.nodes.map((n) => n.id))
   const edgeIds = computed(() => state.edges.map((e) => e.id))
-  const getNode: Getters['getNode'] = computed(() => (id: string) => state.nodes[nodeIds.value.indexOf(id)])
+  const getNode: ComputedGetters['getNode'] = computed(() => (id: string) => state.nodes[nodeIds.value.indexOf(id)])
-  const getEdge: Getters['getEdge'] = computed(() => (id: string) => state.edges[edgeIds.value.indexOf(id)])
+  const getEdge: ComputedGetters['getEdge'] = computed(() => (id: string) => state.edges[edgeIds.value.indexOf(id)])
 
   return {
     getNode,

src/store/store.ts

@@ -27,5 +27,5 @@ export default (preloadedState?: FlowOptions): Store => {
     ...toRefs(state),
     ...getters,
     ...actions,
-  }
+  } as unknown as Store
 }

src/types/flow.ts

@@ -4,7 +4,7 @@ import { GraphEdge, Edge } from './edge'
 import { GraphNode, CoordinateExtent, Node } from './node'
 import { ConnectionLineType, ConnectionMode } from './connection'
 import { KeyCode, PanOnScrollMode, UseZoomPanHelper } from './zoom'
-import { Actions, Getters, State, FlowStore } from './store'
+import { Actions, ComputedGetters, State, FlowStore } from './store'
 import { FlowHooksOn } from './hooks'
 
 export type FlowElement<N = any, E = any> = GraphNode<N> | GraphEdge<E>
@@ -129,5 +129,5 @@ export type UseVueFlow<N = any, E = N> = {
   store: FlowStore<N, E>
 } & FlowHooksOn<N, E> &
   ToRefs<State<N, E>> &
-  Getters<N, E> &
+  ComputedGetters<N, E> &
   Actions<N, E>

src/types/store.ts

@@ -1,5 +1,5 @@
 import { ComputedRef } from 'vue'
-import { UnwrapNestedRefs, ToRefs } from '@vue/reactivity'
+import { ToRefs } from '@vue/reactivity'
 import { Dimensions, Elements, FlowElements, FlowInstance, FlowOptions, Rect, SnapGrid, Transform, XYPosition } from './flow'
 import { HandleType, EdgeComponent, NodeComponent } from './components'
 import { Connection, ConnectionLineType, ConnectionMode, SetConnectionId } from './connection'
@@ -93,22 +93,25 @@ export interface Actions<N = any, E = N> {
 }
 
 export interface Getters<N = any, E = N> {
-  getEdgeTypes: ComputedRef<Record<string, EdgeComponent>>
+  getEdgeTypes: Record<string, EdgeComponent>
-  getNodeTypes: ComputedRef<Record<string, NodeComponent>>
+  getNodeTypes: Record<string, NodeComponent>
-  getNodes: ComputedRef<GraphNode<N>[]>
+  getNodes: GraphNode<N>[]
-  getEdges: ComputedRef<GraphEdge<E>[]>
+  getEdges: GraphEdge<E>[]
-  getNode: ComputedRef<(id: string) => GraphNode<N> | undefined>
+  getNode: (id: string) => GraphNode<N> | undefined
-  getEdge: ComputedRef<(id: string) => GraphEdge<E> | undefined>
+  getEdge: (id: string) => GraphEdge<E> | undefined
-  getSelectedElements: ComputedRef<FlowElements<N, E>>
+  getSelectedElements: FlowElements<N, E>
-  getSelectedNodes: ComputedRef<GraphNode<N>[]>
+  getSelectedNodes: GraphNode<N>[]
-  getSelectedEdges: ComputedRef<GraphEdge<E>[]>
+  getSelectedEdges: GraphEdge<E>[]
 }
 
+export type ComputedGetters<N = any, E = N> = { [key in keyof Getters<N, E>]: ComputedRef<Getters<N, E>[key]> }
+
 interface StoreBase<N = any, E = N> {
   state: State<N, E>
   actions: Actions<N, E>
-  getters: Getters<N, E>
+  getters: ComputedGetters<N, E>
   hooksOn: FlowHooksOn<N, E>
 }
-export type Store<N = any, E = N> = StoreBase & ToRefs<State<N, E>> & Actions<N, E> & Getters<N, E>
+
-export type FlowStore<N = any, E = N> = UnwrapNestedRefs<Store<N, E>>
+export type Store<N = any, E = N> = StoreBase<N, E> & ToRefs<State<N, E>> & Actions<N, E> & ComputedGetters<N, E>
+export type FlowStore<N = any, E = N> = StoreBase<N, E> & State<N, E> & Actions<N, E> & Getters<N, E>

tsconfig.json

@@ -33,8 +33,9 @@
       { "transform": "typescript-transform-paths", "afterDeclarations": true }
     ]
   },
-  "include": ["src", "examples"],
+  "include": ["src"],
   "exclude": [
+    "examples",
     "node_modules",
     "build",
     "dist",