@douxcode/vue-spring-bottom-sheet 1.1.4 → 1.2.1

package/README.md

@@ -13,7 +13,7 @@ npm install @douxcode/vue-spring-bottom-sheet
 ```
 
 ```
-bun i @douxcode/vue-spring-bottom-sheet
+bun install @douxcode/vue-spring-bottom-sheet
 ```
 
 # Getting started
@@ -22,8 +22,8 @@ bun i @douxcode/vue-spring-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)
@@ -46,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 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 we, vShow as Se, 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(o, u, a) {
+  let e = (n) => o(n, ...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 _e(o, u, a) {
+  let e = o.length - u.length;
+  if (e === 0) return o(...u);
+  if (e === 1) return Me(o, 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 = () => {
-    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();
+function Be(o, { triggerAt: u = "end", minQuietPeriodMs: a, maxBurstDurationMs: e, minGapMs: n, reducer: v = He }) {
+  let s, r, f, w, C = () => {
+    let d = f;
+    d !== void 0 && (f = void 0, o(d), n !== void 0 && (r = setTimeout(O, n)));
+  }, 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) => {
+  return { call: (...d) => {
     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 ((u !== "start" || g) && (f = v(f, ...d)), !(s === void 0 && !g)) {
+      if (a !== void 0 || e !== void 0 || n === 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 = () => "";
-function $(...n) {
-  return De(_e, n);
+var He = () => "";
+function $(...o) {
+  return _e(Oe, o);
 }
-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 Oe = (o, { min: u, max: a }) => u !== void 0 && o < u ? u : a !== void 0 && o > a ? a : o;
+function Pe(o, u) {
+  const a = y(() => o.value.sort()), e = y(() => a.value[0]), n = y(() => a.value[a.value.length - 1]), v = 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,
-    maxSnap: o,
-    snapPoints: n,
-    closestSnapPointIndex: c
+    minSnap: e,
+    maxSnap: n,
+    snapPoints: o,
+    closestSnapPointIndex: v
   };
 }
-const He = { "data-vsbs-container": "" }, Pe = ["data-vsbs-shadow", "data-vsbs-sheet-show"], Oe = /* @__PURE__ */ ie({
+const Ee = { "data-vsbs-container": "" }, Ie = ["data-vsbs-shadow", "data-vsbs-sheet-show"], $e = /* @__PURE__ */ ve({
   __name: "BottomSheet",
   props: {
+    duration: { default: 250 },
     snapPoints: {},
     defaultBreakpoint: {},
     blocking: { type: Boolean, default: !0 },
@@ -72,164 +73,182 @@ const He = { "data-vsbs-container": "" }, Pe = ["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 }) {
-    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,
+  setup(o, { expose: u, emit: a }) {
+    de((i) => ({
+      "547540e6": te.value,
+      "5567c570": ae.value
+    }));
+    const e = o, n = a, v = p(null), s = p(null), r = p(null), f = p(null), w = p(null), C = p(null), O = p(null), S = 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);
+    let G = xe([v, O], {
+      immediate: !1,
+      fallbackFocus: () => v.value || document.body
+    });
+    const 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: oe, motionValues: M } = Ce(), { set: _, stop: F } = De(
+      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: ne } = ce(e), le = y(() => ne.value ?? [k.value]), {
+      minSnap: B,
+      maxSnap: H,
+      snapPoints: T,
+      closestSnapPointIndex: L
+    } = Pe(le, t), Q = Z(document.body), j = Z(document.documentElement), K = (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));
+    }, ue = () => {
+      v.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, Q.value = !0, j.value = !0, window.addEventListener("keydown", K), e.blocking && setTimeout(() => {
+        M.value.y.get() - 0 < 0.1 && (n("opened"), G.activate());
+      }, 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();
+      v.value && (x("y", h.value, D, {
+        type: "tween",
+        bounce: 0,
+        duration: e.duration
+      }), S.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 && n("closed");
+      }, e.duration));
+    }, ie = () => {
+      e.canBackdropClose && E();
     };
-    function le(i) {
-      v.value && i.preventDefault();
+    function se(i) {
+      d.value && i.preventDefault();
     }
-    const F = (i) => {
-      e.value = i, D("height", e.value, C, {
+    const V = (i) => {
+      t.value = i, x("height", t.value, D, {
         type: "tween",
         easings: "easeInOut",
         bounce: 0,
-        duration: 300
+        duration: e.duration
       });
-    }, j = ({
-      delta: [i, d],
-      direction: [O, m]
+    }, U = ({
+      delta: [i, c],
+      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), {
+      v.value && (l.value <= 0 && (t.value -= c), t.value <= B.value && (t.value = B.value, l.value += c, _({
+        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(
-        (i, d) => Math.abs(d - l.value) < Math.abs(i - l.value) ? d : i
-      ) : 0, D("y", l.value, C, {
+      }), m > 0 ? n("dragging-down") : m < 0 && n("dragging-up"));
+    }, X = () => {
+      v.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: 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[L.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(), F();
         },
-        onDrag: j,
-        onDragEnd: L
+        onDrag: U,
+        onDragEnd: X
       },
       {
         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(), F();
         },
-        onDrag: j,
-        onDragEnd: L
+        onDrag: U,
+        onDragEnd: X
       },
       {
         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));
+        onDragStart: ({ direction: [i, c] }) => {
+          t.value = h.value, l.value = M.value.y.get(), F();
+          const P = f.value.scrollTop === 0, m = c > 0;
+          T.value.length === 1 ? l.value === 0 && P && (d.value = m) : (e.expandOnContentDrag && t.value !== H.value && (d.value = !0), t.value === H.value && P && (d.value = m));
         },
-        onDrag: ({ delta: [i, d], direction: [O, m] }) => {
-          if (!t.expandOnContentDrag) {
-            v.value = !1;
+        onDrag: ({ delta: [i, c], direction: [P, m] }) => {
+          if (!e.expandOnContentDrag) {
+            d.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
-          }), m > 0 ? o("dragging-down") : m < 0 && o("dragging-up");
+          if (!v.value) return;
+          l.value === 0 && d.value && e.expandOnContentDrag && (t.value -= c), t.value <= B.value && (t.value = B.value, d.value && e.expandOnContentDrag && (l.value += c), 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 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), _({
+            height: t.value
+          }), m > 0 ? n("dragging-down") : m < 0 && n("dragging-up");
         },
-        onDragEnd: L
+        onDragEnd: X
       },
       {
-        domTarget: y,
+        domTarget: w,
         drag: { filterTaps: !0 }
       }
     );
-    const ue = xe(
+    const re = Be(
       () => {
-        o("maxHeight", g.value), z(() => {
-          e.value = k.value[A.value], F(k.value[A.value]);
+        n("maxHeight", g.value), A(() => {
+          t.value = T.value[L.value], V(T.value[L.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 J(g, () => {
+      re.call();
+    }), J(k, () => {
+      n("minHeight", k.value), T.value.length === 1 && A(() => {
+        T.value[0] === k.value && V(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(() => {
-        o("ready");
+    }), fe(() => {
+      n("minHeight", k.value), n("maxHeight", g.value), t.value = e.defaultBreakpoint ?? Number(k.value), _({
+        height: t.value,
+        y: t.value
+      }), A(() => {
+        n("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: ue, close: E, snapToPoint: V }), (i, c) => (ge(), pe(he, { to: "body" }, [
+      b("div", Ee, [
+        me(be, { name: "fade" }, {
+          default: ye(() => [
+            we(b("div", {
               ref_key: "backdrop",
-              ref: P,
+              ref: O,
               "data-vsbs-backdrop": "",
-              onClick: d[0] || (d[0] = (O) => oe())
+              onClick: c[0] || (c[0] = (P) => ie())
             }, null, 512), [
-              [me, w.value && i.blocking]
+              [Se, S.value && i.blocking]
             ])
           ]),
           _: 1
         }),
         b("div", {
           ref_key: "sheet",
-          ref: c,
+          ref: v,
           "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 +258,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: se
           }, [
             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 +285,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, Ie)
       ])
     ]));
   }
-}), Ee = (n, u) => {
-  const a = n.__vccOpts || n;
-  for (const [t, o] of u)
-    a[t] = o;
+}), We = (o, u) => {
+  const a = o.__vccOpts || o;
+  for (const [e, n] of u)
+    a[e] = n;
   return a;
-}, Fe = /* @__PURE__ */ Ee(Oe, [["__scopeId", "data-v-84fc7f9f"]]);
+}, Re = /* @__PURE__ */ We($e, [["__scopeId", "data-v-fbbc3cbe"]]);
 export {
-  Fe as default
+  Re 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-container][data-v-fbbc3cbe]{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-fbbc3cbe]{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-fbbc3cbe]{box-shadow:0 -5px 60px 0 var(--vsbs-shadow-color, rgba(89, 89, 89, .2))}[data-vsbs-sheet][data-v-fbbc3cbe]{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(--547540e6);visibility:hidden;width:100%;will-change:height;z-index:2}[data-vsbs-sheet-show=true][data-v-fbbc3cbe]{visibility:visible}[data-vsbs-header][data-v-fbbc3cbe]{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-fbbc3cbe]: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-fbbc3cbe]:empty{box-shadow:none;padding:12px var(--vsbs-padding-x, 16px) 8px}[data-vsbs-footer][data-v-fbbc3cbe]{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-fbbc3cbe]:empty{display:none}[data-vsbs-scroll][data-v-fbbc3cbe]{flex-grow:1;overflow-y:auto;overscroll-behavior:contain}[data-vsbs-content-wrapper][data-v-fbbc3cbe]{height:100%}[data-vsbs-content][data-v-fbbc3cbe]{display:grid;padding:1vh var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}.fade-enter-active[data-v-fbbc3cbe],.fade-leave-active[data-v-fbbc3cbe]{transition:var(--5567c570)}.fade-enter-from[data-v-fbbc3cbe],.fade-leave-to[data-v-fbbc3cbe]{opacity:0}

package/package.json

@@ -32,7 +32,7 @@
     "url": "https://github.com/megaarmos/vue-spring-bottom-sheet/issues"
   },
   "private": false,
-  "version": "1.1.4",
+  "version": "1.2.1",
   "type": "module",
   "exports": {
     ".": {
@@ -60,7 +60,6 @@
     "vue": ">=3.3"
   },
   "dependencies": {
-    "@douxcode/vue-spring-bottom-sheet": "^1.1.3",
     "@vueuse/core": "^12.0.0",
     "@vueuse/gesture": "^2.0.0",
     "@vueuse/integrations": "^12.0.0",