fix(useSwipe)!: use literal for swipe direction instead of enum

packages/core/usePointerSwipe/demo.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { usePointerSwipe } from '@vueuse/core'
-import type { SwipeDirection } from '@vueuse/core'
+import type { UseSwipeDirection } from '@vueuse/core'
 
 const target = ref<HTMLElement | null>(null)
 const container = ref<HTMLElement | null>(null)
@@ -30,7 +30,7 @@ const { distanceX, isSwiping } = usePointerSwipe(target, {
       }
     }
   },
-  onSwipeEnd(e: PointerEvent, direction: SwipeDirection) {
+  onSwipeEnd(e: PointerEvent, direction: UseSwipeDirection) {
     if (distanceX.value < 0 && containerWidth.value && (Math.abs(distanceX.value) / containerWidth.value) >= 0.5) {
       left.value = '100%'
       opacity.value = 0

packages/core/usePointerSwipe/index.test.ts

@@ -1,4 +1,3 @@
-import { SwipeDirection } from '../useSwipe'
 import type { UsePointerSwipeOptions } from './index'
 import { usePointerSwipe } from './index'
 
@@ -65,7 +64,7 @@ describe('usePointerSwipe', () => {
     expect(onSwipeStart).toHaveBeenCalledOnce()
     expect(onSwipe).toHaveBeenCalledOnce()
     expect(onSwipeEnd).toHaveBeenCalledOnce()
-    expect(onSwipeEnd).toHaveBeenCalledWith(expect.anything(), SwipeDirection.RIGHT)
+    expect(onSwipeEnd).toHaveBeenCalledWith(expect.anything(), 'right')
   })
 
   it('threshold is exceeded in between', () => {
@@ -76,27 +75,27 @@ describe('usePointerSwipe', () => {
     expect(onSwipeStart).toHaveBeenCalledOnce()
     expect(onSwipe).toHaveBeenCalledTimes(2)
     expect(onSwipeEnd).toHaveBeenCalledOnce()
-    expect(onSwipeEnd).toHaveBeenCalledWith(expect.anything(), SwipeDirection.NONE)
+    expect(onSwipeEnd).toHaveBeenCalledWith(expect.anything(), 'none')
   })
 
   it('reactivity', () => {
     const { isSwiping, direction, distanceX, distanceY } = usePointerSwipe(target, options())
 
     target.dispatchEvent(mockPointerDown(0, 0))
     expect(isSwiping.value).toBeFalsy()
-    expect(direction.value).toBe(SwipeDirection.NONE)
+    expect(direction.value).toBe('none')
     expect(distanceX.value).toBe(0)
     expect(distanceY.value).toBe(0)
 
     target.dispatchEvent(mockPointerMove(threshold, threshold / 2))
     expect(isSwiping.value).toBeTruthy()
-    expect(direction.value).toBe(SwipeDirection.RIGHT)
+    expect(direction.value).toBe('right')
     expect(distanceX.value).toBe(-threshold)
     expect(distanceY.value).toBe(-threshold / 2)
 
     target.dispatchEvent(mockPointerUp(threshold, threshold / 2))
     expect(isSwiping.value).toBeFalsy()
-    expect(direction.value).toBe(SwipeDirection.RIGHT)
+    expect(direction.value).toBe('right')
     expect(distanceX.value).toBe(-threshold)
     expect(distanceY.value).toBe(-threshold / 2)
   })
@@ -106,19 +105,19 @@ describe('usePointerSwipe', () => {
 
     target.dispatchEvent(mockPointerDown(0, 0))
     expect(isSwiping.value).toBeFalsy()
-    expect(direction.value).toBe(SwipeDirection.NONE)
+    expect(direction.value).toBe('none')
     expect(distanceX.value).toBe(0)
     expect(distanceY.value).toBe(0)
 
     target.dispatchEvent(mockPointerMove(threshold, threshold / 2))
     expect(isSwiping.value).toBeFalsy()
-    expect(direction.value).toBe(SwipeDirection.NONE)
+    expect(direction.value).toBe('none')
     expect(distanceX.value).toBe(0)
     expect(distanceY.value).toBe(0)
 
     target.dispatchEvent(mockPointerUp(threshold, threshold / 2))
     expect(isSwiping.value).toBeFalsy()
-    expect(direction.value).toBe(SwipeDirection.NONE)
+    expect(direction.value).toBe('none')
     expect(distanceX.value).toBe(0)
     expect(distanceY.value).toBe(0)
   })
@@ -128,7 +127,7 @@ describe('usePointerSwipe', () => {
 
     target.dispatchEvent(mockPointerMove(threshold, threshold / 2))
     expect(isSwiping.value).toBeFalsy()
-    expect(direction.value).toBe(SwipeDirection.NONE)
+    expect(direction.value).toBe('none')
     expect(distanceX.value).toBe(0)
     expect(distanceY.value).toBe(0)
   })
@@ -138,24 +137,24 @@ describe('usePointerSwipe', () => {
 
     target.dispatchEvent(mockPointerDown(0, 0))
     expect(isSwiping.value).toBeFalsy()
-    expect(direction.value).toBe(SwipeDirection.NONE)
+    expect(direction.value).toBe('none')
     expect(distanceX.value).toBe(0)
     expect(distanceY.value).toBe(0)
 
     stop()
 
     target.dispatchEvent(mockPointerMove(threshold, threshold / 2))
     expect(isSwiping.value).toBeFalsy()
-    expect(direction.value).toBe(SwipeDirection.NONE)
+    expect(direction.value).toBe('none')
     expect(distanceX.value).toBe(0)
     expect(distanceY.value).toBe(0)
   })
 
   const directionTests = [
-    [SwipeDirection.UP, [[0, 2 * threshold], [0, threshold], [0, threshold]]],
-    [SwipeDirection.DOWN, [[0, 0], [0, threshold], [0, threshold]]],
-    [SwipeDirection.LEFT, [[2 * threshold, 0], [threshold, 0], [threshold, 0]]],
-    [SwipeDirection.RIGHT, [[0, 0], [threshold, 0], [threshold, 0]]],
+    ['up', [[0, 2 * threshold], [0, threshold], [0, threshold]]],
+    ['down', [[0, 0], [0, threshold], [0, threshold]]],
+    ['left', [[2 * threshold, 0], [threshold, 0], [threshold, 0]]],
+    ['right', [[0, 0], [threshold, 0], [threshold, 0]]],
   ]
 
   directionTests.forEach((config) => {

packages/core/usePointerSwipe/index.ts

@@ -3,8 +3,8 @@ import { resolveRef } from '@vueuse/shared'
 import type { Ref } from 'vue-demi'
 import { computed, reactive, readonly, ref } from 'vue-demi'
 import { useEventListener } from '../useEventListener'
-import { SwipeDirection } from '../useSwipe/index'
 import type { PointerType, Position } from '../types'
+import type { UseSwipeDirection } from '../useSwipe'
 
 export interface UsePointerSwipeOptions {
   /**
@@ -25,7 +25,7 @@ export interface UsePointerSwipeOptions {
   /**
    * Callback on swipe end.
    */
-  onSwipeEnd?: (e: PointerEvent, direction: keyof typeof SwipeDirection) => void
+  onSwipeEnd?: (e: PointerEvent, direction: UseSwipeDirection) => void
 
   /**
    * Pointer types to listen to.
@@ -37,7 +37,7 @@ export interface UsePointerSwipeOptions {
 
 export interface UsePointerSwipeReturn {
   readonly isSwiping: Ref<boolean>
-  direction: Readonly<Ref<keyof typeof SwipeDirection | null>>
+  direction: Readonly<Ref<UseSwipeDirection>>
   readonly posStart: Position
   readonly posEnd: Position
   distanceX: Readonly<Ref<number>>
@@ -86,17 +86,17 @@ export function usePointerSwipe(
 
   const direction = computed(() => {
     if (!isThresholdExceeded.value)
-      return SwipeDirection.NONE
+      return 'none'
 
     if (abs(distanceX.value) > abs(distanceY.value)) {
       return distanceX.value > 0
-        ? SwipeDirection.LEFT
-        : SwipeDirection.RIGHT
+        ? 'left'
+        : 'right'
     }
     else {
       return distanceY.value > 0
-        ? SwipeDirection.UP
-        : SwipeDirection.DOWN
+        ? 'up'
+        : 'down'
     }
   })
 

packages/core/useSwipe/demo.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import type { SwipeDirection } from '@vueuse/core'
+import type { UseSwipeDirection } from '@vueuse/core'
 import { useSwipe } from '@vueuse/core'
 
 const target = ref<HTMLElement | null>(null)
@@ -30,7 +30,7 @@ const { direction, isSwiping, lengthX, lengthY } = useSwipe(
         }
       }
     },
-    onSwipeEnd(e: TouchEvent, direction: SwipeDirection) {
+    onSwipeEnd(e: TouchEvent, direction: UseSwipeDirection) {
       if (lengthX.value < 0 && containerWidth.value && (Math.abs(lengthX.value) / containerWidth.value) >= 0.5) {
         left.value = '100%'
         opacity.value = 0

packages/core/useSwipe/index.test.ts

@@ -1,4 +1,4 @@
-import { SwipeDirection, useSwipe } from './index'
+import { useSwipe } from './index'
 
 describe('useSwipe', () => {
   const target = document.createElement('div')
@@ -72,32 +72,32 @@ describe('useSwipe', () => {
 
     expect(onSwipe).toBeCalledTimes(2)
     expect(onSwipeEnd).toHaveBeenCalledOnce()
-    expect(onSwipeEnd.mock.calls[0][1]).toBe(SwipeDirection.NONE)
+    expect(onSwipeEnd.mock.calls[0][1]).toBe('none')
   })
 
   it('reactivity', () => {
     const { isSwiping, direction, lengthX, lengthY } = useSwipe(target, { threshold, onSwipe, onSwipeEnd })
 
     target.dispatchEvent(mockTouchStart(0, 0))
     expect(isSwiping.value).toBeFalsy()
-    expect(direction.value).toBe(SwipeDirection.NONE)
+    expect(direction.value).toBe('none')
     expect(lengthX.value).toBe(0)
     expect(lengthY.value).toBe(0)
 
     target.dispatchEvent(mockTouchMove(threshold, 5))
     expect(isSwiping.value).toBeTruthy()
-    expect(direction.value).toBe(SwipeDirection.RIGHT)
+    expect(direction.value).toBe('right')
     expect(lengthX.value).toBe(-threshold)
     expect(lengthY.value).toBe(-5)
 
     target.dispatchEvent(mockTouchEnd(threshold, 5))
   })
 
   ;([
-    [SwipeDirection.UP, [[0, 2 * threshold], [0, threshold], [0, threshold]]],
-    [SwipeDirection.DOWN, [[0, 0], [0, threshold], [0, threshold]]],
-    [SwipeDirection.LEFT, [[2 * threshold, 0], [threshold, 0], [threshold, 0]]],
-    [SwipeDirection.RIGHT, [[0, 0], [threshold, 0], [threshold, 0]]],
+    ['up', [[0, 2 * threshold], [0, threshold], [0, threshold]]],
+    ['down', [[0, 0], [0, threshold], [0, threshold]]],
+    ['left', [[2 * threshold, 0], [threshold, 0], [threshold, 0]]],
+    ['right', [[0, 0], [threshold, 0], [threshold, 0]]],
   ] as [string, number[][]][])
     .forEach(([expected, coords]) => {
       it(`swipe ${expected}`, () => {

packages/core/useSwipe/index.ts

@@ -7,15 +7,7 @@ import type { ConfigurableWindow } from '../_configurable'
 import { defaultWindow } from '../_configurable'
 import type { Position } from '../types'
 
-export const SwipeDirection = {
-  UP: 'UP',
-  DOWN: 'DOWN',
-  LEFT: 'LEFT',
-  RIGHT: 'RIGHT',
-  NONE: 'NONE',
-} as const
-
-export type SwipeDirectionType = typeof SwipeDirection
+export type UseSwipeDirection = 'up' | 'down' | 'left' | 'right' | 'none'
 
 export interface UseSwipeOptions extends ConfigurableWindow {
   /**
@@ -43,13 +35,13 @@ export interface UseSwipeOptions extends ConfigurableWindow {
   /**
    * Callback on swipe ends
    */
-  onSwipeEnd?: (e: TouchEvent, direction: keyof typeof SwipeDirection) => void
+  onSwipeEnd?: (e: TouchEvent, direction: UseSwipeDirection) => void
 }
 
 export interface UseSwipeReturn {
   isPassiveEventSupported: boolean
   isSwiping: Ref<boolean>
-  direction: ComputedRef<keyof typeof SwipeDirection | null>
+  direction: ComputedRef<UseSwipeDirection>
   coordsStart: Readonly<Position>
   coordsEnd: Readonly<Position>
   lengthX: ComputedRef<number>
@@ -88,19 +80,19 @@ export function useSwipe(
 
   const isSwiping = ref(false)
 
-  const direction = computed(() => {
+  const direction = computed((): UseSwipeDirection => {
     if (!isThresholdExceeded.value)
-      return SwipeDirection.NONE
+      return 'none'
 
     if (abs(diffX.value) > abs(diffY.value)) {
       return diffX.value > 0
-        ? SwipeDirection.LEFT
-        : SwipeDirection.RIGHT
+        ? 'left'
+        : 'right'
     }
     else {
       return diffY.value > 0
-        ? SwipeDirection.UP
-        : SwipeDirection.DOWN
+        ? 'up'
+        : 'down'
     }
   })