Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix snap points #65

Draft
wants to merge 7 commits into
base: main
Choose a base branch
from
Draft

Fix snap points #65

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e8527ab
adjust snapPoints on window resize
anbraten Sep 9, 2024
445c7e8
add changeset
anbraten Sep 9, 2024
72305a0
fix snaps
anbraten Sep 9, 2024
52cc200
undo unrelated
anbraten Sep 9, 2024
927fd2c
fix sample
anbraten Sep 9, 2024
644cc0f
update changeset
anbraten Sep 10, 2024
967d95b
fix
anbraten Sep 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/sweet-crabs-cough.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"vaul-vue": patch
---

fix snap points handling
16 changes: 8 additions & 8 deletions packages/vaul-vue/src/useSnapPoints.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,14 +140,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

Expand Down Expand Up @@ -205,8 +205,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])
Expand All @@ -222,16 +222,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
Expand Down
9 changes: 4 additions & 5 deletions playground/src/views/tests/WithSnapPointsView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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
Expand Down Expand Up @@ -97,7 +97,6 @@ const open = ref<boolean>(true)
/>
</svg>
</div>
{' '}
<h1 class="text-2xl mt-2 font-medium">
The Hidden Details
</h1>
Expand Down