feat(useEventRef): add useEventRef

src/index.ts

@@ -1,2 +1,3 @@
 export * from './useTitle'
 export * from './useEvent'
+export * from './useEventRef'

src/useEvent.ts

@@ -1,19 +1,19 @@
 /* eslint-disable no-redeclare */
 import { Ref, onMounted, onUnmounted, isRef, getCurrentInstance } from 'vue'
 
-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 | null {
   if (!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
+}