diff --git a/packages/vaul-vue/src/DrawerContent.vue b/packages/vaul-vue/src/DrawerContent.vue
index 9a7103b..84bb17f 100644
--- a/packages/vaul-vue/src/DrawerContent.vue
+++ b/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) => {
diff --git a/packages/vaul-vue/src/DrawerHandle.vue b/packages/vaul-vue/src/DrawerHandle.vue
new file mode 100644
index 0000000..bacbc5b
--- /dev/null
+++ b/packages/vaul-vue/src/DrawerHandle.vue
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
diff --git a/packages/vaul-vue/src/DrawerRoot.vue b/packages/vaul-vue/src/DrawerRoot.vue
index 12b1dfc..8e5dfa2 100644
--- a/packages/vaul-vue/src/DrawerRoot.vue
+++ b/packages/vaul-vue/src/DrawerRoot.vue
@@ -25,6 +25,7 @@ const props = withDefaults(defineProps(), {
modal: true,
scrollLockTimeout: SCROLL_LOCK_TIMEOUT,
direction: 'bottom',
+ handleOnly: false,
})
const emit = defineEmits()
diff --git a/packages/vaul-vue/src/context.ts b/packages/vaul-vue/src/context.ts
index aa28825..7f7c01b 100644
--- a/packages/vaul-vue/src/context.ts
+++ b/packages/vaul-vue/src/context.ts
@@ -36,6 +36,7 @@ export interface DrawerRootContext {
emitRelease: (open: boolean) => void
emitOpenChange: (o: boolean) => void
nested: Ref
+ handleOnly: Ref
}
export const [injectDrawerRootContext, provideDrawerRootContext]
diff --git a/packages/vaul-vue/src/controls.ts b/packages/vaul-vue/src/controls.ts
index 83adb9a..86e9282 100644
--- a/packages/vaul-vue/src/controls.ts
+++ b/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
scrollLockTimeout: Ref
direction: Ref
+ handleOnly: Ref
}
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,
}
}
diff --git a/packages/vaul-vue/src/index.ts b/packages/vaul-vue/src/index.ts
index 2b85faf..3c2939f 100644
--- a/packages/vaul-vue/src/index.ts
+++ b/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 {
diff --git a/playground/src/components/DemoDrawer.vue b/playground/src/components/DemoDrawer.vue
index 6a23dfc..cea5186 100644
--- a/playground/src/components/DemoDrawer.vue
+++ b/playground/src/components/DemoDrawer.vue
@@ -1,5 +1,5 @@
@@ -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"
>