feat: add use-touch hook

src/hooks/use-click-outside.ts

@@ -1,5 +1,5 @@
-import { Ref, onMounted } from 'vue';
-import { useHandler } from './use-handler';
+import { Ref } from 'vue';
+import { useGlobalEvent } from './use-global-event';
 
 export type UseClickOutsideOpitons = {
   event: string;
@@ -17,7 +17,5 @@ export function useClickOutside(options: UseClickOutsideOpitons) {
     }
   }
 
-  onMounted(() => {
-    useHandler(document, event, onClick, false, flag);
-  });
+  useGlobalEvent(document, event, onClick, false, flag);
 }

src/hooks/use-global-event.ts

@@ -8,7 +8,7 @@ import {
   onDeactivated
 } from 'vue';
 
-export function useHandler(
+export function useGlobalEvent(
   target: EventTarget,
   event: string,
   handler: EventListener,

src/hooks/use-touch.ts

@@ -0,0 +1,63 @@
+import { ref } from 'vue';
+
+const MIN_DISTANCE = 10;
+
+function getDirection(x: number, y: number) {
+  if (x > y && x > MIN_DISTANCE) {
+    return 'horizontal';
+  }
+
+  if (y > x && y > MIN_DISTANCE) {
+    return 'vertical';
+  }
+
+  return '';
+}
+
+export function useTouch() {
+  const startX = ref(0);
+  const startY = ref(0);
+  const deltaX = ref(0);
+  const deltaY = ref(0);
+  const offsetX = ref(0);
+  const offsetY = ref(0);
+  const direction = ref('');
+
+  function reset() {
+    direction.value = '';
+    deltaX.value = 0;
+    deltaY.value = 0;
+    offsetX.value = 0;
+    offsetY.value = 0;
+  }
+
+  function start(event: TouchEvent) {
+    reset();
+    startX.value = event.touches[0].clientX;
+    startY.value = event.touches[0].clientY;
+  }
+
+  function move(event: TouchEvent) {
+    const touch = event.touches[0];
+    deltaX.value = touch.clientX - this.startX;
+    deltaY.value = touch.clientY - this.startY;
+    offsetX.value = Math.abs(this.deltaX);
+    offsetY.value = Math.abs(this.deltaY);
+
+    if (!direction.value) {
+      direction.value = getDirection(offsetX.value, offsetY.value);
+    }
+  }
+
+  return {
+    move,
+    start,
+    startX,
+    startY,
+    deltaX,
+    deltaY,
+    offsetX,
+    offsetY,
+    direction
+  };
+}