@douxcode/vue-spring-bottom-sheet 2.3.0 → 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,12 +1,12 @@
-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 $, 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 Re(n, a, o) {
+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
@@ -21,17 +21,17 @@ function Re(n, a, o) {
     closestSnapPointIndex: h
   };
 }
-function Fe(n, a, o) {
+function Ae(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 Ae(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 }) {
+function ze(n, { triggerAt: a = "end", minQuietPeriodMs: o, maxBurstDurationMs: t, minGapMs: s, reducer: y = Le }) {
   let r, h, p, g, x = () => {
     let i = p;
     i !== void 0 && (p = void 0, n(i), s !== void 0 && (h = setTimeout(D, s)));
@@ -60,24 +60,24 @@ function Ae(n, { triggerAt: a = "end", minQuietPeriodMs: o, maxBurstDurationMs:
     return r === void 0 && h === void 0;
   } };
 }
-var We = () => "";
+var Le = () => "";
 function b(...n) {
-  return $e(ze, n);
+  return We(je, 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 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 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,52 +94,55 @@ 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), 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(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), C = 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);
+    } = $e(d, l, c);
     let M;
-    const z = me(document.body), L = me(document.documentElement), Y = Ve([r, H], {
+    const z = ye(document.body), L = ye(document.documentElement), Y = Fe([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) => {
+    const de = (e) => {
       e.key === "Escape" && j();
-    }, Se = () => {
+    }, Ce = () => {
       t.canBackdropClose && j();
-    }, J = async () => {
-      y.value = !0, t.blocking && (z.value = !0, L.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;
       k.value = e.getBoundingClientRect().height;
       const u = e.querySelector("[data-vsbs-content]"), f = e.querySelector("[data-vsbs-header]"), w = e.querySelector("[data-vsbs-footer]");
@@ -169,14 +172,16 @@ const qe = { "data-vsbs-container": "" }, Ne = /* @__PURE__ */ Me({
       }), M = B(S, 0, {
         duration: t.duration / 1e3,
         ease: "easeInOut"
-      }), window.addEventListener("keydown", ie), t.blocking && setTimeout(() => {
+      }), window.addEventListener("keydown", de), J = !1, 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) => {
+    };
+    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");
@@ -192,23 +197,23 @@ const qe = { "data-vsbs-container": "" }, Ne = /* @__PURE__ */ Me({
         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 = () => {
+    const pe = () => {
       l.value = k.value, v.value = S.get(), C.jump(l.value), S.jump(v.value);
-    }, fe = async (e, u) => {
+    }, 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, -k.value, 0, 0.5), {
           min: 0
         })
       )), C.set(
-        b(oe(l.value, 0, R.value, 0.25), {
+        b(ue(l.value, 0, R.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, {
@@ -232,7 +237,7 @@ const qe = { "data-vsbs-container": "" }, Ne = /* @__PURE__ */ Me({
         duration: t.duration / 1e3,
         ease: "easeInOut"
       });
-    }, Pe = (e, u) => {
+    }, 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) {
@@ -248,26 +253,26 @@ const qe = { "data-vsbs-container": "" }, Ne = /* @__PURE__ */ Me({
         }
         i.value = !0, F && (w && f && (i.value = !0), !w && 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, -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 && (i.value = !1), C.set(l.value), de(u.delta.y);
-    }, ke = () => {
+      )), 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);
-    }, we = () => {
+    }, xe = () => {
       t.blocking || (z.value = !1, L.value = !1);
-    }, Te = () => {
+    }, Me = () => {
       if (!g.value) return;
       const e = g.value.scrollTop === 0;
       i.value = e;
-    }, xe = Ae((e) => ve(e), {
+    }, Oe = ze((e) => ce(e), {
       minQuietPeriodMs: t.duration,
       reducer: (e, u) => u
     });
@@ -281,24 +286,24 @@ const qe = { "data-vsbs-container": "" }, Ne = /* @__PURE__ */ Me({
         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: j, snapToPoint: ce }), (e, u) => (ae(), te(De, {
       to: e.teleportTo,
       defer: e.teleportDefer
     }, [
-      te("div", qe, [
-        $(m(ge), null, {
+      ne("div", Qe, [
+        $(m(be), null, {
           default: E(() => [
-            m(y) && e.blocking ? (ee(), Z(m(A), {
+            m(y) && e.blocking ? (ae(), te(m(A), {
               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,66 +311,66 @@ 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, {
+        $(m(be), null, {
           default: E(() => [
-            m(y) ? (ee(), Z(m(A), {
+            m(y) ? (ae(), te(m(A), {
               key: 0,
               ref_key: "sheet",
               ref: r,
               exit: { y: "100%", height: m(k) },
               initial: { y: "100%" },
-              style: _e({ y: m(S), height: m(C) }),
+              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: E(() => [
                 $(m(A), {
                   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), {
                     ref_key: "sheetContentWrapper",
                     ref: x,
                     "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
@@ -375,32 +380,32 @@ const qe = { "data-vsbs-container": "" }, Ne = /* @__PURE__ */ Me({
                   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-ff3b8e9e"]]);
 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-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/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.0",
   "type": "module",
   "exports": {
     ".": {