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

package/dist/BottomSheet.d.ts

@@ -7,13 +7,13 @@ declare function __VLS_template(): {
         footer?(_: {}): any;
     };
     refs: {
-        backdrop: import('vue').ShallowUnwrapRef<{}> | null;
-        sheet: import('vue').ShallowUnwrapRef<{}> | null;
-        sheetHeader: import('vue').ShallowUnwrapRef<{}> | null;
+        backdrop: HTMLDivElement;
+        sheet: HTMLDivElement;
+        sheetHeader: HTMLDivElement;
         sheetScroll: HTMLDivElement;
-        sheetContentWrapper: import('vue').ShallowUnwrapRef<{}> | null;
+        sheetContentWrapper: HTMLDivElement;
         sheetContent: HTMLDivElement;
-        sheetFooter: import('vue').ShallowUnwrapRef<{}> | null;
+        sheetFooter: HTMLDivElement;
     };
     rootEl: any;
 };
@@ -37,13 +37,13 @@ declare const __VLS_component: import('vue').DefineComponent<BottomSheetProps, {
     teleportTo: string | import('vue').RendererElement;
     teleportDefer: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
-    backdrop: import('vue').ShallowUnwrapRef<{}> | null;
-    sheet: import('vue').ShallowUnwrapRef<{}> | null;
-    sheetHeader: import('vue').ShallowUnwrapRef<{}> | null;
+    backdrop: HTMLDivElement;
+    sheet: HTMLDivElement;
+    sheetHeader: HTMLDivElement;
     sheetScroll: HTMLDivElement;
-    sheetContentWrapper: import('vue').ShallowUnwrapRef<{}> | null;
+    sheetContentWrapper: HTMLDivElement;
     sheetContent: HTMLDivElement;
-    sheetFooter: import('vue').ShallowUnwrapRef<{}> | null;
+    sheetFooter: HTMLDivElement;
 }, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/composables/useSwipeDetection.d.ts

@@ -0,0 +1,13 @@
+export interface SwipeResult {
+    direction: 'up' | 'down' | 'none';
+    velocity: number;
+    isSwipe: boolean;
+}
+export interface UseSwipeDetectionOptions {
+    velocityThreshold?: number;
+}
+export declare function useSwipeDetection(options?: UseSwipeDetectionOptions): {
+    start: (y: number) => void;
+    update: (y: number) => void;
+    end: () => SwipeResult;
+};

package/dist/index.mjs

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

package/dist/style.css

@@ -1 +1 @@
-[data-vsbs-container][data-v-ccadc172]{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-ccadc172]{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-ccadc172]: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-ccadc172]{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-height:inherit;max-width:var(--vsbs-max-width, 640px);pointer-events:all;position:fixed;right:0;width:100%;will-change:height;z-index:2}[data-vsbs-sheet-show=true][data-v-ccadc172]{visibility:visible}[data-vsbs-header][data-v-ccadc172]{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-ccadc172]: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-ccadc172]:empty{box-shadow:none;padding:14px var(--vsbs-padding-x, 16px) 10px}[data-vsbs-footer][data-v-ccadc172]{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-ccadc172]:empty{display:none}[data-vsbs-scroll][data-v-ccadc172]{flex-grow:1;overflow-y:auto;overscroll-behavior:none}[data-vsbs-content-wrapper][data-v-ccadc172]{height:100%}[data-vsbs-content][data-v-ccadc172]{display:grid;padding:8px var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}
+[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.5.0",
+  "version": "3.0.0-next.1",
   "type": "module",
   "exports": {
     ".": {
@@ -64,7 +64,6 @@
     "@vueuse/core": "^13.2.0",
     "@vueuse/integrations": "^13.2.0",
     "focus-trap": "^7.6.4",
-    "motion-v": "^1.5.0",
     "remeda": "^2.21.6",
     "vue": "^3.5.14"
   },
@@ -89,6 +88,7 @@
     "LICENSE"
   ],
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "provenance": true
   }
 }