From 2b383b124bb77a784c926e15d0fee0b52cfaaf09 Mon Sep 17 00:00:00 2001
From: Nikita MIkhailov <mikhaylovnv.dev@gmail.com>
Date: Sun, 26 Jun 2022 10:06:42 +0300
Subject: [PATCH 1/3] feat(onLongPress): added modifiers

---
 packages/core/onLongPress/directive.ts  |  4 +--
 packages/core/onLongPress/index.md      | 20 +++++++++++--
 packages/core/onLongPress/index.test.ts | 37 +++++++++++++++++++++++--
 packages/core/onLongPress/index.ts      | 35 ++++++++++++++++++++---
 4 files changed, 85 insertions(+), 11 deletions(-)

diff --git a/packages/core/onLongPress/directive.ts b/packages/core/onLongPress/directive.ts
index f660f65d410..e7403839cc3 100644
--- a/packages/core/onLongPress/directive.ts
+++ b/packages/core/onLongPress/directive.ts
@@ -17,9 +17,9 @@ 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)
+      onLongPress(el, binding.value[0], { ...binding.value[1], modifiers: binding.modifiers })
   },
 }
 
diff --git a/packages/core/onLongPress/index.md b/packages/core/onLongPress/index.md
index 3b57efd0f11..0d385b77137 100644
--- a/packages/core/onLongPress/index.md
+++ b/packages/core/onLongPress/index.md
@@ -6,6 +6,13 @@ category: Sensors
 
 Listen for a long press on an element.
 
+Function provide 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>
 
diff --git a/packages/core/onLongPress/index.test.ts b/packages/core/onLongPress/index.test.ts
index 7dfceb28690..69c038af3e5 100644
--- a/packages/core/onLongPress/index.test.ts
+++ b/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)
+      })
     })
   })
 })
diff --git a/packages/core/onLongPress/index.ts b/packages/core/onLongPress/index.ts
index 4c5544e0821..94e63c27a0f 100644
--- a/packages/core/onLongPress/index.ts
+++ b/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,31 @@ 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),
+      () => {
+        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)
 }

From 02c26a69386675b65a2d60d2e3209062e5df0143 Mon Sep 17 00:00:00 2001
From: Nikita MIkhailov <mikhaylovnv.dev@gmail.com>
Date: Sun, 26 Jun 2022 11:23:08 +0300
Subject: [PATCH 2/3] feat(onLongPress): using event modifiers with directive
 and array value.

---
 packages/core/onLongPress/directive.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/onLongPress/directive.ts b/packages/core/onLongPress/directive.ts
index e7403839cc3..bb32d6c9cac 100644
--- a/packages/core/onLongPress/directive.ts
+++ b/packages/core/onLongPress/directive.ts
@@ -19,7 +19,7 @@ BindingValueFunction | BindingValueArray
     if (typeof binding.value === 'function')
       onLongPress(el, binding.value, { modifiers: binding.modifiers })
     else
-      onLongPress(el, binding.value[0], { ...binding.value[1], modifiers: binding.modifiers })
+      onLongPress(el, ...binding.value)
   },
 }
 

From 54beb65b896b413c051bb3978efe772e954d03c1 Mon Sep 17 00:00:00 2001
From: Nikita MIkhailov <mikhaylovnv.dev@gmail.com>
Date: Sun, 26 Jun 2022 11:27:31 +0300
Subject: [PATCH 3/3] chore: fix error in docs

---
 packages/core/onLongPress/index.md | 2 +-
 packages/core/onLongPress/index.ts | 4 +---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/core/onLongPress/index.md b/packages/core/onLongPress/index.md
index 0d385b77137..0e0f316fccb 100644
--- a/packages/core/onLongPress/index.md
+++ b/packages/core/onLongPress/index.md
@@ -6,7 +6,7 @@ category: Sensors
 
 Listen for a long press on an element.
 
-Function provide modifiers in options
+Function provides modifiers in options
   * stop
   * once
   * prevent
diff --git a/packages/core/onLongPress/index.ts b/packages/core/onLongPress/index.ts
index 94e63c27a0f..37e7528c6e9 100644
--- a/packages/core/onLongPress/index.ts
+++ b/packages/core/onLongPress/index.ts
@@ -53,9 +53,7 @@ export function onLongPress(
       ev.stopPropagation()
 
     timeout = setTimeout(
-      () => {
-        handler(ev)
-      },
+      () => handler(ev),
       options?.delay ?? DEFAULT_DELAY,
     ) as unknown as number
   }