Merge branch 'main' into feat/use-stepper

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueuse/monorepo",
-  "version": "8.7.4",
+  "version": "8.8.0",
   "private": true,
   "packageManager": "pnpm@7.1.7",
   "description": "Collection of essential Vue Composition Utilities",
@@ -35,30 +35,30 @@
     "watch": "esno scripts/build.ts --watch"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.25.1",
-    "@antfu/ni": "^0.16.2",
-    "@iconify/json": "^2.1.62",
+    "@antfu/eslint-config": "^0.25.2",
+    "@antfu/ni": "^0.16.3",
+    "@iconify/json": "^2.1.72",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-replace": "^4.0.0",
     "@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.0.0",
+    "@types/node": "^18.0.2",
     "@types/prettier": "^2.6.3",
     "@types/semver": "^7.3.10",
     "@types/sharp": "^0.30.4",
-    "@vitest/ui": "^0.15.1",
+    "@vitest/ui": "^0.17.0",
     "@vue/compiler-sfc": "^3.2.37",
-    "@vue/composition-api": "^1.6.2",
-    "@vue/test-utils": "^2.0.1",
+    "@vue/composition-api": "^1.7.0",
+    "@vue/test-utils": "^2.0.2",
     "@vue/theme": "^1.0.2",
     "axios": "^0.27.2",
-    "bumpp": "^8.2.0",
+    "bumpp": "^8.2.1",
     "consola": "^2.15.3",
     "cross-env": "^7.0.3",
     "esbuild-register": "^3.3.3",
-    "eslint": "^8.17.0",
+    "eslint": "^8.19.0",
     "esno": "^0.16.3",
     "export-size": "^0.5.2",
     "fast-glob": "^3.2.11",
@@ -69,34 +69,34 @@
     "gray-matter": "^4.0.3",
     "js-yaml": "^4.1.0",
     "jsdom": "^19.0.0",
-    "lint-staged": "^13.0.1",
+    "lint-staged": "^13.0.3",
     "markdown-table": "^3.0.2",
     "md5": "^2.3.0",
-    "msw": "^0.42.1",
+    "msw": "^0.43.0",
     "node-fetch": "^3.2.6",
     "ohmyfetch": "^0.4.18",
-    "pnpm": "^7.2.1",
+    "pnpm": "^7.5.0",
     "postcss": "^8.4.14",
     "postcss-nested": "^5.0.6",
     "prettier": "^2.7.1",
     "prism-theme-vars": "^0.2.3",
     "remove-markdown": "^0.5.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.75.6",
+    "rollup": "^2.75.7",
     "rollup-plugin-dts": "^4.2.2",
     "rollup-plugin-esbuild": "^4.9.1",
-    "sharp": "^0.30.6",
-    "simple-git": "^3.7.1",
+    "sharp": "^0.30.7",
+    "simple-git": "^3.10.0",
     "simple-git-hooks": "^2.8.0",
-    "typescript": "4.7.3",
-    "unocss": "^0.39.0",
-    "unplugin-icons": "^0.14.4",
-    "unplugin-vue-components": "^0.19.6",
-    "vite": "^2.9.12",
-    "vite-plugin-inspect": "^0.5.0",
-    "vite-plugin-pwa": "^0.12.0",
+    "typescript": "4.7.4",
+    "unocss": "^0.43.2",
+    "unplugin-icons": "^0.14.7",
+    "unplugin-vue-components": "^0.21.0",
+    "vite": "^2.9.13",
+    "vite-plugin-inspect": "^0.5.1",
+    "vite-plugin-pwa": "^0.12.2",
     "vitepress": "^0.22.4",
-    "vitest": "^0.15.1",
+    "vitest": "^0.17.0",
     "vue": "^3.2.37",
     "vue2": "npm:vue@^2.6.14"
   },

packages/.vitepress/theme/components/FunctionInfo.vue

