feat(vue): expand @robonen/vue composable collection

Composables, tests, category barrels, and README for @robonen/vue.

vue/toolkit/src/composables/elements/useWindowFocus/index.ts

@@ -0,0 +1,43 @@
+import { shallowRef } from 'vue';
+import type { ShallowRef } from 'vue';
+import { defaultWindow } from '@/types';
+import type { ConfigurableWindow } from '@/types';
+import { useEventListener } from '@/composables/browser/useEventListener';
+
+export interface UseWindowFocusOptions extends ConfigurableWindow {}
+
+export type UseWindowFocusReturn = ShallowRef<boolean>;
+
+/**
+ * @name useWindowFocus
+ * @category Elements
+ * @description Reactively track whether the window is focused via `focus`/`blur` events.
+ *
+ * @param {UseWindowFocusOptions} [options={}] Options
+ * @returns {UseWindowFocusReturn} A shallow ref that is `true` while the window has focus
+ *
+ * @example
+ * const focused = useWindowFocus();
+ *
+ * @since 0.0.15
+ */
+export function useWindowFocus(options: UseWindowFocusOptions = {}): UseWindowFocusReturn {
+  const { window = defaultWindow } = options;
+
+  if (!window)
+    return shallowRef(false);
+
+  const focused = shallowRef(window.document.hasFocus());
+
+  const listenerOptions = { passive: true } as const;
+
+  useEventListener(window, 'blur', () => {
+    focused.value = false;
+  }, listenerOptions);
+
+  useEventListener(window, 'focus', () => {
+    focused.value = true;
+  }, listenerOptions);
+
+  return focused;
+}