Merge branch 'feat-useEventRef'

src/index.ts

@@ -4,3 +4,4 @@ export * from './useResize'
 export * from './useScroll'
 export * from './useScrollRef'
 export * from './useWindowScroll'
+export * from './useEventRef'

src/useEvent.ts

@@ -1,19 +1,19 @@
 /* eslint-disable no-redeclare */
 import { Ref, onMounted, onUnmounted, isRef, getCurrentInstance, shallowRef } from 'vue'
 
-export type Target = Ref<EventTarget> | EventTarget | string
+export type Target = Ref<EventTarget | null> | EventTarget | string
 
-interface WindowEventHandler<T extends keyof WindowEventMap> {
+export interface WindowEventHandler<T extends keyof WindowEventMap> {
   (this: Window, e: WindowEventMap[T]): any
 }
 
-interface DocumentEventHandler<T extends keyof DocumentEventMap> {
+export interface DocumentEventHandler<T extends keyof DocumentEventMap> {
   (this: Document, e: DocumentEventMap[T]): any
 }
 
-type HandlerOptions = boolean | AddEventListenerOptions
-type DocumentEvents = keyof DocumentEventMap
-type WindowEvents = keyof WindowEventMap
+export type HandlerOptions = boolean | AddEventListenerOptions
+export type DocumentEvents = keyof DocumentEventMap
+export type WindowEvents = keyof WindowEventMap
 
 function getTarget(target: Target): EventTarget {
   if (!target) {
@@ -28,7 +28,7 @@ function getTarget(target: Target): EventTarget {
     return dom!
   }
   if (isRef(target)) {
-    return target.value
+    return target.value!
   }
   return target
 }

src/useEventRef.ts

@@ -0,0 +1,12 @@
+import { ref, Ref } from 'vue'
+import { useEvent, DocumentEventHandler, DocumentEvents, HandlerOptions } from './useEvent'
+
+export function useEventRef<T extends DocumentEvents>(
+  event: T,
+  handler: DocumentEventHandler<T>,
+  options?: HandlerOptions
+): Ref<Element | null> {
+  const target: Ref<Element | null> = ref(null)
+  useEvent(event, handler, options, target)
+  return target
+}