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 @@