Merge branch 'main' into pr/mweghorst/3479

package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "version": "10.5.0",
   "private": true,
-  "packageManager": "pnpm@8.8.0",
+  "packageManager": "pnpm@8.10.2",
   "description": "Collection of essential Vue Composition Utilities",
   "author": "Anthony Fu<https://github.com/antfu>",
   "license": "MIT",
@@ -36,76 +36,76 @@
     "watch": "esno scripts/build-run.ts --watch"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^1.0.0-beta.21",
+    "@antfu/eslint-config": "^1.1.0",
     "@antfu/ni": "^0.21.8",
-    "@iconify/json": "^2.2.125",
+    "@iconify/json": "^2.2.139",
     "@rollup/plugin-json": "^6.0.1",
-    "@rollup/plugin-replace": "^5.0.3",
+    "@rollup/plugin-replace": "^5.0.5",
     "@type-challenges/utils": "^0.1.1",
-    "@types/fs-extra": "^11.0.2",
-    "@types/js-yaml": "^4.0.6",
-    "@types/md5": "^2.3.3",
-    "@types/node": "^20.8.3",
-    "@types/remove-markdown": "^0.3.2",
-    "@types/semver": "^7.5.3",
+    "@types/fs-extra": "^11.0.4",
+    "@types/js-yaml": "^4.0.9",
+    "@types/md5": "^2.3.5",
+    "@types/node": "^20.9.0",
+    "@types/remove-markdown": "^0.3.4",
+    "@types/semver": "^7.5.5",
     "@vitest/coverage-v8": "^0.34.6",
     "@vitest/ui": "^0.34.6",
-    "@vue/compiler-sfc": "^3.3.4",
+    "@vue/compiler-sfc": "^3.3.8",
     "@vue/test-utils": "^2.4.1",
     "@vueuse/core": "workspace:*",
     "@vueuse/integrations": "workspace:*",
     "@vueuse/math": "workspace:*",
     "@vueuse/rxjs": "workspace:*",
     "@vueuse/shared": "workspace:*",
-    "axios": "^1.5.1",
+    "axios": "^1.6.1",
     "bumpp": "^9.2.0",
     "consola": "^3.2.3",
     "esbuild-register": "^3.5.0",
     "eslint": "8.51.0",
     "eslint-plugin-antfu": "1.0.0-beta.10",
     "esno": "^0.17.0",
-    "export-size": "^0.6.0",
-    "fake-indexeddb": "^4.0.2",
-    "fast-glob": "^3.3.1",
-    "firebase": "^10.4.0",
+    "export-size": "^0.7.0",
+    "fake-indexeddb": "^5.0.1",
+    "fast-glob": "^3.3.2",
+    "firebase": "^10.6.0",
     "fs-extra": "^11.1.1",
-    "fuse.js": "^6.6.2",
+    "fuse.js": "^7.0.0",
     "google-font-installer": "^1.2.0",
     "gray-matter": "^4.0.3",
     "js-yaml": "^4.1.0",
     "jsdom": "^22.1.0",
-    "lint-staged": "^14.0.1",
+    "lint-staged": "^15.0.2",
     "markdown-table": "^3.0.3",
     "md5": "^2.3.0",
     "msw": "1.0.1",
     "node-fetch": "^3.3.2",
-    "node-fetch-native": "^1.4.0",
+    "node-fetch-native": "^1.4.1",
     "ofetch": "^1.3.3",
-    "pnpm": "^8.8.0",
+    "pnpm": "^8.10.2",
     "postcss": "^8.4.31",
     "postcss-nested": "^6.0.1",
     "prettier": "^3.0.3",
     "prism-theme-vars": "^0.2.4",
     "remove-markdown": "^0.5.0",
     "rimraf": "^5.0.5",
-    "rollup": "^4.0.2",
-    "rollup-plugin-dts": "^6.0.2",
-    "rollup-plugin-esbuild": "^6.0.2",
+    "rollup": "^4.3.0",
+    "rollup-plugin-dts": "^6.1.0",
+    "rollup-plugin-esbuild": "^6.1.0",
     "rollup-plugin-pure": "^0.2.1",
     "sharp": "0.32.6",
     "simple-git": "^3.20.0",
     "simple-git-hooks": "^2.9.0",
