@douxcode/vue-spring-bottom-sheet 3.0.0 → 3.2.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,24 @@ 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                                                  |
+| forceMount          | Boolean                     | false            | Force mount the bottom sheet in the DOM                                   |
+
+Interactive content inside the sheet body keeps its native touch behavior. Inputs and editable content do not start sheet dragging, and custom widgets can opt out with data-vsbs-no-drag.
 
 ## 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,12 @@ 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;
+    forceMount: boolean;
+    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,378 +1,294 @@
-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 H, shallowRef as y, computed as D, defineComponent as Ae, useCssVars as Fe, watch as A, nextTick as _, onMounted as $e, toRef as F, onUnmounted as Ve, openBlock as $, createElementBlock as ee, Fragment as ze, createBlock as fe, Teleport as ve, createElementVNode as V, createVNode as he, Transition as ge, withCtx as me, unref as f, withDirectives as pe, vShow as Se, createCommentVNode as be, normalizeStyle as Ne, normalizeClass as te, renderSlot as ne } from "vue";
+import { useScrollLock as qe, useVModel as Ke, useWindowSize as Ue, useElementBounding as U } from "@vueuse/core";
+import { useFocusTrap as We } from "@vueuse/integrations/useFocusTrap";
+function Ge(e, t, o) {
+  let a = (l) => e(l, ...t);
+  return o === void 0 ? a : Object.assign(a, { 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 Qe(e, t, o) {
+  let a = e.length - t.length;
+  if (a === 0) return e(...t);
+  if (a === 1) return Ge(e, t, o);
   throw Error("Wrong number of arguments");
 }
-function I(...t) {
-  return $e(Ne, t);
+function T(...e) {
+  return Qe(Xe, 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 Xe = (e, { min: t, max: o }) => t !== void 0 && e < t ? t : o !== void 0 && e > o ? o : e, ye = /* @__PURE__ */ Symbol("funnel/voidReducer"), je = () => ye;
+function Je(e, { triggerAt: t = "end", minQuietPeriodMs: o, maxBurstDurationMs: a, minGapMs: l, reducer: u = je }) {
+  let i, v, d, h, p = () => {
+    let m = d;
+    m !== void 0 && (d = void 0, m === ye ? e() : e(m), l !== void 0 && (v = setTimeout(P, l)));
+  }, P = () => {
+    clearTimeout(v), v = void 0, i === void 0 && p();
+  }, C = () => {
+    clearTimeout(i), i = void 0, h = void 0, v === void 0 && p();
   };
-  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);
+  return { call: (...m) => {
+    let k = i === void 0 && v === void 0;
+    if ((t !== "start" || k) && (d = u(d, ...m)), !(i === void 0 && !k)) {
+      if (o !== void 0 || a !== void 0 || l === void 0) {
+        clearTimeout(i);
+        let E = Date.now();
+        h ??= E;
+        let M = a === void 0 ? o ?? 0 : Math.min(o ?? a, Math.max(0, a - (E - h)));
+        i = setTimeout(C, M);
       }
-      a !== "end" && w && v();
+      t !== "end" && k && p();
     }
   }, cancel: () => {
-    clearTimeout(r), r = void 0, b = void 0, clearTimeout(p), p = void 0, f = void 0;
+    clearTimeout(i), i = void 0, h = void 0, clearTimeout(v), v = void 0, d = void 0;
   }, flush: () => {
-    h(), d();
+    C(), P();
   }, get isIdle() {
-    return r === void 0 && p === void 0;
+    return i === void 0 && v === 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 Ze = 5, _e = 30, et = 400;
+function tt() {
+  const e = H([]);
+  function t(l) {
+    e.value = [{ y: l, time: performance.now() }];
+  }
+  function o(l) {
+    const u = e.value;
+    u.push({ y: l, time: performance.now() }), u.length > Ze && u.shift();
+  }
+  function a() {
+    const l = e.value;
+    if (l.length < 2)
+      return { direction: "none", velocity: 0, isSwipe: !1 };
+    const u = l[0], i = l[l.length - 1];
+    if (!u || !i)
+      return { direction: "none", velocity: 0, isSwipe: !1 };
+    const v = u.y - i.y, d = (i.time - u.time) / 1e3, h = d > 0 ? Math.abs(v) / d : 0, p = Math.abs(v) >= _e && h >= et;
+    let P = "none";
+    return p && (P = v > 0 ? "up" : "down"), e.value = [], { direction: P, velocity: h, isSwipe: p };
+  }
+  return { start: t, update: o, end: a };
 }
-function qe(t, a, u) {
-  return Math.max(a, Math.min(t, u));
+function nt(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 at = 10, we = 0.25;
+function Pe(e) {
+  return !!e.closest(
+    'input, textarea, [contenteditable="true"], [contenteditable=""], [data-vsbs-no-drag]'
+  );
 }
-function we(t, a, u) {
-  return a === 0 || Math.abs(a) === 1 / 0 ? ze(t, u) : t * a * u / (a + u * t);
+function ot(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 rt(e, t) {
+  return Math.pow(e, t * 5);
 }
-function ae(t, a) {
-  return typeof t == "number" ? I(t, { max: a }) : Te(t, a);
+function Ce(e, t, o) {
+  return t === 0 || Math.abs(t) === 1 / 0 ? rt(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 ke(e, t, o, a = 0.15) {
+  return a === 0 ? ot(e, t, o) : e < t ? -Ce(t - e, o - t, a) + t : e > o ? +Ce(e - o, o - t, a) + 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 lt = (e) => {
+  const t = tt(), o = y(!1);
+  let a = !0, l = 0, u = 0, i = !1, v = 0, d = !1, h = 0;
+  const p = (n) => {
+    n > 0 ? e.onDraggingDown?.() : n < 0 && e.onDraggingUp?.();
+  }, P = () => {
+    if (i) return;
+    const n = document.activeElement;
+    n instanceof HTMLElement && n !== document.body && (n.blur(), i = !0);
+  }, C = (n) => {
+    const g = n.target;
+    g && Pe(g) && n.preventDefault(), typeof n.cancelable != "boolean" || n.cancelable ? a && n.preventDefault() : console.warn("The following event couldn't be canceled:");
+  }, m = (n, g) => {
+    const b = g === "header" ? e.sheetHeaderRef.value : e.sheetFooterRef.value;
+    b && n.button === 0 && (l = e.height.value, u = e.translateY.value, i = !1, h = 0, d = !1, a = !0, o.value = !0, t.start(n.clientY), b.setPointerCapture(n.pointerId));
+  }, k = (n) => {
+    const g = n.target;
+    e.sheetContentRef.value && n.button === 0 && e.expandOnContentDrag.value !== !1 && (g && Pe(g) || (l = e.height.value, u = e.translateY.value, v = n.clientY, i = !1, h = 0, d = !1, a = !0, o.value = !0, t.start(n.clientY), e.sheetContentRef.value.setPointerCapture(n.pointerId)));
+  }, E = (n) => {
+    if (o.value) {
+      if (Math.abs(n.movementY) > 0 && P(), t.update(n.clientY), p(n.movementY), e.translateY.value > 0) {
+        e.canSwipeClose.value ? e.translateY.value = e.translateY.value + n.movementY : (u = u + n.movementY, e.translateY.value = ke(
+          u,
+          -e.minSnapPoint.value,
+          0,
+          we
+        ));
         return;
       }
-    } else
-      n.value = 0;
-    if (n.value === e.value) {
-      n.value = 0, x();
-      return;
+      l = T(l - n.movementY, {
+        min: e.minSnapPoint.value
+      }), e.height.value = ke(
+        l,
+        0,
+        e.maxSnapPoint.value,
+        we
+      ), e.height.value <= e.minSnapPoint.value && (e.translateY.value = e.translateY.value + n.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;
+  }, M = (n) => {
+    if (h >= 2)
+      return;
+    const g = e.sheetScrollRef.value, b = g?.scrollTop === 0, w = n.clientY - v > 0, S = e.flattenedSnapPoints.value.length === 1, N = 0.5 > Math.abs(e.height.value - e.maxSnapPoint.value), R = (g?.scrollHeight ?? 0) > (g?.clientHeight ?? 0);
+    if (S) {
+      if (!e.expandOnContentDrag.value) {
+        a = !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 && (a = !0), e.translateY.value === 0 && b && !w && (a = !1);
+    } else
+      a = !0, N && (w && b && (a = !0), !w && b && (a = !1), b || (a = !1));
+    d = !R, h++;
+  }, B = (n) => {
+    if (!o.value || !e.sheetScrollRef.value || (Math.abs(n.movementY) > 0 && P(), M(n), h <= 1)) return;
+    if (t.update(n.clientY), p(n.movementY), e.translateY.value > 0) {
+      e.canSwipeClose.value && (e.translateY.value = T(e.translateY.value + n.movementY, { min: 0 }));
       return;
     }
-    if (!C.value) {
-      S.value = !1;
+    e.height.value = T(e.height.value - n.movementY, {
+      min: e.minSnapPoint.value,
+      max: e.maxSnapPoint.value
+    }), !(e.flattenedSnapPoints.value.length === 1) && e.height.value === e.maxSnapPoint.value && (a = !1), e.height.value <= e.minSnapPoint.value && (e.translateY.value = T(e.translateY.value + n.movementY, {
+      min: 0,
+      ...e.canSwipeClose.value === !1 ? { max: 0 } : {}
+    }));
+  }, z = () => {
+    const n = t.end();
+    if (n.isSwipe && n.direction === "down" && e.canSwipeClose.value && e.height.value <= e.minSnapPoint.value + at) {
+      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 g = nt(
+        e.swipeCloseThreshold.value,
+        e.height.value
+      );
+      if (e.translateY.value > g) {
+        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 (n.isSwipe && e.flattenedSnapPoints.value.length > 1) {
+      const g = [...e.flattenedSnapPoints.value].sort((w, S) => w - S);
+      let b = e.closestSnapPointIndex.value;
+      if (n.direction === "up") {
+        const w = g.find((S) => S > e.height.value + 1);
+        w !== void 0 && (b = e.flattenedSnapPoints.value.indexOf(w));
+      } else if (n.direction === "down") {
+        const w = [...g].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();
+    isDragging: o,
+    handleSheetScroll: C,
+    handlePointerDown: m,
+    handleContentPointerDown: k,
+    handlePointerMove: E,
+    handleContentPointerMove: B,
+    handleLostPointerCapture: (n, g) => {
+      o.value = !1, g === "header" ? e.sheetHeaderRef.value?.releasePointerCapture(n.pointerId) : g === "footer" ? e.sheetFooterRef.value?.releasePointerCapture(n.pointerId) : e.sheetContentRef.value?.releasePointerCapture(n.pointerId), h = 0, d = !1, i = !1, z();
     },
-    unlockIfBlocking: () => {
-      a.value && i();
-    },
-    touchStartHandler: () => {
-      a.value || n();
-    },
-    touchEndHandler: () => {
-      a.value || i();
+    handleTouchStart: (n) => {
+      d && n.preventDefault();
     }
   };
-}
-function Je(t) {
-  const { sheetRef: a, backdropRef: u, blocking: e, onEscape: n } = t, i = P(null), r = Ae([a, u], {
+};
+function st(e) {
+  const { sheetRef: t, backdropRef: o, blocking: a, onEscape: l } = e, u = H(null), i = We([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
+  }), v = (m) => {
+    m.key === "Escape" && l();
+  }, d = () => {
+    t.value && (u.value = new MutationObserver((m) => {
+      for (const k of m)
+        k.type === "attributes" && k.attributeName === "aria-expanded" && (k.target.getAttribute("aria-expanded") === "true" ? i.pause() : t.value?.querySelector('[aria-expanded="true"]') || i.unpause());
+    }), u.value.observe(t.value, {
       attributes: !0,
       attributeFilter: ["aria-expanded"],
       subtree: !0
     }));
-  }, b = () => {
-    i.value && (i.value.disconnect(), i.value = null);
+  }, h = () => {
+    u.value && (u.value.disconnect(), u.value = null);
   };
   return {
     activate: () => {
-      e.value && (r.activate(), f()), window.addEventListener("keydown", p);
+      a.value && (i.activate(), d()), window.addEventListener("keydown", v);
     },
     deactivate: () => {
-      window.removeEventListener("keydown", p), b(), e.value && r.deactivate();
+      window.removeEventListener("keydown", v), h(), a.value && i.deactivate();
     },
     cleanup: () => {
-      b(), r.deactivate();
+      h(), i.deactivate();
     }
   };
 }
-const Ze = ["data-vsbs-shadow", "data-vsbs-sheet-show"], et = /* @__PURE__ */ ye({
+function ut(e) {
+  const { blocking: t } = e, o = qe(document.documentElement), a = () => {
+    o.value = !0;
+  }, l = () => {
+    o.value = !1;
+  };
+  return {
+    lock: a,
+    unlock: l,
+    lockIfBlocking: () => {
+      t.value && a();
+    },
+    unlockIfBlocking: () => {
+      t.value && l();
+    },
+    touchStartHandler: () => {
+      t.value || a();
+    },
+    touchEndHandler: () => {
+      t.value || l();
+    }
+  };
+}
+function Te(e, t) {
+  const o = parseFloat(e);
+  return t * o / 100;
+}
+function it(e, t, o) {
+  const a = H(0), l = D(() => e.value.map((d) => typeof d == "string" ? Te(d, o.value) : d)), u = D(() => Math.min(...l.value)), i = D(() => Math.max(...l.value)), v = D(() => {
+    const d = l.value.reduce(
+      (h, p) => Math.abs(p - t.value) < Math.abs(h - t.value) ? p : h
+    );
+    return l.value.indexOf(d);
+  });
+  return {
+    currentSnapPointIndex: a,
+    flattenedSnapPoints: l,
+    minSnapPoint: u,
+    maxSnapPoint: i,
+    closestSnapPointIndex: v
+  };
+}
+function xe(e, t) {
+  return typeof e == "number" ? T(e, { max: t }) : Te(e, t);
+}
+const ct = ["data-vsbs-shadow", "data-vsbs-sheet-show"], dt = /* @__PURE__ */ Ae({
   __name: "BottomSheet",
   props: {
     duration: { default: 250 },
     snapPoints: {},
     initialSnapPoint: {},
     blocking: { type: Boolean, default: !0 },
+    forceMount: { type: Boolean, default: !1 },
     canSwipeClose: { type: Boolean, default: !0 },
     swipeCloseThreshold: {},
     canBackdropClose: { type: Boolean, default: !0 },
@@ -385,213 +301,259 @@ 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 }) {
+    Fe((s) => ({
+      v5acd7ef8: b.value
     }));
-    const e = t, n = u, i = Re(e, "modelValue", n, {
+    const a = e, l = o, u = Ke(a, "modelValue", l, {
       passive: !0
     });
-    te(i, (l) => {
-      l ? Q() : N();
-    }), De(() => {
-      i.value && Q();
+    A(u, (s) => {
+      s ? j() : L();
+    }), A(u, async (s) => {
+      if (!s) {
+        C.value = 0;
+        return;
+      }
+      await _(), Y();
+    }), $e(() => {
+      He(), u.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 i = y(null), v = y(null), d = y(null), h = y(null), p = y(null), P = y(null), C = H(0), { height: m } = Ue(), { height: k } = U(i), { height: E } = U(v), { height: M } = U(p), { height: B } = U(d), z = D(() => T(
+      Math.ceil(M.value + E.value + B.value),
+      { max: m.value }
+    )), ae = (s, r, c) => {
+      E.value = s, M.value = r, B.value = c;
+    }, x = H(0), n = H(0), g = D(() => T(x.value + C.value, {
+      max: m.value
+    })), b = D(() => a.duration + "ms"), w = F(() => a.snapPoints), S = D(() => w.value ?? [z.value]), {
+      flattenedSnapPoints: N,
+      currentSnapPointIndex: R,
+      closestSnapPointIndex: Ee,
+      minSnapPoint: W,
+      maxSnapPoint: Ye
+    } = it(S, x, m), oe = F(() => a.blocking), De = F(() => a.canSwipeClose), Me = F(() => a.swipeCloseThreshold), Re = F(() => a.expandOnContentDrag), I = ut({ blocking: oe }), G = st({
+      sheetRef: i,
+      backdropRef: P,
+      blocking: oe,
+      onEscape: () => L()
+    }), Q = y(!1), X = y(!1), Ie = () => {
+      a.canBackdropClose && L();
+    }, Y = () => {
+      const s = window.visualViewport;
+      if (!s || !u.value) {
+        C.value = 0;
+        return;
+      }
+      const r = Math.max(0, window.innerHeight - s.height - s.offsetTop);
+      C.value = Math.round(r);
+    };
+    let re = null;
+    const He = () => {
+      const s = window.visualViewport;
+      s && (s.addEventListener("resize", Y), s.addEventListener("scroll", Y), window.addEventListener("resize", Y), re = () => {
+        s.removeEventListener("resize", Y), s.removeEventListener("scroll", Y), window.removeEventListener("resize", Y);
+      });
+    }, j = async () => {
+      if (Q.value) return;
+      u.value = !0, Q.value = !0, l("opening-started"), I.lockIfBlocking(), await _(), Y();
+      const s = i.value;
+      k.value = s.getBoundingClientRect().height;
+      const r = s.querySelector("[data-vsbs-content]"), c = s.querySelector("[data-vsbs-header]"), K = s.querySelector("[data-vsbs-footer]");
+      if (ae(
+        c.getBoundingClientRect().height,
+        r.getBoundingClientRect().height,
+        K.getBoundingClientRect().height
+      ), await _(), R.value = N.value.findIndex(
+        (O) => O === W.value
+      ), a.initialSnapPoint !== void 0) {
+        const O = a.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;
+        x.value = xe(de, m.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) {
+        x.value = T(W.value, { max: m.value });
+      n.value = x.value, requestAnimationFrame(() => {
+        n.value = 0, a.blocking && setTimeout(() => {
+          u.value && (l("opened"), G.activate());
+        }, a.duration);
+      }), Q.value = !1;
+    }, L = () => {
+      X.value || (u.value = !1, X.value = !0, l("closing-started"), I.unlockIfBlocking(), G.deactivate(), n.value = x.value, setTimeout(() => {
+        l("closed"), X.value = !1;
+      }, a.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
+      R.value = s;
+      const r = S.value[s];
+      r && (x.value = xe(r, m.value), l("snapped", S.value.indexOf(r)));
+    }, {
+      isDragging: Be,
+      handleSheetScroll: le,
+      handlePointerDown: se,
+      handleContentPointerDown: ue,
+      handlePointerMove: q,
+      handleContentPointerMove: ie,
+      handleLostPointerCapture: Z,
+      handleTouchStart: ce
+    } = lt({
+      sheetHeaderRef: v,
+      sheetFooterRef: d,
+      sheetContentRef: p,
+      sheetScrollRef: h,
+      height: x,
+      translateY: n,
+      minSnapPoint: W,
+      maxSnapPoint: Ye,
+      closestSnapPointIndex: Ee,
+      flattenedSnapPoints: N,
+      canSwipeClose: De,
+      expandOnContentDrag: Re,
+      swipeCloseThreshold: Me,
+      onClose: L,
+      onSnapToPoint: J,
+      onDraggingUp: () => l("dragging-up"),
+      onDraggingDown: () => l("dragging-down")
+    }), Le = Je((s) => J(s), {
+      minQuietPeriodMs: a.duration,
+      reducer: (s, r) => r
     });
-    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, r) => {
+      if (u.value === !1 || !s || !r) return;
+      const c = s[R.value], K = r[R.value];
+      !c || typeof c == "string" || !K || typeof K == "string" || (x.value = T(c, { max: m.value }));
+    }), A(m, () => {
+      Le.call(R.value);
+    }), A(z, (s) => {
+      l("instinctHeight", s);
+    }), Ve(() => {
+      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 Oe = (s) => {
+      const r = s;
+      r.style.transition = `transform ${a.duration}ms ease, height ${a.duration}ms ease`, r.style.transform = `translateY(${g.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: L, snapToPoint: J }), (s, r) => ($(), ee(ze, 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(() => [
+              e.forceMount || f(u) && e.blocking ? pe(($(), ee("div", {
+                key: 0,
+                ref_key: "backdrop",
+                ref: P,
+                "data-vsbs-backdrop": "",
+                onClick: r[0] || (r[0] = (c) => Ie())
+              }, null, 512)), [
+                [Se, f(u) && e.blocking]
+              ]) : be("", !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: Oe
         }, {
-          default: Se(() => [
-            E(i) ? (X(), ie("div", {
+          default: me(() => [
+            e.forceMount || f(u) ? pe(($(), 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: i,
+              style: Ne({
+                transform: `translateY(${n.value}px)`,
+                height: `${g.value}px`,
+                paddingBottom: `${C.value}px`,
+                transition: f(Be) ? "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": f(u),
               "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: r[12] || (r[12] = //@ts-ignore
+              (...c) => f(I).touchStartHandler && f(I).touchStartHandler(...c)),
+              onTouchend: r[13] || (r[13] = //@ts-ignore
+              (...c) => f(I).touchEndHandler && f(I).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: v,
+                "data-vsbs-header": "",
+                class: te(e.headerClass),
+                onPointerdown: r[1] || (r[1] = (c) => f(se)(c, "header")),
+                onPointermove: r[2] || (r[2] = //@ts-ignore
+                (...c) => f(q) && f(q)(...c)),
+                onLostpointercapture: r[3] || (r[3] = (c) => f(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: r[4] || (r[4] = //@ts-ignore
+                (...c) => f(ce) && f(ce)(...c)),
+                onTouchmove: r[5] || (r[5] = //@ts-ignore
+                (...c) => f(le) && f(le)(...c)),
+                onPointerdown: r[6] || (r[6] = //@ts-ignore
+                (...c) => f(ue) && f(ue)(...c)),
+                onPointermove: r[7] || (r[7] = //@ts-ignore
+                (...c) => f(ie) && f(ie)(...c)),
+                onLostpointercapture: r[8] || (r[8] = (c) => f(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: p,
+                  "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: r[9] || (r[9] = (c) => f(se)(c, "footer")),
+                onPointermove: r[10] || (r[10] = //@ts-ignore
+                (...c) => f(q) && f(q)(...c)),
+                onLostpointercapture: r[11] || (r[11] = (c) => f(Z)(c, "footer"))
+              }, [
+                ne(s.$slots, "footer", {}, void 0, !0)
+              ], 34)
+            ], 44, ct)), [
+              [Se, f(u)]
+            ]) : be("", !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"]]);
+}), ft = (e, t) => {
+  const o = e.__vccOpts || e;
+  for (const [a, l] of t)
+    o[a] = l;
+  return o;
+}, mt = /* @__PURE__ */ ft(dt, [["__scopeId", "data-v-1fe5991a"]]);
 export {
-  lt as default
+  mt 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-1fe5991a]{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(--v5acd7ef8)}[data-vsbs-shadow=true][data-v-1fe5991a]: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-1fe5991a]{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-1fe5991a]{visibility:visible}[data-vsbs-header][data-v-1fe5991a]{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-1fe5991a]: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-1fe5991a]:empty{box-shadow:none;padding:14px var(--vsbs-padding-x, 16px) 10px}[data-vsbs-footer][data-v-1fe5991a]{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-1fe5991a]:empty{display:none}[data-vsbs-scroll][data-v-1fe5991a]{flex-grow:1;overflow-y:auto;overscroll-behavior:none}[data-vsbs-content][data-v-1fe5991a]{display:grid;padding:8px var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}.vsbs-backdrop-enter-active[data-v-1fe5991a],.vsbs-backdrop-leave-active[data-v-1fe5991a]{transition:opacity var(--vsbs-duration) ease}.vsbs-backdrop-enter-from[data-v-1fe5991a],.vsbs-backdrop-leave-to[data-v-1fe5991a]{opacity:0}

package/dist/types.d.ts

@@ -4,6 +4,7 @@ export interface BottomSheetProps {
     snapPoints?: Array<number | `${number}%`>;
     initialSnapPoint?: number;
     blocking?: boolean;
+    forceMount?: boolean;
     canSwipeClose?: boolean;
     swipeCloseThreshold?: string | number;
     canBackdropClose?: boolean;

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.2.0",
   "type": "module",
   "exports": {
     ".": {