fix: other cases failing

Author: zernonia

packages/vaul-vue/src/DrawerContent.vue

@@ -4,6 +4,7 @@ import { DialogContent } from 'radix-vue'
 import { injectDrawerRootContext } from './context'
 
 const {
+  open,
   isOpen,
   isVisible,
   snapPointsOffset,
@@ -34,7 +35,10 @@ function handlePointerDownOutside(event: Event) {
     keyboardIsOpen.value = false
 
   event.preventDefault()
-  if (!dismissible.value)
+
+  if (dismissible.value)
+    emitOpenChange(false)
+  if (!dismissible.value || open.value !== undefined)
     return
 
   closeDrawer()
@@ -63,6 +67,10 @@ watch(
     @pointermove="onDrag"
     @pointerup="onRelease"
     @pointer-down-outside="handlePointerDownOutside"
+    @escape-key-down="(event) => {
+      if (!dismissible)
+        event.preventDefault()
+    }"
   >
     <slot />
   </DialogContent>

packages/vaul-vue/src/DrawerRoot.vue

@@ -13,6 +13,7 @@ import {
 
 const props = withDefaults(defineProps<DrawerRootProps>(), {
   open: undefined,
+  defaultOpen: undefined,
   fixed: undefined,
   dismissible: true,
   activeSnapPoint: undefined,
@@ -43,7 +44,7 @@ const emitHandlers = {
   emitRelease: (open: boolean) => emit('release', open),
   emitClose: () => emit('close'),
   emitOpenChange: (o: boolean) => {
-    open.value = o
+    emit('update:open', o)
   },
 }
 
@@ -58,17 +59,22 @@ const { closeDrawer, hasBeenOpened, modal, isOpen } = provideDrawerRootContext(
 )
 
 function handleOpenChange(o: boolean) {
+  if (open.value !== undefined) {
+    emitHandlers.emitOpenChange(o)
+    return
+  }
   if (!o) {
     closeDrawer()
   }
   else {
     hasBeenOpened.value = true
-    open.value = o
+    isOpen.value = o
   }
 }
 </script>
 
 <template>
+  {{ isOpen }}
   <DialogRoot
     :open="isOpen"
     :modal="modal"

packages/vaul-vue/src/context.ts

@@ -2,6 +2,7 @@ import type { ComponentPublicInstance, Ref } from 'vue'
 import { createContext } from 'radix-vue'
 
 export interface DrawerRootContext {
+  open: Ref<boolean>
   isOpen: Ref<boolean>
   modal: Ref<boolean>
   hasBeenOpened: Ref<boolean>

packages/vaul-vue/src/controls.ts

@@ -113,7 +113,7 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
     fadeFromIndex,
   } = props
 
-  const isOpen = ref(open.value)
+  const isOpen = ref(open.value ?? false)
   const hasBeenOpened = ref(false)
   const isVisible = ref(false)
   const isDragging = ref(false)
@@ -373,7 +373,7 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
     })
 
     // Don't reset background if swiped upwards
-    if (shouldScaleBackground.value && currentSwipeAmount && currentSwipeAmount > 0 && isOpen) {
+    if (shouldScaleBackground.value && currentSwipeAmount && currentSwipeAmount > 0 && isOpen.value) {
       set(
         wrapper,
         {
@@ -408,9 +408,8 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
     scaleBackground(false)
     restorePositionSetting()
 
-    isVisible.value = false
     window.setTimeout(() => {
-      emitOpenChange(false)
+      isVisible.value = false
       isOpen.value = false
     }, 300)
 
@@ -492,16 +491,22 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
     resetDrawer()
   }
 
-  watch(open, (o) => {
+  watch(isOpen, (o) => {
     if (o) {
       openTime.value = new Date()
       scaleBackground(true)
+    }
+    emitOpenChange(o)
+  }, { immediate: true })
+
+  watch(open, (o) => {
+    if (o) {
       isOpen.value = o
+      hasBeenOpened.value = true
     }
     else {
       closeDrawer()
     }
-    emitOpenChange(o)
   }, { immediate: true })
 
   function scaleBackground(open: boolean) {
@@ -592,6 +597,7 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
   }
 
   return {
+    open,
     isOpen,
     modal,
     keyboardIsOpen,