fix: improve touch handling

aioli/src/Content.vue

@@ -29,24 +29,23 @@
       }
     "
     @interact-outside="emit('interactOutside', $event)"
-    v-on="maybeMouseEvents"
-    @touchstart.passive="onPress"
-    @touchmove.passive="onDrag"
-    @touchend.passive="onRelease"
+    @pointerdown.passive="onPress"
+    @pointermove.passive="onDrag"
+    @pointerup.passive="onRelease"
   >
     <slot />
   </DialogContent>
 </template>
 
 <script setup lang="ts">
 import { DialogContent, type DialogContentProps, type DialogContentEmits } from 'radix-vue'
-import { ref, watch, type ComponentPublicInstance, nextTick, computed } from 'vue'
+import { ref, watch, type ComponentPublicInstance, nextTick } from 'vue'
 import { useDrawerContext } from './context'
 
 const props = defineProps<DialogContentProps>()
 const emit = defineEmits<DialogContentEmits>()
 
-const { drawerRef, onPress, onRelease, onDrag, persistent, keyboardIsOpen, visible, openProp, modal, allowMouseDrag } =
+const { drawerRef, onPress, onRelease, onDrag, persistent, keyboardIsOpen, visible, openProp, modal } =
   useDrawerContext()!
 
 const contentNode = ref<ComponentPublicInstance>()
@@ -60,14 +59,4 @@ watch(
   },
   { immediate: true },
 )
-
-const maybeMouseEvents = computed(() => {
-  if (!allowMouseDrag.value) return {}
-
-  return {
-    pointerdown: onPress,
-    pointermove: onDrag,
-    pointerup: onRelease,
-  }
-})
 </script>

aioli/src/Root.vue

@@ -264,6 +264,7 @@ function shouldDrag(el: EventTarget, isDraggingUp: boolean) {
 
 let dragStartY = 0
 function onPress(event: PointerEvent) {
+  if (!allowMouseDrag.value && event.pointerType === 'mouse') return
   if (!cancellableClosing.value && !openProp.value) return // Don't allow dragging if the drawer is closed and cancellableClosing is false
   if (persistent.value || isDragging.value) return
   if (drawerRef.value && !drawerRef.value.contains(event.target as Node)) return
@@ -273,29 +274,17 @@ function onPress(event: PointerEvent) {
 
   // Ensure we maintain correct pointer capture even when going outside of the drawer
   ;(event.target as HTMLElement).setPointerCapture(event.pointerId)
-  pointerStartY.value = getScreenY(event)
+  pointerStartY.value = event.screenY
   dragStartY = getTranslateY(drawerRef.value!) ?? 0 // get current translate e.g. intercepting a close animation
   resetDrawerStyles()
   onDrag(event) // transition cancelling shouldn't require mouse movement
 }
 
-function getScreenY(event: PointerEvent | TouchEvent) {
-  let y = 0
-  if ('touches' in event) {
-    y = event.touches[0]?.screenY
-    if (y === undefined) {
-      y = event.changedTouches[0].screenY
-    }
-  } else {
-    y = event.screenY
-  }
-  return y
-}
-
 function onDrag(event: PointerEvent) {
+  if (!allowMouseDrag.value && event.pointerType === 'mouse') return
   // We need to know how much of the drawer has been dragged in percentages so that we can transform background accordingly
   if (isDragging.value) {
-    const y = getScreenY(event)
+    const y = event.screenY
 
     const draggedDistance = pointerStartY.value - y - dragStartY
     const isDraggingUp = draggedDistance > 0
@@ -346,6 +335,7 @@ function onDrag(event: PointerEvent) {
 }
 
 function onRelease(event: PointerEvent) {
+  if (!allowMouseDrag.value && event.pointerType === 'mouse') return
   if (!drawerRef.value) return
   const swipeAmount = getTranslateY(drawerRef.value)
 
@@ -368,7 +358,7 @@ function onRelease(event: PointerEvent) {
   if (dragStartTime.value === null) return
 
   const timeTaken = dragEndTime.value.getTime() - dragStartTime.value.getTime()
-  const distMoved = pointerStartY.value - getScreenY(event)
+  const distMoved = pointerStartY.value - event.screenY
   const velocity = Math.abs(distMoved) / timeTaken
   const visibleDrawerHeight = Math.min(drawerRef.value.getBoundingClientRect().height ?? 0, window.innerHeight)
 

website/app.vue

@@ -39,7 +39,7 @@
           <ADialogContent
             class="fixed flex flex-col bg-white border border-gray-200 border-b-none rounded-t-[10px] bottom-0 left-0 right-0 h-full max-h-[93%] mx-[-1px]"
           >
-            <div class="p-4 bg-white rounded-t-[10px] flex-1 overflow-y-auto">
+            <div class="p-4 bg-white rounded-t-[10px] flex-1">
               <div class="mx-auto w-12 h-1.5 flex-shrink-0 rounded-full bg-gray-300 mb-8" />
               <div class="max-w-md mx-auto">
                 <h2 class="font-medium mb-4">Drawer for Vue.</h2>