From 50ad67fb072e1a542ab3515c1357e6b5f6d90c5b Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Sun, 14 Apr 2024 18:51:40 +0800
Subject: [PATCH] fix: closing not trigger animation

---
 packages/vaul-vue/src/DrawerRoot.vue |  4 ++--
 packages/vaul-vue/src/controls.ts    | 17 +++++++++++------
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/packages/vaul-vue/src/DrawerRoot.vue b/packages/vaul-vue/src/DrawerRoot.vue
index 76481d0..b091607 100644
--- 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
index b4030b5..fd009d6 100644
--- 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]')