From 9728a147eb88baff9bfe425f92b767c241877ab8 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Fri, 17 Sep 2021 14:28:13 +0800
Subject: [PATCH] fix(types): `MaybeElementRef` type, close #685

---
 packages/core/unrefElement/index.ts  |  6 +++---
 packages/core/useDraggable/index.ts  | 13 ++++++-------
 packages/core/useFullscreen/index.ts |  9 +++++----
 packages/core/usePointer/index.ts    |  3 +--
 4 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/packages/core/unrefElement/index.ts b/packages/core/unrefElement/index.ts
index 1520ac24a126..c1b392615846 100644
--- a/packages/core/unrefElement/index.ts
+++ b/packages/core/unrefElement/index.ts
@@ -1,8 +1,8 @@
-import { defineComponent, unref } from 'vue-demi'
+import { unref, ComponentPublicInstance } from 'vue-demi'
 import { MaybeRef } from '@vueuse/shared'
 
-export type VueInstance = InstanceType<ReturnType<typeof defineComponent>>
-export type MaybeElementRef = MaybeRef<Element | VueInstance | undefined | null>
+export type VueInstance = ComponentPublicInstance
+export type MaybeElementRef = MaybeRef<HTMLElement | SVGElement | VueInstance | undefined | null>
 
 /**
  * Get the dom element of a ref of element or Vue component instance
diff --git a/packages/core/useDraggable/index.ts b/packages/core/useDraggable/index.ts
index a59610a158f0..5d6ef0864d02 100644
--- a/packages/core/useDraggable/index.ts
+++ b/packages/core/useDraggable/index.ts
@@ -1,7 +1,6 @@
 import { Ref, ref, unref, computed } from 'vue-demi'
 import { MaybeRef, toRefs, isClient } from '@vueuse/shared'
 import { useEventListener } from '../useEventListener'
-import { MaybeElementRef } from '../unrefElement'
 import { PointerType, Position } from '../types'
 import { defaultWindow } from '../_configurable'
 
@@ -25,7 +24,7 @@ export interface UseDraggableOptions {
    *
    * @default window
    */
-  draggingElement?: MaybeElementRef
+  draggingElement?: MaybeRef<HTMLElement | SVGElement | Window | Document | null>
 
   /**
    * Pointer types that listen to.
@@ -56,10 +55,10 @@ export interface UseDraggableOptions {
  * Make elements draggable.
  *
  * @see https://vueuse.org/useDraggable
- * @param el
+ * @param target
  * @param options
  */
-export function useDraggable(el: MaybeElementRef, options: UseDraggableOptions = {}) {
+export function useDraggable(target: MaybeRef<HTMLElement | SVGElement | null>, options: UseDraggableOptions = {}) {
   const draggingElement = options.draggingElement ?? defaultWindow
   const position: Ref<Position> = ref(options.initialValue ?? { x: 0, y: 0 })
   const pressedDelta = ref<Position>()
@@ -76,9 +75,9 @@ export function useDraggable(el: MaybeElementRef, options: UseDraggableOptions =
   const start = (e: PointerEvent) => {
     if (!filterEvent(e))
       return
-    if (unref(options.exact) && e.target !== el.value)
+    if (unref(options.exact) && e.target !== unref(target))
       return
-    const react = el.value!.getBoundingClientRect()
+    const react = unref(target)!.getBoundingClientRect()
     const pos = {
       x: e.pageX - react.left,
       y: e.pageY - react.top,
@@ -108,7 +107,7 @@ export function useDraggable(el: MaybeElementRef, options: UseDraggableOptions =
   }
 
   if (isClient) {
-    useEventListener(el, 'pointerdown', start, true)
+    useEventListener(target, 'pointerdown', start, true)
     useEventListener(draggingElement, 'pointermove', move, true)
     useEventListener(draggingElement, 'pointerup', end, true)
   }
diff --git a/packages/core/useFullscreen/index.ts b/packages/core/useFullscreen/index.ts
index 5f5513e6d89a..0020ca13084c 100644
--- a/packages/core/useFullscreen/index.ts
+++ b/packages/core/useFullscreen/index.ts
@@ -1,7 +1,7 @@
 /* this implementation is original ported from https://github.com/logaretm/vue-use-web by Abdelrahman Awad */
 
 import { ref } from 'vue-demi'
-import { MaybeElementRef } from '../unrefElement'
+import { MaybeElementRef, unrefElement } from '../unrefElement'
 import { useEventListener } from '../useEventListener'
 import { ConfigurableDocument, defaultDocument } from '../_configurable'
 
@@ -72,7 +72,7 @@ export function useFullscreen(
   options: ConfigurableDocument = {},
 ) {
   const { document = defaultDocument } = options
-  const targetRef = ref(target || document?.querySelector('html'))
+  const targetRef = target || document?.querySelector('html')
   const isFullscreen = ref(false)
   let isSupported = false
 
@@ -108,8 +108,9 @@ export function useFullscreen(
 
     await exit()
 
-    if (targetRef.value) {
-      await targetRef.value[REQUEST]()
+    const target = unrefElement(targetRef)
+    if (target) {
+      await target[REQUEST]()
       isFullscreen.value = true
     }
   }
diff --git a/packages/core/usePointer/index.ts b/packages/core/usePointer/index.ts
index 2e6a698bfedc..3b08457258cb 100644
--- a/packages/core/usePointer/index.ts
+++ b/packages/core/usePointer/index.ts
@@ -3,7 +3,6 @@ import { ref, Ref } from 'vue-demi'
 import { useEventListener } from '../useEventListener'
 import { ConfigurableWindow, defaultWindow } from '../_configurable'
 import { PointerType, Position } from '../types'
-import { MaybeElementRef } from '../unrefElement'
 
 export interface UsePointerState extends Position {
   pressure: number
@@ -32,7 +31,7 @@ export interface UsePointerOptions extends ConfigurableWindow {
   /**
    * @default window
    */
-  target?: MaybeElementRef
+  target?: MaybeRef<EventTarget | null | undefined> | Document | Window
 }
 
 const defaultState: UsePointerState = /* #__PURE__ */ {