fix: use contentBoxSize as an array in useElementSize

.eslintignore

@@ -3,6 +3,7 @@ node_modules
 node_modules/
 patches/
 types/
+cache/
 !packages/.vitepress
 !/.eslintrc.js
 !/rollup.config.js

.github/workflows/publish.yml

@@ -35,4 +35,3 @@ jobs:
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
           NODE_OPTIONS: --max-old-space-size=6144
-

.gitignore

@@ -8,6 +8,7 @@ dist
 index.json
 indexes.json
 node_modules
+cache
 packages/*/LICENSE
 packages/contributing.md
 packages/core/README.md
@@ -17,3 +18,4 @@ playgrounds/*/pnpm-lock.yaml
 types
 coverage
 .eslintcache
+.vitepress/cache

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueuse/monorepo",
-  "version": "9.9.0",
+  "version": "9.10.0",
   "private": true,
   "packageManager": "pnpm@7.6.0",
   "description": "Collection of essential Vue Composition Utilities",
@@ -35,83 +35,82 @@
     "watch": "esno scripts/build.ts --watch"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.29.4",
-    "@antfu/ni": "^0.18.5",
-    "@iconify/json": "^2.1.134",
-    "@rollup/plugin-json": "^5.0.1",
-    "@rollup/plugin-replace": "^5.0.1",
+    "@antfu/eslint-config": "^0.34.0",
+    "@antfu/ni": "^0.18.8",
+    "@iconify/json": "^2.2.1",
+    "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-replace": "^5.0.2",
     "@type-challenges/utils": "^0.1.1",
     "@types/fs-extra": "^9.0.13",
     "@types/js-yaml": "^4.0.5",
     "@types/md5": "^2.3.2",
-    "@types/node": "^18.11.9",
-    "@types/prettier": "^2.7.1",
+    "@types/node": "^18.11.18",
+    "@types/prettier": "^2.7.2",
     "@types/semver": "^7.3.13",
-    "@types/sharp": "^0.31.0",
-    "@vitest/coverage-c8": "^0.25.1",
-    "@vitest/ui": "^0.25.1",
-    "@vue/compiler-sfc": "^3.2.41",
-    "@vue/test-utils": "^2.2.1",
+    "@types/sharp": "^0.31.1",
+    "@vitest/coverage-c8": "^0.26.3",
+    "@vitest/ui": "^0.26.3",
+    "@vue/compiler-sfc": "^3.2.45",
+    "@vue/test-utils": "^2.2.6",
     "@vueuse/core": "workspace:*",
     "@vueuse/integrations": "workspace:*",
     "@vueuse/math": "workspace:*",
     "@vueuse/rxjs": "workspace:*",
     "@vueuse/shared": "workspace:*",
-    "axios": "^1.1.3",
+    "axios": "^1.2.2",
     "bumpp": "^8.2.1",
     "consola": "^2.15.3",
     "cross-env": "^7.0.3",
-    "esbuild-register": "^3.3.3",
-    "eslint": "^8.27.0",
+    "esbuild-register": "^3.4.2",
+    "eslint": "^8.31.0",
     "esno": "^0.16.3",
     "export-size": "^0.5.2",
-    "fake-indexeddb": "^4.0.0",
+    "fake-indexeddb": "^4.0.1",
     "fast-glob": "^3.2.12",
-    "firebase": "^9.13.0",
-    "fs-extra": "^10.1.0",
+    "firebase": "^9.15.0",
+    "fs-extra": "^11.1.0",
     "fuse.js": "^6.6.2",
     "google-font-installer": "^1.2.0",
     "gray-matter": "^4.0.3",
     "js-yaml": "^4.1.0",
-    "jsdom": "^20.0.2",
-    "lint-staged": "^13.0.3",
-    "markdown-table": "^3.0.2",
+    "jsdom": "^20.0.3",
+    "lint-staged": "^13.1.0",
+    "markdown-table": "^3.0.3",
     "md5": "^2.3.0",
-    "msw": "^0.48.0",
-    "node-fetch": "^3.2.10",
+    "msw": "^0.49.2",
+    "node-fetch": "^3.3.0",
     "ohmyfetch": "^0.4.21",
-    "pnpm": "^7.14.2",
-    "postcss": "^8.4.18",
+    "pnpm": "^7.21.0",
+    "postcss": "^8.4.20",
     "postcss-nested": "^6.0.0",
-    "prettier": "^2.7.1",
+    "prettier": "^2.8.1",
     "prism-theme-vars": "^0.2.4",
     "remove-markdown": "^0.5.0",
     "rimraf": "^3.0.2",
-    "rollup": "^3.2.5",
-    "rollup-plugin-dts": "^5.0.0",
+    "rollup": "^3.9.1",
+    "rollup-plugin-dts": "^5.1.0",
     "rollup-plugin-esbuild": "^5.0.0",
