feat: add support for handle only interaction (#71)

* feat: add support for handle only interaction

* Create famous-lamps-know.md

* fix: add missing handle features

* test: add with handle test and related view

* fix: move handleStartInteraction to pointer down listener

* fix: prevent accidental close when drawer is not dismissible

* chore: moved styling to component

* chore: update demo

---------

Co-authored-by: zernonia <[email protected]>
Co-authored-by: zernonia <[email protected]>

Author: adamtrll

.changeset/famous-lamps-know.md

@@ -0,0 +1,5 @@
+---
+"vaul-vue": patch
+---
+
+add support for handle only interaction

packages/vaul-vue/src/DrawerContent.vue

@@ -18,6 +18,7 @@ const {
   keyboardIsOpen,
   closeDrawer,
   direction,
+  handleOnly,
 } = injectDrawerRootContext()
 
 const snapPointHeight = computed(() => {
@@ -45,6 +46,20 @@ function handlePointerDownOutside(event: Event) {
   closeDrawer()
 }
 
+function handlePointerDown(event: PointerEvent) {
+  if (handleOnly.value)
+    return
+
+  onPress(event)
+}
+
+function handleOnDrag(event: PointerEvent) {
+  if (handleOnly.value)
+    return
+
+  onDrag(event)
+}
+
 watch(
   isOpen,
   (open) => {
@@ -65,8 +80,8 @@ watch(
     :vaul-drawer-direction="direction"
     :vaul-drawer-visible="isVisible ? 'true' : 'false'"
     :style="{ '--snap-point-height': snapPointHeight }"
-    @pointerdown="onPress"
-    @pointermove="onDrag"
+    @pointerdown="handlePointerDown"
+    @pointermove="handleOnDrag"
     @pointerup="onRelease"
     @pointer-down-outside="handlePointerDownOutside"
     @escape-key-down="(event) => {

packages/vaul-vue/src/DrawerHandle.vue

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { injectDrawerRootContext } from './context'
+import type { DrawerHandleProps } from './controls'
+
+const props = withDefaults(defineProps<DrawerHandleProps>(), {
+  preventCycle: false,
+})
+
+const LONG_HANDLE_PRESS_TIMEOUT = 250
+const DOUBLE_TAP_TIMEOUT = 120
+
+const { onPress, onDrag, handleRef, handleOnly, isVisible, snapPoints, activeSnapPoint, isDragging, dismissible, closeDrawer }
+    = injectDrawerRootContext()
+
+const closeTimeoutId = ref<number | null>(null)
+const shouldCancelInteraction = ref(false)
+
+function handleStartCycle() {
+  // Stop if this is the second click of a double click
+  if (shouldCancelInteraction.value) {
+    handleCancelInteraction()
+    return
+  }
+
+  window.setTimeout(() => {
+    handleCycleSnapPoints()
+  }, DOUBLE_TAP_TIMEOUT)
+}
+
+function handleCycleSnapPoints() {
+  // Prevent accidental taps while resizing drawer
+  if (isDragging.value || props.preventCycle || shouldCancelInteraction.value) {
+    handleCancelInteraction()
+    return
+  }
+
+  // Make sure to clear the timeout id if the user releases the handle before the cancel timeout
+  handleCancelInteraction()
+
+  if (!snapPoints.value || snapPoints.value.length === 0) {
+    if (!dismissible.value)
+      closeDrawer()
+
+    return
+  }
+
+  const isLastSnapPoint = activeSnapPoint.value === snapPoints.value[snapPoints.value.length - 1]
+
+  if (isLastSnapPoint && dismissible.value) {
+    closeDrawer()
+    return
+  }
+
+  const currentSnapIndex = snapPoints.value.findIndex(point => point === activeSnapPoint.value)
+
+  if (currentSnapIndex === -1)
+    return // activeSnapPoint not found in snapPoints
+
+  const nextSnapPointIndex = isLastSnapPoint ? 0 : currentSnapIndex + 1
+
+  activeSnapPoint.value = snapPoints.value[nextSnapPointIndex]
+}
+
+function handleStartInteraction() {
+  closeTimeoutId.value = window.setTimeout(() => {
+    // Cancel click interaction on a long press
+    shouldCancelInteraction.value = true
+  }, LONG_HANDLE_PRESS_TIMEOUT)
+}
+
+function handleCancelInteraction() {
+  if (closeTimeoutId.value)
+    window.clearTimeout(closeTimeoutId.value)
+
+  shouldCancelInteraction.value = false
+}
+
+function handlePointerDown(event: PointerEvent) {
+  if (handleOnly.value)
+    onPress(event)
+  handleStartInteraction()
+}
+
+function handleOnDrag(event: PointerEvent) {
+  if (handleOnly.value)
+    onDrag(event)
+}
+</script>
+
+<template>
+  <div
+    ref="handleRef"
+    :data-vaul-drawer-visible="isVisible ? 'true' : 'false'"
+    data-vaul-handle=""
+    aria-hidden="true"
+    @click="handleStartCycle"
+    @pointercancel="handleCancelInteraction"
+    @pointerdown="handlePointerDown"
+    @pointermove="handleOnDrag"
+  >
+    <span data-vaul-handle-hitarea="" aria-hidden="true">
+      <slot />
+    </span>
+  </div>
+</template>
+
+<style>
+[data-vaul-handle] {
+  display: block;
+  position: relative;
+  opacity: .7;
+  background: #e2e2e4;
+  margin-left: auto;
+  margin-right: auto;
+  height: 5px;
+  width: 32px;
+  border-radius: 1rem;
+  touch-action: pan-y;
+}
+
+[data-vaul-handle]:active, [data-vaul-handle]:hover {
+  opacity: 1;
+}
+
+[data-vaul-handle-hitarea] {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%,-50%);
+  width: max(100%, 2.75rem);
+  height: max(100%, 2.75rem);
+  touch-action: inherit;
+}
+</style>

packages/vaul-vue/src/DrawerRoot.vue

@@ -26,6 +26,7 @@ const props = withDefaults(defineProps<DrawerRootProps>(), {
   modal: true,
   scrollLockTimeout: SCROLL_LOCK_TIMEOUT,
   direction: 'bottom',
+  handleOnly: false,
 })
 
 const emit = defineEmits<DrawerRootEmits>()

packages/vaul-vue/src/context.ts

@@ -10,6 +10,7 @@ export interface DrawerRootContext {
   isVisible: Ref<boolean>
   drawerRef: Ref<ComponentPublicInstance | null>
   overlayRef: Ref<ComponentPublicInstance | null>
+  handleRef: Ref<ComponentPublicInstance | null>
   isDragging: Ref<boolean>
   dragStartTime: Ref<Date | null>
   isAllowedToDrag: Ref<boolean>
@@ -36,6 +37,7 @@ export interface DrawerRootContext {
   emitRelease: (open: boolean) => void
   emitOpenChange: (o: boolean) => void
   nested: Ref<boolean>
+  handleOnly: Ref<boolean>
 }
 
 export const [injectDrawerRootContext, provideDrawerRootContext]

packages/vaul-vue/src/controls.ts

@@ -42,6 +42,7 @@ export type DrawerRootProps = {
   defaultOpen?: boolean
   nested?: boolean
   direction?: DrawerDirection
+  handleOnly?: boolean
 } & (WithFadeFromProps | WithoutFadeFromProps)
 
 export interface UseDrawerProps {
@@ -57,6 +58,7 @@ export interface UseDrawerProps {
   closeThreshold: Ref<number>
   scrollLockTimeout: Ref<number>
   direction: Ref<DrawerDirection>
+  handleOnly: Ref<boolean>
 }
 
 export interface DrawerRootEmits {
@@ -96,6 +98,10 @@ export interface Drawer {
   closeDrawer: () => void
 }
 
+export interface DrawerHandleProps {
+  preventCycle?: boolean
+}
+
 function usePropOrDefaultRef<T>(prop: Ref<T | undefined> | undefined, defaultRef: Ref<T>): Ref<T> {
   return prop && !!prop.value ? (prop as Ref<T>) : defaultRef
 }
@@ -117,6 +123,7 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
     activeSnapPoint,
     fadeFromIndex,
     direction,
+    handleOnly,
   } = props
 
   const isOpen = ref(open.value ?? false)
@@ -149,6 +156,8 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
     ref<(number | string)[] | undefined>(undefined),
   )
 
+  const handleRef = ref<ComponentPublicInstance | null>(null)
+
   // const onCloseProp = ref<(() => void) | undefined>(undefined)
   // const onOpenChangeProp = ref<((open: boolean) => void) | undefined>(undefined)
   // const onDragProp = ref<((event: PointerEvent, percentageDragged: number) => void) | undefined>(
@@ -676,6 +685,7 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
     drawerRef,
     drawerHeightRef,
     overlayRef,
+    handleRef,
     isDragging,
     dragStartTime,
     isAllowedToDrag,
@@ -700,5 +710,6 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
     emitRelease,
     emitOpenChange,
     nested,
+    handleOnly,
   }
 }

packages/vaul-vue/src/index.ts

@@ -2,6 +2,7 @@ import DrawerRoot from './DrawerRoot.vue'
 import DrawerRootNested from './DrawerRootNested.vue'
 import DrawerOverlay from './DrawerOverlay.vue'
 import DrawerContent from './DrawerContent.vue'
+import DrawerHandle from './DrawerHandle.vue'
 
 export type {
   DrawerRootEmits,
@@ -18,6 +19,7 @@ export {
   DrawerRootNested,
   DrawerOverlay,
   DrawerContent,
+  DrawerHandle,
 }
 
 export {

playground/e2e/with-handle.spec.ts

@@ -0,0 +1,18 @@
+import { expect, test } from '@playwright/test'
+import { ANIMATION_DURATION } from './constants'
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/test/with-handle')
+})
+
+test.describe('With handle', () => {
+  test('click should cycle to the next snap point', async ({ page }) => {
+    await page.waitForTimeout(ANIMATION_DURATION)
+
+    await expect(page.getByTestId('content')).toBeVisible()
+    await expect(page.getByTestId('active-snap-index')).toHaveText('0')
+
+    await page.getByTestId('handle').click()
+    await expect(page.getByTestId('active-snap-index')).toHaveText('1')
+  })
+})

playground/src/components/DemoDrawer.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DrawerContent, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTrigger } from 'vaul-vue'
+import { DrawerContent, DrawerHandle, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTrigger } from 'vaul-vue'
 </script>
 
 <template>
@@ -15,7 +15,8 @@ import { DrawerContent, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTrigger }
         class="bg-gray-100 flex flex-col rounded-t-[10px] h-full mt-24 max-h-[96%] fixed bottom-0 left-0 right-0"
       >
         <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" />
+          <DrawerHandle data-testid="handle" class="mb-8 mt-2" />
+
           <div class="max-w-md mx-auto">
             <h2 id="radix-:R3emdaH1:" class="font-medium mb-4">
               Drawer for Vue.

playground/src/router/index.ts

@@ -42,6 +42,10 @@ const router = createRouter({
           path: 'without-scaled-background',
           component: () => import('../views/tests/WithoutScaledBackgroundView.vue'),
         },
+        {
+          path: 'with-handle',
+          component: () => import('../views/tests/WithHandleView.vue'),
+        },
         {
           path: 'with-scaled-background',
           component: () => import('../views/tests/WithScaledBackgroundView.vue'),