-    "taze": "^0.11.3",
+    "taze": "^0.12.0",
     "typescript": "5.2.2",
-    "unocss": "^0.56.5",
-    "unplugin-icons": "^0.17.0",
+    "unocss": "^0.57.3",
+    "unplugin-icons": "^0.17.3",
     "unplugin-vue-components": "^0.25.2",
-    "vite": "^4.4.11",
-    "vite-plugin-inspect": "^0.7.40",
-    "vite-plugin-pwa": "^0.16.5",
+    "vite": "^4.5.0",
+    "vite-plugin-inspect": "^0.7.42",
+    "vite-plugin-pwa": "^0.16.7",
     "vitepress": "1.0.0-rc.4",
     "vitest": "^0.34.6",
-    "vue": "^3.3.4",
+    "vue": "^3.3.8",
     "vue2": "npm:vue@^2.7.14"
   },
   "pnpm": {

packages/core/onClickOutside/index.ts

@@ -90,8 +90,7 @@ export function onClickOutside<T extends OnClickOutsideOptions>(
     useEventListener(window, 'click', listener, { passive: true, capture }),
     useEventListener(window, 'pointerdown', (e) => {
       const el = unrefElement(target)
-      if (el)
-        shouldListen = !e.composedPath().includes(el) && !shouldIgnore(e)
+      shouldListen = !shouldIgnore(e) && !!(el && !e.composedPath().includes(el))
     }, { passive: true }),
     detectIframe && useEventListener(window, 'blur', (event) => {
       setTimeout(() => {

packages/core/onKeyStroke/index.ts

@@ -31,9 +31,6 @@ function createKeyPredicate(keyFilter: KeyFilter): KeyPredicate {
   return () => true
 }
 
-export function onKeyStroke(key: KeyFilter, handler: (event: KeyboardEvent) => void, options?: OnKeyStrokeOptions): () => void
-export function onKeyStroke(handler: (event: KeyboardEvent) => void, options?: OnKeyStrokeOptions): () => void
-
 /**
  * Listen for keyboard keystrokes.
  *

packages/core/onLongPress/index.test.ts

@@ -87,6 +87,29 @@ describe('onLongPress', () => {
     expect(onParentLongPressCallback).toHaveBeenCalledTimes(0)
   }
 
+  async function stopEventListeners(isRef: boolean) {
+    const onLongPressCallback = vi.fn()
+    const stop = onLongPress(isRef ? element : element.value, onLongPressCallback, { modifiers: { stop: true } })
+
+    // before calling stop, the callback should be called
+    element.value.dispatchEvent(pointerdownEvent)
+
+    await promiseTimeout(500)
+
+    expect(onLongPressCallback).toHaveBeenCalledTimes(1)
+
+    stop()
+
+    // before calling stop, the callback should no longer be called
+    onLongPressCallback.mockClear()
+
+    element.value.dispatchEvent(pointerdownEvent)
+
+    await promiseTimeout(500)
+
+    expect(onLongPressCallback).toHaveBeenCalledTimes(0)
+  }
+
   function suites(isRef: boolean) {
     describe('given no options', () => {
       it('should trigger longpress after 500ms', () => triggerCallback(isRef))
@@ -97,6 +120,7 @@ describe('onLongPress', () => {
       it('should not tirgger longpress when child element on longpress', () => notTriggerCallbackOnChildLongPress(isRef))
       it('should work with once and prevent modifiers', () => workOnceAndPreventModifiers(isRef))
       it('should stop propagation', () => stopPropagation(isRef))
+      it('should remove event listeners after being stopped', () => stopEventListeners(isRef))
     })
   }
 

packages/core/onLongPress/index.ts

@@ -1,3 +1,4 @@
+import type { Fn } from '@vueuse/shared'
 import { computed } from 'vue-demi'
 import type { MaybeElementRef } from '../unrefElement'
 import { unrefElement } from '../unrefElement'
@@ -63,6 +64,12 @@ export function onLongPress(
     once: options?.modifiers?.once,
   }
 
-  useEventListener(elementRef, 'pointerdown', onDown, listenerOptions)
-  useEventListener(elementRef, ['pointerup', 'pointerleave'], clear, listenerOptions)
+  const cleanup = [
+    useEventListener(elementRef, 'pointerdown', onDown, listenerOptions),
+    useEventListener(elementRef, ['pointerup', 'pointerleave'], clear, listenerOptions),
+  ].filter(Boolean) as Fn[]
+
+  const stop = () => cleanup.forEach(fn => fn())
+
+  return stop
 }

packages/core/package.json

@@ -37,7 +37,7 @@
   "jsdelivr": "./index.iife.min.js",
   "types": "./index.d.cts",
   "dependencies": {
-    "@types/web-bluetooth": "^0.0.18",
+    "@types/web-bluetooth": "^0.0.20",
     "@vueuse/metadata": "workspace:*",
     "@vueuse/shared": "workspace:*",
     "vue-demi": ">=0.14.6"

packages/core/useDraggable/index.ts

@@ -142,11 +142,13 @@ export function useDraggable(
       return
     if (toValue(exact) && e.target !== toValue(target))
       return
-    const container = toValue(containerElement) ?? toValue(target)
-    const rect = container!.getBoundingClientRect()
+
+    const container = toValue(containerElement)
+    const containerRect = container?.getBoundingClientRect?.()
+    const targetRect = toValue(target)!.getBoundingClientRect()
     const pos = {
-      x: e.clientX - rect.left,
-      y: e.clientY - rect.top,
+      x: e.clientX - (container ? targetRect.left - containerRect!.left : targetRect.left),
+      y: e.clientY - (container ? targetRect.top - containerRect!.top : targetRect.top),
     }
     if (onStart?.(pos, e) === false)
       return
@@ -159,11 +161,20 @@ export function useDraggable(
     if (!pressedDelta.value)
       return
 
+    const container = toValue(containerElement)
+    const containerRect = container?.getBoundingClientRect?.()
+    const targetRect = toValue(target)!.getBoundingClientRect()
     let { x, y } = position.value
-    if (axis === 'x' || axis === 'both')
+    if (axis === 'x' || axis === 'both') {
       x = e.clientX - pressedDelta.value.x
-    if (axis === 'y' || axis === 'both')
+      if (container)
+        x = Math.min(Math.max(0, x), containerRect!.width - targetRect!.width)
+    }
+    if (axis === 'y' || axis === 'both') {
       y = e.clientY - pressedDelta.value.y
+      if (container)
+        y = Math.min(Math.max(0, y), containerRect!.height - targetRect!.height)
+    }
     position.value = {
       x,
       y,

packages/core/useElementByPoint/index.ts

@@ -28,7 +28,8 @@ export interface UseElementByPointReturn<Multiple extends boolean = false> exten
  */
 export function useElementByPoint<M extends boolean = false>(options: UseElementByPointOptions<M>): UseElementByPointReturn<M> {
   const {
-    x, y,
+    x,
+    y,
     document = defaultDocument,
     multiple,
     interval = 'requestAnimationFrame',

packages/core/useFetch/index.test.ts

@@ -62,7 +62,7 @@ describe.skipIf(isBelowNode18)('useFetch', () => {
     await useFetch('https://example.com/', {
       fetch: <typeof window.fetch>((input, init) => {
         count = 1
-        return window.fetch(input, init)
+        return window.fetch(input as string, init)
       }),
     })
 

packages/core/useFileDialog/index.md

@@ -13,6 +13,7 @@ import { useFileDialog } from '@vueuse/core'
 
 const { files, open, reset, onChange } = useFileDialog({
   accept: 'image/*', // Set to accept only image files
+  directory: true, // Select directories instead of files if set true
 })
 
 onChange((files) => {

packages/core/useFileDialog/index.ts

@@ -23,12 +23,19 @@ export interface UseFileDialogOptions extends ConfigurableDocument {
    * @default false
    */
   reset?: boolean
+  /**
+   * Select directories instead of files.
+   * @see [HTMLInputElement webkitdirectory](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory)
+   * @default false
+   */
+  directory?: boolean
 }
 
 const DEFAULT_OPTIONS: UseFileDialogOptions = {
   multiple: true,
   accept: '*',
   reset: false,
+  directory: false,
 }
 
 export interface UseFileDialogReturn {
@@ -79,6 +86,8 @@ export function useFileDialog(options: UseFileDialogOptions = {}): UseFileDialog
     }
     input.multiple = _options.multiple!
     input.accept = _options.accept!
+    // webkitdirectory key is not stabled, maybe replaced in the future.
+    input.webkitdirectory = _options.directory!
     if (hasOwn(_options, 'capture'))
       input.capture = _options.capture!
     if (_options.reset)

packages/core/useInfiniteScroll/index.md

@@ -13,7 +13,7 @@ Infinite scrolling of the element.
 import { ref } from 'vue'
 import { useInfiniteScroll } from '@vueuse/core'
 
-const el = ref<HTMLElement>(null)
+const el = ref<HTMLElement | null>(null)
 const data = ref([1, 2, 3, 4, 5, 6])
 
 useInfiniteScroll(

packages/core/useIntersectionObserver/index.md

@@ -49,7 +49,7 @@ const root = ref(null)
 
 const isVisible = ref(false)
 
-function onIntersectionObserver([{ isIntersecting }]) {
+function onIntersectionObserver([{ isIntersecting }]: IntersectionObserverEntry[]) {
   isVisible.value = isIntersecting
 }
 

packages/core/useMutationObserver/index.test.ts

@@ -166,4 +166,25 @@ describe('useMutationObserver', () => {
     await promiseTimeout(10)
     expect(cb).toHaveBeenCalledTimes(1)
   })
+
+  it('should work with takeRecords', async () => {
+    const target = document.createElement('div')
+    const cb = vi.fn()
+
+    const { takeRecords } = useMutationObserver(target, cb, {
+      attributes: true,
+    })
+
+    target.setAttribute('id', 'footer')
+    await promiseTimeout(10)
+    expect(cb).toHaveBeenCalledTimes(1)
+
+    target.setAttribute('id', 'header')
+    const records = takeRecords()
+
+    await promiseTimeout(10)
+    expect(records).toHaveLength(1)
+    expect(records![0].target).toBe(target)
+    expect(cb).toHaveBeenCalledTimes(1)
+  })
 })

packages/core/useMutationObserver/index.ts

@@ -46,6 +46,10 @@ export function useMutationObserver(
     { immediate: true },
   )
 
+  const takeRecords = () => {
+    return observer?.takeRecords()
+  }
+
   const stop = () => {
     cleanup()
     stopWatch()
@@ -56,6 +60,7 @@ export function useMutationObserver(
   return {
     isSupported,
     stop,
+    takeRecords,
   }
 }
 

packages/core/useScriptTag/index.md

@@ -4,9 +4,9 @@ category: Browser
 
 # useScriptTag
 
-Creates a script tag, with support for automaticly unloading (deleting) the script tag on unmount.
+Creates a script tag, with support for automatically unloading (deleting) the script tag on unmount.
 
-If a script tag already exists for the given URL, `useScriptTag()` will not create another script tag, but keep in mind that, depending on how you use it, `useScriptTag()` it might have already loaded then unloaded that particular JS file from a previous call of `useScriptTag()`.
+If a script tag already exists for the given URL, `useScriptTag()` will not create another script tag, but keep in mind that depending on how you use it, `useScriptTag()` might have already loaded then unloaded that particular JS file from a previous call of `useScriptTag()`.
 
 ## Usage
 
@@ -22,9 +22,9 @@ useScriptTag(
 )
 ```
 
-The script will be automatically loaded on the component mounted and removed when the component on unmounting.
+The script will be automatically loaded when the component is mounted and removed when the component is unmounted.
 
-## Configurations
+## Configuration
 
 Set `manual: true` to have manual control over the timing to load the script.