@douxcode/vue-spring-bottom-sheet 1.1.3 → 1.2.0

package/README.md

@@ -9,7 +9,11 @@
 # Installation
 
 ```
-npm install @douxcode/vue-bottom-sheet
+npm install @douxcode/vue-spring-bottom-sheet
+```
+
+```
+bun install @douxcode/vue-spring-bottom-sheet
 ```
 
 # Getting started
@@ -18,8 +22,8 @@ npm install @douxcode/vue-bottom-sheet
 
 ```vue
 <script setup>
-import BottomSheet from '@douxcode/vue-bottom-sheet'
-import '@douxcode/vue-bottom-sheet/dist/style.css'
+import BottomSheet from '@douxcode/vue-spring-bottom-sheet'
+import '@douxcode/vue-spring-bottom-sheet/dist/style.css'
 import { ref } from 'vue'
 
 const bottomSheet = ref(null)
@@ -42,8 +46,8 @@ const close = () => {
 
 ```vue
 <script setup lang="ts">
-import BottomSheet from '@douxcode/vue-bottom-sheet'
-import '@douxcode/vue-bottom-sheet/dist/style.css'
+import BottomSheet from '@douxcode/vue-spring-bottom-sheet'
+import '@douxcode/vue-spring-bottom-sheet/dist/style.css'
 import { ref } from 'vue'
 
 const bottomSheet = ref<InstanceType<typeof BottomSheet>>()

package/dist/BottomSheet.d.ts

@@ -1,4 +1,5 @@
 interface IProps {
+    duration?: number;
     snapPoints?: number[];
     defaultBreakpoint?: number;
     blocking?: boolean;
@@ -45,6 +46,7 @@ declare const __VLS_component: import('vue').DefineComponent<IProps, {
     onMinHeight?: ((minSheetHeight: number) => any) | undefined;
     onMaxHeight?: ((maxSheetHeight: number) => any) | undefined;
 }>, {
+    duration: number;
     blocking: boolean;
     canSwipeClose: boolean;
     canBackdropClose: boolean;

package/dist/index.mjs

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

package/dist/style.css

@@ -1 +1 @@
-[data-vsbs-backdrop][data-v-84fc7f9f]{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:100}[data-vsbs-shadow=true][data-v-84fc7f9f]{box-shadow:0 -5px 60px 0 var(--vsbs-shadow-color, rgba(89, 89, 89, .2))}[data-vsbs-sheet][data-v-84fc7f9f]{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:visibility .3s ease-in-out;visibility:hidden;width:100%;will-change:height;z-index:100}[data-vsbs-sheet-show=true][data-v-84fc7f9f]{visibility:visible}[data-vsbs-header][data-v-84fc7f9f]{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:1}[data-vsbs-header][data-v-84fc7f9f]: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-84fc7f9f]:empty{box-shadow:none;padding:12px var(--vsbs-padding-x, 16px) 8px}[data-vsbs-footer][data-v-84fc7f9f]{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-84fc7f9f]:empty{display:none}[data-vsbs-scroll][data-v-84fc7f9f]{flex-grow:1;overflow-y:auto;overscroll-behavior:contain}[data-vsbs-content-wrapper][data-v-84fc7f9f]{height:100%}[data-vsbs-content][data-v-84fc7f9f]{display:grid;padding:1vh var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}.fade-enter-active[data-v-84fc7f9f],.fade-leave-active[data-v-84fc7f9f]{transition:opacity .3s ease}.fade-enter-from[data-v-84fc7f9f],.fade-leave-to[data-v-84fc7f9f]{opacity:0}
+[data-vsbs-backdrop][data-v-37eb32bc]{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:100}[data-vsbs-shadow=true][data-v-37eb32bc]{box-shadow:0 -5px 60px 0 var(--vsbs-shadow-color, rgba(89, 89, 89, .2))}[data-vsbs-sheet][data-v-37eb32bc]{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(--702e831e);visibility:hidden;width:100%;will-change:height;z-index:100}[data-vsbs-sheet-show=true][data-v-37eb32bc]{visibility:visible}[data-vsbs-header][data-v-37eb32bc]{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:1}[data-vsbs-header][data-v-37eb32bc]: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-37eb32bc]:empty{box-shadow:none;padding:12px var(--vsbs-padding-x, 16px) 8px}[data-vsbs-footer][data-v-37eb32bc]{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-37eb32bc]:empty{display:none}[data-vsbs-scroll][data-v-37eb32bc]{flex-grow:1;overflow-y:auto;overscroll-behavior:contain}[data-vsbs-content-wrapper][data-v-37eb32bc]{height:100%}[data-vsbs-content][data-v-37eb32bc]{display:grid;padding:1vh var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}.fade-enter-active[data-v-37eb32bc],.fade-leave-active[data-v-37eb32bc]{transition:var(--2476b37f)}.fade-enter-from[data-v-37eb32bc],.fade-leave-to[data-v-37eb32bc]{opacity:0}

package/package.json

@@ -32,7 +32,7 @@
     "url": "https://github.com/megaarmos/vue-spring-bottom-sheet/issues"
   },
   "private": false,
-  "version": "1.1.3",
+  "version": "1.2.0",
   "type": "module",
   "exports": {
     ".": {
@@ -55,9 +55,9 @@
     "release": "npm run build && npm publish --access public"
   },
   "peerDependencies": {
-    "vue": ">=3.3",
     "@vueuse/gesture": "^2.0.0",
-    "@vueuse/motion": "^2.2.6"
+    "@vueuse/motion": "^2.2.6",
+    "vue": ">=3.3"
   },
   "dependencies": {
     "@vueuse/core": "^12.0.0",
@@ -66,17 +66,17 @@
     "@vueuse/motion": "^2.2.6",
     "focus-trap": "^7",
     "remeda": "^2.19.0",
-    "vue": "^3.5.13"
+    "vue": ">=3.3"
   },
   "devDependencies": {
-    "ajv": "^8.17.1",
+    "@types/node": "^22.10.2",
+    "@vitejs/plugin-vue": "^5.2.1",
     "@vue/eslint-config-prettier": "^10.1.0",
     "@vue/eslint-config-typescript": "^14.2.0",
+    "@vue/tsconfig": "^0.7.0",
+    "ajv": "^8.17.1",
     "eslint": "^9.17.0",
     "eslint-plugin-vue": "^9.32.0",
-    "@types/node": "^22.10.2",
-    "@vitejs/plugin-vue": "^5.2.1",
-    "@vue/tsconfig": "^0.7.0",
     "prettier": "^3.4.2",
     "typescript": "~5.6.2",
     "vite": "^6.0.1",