@johly/vaul-svelte 1.0.0-next.21 → 1.0.0-next.23

package/dist/components/drawer/drawer-nested.svelte.d.ts

@@ -1,3 +1,3 @@
-declare const DrawerNested: import("svelte").Component<Omit<import("./types").DrawerRootPropsWithoutHTML, "onRelease" | "nested" | "onClose">, {}, "open" | "activeSnapPoint">;
+declare const DrawerNested: import("svelte").Component<Omit<import("./types.js").DrawerRootPropsWithoutHTML, "onRelease" | "nested" | "onClose">, {}, "open" | "activeSnapPoint">;
 type DrawerNested = ReturnType<typeof DrawerNested>;
 export default DrawerNested;

package/dist/components/drawer/drawer.svelte

@@ -168,46 +168,46 @@
 	}
 
 	:global(
-		[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="bottom"][data-state="open"]
-	) {
+			[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="bottom"][data-state="open"]
+		) {
 		animation-name: slideFromBottom;
 	}
 	:global(
-		[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="bottom"][data-state="closed"]
-	) {
+			[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="bottom"][data-state="closed"]
+		) {
 		animation-name: slideToBottom;
 	}
 
 	:global(
-		[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="top"][data-state="open"]
-	) {
+			[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="top"][data-state="open"]
+		) {
 		animation-name: slideFromTop;
 	}
 	:global(
-		[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="top"][data-state="closed"]
-	) {
+			[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="top"][data-state="closed"]
+		) {
 		animation-name: slideToTop;
 	}
 
 	:global(
-		[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="left"][data-state="open"]
-	) {
+			[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="left"][data-state="open"]
+		) {
 		animation-name: slideFromLeft;
 	}
 	:global(
-		[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="left"][data-state="closed"]
-	) {
+			[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="left"][data-state="closed"]
+		) {
 		animation-name: slideToLeft;
 	}
 
 	:global(
-		[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="right"][data-state="open"]
-	) {
+			[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="right"][data-state="open"]
+		) {
 		animation-name: slideFromRight;
 	}
 	:global(
-		[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="right"][data-state="closed"]
-	) {
+			[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="right"][data-state="closed"]
+		) {
 		animation-name: slideToRight;
 	}
 
@@ -228,26 +228,26 @@
 	}
 
 	:global(
-		[data-vaul-drawer][data-vaul-delayed-snap-points="true"][data-vaul-drawer-direction="top"]
-	) {
+			[data-vaul-drawer][data-vaul-delayed-snap-points="true"][data-vaul-drawer-direction="top"]
+		) {
 		transform: translate3d(0, var(--snap-point-height, 0), 0);
 	}
 
 	:global(
-		[data-vaul-drawer][data-vaul-delayed-snap-points="true"][data-vaul-drawer-direction="bottom"]
-	) {
+			[data-vaul-drawer][data-vaul-delayed-snap-points="true"][data-vaul-drawer-direction="bottom"]
+		) {
 		transform: translate3d(0, var(--snap-point-height, 0), 0);
 	}
 
 	:global(
-		[data-vaul-drawer][data-vaul-delayed-snap-points="true"][data-vaul-drawer-direction="left"]
-	) {
+			[data-vaul-drawer][data-vaul-delayed-snap-points="true"][data-vaul-drawer-direction="left"]
+		) {
 		transform: translate3d(var(--snap-point-height, 0), 0, 0);
 	}
 
 	:global(
-		[data-vaul-drawer][data-vaul-delayed-snap-points="true"][data-vaul-drawer-direction="right"]
-	) {
+			[data-vaul-drawer][data-vaul-delayed-snap-points="true"][data-vaul-drawer-direction="right"]
+		) {
 		transform: translate3d(var(--snap-point-height, 0), 0, 0);
 	}
 
@@ -315,10 +315,10 @@
 	}
 
 	:global(
-		[data-vaul-overlay][data-vaul-snap-points="true"]:not(
-				[data-vaul-snap-points-overlay="true"]
-			):not([data-state="closed"])
-	) {
+			[data-vaul-overlay][data-vaul-snap-points="true"]:not(
+					[data-vaul-snap-points-overlay="true"]
+				):not([data-state="closed"])
+		) {
 		opacity: 0;
 	}
 

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

@@ -73,7 +73,6 @@ export function useDrawerRoot(opts) {
         drawerWidth = drawerNode?.getBoundingClientRect().width || 0;
         isDragging = true;
         dragStartTime = new Date();
-        drawerNode?.classList.add(DRAG_CLASS);
         // iOS doesn't trigger mouseUp after scrolling so we need to listen to touched in order to disallow dragging
         if (isIOS()) {
             on(window, "touchend", () => (isAllowedToDrag = false), { once: true });
@@ -171,6 +170,8 @@ export function useDrawerRoot(opts) {
         }
         if (!isAllowedToDrag && !shouldDrag(event.target, isDraggingInDirection))
             return;
+        drawerNode.classList.add(DRAG_CLASS);
+        // If shouldDrag gave true once after pressing down on the drawer, we set isAllowedToDrag to true and it will remain true until we let go, there's no reason to disable dragging mid way, ever, and that's the solution to it
         isAllowedToDrag = true;
         set(drawerNode, {
             transition: "none",
@@ -230,17 +231,6 @@ export function useDrawerRoot(opts) {
             shouldAnimate = true;
         });
     });
-    $effect(() => {
-        if (!opts.open.current)
-            return;
-        const preventScrollDuringDrag = (e) => {
-            if (isDragging) {
-                e.preventDefault();
-            }
-        };
-        window.addEventListener("touchmove", preventScrollDuringDrag, { passive: false });
-        return () => window.removeEventListener("touchmove", preventScrollDuringDrag);
-    });
     function onDialogOpenChange(o) {
         if (!opts.dismissible.current && !o)
             return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johly/vaul-svelte",
-  "version": "1.0.0-next.21",
+  "version": "1.0.0-next.23",
   "license": "MIT",
   "repository": "github:johanohly/vaul-svelte",
   "exports": {