-    "sharp": "^0.31.2",
-    "simple-git": "^3.14.1",
+    "sharp": "^0.31.3",
+    "simple-git": "^3.15.1",
     "simple-git-hooks": "^2.8.1",
-    "typescript": "4.8.4",
-    "unocss": "^0.46.3",
-    "unplugin-icons": "^0.14.13",
-    "unplugin-vue-components": "^0.22.9",
-    "vite": "^3.2.3",
-    "vite-plugin-inspect": "^0.7.7",
-    "vite-plugin-pwa": "^0.13.3",
-    "vitepress": "^1.0.0-alpha.28",
-    "vitest": "^0.25.1",
-    "vue": "^3.2.41",
+    "typescript": "4.9.4",
+    "unocss": "^0.48.0",
+    "unplugin-icons": "^0.14.15",
+    "unplugin-vue-components": "^0.22.12",
+    "vite": "^4.0.4",
+    "vite-plugin-inspect": "^0.7.12",
+    "vite-plugin-pwa": "^0.14.1",
+    "vitepress": "^1.0.0-alpha.35",
+    "vitest": "^0.26.3",
+    "vue": "^3.2.45",
     "vue2": "npm:vue@^2.7.10"
   },
   "pnpm": {
     "neverBuiltDependencies": [
       "electron"
     ],
     "overrides": {
-      "vue-demi": "0.13.11",
-      "vite": "^3.1.6"
+      "vue-demi": "0.13.11"
     }
   },
   "simple-git-hooks": {

packages/.vitepress/config.ts

@@ -196,4 +196,3 @@ function getFunctionsSideBar() {
 
   return links
 }
-

packages/.vitepress/theme/components/Home.vue

@@ -1,9 +1,3 @@
-<script setup lang="ts">
-import HomeHero from './HomeHero.vue'
-import HomeFeatures from './HomeFeatures.vue'
-import HomeFooter from './HomeFooter.vue'
-</script>
-
 <template>
   <div class="home" mt-4 flex flex-col items-center>
     <HomeTeam />

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueuse/components",
-  "version": "9.9.0",
+  "version": "9.10.0",
   "description": "Renderless components for VueUse",
   "author": "Jacob Clevenger<https://github.com/wheatjs>",
   "license": "MIT",

packages/core/_configurable.ts

@@ -14,6 +14,13 @@ export interface ConfigurableDocument {
   document?: Document
 }
 
+export interface ConfigurableDocumentOrShadowRoot {
+  /*
+   * Specify a custom `document` instance or a shadow root, e.g. working with iframes or in testing environments.
+   */
+  document?: DocumentOrShadowRoot
+}
+
 export interface ConfigurableNavigator {
   /*
    * Specify a custom `navigator` instance, e.g. working with iframes or in testing environments.

packages/core/onKeyStroke/index.md

@@ -34,7 +34,6 @@ onKeyStroke(true, (e) => {
 onKeyStroke((e) => {
   e.preventDefault()
 })
-
 ```
 
 ### Custom Event Target

packages/core/onKeyStroke/index.ts

@@ -7,7 +7,7 @@ export type KeyFilter = true | string | string[] | KeyPredicate
 export type KeyStrokeEventName = 'keydown' | 'keypress' | 'keyup'
 export interface OnKeyStrokeOptions {
   eventName?: KeyStrokeEventName
-  target?: MaybeComputedRef<EventTarget>
+  target?: MaybeComputedRef<EventTarget | null | undefined>
   passive?: boolean
 }
 

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueuse/core",
-  "version": "9.9.0",
+  "version": "9.10.0",
   "description": "Collection of essential Vue Composition Utilities",
   "author": "Anthony Fu <https://github.com/antfu>",
   "license": "MIT",

packages/core/unrefElement/index.md

@@ -15,7 +15,7 @@ Unref for dom element.
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import { unrefElement } from '@vueuse/core'
 
 const div = ref() // will be bind to the <div> element

packages/core/useActiveElement/index.test.ts

@@ -0,0 +1,61 @@
+import { useActiveElement } from '.'
+
+describe('useActiveElement', () => {
+  let shadowHost: HTMLElement
+  let input: HTMLInputElement
+  let shadowInput: HTMLInputElement
+  let shadowRoot: ShadowRoot
+
+  beforeEach(() => {
+    shadowHost = document.createElement('div')
+    shadowRoot = shadowHost.attachShadow({ mode: 'open' })
+    input = document.createElement('input')
+    shadowInput = input.cloneNode() as HTMLInputElement
+    shadowRoot.appendChild(shadowInput)
+    document.body.appendChild(input)
+    document.body.appendChild(shadowHost)
+  })
+
+  afterEach(() => {
+    shadowHost.remove()
+    input.remove()
+  })
+
+  it('should be defined', () => {
+    expect(useActiveElement).toBeDefined()
+  })
+
+  it('should initialise correctly', () => {
+    const activeElement = useActiveElement()
+
+    expect(activeElement.value).to.equal(document.body)
+  })
+
+  it('should initialise with already-active element', () => {
+    input.focus()
+
+    const activeElement = useActiveElement()
+
+    expect(activeElement.value).to.equal(input)
+  })
+
+  it('should accept custom document', () => {
+    const activeElement = useActiveElement({ document: shadowRoot })
+
+    shadowInput.focus()
+
+    expect(activeElement.value).to.equal(shadowInput)
+  })
+
+  it('should observe focus/blur events', () => {
+    const activeElement = useActiveElement()
+
+    input.focus()
+
+    expect(activeElement.value).to.equal(input)
+
+    input.blur()
+
+    expect(activeElement.value).to.equal(document.body)
+  })
+})

packages/core/useActiveElement/index.ts

@@ -1,24 +1,27 @@
 import { computedWithControl } from '@vueuse/shared'
 import { useEventListener } from '../useEventListener'
-import type { ConfigurableWindow } from '../_configurable'
+import type { ConfigurableDocumentOrShadowRoot, ConfigurableWindow } from '../_configurable'
 import { defaultWindow } from '../_configurable'
 
+export interface UseActiveElementOptions extends ConfigurableWindow, ConfigurableDocumentOrShadowRoot {}
+
 /**
  * Reactive `document.activeElement`
  *
  * @see https://vueuse.org/useActiveElement
  * @param options
  */
-export function useActiveElement<T extends HTMLElement>(options: ConfigurableWindow = {}) {
+export function useActiveElement<T extends HTMLElement>(options: UseActiveElementOptions = {}) {
   const { window = defaultWindow } = options
+  const document = options.document ?? window?.document
   const activeElement = computedWithControl(
     () => null,
-    () => window?.document.activeElement as T | null | undefined,
+    () => document?.activeElement as T | null | undefined,
   )
 
   if (window) {
     useEventListener(window, 'blur', (event) => {
-      if (event.relatedTarget === null)
+      if (event.relatedTarget !== null)
         return
 
       activeElement.trigger()

packages/core/useDisplayMedia/index.ts

@@ -35,7 +35,9 @@ export function useDisplayMedia(options: UseDisplayMediaOptions = {}) {
   const { navigator = defaultNavigator } = options
   const isSupported = useSupported(() => navigator?.mediaDevices?.getDisplayMedia)
 
-  const constraint: DisplayMediaStreamConstraints = { audio, video }
+  // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error
+  // @ts-ignore Type mismatch in different version of TS
+  const constraint: MediaStreamConstraints = { audio, video }
 
   const stream: Ref<MediaStream | undefined> = shallowRef()
 

packages/core/useDraggable/component.ts

@@ -2,7 +2,7 @@ import { computed, defineComponent, h, reactive, ref } from 'vue-demi'
 import type { UseDraggableOptions } from '@vueuse/core'
 import { isClient, useDraggable, useStorage } from '@vueuse/core'
 import { resolveUnref } from '@vueuse/shared'
-import type { RenderableComponent } from '../types'
+import type { Position, RenderableComponent } from '../types'
 
 export interface UseDraggableProps extends UseDraggableOptions, RenderableComponent {
   /**
@@ -34,22 +34,28 @@ export const UseDraggable = defineComponent<UseDraggableProps>({
   setup(props, { slots }) {
     const target = ref()
     const handle = computed(() => props.handle ?? target.value)
-    const initialValue = props.storageKey
-      ? useStorage(
-        props.storageKey,
-        resolveUnref(props.initialValue) || { x: 0, y: 0 },
-        isClient
-          ? props.storageType === 'session'
-            ? sessionStorage
-            : localStorage
-          : undefined,
-      )
-      : props.initialValue || { x: 0, y: 0 }
+    const storageValue = props.storageKey && useStorage(
+      props.storageKey,
+      resolveUnref(props.initialValue) || { x: 0, y: 0 },
+      isClient
+        ? props.storageType === 'session'
+          ? sessionStorage
+          : localStorage
+        : undefined,
+    )
+    const initialValue = storageValue || props.initialValue || { x: 0, y: 0 }
+    const onEnd = (position: Position) => {
+      if (!storageValue)
+        return
+      storageValue.value.x = position.x
+      storageValue.value.y = position.y
+    }
 
     const data = reactive(useDraggable(target, {
       ...props,
       handle,
       initialValue,
+      onEnd,
     }))
 
     return () => {