@douxcode/vue-spring-bottom-sheet 1.2.3 → 1.2.5

package/README.md

@@ -130,13 +130,14 @@ Assuming there is `const bottomSheet = ref()`
 
 ## Events
 
-| Event         | Description                                                                          | Example                     |
-| ------------- | ------------------------------------------------------------------------------------ | --------------------------- |
-| min-height    | Fires when the minimum height of the sheet changes. Passes the value as an argument. | `@min-height="(n) => {}"`   |
-| dragging-up   | Fires when the bottom sheet is being dragged up                                      | `@dragging-up="() => {}"`   |
-| dragging-down | Fires when the bottom sheet is being dragged down                                    | `@dragging-down="() => {}"` |
-| opened        | Fires when the bottom sheet is opened                                                | `@opened="() => {}"`        |
-| closed        | Fires when the bottom sheet is closed                                                | `@closed="() => {}"`        |
+| Event         | Description                                                                                                                                   | Example                     |
+| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |
+| min-height    | Fires when the minimum height of the sheet changes. Passes the value as an argument.                                                          | `@min-height="(n) => {}"`   |
+| max-height    | Fires when the height of the window changes. Passes the value as an argument. Note that this value is throttled to prevent excessive updates. | `@max-height="(n) => {}"`   |
+| dragging-up   | Fires when the bottom sheet is being dragged up                                                                                               | `@dragging-up="() => {}"`   |
+| dragging-down | Fires when the bottom sheet is being dragged down                                                                                             | `@dragging-down="() => {}"` |
+| opened        | Fires when the bottom sheet is opened                                                                                                         | `@opened="() => {}"`        |
+| closed        | Fires when the bottom sheet is closed                                                                                                         | `@closed="() => {}"`        |
 
 ## Acknowledgments
 

package/dist/BottomSheet.d.ts

