@douxcode/vue-spring-bottom-sheet 3.0.0 → 3.1.0

package/README.md

@@ -25,9 +25,9 @@ bun install @douxcode/vue-spring-bottom-sheet
 <script setup>
 import BottomSheet from '@douxcode/vue-spring-bottom-sheet'
 import '@douxcode/vue-spring-bottom-sheet/dist/style.css'
-import { ref } from 'vue'
+import { useTemplateRef } from 'vue'
 
-const bottomSheet = ref(null)
+const bottomSheet = useTemplateRef('bottomSheet')
 
 const open = () => {
   bottomSheet.value.open()
@@ -130,21 +130,21 @@ For Nuxt 3, just wrap component in `<ClientOnly>`
 
 ### Prop Definitions
 
-| Prop                | Type                      | Default          | Description                                                               |
-| ------------------- | ------------------------- | ---------------- | ------------------------------------------------------------------------- |
-| duration            | Number                    | 250              | Animation duration in milliseconds                                        |
-| snapPoints          | Array<number\|string>     | [instinctHeight] | Custom snapping positions                                                 |
-| initialSnapPoint    | Number                    | minHeight        | Initial snap point index                                                  |
-| blocking            | Boolean                   | true             | Block interactions with underlying content                                |
-| canSwipeClose       | Boolean                   | true             | Enable swipe-to-close gesture                                             |
-| swipeCloseThreshold | Number\|String            | "50%"            | The amount of translation (in px or %) after which the element will close |
-| canBackdropClose    | Boolean                   | true             | Allow closing by tapping backdrop                                         |
-| expandOnContentDrag | Boolean                   | true             | Enable expanding by dragging content                                      |
-| teleportTo          | String \| RendererElement | body             | Teleport to a specific element                                            |
-| teleportDefer       | Boolean                   | false            | Defer teleporting until opened (Vue 3.5+ only)                            |
-| headerClass         | String                    | ''               | Set header element class                                                  |
-| contentClass        | String                    | ''               | Set content element class                                                 |
-| footerClass         | String                    | ''               | Set footer element class                                                  |
+| Prop                | Type                        | Default          | Description                                                               |
+| ------------------- | --------------------------- | ---------------- | ------------------------------------------------------------------------- |
+| duration            | Number                      | 250              | Animation duration in milliseconds                                        |
+| snapPoints          | Array<number\|`${number}%`> | [instinctHeight] | Custom snapping positions                                                 |
+| initialSnapPoint    | Number                      | minHeight        | Initial snap point index                                                  |
+| blocking            | Boolean                     | true             | Block interactions with underlying content                                |
+| canSwipeClose       | Boolean                     | true             | Enable swipe-to-close gesture                                             |
+| swipeCloseThreshold | Number\|`${number}%`        | "50%"            | The amount of translation (in px or %) after which the element will close |
+| canBackdropClose    | Boolean                     | true             | Allow closing by tapping backdrop                                         |
+| expandOnContentDrag | Boolean                     | true             | Enable expanding by dragging content                                      |
+| teleportTo          | String \| RendererElement   | body             | Teleport to a specific element                                            |
+| teleportDefer       | Boolean                     | false            | Defer teleporting until opened (Vue 3.5+ only)                            |
+| headerClass         | String                      | ''               | Set header element class                                                  |
+| contentClass        | String                      | ''               | Set content element class                                                 |
+| footerClass         | String                      | ''               | Set footer element class                                                  |
 
 ## Exposed methods
 

package/dist/BottomSheet.d.ts

@@ -21,7 +21,7 @@ declare const __VLS_component: import('vue').DefineComponent<BottomSheetProps, {
     open: () => Promise<void>;
     close: () => void;
     snapToPoint: (index: number) => void;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     opened: () => any;
     "opening-started": () => any;
     closed: () => any;
@@ -42,11 +42,11 @@ declare const __VLS_component: import('vue').DefineComponent<BottomSheetProps, {
     onInstinctHeight?: ((instinctHeight: number) => any) | undefined;
     "onUpdate:modelValue"?: (() => any) | undefined;
 }>, {
-    canSwipeClose: boolean;
-    expandOnContentDrag: boolean;
     blocking: boolean;
     duration: number;
+    canSwipeClose: boolean;
     canBackdropClose: boolean;
+    expandOnContentDrag: boolean;
     teleportTo: string | import('vue').RendererElement;
     teleportDefer: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {

package/dist/composables/useDragGestures.d.ts

@@ -1,47 +1,34 @@
-import { Ref, ComputedRef, ShallowRef } from 'vue';
-export interface UseDragGesturesOptions {
-    sheetRef: ShallowRef<HTMLElement | null>;
+import { BottomSheetProps } from '../types';
+import { Ref, ShallowRef } from 'vue';
+type DragHandle = 'header' | 'footer';
+type PointerCaptureTarget = DragHandle | 'content';
+interface UseDragGesturesOptions {
+    sheetHeaderRef: ShallowRef<HTMLElement | null>;
+    sheetFooterRef: ShallowRef<HTMLElement | null>;
+    sheetContentRef: ShallowRef<HTMLElement | null>;
     sheetScrollRef: ShallowRef<HTMLElement | null>;
     height: Ref<number>;
     translateY: Ref<number>;
-    sheetHeight: Ref<number>;
-    windowHeight: Ref<number>;
-    snapPointsRef: ComputedRef<Array<number | `${number}%`>>;
-    flattenedSnapPoints: ComputedRef<number[]>;
-    currentSnapPointIndex: Ref<number>;
-    closestSnapPointIndex: ComputedRef<number>;
-    minSnapPoint: ComputedRef<number>;
-    maxSnapPoint: ComputedRef<number>;
-    canSwipeClose: Ref<boolean>;
-    swipeCloseThreshold: Ref<string | number | undefined>;
-    expandOnContentDrag: Ref<boolean>;
+    minSnapPoint: Readonly<Ref<number>>;
+    maxSnapPoint: Readonly<Ref<number>>;
+    closestSnapPointIndex: Readonly<Ref<number>>;
+    flattenedSnapPoints: Readonly<Ref<number[]>>;
+    canSwipeClose: Readonly<Ref<boolean>>;
+    expandOnContentDrag: Readonly<Ref<boolean>>;
+    swipeCloseThreshold: Readonly<Ref<BottomSheetProps['swipeCloseThreshold']>>;
     onClose: () => void;
-    onSnapped: (index: number) => void;
-    onDraggingUp: () => void;
-    onDraggingDown: () => void;
+    onSnapToPoint: (index: number) => void;
+    onDraggingUp?: () => void;
+    onDraggingDown?: () => void;
 }
-/**
- * Composable that handles all drag/pan gesture logic for the bottom sheet.
- * Manages header/footer dragging, content area dragging, and snap point navigation.
- */
-export declare function useDragGestures(options: UseDragGesturesOptions): {
-    isDragging: Ref<boolean, boolean>;
-    preventContentScroll: Ref<boolean, boolean>;
-    headerFooterHandlers: ComputedRef<{
-        onPointerdown: (event: PointerEvent) => void;
-        onPointermove: (event: PointerEvent) => void;
-        onPointerup: (event: PointerEvent) => void;
-        onPointercancel: (event: PointerEvent) => void;
-        onContextmenu: (event: MouseEvent) => void;
-        onTouchmove: (event: TouchEvent) => void;
-    }>;
-    contentWrapperHandlers: ComputedRef<{
-        onPointerdown: (event: PointerEvent) => void;
-        onPointermove: (event: PointerEvent) => void;
-        onPointerup: (event: PointerEvent) => void;
-        onPointercancel: (event: PointerEvent) => void;
-        onContextmenu: (event: MouseEvent) => void;
-        onTouchmove: (event: TouchEvent) => void;
-    }>;
-    scrollEnd: () => void;
+export declare const useDragGestures: (options: UseDragGesturesOptions) => {
+    isDragging: ShallowRef<boolean, boolean>;
+    handleSheetScroll: (event: TouchEvent) => void;
+    handlePointerDown: (event: PointerEvent, type: DragHandle) => void;
+    handleContentPointerDown: (event: PointerEvent) => void;
+    handlePointerMove: (event: PointerEvent) => void;
+    handleContentPointerMove: (event: PointerEvent) => void;
+    handleLostPointerCapture: (event: PointerEvent, type: PointerCaptureTarget) => void;
+    handleTouchStart: (event: TouchEvent) => void;
 };
+export {};

package/dist/composables/useSwipeDetection.d.ts

@@ -3,10 +3,7 @@ export interface SwipeResult {
     velocity: number;
     isSwipe: boolean;
 }
-export interface UseSwipeDetectionOptions {
-    velocityThreshold?: number;
-}
-export declare function useSwipeDetection(options?: UseSwipeDetectionOptions): {
+export declare function useSwipeDetection(): {
     start: (y: number) => void;
     update: (y: number) => void;
     end: () => SwipeResult;

package/dist/index.mjs

@@ -1,372 +1,284 @@
-import { ref as P, computed as D, defineComponent as ye, useCssVars as Ee, watch as te, onMounted as De, shallowRef as q, toRefs as He, nextTick as fe, onUnmounted as Be, openBlock as X, createElementBlock as ie, Fragment as Ie, createBlock as pe, Teleport as he, createVNode as ge, Transition as me, withCtx as Se, unref as E, createCommentVNode as be, normalizeStyle as Me, createElementVNode as j, mergeProps as ce, renderSlot as ve, normalizeClass as Ye } from "vue";
-import { useScrollLock as Pe, useVModel as Re, useWindowSize as Oe, useElementBounding as ne } from "@vueuse/core";
-import { useFocusTrap as Ae } from "@vueuse/integrations/useFocusTrap";
-function Te(t, a) {
-  const u = parseFloat(t);
-  return a * u / 100;
+import { ref as I, shallowRef as x, computed as H, defineComponent as Be, useCssVars as Oe, watch as A, nextTick as _, onMounted as Ae, toRef as F, onUnmounted as Fe, openBlock as $, createElementBlock as ee, Fragment as $e, createBlock as fe, Teleport as ve, createElementVNode as V, createVNode as he, Transition as ge, withCtx as me, unref as v, createCommentVNode as pe, normalizeStyle as Ve, normalizeClass as te, renderSlot as ne } from "vue";
+import { useScrollLock as Ne, useVModel as ze, useWindowSize as qe, useElementBounding as U } from "@vueuse/core";
+import { useFocusTrap as Ke } from "@vueuse/integrations/useFocusTrap";
+function Ue(e, t, o) {
+  let n = (r) => e(r, ...t);
+  return o === void 0 ? n : Object.assign(n, { lazy: o, lazyArgs: t });
 }
-function Le(t, a, u) {
-  const e = P(0), n = D(() => t.value.map((f) => typeof f == "string" ? Te(f, u.value) : f)), i = D(() => Math.min(...n.value)), r = D(() => Math.max(...n.value)), p = D(() => {
-    const f = n.value.reduce(
-      (b, v) => Math.abs(v - a.value) < Math.abs(b - a.value) ? v : b
-    );
-    return n.value.indexOf(f);
-  });
-  return {
-    currentSnapPointIndex: e,
-    flattenedSnapPoints: n,
-    minSnapPoint: i,
-    maxSnapPoint: r,
-    closestSnapPointIndex: p
-  };
-}
-function Fe(t, a, u) {
-  let e = (n) => t(n, ...a);
-  return u === void 0 ? e : Object.assign(e, { lazy: u, lazyArgs: a });
-}
-function $e(t, a, u) {
-  let e = t.length - a.length;
-  if (e === 0) return t(...a);
-  if (e === 1) return Fe(t, a, u);
+function We(e, t, o) {
+  let n = e.length - t.length;
+  if (n === 0) return e(...t);
+  if (n === 1) return Ue(e, t, o);
   throw Error("Wrong number of arguments");
 }
-function I(...t) {
-  return $e(Ne, t);
+function E(...e) {
+  return We(Ge, e);
 }
-const Ne = (t, { min: a, max: u }) => a !== void 0 && t < a ? a : u !== void 0 && t > u ? u : t, ke = /* @__PURE__ */ Symbol("funnel/voidReducer"), Ve = () => ke;
-function Ue(t, { triggerAt: a = "end", minQuietPeriodMs: u, maxBurstDurationMs: e, minGapMs: n, reducer: i = Ve }) {
-  let r, p, f, b, v = () => {
-    let g = f;
-    g !== void 0 && (f = void 0, g === ke ? t() : t(g), n !== void 0 && (p = setTimeout(d, n)));
-  }, d = () => {
-    clearTimeout(p), p = void 0, r === void 0 && v();
-  }, h = () => {
-    clearTimeout(r), r = void 0, b = void 0, p === void 0 && v();
+const Ge = (e, { min: t, max: o }) => t !== void 0 && e < t ? t : o !== void 0 && e > o ? o : e, Te = /* @__PURE__ */ Symbol("funnel/voidReducer"), Qe = () => Te;
+function Xe(e, { triggerAt: t = "end", minQuietPeriodMs: o, maxBurstDurationMs: n, minGapMs: r, reducer: i = Qe }) {
+  let u, f, d, h, m = () => {
+    let g = d;
+    g !== void 0 && (d = void 0, g === Te ? e() : e(g), r !== void 0 && (f = setTimeout(P, r)));
+  }, P = () => {
+    clearTimeout(f), f = void 0, u === void 0 && m();
+  }, C = () => {
+    clearTimeout(u), u = void 0, h = void 0, f === void 0 && m();
   };
   return { call: (...g) => {
-    let w = r === void 0 && p === void 0;
-    if ((a !== "start" || w) && (f = i(f, ...g)), !(r === void 0 && !w)) {
-      if (u !== void 0 || e !== void 0 || n === void 0) {
-        clearTimeout(r);
-        let C = Date.now();
-        b ??= C;
-        let x = e === void 0 ? u ?? 0 : Math.min(u ?? e, Math.max(0, e - (C - b)));
-        r = setTimeout(h, x);
+    let T = u === void 0 && f === void 0;
+    if ((t !== "start" || T) && (d = i(d, ...g)), !(u === void 0 && !T)) {
+      if (o !== void 0 || n !== void 0 || r === void 0) {
+        clearTimeout(u);
+        let y = Date.now();
+        h ??= y;
+        let Y = n === void 0 ? o ?? 0 : Math.min(o ?? n, Math.max(0, n - (y - h)));
+        u = setTimeout(C, Y);
       }
-      a !== "end" && w && v();
+      t !== "end" && T && m();
     }
   }, cancel: () => {
-    clearTimeout(r), r = void 0, b = void 0, clearTimeout(p), p = void 0, f = void 0;
+    clearTimeout(u), u = void 0, h = void 0, clearTimeout(f), f = void 0, d = void 0;
   }, flush: () => {
-    h(), d();
+    C(), P();
   }, get isIdle() {
-    return r === void 0 && p === void 0;
+    return u === void 0 && f === void 0;
   } };
 }
-function We(t = {}) {
-  const { velocityThreshold: a = 0.5 } = t, u = P(0), e = P(0), n = P(0), i = P(0), r = P([]);
-  return {
-    start: (v) => {
-      const d = performance.now();
-      u.value = v, e.value = d, n.value = v, i.value = d, r.value = [{ y: v, time: d }];
-    },
-    update: (v) => {
-      const d = performance.now();
-      n.value = v, i.value = d, r.value.push({ y: v, time: d });
-      const h = d - 100;
-      r.value = r.value.filter((g) => g.time > h).slice(-5);
-    },
-    end: () => {
-      const v = r.value;
-      let d = 0;
-      if (v.length >= 2) {
-        const w = v[0], C = v[v.length - 1];
-        if (w && C) {
-          const x = C.y - w.y, R = C.time - w.time;
-          R > 0 && (d = x / R);
-        }
-      }
-      const h = Math.abs(d) >= a;
-      let g = "none";
-      return h && (g = d < 0 ? "up" : "down"), r.value = [], {
-        direction: g,
-        velocity: Math.abs(d),
-        isSwipe: h
-      };
-    }
-  };
+const je = 5, Je = 30, Ze = 400;
+function _e() {
+  const e = I([]);
+  function t(r) {
+    e.value = [{ y: r, time: performance.now() }];
+  }
+  function o(r) {
+    const i = e.value;
+    i.push({ y: r, time: performance.now() }), i.length > je && i.shift();
+  }
+  function n() {
+    const r = e.value;
+    if (r.length < 2)
+      return { direction: "none", velocity: 0, isSwipe: !1 };
+    const i = r[0], u = r[r.length - 1];
+    if (!i || !u)
+      return { direction: "none", velocity: 0, isSwipe: !1 };
+    const f = i.y - u.y, d = (u.time - i.time) / 1e3, h = d > 0 ? Math.abs(f) / d : 0, m = Math.abs(f) >= Je && h >= Ze;
+    let P = "none";
+    return m && (P = f > 0 ? "up" : "down"), e.value = [], { direction: P, velocity: h, isSwipe: m };
+  }
+  return { start: t, update: o, end: n };
 }
-function qe(t, a, u) {
-  return Math.max(a, Math.min(t, u));
+function et(e, t) {
+  if (e === void 0)
+    return t / 2;
+  if (typeof e == "number")
+    return e;
+  if (typeof e == "string" && e.includes("%")) {
+    const o = Number(e.replace("%", ""));
+    return t * (o / 100);
+  }
+  return t / 2;
 }
-function ze(t, a) {
-  return Math.pow(t, a * 5);
+const tt = 10, Se = 0.25;
+function be(e) {
+  const t = e, o = e instanceof HTMLAnchorElement || e instanceof HTMLButtonElement || e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement || e instanceof HTMLSelectElement || e instanceof HTMLLabelElement || e instanceof HTMLVideoElement || e instanceof HTMLAudioElement, n = e.hasAttribute("onclick") || e.hasAttribute("role"), r = t.tabIndex >= 0 || e.hasAttribute("tabindex"), i = t.isContentEditable || e instanceof HTMLInputElement && !e.disabled || e instanceof HTMLTextAreaElement && !e.disabled;
+  return o || n || r || i;
 }
-function we(t, a, u) {
-  return a === 0 || Math.abs(a) === 1 / 0 ? ze(t, u) : t * a * u / (a + u * t);
+function nt(e, t, o) {
+  return Math.max(t, Math.min(e, o));
 }
-function de(t, a, u, e = 0.15) {
-  return e === 0 ? qe(t, a, u) : t < a ? -we(a - t, u - a, e) + a : t > u ? +we(t - u, u - a, e) + u : t;
+function at(e, t) {
+  return Math.pow(e, t * 5);
 }
-function ae(t, a) {
-  return typeof t == "number" ? I(t, { max: a }) : Te(t, a);
+function we(e, t, o) {
+  return t === 0 || Math.abs(t) === 1 / 0 ? at(e, o) : e * t * o / (t + o * e);
 }
-function Ce(t, a) {
-  if (t === void 0)
-    return a / 2;
-  if (typeof t == "number")
-    return t;
-  if (typeof t == "string" && t.includes("%")) {
-    const u = Number(t.replace("%", ""));
-    return a * (u / 100);
-  }
-  return a / 2;
+function Pe(e, t, o, n = 0.15) {
+  return n === 0 ? nt(e, t, o) : e < t ? -we(t - e, o - t, n) + t : e > o ? +we(e - o, o - t, n) + o : e;
 }
-const Ge = 10, Qe = 3, Xe = 0.25, xe = 0.5, je = 0.5;
-function Ke(t) {
-  const {
-    sheetRef: a,
-    sheetScrollRef: u,
-    height: e,
-    translateY: n,
-    sheetHeight: i,
-    windowHeight: r,
-    snapPointsRef: p,
-    flattenedSnapPoints: f,
-    currentSnapPointIndex: b,
-    closestSnapPointIndex: v,
-    minSnapPoint: d,
-    maxSnapPoint: h,
-    canSwipeClose: g,
-    swipeCloseThreshold: w,
-    expandOnContentDrag: C,
-    onClose: x,
-    onSnapped: R,
-    onDraggingUp: oe,
-    onDraggingDown: H
-  } = t, T = P(!1), F = P(0), V = P(0), k = P(0), M = P(0), B = P(!0), S = P(!0), O = We({ velocityThreshold: je }), K = (o) => {
-    o > 0 ? H() : o < 0 && oe();
-  }, z = () => {
-    if (!a.value) return;
-    const o = window.getComputedStyle(a.value), c = parseFloat(o.height);
-    let l = 0;
-    o.transform && o.transform !== "none" && (l = new DOMMatrix(o.transform).m42), e.value = c, n.value = l;
-  }, le = () => {
-    const o = v.value;
-    b.value = o;
-    const c = p.value[o];
-    if (!c) return;
-    const l = ae(c, r.value);
-    e.value = l, n.value = 0, R(p.value.indexOf(c));
-  }, _ = (o = !0) => {
-    const c = O.end();
-    if (o && c.isSwipe && c.direction === "down" && g.value && e.value <= d.value + Ge)
-      return n.value = e.value, x(), !0;
-    let l;
-    if (o && c.isSwipe && f.value.length > 1) {
-      const Y = [...f.value].sort((y, L) => y - L);
-      if (c.direction === "up") {
-        const y = Y.find((L) => L > e.value + 1);
-        l = y !== void 0 ? f.value.indexOf(y) : v.value;
-      } else {
-        const y = [...Y].reverse().find((L) => L < e.value - 1);
-        l = y !== void 0 ? f.value.indexOf(y) : v.value;
-      }
-    } else
-      l = v.value;
-    b.value = l;
-    const s = p.value[l];
-    if (!s)
-      return x(), !0;
-    const m = ae(s, r.value);
-    return m === 0 ? (x(), !0) : (e.value = m, n.value = 0, R(p.value.indexOf(s)), !1);
-  }, ue = (o) => {
-    a.value && o.button === 0 && (z(), T.value = !0, F.value = o.clientY, V.value = e.value, k.value = n.value, M.value = o.clientY, O.start(o.clientY), o.target.setPointerCapture(o.pointerId));
-  }, A = (o) => {
-    if (!T.value) return;
-    if (o.buttons !== 1) {
-      $(o);
-      return;
-    }
-    const c = o.clientY - F.value, l = o.clientY;
-    n.value <= 0 && (e.value = V.value - c), e.value <= d.value && (e.value = d.value, n.value = k.value + c, g.value ? n.value = I(n.value, { min: 0 }) : n.value = I(
-      de(
-        n.value,
-        -i.value,
-        0,
-        xe
-      ),
-      { min: 0 }
-    )), e.value = I(
-      de(e.value, 0, h.value, Xe),
-      {
-        min: 0,
-        max: r.value
-      }
-    ), K(o.clientY - M.value), O.update(o.clientY), M.value = l;
-  }, $ = (o) => {
-    if (T.value = !1, o.target.releasePointerCapture(o.pointerId), g.value) {
-      const c = Ce(w.value, e.value);
-      if (n.value > c) {
-        n.value = e.value, x();
+const ot = (e) => {
+  const t = _e(), o = x(!1);
+  let n = !0, r = 0, i = 0, u = !1, f = 0, d = !1, h = 0;
+  const m = (a) => {
+    a > 0 ? e.onDraggingDown?.() : a < 0 && e.onDraggingUp?.();
+  }, P = () => {
+    if (u) return;
+    const a = document.activeElement;
+    a instanceof HTMLElement && a !== document.body && (a.blur(), u = !0);
+  }, C = (a) => {
+    typeof a.cancelable != "boolean" || a.cancelable ? n && a.preventDefault() : console.warn("The following event couldn't be canceled:");
+  }, g = (a, p) => {
+    const b = p === "header" ? e.sheetHeaderRef.value : e.sheetFooterRef.value;
+    b && a.button === 0 && (r = e.height.value, i = e.translateY.value, u = !1, h = 0, d = !1, n = !0, o.value = !0, t.start(a.clientY), b.setPointerCapture(a.pointerId));
+  }, T = (a) => {
+    e.sheetContentRef.value && a.button === 0 && e.expandOnContentDrag.value !== !1 && (be(a.target) || (r = e.height.value, i = e.translateY.value, f = a.clientY, u = !1, h = 0, d = !1, n = !0, o.value = !0, t.start(a.clientY), e.sheetContentRef.value.setPointerCapture(a.pointerId)));
+  }, y = (a) => {
+    if (o.value) {
+      if (Math.abs(a.movementY) > 0 && P(), t.update(a.clientY), m(a.movementY), e.translateY.value > 0) {
+        e.canSwipeClose.value ? e.translateY.value = e.translateY.value + a.movementY : (i = i + a.movementY, e.translateY.value = Pe(
+          i,
+          -e.minSnapPoint.value,
+          0,
+          Se
+        ));
         return;
       }
-    } else
-      n.value = 0;
-    if (n.value === e.value) {
-      n.value = 0, x();
-      return;
+      r = E(r - a.movementY, {
+        min: e.minSnapPoint.value
+      }), e.height.value = Pe(
+        r,
+        0,
+        e.maxSnapPoint.value,
+        Se
+      ), e.height.value <= e.minSnapPoint.value && (e.translateY.value = e.translateY.value + a.movementY);
     }
-    _();
-  }, re = (o) => {
-    if (!u.value) return;
-    const c = u.value.scrollTop === 0, l = o > 0, s = f.value.length === 1, m = 0.5 > Math.abs(e.value - h.value);
-    if (s) {
-      if (!C.value) {
-        S.value = !1;
-        return;
-      }
-      n.value === 0 && c && l && (S.value = !0), n.value === 0 && c && !l && (S.value = !1);
-    } else {
-      if (!C.value) {
-        S.value = !1;
+  }, Y = (a) => {
+    if (h >= 2)
+      return;
+    const p = e.sheetScrollRef.value, b = p?.scrollTop === 0, w = a.clientY - f > 0, S = e.flattenedSnapPoints.value.length === 1, z = 0.5 > Math.abs(e.height.value - e.maxSnapPoint.value), D = (p?.scrollHeight ?? 0) > (p?.clientHeight ?? 0);
+    if (S) {
+      if (!e.expandOnContentDrag.value) {
+        n = !1;
         return;
       }
-      S.value = !0, m && (l && c && (S.value = !0), !l && c && (S.value = !1), c || (S.value = !1));
-    }
-  }, J = (o) => {
-    a.value && o.button === 0 && (z(), T.value = !0, F.value = o.clientY, V.value = e.value, k.value = n.value, M.value = o.clientY, B.value = !0, O.start(o.clientY), o.target.setPointerCapture(o.pointerId));
-  }, se = (o) => {
-    if (!T.value) return;
-    if (o.buttons !== 1) {
-      U(o);
+      e.translateY.value === 0 && b && w && (n = !0), e.translateY.value === 0 && b && !w && (n = !1);
+    } else
+      n = !0, z && (w && b && (n = !0), !w && b && (n = !1), b || (n = !1));
+    d = !D, h++;
+  }, R = (a) => {
+    if (!o.value || !e.sheetScrollRef.value || (Math.abs(a.movementY) > 0 && P(), Y(a), h <= 1)) return;
+    if (t.update(a.clientY), m(a.movementY), e.translateY.value > 0) {
+      e.canSwipeClose.value && (e.translateY.value = E(e.translateY.value + a.movementY, { min: 0 }));
       return;
     }
-    if (!C.value) {
-      S.value = !1;
+    e.height.value = E(e.height.value - a.movementY, {
+      min: e.minSnapPoint.value,
+      max: e.maxSnapPoint.value
+    }), !(e.flattenedSnapPoints.value.length === 1) && e.height.value === e.maxSnapPoint.value && (n = !1), e.height.value <= e.minSnapPoint.value && (e.translateY.value = E(e.translateY.value + a.movementY, {
+      min: 0,
+      ...e.canSwipeClose.value === !1 ? { max: 0 } : {}
+    }));
+  }, N = () => {
+    const a = t.end();
+    if (a.isSwipe && a.direction === "down" && e.canSwipeClose.value && e.height.value <= e.minSnapPoint.value + tt) {
+      e.onClose();
       return;
     }
-    const c = o.clientY - F.value, l = o.clientY, s = o.clientY - M.value;
-    if (B.value) {
-      const Y = o.clientY - F.value;
-      if (Math.abs(Y) > Qe)
-        B.value = !1, re(Y);
-      else {
-        M.value = l;
+    if (e.canSwipeClose.value) {
+      const p = et(
+        e.swipeCloseThreshold.value,
+        e.height.value
+      );
+      if (e.translateY.value > p) {
+        e.onClose();
         return;
       }
     }
-    n.value === 0 && S.value && C.value && (e.value = V.value - c), e.value <= d.value && (e.value = d.value, S.value && C.value && (n.value = k.value + c), n.value = I(n.value, { min: 0, max: d.value }), g.value ? n.value = I(n.value, { min: 0 }) : n.value = I(
-      de(
-        n.value,
-        -i.value,
-        0,
-        xe
-      ),
-      { min: 0 }
-    )), e.value > h.value && (e.value = h.value), e.value = I(e.value, { max: r.value }), f.value.length === 1 || e.value === h.value && (S.value = !1), K(s), O.update(o.clientY), M.value = l;
-  }, U = (o) => {
-    if (T.value = !1, B.value = !0, o.target.releasePointerCapture(o.pointerId), g.value) {
-      const l = Ce(w.value, e.value);
-      if (n.value > l) {
-        n.value = e.value, x();
-        return;
+    if (a.isSwipe && e.flattenedSnapPoints.value.length > 1) {
+      const p = [...e.flattenedSnapPoints.value].sort((w, S) => w - S);
+      let b = e.closestSnapPointIndex.value;
+      if (a.direction === "up") {
+        const w = p.find((S) => S > e.height.value + 1);
+        w !== void 0 && (b = e.flattenedSnapPoints.value.indexOf(w));
+      } else if (a.direction === "down") {
+        const w = [...p].reverse().find((S) => S < e.height.value - 1);
+        w !== void 0 && (b = e.flattenedSnapPoints.value.indexOf(w));
       }
-    } else
-      n.value = 0;
-    if (n.value === e.value) {
-      n.value = 0, x();
+      e.onSnapToPoint(b), e.translateY.value = 0;
       return;
     }
-    const c = S.value;
-    _(c);
-  }, W = (o) => {
-    T.value && (o.preventDefault(), T.value = !1, B.value = !0, le());
-  }, G = (o) => {
-    S.value = !0, Z(o);
-  }, Z = (o) => {
-    S.value && o.preventDefault();
-  }, Q = () => {
-    if (!u.value) return;
-    const o = u.value.scrollTop === 0;
-    S.value = o;
-  }, N = D(() => ({
-    onPointerdown: ue,
-    onPointermove: A,
-    onPointerup: $,
-    onPointercancel: $,
-    onContextmenu: W,
-    onTouchmove: G
-  })), ee = D(() => ({
-    onPointerdown: J,
-    onPointermove: se,
-    onPointerup: U,
-    onPointercancel: U,
-    onContextmenu: W,
-    onTouchmove: Z
-  }));
-  return {
-    isDragging: T,
-    preventContentScroll: S,
-    headerFooterHandlers: N,
-    contentWrapperHandlers: ee,
-    scrollEnd: Q
-  };
-}
-function _e(t) {
-  const { blocking: a } = t, u = Pe(document.body), e = Pe(document.documentElement), n = () => {
-    u.value = !0, e.value = !0;
-  }, i = () => {
-    u.value = !1, e.value = !1;
+    e.onSnapToPoint(e.closestSnapPointIndex.value), e.translateY.value = 0;
   };
   return {
-    lock: n,
-    unlock: i,
-    lockIfBlocking: () => {
-      a.value && n();
-    },
-    unlockIfBlocking: () => {
-      a.value && i();
+    isDragging: o,
+    handleSheetScroll: C,
+    handlePointerDown: g,
+    handleContentPointerDown: T,
+    handlePointerMove: y,
+    handleContentPointerMove: R,
+    handleLostPointerCapture: (a, p) => {
+      o.value = !1, p === "header" ? e.sheetHeaderRef.value?.releasePointerCapture(a.pointerId) : p === "footer" ? e.sheetFooterRef.value?.releasePointerCapture(a.pointerId) : e.sheetContentRef.value?.releasePointerCapture(a.pointerId), h = 0, d = !1, u = !1, N();
     },
-    touchStartHandler: () => {
-      a.value || n();
-    },
-    touchEndHandler: () => {
-      a.value || i();
+    handleTouchStart: (a) => {
+      be(a.target) || d && a.preventDefault();
     }
   };
-}
-function Je(t) {
-  const { sheetRef: a, backdropRef: u, blocking: e, onEscape: n } = t, i = P(null), r = Ae([a, u], {
+};
+function rt(e) {
+  const { sheetRef: t, backdropRef: o, blocking: n, onEscape: r } = e, i = I(null), u = Ke([t, o], {
     immediate: !1,
-    fallbackFocus: () => a.value || document.body
-  }), p = (g) => {
-    g.key === "Escape" && n();
-  }, f = () => {
-    a.value && (i.value = new MutationObserver((g) => {
-      for (const w of g)
-        w.type === "attributes" && w.attributeName === "aria-expanded" && (w.target.getAttribute("aria-expanded") === "true" ? r.pause() : a.value?.querySelector('[aria-expanded="true"]') || r.unpause());
-    }), i.value.observe(a.value, {
+    fallbackFocus: () => t.value || document.body
+  }), f = (g) => {
+    g.key === "Escape" && r();
+  }, d = () => {
+    t.value && (i.value = new MutationObserver((g) => {
+      for (const T of g)
+        T.type === "attributes" && T.attributeName === "aria-expanded" && (T.target.getAttribute("aria-expanded") === "true" ? u.pause() : t.value?.querySelector('[aria-expanded="true"]') || u.unpause());
+    }), i.value.observe(t.value, {
       attributes: !0,
       attributeFilter: ["aria-expanded"],
       subtree: !0
     }));
-  }, b = () => {
+  }, h = () => {
     i.value && (i.value.disconnect(), i.value = null);
   };
   return {
     activate: () => {
-      e.value && (r.activate(), f()), window.addEventListener("keydown", p);
+      n.value && (u.activate(), d()), window.addEventListener("keydown", f);
     },
     deactivate: () => {
-      window.removeEventListener("keydown", p), b(), e.value && r.deactivate();
+      window.removeEventListener("keydown", f), h(), n.value && u.deactivate();
     },
     cleanup: () => {
-      b(), r.deactivate();
+      h(), u.deactivate();
     }
   };
 }
-const Ze = ["data-vsbs-shadow", "data-vsbs-sheet-show"], et = /* @__PURE__ */ ye({
+function lt(e) {
+  const { blocking: t } = e, o = Ne(document.documentElement), n = () => {
+    o.value = !0;
+  }, r = () => {
+    o.value = !1;
+  };
+  return {
+    lock: n,
+    unlock: r,
+    lockIfBlocking: () => {
+      t.value && n();
+    },
+    unlockIfBlocking: () => {
+      t.value && r();
+    },
+    touchStartHandler: () => {
+      t.value || n();
+    },
+    touchEndHandler: () => {
+      t.value || r();
+    }
+  };
+}
+function ke(e, t) {
+  const o = parseFloat(e);
+  return t * o / 100;
+}
+function st(e, t, o) {
+  const n = I(0), r = H(() => e.value.map((d) => typeof d == "string" ? ke(d, o.value) : d)), i = H(() => Math.min(...r.value)), u = H(() => Math.max(...r.value)), f = H(() => {
+    const d = r.value.reduce(
+      (h, m) => Math.abs(m - t.value) < Math.abs(h - t.value) ? m : h
+    );
+    return r.value.indexOf(d);
+  });
+  return {
+    currentSnapPointIndex: n,
+    flattenedSnapPoints: r,
+    minSnapPoint: i,
+    maxSnapPoint: u,
+    closestSnapPointIndex: f
+  };
+}
+function Ce(e, t) {
+  return typeof e == "number" ? E(e, { max: t }) : ke(e, t);
+}
+const it = ["data-vsbs-shadow", "data-vsbs-sheet-show"], ut = /* @__PURE__ */ Be({
   __name: "BottomSheet",
   props: {
     duration: { default: 250 },
@@ -385,213 +297,255 @@ const Ze = ["data-vsbs-shadow", "data-vsbs-sheet-show"], et = /* @__PURE__ */ ye
     footerClass: {}
   },
   emits: ["opened", "opening-started", "closed", "closing-started", "dragging-up", "dragging-down", "snapped", "instinctHeight", "update:modelValue"],
-  setup(t, { expose: a, emit: u }) {
-    Ee((l) => ({
-      v76198695: F.value
+  setup(e, { expose: t, emit: o }) {
+    Oe((s) => ({
+      v7643c7ff: b.value
     }));
-    const e = t, n = u, i = Re(e, "modelValue", n, {
+    const n = e, r = o, i = ze(n, "modelValue", r, {
       passive: !0
     });
-    te(i, (l) => {
-      l ? Q() : N();
-    }), De(() => {
-      i.value && Q();
+    A(i, (s) => {
+      s ? j() : B();
+    }), A(i, async (s) => {
+      if (!s) {
+        C.value = 0;
+        return;
+      }
+      await _(), M();
+    }), Ae(() => {
+      De(), i.value && j();
     });
-    const r = q(null), p = q(null), f = q(null), b = q(null), v = q(null), d = q(null), { height: h } = Oe(), { height: g } = ne(r), { height: w } = ne(p), { height: C } = ne(v), { height: x } = ne(f), R = D(() => I(
-      Math.ceil(C.value + w.value + x.value),
-      { max: h.value }
-    )), oe = (l, s, m) => {
-      w.value = l, C.value = s, x.value = m;
-    }, H = P(0), T = P(0), F = D(() => e.duration + "ms"), { snapPoints: V } = He(e), k = D(() => V.value ?? [R.value]), {
-      flattenedSnapPoints: M,
-      currentSnapPointIndex: B,
-      closestSnapPointIndex: S,
-      minSnapPoint: O,
-      maxSnapPoint: K
-    } = Le(k, H, h), z = D(() => e.blocking), le = D(() => e.canSwipeClose), _ = D(() => e.swipeCloseThreshold), ue = D(() => e.expandOnContentDrag), A = _e({ blocking: z }), $ = Je({
-      sheetRef: r,
-      backdropRef: d,
-      blocking: z,
-      onEscape: () => N()
-    }), { isDragging: re, headerFooterHandlers: J, contentWrapperHandlers: se, scrollEnd: U } = Ke({
-      sheetRef: r,
-      sheetScrollRef: b,
-      height: H,
-      translateY: T,
-      sheetHeight: g,
-      windowHeight: h,
-      snapPointsRef: k,
-      flattenedSnapPoints: M,
-      currentSnapPointIndex: B,
-      closestSnapPointIndex: S,
-      minSnapPoint: O,
-      maxSnapPoint: K,
-      canSwipeClose: le,
-      swipeCloseThreshold: _,
-      expandOnContentDrag: ue,
-      onClose: () => N(),
-      onSnapped: (l) => n("snapped", l),
-      onDraggingUp: () => n("dragging-up"),
-      onDraggingDown: () => n("dragging-down")
-    }), W = P(!1), G = P(!1), Z = () => {
-      e.canBackdropClose && N();
-    }, Q = async () => {
-      if (W.value) return;
-      i.value = !0, W.value = !0, n("opening-started"), A.lockIfBlocking(), await fe();
-      const l = r.value;
-      g.value = l.getBoundingClientRect().height;
-      const s = l.querySelector("[data-vsbs-content]"), m = l.querySelector("[data-vsbs-header]"), Y = l.querySelector("[data-vsbs-footer]");
-      if (oe(
-        m.getBoundingClientRect().height,
-        s.getBoundingClientRect().height,
-        Y.getBoundingClientRect().height
-      ), await fe(), B.value = M.value.findIndex(
-        (y) => y === O.value
-      ), e.initialSnapPoint !== void 0) {
-        const y = e.initialSnapPoint;
-        if (y < 0 || y >= k.value.length) {
+    const u = x(null), f = x(null), d = x(null), h = x(null), m = x(null), P = x(null), C = I(0), { height: g } = qe(), { height: T } = U(u), { height: y } = U(f), { height: Y } = U(m), { height: R } = U(d), N = H(() => E(
+      Math.ceil(Y.value + y.value + R.value),
+      { max: g.value }
+    )), ae = (s, l, c) => {
+      y.value = s, Y.value = l, R.value = c;
+    }, k = I(0), a = I(0), p = H(() => E(k.value + C.value, {
+      max: g.value
+    })), b = H(() => n.duration + "ms"), w = F(() => n.snapPoints), S = H(() => w.value ?? [N.value]), {
+      flattenedSnapPoints: z,
+      currentSnapPointIndex: D,
+      closestSnapPointIndex: xe,
+      minSnapPoint: W,
+      maxSnapPoint: Ee
+    } = st(S, k, g), oe = F(() => n.blocking), ye = F(() => n.canSwipeClose), Me = F(() => n.swipeCloseThreshold), He = F(() => n.expandOnContentDrag), L = lt({ blocking: oe }), G = rt({
+      sheetRef: u,
+      backdropRef: P,
+      blocking: oe,
+      onEscape: () => B()
+    }), Q = x(!1), X = x(!1), Ye = () => {
+      n.canBackdropClose && B();
+    }, M = () => {
+      const s = window.visualViewport;
+      if (!s || !i.value) {
+        C.value = 0;
+        return;
+      }
+      const l = Math.max(0, window.innerHeight - s.height - s.offsetTop);
+      C.value = Math.round(l);
+    };
+    let re = null;
+    const De = () => {
+      const s = window.visualViewport;
+      s && (s.addEventListener("resize", M), s.addEventListener("scroll", M), window.addEventListener("resize", M), re = () => {
+        s.removeEventListener("resize", M), s.removeEventListener("scroll", M), window.removeEventListener("resize", M);
+      });
+    }, j = async () => {
+      if (Q.value) return;
+      i.value = !0, Q.value = !0, r("opening-started"), L.lockIfBlocking(), await _(), M();
+      const s = u.value;
+      T.value = s.getBoundingClientRect().height;
+      const l = s.querySelector("[data-vsbs-content]"), c = s.querySelector("[data-vsbs-header]"), K = s.querySelector("[data-vsbs-footer]");
+      if (ae(
+        c.getBoundingClientRect().height,
+        l.getBoundingClientRect().height,
+        K.getBoundingClientRect().height
+      ), await _(), D.value = z.value.findIndex(
+        (O) => O === W.value
+      ), n.initialSnapPoint !== void 0) {
+        const O = n.initialSnapPoint;
+        if (O < 0 || O >= S.value.length) {
           console.warn("Index out of bounds");
           return;
         }
-        const L = k.value[y];
-        if (!L) return;
-        H.value = ae(L, h.value);
+        const de = S.value[O];
+        if (!de) return;
+        k.value = Ce(de, g.value);
       } else
-        H.value = I(O.value, { max: h.value });
-      T.value = H.value, requestAnimationFrame(() => {
-        T.value = 0, e.blocking && setTimeout(() => {
-          i.value && (n("opened"), $.activate());
-        }, e.duration);
-      }), W.value = !1;
-    }, N = () => {
-      G.value || (i.value = !1, G.value = !0, n("closing-started"), A.unlockIfBlocking(), $.deactivate(), T.value = H.value, setTimeout(() => {
-        n("closed"), G.value = !1;
-      }, e.duration));
-    }, ee = (l) => {
-      if (!k.value) return;
-      if (l < 0 || l >= k.value.length) {
+        k.value = E(W.value, { max: g.value });
+      a.value = k.value, requestAnimationFrame(() => {
+        a.value = 0, n.blocking && setTimeout(() => {
+          i.value && (r("opened"), G.activate());
+        }, n.duration);
+      }), Q.value = !1;
+    }, B = () => {
+      X.value || (i.value = !1, X.value = !0, r("closing-started"), L.unlockIfBlocking(), G.deactivate(), a.value = k.value, setTimeout(() => {
+        r("closed"), X.value = !1;
+      }, n.duration));
+    }, J = (s) => {
+      if (!S.value) return;
+      if (s < 0 || s >= S.value.length) {
         console.warn("Index out of bounds");
         return;
       }
-      B.value = l;
-      const s = k.value[l];
-      s && (H.value = ae(s, h.value), n("snapped", k.value.indexOf(s)));
-    }, o = Ue((l) => ee(l), {
-      minQuietPeriodMs: e.duration,
-      reducer: (l, s) => s
+      D.value = s;
+      const l = S.value[s];
+      l && (k.value = Ce(l, g.value), r("snapped", S.value.indexOf(l)));
+    }, {
+      isDragging: Le,
+      handleSheetScroll: le,
+      handlePointerDown: se,
+      handleContentPointerDown: ie,
+      handlePointerMove: q,
+      handleContentPointerMove: ue,
+      handleLostPointerCapture: Z,
+      handleTouchStart: ce
+    } = ot({
+      sheetHeaderRef: f,
+      sheetFooterRef: d,
+      sheetContentRef: m,
+      sheetScrollRef: h,
+      height: k,
+      translateY: a,
+      minSnapPoint: W,
+      maxSnapPoint: Ee,
+      closestSnapPointIndex: xe,
+      flattenedSnapPoints: z,
+      canSwipeClose: ye,
+      expandOnContentDrag: He,
+      swipeCloseThreshold: Me,
+      onClose: B,
+      onSnapToPoint: J,
+      onDraggingUp: () => r("dragging-up"),
+      onDraggingDown: () => r("dragging-down")
+    }), Ie = Xe((s) => J(s), {
+      minQuietPeriodMs: n.duration,
+      reducer: (s, l) => l
     });
-    te(k, (l, s) => {
-      if (i.value === !1 || !l || !s) return;
-      const m = l[B.value], Y = s[B.value];
-      !m || typeof m == "string" || !Y || typeof Y == "string" || (H.value = I(m, { max: h.value }));
-    }), te(h, () => {
-      o.call(B.value);
-    }), te(R, (l) => {
-      n("instinctHeight", l);
-    }), Be(() => {
-      $.cleanup();
+    A(S, (s, l) => {
+      if (i.value === !1 || !s || !l) return;
+      const c = s[D.value], K = l[D.value];
+      !c || typeof c == "string" || !K || typeof K == "string" || (k.value = E(c, { max: g.value }));
+    }), A(g, () => {
+      Ie.call(D.value);
+    }), A(N, (s) => {
+      r("instinctHeight", s);
+    }), Fe(() => {
+      re?.(), G.cleanup();
     });
-    const c = (l) => {
-      const s = l;
-      s.style.transition = `transform ${e.duration}ms ease, height ${e.duration}ms ease`, s.style.transform = `translateY(${H.value}px)`;
+    const Re = (s) => {
+      const l = s;
+      l.style.transition = `transform ${n.duration}ms ease, height ${n.duration}ms ease`, l.style.transform = `translateY(${p.value}px)`;
     };
-    return a({ open: Q, close: N, snapToPoint: ee }), (l, s) => (X(), ie(Ie, null, [
-      (X(), pe(he, {
-        to: t.teleportTo,
-        defer: t.teleportDefer
+    return t({ open: j, close: B, snapToPoint: J }), (s, l) => ($(), ee($e, null, [
+      ($(), fe(ve, {
+        to: e.teleportTo,
+        defer: e.teleportDefer
       }, [
-        ge(me, { name: "vsbs-backdrop" }, {
-          default: Se(() => [
-            E(i) && t.blocking ? (X(), ie("div", {
-              key: 0,
-              ref_key: "backdrop",
-              ref: d,
-              "data-vsbs-backdrop": "",
-              onClick: s[0] || (s[0] = (m) => Z())
-            }, null, 512)) : be("", !0)
-          ]),
-          _: 1
-        })
+        V("div", null, [
+          he(ge, { name: "vsbs-backdrop" }, {
+            default: me(() => [
+              v(i) && e.blocking ? ($(), ee("div", {
+                key: 0,
+                ref_key: "backdrop",
+                ref: P,
+                "data-vsbs-backdrop": "",
+                onClick: l[0] || (l[0] = (c) => Ye())
+              }, null, 512)) : pe("", !0)
+            ]),
+            _: 1
+          })
+        ])
       ], 8, ["to", "defer"])),
-      (X(), pe(he, {
-        to: t.teleportTo,
-        defer: t.teleportDefer
+      ($(), fe(ve, {
+        to: e.teleportTo,
+        defer: e.teleportDefer
       }, [
-        ge(me, {
+        he(ge, {
           name: "vsbs-sheet",
-          onLeave: c
+          onLeave: Re
         }, {
-          default: Se(() => [
-            E(i) ? (X(), ie("div", {
+          default: me(() => [
+            v(i) ? ($(), ee("div", {
               key: 0,
               ref_key: "sheet",
-              ref: r,
-              style: Me({
-                transform: `translateY(${T.value}px)`,
-                height: `${H.value}px`,
-                transition: E(re) ? "none" : `transform ${t.duration}ms ease, height ${t.duration}ms ease`
+              ref: u,
+              style: Ve({
+                transform: `translateY(${a.value}px)`,
+                height: `${p.value}px`,
+                paddingBottom: `${C.value}px`,
+                transition: v(Le) ? "none" : `transform ${e.duration}ms ease, height ${e.duration}ms ease`
               }),
-              "data-vsbs-shadow": !t.blocking,
-              "data-vsbs-sheet-show": E(i),
+              "data-vsbs-shadow": !e.blocking,
+              "data-vsbs-sheet-show": v(i),
               "aria-modal": "true",
               "data-vsbs-sheet": "",
               tabindex: "-1",
-              onTouchstart: s[2] || (s[2] = //@ts-ignore
-              (...m) => E(A).touchStartHandler && E(A).touchStartHandler(...m)),
-              onTouchend: s[3] || (s[3] = //@ts-ignore
-              (...m) => E(A).touchEndHandler && E(A).touchEndHandler(...m))
+              onTouchstart: l[12] || (l[12] = //@ts-ignore
+              (...c) => v(L).touchStartHandler && v(L).touchStartHandler(...c)),
+              onTouchend: l[13] || (l[13] = //@ts-ignore
+              (...c) => v(L).touchEndHandler && v(L).touchEndHandler(...c))
             }, [
-              j("div", ce({
+              V("div", {
                 ref_key: "sheetHeader",
-                ref: p,
-                "data-vsbs-header": ""
-              }, E(J), {
-                class: t.headerClass,
-                style: { "touch-action": "none" }
-              }), [
-                ve(l.$slots, "header", {}, void 0, !0)
-              ], 16),
-              j("div", {
+                ref: f,
+                "data-vsbs-header": "",
+                class: te(e.headerClass),
+                onPointerdown: l[1] || (l[1] = (c) => v(se)(c, "header")),
+                onPointermove: l[2] || (l[2] = //@ts-ignore
+                (...c) => v(q) && v(q)(...c)),
+                onLostpointercapture: l[3] || (l[3] = (c) => v(Z)(c, "header"))
+              }, [
+                ne(s.$slots, "header", {}, void 0, !0)
+              ], 34),
+              V("div", {
                 ref_key: "sheetScroll",
-                ref: b,
+                ref: h,
                 "data-vsbs-scroll": "",
-                onScrollend: s[1] || (s[1] = //@ts-ignore
-                (...m) => E(U) && E(U)(...m))
+                onTouchstart: l[4] || (l[4] = //@ts-ignore
+                (...c) => v(ce) && v(ce)(...c)),
+                onTouchmove: l[5] || (l[5] = //@ts-ignore
+                (...c) => v(le) && v(le)(...c)),
+                onPointerdown: l[6] || (l[6] = //@ts-ignore
+                (...c) => v(ie) && v(ie)(...c)),
+                onPointermove: l[7] || (l[7] = //@ts-ignore
+                (...c) => v(ue) && v(ue)(...c)),
+                onLostpointercapture: l[8] || (l[8] = (c) => v(Z)(c, "content"))
               }, [
-                j("div", ce({ "data-vsbs-content-wrapper": "" }, E(se), { style: { touchAction: "pan-y" } }), [
-                  j("div", {
-                    ref_key: "sheetContent",
-                    ref: v,
-                    "data-vsbs-content": "",
-                    class: Ye(t.contentClass)
-                  }, [
-                    ve(l.$slots, "default", {}, void 0, !0)
-                  ], 2)
-                ], 16)
+                V("div", {
+                  ref_key: "sheetContent",
+                  ref: m,
+                  "data-vsbs-content": "",
+                  class: te(e.contentClass)
+                }, [
+                  ne(s.$slots, "default", {}, void 0, !0)
+                ], 2)
               ], 544),
-              j("div", ce({
+              V("div", {
                 ref_key: "sheetFooter",
-                ref: f,
-                "data-vsbs-footer": ""
-              }, E(J), {
-                class: t.footerClass,
-                style: { "touch-action": "none" }
-              }), [
-                ve(l.$slots, "footer", {}, void 0, !0)
-              ], 16)
-            ], 44, Ze)) : be("", !0)
+                ref: d,
+                "data-vsbs-footer": "",
+                class: te(e.footerClass),
+                onPointerdown: l[9] || (l[9] = (c) => v(se)(c, "footer")),
+                onPointermove: l[10] || (l[10] = //@ts-ignore
+                (...c) => v(q) && v(q)(...c)),
+                onLostpointercapture: l[11] || (l[11] = (c) => v(Z)(c, "footer"))
+              }, [
+                ne(s.$slots, "footer", {}, void 0, !0)
+              ], 34)
+            ], 44, it)) : pe("", !0)
           ]),
           _: 3
         })
       ], 8, ["to", "defer"]))
     ], 64));
   }
-}), tt = (t, a) => {
-  const u = t.__vccOpts || t;
-  for (const [e, n] of a)
-    u[e] = n;
-  return u;
-}, lt = /* @__PURE__ */ tt(et, [["__scopeId", "data-v-533b8a6d"]]);
+}), ct = (e, t) => {
+  const o = e.__vccOpts || e;
+  for (const [n, r] of t)
+    o[n] = r;
+  return o;
+}, ht = /* @__PURE__ */ ct(ut, [["__scopeId", "data-v-efbe17f6"]]);
 export {
-  lt as default
+  ht as default
 };

package/dist/style.css

@@ -1 +1 @@
-[data-vsbs-backdrop][data-v-533b8a6d]{background-color:var(--vsbs-backdrop-bg, rgba(0, 0, 0, .5));inset:0;pointer-events:auto;position:fixed;-webkit-user-select:none;user-select:none;will-change:opacity;--vsbs-duration: var(--v76198695)}[data-vsbs-shadow=true][data-v-533b8a6d]:before{content:"";z-index:-1;position:absolute;top:0;height:100lvh;width:100%;border-radius:var(--vsbs-border-radius, 16px);box-shadow:0 -5px 60px 0 var(--vsbs-shadow-color, rgba(89, 89, 89, .2))}[data-vsbs-sheet][data-v-533b8a6d]{background-color:var(--vsbs-background, #fff);border-top-left-radius:var(--vsbs-border-radius, 16px);border-top-right-radius:var(--vsbs-border-radius, 16px);border-right:1px solid var(--vsbs-outer-border-color, transparent);border-left:1px solid var(--vsbs-outer-border-color, transparent);bottom:0;display:flex;flex-direction:column;left:0;margin-left:auto;margin-right:auto;max-width:var(--vsbs-max-width, 640px);pointer-events:all;position:fixed;right:0;width:100%;will-change:height,transform}[data-vsbs-sheet-show=true][data-v-533b8a6d]{visibility:visible}[data-vsbs-header][data-v-533b8a6d]{box-shadow:0 1px 0 var(--vsbs-border-color, rgba(46, 59, 66, .125));flex-shrink:0;padding:20px var(--vsbs-padding-x, 16px) 8px;-webkit-user-select:none;user-select:none;z-index:3;border-top-left-radius:var(--vsbs-border-radius, 16px);border-top-right-radius:var(--vsbs-border-radius, 16px);border-top:1px solid var(--vsbs-outer-border-color, transparent)}[data-vsbs-header][data-v-533b8a6d]:before{background-color:var(--vsbs-handle-background, rgba(0, 0, 0, .28));border-radius:2px;content:"";display:block;height:4px;left:50%;position:absolute;top:8px;transform:translate(-50%);width:36px}[data-vsbs-header][data-v-533b8a6d]:empty{box-shadow:none;padding:14px var(--vsbs-padding-x, 16px) 10px}[data-vsbs-footer][data-v-533b8a6d]{box-shadow:0 -1px 0 var(--vsbs-border-color, rgba(46, 59, 66, .125));flex-grow:0;flex-shrink:0;padding:16px var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}[data-vsbs-footer][data-v-533b8a6d]:empty{display:none}[data-vsbs-scroll][data-v-533b8a6d]{flex-grow:1;overflow-y:auto;overscroll-behavior:none}[data-vsbs-content-wrapper][data-v-533b8a6d]{height:100%}[data-vsbs-content][data-v-533b8a6d]{display:grid;padding:8px var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}.vsbs-backdrop-enter-active[data-v-533b8a6d],.vsbs-backdrop-leave-active[data-v-533b8a6d]{transition:opacity var(--vsbs-duration) ease}.vsbs-backdrop-enter-from[data-v-533b8a6d],.vsbs-backdrop-leave-to[data-v-533b8a6d]{opacity:0}
+[data-vsbs-backdrop][data-v-efbe17f6]{background-color:var(--vsbs-backdrop-bg, rgba(0, 0, 0, .5));inset:0;pointer-events:auto;position:fixed;-webkit-user-select:none;user-select:none;will-change:opacity;--vsbs-duration: var(--v7643c7ff)}[data-vsbs-shadow=true][data-v-efbe17f6]:before{content:"";z-index:-1;position:absolute;top:0;height:100lvh;width:100%;border-radius:var(--vsbs-border-radius, 16px);box-shadow:0 -5px 60px 0 var(--vsbs-shadow-color, rgba(89, 89, 89, .2))}[data-vsbs-sheet][data-v-efbe17f6]{background-color:var(--vsbs-background, #fff);box-sizing:border-box;border-top-left-radius:var(--vsbs-border-radius, 16px);border-top-right-radius:var(--vsbs-border-radius, 16px);border-right:1px solid var(--vsbs-outer-border-color, transparent);border-left:1px solid var(--vsbs-outer-border-color, transparent);bottom:0;display:flex;flex-direction:column;left:0;margin-left:auto;margin-right:auto;max-width:var(--vsbs-max-width, 640px);pointer-events:all;position:fixed;right:0;width:100%;will-change:height,transform}[data-vsbs-sheet-show=true][data-v-efbe17f6]{visibility:visible}[data-vsbs-header][data-v-efbe17f6]{touch-action:none;box-shadow:0 1px 0 var(--vsbs-border-color, rgba(46, 59, 66, .125));flex-shrink:0;padding:20px var(--vsbs-padding-x, 16px) 8px;-webkit-user-select:none;user-select:none;z-index:3;border-top-left-radius:var(--vsbs-border-radius, 16px);border-top-right-radius:var(--vsbs-border-radius, 16px);border-top:1px solid var(--vsbs-outer-border-color, transparent)}[data-vsbs-header][data-v-efbe17f6]:before{background-color:var(--vsbs-handle-background, rgba(0, 0, 0, .28));border-radius:2px;content:"";display:block;height:4px;left:50%;position:absolute;top:8px;transform:translate(-50%);width:36px}[data-vsbs-header][data-v-efbe17f6]:empty{box-shadow:none;padding:14px var(--vsbs-padding-x, 16px) 10px}[data-vsbs-footer][data-v-efbe17f6]{touch-action:none;box-shadow:0 -1px 0 var(--vsbs-border-color, rgba(46, 59, 66, .125));flex-grow:0;flex-shrink:0;padding:16px var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}[data-vsbs-footer][data-v-efbe17f6]:empty{display:none}[data-vsbs-scroll][data-v-efbe17f6]{flex-grow:1;overflow-y:auto;overscroll-behavior:none}[data-vsbs-content][data-v-efbe17f6]{display:grid;padding:8px var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}.vsbs-backdrop-enter-active[data-v-efbe17f6],.vsbs-backdrop-leave-active[data-v-efbe17f6]{transition:opacity var(--vsbs-duration) ease}.vsbs-backdrop-enter-from[data-v-efbe17f6],.vsbs-backdrop-leave-to[data-v-efbe17f6]{opacity:0}

package/dist/utils/constants.d.ts

@@ -1,5 +1,3 @@
 export declare const SNAP_POINT_TOLERANCE_PX = 10;
 export declare const MOVEMENT_THRESHOLD_PX = 3;
 export declare const RUBBERBAND_ELASTICITY = 0.25;
-export declare const RUBBERBAND_ELASTICITY_STRONG = 0.5;
-export declare const DEFAULT_VELOCITY_THRESHOLD = 0.5;

package/dist/utils/isInteractable.d.ts

@@ -0,0 +1 @@
+export declare function isInteractable(element: Element): boolean;

package/package.json

@@ -30,7 +30,7 @@
     "url": "https://github.com/megaarmos/vue-spring-bottom-sheet/issues"
   },
   "private": false,
-  "version": "3.0.0",
+  "version": "3.1.0",
   "type": "module",
   "exports": {
     ".": {