@johly/vaul-svelte 1.0.0-next.8

package/dist/use-snap-points.svelte.js

@@ -0,0 +1,260 @@
+import { onMount } from "svelte";
+import { on } from "svelte/events";
+import { isVertical, set } from "./helpers.js";
+import { TRANSITIONS, VELOCITY_THRESHOLD } from "./internal/constants.js";
+import { watch } from "runed";
+export function useSnapPoints({ snapPoints, drawerNode: drawerNode, overlayNode: overlayNode, fadeFromIndex, setOpenTime, direction, container, snapToSequentialPoint, activeSnapPoint, open, isReleasing, }) {
+    let windowDimensions = $state(typeof window !== "undefined"
+        ? { innerWidth: window.innerWidth, innerHeight: window.innerHeight }
+        : undefined);
+    onMount(() => {
+        function onResize() {
+            windowDimensions = {
+                innerWidth: window.innerWidth,
+                innerHeight: window.innerHeight,
+            };
+        }
+        return on(window, "resize", onResize);
+    });
+    const isLastSnapPoint = $derived(activeSnapPoint.current === snapPoints.current?.[snapPoints.current.length - 1] || null);
+    const activeSnapPointIndex = $derived(snapPoints.current?.findIndex((snapPoint) => snapPoint === activeSnapPoint.current));
+    const shouldFade = $derived((snapPoints.current &&
+        snapPoints.current.length > 0 &&
+        (fadeFromIndex.current || fadeFromIndex.current === 0) &&
+        !Number.isNaN(fadeFromIndex.current) &&
+        snapPoints.current[fadeFromIndex.current] === activeSnapPoint.current) ||
+        !snapPoints.current);
+    const snapPointsOffset = $derived.by(() => {
+        open.current;
+        const containerSize = container.current
+            ? {
+                width: container.current.getBoundingClientRect().width,
+                height: container.current.getBoundingClientRect().height,
+            }
+            : typeof window !== "undefined"
+                ? { width: window.innerWidth, height: window.innerHeight }
+                : { width: 0, height: 0 };
+        return (snapPoints.current?.map((snapPoint) => {
+            const isPx = typeof snapPoint === "string";
+            let snapPointAsNumber = 0;
+            if (isPx) {
+                snapPointAsNumber = parseInt(snapPoint, 10);
+            }
+            if (isVertical(direction.current)) {
+                const height = isPx
+                    ? snapPointAsNumber
+                    : windowDimensions
+                        ? snapPoint * containerSize.height
+                        : 0;
+                if (windowDimensions) {
+                    return direction.current === "bottom"
+                        ? containerSize.height - height
+                        : -containerSize.height + height;
+                }
+                return height;
+            }
+            const width = isPx
+                ? snapPointAsNumber
+                : windowDimensions
+                    ? snapPoint * containerSize.width
+                    : 0;
+            if (windowDimensions) {
+                return direction.current === "right"
+                    ? containerSize.width - width
+                    : -containerSize.width + width;
+            }
+            return width;
+        }) ?? []);
+    });
+    const activeSnapPointOffset = $derived.by(() => {
+        if (activeSnapPointIndex !== null) {
+            if (activeSnapPointIndex !== undefined) {
+                return snapPointsOffset[activeSnapPointIndex];
+            }
+        }
+        return null;
+    });
+    function onSnapPointChange(activeSnapPointIndex) {
+        if (snapPoints.current && activeSnapPointIndex === snapPointsOffset.length - 1) {
+            setOpenTime(new Date());
+        }
+    }
+    function snapToPoint(dimension) {
+        const newSnapPointIndex = snapPointsOffset?.findIndex((snapPointDim) => snapPointDim === dimension) ?? null;
+        onSnapPointChange(newSnapPointIndex);
+        set(drawerNode(), {
+            transition: `transform ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(",")})`,
+            transform: isVertical(direction.current)
+                ? `translate3d(0, ${dimension}px, 0)`
+                : `translate3d(${dimension}px, 0, 0)`,
+        });
+        if (snapPointsOffset &&
+            newSnapPointIndex !== snapPointsOffset.length - 1 &&
+            fadeFromIndex.current !== undefined &&
+            newSnapPointIndex !== fadeFromIndex.current &&
+            newSnapPointIndex < fadeFromIndex.current) {
+            set(overlayNode(), {
+                transition: `opacity ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(",")})`,
+                opacity: "0",
+            });
+        }
+        else {
+            set(overlayNode(), {
+                transition: `opacity ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(",")})`,
+                opacity: "1",
+            });
+        }
+        activeSnapPoint.current = snapPoints.current?.[Math.max(newSnapPointIndex, 0)];
+    }
+    watch([() => activeSnapPoint.current, () => open.current], () => {
+        // we only want to snap to the next point if we are closing via a
+        // means other than release, otherwise a race condition can occur
+        // where the drawer snaps to the previous point and then closes,
+        // rather than continuing to close from the current point
+        const releasing = isReleasing();
+        if (!activeSnapPoint.current || releasing)
+            return;
+        const newIndex = snapPoints.current?.findIndex((snapPoint) => snapPoint === activeSnapPoint.current) ??
+            -1;
+        if (snapPointsOffset && newIndex !== -1 && typeof snapPointsOffset[newIndex] === "number") {
+            if (snapPointsOffset[newIndex] === activeSnapPoint.current)
+                return;
+            snapToPoint(snapPointsOffset[newIndex]);
+        }
+    });
+    function onRelease({ draggedDistance, closeDrawer, velocity, dismissible, }) {
+        if (fadeFromIndex.current === undefined)
+            return;
+        const dir = direction.current;
+        const currentPosition = dir === "bottom" || dir === "right"
+            ? (activeSnapPointOffset ?? 0) - draggedDistance
+            : (activeSnapPointOffset ?? 0) + draggedDistance;
+        const isOverlaySnapPoint = activeSnapPointIndex === fadeFromIndex.current - 1;
+        const isFirst = activeSnapPointIndex === 0;
+        const hasDraggedUp = draggedDistance > 0;
+        if (isOverlaySnapPoint) {
+            set(overlayNode(), {
+                transition: `opacity ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(",")})`,
+            });
+        }
+        if (!snapToSequentialPoint.current && velocity > 2 && !hasDraggedUp) {
+            if (dismissible) {
+                closeDrawer();
+            }
+            else {
+                snapToPoint(snapPointsOffset[0]);
+            }
+            return;
+        }
+        if (!snapToSequentialPoint.current &&
+            velocity > 2 &&
+            hasDraggedUp &&
+            snapPointsOffset &&
+            snapPoints.current) {
+            snapToPoint(snapPointsOffset[snapPoints.current.length - 1]);
+            return;
+        }
+        // Find the closest snap point to the current position
+        const closestSnapPoint = snapPointsOffset?.reduce((prev, curr) => {
+            if (typeof prev !== "number" || typeof curr !== "number")
+                return prev;
+            return Math.abs(curr - currentPosition) < Math.abs(prev - currentPosition)
+                ? curr
+                : prev;
+        });
+        const dim = isVertical(dir) ? 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
+            if (dragDirection > 0 && isLastSnapPoint && snapPoints.current) {
+                snapToPoint(snapPointsOffset[snapPoints.current.length - 1]);
+                return;
+            }
+            if (isFirst && dragDirection < 0 && dismissible) {
+                closeDrawer();
+            }
+            if (activeSnapPointIndex === null)
+                return;
+            snapToPoint(snapPointsOffset[activeSnapPointIndex + dragDirection]);
+            return;
+        }
+        snapToPoint(closestSnapPoint);
+    }
+    function onDrag({ draggedDistance }) {
+        if (activeSnapPointOffset === null)
+            return;
+        const dir = direction.current;
+        const newValue = isBottomOrRight(dir)
+            ? activeSnapPointOffset - draggedDistance
+            : activeSnapPointOffset + draggedDistance;
+        const lastSnapPoint = snapPointsOffset[snapPointsOffset.length - 1];
+        // Don't do anything if we exceed the last(biggest) snap point
+        if (isBottomOrRight(dir) && newValue < lastSnapPoint)
+            return;
+        if (!isBottomOrRight(dir) && newValue > lastSnapPoint)
+            return;
+        set(drawerNode(), {
+            transform: isVertical(dir)
+                ? `translate3d(0, ${newValue}px, 0)`
+                : `translate3d(${newValue}px, 0, 0)`,
+        });
+    }
+    function getPercentageDragged(absDraggedDistance, isDraggingDown) {
+        if (!snapPoints.current ||
+            typeof activeSnapPointIndex !== "number" ||
+            !snapPointsOffset ||
+            fadeFromIndex.current === undefined) {
+            return null;
+        }
+        // If this is true we are dragging to a snap point that is supposed to have an overlay
+        const isOverlaySnapPoint = activeSnapPointIndex === fadeFromIndex.current - 1;
+        const isOverlaySnapPointOrHigher = activeSnapPointIndex >= fadeFromIndex.current;
+        if (isOverlaySnapPointOrHigher && isDraggingDown) {
+            return 0;
+        }
+        // Don't animate, but still use this one if we are dragging away from the overlaySnapPoint
+        if (isOverlaySnapPoint && !isDraggingDown) {
+            return 1;
+        }
+        if (!shouldFade && !isOverlaySnapPoint) {
+            return null;
+        }
+        // Either fadeFrom index or the one before
+        const targetSnapPointIndex = isOverlaySnapPoint
+            ? activeSnapPointIndex + 1
+            : activeSnapPointIndex - 1;
+        // Get the distance from overlaySnapPoint to the one before or vice-versa to calculate the opacity percentage accordingly
+        const snapPointDistance = isOverlaySnapPoint
+            ? snapPointsOffset[targetSnapPointIndex] - snapPointsOffset[targetSnapPointIndex - 1]
+            : snapPointsOffset[targetSnapPointIndex + 1] - snapPointsOffset[targetSnapPointIndex];
+        const percentageDragged = absDraggedDistance / Math.abs(snapPointDistance);
+        if (isOverlaySnapPoint) {
+            return 1 - percentageDragged;
+        }
+        else {
+            return percentageDragged;
+        }
+    }
+    return {
+        get isLastSnapPoint() {
+            return isLastSnapPoint;
+        },
+        get shouldFade() {
+            return shouldFade;
+        },
+        get activeSnapPointIndex() {
+            return activeSnapPointIndex;
+        },
+        get snapPointsOffset() {
+            return $state.snapshot(snapPointsOffset);
+        },
+        getPercentageDragged,
+        onRelease,
+        onDrag,
+    };
+}
+export function isBottomOrRight(direction) {
+    if (direction === "bottom" || direction === "right")
+        return true;
+    return false;
+}

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@johly/vaul-svelte",
+  "version": "1.0.0-next.8",
+  "license": "MIT",
+  "repository": "github:johanohly/vaul-svelte",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@sveltejs/kit": "^2.16.1",
+    "@sveltejs/package": "^2.3.9",
+    "@sveltejs/vite-plugin-svelte": "4.0.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/svelte": "^5.2.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest-axe": "^3.5.9",
+    "@types/node": "^20.14.10",
+    "@types/resize-observer-browser": "^0.1.11",
+    "@types/testing-library__jest-dom": "^5.14.9",
+    "autoprefixer": "^10.4.16",
+    "bits-ui": "^1.1.0",
+    "jsdom": "^24.1.0",
+    "publint": "^0.2.8",
+    "svelte": "^5.19.6",
+    "svelte-check": "^4.1.4",
+    "tslib": "^2.6.3",
+    "typescript": "^5.5.4",
+    "vite": "^5.4.8",
+    "vitest": "^2.1.1",
+    "vitest-dom": "^0.1.1"
+  },
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "dependencies": {
+    "runed": "^0.23.2",
+    "svelte-toolbelt": "^0.7.1"
+  },
+  "engines": {
+    "pnpm": ">=8.7.0",
+    "node": ">=18"
+  },
+  "scripts": {
+    "build": "pnpm package",
+    "dev": "pnpm watch",
+    "dev:svelte": "vite dev",
+    "package": "svelte-kit sync && svelte-package && publint",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "test": "vitest",
+    "watch": "svelte-package --watch"
+  }
+}