@@ -17,7 +17,7 @@ const getFunctionLink = (fn: string) => {
 </script>
 
 <template>
-  <div class="grid grid-cols-[100px_auto] gap-2 text-sm -mt-2 mb-8 items-center">
+  <div class="grid grid-cols-[100px_auto] gap-2 text-sm -mt-2 mb-8 items-start">
     <div opacity="50">
       Category
     </div>
@@ -38,15 +38,15 @@ const getFunctionLink = (fn: string) => {
       <div opacity="50">
         Alias
       </div>
-      <div flex="~ gap-1">
+      <div flex="~ gap-1 wrap">
         <code v-for="a, idx of info.alias" :key="idx" class="!py-0">{{ a }}</code>
       </div>
     </template>
     <template v-if="info.related?.length">
       <div opacity="50">
         Related
       </div>
-      <div flex="~ gap-1">
+      <div flex="~ gap-1 wrap">
         <a
           v-for="name, idx of info.related"
           :key="idx"

packages/components/package.json

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

packages/contributors.json

@@ -24,6 +24,7 @@
   "donotloveshampo",
   "aa900031",
   "hengshanMWC",
+  "LittleSound",
   "ArcherGu",
   "daikiojm",
   "Demivan",
@@ -36,7 +37,8 @@
   "Talljack",
   "markthree",
   "AllenYu0118",
-  "LittleSound",
+  "FRSgit",
+  "chaii3",
   "peter50216",
   "lvjiaxuan",
   "amrbashir",
@@ -77,7 +79,6 @@
   "unknownzjc",
   "vaaski",
   "sapphi-red",
-  "FRSgit",
   "climba03003",
   "AaronBeaudoin",
   "soub4i",
@@ -102,6 +103,7 @@
   "benatkin",
   "blackhu0804",
   "Bobakanoosh",
+  "Brain777777",
   "bperel",
   "bryceandy",
   "MssText",
@@ -113,6 +115,7 @@
   "damienroche",
   "danmindru",
   "DesselBane",
+  "dfreier",
   "eggsy",
   "posva",
   "Maiquu",
@@ -133,6 +136,7 @@
   "HassanZahirnia",
   "Hebilicious",
   "hognevevle",
+  "Holi0317",
   "HomyeeKing",
   "hchiam",
   "IIFelix",
@@ -211,12 +215,12 @@
   "livthomas",
   "scvnc",
   "viniciuskneves",
+  "waldi",
   "yassilah",
   "Tahul",
   "xiaoxiangmoe",
   "Zenthae",
   "vhhsyt",
-  "chaii3",
   "r1ader",
   "hsyq",
   "hchlq",
@@ -236,6 +240,7 @@
   "odex21",
   "ordago",
   "tolking",
+  "qinwencheng",
   "reslear",
   "rhdehf1030",
   "sondh0127",
@@ -251,6 +256,7 @@
   "nooooooom",
   "Coiven",
   "songlairui",
+  "murongg",
   "jiangmaniu",
   "Hongbusi",
   "egoist"

packages/core/onLongPress/directive.ts

@@ -17,7 +17,7 @@ BindingValueFunction | BindingValueArray
 > = {
   [directiveHooks.mounted](el, binding) {
     if (typeof binding.value === 'function')
-      onLongPress(el, binding.value)
+      onLongPress(el, binding.value, { modifiers: binding.modifiers })
     else
       onLongPress(el, ...binding.value)
   },

packages/core/onLongPress/index.md

@@ -6,6 +6,13 @@ category: Sensors
 
 Listen for a long press on an element.
 
+Function provides modifiers in options
+  * stop
+  * once
+  * prevent
+  * capture
+  * self
+
 ## Usage
 
 ```html
@@ -23,7 +30,11 @@ const resetHook = () => {
   longPressedHook.value = false
 }
 
-onLongPress(htmlRefHook, onLongPressCallbackHook)
+onLongPress(
+  htmlRefHook,
+  onLongPressCallbackHook,
+  { modifiers: { prevent: true } }
+)
 </script>
 
 <template>
@@ -93,11 +104,14 @@ const resetDirective = () => {
 <template>
   <p>Long Pressed: {{ longPressedDirective }}</p>
 
-  <button v-on-long-press="onLongPressCallbackDirective" class="ml-2 button small">
+  <button v-on-long-press.prevent="onLongPressCallbackDirective" class="ml-2 button small">
     Press long
   </button>
 
-  <button v-on-long-press="[onLongPressCallbackDirective, {delay: 1000}]" class="ml-2 button small">
+  <button
+    v-on-long-press="[onLongPressCallbackDirective, {delay: 1000, modifiers: { stop: true }}]"
+    class="ml-2button small"
+  >
     Press long (with options)
   </button>
 

packages/core/onLongPress/index.test.ts

@@ -3,13 +3,14 @@ import type { Ref } from 'vue-demi'
 import { ref } from 'vue-demi'
 import { onLongPress } from '.'
 
-const pointerdownEvent = new PointerEvent('pointerdown')
-
 describe('onLongPress', () => {
   let element: Ref<HTMLElement>
+  let pointerdownEvent: PointerEvent
 
   beforeEach(() => {
     element = ref(document.createElement('div'))
+
+    pointerdownEvent = new PointerEvent('pointerdown', { cancelable: true, bubbles: true })
   })
 
   it('should be defined', () => {
@@ -38,6 +39,22 @@ describe('onLongPress', () => {
         await promiseTimeout(500)
         expect(onLongPressCallback).toHaveBeenCalledTimes(1)
       })
+
+      it('should work with once and prevent modefiers', async () => {
+        const onLongPressCallback = vi.fn()
+        onLongPress(element, onLongPressCallback, { modifiers: { once: true, prevent: true } })
+
+        element.value.dispatchEvent(pointerdownEvent)
+
+        await promiseTimeout(500)
+
+        expect(onLongPressCallback).toHaveBeenCalledTimes(1)
+        expect(pointerdownEvent.defaultPrevented).toBe(true)
+
+        await promiseTimeout(500)
+
+        expect(onLongPressCallback).toHaveBeenCalledTimes(1)
+      })
     })
   })
 
@@ -63,6 +80,22 @@ describe('onLongPress', () => {
         await promiseTimeout(500)
         expect(onLongPressCallback).toHaveBeenCalledTimes(1)
       })
+
+      it('should work with once and prevent modefiers', async () => {
+        const onLongPressCallback = vi.fn()
+        onLongPress(element.value, onLongPressCallback, { modifiers: { once: true, prevent: true } })
+
+        element.value.dispatchEvent(pointerdownEvent)
+
+        await promiseTimeout(500)
+
+        expect(onLongPressCallback).toHaveBeenCalledTimes(1)
+        expect(pointerdownEvent.defaultPrevented).toBe(true)
+
+        await promiseTimeout(500)
+
+        expect(onLongPressCallback).toHaveBeenCalledTimes(1)
+      })
     })
   })
 })

packages/core/onLongPress/index.ts

@@ -12,6 +12,16 @@ export interface OnLongPressOptions {
    * @default 500
    */
   delay?: number
+
+  modifiers?: OnLongPressModifiers
+}
+
+export interface OnLongPressModifiers {
+  stop?: boolean
+  once?: boolean
+  prevent?: boolean
+  capture?: boolean
+  self?: boolean
 }
 
 export function onLongPress(
@@ -31,14 +41,29 @@ export function onLongPress(
   }
 
   function onDown(ev: PointerEvent) {
+    if (options?.modifiers?.self && ev.target !== elementRef.value)
+      return
+
     clear()
+
+    if (options?.modifiers?.prevent)
+      ev.preventDefault()
+
+    if (options?.modifiers?.stop)
+      ev.stopPropagation()
+
     timeout = setTimeout(
       () => handler(ev),
       options?.delay ?? DEFAULT_DELAY,
     ) as unknown as number
   }
 
-  useEventListener(elementRef, 'pointerdown', onDown)
-  useEventListener(elementRef, 'pointerup', clear)
-  useEventListener(elementRef, 'pointerleave', clear)
+  const listenerOptions: AddEventListenerOptions = {
+    capture: options?.modifiers?.capture,
+    once: options?.modifiers?.once,
+  }
+
+  useEventListener(elementRef, 'pointerdown', onDown, listenerOptions)
+  useEventListener(elementRef, 'pointerup', clear, listenerOptions)
+  useEventListener(elementRef, 'pointerleave', clear, listenerOptions)
 }

packages/core/package.json

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