@@ -1,12 +1,4 @@
-interface IProps {
-    duration?: number;
-    snapPoints?: number[];
-    defaultSnapPoint?: number;
-    blocking?: boolean;
-    canSwipeClose?: boolean;
-    canBackdropClose?: boolean;
-    expandOnContentDrag?: boolean;
-}
+import { BottomSheetProps } from './types.ts';
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
@@ -26,7 +18,7 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<IProps, {
+declare const __VLS_component: import('vue').DefineComponent<BottomSheetProps, {
     open: () => void;
     close: () => void;
     snapToPoint: (snapPoint: number) => void;
@@ -38,7 +30,7 @@ declare const __VLS_component: import('vue').DefineComponent<IProps, {
     "dragging-down": () => any;
     minHeight: (minSheetHeight: number) => any;
     maxHeight: (maxSheetHeight: number) => any;
-}, string, import('vue').PublicProps, Readonly<IProps> & Readonly<{
+}, string, import('vue').PublicProps, Readonly<BottomSheetProps> & Readonly<{
     onOpened?: (() => any) | undefined;
     onClosed?: (() => any) | undefined;
     onReady?: (() => any) | undefined;

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 import { default as BottomSheet } from './BottomSheet';
+export * from './types.ts';
 export default BottomSheet;

package/dist/index.mjs

@@ -1,54 +1,54 @@
-import { computed as y, defineComponent as ve, useCssVars as de, ref as p, toRefs as ce, watch as J, nextTick as A, onMounted as fe, openBlock as ge, createBlock as pe, Teleport as he, createElementVNode as b, createVNode as me, Transition as be, withCtx as ye, withDirectives as Se, vShow as we, renderSlot as R } from "vue";
-import { useWindowSize as ke, useElementBounding as I, useScrollLock as Z } from "@vueuse/core";
-import { useGesture as z, rubberbandIfOutOfBounds as N } from "@vueuse/gesture";
-import { useMotionProperties as Te, useMotionTransitions as Ce, useMotionControls as De } from "@vueuse/motion";
-import { useFocusTrap as xe } from "@vueuse/integrations/useFocusTrap";
-function Me(n, u, a) {
-  let e = (o) => n(o, ...u);
+import { computed as y, defineComponent as ce, useCssVars as fe, ref as g, toRefs as he, watch as ee, nextTick as X, onMounted as ge, openBlock as pe, createBlock as me, Teleport as be, createElementVNode as b, createVNode as ye, Transition as Se, withCtx as we, withDirectives as ke, vShow as Te, renderSlot as A } from "vue";
+import { useWindowSize as Ce, useElementBounding as I, useScrollLock as te } from "@vueuse/core";
+import { useGesture as R, rubberbandIfOutOfBounds as z } from "@vueuse/gesture";
+import { useMotionProperties as De, useMotionTransitions as xe, useMotionControls as Me } from "@vueuse/motion";
+import { useFocusTrap as Pe } from "@vueuse/integrations/useFocusTrap";
+function _e(o, u, a) {
+  let e = (n) => o(n, ...u);
   return a === void 0 ? e : Object.assign(e, { lazy: a, lazyArgs: u });
 }
-function Pe(n, u, a) {
-  let e = n.length - u.length;
-  if (e === 0) return n(...u);
-  if (e === 1) return Me(n, u, a);
+function He(o, u, a) {
+  let e = o.length - u.length;
+  if (e === 0) return o(...u);
+  if (e === 1) return _e(o, u, a);
   throw new Error("Wrong number of arguments");
 }
-function _e(n, { triggerAt: u = "end", minQuietPeriodMs: a, maxBurstDurationMs: e, minGapMs: o, reducer: v = He }) {
+function Oe(o, { triggerAt: u = "end", minQuietPeriodMs: a, maxBurstDurationMs: e, minGapMs: n, reducer: d = Be }) {
   let s, r, f, S, C = () => {
-    let d = f;
-    d !== void 0 && (f = void 0, n(d), o !== void 0 && (r = setTimeout(O, o)));
-  }, O = () => {
+    let v = f;
+    v !== void 0 && (f = void 0, o(v), n !== void 0 && (r = setTimeout(H, n)));
+  }, H = () => {
     clearTimeout(r), r = void 0, s === void 0 && C();
   }, w = () => {
     clearTimeout(s), s = void 0, S = void 0, r === void 0 && C();
   };
-  return { call: (...d) => {
-    let g = s === void 0 && r === void 0;
-    if ((u !== "start" || g) && (f = v(f, ...d)), !(s === void 0 && !g)) {
-      if (a !== void 0 || e !== void 0 || o === void 0) {
+  return { call: (...v) => {
+    let h = s === void 0 && r === void 0;
+    if ((u !== "start" || h) && (f = d(f, ...v)), !(s === void 0 && !h)) {
+      if (a !== void 0 || e !== void 0 || n === void 0) {
         clearTimeout(s);
-        let h = Date.now();
-        S ?? (S = h);
-        let W = e === void 0 ? a ?? 0 : Math.min(a ?? e, e - (h - S));
+        let p = Date.now();
+        S ?? (S = p);
+        let W = e === void 0 ? a ?? 0 : Math.min(a ?? e, e - (p - S));
         s = setTimeout(w, W);
       }
-      u !== "end" && g && C();
+      u !== "end" && h && C();
     }
   }, cancel: () => {
     clearTimeout(s), s = void 0, S = void 0, clearTimeout(r), r = void 0, f = void 0;
   }, flush: () => {
-    w(), O();
+    w(), H();
   }, get isIdle() {
     return s === void 0 && r === void 0;
   } };
 }
-var He = () => "";
-function $(...n) {
-  return Pe(Oe, n);
+var Be = () => "";
+function $(...o) {
+  return He(Ee, o);
 }
-var Oe = (n, { min: u, max: a }) => u !== void 0 && n < u ? u : a !== void 0 && n > a ? a : n;
-function Be(n, u) {
-  const a = y(() => n.value.sort()), e = y(() => a.value[0]), o = y(() => a.value[a.value.length - 1]), v = y(() => {
+var Ee = (o, { min: u, max: a }) => u !== void 0 && o < u ? u : a !== void 0 && o > a ? a : o;
+function Ie(o, u) {
+  const a = y(() => o.value.sort()), e = y(() => a.value[0]), n = y(() => a.value[a.value.length - 1]), d = y(() => {
     const s = a.value.reduce(
       (r, f) => Math.abs(f - u.value) < Math.abs(r - u.value) ? f : r
     );
@@ -56,12 +56,12 @@ function Be(n, u) {
   });
   return {
     minSnap: e,
-    maxSnap: o,
-    snapPoints: n,
-    closestSnapPointIndex: v
+    maxSnap: n,
+    snapPoints: o,
+    closestSnapPointIndex: d
   };
 }
-const Ee = { "data-vsbs-container": "" }, Ie = ["data-vsbs-shadow", "data-vsbs-sheet-show"], $e = /* @__PURE__ */ ve({
+const $e = { "data-vsbs-container": "" }, We = ["data-vsbs-shadow", "data-vsbs-sheet-show"], Fe = /* @__PURE__ */ ce({
   __name: "BottomSheet",
   props: {
     duration: { default: 250 },
@@ -73,29 +73,29 @@ const Ee = { "data-vsbs-container": "" }, Ie = ["data-vsbs-shadow", "data-vsbs-s
     expandOnContentDrag: { type: Boolean, default: !0 }
   },
   emits: ["opened", "closed", "ready", "dragging-up", "dragging-down", "minHeight", "maxHeight"],
-  setup(n, { expose: u, emit: a }) {
-    de((i) => ({
-      "4dec9702": te.value,
-      "47406bca": ae.value
+  setup(o, { expose: u, emit: a }) {
+    fe((i) => ({
+      56909704: ne.value,
+      "3f5ccd4e": ue.value
     }));
-    const e = n, o = a, v = p(null), s = p(null), r = p(null), f = p(null), S = p(null), C = p(null), O = p(null), w = p(!1), d = p(e.expandOnContentDrag), { height: g } = ke(), { height: h } = I(v), { height: W } = I(s), { height: Y } = I(r), { height: ee } = I(C), G = xe([v, O], {
+    const e = o, n = a, d = g(null), s = g(null), r = g(null), f = g(null), S = g(null), C = g(null), H = g(null), w = g(!1), v = g(e.expandOnContentDrag), { height: h } = Ce(), { height: p } = I(d), { height: W } = I(s), { height: ae } = I(r), { height: oe } = I(C), N = Pe([d, H], {
       immediate: !1,
-      fallbackFocus: () => v.value || document.body
+      fallbackFocus: () => d.value || document.body
     }), k = y(
-      () => Math.ceil(ee.value + W.value + Y.value)
-    ), te = y(() => `visibility ${e.duration}ms ease-in-out`), ae = y(() => `opacity ${e.duration}ms ease-in-out`), { motionProperties: D } = Te(v), { push: x, stop: ne, motionValues: M } = Ce(), { set: P, stop: F } = De(
+      () => Math.ceil(oe.value + W.value + ae.value)
+    ), ne = y(() => `visibility ${e.duration}ms ease-in-out`), ue = y(() => `opacity ${e.duration}ms ease-in-out`), { motionProperties: D } = De(d), { push: x, stop: le, motionValues: O } = xe(), { set: M, stop: G } = Me(
       D,
       {},
-      { push: x, motionValues: M, stop: ne }
-    ), t = p(0), l = p(0), { snapPoints: oe } = ce(e), le = y(() => oe.value ?? [k.value]), {
-      minSnap: _,
-      maxSnap: H,
+      { push: x, motionValues: O, stop: le }
+    ), t = g(0), l = g(0), { snapPoints: ie } = he(e), se = y(() => ie.value ?? [k.value]), {
+      minSnap: P,
+      maxSnap: _,
       snapPoints: T,
-      closestSnapPointIndex: L
-    } = Be(le, t), Q = Z(document.body), j = Z(document.documentElement), K = (i) => {
+      closestSnapPointIndex: F
+    } = Ie(se, t), Q = te(document.body), j = te(document.documentElement), K = (i) => {
       i.key === "Escape" && E();
-    }, ue = () => {
-      v.value && (t.value = Math.min(e.defaultSnapPoint ?? _.value, g.value), P({
+    }, re = () => {
+      d.value && (t.value = Math.min(e.defaultSnapPoint ?? P.value, h.value), M({
         height: t.value,
         y: t.value
       }), x("y", 0, D, {
@@ -104,147 +104,148 @@ const Ee = { "data-vsbs-container": "" }, Ie = ["data-vsbs-shadow", "data-vsbs-s
         bounce: 0,
         duration: e.duration
       }), w.value = !0, Q.value = !0, j.value = !0, window.addEventListener("keydown", K), e.blocking && setTimeout(() => {
-        M.value.y.get() - 0 < 0.1 && (o("opened"), G.activate());
+        O.value.y.get() - 0 < 0.1 && (n("opened"), N.activate());
       }, e.duration));
     }, E = () => {
-      v.value && (x("y", h.value, D, {
+      d.value && (x("y", p.value, D, {
         type: "tween",
         bounce: 0,
         duration: e.duration
-      }), w.value = !1, Q.value = !1, j.value = !1, e.blocking && G.deactivate(), window.removeEventListener("keydown", K), setTimeout(() => {
-        M.value.y.get() - h.value < 0.1 && o("closed");
+      }), w.value = !1, Q.value = !1, j.value = !1, e.blocking && N.deactivate(), window.removeEventListener("keydown", K), setTimeout(() => {
+        O.value.y.get() - p.value < 0.1 && n("closed");
       }, e.duration));
-    }, ie = () => {
+    }, ve = () => {
       e.canBackdropClose && E();
     };
-    function se(i) {
-      d.value && i.preventDefault();
+    function U(i) {
+      v.value = !0, q(i);
     }
-    const V = (i) => {
+    function q(i) {
+      v.value && i.preventDefault();
+    }
+    const L = (i) => {
       t.value = i, x("height", t.value, D, {
         type: "tween",
         easings: "easeInOut",
         bounce: 0,
         duration: e.duration
       });
-    }, U = ({
+    }, J = ({
       delta: [i, c],
       direction: [B, m]
     }) => {
-      v.value && (l.value <= 0 && (t.value -= c), t.value <= _.value && (t.value = _.value, l.value += c, P({
-        y: e.canSwipeClose ? $(l.value, { min: 0 }) : $(N(l.value, -h.value, 0, 0.5), { min: 0 })
-      })), P({
-        height: $(N(t.value, 0, H.value, 0.25), {
+      d.value && (l.value <= 0 && (t.value -= c), t.value <= P.value && (t.value = P.value, l.value += c, M({
+        y: e.canSwipeClose ? $(l.value, { min: 0 }) : $(z(l.value, -p.value, 0, 0.5), { min: 0 })
+      })), M({
+        height: $(z(t.value, 0, _.value, 0.25), {
           min: 0,
-          max: g.value
+          max: h.value
         })
-      }), m > 0 ? o("dragging-down") : m < 0 && o("dragging-up"));
-    }, X = () => {
-      v.value && (l.value = e.canSwipeClose ? [0, t.value].reduce(
+      }), m > 0 ? n("dragging-down") : m < 0 && n("dragging-up"));
+    }, V = () => {
+      d.value && (l.value = e.canSwipeClose ? [0, t.value].reduce(
         (i, c) => Math.abs(c - l.value) < Math.abs(i - l.value) ? c : i
       ) : 0, x("y", l.value, D, {
         type: "tween",
         easings: "easeInOut",
         bounce: 0,
         duration: e.duration
-      }), l.value === t.value && (l.value = 0, E()), t.value = Math.min(T.value[L.value], g.value), x("height", t.value, D, {
+      }), l.value === t.value && (l.value = 0, E()), t.value = Math.min(T.value[F.value], h.value), x("height", t.value, D, {
         type: "tween",
         easings: "easeInOut",
         bounce: 0,
         duration: e.duration
       }));
+    }, Z = () => {
+      t.value = p.value, l.value = O.value.y.get(), G();
     };
-    z(
+    R(
       {
-        onDragStart: () => {
-          t.value = h.value, l.value = M.value.y.get(), F();
-        },
-        onDrag: U,
-        onDragEnd: X
+        onDragStart: Z,
+        onDrag: J,
+        onDragEnd: V
       },
       {
         domTarget: s,
         drag: { filterTaps: !0 }
       }
-    ), z(
+    ), R(
       {
-        onDragStart: () => {
-          t.value = h.value, l.value = M.value.y.get(), F();
-        },
-        onDrag: U,
-        onDragEnd: X
+        onDragStart: Z,
+        onDrag: J,
+        onDragEnd: V
       },
       {
         domTarget: r,
         drag: { filterTaps: !0 }
       }
-    ), z(
+    ), R(
       {
         onDragStart: ({ direction: [i, c] }) => {
-          t.value = h.value, l.value = M.value.y.get(), F();
+          t.value = p.value, l.value = O.value.y.get(), G();
           const B = f.value.scrollTop === 0, m = c > 0;
-          T.value.length === 1 ? l.value === 0 && B && (d.value = m) : (e.expandOnContentDrag && t.value !== H.value && (d.value = !0), t.value === H.value && B && (d.value = m));
+          T.value.length === 1 ? l.value === 0 && B && (v.value = m) : (e.expandOnContentDrag && t.value !== _.value && (v.value = !0), t.value === _.value && B && (v.value = m));
         },
         onDrag: ({ delta: [i, c], direction: [B, m] }) => {
           if (!e.expandOnContentDrag) {
-            d.value = !1;
+            v.value = !1;
             return;
           }
-          if (!v.value) return;
-          l.value === 0 && d.value && e.expandOnContentDrag && (t.value -= c), t.value <= _.value && (t.value = _.value, d.value && e.expandOnContentDrag && (l.value += c), l.value = $(l.value, { min: 0, max: _.value }), P({
-            y: e.canSwipeClose ? l.value : N(l.value, -h.value, 0, 0.5)
-          })), t.value > H.value && (t.value = H.value), t.value = Math.min(t.value, g.value);
-          const q = f.value.scrollTop === 0;
-          T.value.length === 1 ? c < 0 && l.value === 0 && q && (d.value = !1) : t.value === H.value && (d.value = !1), P({
+          if (!d.value) return;
+          l.value === 0 && v.value && e.expandOnContentDrag && (t.value -= c), t.value <= P.value && (t.value = P.value, v.value && e.expandOnContentDrag && (l.value += c), l.value = $(l.value, { min: 0, max: P.value }), M({
+            y: e.canSwipeClose ? l.value : z(l.value, -p.value, 0, 0.5)
+          })), t.value > _.value && (t.value = _.value), t.value = Math.min(t.value, h.value);
+          const Y = f.value.scrollTop === 0;
+          T.value.length === 1 ? c < 0 && l.value === 0 && Y && (v.value = !1) : t.value === _.value && (v.value = !1), M({
             height: t.value
-          }), m > 0 ? o("dragging-down") : m < 0 && o("dragging-up");
+          }), m > 0 ? n("dragging-down") : m < 0 && n("dragging-up");
         },
-        onDragEnd: X
+        onDragEnd: V
       },
       {
         domTarget: S,
         drag: { filterTaps: !0 }
       }
     );
-    const re = _e(
+    const de = Oe(
       () => {
-        o("maxHeight", g.value), A(() => {
-          t.value = T.value[L.value], V(T.value[L.value]);
+        n("maxHeight", h.value), X(() => {
+          t.value = T.value[F.value], L(T.value[F.value]);
         });
       },
       { minQuietPeriodMs: 50 }
     );
-    return J(g, () => {
-      re.call();
-    }), J(k, () => {
-      o("minHeight", k.value), T.value.length === 1 && A(() => {
-        T.value[0] === k.value && V(Math.min(k.value, g.value));
+    return ee(h, () => {
+      de.call();
+    }), ee(k, () => {
+      n("minHeight", k.value), T.value.length === 1 && X(() => {
+        T.value[0] === k.value && L(Math.min(k.value, h.value));
       });
-    }), fe(() => {
-      o("minHeight", k.value), o("maxHeight", g.value), t.value = e.defaultSnapPoint ?? Number(k.value), P({
+    }), ge(() => {
+      n("minHeight", k.value), n("maxHeight", h.value), t.value = e.defaultSnapPoint ?? Number(k.value), M({
         height: t.value,
         y: t.value
-      }), A(() => {
-        o("ready");
+      }), X(() => {
+        n("ready");
       });
-    }), u({ open: ue, close: E, snapToPoint: V }), (i, c) => (ge(), pe(he, { to: "body" }, [
-      b("div", Ee, [
-        me(be, { name: "fade" }, {
-          default: ye(() => [
-            Se(b("div", {
+    }), u({ open: re, close: E, snapToPoint: L }), (i, c) => (pe(), me(be, { to: "body" }, [
+      b("div", $e, [
+        ye(Se, { name: "fade" }, {
+          default: we(() => [
+            ke(b("div", {
               ref_key: "backdrop",
-              ref: O,
+              ref: H,
               "data-vsbs-backdrop": "",
-              onClick: c[0] || (c[0] = (B) => ie())
+              onClick: c[0] || (c[0] = (B) => ve())
             }, null, 512), [
-              [we, w.value && i.blocking]
+              [Te, w.value && i.blocking]
             ])
           ]),
           _: 1
         }),
         b("div", {
           ref_key: "sheet",
-          ref: v,
+          ref: d,
           "data-vsbs-shadow": !i.blocking,
           "data-vsbs-sheet-show": w.value,
           "aria-modal": "true",
@@ -254,15 +255,16 @@ const Ee = { "data-vsbs-container": "" }, Ie = ["data-vsbs-shadow", "data-vsbs-s
           b("div", {
             ref_key: "sheetHeader",
             ref: s,
-            "data-vsbs-header": ""
+            "data-vsbs-header": "",
+            onTouchmove: U
           }, [
-            R(i.$slots, "header", {}, void 0, !0)
-          ], 512),
+            A(i.$slots, "header", {}, void 0, !0)
+          ], 544),
           b("div", {
             ref_key: "sheetScroll",
             ref: f,
             "data-vsbs-scroll": "",
-            onTouchmove: se
+            onTouchmove: q
           }, [
             b("div", {
               ref_key: "sheetContentWrapper",
@@ -274,27 +276,28 @@ const Ee = { "data-vsbs-container": "" }, Ie = ["data-vsbs-shadow", "data-vsbs-s
                 ref: C,
                 "data-vsbs-content": ""
               }, [
-                R(i.$slots, "default", {}, void 0, !0)
+                A(i.$slots, "default", {}, void 0, !0)
               ], 512)
             ], 512)
           ], 544),
           b("div", {
             ref_key: "sheetFooter",
             ref: r,
-            "data-vsbs-footer": ""
+            "data-vsbs-footer": "",
+            onTouchmove: U
           }, [
-            R(i.$slots, "footer", {}, void 0, !0)
-          ], 512)
-        ], 8, Ie)
+            A(i.$slots, "footer", {}, void 0, !0)
+          ], 544)
+        ], 8, We)
       ])
     ]));
   }
-}), We = (n, u) => {
-  const a = n.__vccOpts || n;
-  for (const [e, o] of u)
-    a[e] = o;
+}), Le = (o, u) => {
+  const a = o.__vccOpts || o;
+  for (const [e, n] of u)
+    a[e] = n;
   return a;
-}, Re = /* @__PURE__ */ We($e, [["__scopeId", "data-v-83ff700a"]]);
+}, Ne = /* @__PURE__ */ Le(Fe, [["__scopeId", "data-v-524792f4"]]);
 export {
-  Re as default
+  Ne as default
 };

package/dist/style.css

@@ -1 +1 @@
-[data-vsbs-container][data-v-83ff700a]{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-83ff700a]{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-83ff700a]{box-shadow:0 -5px 60px 0 var(--vsbs-shadow-color, rgba(89, 89, 89, .2))}[data-vsbs-sheet][data-v-83ff700a]{background-color:var(--vsbs-background, #fff);border-top-left-radius:var(--vsbs-border-radius, 16px);border-top-right-radius:var(--vsbs-border-radius, 16px);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;transition:var(--4dec9702);visibility:hidden;width:100%;will-change:height;z-index:2}[data-vsbs-sheet-show=true][data-v-83ff700a]{visibility:visible}[data-vsbs-header][data-v-83ff700a]{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}[data-vsbs-header][data-v-83ff700a]: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-83ff700a]:empty{box-shadow:none;padding:12px var(--vsbs-padding-x, 16px) 8px}[data-vsbs-footer][data-v-83ff700a]{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-83ff700a]:empty{display:none}[data-vsbs-scroll][data-v-83ff700a]{flex-grow:1;overflow-y:auto;overscroll-behavior:contain}[data-vsbs-content-wrapper][data-v-83ff700a]{height:100%}[data-vsbs-content][data-v-83ff700a]{display:grid;padding:1vh var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}.fade-enter-active[data-v-83ff700a],.fade-leave-active[data-v-83ff700a]{transition:var(--47406bca)}.fade-enter-from[data-v-83ff700a],.fade-leave-to[data-v-83ff700a]{opacity:0}
+[data-vsbs-container][data-v-524792f4]{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-524792f4]{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-524792f4]{box-shadow:0 -5px 60px 0 var(--vsbs-shadow-color, rgba(89, 89, 89, .2))}[data-vsbs-sheet][data-v-524792f4]{background-color:var(--vsbs-background, #fff);border-top-left-radius:var(--vsbs-border-radius, 16px);border-top-right-radius:var(--vsbs-border-radius, 16px);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;transition:var(--56909704);visibility:hidden;width:100%;will-change:height;z-index:2}[data-vsbs-sheet-show=true][data-v-524792f4]{visibility:visible}[data-vsbs-header][data-v-524792f4]{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}[data-vsbs-header][data-v-524792f4]: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-524792f4]:empty{box-shadow:none;padding:12px var(--vsbs-padding-x, 16px) 8px}[data-vsbs-footer][data-v-524792f4]{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-524792f4]:empty{display:none}[data-vsbs-scroll][data-v-524792f4]{flex-grow:1;overflow-y:auto;overscroll-behavior:contain}[data-vsbs-content-wrapper][data-v-524792f4]{height:100%}[data-vsbs-content][data-v-524792f4]{display:grid;padding:1vh var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}.fade-enter-active[data-v-524792f4],.fade-leave-active[data-v-524792f4]{transition:var(--3f5ccd4e)}.fade-enter-from[data-v-524792f4],.fade-leave-to[data-v-524792f4]{opacity:0}

package/dist/types.d.ts

@@ -0,0 +1,9 @@
+export interface BottomSheetProps {
+    duration?: number;
+    snapPoints?: number[];
+    defaultSnapPoint?: number;
+    blocking?: boolean;
+    canSwipeClose?: boolean;
+    canBackdropClose?: boolean;
+    expandOnContentDrag?: boolean;
+}

package/package.json

@@ -1,94 +1,94 @@
-{
-  "name": "@douxcode/vue-spring-bottom-sheet",
-  "description": "Modern and Performant Bottom Sheet for Vue.js",
-  "keywords": [
-    "animation",
-    "bottom-drawer",
-    "bottom-sheet",
-    "bottomsheet",
-    "dialog",
-    "drag-drop",
-    "draggableview",
-    "drawer",
-    "gesture-control",
-    "modal",
-    "motion",
-    "overlay",
-    "popup",
-    "vue",
-    "vueuse/motion",
-    "vueuse/gesture",
-    "sheet",
-    "typescript"
-  ],
-  "author": "Arion Paul",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/megaarmos/vue-spring-bottom-sheet.git"
-  },
-  "homepage": "https://vue-spring-bottom-sheet.douxcode.com/",
-  "bugs": {
-    "url": "https://github.com/megaarmos/vue-spring-bottom-sheet/issues"
-  },
-  "private": false,
-  "version": "1.2.3",
-  "type": "module",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs"
-    },
-    "./dist/style.css": {
-      "import": "./dist/style.css",
-      "require": "./dist/style.css"
-    }
-  },
-  "main": "./dist/index.mjs",
-  "types": "dist/index.d.ts",
-  "scripts": {
-    "build": "vue-tsc -b && vite build",
-    "build:watch": "vite build --watch",
-    "type-check": "vue-tsc --build",
-    "lint": "eslint . --fix",
-    "format": "prettier --write src/",
-    "release": "npm run build && npm publish --access public"
-  },
-  "peerDependencies": {
-    "@vueuse/gesture": "^2.0.0",
-    "@vueuse/motion": "^2.2.6",
-    "vue": ">=3.3"
-  },
-  "dependencies": {
-    "@vueuse/core": "^12.5.0",
-    "@vueuse/gesture": "^2.0.0",
-    "@vueuse/integrations": "^12.5.0",
-    "@vueuse/motion": "^2.2.6",
-    "focus-trap": "^7.6.4",
-    "remeda": "^2.20.0",
-    "vue": "^3.5.13"
-  },
-  "devDependencies": {
-    "@types/node": "^22.10.10",
-    "@vitejs/plugin-vue": "^5.2.1",
-    "@vue/eslint-config-prettier": "^10.2.0",
-    "@vue/eslint-config-typescript": "^14.3.0",
-    "@vue/tsconfig": "^0.7.0",
-    "ajv": "^8.17.1",
-    "eslint": "^9.19.0",
-    "eslint-plugin-vue": "^9.32.0",
-    "prettier": "^3.4.2",
-    "typescript": "~5.6.3",
-    "vite": "^6.0.11",
-    "vite-plugin-dts": "^4.5.0",
-    "vue-tsc": "^2.2.0"
-  },
-  "files": [
-    "dist",
-    "README.md",
-    "LICENSE"
-  ],
-  "publishConfig": {
-    "access": "public"
-  }
-}
+{
+  "name": "@douxcode/vue-spring-bottom-sheet",
+  "description": "Modern and Performant Bottom Sheet for Vue.js",
+  "keywords": [
+    "animation",
+    "bottom-drawer",
+    "bottom-sheet",
+    "bottomsheet",
+    "dialog",
+    "drag-drop",
+    "draggableview",
+    "drawer",
+    "gesture-control",
+    "modal",
+    "motion",
+    "overlay",
+    "popup",
+    "vue",
+    "vueuse/motion",
+    "vueuse/gesture",
+    "sheet",
+    "typescript"
+  ],
+  "author": "Arion Paul",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/megaarmos/vue-spring-bottom-sheet.git"
+  },
+  "homepage": "https://vue-spring-bottom-sheet.douxcode.com/",
+  "bugs": {
+    "url": "https://github.com/megaarmos/vue-spring-bottom-sheet/issues"
+  },
+  "private": false,
+  "version": "1.2.5",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs"
+    },
+    "./dist/style.css": {
+      "import": "./dist/style.css",
+      "require": "./dist/style.css"
+    }
+  },
+  "main": "./dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "vue-tsc -b && vite build",
+    "build:watch": "vite build --watch",
+    "type-check": "vue-tsc --build",
+    "lint": "eslint . --fix",
+    "format": "prettier --write src/",
+    "release": "npm run build && npm publish --access public"
+  },
+  "peerDependencies": {
+    "@vueuse/gesture": "^2.0.0",
+    "@vueuse/motion": "^2.2.6",
+    "vue": ">=3.3"
+  },
+  "dependencies": {
+    "@vueuse/core": "^12.5.0",
+    "@vueuse/gesture": "^2.0.0",
+    "@vueuse/integrations": "^12.5.0",
+    "@vueuse/motion": "^2.2.6",
+    "focus-trap": "^7.6.4",
+    "remeda": "^2.20.0",
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.10",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/eslint-config-prettier": "^10.2.0",
+    "@vue/eslint-config-typescript": "^14.3.0",
+    "@vue/tsconfig": "^0.7.0",
+    "ajv": "^8.17.1",
+    "eslint": "^9.19.0",
+    "eslint-plugin-vue": "^9.32.0",
+    "prettier": "^3.4.2",
+    "typescript": "~5.6.3",
+    "vite": "^6.0.11",
+    "vite-plugin-dts": "^4.5.0",
+    "vue-tsc": "^2.2.0"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}