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

package/README.md

@@ -132,20 +132,21 @@ For Nuxt 3, just wrap component in `<ClientOnly>`
 
 ### Prop Definitions
 
-| Prop                | Type                      | Default          | Description                                    |
-| ------------------- | ------------------------- | ---------------- | ---------------------------------------------- |
-| duration            | Number                    | 250              | Animation duration in milliseconds             |
-| snapPoints          | Array<number\|string>     | [instinctHeight] | Custom snapping positions                      |
-| initialSnapPoint    | Number                    | minHeight        | Initial snap point index                       |
-| blocking            | Boolean                   | true             | Block interactions with underlying content     |
-| canSwipeClose       | Boolean                   | true             | Enable swipe-to-close gesture                  |
-| canBackdropClose    | Boolean                   | true             | Allow closing by tapping backdrop              |
-| expandOnContentDrag | Boolean                   | true             | Enable expanding by dragging content           |
-| teleprtTo           | String \| RendererElement | body             | Teleport to a specific element                 |
-| teleportDefer       | Boolean                   | false            | Defer teleporting until opened (Vue 3.5+ only) |
-| headerClass         | String                    | ''               | Set header element class                       |
-| contentClass        | String                    | ''               | Set content element class                      |
-| footerClass         | String                    | ''               | Set footer element class                       |
+| Prop                | Type                      | Default          | Description                                                               |
+| ------------------- | ------------------------- | ---------------- | ------------------------------------------------------------------------- |
+| duration            | Number                    | 250              | Animation duration in milliseconds                                        |
+| snapPoints          | Array<number\|string>     | [instinctHeight] | Custom snapping positions                                                 |
+| initialSnapPoint    | Number                    | minHeight        | Initial snap point index                                                  |
+| blocking            | Boolean                   | true             | Block interactions with underlying content                                |
+| canSwipeClose       | Boolean                   | true             | Enable swipe-to-close gesture                                             |
+| swipeCloseThreshold | Number\|String            | "50%"            | The amount of translation (in px or %) after which the element will close |
+| canBackdropClose    | Boolean                   | true             | Allow closing by tapping backdrop                                         |
+| expandOnContentDrag | Boolean                   | true             | Enable expanding by dragging content                                      |
+| teleportTo          | String \| RendererElement | body             | Teleport to a specific element                                            |
+| teleportDefer       | Boolean                   | false            | Defer teleporting until opened (Vue 3.5+ only)                            |
+| headerClass         | String                    | ''               | Set header element class                                                  |
+| contentClass        | String                    | ''               | Set content element class                                                 |
+| footerClass         | String                    | ''               | Set footer element class                                                  |
 
 ## Exposed methods
 
@@ -160,7 +161,7 @@ Assuming there is `const bottomSheet = ref()`
 ## Events
 
 | Event           | Description                            | Payload                 |
-| --------------  | -------------------------------------- | ----------------------- |
+| --------------- | -------------------------------------- | ----------------------- |
 | opened          | Emitted when sheet finishes opening    | -                       |
 | opening-started | Emitted when sheet starts opening      | -                       |
 | closed          | Emitted when sheet finishes closing    | -                       |

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 P, 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 be, Motion as A } from "motion-v";
-import { useVModel as Ve, useWindowSize as Fe, useElementBounding as Q, useScrollLock as ye } 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 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;
 }
