fix: snap points (#65)

* adjust snapPoints on window resize

* add changeset

* fix snaps

* undo unrelated

* fix sample

* update changeset

* fix

* Create soft-peas-deliver.md

* chore: fix ci

---------

Co-authored-by: zernonia <[email protected]>
Co-authored-by: zernonia <[email protected]>

Author: anbraten

.changeset/soft-peas-deliver.md

@@ -0,0 +1,5 @@
+---
+"vaul-vue": patch
+---
+
+Fix snap points

.github/workflows/ci.yaml

@@ -21,7 +21,7 @@ jobs:
       - run: pnpm build:package
       - run: npx playwright install --with-deps
       - run: pnpm test || exit 1
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         if: always()
         with:
           name: playwright-report

packages/vaul-vue/src/useSnapPoints.ts

@@ -163,14 +163,14 @@ export function useSnapPoints({
     velocity: number
     dismissible: boolean
   }) {
-    if (fadeFromIndex === undefined)
+    if (fadeFromIndex.value === undefined)
       return
 
     const currentPosition
     = direction.value === 'bottom' || direction.value === 'right'
       ? (activeSnapPointOffset.value ?? 0) - draggedDistance
       : (activeSnapPointOffset.value ?? 0) + draggedDistance
-    const isOverlaySnapPoint = activeSnapPointIndex.value === (fadeFromIndex.value ?? 0) - 1
+    const isOverlaySnapPoint = activeSnapPointIndex.value === fadeFromIndex.value - 1
     const isFirst = activeSnapPointIndex.value === 0
     const hasDraggedUp = draggedDistance > 0
 
@@ -228,8 +228,8 @@ export function useSnapPoints({
       return
     const newValue
     = direction.value === 'bottom' || direction.value === 'right'
-      ? (activeSnapPointOffset.value ?? 0) - draggedDistance
-      : (activeSnapPointOffset.value ?? 0) + draggedDistance
+      ? activeSnapPointOffset.value - draggedDistance
+      : activeSnapPointOffset.value + draggedDistance
 
     // Don't do anything if we exceed the last(biggest) snap point
     if ((direction.value === 'bottom' || direction.value === 'right') && newValue < snapPointsOffset.value[snapPointsOffset.value.length - 1])
@@ -245,16 +245,16 @@ export function useSnapPoints({
 
   function getPercentageDragged(absDraggedDistance: number, isDraggingDown: boolean) {
     if (
-      !snapPoints
+      !snapPoints.value
       || typeof activeSnapPointIndex.value !== 'number'
       || !snapPointsOffset.value
-      || fadeFromIndex === undefined
+      || fadeFromIndex.value === undefined
     )
       return null
 
     // If this is true we are dragging to a snap point that is supposed to have an overlay
-    const isOverlaySnapPoint = activeSnapPointIndex.value === (fadeFromIndex.value ?? 0) - 1
-    const isOverlaySnapPointOrHigher = activeSnapPointIndex.value >= (fadeFromIndex.value ?? 0)
+    const isOverlaySnapPoint = activeSnapPointIndex.value === fadeFromIndex.value - 1
+    const isOverlaySnapPointOrHigher = activeSnapPointIndex.value >= fadeFromIndex.value
 
     if (isOverlaySnapPointOrHigher && isDraggingDown)
       return 0

playground/src/views/tests/WithSnapPointsView.vue

@@ -2,13 +2,13 @@
 import { DrawerContent, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTrigger } from 'vaul-vue'
 import { computed, ref } from 'vue'
 
-const snapPoints = [0, '148px', '355px', 1]
+const snapPoints = ['148px', '355px', 1]
 
-const snap = ref<number | string | null>(snapPoints[1])
+const snap = ref<number | string | null>(snapPoints[0])
 
 const activeSnapPointIndex = computed(() => snapPoints.indexOf(snap.value as string))
 
-const open = ref<boolean>(true)
+const open = ref<boolean>(false)
 </script>
 
 <template>
@@ -19,7 +19,7 @@ const open = ref<boolean>(true)
     <div data-testid="active-snap-index">
       {{ activeSnapPointIndex }}
     </div>
-    <DrawerRoot v-model:open="open" :snap-points="snapPoints" :active-snap-point="snap">
+    <DrawerRoot v-model:open="open" v-model:active-snap-point="snap" :snap-points="snapPoints">
       <DrawerTrigger as-child>
         <button data-testid="trigger" class="text-2xl">
           Open Drawer
@@ -97,7 +97,6 @@ const open = ref<boolean>(true)
                 />
               </svg>
             </div>
-            {' '}
             <h1 class="text-2xl mt-2 font-medium">
               The Hidden Details
             </h1>