@douxcode/vue-spring-bottom-sheet 2.2.2 → 2.4.0

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

package/dist/style.css

@@ -1 +1 @@
-[data-vsbs-container][data-v-3f13e251]{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-3f13e251]{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-3f13e251]: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-3f13e251]{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-3f13e251]{visibility:visible}[data-vsbs-header][data-v-3f13e251]{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-3f13e251]: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-3f13e251]:empty{box-shadow:none;padding:14px var(--vsbs-padding-x, 16px) 10px}[data-vsbs-footer][data-v-3f13e251]{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-3f13e251]:empty{display:none}[data-vsbs-scroll][data-v-3f13e251]{flex-grow:1;overflow-y:auto;overscroll-behavior:none}[data-vsbs-content-wrapper][data-v-3f13e251]{height:100%}[data-vsbs-content][data-v-3f13e251]{display:grid;padding:8px var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}
+[data-vsbs-container][data-v-ff3b8e9e]{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-ff3b8e9e]{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-ff3b8e9e]: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-ff3b8e9e]{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-ff3b8e9e]{visibility:visible}[data-vsbs-header][data-v-ff3b8e9e]{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-ff3b8e9e]: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-ff3b8e9e]:empty{box-shadow:none;padding:14px var(--vsbs-padding-x, 16px) 10px}[data-vsbs-footer][data-v-ff3b8e9e]{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-ff3b8e9e]:empty{display:none}[data-vsbs-scroll][data-v-ff3b8e9e]{flex-grow:1;overflow-y:auto;overscroll-behavior:none}[data-vsbs-content-wrapper][data-v-ff3b8e9e]{height:100%}[data-vsbs-content][data-v-ff3b8e9e]{display:grid;padding:8px var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}

package/dist/types.d.ts

@@ -10,4 +10,7 @@ export interface BottomSheetProps {
     modelValue?: boolean;
     teleportTo?: string | RendererElement;
     teleportDefer?: boolean;
+    headerClass?: string;
+    contentClass?: string;
+    footerClass?: string;
 }

package/package.json

@@ -32,7 +32,7 @@
     "url": "https://github.com/megaarmos/vue-spring-bottom-sheet/issues"
   },
   "private": false,
-  "version": "2.2.2",
+  "version": "2.4.0",
   "type": "module",
   "exports": {
     ".": {
@@ -59,27 +59,27 @@
     "vue": ">=3.3"
   },
   "dependencies": {
-    "@vueuse/core": "^13.0.0",
-    "@vueuse/integrations": "^13.0.0",
+    "@vueuse/core": "^13.2.0",
+    "@vueuse/integrations": "^13.2.0",
     "focus-trap": "^7.6.4",
-    "motion-v": "^1.0.0-beta.1",
-    "remeda": "^2.21.2",
-    "vue": "^3.5.13"
+    "motion-v": "^1.0.2",
+    "remeda": "^2.21.6",
+    "vue": "^3.5.14"
   },
   "devDependencies": {
-    "@types/node": "^22.13.11",
-    "@vitejs/plugin-vue": "^5.2.1",
+    "@types/node": "^22.15.18",
+    "@vitejs/plugin-vue": "^5.2.4",
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/eslint-config-typescript": "^14.5.0",
     "@vue/tsconfig": "^0.7.0",
     "ajv": "^8.17.1",
-    "eslint": "^9.23.0",
-    "eslint-plugin-vue": "^10.0.0",
+    "eslint": "^9.27.0",
+    "eslint-plugin-vue": "^10.1.0",
     "prettier": "^3.5.3",
     "typescript": "~5.6.3",
-    "vite": "^6.2.2",
+    "vite": "^6.3.5",
     "vite-plugin-dts": "4.5.3",
-    "vue-tsc": "^2.2.8"
+    "vue-tsc": "^2.2.10"
   },
   "files": [
     "dist",