chore: update deps

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

packages/core/package.json

@@ -68,7 +68,7 @@
     "vue": "^3.2.25"
   },
   "dependencies": {
-    "@vueuse/core": "^9.13.0",
+    "@vueuse/core": "^10.1.2",
     "d3-drag": "^3.0.0",
     "d3-selection": "^3.0.0",
     "d3-zoom": "^3.0.0"
@@ -78,18 +78,18 @@
     "@types/d3": "^7.4.0",
     "@tooling/eslint-config": "workspace:*",
     "@tooling/tsconfig": "workspace:*",
-    "@vitejs/plugin-vue": "^4.0.0",
+    "@vitejs/plugin-vue": "^4.2.1",
-    "autoprefixer": "^10.4.13",
+    "autoprefixer": "^10.4.14",
-    "postcss": "^8.4.21",
+    "postcss": "^8.4.23",
     "postcss-cli": "^10.1.0",
     "postcss-nested": "^6.0.1",
     "ts-patch": "^2.1.0",
     "typescript-transform-paths": "^3.4.6",
-    "unplugin-auto-import": "^0.12.2",
+    "unplugin-auto-import": "0.12.2",
-    "unplugin-vue-macros": "1.8.2",
+    "unplugin-vue-macros": "^2.1.3",
-    "vite": "^4.1.4",
+    "vite": "^4.3.5",
     "vue": "^3.2.25",
-    "vue-tsc": "^1.2.0"
+    "vue-tsc": "^1.6.4"
   },
   "publishConfig": {
     "access": "public",

packages/core/src/auto-imports.d.ts

@@ -1,4 +1,7 @@
-// Generated by 'unplugin-auto-import'
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-auto-import
 export {}
 declare global {
   const $$: typeof import('vue/macros')['$$']
@@ -52,8 +55,10 @@ declare global {
   const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
   const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
   const createRemoveChange: typeof import('./utils/changes')['createRemoveChange']
+  const createReusableTemplate: typeof import('@vueuse/core')['createReusableTemplate']
   const createSelectionChange: typeof import('./utils/changes')['createSelectionChange']
   const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
+  const createTemplatePromise: typeof import('@vueuse/core')['createTemplatePromise']
   const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
   const customRef: typeof import('vue')['customRef']
   const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
@@ -108,21 +113,25 @@ declare global {
   const hasSelector: typeof import('./utils/drag')['hasSelector']
   const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
   const inject: typeof import('vue')['inject']
+  const isBoolean: typeof import('./utils/general')['isBoolean']
   const isDef: typeof import('./utils/store')['isDef']
   const isDefined: typeof import('@vueuse/core')['isDefined']
   const isEdge: typeof import('./utils/graph')['isEdge']
   const isEdgeVisible: typeof import('./utils/edge')['isEdgeVisible']
+  const isFunction: typeof import('./utils/general')['isFunction']
   const isGraphEdge: typeof import('./utils/graph')['isGraphEdge']
   const isGraphNode: typeof import('./utils/graph')['isGraphNode']
   const isInputDOMNode: typeof import('./composables/useKeyPress')['isInputDOMNode']
   const isMouseEvent: typeof import('./utils/general')['isMouseEvent']
   const isNode: typeof import('./utils/graph')['isNode']
+  const isNumber: typeof import('./utils/general')['isNumber']
   const isParentSelected: typeof import('./utils/graph')['isParentSelected']
   const isProxy: typeof import('vue')['isProxy']
   const isReactive: typeof import('vue')['isReactive']
   const isReadonly: typeof import('vue')['isReadonly']
   const isRect: typeof import('./utils/graph')['isRect']
   const isRef: typeof import('vue')['isRef']
+  const isString: typeof import('./utils/general')['isString']
   const isValidHandle: typeof import('./utils/handle')['isValidHandle']
   const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
   const markRaw: typeof import('vue')['markRaw']
@@ -167,7 +176,6 @@ declare global {
   const rendererPointToPoint: typeof import('./utils/graph')['rendererPointToPoint']
   const resetRecentHandle: typeof import('./utils/handle')['resetRecentHandle']
   const resolveComponent: typeof import('vue')['resolveComponent']
-  const resolveDirective: typeof import('vue')['resolveDirective']
   const resolveRef: typeof import('@vueuse/core')['resolveRef']
   const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
   const shallowReactive: typeof import('vue')['shallowReactive']
@@ -195,11 +203,14 @@ declare global {
   const updateEdgeAction: typeof import('./utils/store')['updateEdgeAction']
   const useActions: typeof import('./store/actions')['useActions']
   const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
+  const useAnimate: typeof import('@vueuse/core')['useAnimate']
+  const useArrayDifference: typeof import('@vueuse/core')['useArrayDifference']
   const useArrayEvery: typeof import('@vueuse/core')['useArrayEvery']
   const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
   const useArrayFind: typeof import('@vueuse/core')['useArrayFind']
   const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex']
   const useArrayFindLast: typeof import('@vueuse/core')['useArrayFindLast']
+  const useArrayIncludes: typeof import('@vueuse/core')['useArrayIncludes']
   const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin']
   const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
   const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
@@ -295,6 +306,8 @@ declare global {
   const useOnline: typeof import('@vueuse/core')['useOnline']
   const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
   const useParallax: typeof import('@vueuse/core')['useParallax']
+  const useParentElement: typeof import('@vueuse/core')['useParentElement']
+  const usePerformanceObserver: typeof import('@vueuse/core')['usePerformanceObserver']
   const usePermission: typeof import('@vueuse/core')['usePermission']
   const usePointer: typeof import('@vueuse/core')['usePointer']
   const usePointerLock: typeof import('@vueuse/core')['usePointerLock']
@@ -368,8 +381,10 @@ declare global {
   const watchArray: typeof import('@vueuse/core')['watchArray']
   const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
   const watchDebounced: typeof import('@vueuse/core')['watchDebounced']
+  const watchDeep: typeof import('@vueuse/core')['watchDeep']
   const watchEffect: typeof import('vue')['watchEffect']
   const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
+  const watchImmediate: typeof import('@vueuse/core')['watchImmediate']
   const watchOnce: typeof import('@vueuse/core')['watchOnce']
   const watchPausable: typeof import('@vueuse/core')['watchPausable']
   const watchPostEffect: typeof import('vue')['watchPostEffect']
@@ -379,3 +394,8 @@ declare global {
   const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
   const whenever: typeof import('@vueuse/core')['whenever']
 }
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
+}

packages/core/src/components/Edges/BaseEdge.ts

@@ -1,4 +1,3 @@
-import { isNumber } from '@vueuse/core'
 import type { Component, FunctionalComponent } from 'vue'
 import EdgeText from './EdgeText.vue'
 import type { BaseEdgeProps } from '~/types'

packages/core/src/components/Edges/EdgeText.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { isString } from '@vueuse/core'
 import type { EdgeTextProps } from '../../types/components'
 import type { Rect as RectType } from '../../types'
+import { isString } from '../../utils/general'
 
 const {
   x,
@@ -60,7 +60,7 @@ export default {
 
     <text v-bind="$attrs" ref="el" class="vue-flow__edge-text" :y="box.height / 2" dy="0.3em" :style="labelStyle">
       <slot>
-        <component :is="label" v-if="!isString(label)" />
+        <component :is="label as any" v-if="!isString(label)" />
         <template v-else>
           {{ label }}
         </template>

packages/core/src/components/Handle/Handle.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { isFunction, isString } from '@vueuse/core'
 import { Position } from '../../types'
 import type { HandleProps } from '../../types/handle'
 

packages/core/src/components/Nodes/NodeWrapper.ts

@@ -1,4 +1,3 @@
-import { isNumber } from '@vueuse/core'
 import type { GraphNode, HandleConnectable, NodeComponent } from '~/types'
 
 interface Props {

packages/core/src/composables/useDrag.ts

@@ -2,7 +2,7 @@ import type { D3DragEvent, DragBehavior, SubjectPosition } from 'd3-drag'
 import { drag } from 'd3-drag'
 import { select } from 'd3-selection'
 import type { Ref } from 'vue'
-import type { MaybeComputedRef } from '@vueuse/core'
+import type { MaybeRefOrGetter } from '@vueuse/core'
 import type { NodeDragEvent, NodeDragItem, XYPosition } from '~/types'
 
 export type UseDragEvent = D3DragEvent<HTMLDivElement, null, SubjectPosition>
@@ -12,8 +12,8 @@ interface UseDragParams {
   onDrag: (event: Omit<NodeDragEvent, 'intersections'>) => void
   onStop: (event: Omit<NodeDragEvent, 'intersections'>) => void
   el: Ref<Element | undefined>
-  disabled?: MaybeComputedRef<boolean>
+  disabled?: MaybeRefOrGetter<boolean>
-  selectable?: MaybeComputedRef<boolean>
+  selectable?: MaybeRefOrGetter<boolean>
   id?: string
   dragHandle?: MaybeComputedRef<string | undefined>
 }

packages/core/src/composables/useHandle.ts

@@ -1,12 +1,12 @@
-import type { MaybeComputedRef } from '@vueuse/core'
+import type { MaybeRefOrGetter } from '@vueuse/core'
 import type { Connection, ConnectionHandle, HandleType, MouseTouchEvent, ValidConnectionFunc } from '~/types'
 
 interface UseHandleProps {
-  handleId: MaybeComputedRef<string | null>
+  handleId: MaybeRefOrGetter<string | null>
-  nodeId: MaybeComputedRef<string>
+  nodeId: MaybeRefOrGetter<string>
-  type: MaybeComputedRef<HandleType>
+  type: MaybeRefOrGetter<HandleType>
-  isValidConnection?: MaybeComputedRef<ValidConnectionFunc | null>
+  isValidConnection?: MaybeRefOrGetter<ValidConnectionFunc | null>
-  edgeUpdaterType?: MaybeComputedRef<HandleType>
+  edgeUpdaterType?: MaybeRefOrGetter<HandleType>
   onEdgeUpdate?: (event: MouseTouchEvent, connection: Connection) => void
   onEdgeUpdateEnd?: (event: MouseTouchEvent) => void
 }

packages/core/src/composables/useKeyPress.ts

@@ -1,6 +1,5 @@
 import type { Ref } from 'vue'
-import type { KeyFilter, KeyPredicate, MaybeComputedRef } from '@vueuse/core'
+import type { KeyFilter, KeyPredicate, MaybeRefOrGetter } from '@vueuse/core'
-import { isBoolean, isFunction } from '@vueuse/core'
 
 export function isInputDOMNode(event: KeyboardEvent): boolean {
   const target = (event.composedPath?.()?.[0] || event.target) as HTMLElement
@@ -38,7 +37,7 @@ function createKeyPredicate(keyFilter: string[], pressedKeys: Set<string>): KeyP
  * @param keyFilter - Can be a boolean, a string or an array of strings. If it's a boolean, it will always return that value. If it's a string, it will return true if the key is pressed. If it's an array of strings, it will return true if any of the keys are pressed, or a combination is pressed (e.g. ['ctrl+a', 'ctrl+b'])
  * @param onChange - Callback function that will be called when the key state changes
  */
-export default (keyFilter: MaybeComputedRef<KeyFilter | null>, onChange?: (keyPressed: boolean) => void): Ref<boolean> => {
+export default (keyFilter: MaybeRefOrGetter<KeyFilter | null>, onChange?: (keyPressed: boolean) => void): Ref<boolean> => {
   const window = useWindow()
 
   const isPressed = ref(resolveUnref(keyFilter) === true)

packages/core/src/utils/changes.ts

@@ -1,4 +1,3 @@
-import { isFunction, isString } from '@vueuse/core'
 import type {
   EdgeAddChange,
   EdgeChange,

packages/core/src/utils/drag.ts

@@ -1,4 +1,3 @@
-import { isNumber } from '@vueuse/shared'
 import type { Actions, CoordinateExtent, CoordinateExtentRange, GraphNode, NodeDragItem, State, XYPosition } from '~/types'
 
 export function hasSelector(target: Element, selector: string, node: Element): boolean {

packages/core/src/utils/edge.ts

@@ -1,4 +1,3 @@
-import { isNumber } from '@vueuse/core'
 import type { Actions, EdgePositions, GraphEdge, GraphNode, HandleElement, Rect, ViewportTransform, XYPosition } from '~/types'
 import { Position } from '~/types'
 

packages/core/src/utils/general.ts

@@ -12,3 +12,19 @@ export function getEventPosition(event: MouseEvent | TouchEvent, bounds?: DOMRec
     y: evtY - (bounds?.top ?? 0),
   }
 }
+
+export function isString(val: any): val is string {
+  return typeof val === 'string'
+}
+
+export function isFunction(val: any): val is Function {
+  return typeof val === 'function'
+}
+
+export function isBoolean(val: any): val is boolean {
+  return typeof val === 'boolean'
+}
+
+export function isNumber(val: any): val is number {
+  return typeof val === 'number'
+}

packages/core/src/utils/graph.ts

@@ -1,4 +1,3 @@
-import { isString } from '@vueuse/core'
 import type {
   Actions,
   Box,

packages/core/src/utils/watch.ts

@@ -1,6 +1,5 @@
 import type { ToRefs } from 'vue'
 import type { WatchPausableReturn } from '@vueuse/core'
-import { isFunction } from '@vueuse/core'
 import type { Connection, FlowProps, VueFlowStore } from '~/types'
 
 export function useWatch(