@abhivarde/svelte-drawer 1.0.6 → 1.0.8

package/README.md

@@ -15,6 +15,8 @@ A drawer component for Svelte 5, inspired by [Vaul](https://github.com/emilkowal
 - ✅ **Snap points** for iOS-like multi-height drawers
 - ✅ **Portal rendering** to escape z-index conflicts
 - ✅ **Optional header & footer** components for quick setup
+- ✅ **Auto height** for dynamic content (AI streaming, forms, dynamic lists)
+- ✅ **Configurable dismiss threshold** via `closeThreshold` prop
 - ✅ Nested drawer support
 - ✅ Scrollable content areas
 - ✅ Keyboard shortcuts (**Escape to close**, Tab navigation)
@@ -22,7 +24,6 @@ A drawer component for Svelte 5, inspired by [Vaul](https://github.com/emilkowal
 - ✅ Fully accessible with keyboard navigation
 - ✅ Full **TypeScript** support
 - ✅ Customizable styling with **Tailwind CSS**
-- ✅ **Auto height** for dynamic content (AI streaming, forms, dynamic lists)
 
 ## Installation
 
@@ -166,14 +167,28 @@ Add a premium blur effect to the overlay background:
 Control how far the user needs to drag before the drawer dismisses.
 
 ```svelte
+<script>
+  import { Drawer, DrawerOverlay, DrawerContent, DrawerHandle } from '@abhivarde/svelte-drawer';
+
+  let open = $state(false);
+</script>
+
 <!-- easier to dismiss (short drag) -->
 <Drawer bind:open closeThreshold={0.15}>
-  ...
+  <DrawerOverlay class="fixed inset-0 bg-black/40" />
+  <DrawerContent class="fixed bottom-0 left-0 right-0 bg-white rounded-t-lg p-4">
+    <DrawerHandle class="mb-8" />
+    <p>Short drag closes this drawer.</p>
+  </DrawerContent>
 </Drawer>
 
 <!-- harder to dismiss (long drag required) -->
 <Drawer bind:open closeThreshold={0.5}>
-  ...
+  <DrawerOverlay class="fixed inset-0 bg-black/40" />
+  <DrawerContent class="fixed bottom-0 left-0 right-0 bg-white rounded-t-lg p-4">
+    <DrawerHandle class="mb-8" />
+    <p>Requires a longer drag to close.</p>
+  </DrawerContent>
 </Drawer>
 ```
 

package/dist/components/DrawerContent.svelte

@@ -28,6 +28,9 @@
   let startPos = 0;
   let startDragPos = 0;
   let dragging = false;
+  let lastPointerPos = 0;
+  let lastPointerTime = 0;
+  let velocity = 0;
 
   function snapPointToPosition(snapPoint: number): number {
     return (1 - snapPoint) * 100;
@@ -68,7 +71,7 @@
     }
   }
 
-  function onPointerDown(e: PointerEvent | TouchEvent) {
+  function onPointerDown(e: PointerEvent) {
     const target = e.target as HTMLElement;
 
     if (
@@ -82,36 +85,24 @@
 
     startPos =
       drawer.direction === "bottom" || drawer.direction === "top"
-        ? "clientY" in e
-          ? e.clientY
-          : (e.touches[0]?.clientY ?? 0)
-        : "clientX" in e
-          ? e.clientX
-          : (e.touches[0]?.clientX ?? 0);
+        ? e.clientY
+        : e.clientX;
 
     startDragPos = drawer.drawerPosition.current;
 
     window.addEventListener("pointermove", onPointerMove, { passive: false });
     window.addEventListener("pointerup", onPointerUp);
-    window.addEventListener("touchmove", onPointerMove, { passive: false });
-    window.addEventListener("touchend", onPointerUp);
-
-    e.preventDefault();
   }
 
-  function onPointerMove(e: PointerEvent | TouchEvent) {
+  function onPointerMove(e: PointerEvent) {
     if (!dragging) return;
 
     e.preventDefault();
 
     const current =
       drawer.direction === "bottom" || drawer.direction === "top"
-        ? "clientY" in e
-          ? e.clientY
-          : (e.touches[0]?.clientY ?? 0)
-        : "clientX" in e
-          ? e.clientX
-          : (e.touches[0]?.clientX ?? 0);
+        ? e.clientY
+        : e.clientX;
 
     const delta = current - startPos;
     let newPos = startDragPos;
@@ -127,6 +118,13 @@
     }
 
     drawer.drawerPosition.set(newPos, { duration: 0 });
+
+    const now = Date.now();
+    if (lastPointerTime > 0) {
+      velocity = (current - lastPointerPos) / (now - lastPointerTime);
+    }
+    lastPointerPos = current;
+    lastPointerTime = now;
   }
 
   function onPointerUp() {
@@ -135,7 +133,12 @@
     dragging = false;
 
     const pos = drawer.drawerPosition.current;
-    const threshold = drawer.closeThreshold * 100;
+
+    const isFlick =
+      (drawer.direction === "bottom" && velocity > 0.5) ||
+      (drawer.direction === "top" && velocity < -0.5) ||
+      (drawer.direction === "left" && velocity < -0.5) ||
+      (drawer.direction === "right" && velocity > 0.5);
 
     if (drawer.snapPoints && drawer.snapPoints.length > 0) {
       const nearestSnapPoint = findNearestSnapPoint(pos);
@@ -144,24 +147,26 @@
       const lowestSnapPoint = Math.min(...drawer.snapPoints);
       const lowestSnapPos = snapPointToPosition(lowestSnapPoint);
 
-      if (pos > lowestSnapPos + threshold) {
+      if (isFlick || pos > lowestSnapPos + 30) {
         drawer.closeDrawer();
       } else {
         drawer.drawerPosition.set(snapPos);
         drawer.setActiveSnapPoint?.(nearestSnapPoint);
       }
     } else {
-      if (pos > threshold) {
+      if (isFlick || pos > 30) {
         drawer.closeDrawer();
       } else {
         drawer.drawerPosition.set(0);
       }
     }
 
+    velocity = 0;
+    lastPointerPos = 0;
+    lastPointerTime = 0;
+
     window.removeEventListener("pointermove", onPointerMove);
     window.removeEventListener("pointerup", onPointerUp);
-    window.removeEventListener("touchmove", onPointerMove);
-    window.removeEventListener("touchend", onPointerUp);
   }
 
   function getFocusableElements(): HTMLElement[] {
@@ -216,16 +221,28 @@
   <div
     bind:this={contentElement}
     class={className}
-    style="transform: {getTransform()}; z-index: 50; touch-action: none;{autoHeight
+    data-svelte-drawer
+    style="transform: {getTransform()}; z-index: 50; touch-action: none; will-change: transform;{autoHeight
       ? ' height: auto;'
       : ''}"
     tabindex="-1"
     role="dialog"
     aria-modal="true"
     onpointerdown={onPointerDown}
-    ontouchstart={onPointerDown}
     {...restProps}
   >
     {@render children()}
   </div>
 {/if}
+
+<style>
+  :global([data-svelte-drawer]::after) {
+    content: "";
+    position: absolute;
+    background: inherit;
+    left: 0;
+    right: 0;
+    height: 200px;
+    top: 100%;
+  }
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abhivarde/svelte-drawer",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "A drawer component for Svelte 5, inspired by Vaul",
   "author": "Abhi Varde",
   "license": "MIT",
@@ -35,10 +35,10 @@
     "@sveltejs/adapter-auto": "^7.0.0",
     "@sveltejs/kit": "^2.53.0",
     "@sveltejs/package": "^2.5.7",
-    "@sveltejs/vite-plugin-svelte": "^7.0.0",
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
     "publint": "^0.2.12",
-    "svelte": "^5.46.4",
-    "svelte-check": "^4.3.4",
+    "svelte": "^5.56.0",
+    "svelte-check": "^4.4.8",
     "typescript": "^5.9.3",
     "vite": "^8.0.0"
   },