feat: Support multiple directions (#40)

Author: huntabyte

.changeset/blue-carrots-repeat.md

@@ -0,0 +1,5 @@
+---
+"vaul-svelte": minor
+---
+
+feat: add support for directions "top", "left", "bottom", and "right"

.changeset/happy-jokes-sort.md

@@ -0,0 +1,5 @@
+---
+"vaul-svelte": patch
+---
+
+Fix scroll top with smooth scroll

.changeset/popular-jobs-push.md

@@ -0,0 +1,5 @@
+---
+"vaul-svelte": patch
+---
+
+fix: snapPoints onRelease position

.changeset/selfish-chicken-speak.md

@@ -0,0 +1,5 @@
+---
+"vaul-svelte": patch
+---
+
+allow snapping to first snap point

.changeset/soft-flowers-wash.md

@@ -0,0 +1,5 @@
+---
+"vaul-svelte": patch
+---
+
+fix: prevent drawer from exceeding boundaries of last snap point while dragging

README.md

@@ -58,6 +58,8 @@ Additional props:
 
 `fadeFromIndex`: Index of a `snapPoint` from which the overlay fade should be applied. Defaults to the last snap point.
 
+`direction`: Direction of the drawer. Can be `top`, `bottom`, `left`, or `right`. Defaults to `bottom`.
+
 `backgroundColor`: Background color of the body when the drawer is open and `shouldScaleBackground` is true. Defaults to black.
 
 ### Trigger

src/lib/internal/helpers/is.ts

@@ -1,3 +1,5 @@
+import type { DrawerDirection } from "../types.js";
+
 // HTML input types that do not cause the software keyboard to appear.
 const nonTextInputTypes = new Set([
 	"checkbox",
@@ -25,3 +27,13 @@ export function isInput(target: Element) {
 		(target instanceof HTMLElement && target.isContentEditable)
 	);
 }
+
+export function isVertical(direction: DrawerDirection) {
+	if (direction === "top" || direction === "bottom") return true;
+	return false;
+}
+
+export function isBottomOrRight(direction: DrawerDirection) {
+	if (direction === "bottom" || direction === "right") return true;
+	return false;
+}

src/lib/internal/helpers/style.ts

@@ -1,3 +1,6 @@
+import type { DrawerDirection } from "../types.js";
+import { isVertical } from "./index.js";
+
 interface Style {
 	[key: string]: string;
 }
@@ -45,15 +48,19 @@ export function reset(el: Element | HTMLElement | null, prop?: string) {
 	}
 }
 
-export function getTranslateY(element: HTMLElement): number | null {
+export function getTranslate(element: HTMLElement, direction: DrawerDirection): number | null {
 	const style = window.getComputedStyle(element);
 	const transform =
-		// @ts-expect-error - mozTransform is not recognized
+		// @ts-expect-error - vendor prefix
 		style.transform || style.webkitTransform || style.mozTransform;
 	let mat = transform.match(/^matrix3d\((.+)\)$/);
-	if (mat) return parseFloat(mat[1].split(", ")[13]);
+	if (mat) {
+		// https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix3d
+		return parseFloat(mat[1].split(", ")[isVertical(direction) ? 13 : 12]);
+	}
+	// https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix
 	mat = transform.match(/^matrix\((.+)\)$/);
-	return mat ? parseFloat(mat[1].split(", ")[5]) : null;
+	return mat ? parseFloat(mat[1].split(", ")[isVertical(direction) ? 5 : 4]) : null;
 }
 
 export function styleToString(style: Record<string, number | string | undefined>): string {

src/lib/internal/snap-points.ts

@@ -1,22 +1,25 @@
 import { tick } from "svelte";
 import { derived, get, type Writable } from "svelte/store";
 import { TRANSITIONS, VELOCITY_THRESHOLD } from "./constants.js";
-import { effect, set } from "./helpers/index.js";
+import { effect, set, isVertical, isBottomOrRight } from "./helpers/index.js";
+import type { DrawerDirection } from "./types.js";
 
 export function handleSnapPoints({
 	activeSnapPoint,
 	snapPoints,
 	drawerRef,
 	overlayRef,
 	fadeFromIndex,
-	openTime
+	openTime,
+	direction
 }: {
 	activeSnapPoint: Writable<number | string | null>;
 	snapPoints: Writable<(number | string)[] | undefined>;
 	fadeFromIndex: Writable<number | undefined>;
 	drawerRef: Writable<HTMLDivElement | undefined>;
 	overlayRef: Writable<HTMLDivElement | undefined>;
 	openTime: Writable<Date | null>;
+	direction: Writable<DrawerDirection>;
 }) {
 	const isLastSnapPoint = derived(
 		[snapPoints, activeSnapPoint],
@@ -55,14 +58,27 @@ export function handleSnapPoints({
 				if (isPx) {
 					snapPointAsNumber = parseInt(snapPoint, 10);
 				}
+				const $direction = get(direction);
 
-				const height = isPx ? snapPointAsNumber : hasWindow ? snapPoint * window.innerHeight : 0;
+				if (isVertical($direction)) {
+					const height = isPx ? snapPointAsNumber : hasWindow ? snapPoint * window.innerHeight : 0;
+
+					if (hasWindow) {
+						return $direction === "bottom"
+							? window.innerHeight - height
+							: window.innerHeight + height;
+					}
+
+					return height;
+				}
+
+				const width = isPx ? snapPointAsNumber : hasWindow ? snapPoint * window.innerWidth : 0;
 
 				if (hasWindow) {
-					return window.innerHeight - height;
+					return $direction === "right" ? window.innerWidth - width : window.innerWidth + width;
 				}
 
-				return height;
+				return width;
 			});
 		}
 		return [];
@@ -78,29 +94,31 @@ export function handleSnapPoints({
 		if ($activeSnapPoint && $drawerRef) {
 			const $snapPoints = get(snapPoints);
 			const $snapPointsOffset = get(snapPointsOffset);
-			const newIndex =
-				$snapPoints?.findIndex((snapPoint) => snapPoint === $activeSnapPoint) ?? null;
-			if ($snapPointsOffset && newIndex && typeof $snapPointsOffset[newIndex] === "number") {
+			const newIndex = $snapPoints?.findIndex((snapPoint) => snapPoint === $activeSnapPoint) ?? -1;
+			if ($snapPointsOffset && newIndex !== -1 && typeof $snapPointsOffset[newIndex] === "number") {
 				snapToPoint($snapPointsOffset[newIndex] as number);
 			}
 		}
 	});
 
-	function snapToPoint(height: number) {
+	function snapToPoint(dimension: number) {
 		tick().then(() => {
 			const $snapPointsOffset = get(snapPointsOffset);
 			const newSnapPointIndex =
-				$snapPointsOffset?.findIndex((snapPointHeight) => snapPointHeight === height) ?? null;
+				$snapPointsOffset?.findIndex((snapPointDim) => snapPointDim === dimension) ?? null;
 
 			const $drawerRef = get(drawerRef);
+			const $direction = get(direction);
 
 			onSnapPointChange(newSnapPointIndex);
 
 			set($drawerRef, {
 				transition: `transform ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(
 					","
 				)})`,
-				transform: `translate3d(0, ${height}px, 0)`
+				transform: isVertical($direction)
+					? `translate3d(0, ${dimension}px, 0)`
+					: `translate3d(${dimension}px, 0, 0)`
 			});
 
 			const $fadeFromIndex = get(fadeFromIndex);
@@ -151,13 +169,13 @@ export function handleSnapPoints({
 		const $overlayRef = get(overlayRef);
 		const $snapPointsOffset = get(snapPointsOffset);
 		const $snapPoints = get(snapPoints);
+		const $direction = get(direction);
 
-		function getCurrPosition() {
-			const snapOffset = $activeSnapPointOffset ?? 0;
-			return snapOffset - draggedDistance;
-		}
+		const currentPosition =
+			$direction === "bottom" || $direction === "right"
+				? ($activeSnapPointOffset ?? 0) - draggedDistance
+				: ($activeSnapPointOffset ?? 0) + draggedDistance;
 
-		const currentPosition = getCurrPosition();
 		const isOverlaySnapPoint = $activeSnapPointIndex === $fadeFromIndex - 1;
 		const isFirst = $activeSnapPointIndex === 0;
 		const hasDraggedUp = draggedDistance > 0;
@@ -186,7 +204,9 @@ export function handleSnapPoints({
 			return Math.abs(curr - currentPosition) < Math.abs(prev - currentPosition) ? curr : prev;
 		});
 
-		if (velocity > VELOCITY_THRESHOLD && Math.abs(draggedDistance) < window.innerHeight * 0.4) {
+		const dim = isVertical($direction) ? window.innerHeight : window.innerWidth;
+
+		if (velocity > VELOCITY_THRESHOLD && Math.abs(draggedDistance) < dim * 0.4) {
 			const dragDirection = hasDraggedUp ? 1 : -1; // 1 = up, -1 = down
 
 			// Don't do anything if we swipe upwards while being on the last snap point
@@ -212,10 +232,29 @@ export function handleSnapPoints({
 		const $drawerRef = get(drawerRef);
 		const $activeSnapPointOffset = get(activeSnapPointOffset);
 		if ($activeSnapPointOffset === null) return;
-		const newYValue = $activeSnapPointOffset - draggedDistance;
+		const $snapPointsOffset = get(snapPointsOffset);
+		const $direction = get(direction);
+
+		const newValue =
+			$direction === "bottom" || $direction === "right"
+				? $activeSnapPointOffset - draggedDistance
+				: $activeSnapPointOffset + draggedDistance;
+
+		const lastSnapPoint = $snapPointsOffset[$snapPointsOffset.length - 1];
+
+		// Don't do anything if we exceed the last(biggest) snap point
+		if (isBottomOrRight($direction) && newValue < lastSnapPoint) {
+			return;
+		}
+
+		if (!isBottomOrRight($direction) && newValue > lastSnapPoint) {
+			return;
+		}
 
 		set($drawerRef, {
-			transform: `translate3d(0, ${newYValue}px, 0)`
+			transform: isVertical($direction)
+				? `translate3d(0, ${newValue}px, 0)`
+				: `translate3d(${newValue}px, 0, 0)`
 		});
 	}
 

src/lib/internal/types.ts

@@ -25,3 +25,5 @@ export type Builder<
 > = Record<string, any> & {
 	action: Action<Element, Param, Attributes>;
 };
+
+export type DrawerDirection = "left" | "right" | "top" | "bottom";