@douxcode/vue-spring-bottom-sheet 2.3.0 → 2.4.1

package/README.md

@@ -143,6 +143,9 @@ For Nuxt 3, just wrap component in `<ClientOnly>`
 | expandOnContentDrag | Boolean                   | true             | Enable expanding by dragging content           |
 | teleprtTo           | 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
 
@@ -156,14 +159,16 @@ Assuming there is `const bottomSheet = ref()`
 
 ## Events
 
-| Event          | Description                            | Payload                 |
-| -------------- | -------------------------------------- | ----------------------- |
-| opened         | Emitted when sheet finishes opening    | -                       |
-| closed         | Emitted when sheet finishes closing    | -                       |
-| dragging-up    | Emitted when user drags sheet upward   | -                       |
-| dragging-down  | Emitted when user drags sheet downward | -                       |
-| instinctHeight | Emitted when content height changes    | height (number)         |
-| snapped        | Emitted when sheet finishes snapping   | snapPointIndex (number) |
+| Event           | Description                            | Payload                 |
+| --------------  | -------------------------------------- | ----------------------- |
+| opened          | Emitted when sheet finishes opening    | -                       |
+| opening-started | Emitted when sheet starts opening      | -                       |
+| closed          | Emitted when sheet finishes closing    | -                       |
+| closing-started | Emitted when sheet starts closing      | -                       |
+| dragging-up     | Emitted when user drags sheet upward   | -                       |
+| dragging-down   | Emitted when user drags sheet downward | -                       |
+| instinctHeight  | Emitted when content height changes    | height (number)         |
+| snapped         | Emitted when sheet finishes snapping   | snapPointIndex (number) |
 
 ## Acknowledgments
 

package/dist/BottomSheet.d.ts

