fix: remove background after scale (#39)

* fix: remove background after scale * chore: include changeset * chore: update func * chore: update controls * chore: update logic to match upstream * chore: add `window` to setTimeout * chore: revert commit * fix: background color not removed --------- Co-authored-by: zernonia <[email protected]>
unovue · May 6, 2024 · e22af4d · e22af4d
1 parent 86568ae
commit e22af4d
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
diff --git a/.changeset/tame-teachers-confess.md b/.changeset/tame-teachers-confess.md
@@ -0,0 +1,5 @@
+---
+"vaul-vue": patch
+---
+
+remove background on scale exit
diff --git a/packages/vaul-vue/src/controls.ts b/packages/vaul-vue/src/controls.ts
@@ -1,4 +1,4 @@
-import { computed, ref, watch } from 'vue'
+import { computed, ref, watch, watchEffect } from 'vue'
 import type { ComponentPublicInstance, Ref } from 'vue'
 import { dampenValue, getTranslateY, reset, set } from './helpers'
 import { TRANSITIONS, VELOCITY_THRESHOLD } from './constants'
@@ -423,6 +423,17 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
     }, TRANSITIONS.DURATION * 1000) // seconds to ms
   }
 
+  watchEffect(() => {
+    if (!isOpen.value && shouldScaleBackground.value) {
+      // Can't use `onAnimationEnd` as the component will be invisible by then
+      const id = setTimeout(() => {
+        reset(document.body);
+      }, 200);
+
+      return () => clearTimeout(id);
+    }
+  })
+
   function onRelease(event: PointerEvent) {
     if (!isDragging.value || !drawerRef.value)
       return
@@ -519,6 +530,11 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
       return
 
     if (open) {
+      // setting original styles initially
+      set(document.body, {
+        background: document.body.style.backgroundColor || document.body.style.background,
+      });
+      // setting body styles, with cache ignored, so that we can get correct original styles in reset
       set(
         document.body,
         {