fix: adjust snapPoints on window resize (#64)

* adjust snapPoints on window resize * add changeset
unovue · Sep 10, 2024 · 4df119c · 4df119c
1 parent bdb5860
commit 4df119c
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 8 deletions.
diff --git a/.changeset/sweet-crabs-cough.md b/.changeset/sweet-crabs-cough.md
@@ -0,0 +1,5 @@
+---
+"vaul-vue": patch
+---
+
+adjust snapPoints on window resize
diff --git a/packages/vaul-vue/src/useSnapPoints.ts b/packages/vaul-vue/src/useSnapPoints.ts
@@ -1,4 +1,4 @@
-import { type ComponentPublicInstance, type Ref, computed, nextTick, watch } from 'vue'
+import { type ComponentPublicInstance, type Ref, computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { isVertical, set } from './helpers'
 import { TRANSITIONS, VELOCITY_THRESHOLD } from './constants'
 import type { DrawerDirection } from './types'
@@ -22,6 +22,30 @@ export function useSnapPoints({
   onSnapPointChange,
   direction,
 }: useSnapPointsProps) {
+  const windowDimensions = ref(typeof window !== 'undefined'
+    ? {
+        innerWidth: window.innerWidth,
+        innerHeight: window.innerHeight,
+      }
+    : undefined)
+
+  function onResize() {
+    windowDimensions.value = {
+      innerWidth: window.innerWidth,
+      innerHeight: window.innerHeight,
+    }
+  }
+
+  onMounted(() => {
+    if (typeof window !== 'undefined')
+      window.addEventListener('resize', onResize)
+  })
+
+  onBeforeUnmount(() => {
+    if (typeof window !== 'undefined')
+      window.removeEventListener('resize', onResize)
+  })
+
   const isLastSnapPoint = computed(
     () =>
       (snapPoints.value
@@ -46,25 +70,24 @@ export function useSnapPoints({
   const snapPointsOffset = computed(
     () =>
       snapPoints.value?.map((snapPoint) => {
-        const hasWindow = typeof window !== 'undefined'
         const isPx = typeof snapPoint === 'string'
         let snapPointAsNumber = 0
 
         if (isPx)
           snapPointAsNumber = Number.parseInt(snapPoint, 10)
 
         if (isVertical(direction.value)) {
-          const height = isPx ? snapPointAsNumber : hasWindow ? snapPoint * window.innerHeight : 0
+          const height = isPx ? snapPointAsNumber : windowDimensions.value ? snapPoint * windowDimensions.value.innerHeight : 0
 
-          if (hasWindow)
-            return direction.value === 'bottom' ? window.innerHeight - height : -window.innerHeight + height
+          if (windowDimensions.value)
+            return direction.value === 'bottom' ? windowDimensions.value.innerHeight - height : -windowDimensions.value.innerHeight + height
 
           return height
         }
-        const width = isPx ? snapPointAsNumber : hasWindow ? snapPoint * window.innerWidth : 0
+        const width = isPx ? snapPointAsNumber : windowDimensions.value ? snapPoint * windowDimensions.value.innerWidth : 0
 
-        if (hasWindow)
-          return direction.value === 'right' ? window.innerWidth - width : -window.innerWidth + width
+        if (windowDimensions.value)
+          return direction.value === 'right' ? windowDimensions.value.innerWidth - width : -windowDimensions.value.innerWidth + width
 
         return width
       }) ?? [],