From e8527ab2fc0d64d782a2e7c9be5e6950c396d464 Mon Sep 17 00:00:00 2001 From: Anbraten Date: Mon, 9 Sep 2024 21:13:50 +0200 Subject: [PATCH 1/7] adjust snapPoints on window resize --- packages/vaul-vue/src/useSnapPoints.ts | 39 ++++++++++++++++++++------ 1 file changed, 31 insertions(+), 8 deletions(-) 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 }) ?? [], From 445c7e84ccde9a1cee835114f0d10778d99396be Mon Sep 17 00:00:00 2001 From: Anbraten Date: Mon, 9 Sep 2024 21:17:56 +0200 Subject: [PATCH 2/7] add changeset --- .changeset/sweet-crabs-cough.md | 5 +++++ 1 file changed, 5 insertions(+) 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 From 72305a0de60679a6c3a0eec473804b457f43b3ba Mon Sep 17 00:00:00 2001 From: Anbraten Date: Mon, 9 Sep 2024 22:05:01 +0200 Subject: [PATCH 3/7] fix snaps --- packages/vaul-vue/src/useSnapPoints.ts | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/vaul-vue/src/useSnapPoints.ts b/packages/vaul-vue/src/useSnapPoints.ts index bb3351e..b79c874 100644 --- a/packages/vaul-vue/src/useSnapPoints.ts +++ b/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 From 52cc2006511d37ac906d5875f140514864586ede Mon Sep 17 00:00:00 2001 From: Anbraten Date: Mon, 9 Sep 2024 22:07:03 +0200 Subject: [PATCH 4/7] undo unrelated --- packages/vaul-vue/src/useSnapPoints.ts | 39 ++++++-------------------- 1 file changed, 8 insertions(+), 31 deletions(-) diff --git a/packages/vaul-vue/src/useSnapPoints.ts b/packages/vaul-vue/src/useSnapPoints.ts index b79c874..6110366 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, onBeforeUnmount, onMounted, ref, watch } from 'vue' +import { type ComponentPublicInstance, type Ref, computed, nextTick, watch } from 'vue' import { isVertical, set } from './helpers' import { TRANSITIONS, VELOCITY_THRESHOLD } from './constants' import type { DrawerDirection } from './types' @@ -22,30 +22,6 @@ 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 @@ -70,6 +46,7 @@ export function useSnapPoints({ const snapPointsOffset = computed( () => snapPoints.value?.map((snapPoint) => { + const hasWindow = typeof window !== 'undefined' const isPx = typeof snapPoint === 'string' let snapPointAsNumber = 0 @@ -77,17 +54,17 @@ export function useSnapPoints({ snapPointAsNumber = Number.parseInt(snapPoint, 10) if (isVertical(direction.value)) { - const height = isPx ? snapPointAsNumber : windowDimensions.value ? snapPoint * windowDimensions.value.innerHeight : 0 + const height = isPx ? snapPointAsNumber : hasWindow ? snapPoint * window.innerHeight : 0 - if (windowDimensions.value) - return direction.value === 'bottom' ? windowDimensions.value.innerHeight - height : -windowDimensions.value.innerHeight + height + if (hasWindow) + return direction.value === 'bottom' ? window.innerHeight - height : -window.innerHeight + height return height } - const width = isPx ? snapPointAsNumber : windowDimensions.value ? snapPoint * windowDimensions.value.innerWidth : 0 + const width = isPx ? snapPointAsNumber : hasWindow ? snapPoint * window.innerWidth : 0 - if (windowDimensions.value) - return direction.value === 'right' ? windowDimensions.value.innerWidth - width : -windowDimensions.value.innerWidth + width + if (hasWindow) + return direction.value === 'right' ? window.innerWidth - width : -window.innerWidth + width return width }) ?? [], From 927fd2c24cf0aa8e9c0440e4bd1b4519672b113f Mon Sep 17 00:00:00 2001 From: Anbraten Date: Mon, 9 Sep 2024 22:32:34 +0200 Subject: [PATCH 5/7] fix sample --- playground/src/views/tests/WithSnapPointsView.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/playground/src/views/tests/WithSnapPointsView.vue b/playground/src/views/tests/WithSnapPointsView.vue index 6793081..b01275c 100644 --- a/playground/src/views/tests/WithSnapPointsView.vue +++ b/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(snapPoints[1]) +const snap = ref(snapPoints[0]) const activeSnapPointIndex = computed(() => snapPoints.indexOf(snap.value as string)) -const open = ref(true) +const open = ref(false)