@@ -22,24 +22,12 @@ declare const __VLS_component: import('vue').DefineComponent<BottomSheetProps, {
     open: () => Promise<void>;
     close: () => void;
     snapToPoint: (index: number) => void;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-    opened: () => any;
-    closed: () => any;
-    ready: () => any;
-    "dragging-up": () => any;
-    "dragging-down": () => any;
-    snapped: (snapPointIndex?: number | undefined) => any;
-    instinctHeight: (instinctHeight: number) => any;
-    "update:modelValue": () => any;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    [x: string]: any;
+} & {
+    [x: string]: any;
 }, string, import('vue').PublicProps, Readonly<BottomSheetProps> & Readonly<{
-    onOpened?: (() => any) | undefined;
-    onClosed?: (() => any) | undefined;
-    onReady?: (() => any) | undefined;
-    "onDragging-up"?: (() => any) | undefined;
-    "onDragging-down"?: (() => any) | undefined;
-    onSnapped?: ((snapPointIndex?: number | undefined) => any) | undefined;
-    onInstinctHeight?: ((instinctHeight: number) => any) | undefined;
-    "onUpdate:modelValue"?: (() => any) | undefined;
+    [x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
 }>, {
     duration: number;
     blocking: boolean;

package/dist/index.mjs

@@ -1,15 +1,15 @@
-import { ref as P, computed as _, defineComponent as Me, watch as q, onMounted as Oe, toRefs as Be, nextTick as N, onUnmounted as Ie, createBlock as Z, openBlock as ee, Teleport as Ee, createElementVNode as te, createVNode as $, unref as m, withCtx as E, createCommentVNode as pe, normalizeStyle as _e, normalizeClass as ae, renderSlot as ne } from "vue";
-import { useMotionValue as he, animate as B, AnimatePresence as ge, Motion as A } from "motion-v";
-import { useVModel as De, useWindowSize as He, useElementBounding as Q, useScrollLock as me } from "@vueuse/core";
-import { useFocusTrap as Ve } from "@vueuse/integrations/useFocusTrap";
+import { ref as P, computed as _, defineComponent as Be, watch as q, onMounted as Ie, toRefs as Ee, nextTick as N, onUnmounted as _e, createBlock as te, openBlock as ae, Teleport as De, createElementVNode as ne, createVNode as A, unref as m, withCtx as E, createCommentVNode as ge, normalizeStyle as He, normalizeClass as oe, renderSlot as le } from "vue";
+import { useMotionValue as me, animate as B, AnimatePresence as be, Motion as $ } from "motion-v";
+import { useVModel as Ve, useWindowSize as Fe, useElementBounding as Q, useScrollLock as ye } from "@vueuse/core";
+import { useFocusTrap as Re } from "@vueuse/integrations/useFocusTrap";
 function G(n, a) {
   const o = parseFloat(n);
   return a * o / 100;
 }
-function Re(n, a, o) {
+function Ae(n, a, o) {
   const t = P(0), s = _(() => n.value.map((p) => typeof p == "string" ? G(p, o.value) : p)), y = _(() => Math.min(...s.value)), r = _(() => Math.max(...s.value)), h = _(() => {
     const p = s.value.reduce(
-      (g, x) => Math.abs(x - a.value) < Math.abs(g - a.value) ? x : g
+      (g, M) => Math.abs(M - a.value) < Math.abs(g - a.value) ? M : g
     );
     return s.value.indexOf(p);
   });
@@ -21,36 +21,36 @@ function Re(n, a, o) {
     closestSnapPointIndex: h
   };
 }
-function Fe(n, a, o) {
+function $e(n, a, o) {
   let t = (s) => n(s, ...a);
   return o === void 0 ? t : Object.assign(t, { lazy: o, lazyArgs: a });
 }
-function $e(n, a, o) {
+function We(n, a, o) {
   let t = n.length - a.length;
   if (t === 0) return n(...a);
-  if (t === 1) return Fe(n, a, o);
+  if (t === 1) return $e(n, a, o);
   throw new Error("Wrong number of arguments");
 }
-function Ae(n, { triggerAt: a = "end", minQuietPeriodMs: o, maxBurstDurationMs: t, minGapMs: s, reducer: y = We }) {
-  let r, h, p, g, x = () => {
+function je(n, { triggerAt: a = "end", minQuietPeriodMs: o, maxBurstDurationMs: t, minGapMs: s, reducer: y = ze }) {
+  let r, h, p, g, M = () => {
     let i = p;
     i !== void 0 && (p = void 0, n(i), s !== void 0 && (h = setTimeout(D, s)));
   }, D = () => {
-    clearTimeout(h), h = void 0, r === void 0 && x();
+    clearTimeout(h), h = void 0, r === void 0 && M();
   }, H = () => {
-    clearTimeout(r), r = void 0, g = void 0, h === void 0 && x();
+    clearTimeout(r), r = void 0, g = void 0, h === void 0 && M();
   };
   return { call: (...i) => {
     let c = r === void 0 && h === void 0;
     if ((a !== "start" || c) && (p = y(p, ...i)), !(r === void 0 && !c)) {
       if (o !== void 0 || t !== void 0 || s === void 0) {
         clearTimeout(r);
-        let k = Date.now();
-        g ?? (g = k);
-        let W = t === void 0 ? o ?? 0 : Math.min(o ?? t, t - (k - g));
+        let C = Date.now();
+        g ?? (g = C);
+        let W = t === void 0 ? o ?? 0 : Math.min(o ?? t, t - (C - g));
         r = setTimeout(H, W);
       }
-      a !== "end" && c && x();
+      a !== "end" && c && M();
     }
   }, cancel: () => {
     clearTimeout(r), r = void 0, g = void 0, clearTimeout(h), h = void 0, p = void 0;
@@ -60,24 +60,24 @@ function Ae(n, { triggerAt: a = "end", minQuietPeriodMs: o, maxBurstDurationMs:
     return r === void 0 && h === void 0;
   } };
 }
-var We = () => "";
+var ze = () => "";
 function b(...n) {
-  return $e(ze, n);
+  return We(Le, n);
 }
-var ze = (n, { min: a, max: o }) => a !== void 0 && n < a ? a : o !== void 0 && n > o ? o : n;
-function Le(n, a, o) {
+var Le = (n, { min: a, max: o }) => a !== void 0 && n < a ? a : o !== void 0 && n > o ? o : n;
+function qe(n, a, o) {
   return Math.max(a, Math.min(n, o));
 }
-function je(n, a) {
+function Ne(n, a) {
   return Math.pow(n, a * 5);
 }
-function be(n, a, o) {
-  return a === 0 || Math.abs(a) === 1 / 0 ? je(n, o) : n * a * o / (a + o * n);
+function Se(n, a, o) {
+  return a === 0 || Math.abs(a) === 1 / 0 ? Ne(n, o) : n * a * o / (a + o * n);
 }
-function oe(n, a, o, t = 0.15) {
-  return t === 0 ? Le(n, a, o) : n < a ? -be(a - n, o - a, t) + a : n > o ? +be(n - o, o - a, t) + o : n;
+function ue(n, a, o, t = 0.15) {
+  return t === 0 ? qe(n, a, o) : n < a ? -Se(a - n, o - a, t) + a : n > o ? +Se(n - o, o - a, t) + o : n;
 }
-const qe = { "data-vsbs-container": "" }, Ne = /* @__PURE__ */ Me({
+const Qe = { "data-vsbs-container": "" }, Ge = /* @__PURE__ */ Be({
   __name: "BottomSheet",
   props: {
     duration: { default: 250 },
@@ -94,89 +94,97 @@ const qe = { "data-vsbs-container": "" }, Ne = /* @__PURE__ */ Me({
     contentClass: {},
     footerClass: {}
   },
-  emits: ["opened", "closed", "ready", "dragging-up", "dragging-down", "snapped", "instinctHeight", "update:modelValue"],
+  emits: ["opened", "opening-started", "closed", "closing-started", "ready", "dragging-up", "dragging-down", "snapped", "instinctHeight", "update:modelValue"],
   setup(n, { expose: a, emit: o }) {
-    const t = n, s = o, y = De(t, "modelValue", s, {
+    const t = n, s = o, y = Ve(t, "modelValue", s, {
       passive: !0
     });
     q(y, (e) => {
-      e && J();
-    }), Oe(() => {
-      y.value && J();
+      e && X();
+    }), Ie(() => {
+      y.value && X();
     });
-    const r = P(), h = P(null), p = P(null), g = P(null), x = P(null), D = P(null), H = P(null), i = P(t.expandOnContentDrag), { height: c } = He(), { height: k } = Q(r), { height: W } = Q(h), { height: le } = Q(D), { height: ue } = Q(p), K = _({
+    const r = P(), h = P(null), p = P(null), g = P(null), M = P(null), D = P(null), H = P(null), i = P(t.expandOnContentDrag), { height: c } = Fe(), { height: C } = Q(r), { height: W } = Q(h), { height: se } = Q(D), { height: re } = Q(p), K = _({
       get() {
         return b(
-          Math.ceil(le.value + W.value + ue.value),
+          Math.ceil(se.value + W.value + re.value),
           {
             max: c.value
           }
         );
       },
       set(e) {
-        [W.value, le.value, ue.value] = e;
+        [W.value, se.value, re.value] = e;
       }
-    }), l = P(0), v = P(0), C = he(0), S = he(0), { snapPoints: ye } = Be(t), d = _(() => ye.value ?? [K.value]), {
+    }), l = P(0), v = P(0), k = me(0), S = me(0), { snapPoints: Pe } = Ee(t), d = _(() => Pe.value ?? [K.value]), {
       flattenedSnapPoints: U,
       currentSnapPointIndex: I,
       closestSnapPointIndex: V,
       minSnapPoint: O,
-      maxSnapPoint: R
-    } = Re(d, l, c);
-    let M;
-    const z = me(document.body), L = me(document.documentElement), Y = Ve([r, H], {
+      maxSnapPoint: F
+    } = Ae(d, l, c);
+    let w;
+    const j = ye(document.body), z = ye(document.documentElement), Y = Re([r, H], {
       immediate: !1,
       fallbackFocus: () => r.value || document.body
     });
-    function se(e) {
-      i.value = !0, re(e);
+    function ie(e) {
+      i.value = !0, ve(e);
     }
-    function re(e) {
+    function ve(e) {
       i.value && e.preventDefault();
     }
-    const ie = (e) => {
-      e.key === "Escape" && j();
-    }, Se = () => {
-      t.canBackdropClose && j();
-    }, J = async () => {
-      y.value = !0, t.blocking && (z.value = !0, L.value = !0), await N();
+    const de = (e) => {
+      e.key === "Escape" && L();
+    }, Ce = () => {
+      t.canBackdropClose && L();
+    };
+    let J = !1;
+    const X = async () => {
+      if (J) return;
+      y.value = !0, J = !0, s("opening-started"), t.blocking && (j.value = !0, z.value = !0), await N();
       const e = r.value.$el;
-      k.value = e.getBoundingClientRect().height;
-      const u = e.querySelector("[data-vsbs-content]"), f = e.querySelector("[data-vsbs-header]"), w = e.querySelector("[data-vsbs-footer]");
+      C.value = e.getBoundingClientRect().height;
+      const u = e.querySelector("[data-vsbs-content]"), f = e.querySelector("[data-vsbs-header]"), T = e.querySelector("[data-vsbs-footer]");
       if (K.value = [
         f.getBoundingClientRect().height,
         u.getBoundingClientRect().height,
-        w.getBoundingClientRect().height
+        T.getBoundingClientRect().height
       ], await N(), I.value = U.value.findIndex(
-        (T) => T === O.value
+        (x) => x === O.value
       ), t.initialSnapPoint) {
-        const T = t.initialSnapPoint;
-        if (T < 0 || T >= d.value.length) {
+        const x = t.initialSnapPoint;
+        if (x < 0 || x >= d.value.length) {
           console.warn("Index out of bounds");
           return;
         }
-        let F;
-        typeof d.value[T] == "number" ? F = b(d.value[T], {
+        let R;
+        typeof d.value[x] == "number" ? R = b(d.value[x], {
           max: c.value
-        }) : F = G(d.value[T], c.value), l.value = F;
+        }) : R = G(d.value[x], c.value), l.value = R;
       } else
         l.value = b(O.value, {
           max: c.value
         });
-      v.value = l.value, C.set(l.value), S.set(l.value), M = B(C, l.value, {
-        duration: t.duration / 1e3,
-        ease: "easeInOut"
-      }), M = B(S, 0, {
-        duration: t.duration / 1e3,
-        ease: "easeInOut"
-      }), window.addEventListener("keydown", ie), t.blocking && setTimeout(() => {
-        C.get() < 1 && (s("opened"), Y.activate());
-      }, t.duration);
-    }, j = () => {
-      y.value = !1, t.blocking && (z.value = !1, L.value = !1), window.removeEventListener("keydown", ie), t.blocking && Y.deactivate(), setTimeout(() => {
-        s("closed");
-      }, t.duration);
-    }, ve = (e) => {
+      v.value = l.value, k.jump(l.value), S.jump(l.value), requestAnimationFrame(() => {
+        w = B(k, l.value, {
+          duration: t.duration / 1e3,
+          ease: "easeInOut"
+        }), w = B(S, 0, {
+          duration: t.duration / 1e3,
+          ease: "easeInOut",
+          onComplete: () => {
+            t.blocking && (s("opened"), Y.activate());
+          }
+        });
+      }), window.addEventListener("keydown", de), J = !1;
+    };
+    let Z = !1;
+    const L = () => {
+      Z || (y.value = !1, Z = !0, s("closing-started"), t.blocking && (j.value = !1, z.value = !1), window.removeEventListener("keydown", de), t.blocking && Y.deactivate(), setTimeout(() => {
+        s("closed"), Z = !1;
+      }, t.duration));
+    }, ce = (e) => {
       if (!d.value) return;
       if (e < 0 || e >= d.value.length) {
         console.warn("Index out of bounds");
@@ -186,119 +194,119 @@ const qe = { "data-vsbs-container": "" }, Ne = /* @__PURE__ */ Me({
       let u;
       typeof d.value[e] == "number" ? u = b(d.value[e], {
         max: c.value
-      }) : u = G(d.value[e], c.value), l.value = u, M = B(C, l.value, {
+      }) : u = G(d.value[e], c.value), l.value = u, w = B(k, l.value, {
         duration: t.duration / 1e3,
         ease: "easeInOut",
         onComplete: () => s("snapped", d.value.indexOf(d.value[e]))
       });
     };
-    function de(e) {
+    function fe(e) {
       e > 0 ? s("dragging-down") : e < 0 && s("dragging-up");
     }
-    const ce = () => {
-      l.value = k.value, v.value = S.get(), C.jump(l.value), S.jump(v.value);
-    }, fe = async (e, u) => {
+    const pe = () => {
+      l.value = C.value, v.value = S.get(), k.jump(l.value), S.jump(v.value);
+    }, he = async (e, u) => {
       await N(), r.value && (v.value <= 0 && (l.value -= u.delta.y), l.value <= O.value && (l.value = O.value, v.value += u.delta.y, S.set(
-        t.canSwipeClose ? b(v.value, { min: 0 }) : b(oe(v.value, -k.value, 0, 0.5), {
+        t.canSwipeClose ? b(v.value, { min: 0 }) : b(ue(v.value, -C.value, 0, 0.5), {
           min: 0
         })
-      )), C.set(
-        b(oe(l.value, 0, R.value, 0.25), {
+      )), k.set(
+        b(ue(l.value, 0, F.value, 0.25), {
           min: 0,
           max: c.value
         })
-      ), de(u.delta.y));
-    }, X = () => {
+      ), fe(u.delta.y));
+    }, ee = () => {
       v.value = t.canSwipeClose ? [0, l.value].reduce(
         (u, f) => Math.abs(f - v.value) < Math.abs(u - v.value) ? f : u
-      ) : 0, M = B(S, v.value, {
+      ) : 0, w = B(S, v.value, {
         duration: t.duration / 1e3,
         ease: "easeInOut"
-      }), v.value === l.value && (v.value = 0, j()), I.value = V.value;
+      }), v.value === l.value && (v.value = 0, L()), I.value = V.value;
       let e;
       typeof d.value[V.value] == "number" ? e = b(d.value[V.value], {
         max: c.value
       }) : e = G(
         d.value[V.value],
         c.value
-      ), l.value = e, M = B(C, l.value, {
+      ), l.value = e, w = B(k, l.value, {
         duration: t.duration / 1e3,
         ease: "easeInOut",
         onComplete: () => s(
           "snapped",
           d.value.indexOf(d.value[V.value])
         )
-      }), M = B(S, 0, {
+      }), w = B(S, 0, {
         duration: t.duration / 1e3,
         ease: "easeInOut"
       });
-    }, Pe = (e, u) => {
-      if (l.value = k.value, v.value = S.get(), M.stop(), !g.value) return;
-      const f = g.value.scrollTop === 0, w = u.delta.y > 0, T = U.value.length === 1, F = 0.5 > Math.abs(l.value - R.value);
-      if (T) {
+    }, ke = (e, u) => {
+      if (l.value = C.value, v.value = S.get(), w && w.stop(), !g.value) return;
+      const f = g.value.scrollTop === 0, T = u.delta.y > 0, x = U.value.length === 1, R = 0.5 > Math.abs(l.value - F.value);
+      if (x) {
         if (!t.expandOnContentDrag) {
           i.value = !1;
           return;
         }
-        S.get() === 0 && f && w && (i.value = !0), S.get() === 0 && f && !w && (i.value = !1);
+        S.get() === 0 && f && T && (i.value = !0), S.get() === 0 && f && !T && (i.value = !1);
       } else {
         if (!t.expandOnContentDrag) {
           i.value = !1;
           return;
         }
-        i.value = !0, F && (w && f && (i.value = !0), !w && f && (i.value = !1), f || (i.value = !1));
+        i.value = !0, R && (T && f && (i.value = !0), !T && f && (i.value = !1), f || (i.value = !1));
       }
-    }, Ce = async (e, u) => {
+    }, we = async (e, u) => {
       if (await N(), !t.expandOnContentDrag) {
         i.value = !1;
         return;
       }
       if (!r.value) return;
       v.value === 0 && i.value && t.expandOnContentDrag && (l.value -= u.delta.y), l.value <= O.value && (l.value = O.value, i.value && t.expandOnContentDrag && (v.value += u.delta.y), v.value = b(v.value, { min: 0, max: O.value }), S.set(
-        t.canSwipeClose ? b(v.value, { min: 0 }) : b(oe(v.value, -k.value, 0, 0.5), {
+        t.canSwipeClose ? b(v.value, { min: 0 }) : b(ue(v.value, -C.value, 0, 0.5), {
           min: 0
         })
-      )), l.value > R.value && (l.value = R.value), l.value = b(l.value, { max: c.value }), U.value.length === 1 || l.value === R.value && (i.value = !1), C.set(l.value), de(u.delta.y);
-    }, ke = () => {
-      t.blocking || (z.value = !0, L.value = !0);
-    }, we = () => {
-      t.blocking || (z.value = !1, L.value = !1);
+      )), l.value > F.value && (l.value = F.value), l.value = b(l.value, { max: c.value }), U.value.length === 1 || l.value === F.value && (i.value = !1), k.set(l.value), fe(u.delta.y);
     }, Te = () => {
+      t.blocking || (j.value = !0, z.value = !0);
+    }, xe = () => {
+      t.blocking || (j.value = !1, z.value = !1);
+    }, Me = () => {
       if (!g.value) return;
       const e = g.value.scrollTop === 0;
       i.value = e;
-    }, xe = Ae((e) => ve(e), {
+    }, Oe = je((e) => ce(e), {
       minQuietPeriodMs: t.duration,
       reducer: (e, u) => u
     });
     return q(d, (e, u) => {
       if (y.value === !1 || !e || !u) return;
-      const f = e[I.value], w = u[I.value];
-      typeof f != "string" && typeof w != "string" && (l.value = b(f, {
+      const f = e[I.value], T = u[I.value];
+      typeof f != "string" && typeof T != "string" && (l.value = b(f, {
         max: c.value
-      }), f !== w && (M = B(C, l.value, {
+      }), f !== T && (w = B(k, l.value, {
         duration: t.duration / 1e3,
         ease: "easeInOut"
       })));
     }), q(c, () => {
-      xe.call(I.value);
+      Oe.call(I.value);
     }), q(K, (e) => {
       s("instinctHeight", e);
-    }), Ie(() => {
+    }), _e(() => {
       Y.deactivate();
-    }), a({ open: J, close: j, snapToPoint: ve }), (e, u) => (ee(), Z(Ee, {
+    }), a({ open: X, close: L, snapToPoint: ce }), (e, u) => (ae(), te(De, {
       to: e.teleportTo,
       defer: e.teleportDefer
     }, [
-      te("div", qe, [
-        $(m(ge), null, {
+      ne("div", Qe, [
+        A(m(be), null, {
           default: E(() => [
-            m(y) && e.blocking ? (ee(), Z(m(A), {
+            m(y) && e.blocking ? (ae(), te(m($), {
               key: 0,
               ref_key: "backdrop",
               ref: H,
               "data-vsbs-backdrop": "",
-              onClick: u[0] || (u[0] = (f) => Se()),
+              onClick: u[0] || (u[0] = (f) => Ce()),
               transition: {
                 ease: "easeInOut",
                 duration: e.duration / 1e3
@@ -306,101 +314,101 @@ const qe = { "data-vsbs-container": "" }, Ne = /* @__PURE__ */ Me({
               initial: { opacity: 0 },
               animate: { opacity: 1 },
               exit: { opacity: 0 }
-            }, null, 8, ["transition"])) : pe("", !0)
+            }, null, 8, ["transition"])) : ge("", !0)
           ]),
           _: 1
         }),
-        $(m(ge), null, {
+        A(m(be), null, {
           default: E(() => [
-            m(y) ? (ee(), Z(m(A), {
+            m(y) ? (ae(), te(m($), {
               key: 0,
               ref_key: "sheet",
               ref: r,
-              exit: { y: "100%", height: m(k) },
-              initial: { y: "100%" },
-              style: _e({ y: m(S), height: m(C) }),
+              exit: { y: "100%", height: m(C) },
+              initial: !1,
+              style: He({ y: m(S), height: m(k) }),
               "data-vsbs-shadow": !e.blocking,
               "data-vsbs-sheet-show": m(y),
               "aria-modal": "true",
               "data-vsbs-sheet": "",
               tabindex: "-1",
-              onTouchstart: ke,
-              onTouchend: we
+              onTouchstart: Te,
+              onTouchend: xe
             }, {
               default: E(() => [
-                $(m(A), {
+                A(m($), {
                   ref_key: "sheetHeader",
                   ref: h,
                   "data-vsbs-header": "",
-                  onPanStart: ce,
-                  onPan: fe,
-                  onPanEnd: X,
-                  onTouchmove: se,
-                  class: ae(e.headerClass)
+                  onPanStart: pe,
+                  onPan: he,
+                  onPanEnd: ee,
+                  onTouchmove: ie,
+                  class: oe(e.headerClass)
                 }, {
                   default: E(() => [
-                    ne(e.$slots, "header", {}, void 0, !0)
+                    le(e.$slots, "header", {}, void 0, !0)
                   ]),
                   _: 3
                 }, 8, ["class"]),
-                te("div", {
+                ne("div", {
                   ref_key: "sheetScroll",
                   ref: g,
                   "data-vsbs-scroll": "",
-                  onScrollend: Te
+                  onScrollend: Me
                 }, [
-                  $(m(A), {
+                  A(m($), {
                     ref_key: "sheetContentWrapper",
-                    ref: x,
+                    ref: M,
                     "data-vsbs-content-wrapper": "",
-                    onPanStart: Pe,
-                    onPan: Ce,
-                    onPanEnd: X,
-                    onTouchmove: re
+                    onPanStart: ke,
+                    onPan: we,
+                    onPanEnd: ee,
+                    onTouchmove: ve
                   }, {
                     default: E(() => [
-                      te("div", {
+                      ne("div", {
                         ref_key: "sheetContent",
                         ref: D,
                         "data-vsbs-content": "",
-                        class: ae(e.contentClass)
+                        class: oe(e.contentClass)
                       }, [
-                        ne(e.$slots, "default", {}, void 0, !0)
+                        le(e.$slots, "default", {}, void 0, !0)
                       ], 2)
                     ]),
                     _: 3
                   }, 512)
                 ], 544),
-                $(m(A), {
+                A(m($), {
                   ref_key: "sheetFooter",
                   ref: p,
                   "data-vsbs-footer": "",
-                  onPanStart: ce,
-                  onPan: fe,
-                  onPanEnd: X,
-                  onTouchmove: se,
-                  class: ae(e.footerClass)
+                  onPanStart: pe,
+                  onPan: he,
+                  onPanEnd: ee,
+                  onTouchmove: ie,
+                  class: oe(e.footerClass)
                 }, {
                   default: E(() => [
-                    ne(e.$slots, "footer", {}, void 0, !0)
+                    le(e.$slots, "footer", {}, void 0, !0)
                   ]),
                   _: 3
                 }, 8, ["class"])
               ]),
               _: 3
-            }, 8, ["exit", "style", "data-vsbs-shadow", "data-vsbs-sheet-show"])) : pe("", !0)
+            }, 8, ["exit", "style", "data-vsbs-shadow", "data-vsbs-sheet-show"])) : ge("", !0)
           ]),
           _: 3
         })
       ])
     ], 8, ["to", "defer"]));
   }
-}), Qe = (n, a) => {
+}), Ke = (n, a) => {
   const o = n.__vccOpts || n;
   for (const [t, s] of a)
     o[t] = s;
   return o;
-}, Je = /* @__PURE__ */ Qe(Ne, [["__scopeId", "data-v-e9faa2c0"]]);
+}, Ze = /* @__PURE__ */ Ke(Ge, [["__scopeId", "data-v-c353e679"]]);
 export {
-  Je as default
+  Ze as default
 };

package/dist/style.css

@@ -1 +1 @@
-[data-vsbs-container][data-v-e9faa2c0]{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;z-index:9999;visibility:visible}[data-vsbs-backdrop][data-v-e9faa2c0]{background-color:var(--vsbs-backdrop-bg, rgba(0, 0, 0, .5));top:0;right:0;bottom:0;left:0;pointer-events:auto;position:fixed;-webkit-user-select:none;user-select:none;will-change:opacity;z-index:1}[data-vsbs-shadow=true][data-v-e9faa2c0]: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-e9faa2c0]{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-height:inherit;max-width:var(--vsbs-max-width, 640px);pointer-events:all;position:fixed;right:0;width:100%;will-change:height;z-index:2}[data-vsbs-sheet-show=true][data-v-e9faa2c0]{visibility:visible}[data-vsbs-header][data-v-e9faa2c0]{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-e9faa2c0]: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-e9faa2c0]:empty{box-shadow:none;padding:14px var(--vsbs-padding-x, 16px) 10px}[data-vsbs-footer][data-v-e9faa2c0]{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-e9faa2c0]:empty{display:none}[data-vsbs-scroll][data-v-e9faa2c0]{flex-grow:1;overflow-y:auto;overscroll-behavior:none}[data-vsbs-content-wrapper][data-v-e9faa2c0]{height:100%}[data-vsbs-content][data-v-e9faa2c0]{display:grid;padding:8px var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}
+[data-vsbs-container][data-v-c353e679]{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;z-index:9999;visibility:visible}[data-vsbs-backdrop][data-v-c353e679]{background-color:var(--vsbs-backdrop-bg, rgba(0, 0, 0, .5));top:0;right:0;bottom:0;left:0;pointer-events:auto;position:fixed;-webkit-user-select:none;user-select:none;will-change:opacity;z-index:1}[data-vsbs-shadow=true][data-v-c353e679]: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-c353e679]{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-height:inherit;max-width:var(--vsbs-max-width, 640px);pointer-events:all;position:fixed;right:0;width:100%;will-change:height;z-index:2}[data-vsbs-sheet-show=true][data-v-c353e679]{visibility:visible}[data-vsbs-header][data-v-c353e679]{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-c353e679]: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-c353e679]:empty{box-shadow:none;padding:14px var(--vsbs-padding-x, 16px) 10px}[data-vsbs-footer][data-v-c353e679]{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-c353e679]:empty{display:none}[data-vsbs-scroll][data-v-c353e679]{flex-grow:1;overflow-y:auto;overscroll-behavior:none}[data-vsbs-content-wrapper][data-v-c353e679]{height:100%}[data-vsbs-content][data-v-c353e679]{display:grid;padding:8px var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}

package/package.json

@@ -32,7 +32,7 @@
     "url": "https://github.com/megaarmos/vue-spring-bottom-sheet/issues"
   },
   "private": false,
-  "version": "2.3.0",
+  "version": "2.4.1",
   "type": "module",
   "exports": {
     ".": {
@@ -62,7 +62,7 @@
     "@vueuse/core": "^13.2.0",
     "@vueuse/integrations": "^13.2.0",
     "focus-trap": "^7.6.4",
-    "motion-v": "^1.0.2",
+    "motion-v": "^1.5.0",
     "remeda": "^2.21.6",
     "vue": "^3.5.14"
   },