feat: 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,28 @@
+<script setup lang="ts">
+import { injectDrawerRootContext } from './context'
+
+const {
+  onPress,
+  onDrag,
+  handleOnly,
+} = injectDrawerRootContext()
+
+function handlePointerDown(event: PointerEvent) {
+  if (handleOnly.value)
+    onPress(event)
+}
+
+function handleOnDrag(event: PointerEvent) {
+  if (handleOnly.value)
+    onDrag(event)
+}
+</script>
+
+<template>
+  <div
+    @pointerdown="handlePointerDown"
+    @pointermove="handleOnDrag"
+  >
+    <slot />
+  </div>
+</template>

packages/vaul-vue/src/DrawerRoot.vue

@@ -25,6 +25,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

@@ -36,6 +36,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 {
@@ -116,6 +118,7 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
     activeSnapPoint,
     fadeFromIndex,
     direction,
+    handleOnly,
   } = props
 
   const isOpen = ref(open.value ?? false)
@@ -699,5 +702,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/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,9 @@ 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>
+            <div class="mx-auto w-12 h-1.5 flex-shrink-0 rounded-full bg-gray-300 mb-8" />
+          </DrawerHandle>
           <div class="max-w-md mx-auto">
             <h2 id="radix-:R3emdaH1:" class="font-medium mb-4">
               Drawer for Vue.