refactor(unrefElement): improve types

packages/core/_types.ts

@@ -0,0 +1,8 @@
+// common types
+
+export interface Position {
+  x: number
+  y: number
+}
+
+export type PointerType = 'mouse' | 'touch' | 'pen'

packages/core/unrefElement/index.ts

@@ -9,7 +9,7 @@ export type MaybeElementRef = MaybeRef<Element | VueInstance | undefined | null>
  *
  * @param elRef
  */
-export function unrefElement(elRef: MaybeElementRef) {
+export function unrefElement(elRef: MaybeElementRef): HTMLElement | SVGElement | undefined {
   const plain = unref(elRef)
   return (plain as VueInstance)?.$el ?? plain
 }

packages/core/useMouse/index.ts

@@ -1,6 +1,7 @@
 import { ref } from 'vue-demi'
 import { useEventListener } from '../useEventListener'
 import { ConfigurableWindow, defaultWindow } from '../_configurable'
+import { Position } from '../_types'
 
 export interface MouseOptions extends ConfigurableWindow {
   /**
@@ -20,7 +21,7 @@ export interface MouseOptions extends ConfigurableWindow {
   /**
    * Initial values
    */
-  initialValue?: {x: number; y: number}
+  initialValue?: Position
 }
 
 export type MouseSourceType = 'mouse' | 'touch' | null

packages/core/usePointerSwipe/index.ts

@@ -2,6 +2,7 @@ import { MaybeRef } from '@vueuse/shared'
 import { computed, reactive, readonly, Ref, ref } from 'vue-demi'
 import { useEventListener } from '../useEventListener'
 import { SwipeDirection } from '../useSwipe/index'
+import { Position } from '../_types'
 
 export interface PointerSwipeOptions {
   /**
@@ -25,16 +26,11 @@ export interface PointerSwipeOptions {
   onSwipeEnd?: (e: PointerEvent, direction: SwipeDirection) => void
 }
 
-export interface PointerPosition {
-  x: number
-  y: number
-}
-
 export interface PointerSwipeReturn {
   readonly isSwiping: Ref<boolean>
   direction: Readonly<Ref<SwipeDirection | null>>
-  readonly posStart: PointerPosition
-  readonly posEnd: PointerPosition
+  readonly posStart: Position
+  readonly posEnd: Position
   distanceX: Readonly<Ref<number>>
   distanceY: Readonly<Ref<number>>
   stop: () => void
@@ -59,13 +55,13 @@ export function usePointerSwipe(
     onSwipeStart,
   } = options
 
-  const posStart = reactive<PointerPosition>({ x: 0, y: 0 })
+  const posStart = reactive<Position>({ x: 0, y: 0 })
   const updatePosStart = (x: number, y: number) => {
     posStart.x = x
     posStart.y = y
   }
 
-  const posEnd = reactive({ x: 0, y: 0 })
+  const posEnd = reactive<Position>({ x: 0, y: 0 })
   const updatePosEnd = (x: number, y: number) => {
     posEnd.x = x
     posEnd.y = y

packages/core/useSwipe/index.ts

@@ -3,6 +3,7 @@ import { computed, reactive, ref, ComputedRef, Ref } from 'vue-demi'
 
 import { useEventListener } from '../useEventListener'
 import { ConfigurableWindow, defaultWindow } from '../_configurable'
+import { Position } from '../_types'
 
 export enum SwipeDirection {
   UP = 'UP',
@@ -45,14 +46,8 @@ export interface SwipeReturn {
   isPassiveEventSupported: boolean
   isSwiping: Ref<boolean>
   direction: ComputedRef<SwipeDirection | null>
-  coordsStart: {
-    readonly x: number
-    readonly y: number
-  }
-  coordsEnd: {
-    readonly x: number
-    readonly y: number
-  }
+  coordsStart: Readonly<Position>
+  coordsEnd: Readonly<Position>
   lengthX: ComputedRef<number>
   lengthY: ComputedRef<number>
   stop: () => void
@@ -78,8 +73,8 @@ export function useSwipe(
     window = defaultWindow,
   } = options
 
-  const coordsStart = reactive({ x: 0, y: 0 })
-  const coordsEnd = reactive({ x: 0, y: 0 })
+  const coordsStart = reactive<Position>({ x: 0, y: 0 })
+  const coordsEnd = reactive<Position>({ x: 0, y: 0 })
 
   const diffX = computed(() => coordsStart.x - coordsEnd.x)
   const diffY = computed(() => coordsStart.y - coordsEnd.y)

packages/integrations/useFocusTrap/index.ts

@@ -85,7 +85,10 @@ export function useFocusTrap(target: MaybeElementRef, options: UseFocusTrapOptio
 
   watch(
     () => unrefElement(target),
-    (el: HTMLElement) => {
+    (el) => {
+      if (!el)
+        return
+
       trap = createFocusTrap(el, {
         ...focusTrapOptions,
         onActivate() {