From 4df119cd8151051da5dcb9f21614195d368deb45 Mon Sep 17 00:00:00 2001
From: Anbraten <6918444+anbraten@users.noreply.github.com>
Date: Tue, 10 Sep 2024 07:59:15 +0200
Subject: [PATCH] fix: adjust snapPoints on window resize (#64)

* adjust snapPoints on window resize

* add changeset
---
 .changeset/sweet-crabs-cough.md        |  5 ++++
 packages/vaul-vue/src/useSnapPoints.ts | 39 ++++++++++++++++++++------
 2 files changed, 36 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/sweet-crabs-cough.md

diff --git a/.changeset/sweet-crabs-cough.md b/.changeset/sweet-crabs-cough.md
new file mode 100644
index 0000000..52f9342
--- /dev/null
+++ 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
index ad73b37..bb3351e 100644
--- 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,7 +70,6 @@ export function useSnapPoints({
   const snapPointsOffset = computed(
     () =>
       snapPoints.value?.map((snapPoint) => {
-        const hasWindow = typeof window !== 'undefined'
         const isPx = typeof snapPoint === 'string'
         let snapPointAsNumber = 0
 
@@ -54,17 +77,17 @@ export function useSnapPoints({
           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
       }) ?? [],