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

package/dist/index.mjs

@@ -1,112 +1,112 @@
-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 g, computed as I, defineComponent as Ve, useCssVars as Ne, watch as Z, onMounted as We, toRefs as qe, nextTick as Se, onUnmounted as ze, createElementBlock as oe, openBlock as q, Fragment as Qe, createBlock as Ce, Teleport as ye, createVNode as Pe, Transition as Te, withCtx as xe, createCommentVNode as ke, unref as ue, normalizeStyle as je, createElementVNode as z, normalizeClass as se, renderSlot as re } from "vue";
+import { useVModel as Ge, useWindowSize as Ke, useElementBounding as ee, useScrollLock as Ye } from "@vueuse/core";
+import { useFocusTrap as Ue } from "@vueuse/integrations/useFocusTrap";
+function Q(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(() => {
-    const b = v.value.reduce(
+function Je(o, l, s) {
+  const t = g(0), v = I(() => o.value.map((C) => typeof C == "string" ? Q(C, s.value) : C)), S = I(() => Math.min(...v.value)), i = I(() => Math.max(...v.value)), y = I(() => {
+    const C = v.value.reduce(
       (P, w) => Math.abs(w - l.value) < Math.abs(P - l.value) ? w : P
     );
-    return v.value.indexOf(b);
+    return v.value.indexOf(C);
   });
   return {
     currentSnapPointIndex: t,
     flattenedSnapPoints: v,
-    minSnapPoint: C,
+    minSnapPoint: S,
     maxSnapPoint: i,
     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 Xe(o = {}) {
+  const { velocityThreshold: l = 0.5 } = o, s = g(0), t = g(0), v = g(0), S = g(0), i = g([]);
   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 }];
+      const b = performance.now();
+      s.value = w, t.value = b, v.value = w, S.value = b, i.value = [{ y: w, time: b }];
     },
     update: (w) => {
-      const S = performance.now();
-      v.value = w, C.value = S, i.value.push({ y: w, time: S });
-      const M = S - 100;
+      const b = performance.now();
+      v.value = w, S.value = b, i.value.push({ y: w, time: b });
+      const M = b - 100;
       i.value = i.value.filter((d) => d.time > M).slice(-5);
     },
     end: () => {
       const w = i.value;
-      let S = 0;
+      let b = 0;
       if (w.length >= 2) {
-        const h = w[0], D = w[w.length - 1], $ = D.y - h.y, L = D.time - h.time;
-        L > 0 && (S = $ / L);
+        const h = w[0], E = w[w.length - 1], F = E.y - h.y, R = E.time - h.time;
+        R > 0 && (b = F / R);
       }
-      const M = Math.abs(S) >= l;
+      const M = Math.abs(b) >= l;
       let d = "none";
-      return M && (d = S < 0 ? "up" : "down"), i.value = [], {
+      return M && (d = b < 0 ? "up" : "down"), i.value = [], {
         direction: d,
-        velocity: Math.abs(S),
+        velocity: Math.abs(b),
         isSwipe: M
       };
     }
   };
 }
-function Ke(o, l, r) {
+function Ze(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 et(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 Ze(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 }) {
-  let i, y, b, P, w = () => {
-    let d = b;
-    d !== void 0 && (b = void 0, o(d), v !== void 0 && (y = setTimeout(S, v)));
-  }, S = () => {
+function tt(o, { triggerAt: l = "end", minQuietPeriodMs: s, maxBurstDurationMs: t, minGapMs: v, reducer: S = at }) {
+  let i, y, C, P, w = () => {
+    let d = C;
+    d !== void 0 && (C = void 0, o(d), v !== void 0 && (y = setTimeout(b, v)));
+  }, b = () => {
     clearTimeout(y), y = void 0, i === void 0 && w();
   }, M = () => {
     clearTimeout(i), i = void 0, P = void 0, y === void 0 && w();
   };
   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 ((l !== "start" || h) && (C = S(C, ...d)), !(i === void 0 && !h)) {
+      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));
-        i = setTimeout(M, $);
+        let E = Date.now();
+        P ?? (P = E);
+        let F = t === void 0 ? s ?? 0 : Math.min(s ?? t, t - (E - P));
+        i = setTimeout(M, F);
       }
       l !== "end" && h && w();
     }
   }, cancel: () => {
-    clearTimeout(i), i = void 0, P = void 0, clearTimeout(y), y = void 0, b = void 0;
+    clearTimeout(i), i = void 0, P = void 0, clearTimeout(y), y = void 0, C = void 0;
   }, flush: () => {
-    M(), S();
+    M(), b();
   }, get isIdle() {
     return i === void 0 && y === void 0;
   } };
 }
-var Xe = () => "";
+var at = () => "";
 function T(...o) {
-  return Ue(Ze, o);
+  return et(nt, 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 nt = (o, { min: l, max: s }) => l !== void 0 && o < l ? l : s !== void 0 && o > s ? s : o;
+function lt(o, l, s) {
+  return Math.max(l, Math.min(o, s));
 }
-function tt(o, l) {
+function ot(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 Me(o, l, s) {
+  return l === 0 || Math.abs(l) === 1 / 0 ? ot(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 ie(o, l, s, t = 0.15) {
+  return t === 0 ? lt(o, l, s) : o < l ? -Me(l - o, s - l, t) + l : o > s ? +Me(o - s, s - l, t) + s : o;
 }
-const nt = ["data-vsbs-shadow", "data-vsbs-sheet-show"], at = /* @__PURE__ */ Re({
+const ut = ["data-vsbs-shadow", "data-vsbs-sheet-show"], st = /* @__PURE__ */ Ve({
   __name: "BottomSheet",
   props: {
     duration: { default: 250 },
@@ -125,385 +125,399 @@ 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 }) {
+    Ne((e) => ({
+      "0a9ba53d": Ee.value
     }));
-    const t = o, v = r, C = Ne(t, "modelValue", v, {
+    const t = o, v = s, S = Ge(t, "modelValue", v, {
       passive: !0
     });
-    U(C, (e) => {
-      e && te();
-    }), _e(() => {
-      C.value && te();
+    Z(S, (e) => {
+      e && ne();
+    }), We(() => {
+      S.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 = g(null), y = g(null), C = g(null), P = g(null), w = g(null), b = g(null), M = g(null), d = g(t.expandOnContentDrag), { height: h } = Ke(), { height: E } = ee(i), { height: F } = ee(y), { height: R } = ee(b), { height: ve } = ee(C), te = I({
       get() {
         return T(
-          Math.ceil(L.value + $.value + re.value),
+          Math.ceil(R.value + F.value + ve.value),
           {
             max: h.value
           }
         );
       },
       set(e) {
-        [$.value, L.value, re.value] = e;
+        [F.value, R.value, ve.value] = e;
       }
-    }), a = g(0), u = g(0), xe = I(() => t.duration + "ms"), { snapPoints: Ye } = Ae(t), f = I(() => Ye.value ?? [X.value]), {
+    }), n = g(0), u = g(0), Ee = I(() => t.duration + "ms"), { snapPoints: Oe } = qe(t), p = I(() => Oe.value ?? [te.value]), {
       flattenedSnapPoints: k,
-      currentSnapPointIndex: B,
-      closestSnapPointIndex: F,
+      currentSnapPointIndex: D,
+      closestSnapPointIndex: $,
       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], {
+      maxSnapPoint: L
+    } = Je(p, n, h), j = Ye(document.body), G = Ye(document.documentElement), B = g(!1), _ = g(0), K = g(0), U = g(0), H = g(0), J = g(!0), A = Xe({ velocityThreshold: 0.5 }), V = Ue([i, M], {
       immediate: !1,
       fallbackFocus: () => i.value || document.body
     });
-    function ie(e) {
-      d.value = !0, ve(e);
+    let N = null;
+    const De = () => {
+      i.value && (N = new MutationObserver((e) => {
+        var a;
+        for (const r of e)
+          r.type === "attributes" && r.attributeName === "aria-expanded" && (r.target.getAttribute("aria-expanded") === "true" ? V.pause() : (a = i.value) != null && a.querySelector('[aria-expanded="true"]') || V.unpause());
+      }), N.observe(i.value, {
+        attributes: !0,
+        attributeFilter: ["aria-expanded"],
+        subtree: !0
+      }));
+    }, ce = () => {
+      N && (N.disconnect(), N = null);
+    };
+    function de(e) {
+      d.value = !0, fe(e);
     }
-    function ve(e) {
+    function fe(e) {
       d.value && e.preventDefault();
     }
-    const ce = (e) => {
-      e.key === "Escape" && x();
-    }, Me = () => {
-      t.canBackdropClose && x();
+    const pe = (e) => {
+      e.key === "Escape" && Y();
+    }, Be = () => {
+      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 ae = !1;
+    const ne = async () => {
+      if (ae) return;
+      S.value = !0, ae = !0, v("opening-started"), t.blocking && (j.value = !0, G.value = !0), await Se();
       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,
-        n.getBoundingClientRect().height,
-        p.getBoundingClientRect().height
-      ], await ge(), B.value = k.value.findIndex(
-        (c) => c === O.value
+      E.value = e.getBoundingClientRect().height;
+      const a = e.querySelector("[data-vsbs-content]"), r = e.querySelector("[data-vsbs-header]"), c = e.querySelector("[data-vsbs-footer]");
+      if (te.value = [
+        r.getBoundingClientRect().height,
+        a.getBoundingClientRect().height,
+        c.getBoundingClientRect().height
+      ], await Se(), D.value = k.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], {
+        typeof p.value[f] == "number" ? m = T(p.value[f], {
           max: h.value
-        }) : m = z(f.value[c], h.value), a.value = m;
+        }) : m = Q(p.value[f], h.value), n.value = m;
       } else
-        a.value = T(O.value, {
+        n.value = T(O.value, {
           max: h.value
         });
-      u.value = a.value, requestAnimationFrame(() => {
+      u.value = n.value, requestAnimationFrame(() => {
         u.value = 0, t.blocking && setTimeout(() => {
-          C.value && (v("opened"), Z.activate());
+          S.value && (v("opened"), V.activate(), De());
         }, t.duration);
-      }), window.addEventListener("keydown", ce), ee = !1;
+      }), window.addEventListener("keydown", pe), ae = !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 le = !1;
+    const Y = () => {
+      le || (S.value = !1, le = !0, v("closing-started"), t.blocking && (j.value = !1, G.value = !1), window.removeEventListener("keydown", pe), ce(), t.blocking && V.deactivate(), u.value = n.value, setTimeout(() => {
+        v("closed"), le = !1;
       }, t.duration));
-    }, de = (e) => {
-      if (!f.value) return;
-      if (e < 0 || e >= f.value.length) {
+    }, he = (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], {
+      D.value = e;
+      let a;
+      typeof p.value[e] == "number" ? a = 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]));
+      }) : a = Q(p.value[e], h.value), n.value = a, v("snapped", p.value.indexOf(p.value[e]));
     };
-    function fe(e) {
+    function me(e) {
       e > 0 ? v("dragging-down") : e < 0 && v("dragging-up");
     }
-    const pe = (e) => {
+    const ge = (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) => {
-      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 a = window.getComputedStyle(i.value), r = parseFloat(a.height);
+      let c = 0;
+      a.transform && a.transform !== "none" && (c = new DOMMatrix(a.transform).m42), n.value = r, u.value = c, B.value = !0, _.value = e.clientY, K.value = n.value, U.value = u.value, H.value = e.clientY, A.start(e.clientY), e.target.setPointerCapture(e.pointerId);
+    }, we = (e) => {
+      if (!B.value) return;
+      const a = e.clientY - _.value, r = e.clientY;
+      u.value <= 0 && (n.value = K.value - a), n.value <= O.value && (n.value = O.value, u.value = U.value + a, t.canSwipeClose ? u.value = T(u.value, { min: 0 }) : u.value = T(
+        ie(u.value, -E.value, 0, 0.5),
         { min: 0 }
-      )), a.value = T(se(a.value, 0, _.value, 0.25), {
+      )), n.value = T(ie(n.value, 0, L.value, 0.25), {
         min: 0,
         max: h.value
-      }), fe(e.clientY - H.value), R.update(e.clientY), H.value = s;
-    }, K = (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();
+      }), me(e.clientY - H.value), A.update(e.clientY), H.value = r;
+    }, X = (e) => {
+      if (B.value = !1, e.target.releasePointerCapture(e.pointerId), t.canSwipeClose) {
+        let f = n.value / 2;
+        if (t.swipeCloseThreshold && typeof t.swipeCloseThreshold == "number" && (f = t.swipeCloseThreshold), t.swipeCloseThreshold && typeof t.swipeCloseThreshold == "string" && t.swipeCloseThreshold.includes("%") && (f = n.value * (Number(t.swipeCloseThreshold.replace("%", "")) / 100)), u.value > f) {
+          u.value = n.value, Y();
           return;
         }
       } else
         u.value = 0;
-      if (u.value === a.value) {
-        u.value = 0, x();
+      if (u.value === n.value) {
+        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 a = A.end();
+      if (a.isSwipe && a.direction === "down" && t.canSwipeClose && n.value <= O.value + 10) {
+        u.value = n.value, Y();
         return;
       }
-      let s;
-      if (n.isSwipe && k.value.length > 1) {
-        const c = [...k.value].sort((m, Y) => m - Y);
-        if (n.direction === "up") {
-          const m = c.find((Y) => Y > a.value + 1);
-          s = m !== void 0 ? k.value.indexOf(m) : F.value;
+      let r;
+      if (a.isSwipe && k.value.length > 1) {
+        const f = [...k.value].sort((m, x) => m - x);
+        if (a.direction === "up") {
+          const m = f.find((x) => x > n.value + 1);
+          r = m !== void 0 ? k.value.indexOf(m) : $.value;
         } else {
-          const m = [...c].reverse().find((Y) => Y < a.value - 1);
-          s = m !== void 0 ? k.value.indexOf(m) : F.value;
+          const m = [...f].reverse().find((x) => x < n.value - 1);
+          r = m !== void 0 ? k.value.indexOf(m) : $.value;
         }
       } else
-        s = F.value;
-      B.value = s;
-      let p;
-      if (typeof f.value[s] == "number" ? p = T(f.value[s], {
+        r = $.value;
+      D.value = r;
+      let c;
+      if (typeof p.value[r] == "number" ? c = T(p.value[r], {
         max: h.value
-      }) : p = z(
-        f.value[s],
+      }) : c = Q(
+        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) => {
+      n.value = c, u.value = 0, v("snapped", p.value.indexOf(p.value[r]));
+    }, He = (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 a = P.value.scrollTop === 0, r = e > 0, c = k.value.length === 1, f = 0.5 > Math.abs(n.value - L.value);
+      if (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 && a && r && (d.value = !0), u.value === 0 && a && !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 && a && (d.value = !0), !r && a && (d.value = !1), a || (d.value = !1));
       }
-    }, Oe = (e) => {
+    }, Ie = (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 (!E.value) return;
+      const a = window.getComputedStyle(i.value), r = parseFloat(a.height);
+      let c = 0;
+      a.transform && a.transform !== "none" && (c = new DOMMatrix(a.transform).m42), n.value = r, u.value = c, B.value = !0, _.value = e.clientY, K.value = n.value, U.value = u.value, H.value = e.clientY, J.value = !0, A.start(e.clientY), e.target.setPointerCapture(e.pointerId);
+    }, Fe = (e) => {
+      if (!B.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;
+      const a = e.clientY - _.value, r = e.clientY, c = e.clientY - H.value;
+      if (J.value) {
+        const m = e.clientY - _.value;
         if (Math.abs(m) > 3)
-          G.value = !1, De(m);
+          J.value = !1, He(m);
         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 && (n.value = K.value - a), n.value <= O.value && (n.value = O.value, d.value && t.expandOnContentDrag && (u.value = U.value + a), u.value = T(u.value, { min: 0, max: O.value }), t.canSwipeClose ? u.value = T(u.value, { min: 0 }) : u.value = T(
+        ie(u.value, -E.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();
+      )), n.value > L.value && (n.value = L.value), n.value = T(n.value, { max: h.value }), k.value.length === 1 || n.value === L.value && (d.value = !1), me(c), A.update(e.clientY), H.value = r;
+    }, be = (e) => {
+      if (B.value = !1, J.value = !0, e.target.releasePointerCapture(e.pointerId), t.canSwipeClose) {
+        let m = n.value / 2;
+        if (t.swipeCloseThreshold && typeof t.swipeCloseThreshold == "number" && (m = t.swipeCloseThreshold), t.swipeCloseThreshold && typeof t.swipeCloseThreshold == "string" && t.swipeCloseThreshold.includes("%") && (m = n.value * (Number(t.swipeCloseThreshold.replace("%", "")) / 100)), u.value > m) {
+          u.value = n.value, Y();
           return;
         }
       } else
         u.value = 0;
-      if (u.value === a.value) {
-        u.value = 0, x();
+      if (u.value === n.value) {
+        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 a = A.end(), r = d.value;
+      if (r && a.isSwipe && a.direction === "down" && t.canSwipeClose && n.value <= O.value + 10) {
+        u.value = n.value, Y();
         return;
       }
-      let s;
-      if (n.isSwipe && k.value.length > 1) {
-        const c = [...k.value].sort((m, Y) => m - Y);
-        if (n.direction === "up") {
-          const m = c.find((Y) => Y > a.value + 1);
-          s = m !== void 0 ? k.value.indexOf(m) : F.value;
+      let c;
+      if (r && a.isSwipe && k.value.length > 1) {
+        const m = [...k.value].sort((x, W) => x - W);
+        if (a.direction === "up") {
+          const x = m.find((W) => W > n.value + 1);
+          c = x !== void 0 ? k.value.indexOf(x) : $.value;
         } else {
-          const m = [...c].reverse().find((Y) => Y < a.value - 1);
-          s = m !== void 0 ? k.value.indexOf(m) : F.value;
+          const x = [...m].reverse().find((W) => W < n.value - 1);
+          c = x !== void 0 ? k.value.indexOf(x) : $.value;
         }
       } else
-        s = F.value;
-      B.value = s;
-      let p;
-      if (typeof f.value[s] == "number" ? p = T(f.value[s], {
+        c = $.value;
+      D.value = c;
+      let f;
+      if (typeof p.value[c] == "number" ? f = T(p.value[c], {
         max: h.value
-      }) : p = z(
-        f.value[s],
+      }) : f = Q(
+        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);
-    }, He = () => {
-      t.blocking || (N.value = !1, q.value = !1);
-    }, Ie = () => {
+      n.value = f, u.value = 0, v("snapped", p.value.indexOf(p.value[c]));
+    }, $e = () => {
+      t.blocking || (j.value = !0, G.value = !0);
+    }, Ae = () => {
+      t.blocking || (j.value = !1, G.value = !1);
+    }, Re = () => {
       if (!P.value) return;
       const e = P.value.scrollTop === 0;
       d.value = e;
-    }, $e = Je((e) => de(e), {
+    }, Le = tt((e) => he(e), {
       minQuietPeriodMs: t.duration,
-      reducer: (e, n) => n
+      reducer: (e, a) => a
     });
-    U(f, (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, {
+    Z(p, (e, a) => {
+      if (S.value === !1 || !e || !a) return;
+      const r = e[D.value], c = a[D.value];
+      typeof r != "string" && typeof c != "string" && (n.value = T(r, {
         max: h.value
       }));
-    }), U(h, () => {
-      $e.call(B.value);
-    }), U(X, (e) => {
+    }), Z(h, () => {
+      Le.call(D.value);
+    }), Z(te, (e) => {
       v("instinctHeight", e);
-    }), Ve(() => {
-      Z.deactivate();
+    }), ze(() => {
+      ce(), V.deactivate();
     });
-    const Fe = (e) => {
-      const n = e;
-      n.style.transition = `transform ${t.duration}ms ease, height ${t.duration}ms ease`, n.style.transform = `translateY(${a.value}px)`;
+    const _e = (e) => {
+      const a = e;
+      a.style.transition = `transform ${t.duration}ms ease, height ${t.duration}ms ease`, a.style.transform = `translateY(${n.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: he }), (e, a) => (q(), oe(Qe, null, [
+      (q(), Ce(ye, {
         to: e.teleportTo,
         defer: e.teleportDefer
       }, [
-        Ce(be, { name: "vsbs-backdrop" }, {
-          default: ye(() => [
-            le(C) && e.blocking ? (V(), ae("div", {
+        Pe(Te, { name: "vsbs-backdrop" }, {
+          default: xe(() => [
+            ue(S) && e.blocking ? (q(), oe("div", {
               key: 0,
               ref_key: "backdrop",
               ref: M,
               "data-vsbs-backdrop": "",
-              onClick: n[0] || (n[0] = (s) => Me())
-            }, null, 512)) : Pe("", !0)
+              onClick: a[0] || (a[0] = (r) => Be())
+            }, null, 512)) : ke("", !0)
           ]),
           _: 1
         })
       ], 8, ["to", "defer"])),
-      (V(), we(Se, {
+      (q(), Ce(ye, {
         to: e.teleportTo,
         defer: e.teleportDefer
       }, [
-        Ce(be, {
+        Pe(Te, {
           name: "vsbs-sheet",
-          onLeave: Fe
+          onLeave: _e
         }, {
-          default: ye(() => [
-            le(C) ? (V(), ae("div", {
+          default: xe(() => [
+            ue(S) ? (q(), oe("div", {
               key: 0,
               ref_key: "sheet",
               ref: i,
-              style: ze({
+              style: je({
                 transform: `translateY(${u.value}px)`,
-                height: `${a.value}px`,
-                transition: E.value ? "none" : `transform ${e.duration}ms ease, height ${e.duration}ms ease`
+                height: `${n.value}px`,
+                transition: B.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": ue(S),
               "aria-modal": "true",
               "data-vsbs-sheet": "",
               tabindex: "-1",
-              onTouchstart: Ee,
-              onTouchend: He
+              onTouchstart: $e,
+              onTouchend: Ae
             }, [
-              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: ge,
+                onPointermove: we,
+                onPointerup: X,
+                onPointercancel: X,
+                onTouchmove: de,
+                class: se(e.headerClass),
                 style: { "touch-action": "none" }
               }, [
-                ue(e.$slots, "header", {}, void 0, !0)
+                re(e.$slots, "header", {}, void 0, !0)
               ], 34),
-              W("div", {
+              z("div", {
                 ref_key: "sheetScroll",
                 ref: P,
                 "data-vsbs-scroll": "",
-                onScrollend: Ie
+                onScrollend: Re
               }, [
-                W("div", {
+                z("div", {
                   ref_key: "sheetContentWrapper",
                   ref: w,
                   "data-vsbs-content-wrapper": "",
-                  onPointerdown: Oe,
-                  onPointermove: Be,
-                  onPointerup: me,
-                  onPointercancel: me,
-                  onTouchmove: ve,
+                  onPointerdown: Ie,
+                  onPointermove: Fe,
+                  onPointerup: be,
+                  onPointercancel: be,
+                  onTouchmove: fe,
                   style: { touchAction: "pan-y" }
                 }, [
-                  W("div", {
+                  z("div", {
                     ref_key: "sheetContent",
-                    ref: S,
+                    ref: b,
                     "data-vsbs-content": "",
-                    class: oe(e.contentClass)
+                    class: se(e.contentClass)
                   }, [
-                    ue(e.$slots, "default", {}, void 0, !0)
+                    re(e.$slots, "default", {}, void 0, !0)
                   ], 2)
                 ], 544)
               ], 544),
-              W("div", {
+              z("div", {
                 ref_key: "sheetFooter",
-                ref: b,
+                ref: C,
                 "data-vsbs-footer": "",
-                onPointerdown: pe,
-                onPointermove: he,
-                onPointerup: K,
-                onPointercancel: K,
-                onTouchmove: ie,
-                class: oe(e.footerClass),
+                onPointerdown: ge,
+                onPointermove: we,
+                onPointerup: X,
+                onPointercancel: X,
+                onTouchmove: de,
+                class: se(e.footerClass),
                 style: { "touch-action": "none" }
               }, [
-                ue(e.$slots, "footer", {}, void 0, !0)
+                re(e.$slots, "footer", {}, void 0, !0)
               ], 34)
-            ], 44, nt)) : Pe("", !0)
+            ], 44, ut)) : ke("", !0)
           ]),
           _: 3
         })
       ], 8, ["to", "defer"]))
     ], 64));
   }
-}), lt = (o, l) => {
-  const r = o.__vccOpts || o;
+}), rt = (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;
+}, dt = /* @__PURE__ */ rt(st, [["__scopeId", "data-v-01259485"]]);
 export {
-  rt as default
+  dt 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-01259485]{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(--0a9ba53d)}[data-vsbs-shadow=true][data-v-01259485]: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-01259485]{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-01259485]{visibility:visible}[data-vsbs-header][data-v-01259485]{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-01259485]: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-01259485]:empty{box-shadow:none;padding:14px var(--vsbs-padding-x, 16px) 10px}[data-vsbs-footer][data-v-01259485]{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-01259485]:empty{display:none}[data-vsbs-scroll][data-v-01259485]{flex-grow:1;overflow-y:auto;overscroll-behavior:none}[data-vsbs-content-wrapper][data-v-01259485]{height:100%}[data-vsbs-content][data-v-01259485]{display:grid;padding:8px var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}.vsbs-backdrop-enter-active[data-v-01259485],.vsbs-backdrop-leave-active[data-v-01259485]{transition:opacity var(--vsbs-duration) ease}.vsbs-backdrop-enter-from[data-v-01259485],.vsbs-backdrop-leave-to[data-v-01259485]{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.2",
   "type": "module",
   "exports": {
     ".": {