@douxcode/vue-spring-bottom-sheet 2.6.0-next.1 → 3.0.0-next.1

package/dist/index.mjs

@@ -1,12 +1,12 @@
-import { ref as g, computed as I, defineComponent as Re, useCssVars as Le, watch as U, onMounted as _e, toRefs as Ae, nextTick as ge, onUnmounted as Ve, createElementBlock as ae, openBlock as V, Fragment as We, createBlock as we, Teleport as Se, createVNode as Ce, Transition as be, withCtx as ye, createCommentVNode as Pe, unref as le, normalizeStyle as ze, createElementVNode as W, normalizeClass as oe, renderSlot as ue } from "vue";
-import { useVModel as Ne, useWindowSize as qe, useElementBounding as J, useScrollLock as Te } from "@vueuse/core";
-import { useFocusTrap as Qe } from "@vueuse/integrations/useFocusTrap";
-function z(o, l) {
-  const r = parseFloat(o);
-  return l * r / 100;
+import { ref as m, computed as I, defineComponent as Le, useCssVars as _e, watch as J, onMounted as Ae, toRefs as Ve, nextTick as we, onUnmounted as We, createElementBlock as le, openBlock as W, Fragment as ze, createBlock as Se, Teleport as Ce, createVNode as be, Transition as ye, withCtx as Pe, createCommentVNode as Te, unref as oe, normalizeStyle as Ne, createElementVNode as z, normalizeClass as ue, renderSlot as se } from "vue";
+import { useVModel as qe, useWindowSize as Qe, useElementBounding as X, useScrollLock as ke } from "@vueuse/core";
+import { useFocusTrap as je } from "@vueuse/integrations/useFocusTrap";
+function N(o, l) {
+  const s = parseFloat(o);
+  return l * s / 100;
 }
-function je(o, l, r) {
-  const t = g(0), v = I(() => o.value.map((b) => typeof b == "string" ? z(b, r.value) : b)), C = I(() => Math.min(...v.value)), i = I(() => Math.max(...v.value)), y = I(() => {
+function Ge(o, l, s) {
+  const t = m(0), v = I(() => o.value.map((b) => typeof b == "string" ? N(b, s.value) : b)), C = I(() => Math.min(...v.value)), i = I(() => Math.max(...v.value)), y = I(() => {
     const b = v.value.reduce(
       (P, w) => Math.abs(w - l.value) < Math.abs(P - l.value) ? w : P
     );
@@ -20,12 +20,12 @@ function je(o, l, r) {
     closestSnapPointIndex: y
   };
 }
-function Ge(o = {}) {
-  const { velocityThreshold: l = 0.5 } = o, r = g(0), t = g(0), v = g(0), C = g(0), i = g([]);
+function Ke(o = {}) {
+  const { velocityThreshold: l = 0.5 } = o, s = m(0), t = m(0), v = m(0), C = m(0), i = m([]);
   return {
     start: (w) => {
       const S = performance.now();
-      r.value = w, t.value = S, v.value = w, C.value = S, i.value = [{ y: w, time: S }];
+      s.value = w, t.value = S, v.value = w, C.value = S, i.value = [{ y: w, time: S }];
     },
     update: (w) => {
       const S = performance.now();
@@ -50,17 +50,17 @@ function Ge(o = {}) {
     }
   };
 }
-function Ke(o, l, r) {
+function Ue(o, l, s) {
   let t = (v) => o(v, ...l);
-  return r === void 0 ? t : Object.assign(t, { lazy: r, lazyArgs: l });
+  return s === void 0 ? t : Object.assign(t, { lazy: s, lazyArgs: l });
 }
-function Ue(o, l, r) {
+function Je(o, l, s) {
   let t = o.length - l.length;
   if (t === 0) return o(...l);
-  if (t === 1) return Ke(o, l, r);
+  if (t === 1) return Ue(o, l, s);
   throw new Error("Wrong number of arguments");
 }
-function Je(o, { triggerAt: l = "end", minQuietPeriodMs: r, maxBurstDurationMs: t, minGapMs: v, reducer: C = Xe }) {
+function Xe(o, { triggerAt: l = "end", minQuietPeriodMs: s, maxBurstDurationMs: t, minGapMs: v, reducer: C = Ze }) {
   let i, y, b, P, w = () => {
     let d = b;
     d !== void 0 && (b = void 0, o(d), v !== void 0 && (y = setTimeout(S, v)));
@@ -72,11 +72,11 @@ function Je(o, { triggerAt: l = "end", minQuietPeriodMs: r, maxBurstDurationMs:
   return { call: (...d) => {
     let h = i === void 0 && y === void 0;
     if ((l !== "start" || h) && (b = C(b, ...d)), !(i === void 0 && !h)) {
-      if (r !== void 0 || t !== void 0 || v === void 0) {
+      if (s !== void 0 || t !== void 0 || v === void 0) {
         clearTimeout(i);
         let D = Date.now();
         P ?? (P = D);
-        let $ = t === void 0 ? r ?? 0 : Math.min(r ?? t, t - (D - P));
+        let $ = t === void 0 ? s ?? 0 : Math.min(s ?? t, t - (D - P));
         i = setTimeout(M, $);
       }
       l !== "end" && h && w();
@@ -89,24 +89,24 @@ function Je(o, { triggerAt: l = "end", minQuietPeriodMs: r, maxBurstDurationMs:
     return i === void 0 && y === void 0;
   } };
 }
-var Xe = () => "";
+var Ze = () => "";
 function T(...o) {
-  return Ue(Ze, o);
+  return Je(et, o);
 }
-var Ze = (o, { min: l, max: r }) => l !== void 0 && o < l ? l : r !== void 0 && o > r ? r : o;
-function et(o, l, r) {
-  return Math.max(l, Math.min(o, r));
+var et = (o, { min: l, max: s }) => l !== void 0 && o < l ? l : s !== void 0 && o > s ? s : o;
+function tt(o, l, s) {
+  return Math.max(l, Math.min(o, s));
 }
-function tt(o, l) {
+function nt(o, l) {
   return Math.pow(o, l * 5);
 }
-function ke(o, l, r) {
-  return l === 0 || Math.abs(l) === 1 / 0 ? tt(o, r) : o * l * r / (l + r * o);
+function xe(o, l, s) {
+  return l === 0 || Math.abs(l) === 1 / 0 ? nt(o, s) : o * l * s / (l + s * o);
 }
-function se(o, l, r, t = 0.15) {
-  return t === 0 ? et(o, l, r) : o < l ? -ke(l - o, r - l, t) + l : o > r ? +ke(o - r, r - l, t) + r : o;
+function re(o, l, s, t = 0.15) {
+  return t === 0 ? tt(o, l, s) : o < l ? -xe(l - o, s - l, t) + l : o > s ? +xe(o - s, s - l, t) + s : o;
 }
-const nt = ["data-vsbs-shadow", "data-vsbs-sheet-show"], at = /* @__PURE__ */ Re({
+const at = ["data-vsbs-shadow", "data-vsbs-sheet-show"], lt = /* @__PURE__ */ Le({
   __name: "BottomSheet",
   props: {
     duration: { default: 250 },
@@ -125,385 +125,385 @@ const nt = ["data-vsbs-shadow", "data-vsbs-sheet-show"], at = /* @__PURE__ */ Re
     footerClass: {}
   },
   emits: ["opened", "opening-started", "closed", "closing-started", "ready", "dragging-up", "dragging-down", "snapped", "instinctHeight", "update:modelValue"],
-  setup(o, { expose: l, emit: r }) {
-    Le((e) => ({
-      "55bcd70e": xe.value
+  setup(o, { expose: l, emit: s }) {
+    _e((e) => ({
+      "03a2828a": Ye.value
     }));
-    const t = o, v = r, C = Ne(t, "modelValue", v, {
+    const t = o, v = s, C = qe(t, "modelValue", v, {
       passive: !0
     });
-    U(C, (e) => {
-      e && te();
-    }), _e(() => {
-      C.value && te();
+    J(C, (e) => {
+      e && ne();
+    }), Ae(() => {
+      C.value && ne();
     });
-    const i = g(null), y = g(null), b = g(null), P = g(null), w = g(null), S = g(null), M = g(null), d = g(t.expandOnContentDrag), { height: h } = qe(), { height: D } = J(i), { height: $ } = J(y), { height: L } = J(S), { height: re } = J(b), X = I({
+    const i = m(null), y = m(null), b = m(null), P = m(null), w = m(null), S = m(null), M = m(null), d = m(t.expandOnContentDrag), { height: h } = Qe(), { height: D } = X(i), { height: $ } = X(y), { height: L } = X(S), { height: ie } = X(b), Z = I({
       get() {
         return T(
-          Math.ceil(L.value + $.value + re.value),
+          Math.ceil(L.value + $.value + ie.value),
           {
             max: h.value
           }
         );
       },
       set(e) {
-        [$.value, L.value, re.value] = e;
+        [$.value, L.value, ie.value] = e;
       }
-    }), a = g(0), u = g(0), xe = I(() => t.duration + "ms"), { snapPoints: Ye } = Ae(t), f = I(() => Ye.value ?? [X.value]), {
-      flattenedSnapPoints: k,
+    }), a = m(0), u = m(0), Ye = I(() => t.duration + "ms"), { snapPoints: Me } = Ve(t), p = I(() => Me.value ?? [Z.value]), {
+      flattenedSnapPoints: x,
       currentSnapPointIndex: B,
       closestSnapPointIndex: F,
       minSnapPoint: O,
       maxSnapPoint: _
-    } = je(f, a, h), N = Te(document.body), q = Te(document.documentElement), E = g(!1), A = g(0), Q = g(0), j = g(0), H = g(0), G = g(!0), R = Ge({ velocityThreshold: 0.5 }), Z = Qe([i, M], {
+    } = Ge(p, a, h), q = ke(document.body), Q = ke(document.documentElement), E = m(!1), A = m(0), j = m(0), G = m(0), H = m(0), K = m(!0), R = Ke({ velocityThreshold: 0.5 }), ee = je([i, M], {
       immediate: !1,
       fallbackFocus: () => i.value || document.body
     });
-    function ie(e) {
-      d.value = !0, ve(e);
-    }
     function ve(e) {
+      d.value = !0, ce(e);
+    }
+    function ce(e) {
       d.value && e.preventDefault();
     }
-    const ce = (e) => {
-      e.key === "Escape" && x();
-    }, Me = () => {
-      t.canBackdropClose && x();
+    const de = (e) => {
+      e.key === "Escape" && Y();
+    }, De = () => {
+      t.canBackdropClose && Y();
     };
-    let ee = !1;
-    const te = async () => {
-      if (ee) return;
-      C.value = !0, ee = !0, v("opening-started"), t.blocking && (N.value = !0, q.value = !0), await ge();
+    let te = !1;
+    const ne = async () => {
+      if (te) return;
+      C.value = !0, te = !0, v("opening-started"), t.blocking && (q.value = !0, Q.value = !0), await we();
       const e = i.value;
       D.value = e.getBoundingClientRect().height;
-      const n = e.querySelector("[data-vsbs-content]"), s = e.querySelector("[data-vsbs-header]"), p = e.querySelector("[data-vsbs-footer]");
-      if (X.value = [
-        s.getBoundingClientRect().height,
+      const n = e.querySelector("[data-vsbs-content]"), r = e.querySelector("[data-vsbs-header]"), c = e.querySelector("[data-vsbs-footer]");
+      if (Z.value = [
+        r.getBoundingClientRect().height,
         n.getBoundingClientRect().height,
-        p.getBoundingClientRect().height
-      ], await ge(), B.value = k.value.findIndex(
-        (c) => c === O.value
+        c.getBoundingClientRect().height
+      ], await we(), B.value = x.value.findIndex(
+        (f) => f === O.value
       ), t.initialSnapPoint) {
-        const c = t.initialSnapPoint;
-        if (c < 0 || c >= f.value.length) {
+        const f = t.initialSnapPoint;
+        if (f < 0 || f >= p.value.length) {
           console.warn("Index out of bounds");
           return;
         }
-        let m;
-        typeof f.value[c] == "number" ? m = T(f.value[c], {
+        let g;
+        typeof p.value[f] == "number" ? g = T(p.value[f], {
           max: h.value
-        }) : m = z(f.value[c], h.value), a.value = m;
+        }) : g = N(p.value[f], h.value), a.value = g;
       } else
         a.value = T(O.value, {
           max: h.value
         });
       u.value = a.value, requestAnimationFrame(() => {
         u.value = 0, t.blocking && setTimeout(() => {
-          C.value && (v("opened"), Z.activate());
+          C.value && (v("opened"), ee.activate());
         }, t.duration);
-      }), window.addEventListener("keydown", ce), ee = !1;
+      }), window.addEventListener("keydown", de), te = !1;
     };
-    let ne = !1;
-    const x = () => {
-      ne || (C.value = !1, ne = !0, v("closing-started"), t.blocking && (N.value = !1, q.value = !1), window.removeEventListener("keydown", ce), t.blocking && Z.deactivate(), u.value = a.value, setTimeout(() => {
-        v("closed"), ne = !1;
+    let ae = !1;
+    const Y = () => {
+      ae || (C.value = !1, ae = !0, v("closing-started"), t.blocking && (q.value = !1, Q.value = !1), window.removeEventListener("keydown", de), t.blocking && ee.deactivate(), u.value = a.value, setTimeout(() => {
+        v("closed"), ae = !1;
       }, t.duration));
-    }, de = (e) => {
-      if (!f.value) return;
-      if (e < 0 || e >= f.value.length) {
+    }, fe = (e) => {
+      if (!p.value) return;
+      if (e < 0 || e >= p.value.length) {
         console.warn("Index out of bounds");
         return;
       }
       B.value = e;
       let n;
-      typeof f.value[e] == "number" ? n = T(f.value[e], {
+      typeof p.value[e] == "number" ? n = T(p.value[e], {
         max: h.value
-      }) : n = z(f.value[e], h.value), a.value = n, v("snapped", f.value.indexOf(f.value[e]));
+      }) : n = N(p.value[e], h.value), a.value = n, v("snapped", p.value.indexOf(p.value[e]));
     };
-    function fe(e) {
+    function pe(e) {
       e > 0 ? v("dragging-down") : e < 0 && v("dragging-up");
     }
-    const pe = (e) => {
+    const he = (e) => {
       if (!i.value) return;
-      const n = window.getComputedStyle(i.value), s = parseFloat(n.height);
-      let p = 0;
-      n.transform && n.transform !== "none" && (p = new DOMMatrix(n.transform).m42), a.value = s, u.value = p, E.value = !0, A.value = e.clientY, Q.value = a.value, j.value = u.value, H.value = e.clientY, R.start(e.clientY), e.target.setPointerCapture(e.pointerId);
-    }, he = (e) => {
+      const n = window.getComputedStyle(i.value), r = parseFloat(n.height);
+      let c = 0;
+      n.transform && n.transform !== "none" && (c = new DOMMatrix(n.transform).m42), a.value = r, u.value = c, E.value = !0, A.value = e.clientY, j.value = a.value, G.value = u.value, H.value = e.clientY, R.start(e.clientY), e.target.setPointerCapture(e.pointerId);
+    }, me = (e) => {
       if (!E.value) return;
-      const n = e.clientY - A.value, s = e.clientY;
-      u.value <= 0 && (a.value = Q.value - n), a.value <= O.value && (a.value = O.value, u.value = j.value + n, t.canSwipeClose ? u.value = T(u.value, { min: 0 }) : u.value = T(
-        se(u.value, -D.value, 0, 0.5),
+      const n = e.clientY - A.value, r = e.clientY;
+      u.value <= 0 && (a.value = j.value - n), a.value <= O.value && (a.value = O.value, u.value = G.value + n, t.canSwipeClose ? u.value = T(u.value, { min: 0 }) : u.value = T(
+        re(u.value, -D.value, 0, 0.5),
         { min: 0 }
-      )), a.value = T(se(a.value, 0, _.value, 0.25), {
+      )), a.value = T(re(a.value, 0, _.value, 0.25), {
         min: 0,
         max: h.value
-      }), fe(e.clientY - H.value), R.update(e.clientY), H.value = s;
-    }, K = (e) => {
+      }), pe(e.clientY - H.value), R.update(e.clientY), H.value = r;
+    }, U = (e) => {
       if (E.value = !1, e.target.releasePointerCapture(e.pointerId), t.canSwipeClose) {
-        let c = a.value / 2;
-        if (t.swipeCloseThreshold && typeof t.swipeCloseThreshold == "number" && (c = t.swipeCloseThreshold), t.swipeCloseThreshold && typeof t.swipeCloseThreshold == "string" && t.swipeCloseThreshold.includes("%") && (c = a.value * (Number(t.swipeCloseThreshold.replace("%", "")) / 100)), u.value > c) {
-          u.value = a.value, x();
+        let f = a.value / 2;
+        if (t.swipeCloseThreshold && typeof t.swipeCloseThreshold == "number" && (f = t.swipeCloseThreshold), t.swipeCloseThreshold && typeof t.swipeCloseThreshold == "string" && t.swipeCloseThreshold.includes("%") && (f = a.value * (Number(t.swipeCloseThreshold.replace("%", "")) / 100)), u.value > f) {
+          u.value = a.value, Y();
           return;
         }
       } else
         u.value = 0;
       if (u.value === a.value) {
-        u.value = 0, x();
+        u.value = 0, Y();
         return;
       }
       const n = R.end();
       if (n.isSwipe && n.direction === "down" && t.canSwipeClose && a.value <= O.value + 10) {
-        u.value = a.value, x();
+        u.value = a.value, Y();
         return;
       }
-      let s;
-      if (n.isSwipe && k.value.length > 1) {
-        const c = [...k.value].sort((m, Y) => m - Y);
+      let r;
+      if (n.isSwipe && x.value.length > 1) {
+        const f = [...x.value].sort((g, k) => g - k);
         if (n.direction === "up") {
-          const m = c.find((Y) => Y > a.value + 1);
-          s = m !== void 0 ? k.value.indexOf(m) : F.value;
+          const g = f.find((k) => k > a.value + 1);
+          r = g !== void 0 ? x.value.indexOf(g) : F.value;
         } else {
-          const m = [...c].reverse().find((Y) => Y < a.value - 1);
-          s = m !== void 0 ? k.value.indexOf(m) : F.value;
+          const g = [...f].reverse().find((k) => k < a.value - 1);
+          r = g !== void 0 ? x.value.indexOf(g) : F.value;
         }
       } else
-        s = F.value;
-      B.value = s;
-      let p;
-      if (typeof f.value[s] == "number" ? p = T(f.value[s], {
+        r = F.value;
+      B.value = r;
+      let c;
+      if (typeof p.value[r] == "number" ? c = T(p.value[r], {
         max: h.value
-      }) : p = z(
-        f.value[s],
+      }) : c = N(
+        p.value[r],
         h.value
-      ), p === 0) {
-        x();
+      ), c === 0) {
+        Y();
         return;
       }
-      a.value = p, u.value = 0, v("snapped", f.value.indexOf(f.value[s]));
-    }, De = (e) => {
+      a.value = c, u.value = 0, v("snapped", p.value.indexOf(p.value[r]));
+    }, Oe = (e) => {
       if (!P.value) return;
-      const n = P.value.scrollTop === 0, s = e > 0, p = k.value.length === 1, c = 0.5 > Math.abs(a.value - _.value);
-      if (console.log(e), p) {
+      const n = P.value.scrollTop === 0, r = e > 0, c = x.value.length === 1, f = 0.5 > Math.abs(a.value - _.value);
+      if (console.log(e), c) {
         if (!t.expandOnContentDrag) {
           d.value = !1;
           return;
         }
-        u.value === 0 && n && s && (d.value = !0), u.value === 0 && n && !s && (d.value = !1);
+        u.value === 0 && n && r && (d.value = !0), u.value === 0 && n && !r && (d.value = !1);
       } else {
         if (!t.expandOnContentDrag) {
           d.value = !1;
           return;
         }
-        d.value = !0, c && (s && n && (d.value = !0), !s && n && (d.value = !1), n || (d.value = !1));
+        d.value = !0, f && (r && n && (d.value = !0), !r && n && (d.value = !1), n || (d.value = !1));
       }
-    }, Oe = (e) => {
-      if (!i.value) return;
-      const n = window.getComputedStyle(i.value), s = parseFloat(n.height);
-      let p = 0;
-      n.transform && n.transform !== "none" && (p = new DOMMatrix(n.transform).m42), a.value = s, u.value = p, E.value = !0, A.value = e.clientY, Q.value = a.value, j.value = u.value, H.value = e.clientY, G.value = !0, R.start(e.clientY), e.target.setPointerCapture(e.pointerId);
     }, Be = (e) => {
+      if (!i.value) return;
+      const n = window.getComputedStyle(i.value), r = parseFloat(n.height);
+      let c = 0;
+      n.transform && n.transform !== "none" && (c = new DOMMatrix(n.transform).m42), a.value = r, u.value = c, E.value = !0, A.value = e.clientY, j.value = a.value, G.value = u.value, H.value = e.clientY, K.value = !0, R.start(e.clientY), e.target.setPointerCapture(e.pointerId);
+    }, Ee = (e) => {
       if (!E.value) return;
       if (!t.expandOnContentDrag) {
         d.value = !1;
         return;
       }
-      const n = e.clientY - A.value, s = e.clientY, p = e.clientY - H.value;
-      if (G.value) {
-        const m = e.clientY - A.value;
-        if (Math.abs(m) > 3)
-          G.value = !1, De(m);
+      const n = e.clientY - A.value, r = e.clientY, c = e.clientY - H.value;
+      if (K.value) {
+        const g = e.clientY - A.value;
+        if (Math.abs(g) > 3)
+          K.value = !1, Oe(g);
         else {
-          H.value = s;
+          H.value = r;
           return;
         }
       }
-      u.value === 0 && d.value && t.expandOnContentDrag && (a.value = Q.value - n), a.value <= O.value && (a.value = O.value, d.value && t.expandOnContentDrag && (u.value = j.value + n), u.value = T(u.value, { min: 0, max: O.value }), t.canSwipeClose ? u.value = T(u.value, { min: 0 }) : u.value = T(
-        se(u.value, -D.value, 0, 0.5),
+      u.value === 0 && d.value && t.expandOnContentDrag && (a.value = j.value - n), a.value <= O.value && (a.value = O.value, d.value && t.expandOnContentDrag && (u.value = G.value + n), u.value = T(u.value, { min: 0, max: O.value }), t.canSwipeClose ? u.value = T(u.value, { min: 0 }) : u.value = T(
+        re(u.value, -D.value, 0, 0.5),
         { min: 0 }
-      )), a.value > _.value && (a.value = _.value), a.value = T(a.value, { max: h.value }), k.value.length === 1 || a.value === _.value && (d.value = !1), fe(p), R.update(e.clientY), H.value = s;
-    }, me = (e) => {
-      if (E.value = !1, G.value = !0, e.target.releasePointerCapture(e.pointerId), t.canSwipeClose) {
-        let c = a.value / 2;
-        if (t.swipeCloseThreshold && typeof t.swipeCloseThreshold == "number" && (c = t.swipeCloseThreshold), t.swipeCloseThreshold && typeof t.swipeCloseThreshold == "string" && t.swipeCloseThreshold.includes("%") && (c = a.value * (Number(t.swipeCloseThreshold.replace("%", "")) / 100)), u.value > c) {
-          u.value = a.value, x();
+      )), a.value > _.value && (a.value = _.value), a.value = T(a.value, { max: h.value }), x.value.length === 1 || a.value === _.value && (d.value = !1), pe(c), R.update(e.clientY), H.value = r;
+    }, ge = (e) => {
+      if (E.value = !1, K.value = !0, e.target.releasePointerCapture(e.pointerId), t.canSwipeClose) {
+        let g = a.value / 2;
+        if (t.swipeCloseThreshold && typeof t.swipeCloseThreshold == "number" && (g = t.swipeCloseThreshold), t.swipeCloseThreshold && typeof t.swipeCloseThreshold == "string" && t.swipeCloseThreshold.includes("%") && (g = a.value * (Number(t.swipeCloseThreshold.replace("%", "")) / 100)), u.value > g) {
+          u.value = a.value, Y();
           return;
         }
       } else
         u.value = 0;
       if (u.value === a.value) {
-        u.value = 0, x();
+        u.value = 0, Y();
         return;
       }
-      const n = R.end();
-      if (n.isSwipe && n.direction === "down" && t.canSwipeClose && a.value <= O.value + 10) {
-        u.value = a.value, x();
+      const n = R.end(), r = d.value;
+      if (r && n.isSwipe && n.direction === "down" && t.canSwipeClose && a.value <= O.value + 10) {
+        u.value = a.value, Y();
         return;
       }
-      let s;
-      if (n.isSwipe && k.value.length > 1) {
-        const c = [...k.value].sort((m, Y) => m - Y);
+      let c;
+      if (r && n.isSwipe && x.value.length > 1) {
+        const g = [...x.value].sort((k, V) => k - V);
         if (n.direction === "up") {
-          const m = c.find((Y) => Y > a.value + 1);
-          s = m !== void 0 ? k.value.indexOf(m) : F.value;
+          const k = g.find((V) => V > a.value + 1);
+          c = k !== void 0 ? x.value.indexOf(k) : F.value;
         } else {
-          const m = [...c].reverse().find((Y) => Y < a.value - 1);
-          s = m !== void 0 ? k.value.indexOf(m) : F.value;
+          const k = [...g].reverse().find((V) => V < a.value - 1);
+          c = k !== void 0 ? x.value.indexOf(k) : F.value;
         }
       } else
-        s = F.value;
-      B.value = s;
-      let p;
-      if (typeof f.value[s] == "number" ? p = T(f.value[s], {
+        c = F.value;
+      B.value = c;
+      let f;
+      if (typeof p.value[c] == "number" ? f = T(p.value[c], {
         max: h.value
-      }) : p = z(
-        f.value[s],
+      }) : f = N(
+        p.value[c],
         h.value
-      ), p === 0) {
-        x();
+      ), f === 0) {
+        Y();
         return;
       }
-      a.value = p, u.value = 0, v("snapped", f.value.indexOf(f.value[s]));
-    }, Ee = () => {
-      t.blocking || (N.value = !0, q.value = !0);
+      a.value = f, u.value = 0, v("snapped", p.value.indexOf(p.value[c]));
     }, He = () => {
-      t.blocking || (N.value = !1, q.value = !1);
+      t.blocking || (q.value = !0, Q.value = !0);
     }, Ie = () => {
+      t.blocking || (q.value = !1, Q.value = !1);
+    }, $e = () => {
       if (!P.value) return;
       const e = P.value.scrollTop === 0;
       d.value = e;
-    }, $e = Je((e) => de(e), {
+    }, Fe = Xe((e) => fe(e), {
       minQuietPeriodMs: t.duration,
       reducer: (e, n) => n
     });
-    U(f, (e, n) => {
+    J(p, (e, n) => {
       if (C.value === !1 || !e || !n) return;
-      const s = e[B.value], p = n[B.value];
-      typeof s != "string" && typeof p != "string" && (a.value = T(s, {
+      const r = e[B.value], c = n[B.value];
+      typeof r != "string" && typeof c != "string" && (a.value = T(r, {
         max: h.value
       }));
-    }), U(h, () => {
-      $e.call(B.value);
-    }), U(X, (e) => {
+    }), J(h, () => {
+      Fe.call(B.value);
+    }), J(Z, (e) => {
       v("instinctHeight", e);
-    }), Ve(() => {
-      Z.deactivate();
+    }), We(() => {
+      ee.deactivate();
     });
-    const Fe = (e) => {
+    const Re = (e) => {
       const n = e;
       n.style.transition = `transform ${t.duration}ms ease, height ${t.duration}ms ease`, n.style.transform = `translateY(${a.value}px)`;
     };
-    return l({ open: te, close: x, snapToPoint: de }), (e, n) => (V(), ae(We, null, [
-      (V(), we(Se, {
+    return l({ open: ne, close: Y, snapToPoint: fe }), (e, n) => (W(), le(ze, null, [
+      (W(), Se(Ce, {
         to: e.teleportTo,
         defer: e.teleportDefer
       }, [
-        Ce(be, { name: "vsbs-backdrop" }, {
-          default: ye(() => [
-            le(C) && e.blocking ? (V(), ae("div", {
+        be(ye, { name: "vsbs-backdrop" }, {
+          default: Pe(() => [
+            oe(C) && e.blocking ? (W(), le("div", {
               key: 0,
               ref_key: "backdrop",
               ref: M,
               "data-vsbs-backdrop": "",
-              onClick: n[0] || (n[0] = (s) => Me())
-            }, null, 512)) : Pe("", !0)
+              onClick: n[0] || (n[0] = (r) => De())
+            }, null, 512)) : Te("", !0)
           ]),
           _: 1
         })
       ], 8, ["to", "defer"])),
-      (V(), we(Se, {
+      (W(), Se(Ce, {
         to: e.teleportTo,
         defer: e.teleportDefer
       }, [
-        Ce(be, {
+        be(ye, {
           name: "vsbs-sheet",
-          onLeave: Fe
+          onLeave: Re
         }, {
-          default: ye(() => [
-            le(C) ? (V(), ae("div", {
+          default: Pe(() => [
+            oe(C) ? (W(), le("div", {
               key: 0,
               ref_key: "sheet",
               ref: i,
-              style: ze({
+              style: Ne({
                 transform: `translateY(${u.value}px)`,
                 height: `${a.value}px`,
                 transition: E.value ? "none" : `transform ${e.duration}ms ease, height ${e.duration}ms ease`
               }),
               "data-vsbs-shadow": !e.blocking,
-              "data-vsbs-sheet-show": le(C),
+              "data-vsbs-sheet-show": oe(C),
               "aria-modal": "true",
               "data-vsbs-sheet": "",
               tabindex: "-1",
-              onTouchstart: Ee,
-              onTouchend: He
+              onTouchstart: He,
+              onTouchend: Ie
             }, [
-              W("div", {
+              z("div", {
                 ref_key: "sheetHeader",
                 ref: y,
                 "data-vsbs-header": "",
-                onPointerdown: pe,
-                onPointermove: he,
-                onPointerup: K,
-                onPointercancel: K,
-                onTouchmove: ie,
-                class: oe(e.headerClass),
+                onPointerdown: he,
+                onPointermove: me,
+                onPointerup: U,
+                onPointercancel: U,
+                onTouchmove: ve,
+                class: ue(e.headerClass),
                 style: { "touch-action": "none" }
               }, [
-                ue(e.$slots, "header", {}, void 0, !0)
+                se(e.$slots, "header", {}, void 0, !0)
               ], 34),
-              W("div", {
+              z("div", {
                 ref_key: "sheetScroll",
                 ref: P,
                 "data-vsbs-scroll": "",
-                onScrollend: Ie
+                onScrollend: $e
               }, [
-                W("div", {
+                z("div", {
                   ref_key: "sheetContentWrapper",
                   ref: w,
                   "data-vsbs-content-wrapper": "",
-                  onPointerdown: Oe,
-                  onPointermove: Be,
-                  onPointerup: me,
-                  onPointercancel: me,
-                  onTouchmove: ve,
+                  onPointerdown: Be,
+                  onPointermove: Ee,
+                  onPointerup: ge,
+                  onPointercancel: ge,
+                  onTouchmove: ce,
                   style: { touchAction: "pan-y" }
                 }, [
-                  W("div", {
+                  z("div", {
                     ref_key: "sheetContent",
                     ref: S,
                     "data-vsbs-content": "",
-                    class: oe(e.contentClass)
+                    class: ue(e.contentClass)
                   }, [
-                    ue(e.$slots, "default", {}, void 0, !0)
+                    se(e.$slots, "default", {}, void 0, !0)
                   ], 2)
                 ], 544)
               ], 544),
-              W("div", {
+              z("div", {
                 ref_key: "sheetFooter",
                 ref: b,
                 "data-vsbs-footer": "",
-                onPointerdown: pe,
-                onPointermove: he,
-                onPointerup: K,
-                onPointercancel: K,
-                onTouchmove: ie,
-                class: oe(e.footerClass),
+                onPointerdown: he,
+                onPointermove: me,
+                onPointerup: U,
+                onPointercancel: U,
+                onTouchmove: ve,
+                class: ue(e.footerClass),
                 style: { "touch-action": "none" }
               }, [
-                ue(e.$slots, "footer", {}, void 0, !0)
+                se(e.$slots, "footer", {}, void 0, !0)
               ], 34)
-            ], 44, nt)) : Pe("", !0)
+            ], 44, at)) : Te("", !0)
           ]),
           _: 3
         })
       ], 8, ["to", "defer"]))
     ], 64));
   }
-}), lt = (o, l) => {
-  const r = o.__vccOpts || o;
+}), ot = (o, l) => {
+  const s = o.__vccOpts || o;
   for (const [t, v] of l)
-    r[t] = v;
-  return r;
-}, rt = /* @__PURE__ */ lt(at, [["__scopeId", "data-v-ac41efee"]]);
+    s[t] = v;
+  return s;
+}, it = /* @__PURE__ */ ot(lt, [["__scopeId", "data-v-606a4041"]]);
 export {
-  rt as default
+  it as default
 };

package/dist/style.css

@@ -1 +1 @@
-[data-vsbs-backdrop][data-v-ac41efee]{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;--vsbs-duration: var(--55bcd70e)}[data-vsbs-shadow=true][data-v-ac41efee]: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-ac41efee]{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-width:var(--vsbs-max-width, 640px);pointer-events:all;position:fixed;right:0;width:100%;will-change:height,transform}[data-vsbs-sheet-show=true][data-v-ac41efee]{visibility:visible}[data-vsbs-header][data-v-ac41efee]{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-ac41efee]: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-ac41efee]:empty{box-shadow:none;padding:14px var(--vsbs-padding-x, 16px) 10px}[data-vsbs-footer][data-v-ac41efee]{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-ac41efee]:empty{display:none}[data-vsbs-scroll][data-v-ac41efee]{flex-grow:1;overflow-y:auto;overscroll-behavior:none}[data-vsbs-content-wrapper][data-v-ac41efee]{height:100%}[data-vsbs-content][data-v-ac41efee]{display:grid;padding:8px var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}.vsbs-backdrop-enter-active[data-v-ac41efee],.vsbs-backdrop-leave-active[data-v-ac41efee]{transition:opacity var(--vsbs-duration) ease}.vsbs-backdrop-enter-from[data-v-ac41efee],.vsbs-backdrop-leave-to[data-v-ac41efee]{opacity:0}
+[data-vsbs-backdrop][data-v-606a4041]{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;--vsbs-duration: var(--03a2828a)}[data-vsbs-shadow=true][data-v-606a4041]: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-606a4041]{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-width:var(--vsbs-max-width, 640px);pointer-events:all;position:fixed;right:0;width:100%;will-change:height,transform}[data-vsbs-sheet-show=true][data-v-606a4041]{visibility:visible}[data-vsbs-header][data-v-606a4041]{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-606a4041]: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-606a4041]:empty{box-shadow:none;padding:14px var(--vsbs-padding-x, 16px) 10px}[data-vsbs-footer][data-v-606a4041]{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-606a4041]:empty{display:none}[data-vsbs-scroll][data-v-606a4041]{flex-grow:1;overflow-y:auto;overscroll-behavior:none}[data-vsbs-content-wrapper][data-v-606a4041]{height:100%}[data-vsbs-content][data-v-606a4041]{display:grid;padding:8px var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}.vsbs-backdrop-enter-active[data-v-606a4041],.vsbs-backdrop-leave-active[data-v-606a4041]{transition:opacity var(--vsbs-duration) ease}.vsbs-backdrop-enter-from[data-v-606a4041],.vsbs-backdrop-leave-to[data-v-606a4041]{opacity:0}

package/package.json

@@ -32,7 +32,7 @@
     "url": "https://github.com/megaarmos/vue-spring-bottom-sheet/issues"
   },
   "private": false,
-  "version": "2.6.0-next.1",
+  "version": "3.0.0-next.1",
   "type": "module",
   "exports": {
     ".": {