@johly/vaul-svelte 1.0.0-next.8

package/dist/use-drawer-handle.svelte.js

@@ -0,0 +1,83 @@
+import { useRefById } from "svelte-toolbelt";
+import { DrawerContext } from "./context.js";
+const LONG_HANDLE_PRESS_TIMEOUT = 250;
+const DOUBLE_TAP_TIMEOUT = 120;
+export function useDrawerHandle(opts) {
+    const ctx = DrawerContext.get();
+    useRefById({
+        id: opts.id,
+        ref: opts.ref,
+        deps: () => ctx.open.current,
+    });
+    let closeTimeoutId = null;
+    let shouldCancelInteraction = false;
+    function handleStartInteraction() {
+        closeTimeoutId = window.setTimeout(() => {
+            // Cancel click interaction on a long press
+            shouldCancelInteraction = true;
+        }, LONG_HANDLE_PRESS_TIMEOUT);
+    }
+    function handleCancelInteraction() {
+        if (closeTimeoutId) {
+            window.clearTimeout(closeTimeoutId);
+        }
+        shouldCancelInteraction = false;
+    }
+    function handleCycleSnapPoints() {
+        // Prevent accidental taps while resizing drawer
+        if (ctx.isDragging || opts.preventCycle.current || shouldCancelInteraction) {
+            handleCancelInteraction();
+            return;
+        }
+        // Make sure to clear the timeout id if the user releases the handle before the cancel timeout
+        handleCancelInteraction();
+        if (!ctx.snapPoints.current || ctx.snapPoints.current.length === 0) {
+            if (!ctx.dismissible.current) {
+                ctx.closeDrawer();
+            }
+            return;
+        }
+        const isLastSnapPoint = ctx.activeSnapPoint.current ===
+            ctx.snapPoints.current[ctx.snapPoints.current.length - 1];
+        if (isLastSnapPoint && ctx.dismissible.current) {
+            ctx.closeDrawer();
+            return;
+        }
+        const currentSnapIndex = ctx.snapPoints.current.findIndex((point) => point === ctx.activeSnapPoint.current);
+        if (currentSnapIndex === -1 || currentSnapIndex === undefined)
+            return; // activeSnapPoint not found in snapPoints
+        const nextSnapPoint = ctx.snapPoints.current[currentSnapIndex + 1];
+        ctx.activeSnapPoint.current = nextSnapPoint;
+    }
+    function handleStartCycle() {
+        if (shouldCancelInteraction) {
+            handleCancelInteraction();
+            return;
+        }
+        window.setTimeout(() => {
+            handleCycleSnapPoints();
+        }, DOUBLE_TAP_TIMEOUT);
+    }
+    const props = $derived({
+        id: opts.id.current,
+        "data-vaul-drawer-visible": ctx.open.current ? "true" : "false",
+        "data-vaul-handle": "",
+        "aria-hidden": "true",
+        onclick: handleStartCycle,
+        onpointercancel: handleCancelInteraction,
+        onpointerdown: (e) => {
+            if (ctx.handleOnly.current)
+                ctx.onPress(e);
+            handleStartInteraction();
+        },
+        onpointermove: (e) => {
+            if (ctx.handleOnly.current)
+                ctx.onDrag(e);
+        },
+    });
+    return {
+        get props() {
+            return props;
+        },
+    };
+}

package/dist/use-drawer-overlay.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type WithRefProps } from "svelte-toolbelt";
+type UseDrawerOverlayProps = WithRefProps;
+export declare function useDrawerOverlay(opts: UseDrawerOverlayProps): {
+    readonly props: {
+        id: string;
+        onmouseup: (event: PointerEvent | null) => void;
+        "data-vaul-overlay": string;
+        "data-vaul-snap-points": string;
+        "data-vaul-snap-points-overlay": string;
+        "data-vaul-animate": string;
+    };
+    readonly shouldRender: boolean;
+    setMounted: (value: boolean) => void;
+};
+export {};

package/dist/use-drawer-overlay.svelte.js

@@ -0,0 +1,40 @@
+import { useRefById } from "svelte-toolbelt";
+import { DrawerContext } from "./context.js";
+export function useDrawerOverlay(opts) {
+    const ctx = DrawerContext.get();
+    let mounted = $state(false);
+    useRefById({
+        id: opts.id,
+        ref: opts.ref,
+        deps: () => mounted,
+        onRefChange: (node) => {
+            if (!mounted) {
+                ctx.setOverlayNode(null);
+            }
+            else {
+                ctx.setOverlayNode(node);
+            }
+        },
+    });
+    const hasSnapPoints = $derived(ctx.snapPoints.current && ctx.snapPoints.current.length > 0);
+    const shouldRender = $derived(ctx.modal.current);
+    const props = $derived({
+        id: opts.id.current,
+        onmouseup: ctx.onRelease,
+        "data-vaul-overlay": "",
+        "data-vaul-snap-points": ctx.open.current && hasSnapPoints ? "true" : "false",
+        "data-vaul-snap-points-overlay": ctx.open.current && ctx.shouldFade ? "true" : "false",
+        "data-vaul-animate": ctx.shouldAnimate ? "true" : "false",
+    });
+    return {
+        get props() {
+            return props;
+        },
+        get shouldRender() {
+            return shouldRender;
+        },
+        setMounted: (value) => {
+            mounted = value;
+        },
+    };
+}