feat(useWindowFocus): new function (#601)

* feat: useWindowFocus

Reactively track window focus with `window.onfocus` and `window.onblur` events.

* feat: useMouse supports drag and drop (#592)

- Adds the `dragover` event to continue to track mouse position while dragging.

* chore: update deps

* fix: types

* chore: update

Co-authored-by: Marshall Thompson <marshall@creativeideal.net>
Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

README.md

@@ -7,7 +7,7 @@ Collection of essential Vue Composition Utilities
 <a href="https://www.npmjs.com/package/@vueuse/core" target="__blank"><img src="https://img.shields.io/npm/v/@vueuse/core?color=a1b858&label=" alt="NPM version"></a>
 <a href="https://www.npmjs.com/package/@vueuse/core" target="__blank"><img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@vueuse/core?color=50a36f&label="></a>
 <a href="https://vueuse.org" target="__blank"><img src="https://img.shields.io/static/v1?label=&message=docs%20%26%20demos&color=1e8a7a" alt="Docs & Demos"></a>
-<img alt="Function Count" src="https://img.shields.io/badge/-129%20functions-13708a">
+<img alt="Function Count" src="https://img.shields.io/badge/-130%20functions-13708a">
 <br>
 <a href="https://github.com/vueuse/vueuse" target="__blank"><img alt="GitHub stars" src="https://img.shields.io/github/stars/vueuse/vueuse?style=social"></a>
 </p>

indexes.json

@@ -909,6 +909,14 @@
       "category": "Misc",
       "description": "run expensive function without blocking the UI"
     },
+    {
+      "name": "useWindowFocus",
+      "package": "core",
+      "component": true,
+      "docs": "https://vueuse.org/core/useWindowFocus/",
+      "category": "Sensors",
+      "description": "reactively track window focus with `window.onfocus` and `window.onblur` events"
+    },
     {
       "name": "useWindowScroll",
       "package": "core",

packages/components/index.ts

@@ -27,4 +27,5 @@ export * from '../core/usePreferredDark/component'
 export * from '../core/usePreferredLanguages/component'
 export * from '../core/useTimeAgo/component'
 export * from '../core/useTimestamp/component'
+export * from '../core/useWindowFocus/component'
 export * from '../core/useWindowSize/component'

packages/core/index.ts

@@ -70,6 +70,7 @@ export * from './useVModels'
 export * from './useWebSocket'
 export * from './useWebWorker'
 export * from './useWebWorkerFn'
+export * from './useWindowFocus'
 export * from './useWindowScroll'
 export * from './useWindowSize'
 export * from '@vueuse/shared'

packages/core/useWindowFocus/component.ts

@@ -0,0 +1,16 @@
+import { defineComponent, reactive } from 'vue-demi'
+import { useWindowFocus } from '@vueuse/core'
+
+export const UseWindowFocus = defineComponent({
+  name: 'UseWindowFocus',
+  setup(props, { slots }) {
+    const data = reactive({
+      focused: useWindowFocus(),
+    })
+
+    return () => {
+      if (slots.default)
+        return slots.default(data)
+    }
+  },
+})

packages/core/useWindowFocus/demo.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue-demi'
+import { useWindowFocus } from '.'
+
+const startMessage = '💡 Click somewhere outside of the document to unfocus.'
+const message = ref(startMessage)
+const focused = useWindowFocus()
+
+watch(focused, (current) => {
+  if (current)
+    message.value = 'ℹ Tab is unfocused'
+  else
+    message.value = startMessage
+})
+</script>
+
+<template>
+  <div>{{ message }}</div>
+</template>

packages/core/useWindowFocus/index.md

@@ -0,0 +1,44 @@
+---
+category: Sensors
+---
+
+# useWindowFocus
+
+Reactively track window focus with `window.onfocus` and `window.onblur` events.
+
+## Usage
+
+```js
+import { useWindowFocus } from '@vueuse/core'
+
+const focused = useWindowFocus()
+```
+
+## Component
+```html
+<UseWindowFocus v-slot="{ focused }">
+  Document Focus: {{ focused }}
+</UseWindowFocus>
+```
+
+<!--FOOTER_STARTS-->
+## Type Declarations
+
+```typescript
+/**
+ * Reactively track window focus with `window.onfocus` and `window.onblur`.
+ *
+ * @see https://vueuse.org/useWindowFocus
+ * @param options
+ */
+export declare function useWindowFocus({
+  window,
+}?: ConfigurableWindow): Ref<boolean>
+```
+
+## Source
+
+[Source](https://github.com/vueuse/vueuse/blob/main/packages/core/useWindowFocus/index.ts) • [Demo](https://github.com/vueuse/vueuse/blob/main/packages/core/useWindowFocus/demo.vue) • [Docs](https://github.com/vueuse/vueuse/blob/main/packages/core/useWindowFocus/index.md)
+
+
+<!--FOOTER_ENDS-->

packages/core/useWindowFocus/index.ts

@@ -0,0 +1,26 @@
+import { Ref, ref } from 'vue-demi'
+import { useEventListener } from '../useEventListener'
+import { ConfigurableWindow, defaultWindow } from '../_configurable'
+
+/**
+ * Reactively track window focus with `window.onfocus` and `window.onblur`.
+ *
+ * @see https://vueuse.org/useWindowFocus
+ * @param options
+ */
+export function useWindowFocus({ window = defaultWindow }: ConfigurableWindow = {}): Ref<boolean> {
+  if (!window)
+    return ref(false)
+
+  const focused = ref(window.document.hasFocus())
+
+  useEventListener(window, 'blur', () => {
+    focused.value = false
+  })
+
+  useEventListener(window, 'focus', () => {
+    focused.value = true
+  })
+
+  return focused
+}

packages/functions.md

@@ -85,6 +85,7 @@
   - [`useSpeechRecognition`](https://vueuse.org/core/useSpeechRecognition/) — reactive [SpeechRecognition](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition)
   - [`useSwipe`](https://vueuse.org/core/useSwipe/) — reactive swipe detection based on [`TouchEvents`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent)
   - [`useUserMedia`](https://vueuse.org/core/useUserMedia/) — reactive [`mediaDevices.getUserMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) streaming
+  - [`useWindowFocus`](https://vueuse.org/core/useWindowFocus/) — reactively track window focus with `window.onfocus` and `window.onblur` events
   - [`useWindowScroll`](https://vueuse.org/core/useWindowScroll/) — reactive window scroll
   - [`useWindowSize`](https://vueuse.org/core/useWindowSize/) — reactive window size