fix: closing not trigger animation

unovue · Apr 14, 2024 · 50ad67f · 50ad67f
1 parent e3291c1
commit 50ad67f
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 8 deletions.
diff --git a/packages/vaul-vue/src/DrawerRoot.vue b/packages/vaul-vue/src/DrawerRoot.vue
@@ -47,7 +47,7 @@ const emitHandlers = {
   },
 }
 
-const { closeDrawer, hasBeenOpened, modal } = provideDrawerRootContext(
+const { closeDrawer, hasBeenOpened, modal, isOpen } = provideDrawerRootContext(
   useDrawer({
     ...emitHandlers,
     ...toRefs(props),
@@ -70,7 +70,7 @@ function handleOpenChange(o: boolean) {
 
 <template>
   <DialogRoot
-    :open="open"
+    :open="isOpen"
     :modal="modal"
     @update:open="handleOpenChange"
   >

diff --git a/packages/vaul-vue/src/controls.ts b/packages/vaul-vue/src/controls.ts
@@ -101,7 +101,7 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
     emitRelease,
     emitClose,
     emitOpenChange,
-    open: isOpen,
+    open,
     dismissible,
     nested,
     fixed,
@@ -113,6 +113,7 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
     fadeFromIndex,
   } = props
 
+  const isOpen = ref(open.value)
   const hasBeenOpened = ref(false)
   const isVisible = ref(false)
   const isDragging = ref(false)
@@ -410,7 +411,7 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
     isVisible.value = false
     window.setTimeout(() => {
       emitOpenChange(false)
-      // isOpen.value = false
+      isOpen.value = false
     }, 300)
 
     window.setTimeout(() => {
@@ -491,13 +492,17 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
     resetDrawer()
   }
 
-  watch(isOpen, (open) => {
-    if (open) {
+  watch(open, (o) => {
+    if (o) {
       openTime.value = new Date()
       scaleBackground(true)
+      isOpen.value = o
     }
-    emitOpenChange(open)
-  })
+    else {
+      closeDrawer()
+    }
+    emitOpenChange(o)
+  }, { immediate: true })
 
   function scaleBackground(open: boolean) {
     const wrapper = document.querySelector('[vaul-drawer-wrapper]')