-function $e(n, a, o) {
-  const t = P(0), s = _(() => n.value.map((p) => typeof p == "string" ? G(p, o.value) : p)), y = _(() => Math.min(...s.value)), r = _(() => Math.max(...s.value)), h = _(() => {
-    const p = s.value.reduce(
-      (g, M) => Math.abs(M - a.value) < Math.abs(g - a.value) ? M : g
+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(
+      (P, w) => Math.abs(w - l.value) < Math.abs(P - l.value) ? w : P
     );
-    return s.value.indexOf(p);
+    return v.value.indexOf(b);
   });
   return {
     currentSnapPointIndex: t,
-    flattenedSnapPoints: s,
-    minSnapPoint: y,
-    maxSnapPoint: r,
-    closestSnapPointIndex: h
+    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 Ge(o = {}) {
+  const { velocityThreshold: l = 0.5 } = o, r = g(0), t = g(0), v = g(0), C = 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 }];
+    },
+    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 Ke(o, l, r) {
+  let t = (v) => o(v, ...l);
+  return r === void 0 ? t : Object.assign(t, { lazy: r, 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 Ue(o, l, r) {
+  let t = o.length - l.length;
+  if (t === 0) return o(...l);
+  if (t === 1) return Ke(o, l, r);
   throw new Error("Wrong number of arguments");
 }
-function je(n, { triggerAt: a = "end", minQuietPeriodMs: o, maxBurstDurationMs: t, minGapMs: s, reducer: y = ze }) {
-  let r, h, p, g, M = () => {
-    let i = p;
-    i !== void 0 && (p = void 0, n(i), s !== void 0 && (h = setTimeout(D, s)));
-  }, D = () => {
-    clearTimeout(h), h = void 0, r === void 0 && M();
-  }, H = () => {
-    clearTimeout(r), r = void 0, g = void 0, h === void 0 && M();
+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 = () => {
+    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 && h === void 0;
-    if ((a !== "start" || c) && (p = y(p, ...i)), !(r === void 0 && !c)) {
-      if (o !== void 0 || t !== void 0 || s === void 0) {
-        clearTimeout(r);
-        let C = Date.now();
-        g ?? (g = C);
-        let W = t === void 0 ? o ?? 0 : Math.min(o ?? t, t - (C - g));
-        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 (r !== 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, $);
       }
-      a !== "end" && c && M();
+      l !== "end" && h && w();
     }
   }, cancel: () => {
-    clearTimeout(r), r = void 0, g = void 0, clearTimeout(h), h = void 0, p = 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 && h === void 0;
+    return i === void 0 && y === void 0;
   } };
 }
-var ze = () => "";
-function b(...n) {
-  return We(Le, n);
+var Xe = () => "";
+function T(...o) {
+  return Ue(Ze, 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 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));
 }
-function Ne(n, a) {
-  return Math.pow(n, a * 5);
+function tt(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 ke(o, l, r) {
+  return l === 0 || Math.abs(l) === 1 / 0 ? tt(o, r) : o * l * r / (l + r * 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 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;
 }
-const Qe = { "data-vsbs-container": "" }, Ge = /* @__PURE__ */ Be({
+const nt = ["data-vsbs-shadow", "data-vsbs-sheet-show"], at = /* @__PURE__ */ Re({
   __name: "BottomSheet",
   props: {
     duration: { default: 250 },
@@ -85,6 +114,7 @@ const Qe = { "data-vsbs-container": "" }, Ge = /* @__PURE__ */ Be({
     initialSnapPoint: {},
     blocking: { type: Boolean, default: !0 },
     canSwipeClose: { type: Boolean, default: !0 },
+    swipeCloseThreshold: {},
     canBackdropClose: { type: Boolean, default: !0 },
     expandOnContentDrag: { type: Boolean, default: !0 },
     modelValue: { type: Boolean },
@@ -95,323 +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, y = Ve(t, "modelValue", s, {
+  setup(o, { expose: l, emit: r }) {
+    Le((e) => ({
+      "55bcd70e": xe.value
+    }));
+    const t = o, v = r, C = Ne(t, "modelValue", v, {
       passive: !0
     });
-    q(y, (e) => {
-      e && X();
-    }), Ie(() => {
-      y.value && X();
+    U(C, (e) => {
+      e && te();
+    }), _e(() => {
+      C.value && te();
     });
-    const r = P(), h = P(null), p = P(null), g = P(null), M = P(null), D = P(null), H = P(null), i = P(t.expandOnContentDrag), { height: c } = Fe(), { height: C } = Q(r), { height: W } = Q(h), { height: se } = Q(D), { height: re } = Q(p), K = _({
+    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({
       get() {
-        return b(
-          Math.ceil(se.value + W.value + re.value),
+        return T(
+          Math.ceil(L.value + $.value + re.value),
           {
-            max: c.value
+            max: h.value
           }
         );
       },
       set(e) {
-        [W.value, se.value, re.value] = e;
+        [$.value, L.value, re.value] = e;
       }
-    }), l = P(0), v = P(0), k = me(0), S = me(0), { snapPoints: Pe } = Ee(t), d = _(() => Pe.value ?? [K.value]), {
-      flattenedSnapPoints: U,
-      currentSnapPointIndex: I,
-      closestSnapPointIndex: V,
+    }), a = g(0), u = g(0), xe = I(() => t.duration + "ms"), { snapPoints: Ye } = Ae(t), f = I(() => Ye.value ?? [X.value]), {
+      flattenedSnapPoints: k,
+      currentSnapPointIndex: B,
+      closestSnapPointIndex: F,
       minSnapPoint: O,
-      maxSnapPoint: F
-    } = $e(d, l, c);
-    let w;
-    const j = ye(document.body), z = ye(document.documentElement), Y = Re([r, H], {
+      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], {
       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);
+      d.value = !0, ve(e);
     }
     function ve(e) {
-      i.value && e.preventDefault();
+      d.value && e.preventDefault();
     }
-    const de = (e) => {
-      e.key === "Escape" && L();
-    }, Ce = () => {
-      t.canBackdropClose && L();
+    const ce = (e) => {
+      e.key === "Escape" && x();
+    }, Me = () => {
+      t.canBackdropClose && x();
     };
-    let J = !1;
-    const X = async () => {
-      if (J) return;
-      y.value = !0, J = !0, s("opening-started"), t.blocking && (j.value = !0, z.value = !0), await N();
-      const e = r.value.$el;
-      C.value = e.getBoundingClientRect().height;
-      const u = e.querySelector("[data-vsbs-content]"), f = e.querySelector("[data-vsbs-header]"), T = e.querySelector("[data-vsbs-footer]");
-      if (K.value = [
-        f.getBoundingClientRect().height,
-        u.getBoundingClientRect().height,
-        T.getBoundingClientRect().height
-      ], await N(), I.value = U.value.findIndex(
-        (x) => x === O.value
+    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();
+      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
       ), t.initialSnapPoint) {
-        const x = t.initialSnapPoint;
-        if (x < 0 || x >= d.value.length) {
+        const c = t.initialSnapPoint;
+        if (c < 0 || c >= f.value.length) {
           console.warn("Index out of bounds");
           return;
         }
-        let R;
-        typeof d.value[x] == "number" ? R = b(d.value[x], {
-          max: c.value
-        }) : R = G(d.value[x], c.value), l.value = R;
+        let m;
+        typeof f.value[c] == "number" ? m = T(f.value[c], {
+          max: h.value
+        }) : m = z(f.value[c], h.value), a.value = m;
       } else
-        l.value = b(O.value, {
-          max: c.value
+        a.value = T(O.value, {
+          max: h.value
         });
-      v.value = l.value, k.jump(l.value), S.jump(l.value), requestAnimationFrame(() => {
-        w = B(k, l.value, {
-          duration: t.duration / 1e3,
-          ease: "easeInOut"
-        }), w = B(S, 0, {
-          duration: t.duration / 1e3,
-          ease: "easeInOut",
-          onComplete: () => {
-            t.blocking && (s("opened"), Y.activate());
-          }
-        });
-      }), window.addEventListener("keydown", de), J = !1;
+      u.value = a.value, requestAnimationFrame(() => {
+        u.value = 0, t.blocking && setTimeout(() => {
+          C.value && (v("opened"), Z.activate());
+        }, t.duration);
+      }), window.addEventListener("keydown", ce), ee = !1;
     };
-    let Z = !1;
-    const L = () => {
-      Z || (y.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 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;
       }, t.duration));
-    }, ce = (e) => {
-      if (!d.value) return;
-      if (e < 0 || e >= d.value.length) {
+    }, de = (e) => {
+      if (!f.value) return;
+      if (e < 0 || e >= f.value.length) {
         console.warn("Index out of bounds");
         return;
       }
-      I.value = e;
-      let u;
-      typeof d.value[e] == "number" ? u = b(d.value[e], {
-        max: c.value
-      }) : u = G(d.value[e], c.value), l.value = u, w = B(k, l.value, {
-        duration: t.duration / 1e3,
-        ease: "easeInOut",
-        onComplete: () => s("snapped", d.value.indexOf(d.value[e]))
-      });
+      B.value = e;
+      let n;
+      typeof f.value[e] == "number" ? n = T(f.value[e], {
+        max: h.value
+      }) : n = z(f.value[e], h.value), a.value = n, v("snapped", f.value.indexOf(f.value[e]));
     };
     function fe(e) {
-      e > 0 ? s("dragging-down") : e < 0 && s("dragging-up");
+      e > 0 ? v("dragging-down") : e < 0 && v("dragging-up");
     }
-    const pe = () => {
-      l.value = C.value, v.value = S.get(), k.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 <= O.value && (l.value = O.value, v.value += u.delta.y, S.set(
-        t.canSwipeClose ? b(v.value, { min: 0 }) : b(ue(v.value, -C.value, 0, 0.5), {
-          min: 0
-        })
-      )), k.set(
-        b(ue(l.value, 0, F.value, 0.25), {
-          min: 0,
-          max: c.value
-        })
-      ), fe(u.delta.y));
-    }, ee = () => {
-      v.value = t.canSwipeClose ? [0, l.value].reduce(
-        (u, f) => Math.abs(f - v.value) < Math.abs(u - v.value) ? f : u
-      ) : 0, w = 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 = b(d.value[V.value], {
-        max: c.value
-      }) : e = G(
-        d.value[V.value],
-        c.value
-      ), l.value = e, w = B(k, l.value, {
-        duration: t.duration / 1e3,
-        ease: "easeInOut",
-        onComplete: () => s(
-          "snapped",
-          d.value.indexOf(d.value[V.value])
-        )
-      }), w = B(S, 0, {
-        duration: t.duration / 1e3,
-        ease: "easeInOut"
-      });
-    }, ke = (e, u) => {
-      if (l.value = C.value, v.value = S.get(), w && w.stop(), !g.value) return;
-      const f = g.value.scrollTop === 0, T = u.delta.y > 0, x = U.value.length === 1, R = 0.5 > Math.abs(l.value - F.value);
-      if (x) {
+    const pe = (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),
+        { min: 0 }
+      )), a.value = T(se(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) => {
+      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();
+          return;
+        }
+      } else
+        u.value = 0;
+      if (u.value === a.value) {
+        u.value = 0, x();
+        return;
+      }
+      const n = R.end();
+      if (n.isSwipe && n.direction === "down" && t.canSwipeClose && a.value <= O.value + 10) {
+        u.value = a.value, x();
+        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;
+        } else {
+          const m = [...c].reverse().find((Y) => Y < a.value - 1);
+          s = m !== void 0 ? k.value.indexOf(m) : F.value;
+        }
+      } else
+        s = F.value;
+      B.value = s;
+      let p;
+      if (typeof f.value[s] == "number" ? p = T(f.value[s], {
+        max: h.value
+      }) : p = z(
+        f.value[s],
+        h.value
+      ), p === 0) {
+        x();
+        return;
+      }
+      a.value = p, u.value = 0, v("snapped", f.value.indexOf(f.value[s]));
+    }, De = (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) {
         if (!t.expandOnContentDrag) {
-          i.value = !1;
+          d.value = !1;
           return;
         }
-        S.get() === 0 && f && T && (i.value = !0), S.get() === 0 && f && !T && (i.value = !1);
+        u.value === 0 && n && s && (d.value = !0), u.value === 0 && n && !s && (d.value = !1);
       } else {
         if (!t.expandOnContentDrag) {
-          i.value = !1;
+          d.value = !1;
           return;
         }
-        i.value = !0, R && (T && f && (i.value = !0), !T && f && (i.value = !1), f || (i.value = !1));
+        d.value = !0, c && (s && n && (d.value = !0), !s && n && (d.value = !1), n || (d.value = !1));
       }
-    }, we = async (e, u) => {
-      if (await N(), !t.expandOnContentDrag) {
-        i.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 (!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 <= O.value && (l.value = O.value, i.value && t.expandOnContentDrag && (v.value += u.delta.y), v.value = b(v.value, { min: 0, max: O.value }), S.set(
-        t.canSwipeClose ? b(v.value, { min: 0 }) : b(ue(v.value, -C.value, 0, 0.5), {
-          min: 0
-        })
-      )), l.value > F.value && (l.value = F.value), l.value = b(l.value, { max: c.value }), U.value.length === 1 || l.value === F.value && (i.value = !1), k.set(l.value), fe(u.delta.y);
-    }, Te = () => {
-      t.blocking || (j.value = !0, z.value = !0);
-    }, xe = () => {
-      t.blocking || (j.value = !1, z.value = !1);
-    }, Me = () => {
-      if (!g.value) return;
-      const e = g.value.scrollTop === 0;
-      i.value = e;
-    }, Oe = je((e) => ce(e), {
+      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);
+        else {
+          H.value = s;
+          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),
+        { 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();
+          return;
+        }
+      } else
+        u.value = 0;
+      if (u.value === a.value) {
+        u.value = 0, x();
+        return;
+      }
+      const n = R.end();
+      if (n.isSwipe && n.direction === "down" && t.canSwipeClose && a.value <= O.value + 10) {
+        u.value = a.value, x();
+        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;
+        } else {
+          const m = [...c].reverse().find((Y) => Y < a.value - 1);
+          s = m !== void 0 ? k.value.indexOf(m) : F.value;
+        }
+      } else
+        s = F.value;
+      B.value = s;
+      let p;
+      if (typeof f.value[s] == "number" ? p = T(f.value[s], {
+        max: h.value
+      }) : p = z(
+        f.value[s],
+        h.value
+      ), p === 0) {
+        x();
+        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 = () => {
+      if (!P.value) return;
+      const e = P.value.scrollTop === 0;
+      d.value = e;
+    }, $e = Je((e) => de(e), {
       minQuietPeriodMs: t.duration,
-      reducer: (e, u) => u
+      reducer: (e, n) => n
     });
-    return q(d, (e, u) => {
-      if (y.value === !1 || !e || !u) return;
-      const f = e[I.value], T = u[I.value];
-      typeof f != "string" && typeof T != "string" && (l.value = b(f, {
-        max: c.value
-      }), f !== T && (w = B(k, l.value, {
-        duration: t.duration / 1e3,
-        ease: "easeInOut"
-      })));
-    }), q(c, () => {
-      Oe.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(be), null, {
-          default: E(() => [
-            m(y) && e.blocking ? (ae(), te(m(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, {
+        max: h.value
+      }));
+    }), U(h, () => {
+      $e.call(B.value);
+    }), U(X, (e) => {
+      v("instinctHeight", e);
+    }), Ve(() => {
+      Z.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)`;
+    };
+    return l({ open: te, close: x, snapToPoint: de }), (e, n) => (V(), ae(We, null, [
+      (V(), we(Se, {
+        to: e.teleportTo,
+        defer: e.teleportDefer
+      }, [
+        Ce(be, { name: "vsbs-backdrop" }, {
+          default: ye(() => [
+            le(C) && e.blocking ? (V(), ae("div", {
               key: 0,
               ref_key: "backdrop",
-              ref: H,
+              ref: M,
               "data-vsbs-backdrop": "",
-              onClick: u[0] || (u[0] = (f) => Ce()),
-              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] = (s) => Me())
+            }, null, 512)) : Pe("", !0)
           ]),
           _: 1
-        }),
-        $(m(be), null, {
-          default: E(() => [
-            m(y) ? (ae(), te(m(A), {
+        })
+      ], 8, ["to", "defer"])),
+      (V(), we(Se, {
+        to: e.teleportTo,
+        defer: e.teleportDefer
+      }, [
+        Ce(be, {
+          name: "vsbs-sheet",
+          onLeave: Fe
+        }, {
+          default: ye(() => [
+            le(C) ? (V(), ae("div", {
               key: 0,
               ref_key: "sheet",
-              ref: r,
-              exit: { y: "100%", height: m(C) },
-              initial: !1,
-              style: He({ y: m(S), height: m(k) }),
+              ref: i,
+              style: ze({
+                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(y),
+              "data-vsbs-sheet-show": le(C),
               "aria-modal": "true",
               "data-vsbs-sheet": "",
               tabindex: "-1",
-              onTouchstart: Te,
-              onTouchend: xe
-            }, {
-              default: E(() => [
-                $(m(A), {
-                  ref_key: "sheetHeader",
-                  ref: h,
-                  "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: g,
-                  "data-vsbs-scroll": "",
-                  onScrollend: Me
+              onTouchstart: Ee,
+              onTouchend: He
+            }, [
+              W("div", {
+                ref_key: "sheetHeader",
+                ref: y,
+                "data-vsbs-header": "",
+                onPointerdown: pe,
+                onPointermove: he,
+                onPointerup: K,
+                onPointercancel: K,
+                onTouchmove: ie,
+                class: oe(e.headerClass),
+                style: { "touch-action": "none" }
+              }, [
+                ue(e.$slots, "header", {}, void 0, !0)
+              ], 34),
+              W("div", {
+                ref_key: "sheetScroll",
+                ref: P,
+                "data-vsbs-scroll": "",
+                onScrollend: Ie
+              }, [
+                W("div", {
+                  ref_key: "sheetContentWrapper",
+                  ref: w,
+                  "data-vsbs-content-wrapper": "",
+                  onPointerdown: Oe,
+                  onPointermove: Be,
+                  onPointerup: me,
+                  onPointercancel: me,
+                  onTouchmove: ve,
+                  style: { touchAction: "pan-y" }
                 }, [
-                  $(m(A), {
-                    ref_key: "sheetContentWrapper",
-                    ref: M,
-                    "data-vsbs-content-wrapper": "",
-                    onPanStart: ke,
-                    onPan: we,
-                    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: p,
-                  "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)
+                  W("div", {
+                    ref_key: "sheetContent",
+                    ref: S,
+                    "data-vsbs-content": "",
+                    class: oe(e.contentClass)
+                  }, [
+                    ue(e.$slots, "default", {}, void 0, !0)
+                  ], 2)
+                ], 544)
+              ], 544),
+              W("div", {
+                ref_key: "sheetFooter",
+                ref: b,
+                "data-vsbs-footer": "",
+                onPointerdown: pe,
+                onPointermove: he,
+                onPointerup: K,
+                onPointercancel: K,
+                onTouchmove: ie,
+                class: oe(e.footerClass),
+                style: { "touch-action": "none" }
+              }, [
+                ue(e.$slots, "footer", {}, void 0, !0)
+              ], 34)
+            ], 44, nt)) : Pe("", !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-3c41a73f"]]);
+}), lt = (o, l) => {
+  const r = o.__vccOpts || o;
+  for (const [t, v] of l)
+    r[t] = v;
+  return r;
+}, rt = /* @__PURE__ */ lt(at, [["__scopeId", "data-v-ac41efee"]]);
 export {
-  Ze as default
+  rt as default
 };

package/dist/style.css

@@ -1 +1 @@
-[data-vsbs-container][data-v-3c41a73f]{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-3c41a73f]{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-3c41a73f]: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-3c41a73f]{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-3c41a73f]{visibility:visible}[data-vsbs-header][data-v-3c41a73f]{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-3c41a73f]: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-3c41a73f]:empty{box-shadow:none;padding:14px var(--vsbs-padding-x, 16px) 10px}[data-vsbs-footer][data-v-3c41a73f]{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-3c41a73f]:empty{display:none}[data-vsbs-scroll][data-v-3c41a73f]{flex-grow:1;overflow-y:auto;overscroll-behavior:none}[data-vsbs-content-wrapper][data-v-3c41a73f]{height:100%}[data-vsbs-content][data-v-3c41a73f]{display:grid;padding:8px var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}
+[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}

package/dist/types.d.ts

@@ -5,6 +5,7 @@ export interface BottomSheetProps {
     initialSnapPoint?: number;
     blocking?: boolean;
     canSwipeClose?: boolean;
+    swipeCloseThreshold?: string | number;
     canBackdropClose?: boolean;
     expandOnContentDrag?: boolean;
     modelValue?: boolean;

package/package.json

@@ -32,7 +32,7 @@
     "url": "https://github.com/megaarmos/vue-spring-bottom-sheet/issues"
   },
   "private": false,
-  "version": "2.4.3",
+  "version": "2.6.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
   }
 }