fix: closing not trigger animation (#40)

* fix: closing not trigger animation

* fix: other cases failing

* chore: update playground

* chore: revert rendered value

* chore: add changeset

Author: zernonia

.changeset/sharp-apricots-exercise.md

@@ -0,0 +1,5 @@
+---
+"vaul-vue": patch
+---
+
+fix manual closing doesn't trigger animation

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,11 +44,11 @@ const emitHandlers = {
   emitRelease: (open: boolean) => emit('release', open),
   emitClose: () => emit('close'),
   emitOpenChange: (o: boolean) => {
-    open.value = o
+    emit('update:open', o)
   },
 }
 
-const { closeDrawer, hasBeenOpened, modal } = provideDrawerRootContext(
+const { closeDrawer, hasBeenOpened, modal, isOpen } = provideDrawerRootContext(
   useDrawer({
     ...emitHandlers,
     ...toRefs(props),
@@ -58,19 +59,23 @@ const { closeDrawer, hasBeenOpened, modal } = 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>
   <DialogRoot
-    :open="open"
+    :open="isOpen"
     :modal="modal"
     @update:open="handleOpenChange"
   >

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

@@ -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 ?? false)
   const hasBeenOpened = ref(false)
   const isVisible = ref(false)
   const isDragging = ref(false)
@@ -372,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,
         {
@@ -407,10 +408,9 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
     scaleBackground(false)
     restorePositionSetting()
 
-    isVisible.value = false
     window.setTimeout(() => {
-      emitOpenChange(false)
-      // isOpen.value = false
+      isVisible.value = false
+      isOpen.value = false
     }, 300)
 
     window.setTimeout(() => {
@@ -491,13 +491,23 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
     resetDrawer()
   }
 
-  watch(isOpen, (open) => {
-    if (open) {
+  watch(isOpen, (o) => {
+    if (o) {
       openTime.value = new Date()
       scaleBackground(true)
     }
-    emitOpenChange(open)
-  })
+    emitOpenChange(o)
+  }, { immediate: true })
+
+  watch(open, (o) => {
+    if (o) {
+      isOpen.value = o
+      hasBeenOpened.value = true
+    }
+    else {
+      closeDrawer()
+    }
+  }, { immediate: true })
 
   function scaleBackground(open: boolean) {
     const wrapper = document.querySelector('[vaul-drawer-wrapper]')
@@ -587,6 +597,7 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
   }
 
   return {
+    open,
     isOpen,
     modal,
     keyboardIsOpen,

playground/src/views/tests/ControlledView.vue

@@ -10,8 +10,8 @@ import {
 } from 'vaul-vue'
 import { ref } from 'vue'
 
-const open = ref < boolean > (false)
-const fullyControlled = ref < boolean > (false)
+const open = ref<boolean>(false)
+const fullyControlled = ref<boolean>(false)
 </script>
 
 <template>

playground/src/views/tests/NonDismissibleView.vue

@@ -9,7 +9,7 @@ import {
 } from 'vaul-vue'
 import { ref } from 'vue'
 
-const open = ref < boolean > (false)
+const open = ref<boolean>(false)
 </script>
 
 <template>

playground/src/views/tests/WithoutScaledBackgroundView.vue

@@ -10,7 +10,7 @@ import {
 } from 'vaul-vue'
 import { ref } from 'vue'
 
-const open = ref < boolean > (false)
+const open = ref<boolean>(false)
 </script>
 
 <template>