@douxcode/vue-spring-bottom-sheet 1.2.7 → 2.0.0

package/dist/BottomSheet.d.ts

@@ -1,4 +1,4 @@
-import { BottomSheetProps } from './types.ts';
+import { BottomSheetProps } from './types';
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
@@ -7,37 +7,35 @@ declare function __VLS_template(): {
         footer?(_: {}): any;
     };
     refs: {
-        backdrop: HTMLDivElement;
-        sheet: HTMLDivElement;
-        sheetHeader: HTMLDivElement;
+        backdrop: import('vue').ShallowUnwrapRef<{}> | null;
+        sheet: import('vue').ShallowUnwrapRef<{}> | null;
+        sheetHeader: import('vue').ShallowUnwrapRef<{}> | null;
         sheetScroll: HTMLDivElement;
-        sheetContentWrapper: HTMLDivElement;
+        sheetContentWrapper: import('vue').ShallowUnwrapRef<{}> | null;
         sheetContent: HTMLDivElement;
-        sheetFooter: HTMLDivElement;
+        sheetFooter: import('vue').ShallowUnwrapRef<{}> | null;
     };
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<BottomSheetProps, {
-    open: () => void;
+    open: () => Promise<void>;
     close: () => void;
-    snapToPoint: (snapPoint: number) => void;
+    snapToPoint: (index: number) => void;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     opened: () => any;
     closed: () => any;
     ready: () => any;
     "dragging-up": () => any;
     "dragging-down": () => any;
-    minHeight: (minSheetHeight: number) => any;
-    maxHeight: (maxSheetHeight: number) => any;
+    instinctHeight: (instinctHeight: number) => any;
 }, string, import('vue').PublicProps, Readonly<BottomSheetProps> & Readonly<{
     onOpened?: (() => any) | undefined;
     onClosed?: (() => any) | undefined;
     onReady?: (() => any) | undefined;
     "onDragging-up"?: (() => any) | undefined;
     "onDragging-down"?: (() => any) | undefined;
-    onMinHeight?: ((minSheetHeight: number) => any) | undefined;
-    onMaxHeight?: ((maxSheetHeight: number) => any) | undefined;
+    onInstinctHeight?: ((instinctHeight: number) => any) | undefined;
 }>, {
     duration: number;
     blocking: boolean;
@@ -45,13 +43,13 @@ declare const __VLS_component: import('vue').DefineComponent<BottomSheetProps, {
     canBackdropClose: boolean;
     expandOnContentDrag: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
-    backdrop: HTMLDivElement;
-    sheet: HTMLDivElement;
-    sheetHeader: HTMLDivElement;
+    backdrop: import('vue').ShallowUnwrapRef<{}> | null;
+    sheet: import('vue').ShallowUnwrapRef<{}> | null;
+    sheetHeader: import('vue').ShallowUnwrapRef<{}> | null;
     sheetScroll: HTMLDivElement;
-    sheetContentWrapper: HTMLDivElement;
+    sheetContentWrapper: import('vue').ShallowUnwrapRef<{}> | null;
     sheetContent: HTMLDivElement;
-    sheetFooter: HTMLDivElement;
+    sheetFooter: import('vue').ShallowUnwrapRef<{}> | null;
 }, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/composables/useSnapPoints.d.ts

@@ -1,7 +1,8 @@
 import { Ref } from 'vue';
-export declare function useSnapPoints(snapPoints: Ref<number[]>, height: Ref<number>): {
-    minSnap: import('vue').ComputedRef<number>;
-    maxSnap: import('vue').ComputedRef<number>;
-    snapPoints: Ref<number[], number[]>;
+export declare function useSnapPoints(snapPoints: Ref<Array<number | `${number}%`>>, height: Ref<number>, windowHeight: Ref<number>): {
+    currentSnapPointIndex: Ref<number, number>;
+    flattenedSnapPoints: import('vue').ComputedRef<number[]>;
+    minSnapPoint: import('vue').ComputedRef<number>;
+    maxSnapPoint: import('vue').ComputedRef<number>;
     closestSnapPointIndex: import('vue').ComputedRef<number>;
 };

package/dist/index.mjs

@@ -1,303 +1,383 @@
-import { computed as y, defineComponent as ce, useCssVars as fe, ref as g, toRefs as he, watch as ee, nextTick as R, onMounted as ge, openBlock as pe, createBlock as me, Teleport as be, createElementVNode as b, createVNode as ye, Transition as Se, withCtx as we, withDirectives as ke, vShow as Te, renderSlot as z } from "vue";
-import { useWindowSize as Ce, useElementBounding as I, useScrollLock as te } from "@vueuse/core";
-import { useGesture as N, rubberbandIfOutOfBounds as G } from "@vueuse/gesture";
-import { useMotionProperties as De, useMotionTransitions as xe, useMotionControls as Me } from "@vueuse/motion";
-import { useFocusTrap as Pe } from "@vueuse/integrations/useFocusTrap";
-function _e(o, u, a) {
-  let e = (n) => o(n, ...u);
-  return a === void 0 ? e : Object.assign(e, { lazy: a, lazyArgs: u });
+import { ref as y, computed as B, defineComponent as xe, toRefs as _e, watch as J, onUnmounted as Me, createBlock as X, openBlock as Z, Teleport as Oe, createElementVNode as ee, createVNode as $, unref as k, withCtx as E, createCommentVNode as ce, normalizeStyle as Ie, renderSlot as te, nextTick as q } from "vue";
+import { useMotionValue as fe, animate as O, AnimatePresence as he, Motion as A } from "motion-v";
+import { useWindowSize as Ee, useElementBounding as N, useScrollLock as pe } from "@vueuse/core";
+import { useFocusTrap as Be } from "@vueuse/integrations/useFocusTrap";
+function Q(n, a) {
+  const o = parseFloat(n);
+  return a * o / 100;
 }
-function He(o, u, a) {
-  let e = o.length - u.length;
-  if (e === 0) return o(...u);
-  if (e === 1) return _e(o, u, a);
+function De(n, a, o) {
+  const e = y(0), v = B(() => n.value.map((f) => typeof f == "string" ? Q(f, o.value) : f)), S = B(() => Math.min(...v.value)), i = B(() => Math.max(...v.value)), p = B(() => {
+    const f = v.value.reduce(
+      (g, x) => Math.abs(x - a.value) < Math.abs(g - a.value) ? x : g
+    );
+    return v.value.indexOf(f);
+  });
+  return {
+    currentSnapPointIndex: e,
+    flattenedSnapPoints: v,
+    minSnapPoint: S,
+    maxSnapPoint: i,
+    closestSnapPointIndex: p
+  };
+}
+function He(n, a, o) {
+  let e = (v) => n(v, ...a);
+  return o === void 0 ? e : Object.assign(e, { lazy: o, lazyArgs: a });
+}
+function Re(n, a, o) {
+  let e = n.length - a.length;
+  if (e === 0) return n(...a);
+  if (e === 1) return He(n, a, o);
   throw new Error("Wrong number of arguments");
 }
-function Oe(o, { triggerAt: u = "end", minQuietPeriodMs: a, maxBurstDurationMs: e, minGapMs: n, reducer: c = Be }) {
-  let s, r, f, S, C = () => {
-    let v = f;
-    v !== void 0 && (f = void 0, o(v), n !== void 0 && (r = setTimeout(H, n)));
+function Fe(n, { triggerAt: a = "end", minQuietPeriodMs: o, maxBurstDurationMs: e, minGapMs: v, reducer: S = $e }) {
+  let i, p, f, g, x = () => {
+    let r = f;
+    r !== void 0 && (f = void 0, n(r), v !== void 0 && (p = setTimeout(D, v)));
+  }, D = () => {
+    clearTimeout(p), p = void 0, i === void 0 && x();
   }, H = () => {
-    clearTimeout(r), r = void 0, s === void 0 && C();
-  }, w = () => {
-    clearTimeout(s), s = void 0, S = void 0, r === void 0 && C();
+    clearTimeout(i), i = void 0, g = void 0, p === void 0 && x();
   };
-  return { call: (...v) => {
-    let h = s === void 0 && r === void 0;
-    if ((u !== "start" || h) && (f = c(f, ...v)), !(s === void 0 && !h)) {
-      if (a !== void 0 || e !== void 0 || n === void 0) {
-        clearTimeout(s);
-        let p = Date.now();
-        S ?? (S = p);
-        let W = e === void 0 ? a ?? 0 : Math.min(a ?? e, e - (p - S));
-        s = setTimeout(w, W);
+  return { call: (...r) => {
+    let d = i === void 0 && p === void 0;
+    if ((a !== "start" || d) && (f = S(f, ...r)), !(i === void 0 && !d)) {
+      if (o !== void 0 || e !== void 0 || v === void 0) {
+        clearTimeout(i);
+        let w = Date.now();
+        g ?? (g = w);
+        let W = e === void 0 ? o ?? 0 : Math.min(o ?? e, e - (w - g));
+        i = setTimeout(H, W);
       }
-      u !== "end" && h && C();
+      a !== "end" && d && x();
     }
   }, cancel: () => {
-    clearTimeout(s), s = void 0, S = void 0, clearTimeout(r), r = void 0, f = void 0;
+    clearTimeout(i), i = void 0, g = void 0, clearTimeout(p), p = void 0, f = void 0;
   }, flush: () => {
-    w(), H();
+    H(), D();
   }, get isIdle() {
-    return s === void 0 && r === void 0;
+    return i === void 0 && p === void 0;
   } };
 }
-var Be = () => "";
-function $(...o) {
-  return He(Ee, o);
+var $e = () => "";
+function m(...n) {
+  return Re(Ae, n);
 }
-var Ee = (o, { min: u, max: a }) => u !== void 0 && o < u ? u : a !== void 0 && o > a ? a : o;
-function Ie(o, u) {
-  const a = y(() => o.value.sort((s, r) => s - r)), e = y(() => a.value[0]), n = y(() => a.value[a.value.length - 1]), c = y(() => {
-    const s = a.value.reduce(
-      (r, f) => Math.abs(f - u.value) < Math.abs(r - u.value) ? f : r
-    );
-    return a.value.indexOf(s);
-  });
-  return {
-    minSnap: e,
-    maxSnap: n,
-    snapPoints: o,
-    closestSnapPointIndex: c
-  };
+var Ae = (n, { min: a, max: o }) => a !== void 0 && n < a ? a : o !== void 0 && n > o ? o : n;
+function We(n, a, o) {
+  return Math.max(a, Math.min(n, o));
 }
-const $e = { "data-vsbs-container": "" }, We = ["data-vsbs-shadow", "data-vsbs-sheet-show"], Fe = /* @__PURE__ */ ce({
+function Le(n, a) {
+  return Math.pow(n, a * 5);
+}
+function ge(n, a, o) {
+  return a === 0 || Math.abs(a) === 1 / 0 ? Le(n, o) : n * a * o / (a + o * n);
+}
+function ae(n, a, o, e = 0.15) {
+  return e === 0 ? We(n, a, o) : n < a ? -ge(a - n, o - a, e) + a : n > o ? +ge(n - o, o - a, e) + o : n;
+}
+const Ve = { "data-vsbs-container": "" }, ze = /* @__PURE__ */ xe({
   __name: "BottomSheet",
   props: {
     duration: { default: 250 },
     snapPoints: {},
-    defaultSnapPoint: {},
+    initialSnapPoint: {},
     blocking: { type: Boolean, default: !0 },
     canSwipeClose: { type: Boolean, default: !0 },
     canBackdropClose: { type: Boolean, default: !0 },
     expandOnContentDrag: { type: Boolean, default: !0 }
   },
-  emits: ["opened", "closed", "ready", "dragging-up", "dragging-down", "minHeight", "maxHeight"],
-  setup(o, { expose: u, emit: a }) {
-    fe((i) => ({
-      "02470502": ne.value,
-      "3c3cbcbe": ue.value
-    }));
-    const e = o, n = a, c = g(null), s = g(null), r = g(null), f = g(null), S = g(null), C = g(null), H = g(null), w = g(!1), v = g(e.expandOnContentDrag), { height: h } = Ce(), { height: p } = I(c), { height: W } = I(s), { height: ae } = I(r), { height: oe } = I(C), Q = Pe([c, H], {
+  emits: ["opened", "closed", "ready", "dragging-up", "dragging-down", "instinctHeight"],
+  setup(n, { expose: a, emit: o }) {
+    const e = n, v = o, S = y(!1), i = y(), p = y(null), f = y(null), g = y(null), x = y(null), D = y(null), H = y(null), r = y(e.expandOnContentDrag), { height: d } = Ee({
+      type: "visual"
+    }), { height: w } = N(i), { height: W } = N(p), { height: ne } = N(D), { height: oe } = N(f), G = B({
+      get() {
+        return m(
+          Math.ceil(ne.value + W.value + oe.value),
+          {
+            max: d.value
+          }
+        );
+      },
+      set(t) {
+        [W.value, ne.value, oe.value] = t;
+      }
+    }), l = y(0), s = y(0), P = fe(0), b = fe(0), { snapPoints: me } = _e(e), h = B(() => me.value ?? [G.value]), {
+      flattenedSnapPoints: K,
+      currentSnapPointIndex: I,
+      closestSnapPointIndex: L,
+      minSnapPoint: M,
+      maxSnapPoint: R
+    } = De(h, l, d);
+    let _;
+    const V = pe(document.body), z = pe(document.documentElement), U = Be([i, H], {
       immediate: !1,
-      fallbackFocus: () => c.value || document.body
-    }), k = y(
-      () => Math.ceil(oe.value + W.value + ae.value)
-    ), ne = y(() => `visibility ${e.duration}ms ease-in-out`), ue = y(() => `opacity ${e.duration}ms ease-in-out`), { motionProperties: D } = De(c), { push: x, stop: le, motionValues: O } = xe(), { set: M, stop: j } = Me(
-      D,
-      {},
-      { push: x, motionValues: O, stop: le }
-    ), t = g(0), l = g(0), { snapPoints: ie } = he(e), se = y(() => ie.value ?? [k.value]), {
-      minSnap: P,
-      maxSnap: _,
-      snapPoints: T,
-      closestSnapPointIndex: F
-    } = Ie(se, t), L = te(document.body), V = te(document.documentElement), K = (i) => {
-      i.key === "Escape" && E();
-    }, re = () => {
-      c.value && (t.value = Math.min(e.defaultSnapPoint ?? P.value, h.value), M({
-        height: t.value,
-        y: t.value
-      }), x("y", 0, D, {
-        type: "tween",
-        easings: "easeInOut",
-        bounce: 0,
-        duration: e.duration
-      }), w.value = !0, window.addEventListener("keydown", K), e.blocking && setTimeout(() => {
-        O.value.y.get() - 0 < 0.1 && (n("opened"), Q.activate());
-      }, e.duration));
-    }, E = () => {
-      c.value && (x("y", p.value, D, {
-        type: "tween",
-        bounce: 0,
-        duration: e.duration
-      }), w.value = !1, e.blocking && Q.deactivate(), window.removeEventListener("keydown", K), setTimeout(() => {
-        O.value.y.get() - p.value < 0.1 && n("closed");
-      }, e.duration));
-    }, ve = () => {
-      e.canBackdropClose && E();
-    };
-    function U(i) {
-      v.value = !0, q(i);
+      fallbackFocus: () => i.value || document.body
+    });
+    function le(t) {
+      r.value = !0, ue(t);
     }
-    function q(i) {
-      v.value && i.preventDefault();
+    function ue(t) {
+      r.value && t.preventDefault();
     }
-    const X = (i) => {
-      t.value = i, x("height", t.value, D, {
-        type: "tween",
-        easings: "easeInOut",
-        bounce: 0,
-        duration: e.duration
+    const ie = (t) => {
+      t.key === "Escape" && j();
+    }, be = () => {
+      e.canBackdropClose && j();
+    }, ye = async () => {
+      S.value = !0, e.blocking && (V.value = !0, z.value = !0), await q();
+      const t = i.value.$el;
+      w.value = t.getBoundingClientRect().height;
+      const u = t.querySelector("[data-vsbs-content]"), c = t.querySelector("[data-vsbs-header]"), C = t.querySelector("[data-vsbs-footer]");
+      if (G.value = [
+        c.getBoundingClientRect().height,
+        u.getBoundingClientRect().height,
+        C.getBoundingClientRect().height
+      ], await q(), I.value = K.value.findIndex(
+        (T) => T === M.value
+      ), e.initialSnapPoint) {
+        const T = e.initialSnapPoint;
+        if (T < 0 || T >= h.value.length) {
+          console.warn("Index out of bounds");
+          return;
+        }
+        let F;
+        typeof h.value[T] == "number" ? F = m(h.value[T], {
+          max: d.value
+        }) : F = Q(h.value[T], d.value), l.value = F;
+      } else
+        l.value = m(M.value, {
+          max: d.value
+        });
+      s.value = l.value, P.set(l.value), b.set(l.value), _ = O(P, l.value, {
+        duration: e.duration / 1e3,
+        ease: "easeInOut"
+      }), _ = O(b, 0, {
+        duration: e.duration / 1e3,
+        ease: "easeInOut"
+      }), window.addEventListener("keydown", ie), e.blocking && setTimeout(() => {
+        P.get() < 1 && (v("opened"), U.activate());
+      }, e.duration);
+    }, j = () => {
+      S.value = !1, e.blocking && (V.value = !1, z.value = !1), window.removeEventListener("keydown", ie), e.blocking && U.deactivate(), setTimeout(() => {
+        v("closed");
+      }, e.duration);
+    }, re = (t) => {
+      if (!h.value) return;
+      if (t < 0 || t >= h.value.length) {
+        console.warn("Index out of bounds");
+        return;
+      }
+      I.value = t;
+      let u;
+      typeof h.value[t] == "number" ? u = m(h.value[t], {
+        max: d.value
+      }) : u = Q(h.value[t], d.value), l.value = u, _ = O(P, l.value, {
+        duration: e.duration / 1e3,
+        ease: "easeInOut"
       });
-    }, J = ({
-      delta: [i, d],
-      direction: [B, m]
-    }) => {
-      c.value && (l.value <= 0 && (t.value -= d), t.value <= P.value && (t.value = P.value, l.value += d, M({
-        y: e.canSwipeClose ? $(l.value, { min: 0 }) : $(G(l.value, -p.value, 0, 0.5), { min: 0 })
-      })), M({
-        height: $(G(t.value, 0, _.value, 0.25), {
+    };
+    function se(t) {
+      t > 0 ? v("dragging-down") : t < 0 && v("dragging-up");
+    }
+    const ve = () => {
+      l.value = w.value, s.value = b.get(), P.jump(l.value), b.jump(s.value);
+    }, de = async (t, u) => {
+      await q(), i.value && (s.value <= 0 && (l.value -= u.delta.y), l.value <= M.value && (l.value = M.value, s.value += u.delta.y, b.set(
+        e.canSwipeClose ? m(s.value, { min: 0 }) : m(ae(s.value, -w.value, 0, 0.5), {
+          min: 0
+        })
+      )), P.set(
+        m(ae(l.value, 0, R.value, 0.25), {
           min: 0,
-          max: h.value
+          max: d.value
         })
-      }), m > 0 ? n("dragging-down") : m < 0 && n("dragging-up"));
-    }, A = () => {
-      L.value = !1, V.value = !1, l.value = e.canSwipeClose ? [0, t.value].reduce(
-        (i, d) => Math.abs(d - l.value) < Math.abs(i - l.value) ? d : i
-      ) : 0, x("y", l.value, D, {
-        type: "tween",
-        easings: "easeInOut",
-        bounce: 0,
-        duration: e.duration
-      }), l.value === t.value && (l.value = 0, E()), t.value = Math.min(T.value[F.value], h.value), x("height", t.value, D, {
-        type: "tween",
-        easings: "easeInOut",
-        bounce: 0,
-        duration: e.duration
+      ), se(u.delta.y));
+    }, Y = () => {
+      s.value = e.canSwipeClose ? [0, l.value].reduce(
+        (u, c) => Math.abs(c - s.value) < Math.abs(u - s.value) ? c : u
+      ) : 0, _ = O(b, s.value, {
+        duration: e.duration / 1e3,
+        ease: "easeInOut"
+      }), s.value === l.value && (s.value = 0, j()), I.value = L.value;
+      let t;
+      typeof h.value[L.value] == "number" ? t = m(h.value[L.value], {
+        max: d.value
+      }) : t = Q(
+        h.value[L.value],
+        d.value
+      ), l.value = t, _ = O(P, l.value, {
+        duration: e.duration / 1e3,
+        ease: "easeInOut"
+      }), _ = O(b, 0, {
+        duration: e.duration / 1e3,
+        ease: "easeInOut"
       });
-    }, Z = () => {
-      L.value = !0, V.value = !0, t.value = p.value, l.value = O.value.y.get(), j();
-    };
-    N(
-      {
-        onDragStart: Z,
-        onDrag: J,
-        onDragEnd: A
-      },
-      {
-        domTarget: s,
-        drag: { filterTaps: !0 }
+    }, Se = (t, u) => {
+      if (l.value = w.value, s.value = b.get(), _.stop(), !g.value) return;
+      const c = g.value.scrollTop === 0, C = u.delta.y > 0, T = K.value.length === 1, F = 0.5 > Math.abs(l.value - R.value);
+      if (T) {
+        if (!e.expandOnContentDrag) {
+          r.value = !1;
+          return;
+        }
+        b.get() === 0 && c && C && (r.value = !0), b.get() === 0 && c && !C && (r.value = !1);
+      } else {
+        if (!e.expandOnContentDrag) {
+          r.value = !1;
+          return;
+        }
+        r.value = !0, F && (C && c && (r.value = !0), !C && c && (r.value = !1), c || (r.value = !1));
       }
-    ), N(
-      {
-        onDragStart: Z,
-        onDrag: J,
-        onDragEnd: A
-      },
-      {
-        domTarget: r,
-        drag: { filterTaps: !0 }
-      }
-    ), N(
-      {
-        onDragStart: ({ direction: [i, d] }) => {
-          L.value = !0, V.value = !0, t.value = p.value, l.value = O.value.y.get(), j();
-          const B = f.value.scrollTop === 0, m = d > 0;
-          T.value.length === 1 ? l.value === 0 && B && (v.value = m) : (e.expandOnContentDrag && t.value !== _.value && (v.value = !0), t.value === _.value && B && (v.value = m));
-        },
-        onDrag: ({ delta: [i, d], direction: [B, m] }) => {
-          if (!e.expandOnContentDrag) {
-            v.value = !1;
-            return;
-          }
-          if (!c.value) return;
-          l.value === 0 && v.value && e.expandOnContentDrag && (t.value -= d), t.value <= P.value && (t.value = P.value, v.value && e.expandOnContentDrag && (l.value += d), l.value = $(l.value, { min: 0, max: P.value }), M({
-            y: e.canSwipeClose ? l.value : G(l.value, -p.value, 0, 0.5)
-          })), t.value > _.value && (t.value = _.value), t.value = Math.min(t.value, h.value);
-          const Y = f.value.scrollTop === 0;
-          T.value.length === 1 ? d < 0 && l.value === 0 && Y && (v.value = !1) : t.value === _.value && (v.value = !1), M({
-            height: t.value
-          }), m > 0 ? n("dragging-down") : m < 0 && n("dragging-up");
-        },
-        onDragEnd: A
-      },
-      {
-        domTarget: S,
-        drag: { filterTaps: !0 }
+    }, Pe = async (t, u) => {
+      if (await q(), !e.expandOnContentDrag) {
+        r.value = !1;
+        return;
       }
-    );
-    const de = Oe(
-      () => {
-        n("maxHeight", h.value), R(() => {
-          t.value = T.value[F.value], X(T.value[F.value]);
-        });
-      },
-      { minQuietPeriodMs: 50 }
-    );
-    return ee(h, () => {
-      de.call();
-    }), ee(k, () => {
-      n("minHeight", k.value), T.value.length === 1 && R(() => {
-        T.value[0] === k.value && X(Math.min(k.value, h.value));
-      });
-    }), ge(() => {
-      n("minHeight", k.value), n("maxHeight", h.value), t.value = e.defaultSnapPoint ?? Number(k.value), M({
-        height: t.value,
-        y: t.value
-      }), R(() => {
-        n("ready");
-      });
-    }), u({ open: re, close: E, snapToPoint: X }), (i, d) => (pe(), me(be, { to: "body" }, [
-      b("div", $e, [
-        ye(Se, { name: "fade" }, {
-          default: we(() => [
-            ke(b("div", {
+      if (!i.value) return;
+      s.value === 0 && r.value && e.expandOnContentDrag && (l.value -= u.delta.y), l.value <= M.value && (l.value = M.value, r.value && e.expandOnContentDrag && (s.value += u.delta.y), s.value = m(s.value, { min: 0, max: M.value }), b.set(
+        e.canSwipeClose ? m(s.value, { min: 0 }) : m(ae(s.value, -w.value, 0, 0.5), {
+          min: 0
+        })
+      )), l.value > R.value && (l.value = R.value), l.value = m(l.value, { max: d.value }), K.value.length === 1 || l.value === R.value && (r.value = !1), P.set(l.value), se(u.delta.y);
+    }, ke = () => {
+      e.blocking || (V.value = !0, z.value = !0);
+    }, we = () => {
+      e.blocking || (V.value = !1, z.value = !1);
+    }, Ce = () => {
+      if (!g.value) return;
+      const t = g.value.scrollTop === 0;
+      r.value = t;
+    }, Te = Fe((t) => re(t), {
+      minQuietPeriodMs: e.duration,
+      reducer: (t, u) => u
+    });
+    return J(h, (t, u) => {
+      if (S.value === !1 || !t || !u) return;
+      const c = t[I.value], C = u[I.value];
+      typeof c != "string" && typeof C != "string" && (l.value = m(c, {
+        max: d.value
+      }), c !== C && (_ = O(P, l.value, {
+        duration: e.duration / 1e3,
+        ease: "easeInOut"
+      })));
+    }), J(d, () => {
+      Te.call(I.value);
+    }), J(G, (t) => {
+      v("instinctHeight", t);
+    }), Me(() => {
+      U.deactivate();
+    }), a({ open: ye, close: j, snapToPoint: re }), (t, u) => (Z(), X(Oe, { to: "body" }, [
+      ee("div", Ve, [
+        $(k(he), null, {
+          default: E(() => [
+            S.value && t.blocking ? (Z(), X(k(A), {
+              key: 0,
               ref_key: "backdrop",
               ref: H,
               "data-vsbs-backdrop": "",
-              onClick: d[0] || (d[0] = (B) => ve())
-            }, null, 512), [
-              [Te, w.value && i.blocking]
-            ])
+              onClick: u[0] || (u[0] = (c) => be()),
+              transition: {
+                ease: "easeInOut",
+                duration: t.duration / 1e3
+              },
+              initial: { opacity: 0 },
+              animate: { opacity: 1 },
+              exit: { opacity: 0 }
+            }, null, 8, ["transition"])) : ce("", !0)
           ]),
           _: 1
         }),
-        b("div", {
-          ref_key: "sheet",
-          ref: c,
-          "data-vsbs-shadow": !i.blocking,
-          "data-vsbs-sheet-show": w.value,
-          "aria-modal": "true",
-          "data-vsbs-sheet": "",
-          tabindex: "-1"
-        }, [
-          b("div", {
-            ref_key: "sheetHeader",
-            ref: s,
-            "data-vsbs-header": "",
-            onTouchmove: U
-          }, [
-            z(i.$slots, "header", {}, void 0, !0)
-          ], 544),
-          b("div", {
-            ref_key: "sheetScroll",
-            ref: f,
-            "data-vsbs-scroll": "",
-            onTouchmove: q
-          }, [
-            b("div", {
-              ref_key: "sheetContentWrapper",
-              ref: S,
-              "data-vsbs-content-wrapper": ""
-            }, [
-              b("div", {
-                ref_key: "sheetContent",
-                ref: C,
-                "data-vsbs-content": ""
-              }, [
-                z(i.$slots, "default", {}, void 0, !0)
-              ], 512)
-            ], 512)
-          ], 544),
-          b("div", {
-            ref_key: "sheetFooter",
-            ref: r,
-            "data-vsbs-footer": "",
-            onTouchmove: U
-          }, [
-            z(i.$slots, "footer", {}, void 0, !0)
-          ], 544)
-        ], 8, We)
+        $(k(he), null, {
+          default: E(() => [
+            S.value ? (Z(), X(k(A), {
+              key: 0,
+              ref_key: "sheet",
+              ref: i,
+              exit: { y: "100%", height: k(w) },
+              initial: { y: "100%" },
+              style: Ie({ y: k(b), height: k(P) }),
+              "data-vsbs-shadow": !t.blocking,
+              "data-vsbs-sheet-show": S.value,
+              "aria-modal": "true",
+              "data-vsbs-sheet": "",
+              tabindex: "-1",
+              onTouchstart: ke,
+              onTouchend: we
+            }, {
+              default: E(() => [
+                $(k(A), {
+                  ref_key: "sheetHeader",
+                  ref: p,
+                  "data-vsbs-header": "",
+                  onPanStart: ve,
+                  onPan: de,
+                  onPanEnd: Y,
+                  onTouchmove: le
+                }, {
+                  default: E(() => [
+                    te(t.$slots, "header", {}, void 0, !0)
+                  ]),
+                  _: 3
+                }, 512),
+                ee("div", {
+                  ref_key: "sheetScroll",
+                  ref: g,
+                  "data-vsbs-scroll": "",
+                  onScrollend: Ce
+                }, [
+                  $(k(A), {
+                    ref_key: "sheetContentWrapper",
+                    ref: x,
+                    "data-vsbs-content-wrapper": "",
+                    onPanStart: Se,
+                    onPan: Pe,
+                    onPanEnd: Y,
+                    onTouchmove: ue
+                  }, {
+                    default: E(() => [
+                      ee("div", {
+                        ref_key: "sheetContent",
+                        ref: D,
+                        "data-vsbs-content": ""
+                      }, [
+                        te(t.$slots, "default", {}, void 0, !0)
+                      ], 512)
+                    ]),
+                    _: 3
+                  }, 512)
+                ], 544),
+                $(k(A), {
+                  ref_key: "sheetFooter",
+                  ref: f,
+                  "data-vsbs-footer": "",
+                  onPanStart: ve,
+                  onPan: de,
+                  onPanEnd: Y,
+                  onTouchmove: le
+                }, {
+                  default: E(() => [
+                    te(t.$slots, "footer", {}, void 0, !0)
+                  ]),
+                  _: 3
+                }, 512)
+              ]),
+              _: 3
+            }, 8, ["exit", "style", "data-vsbs-shadow", "data-vsbs-sheet-show"])) : ce("", !0)
+          ]),
+          _: 3
+        })
       ])
     ]));
   }
-}), Le = (o, u) => {
-  const a = o.__vccOpts || o;
-  for (const [e, n] of u)
-    a[e] = n;
-  return a;
-}, Ne = /* @__PURE__ */ Le(Fe, [["__scopeId", "data-v-42bd48db"]]);
+}), je = (n, a) => {
+  const o = n.__vccOpts || n;
+  for (const [e, v] of a)
+    o[e] = v;
+  return o;
+}, Ke = /* @__PURE__ */ je(ze, [["__scopeId", "data-v-92db83a2"]]);
 export {
-  Ne as default
+  Ke as default
 };

package/dist/style.css

@@ -1 +1 @@
-[data-vsbs-container][data-v-42bd48db]{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-42bd48db]{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-42bd48db]{box-shadow:0 -5px 60px 0 var(--vsbs-shadow-color, rgba(89, 89, 89, .2))}[data-vsbs-sheet][data-v-42bd48db]{background-color:var(--vsbs-background, #fff);border-top-left-radius:var(--vsbs-border-radius, 16px);border-top-right-radius:var(--vsbs-border-radius, 16px);bottom:0;display:flex;flex-direction:column;left:0;margin-left:auto;margin-right:auto;max-height:inherit;max-width:var(--vsbs-max-width, 640px);pointer-events:all;position:fixed;right:0;transition:var(--02470502);visibility:hidden;width:100%;will-change:height;z-index:2}[data-vsbs-sheet-show=true][data-v-42bd48db]{visibility:visible}[data-vsbs-header][data-v-42bd48db]{box-shadow:0 1px 0 var(--vsbs-border-color, rgba(46, 59, 66, .125));flex-shrink:0;padding:20px var(--vsbs-padding-x, 16px) 8px;-webkit-user-select:none;user-select:none;z-index:3}[data-vsbs-header][data-v-42bd48db]: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-42bd48db]:empty{box-shadow:none;padding:12px var(--vsbs-padding-x, 16px) 8px}[data-vsbs-footer][data-v-42bd48db]{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-42bd48db]:empty{display:none}[data-vsbs-scroll][data-v-42bd48db]{flex-grow:1;overflow-y:auto;overscroll-behavior:contain}[data-vsbs-content-wrapper][data-v-42bd48db]{height:100%}[data-vsbs-content][data-v-42bd48db]{display:grid;padding:1vh var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}.fade-enter-active[data-v-42bd48db],.fade-leave-active[data-v-42bd48db]{transition:var(--3c3cbcbe)}.fade-enter-from[data-v-42bd48db],.fade-leave-to[data-v-42bd48db]{opacity:0}
+[data-vsbs-container][data-v-92db83a2]{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-92db83a2]{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-92db83a2]: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-92db83a2]{background-color:var(--vsbs-background, #fff);border-top-left-radius:var(--vsbs-border-radius, 16px);border-top-right-radius:var(--vsbs-border-radius, 16px);bottom:0;display:flex;flex-direction:column;left:0;margin-left:auto;margin-right:auto;max-height:inherit;max-width:var(--vsbs-max-width, 640px);pointer-events:all;position:fixed;right:0;width:100%;will-change:height;z-index:2}[data-vsbs-sheet-show=true][data-v-92db83a2]{visibility:visible}[data-vsbs-header][data-v-92db83a2]{box-shadow:0 1px 0 var(--vsbs-border-color, rgba(46, 59, 66, .125));flex-shrink:0;padding:20px var(--vsbs-padding-x, 16px) 8px;-webkit-user-select:none;user-select:none;z-index:3}[data-vsbs-header][data-v-92db83a2]: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-92db83a2]:empty{box-shadow:none;padding:14px var(--vsbs-padding-x, 16px) 10px}[data-vsbs-footer][data-v-92db83a2]{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-92db83a2]:empty{display:none}[data-vsbs-scroll][data-v-92db83a2]{flex-grow:1;overflow-y:auto;overscroll-behavior:contain}[data-vsbs-content-wrapper][data-v-92db83a2]{height:100%}[data-vsbs-content][data-v-92db83a2]{display:grid;padding:8px var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}

package/dist/types.d.ts

@@ -1,7 +1,7 @@
 export interface BottomSheetProps {
     duration?: number;
-    snapPoints?: number[];
-    defaultSnapPoint?: number;
+    snapPoints?: Array<number | `${number}%`>;
+    initialSnapPoint?: number;
     blocking?: boolean;
     canSwipeClose?: boolean;
     canBackdropClose?: boolean;

package/dist/utils/heightPercentToPixels.d.ts

@@ -0,0 +1 @@
+export declare function heightPercentToPixels(heightStr: string, windowHeight: number): number;

package/dist/utils/rubberbandIfOutOfBounds.d.ts

@@ -0,0 +1 @@
+export declare function rubberbandIfOutOfBounds(position: number, min: number, max: number, constant?: number): number;

package/package.json

@@ -32,7 +32,7 @@
     "url": "https://github.com/megaarmos/vue-spring-bottom-sheet/issues"
   },
   "private": false,
-  "version": "1.2.7",
+  "version": "2.0.0",
   "type": "module",
   "exports": {
     ".": {
@@ -48,40 +48,37 @@
   "types": "dist/index.d.ts",
   "scripts": {
     "build": "vue-tsc -b && vite build",
-    "build:watch": "vite build --watch",
+    "dev": "vite build --watch",
     "type-check": "vue-tsc --build",
     "lint": "eslint . --fix",
     "format": "prettier --write src/",
     "release": "npm run build && npm publish --access public"
   },
   "peerDependencies": {
-    "@vueuse/gesture": "^2.0.0",
-    "@vueuse/motion": "^2.2.6",
     "vue": ">=3.3"
   },
   "dependencies": {
-    "@vueuse/core": "^12.5.0",
-    "@vueuse/gesture": "^2.0.0",
-    "@vueuse/integrations": "^12.5.0",
-    "@vueuse/motion": "^2.2.6",
+    "@vueuse/core": "^13.0.0",
+    "@vueuse/integrations": "^13.0.0",
     "focus-trap": "^7.6.4",
-    "remeda": "^2.20.0",
+    "motion-v": "0.13.1",
+    "remeda": "^2.21.2",
     "vue": "^3.5.13"
   },
   "devDependencies": {
-    "@types/node": "^22.10.10",
+    "@types/node": "^22.13.11",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue/eslint-config-prettier": "^10.2.0",
-    "@vue/eslint-config-typescript": "^14.3.0",
+    "@vue/eslint-config-typescript": "^14.5.0",
     "@vue/tsconfig": "^0.7.0",
     "ajv": "^8.17.1",
-    "eslint": "^9.19.0",
-    "eslint-plugin-vue": "^9.32.0",
-    "prettier": "^3.4.2",
+    "eslint": "^9.23.0",
+    "eslint-plugin-vue": "^10.0.0",
+    "prettier": "^3.5.3",
     "typescript": "~5.6.3",
-    "vite": "^6.0.11",
-    "vite-plugin-dts": "^4.5.0",
-    "vue-tsc": "^2.2.0"
+    "vite": "^6.2.2",
+    "vite-plugin-dts": "4.5.3",
+    "vue-tsc": "^2.2.8"
   },
   "files": [
     "dist",

package/LICENSE.txt

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2024 megaarmos
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/README.md

@@ -1,166 +0,0 @@
-# Vue Spring Bottom Sheet
-
-**vue-spring-bottom-sheet** is built on top of **[@vueuse/gesture]** and **[@vueuse/motion]**.
-
-😎 **Modern** and 🚀 **Performant** Bottom Sheet for Vue.js
-
-[Demo](https://vue-spring-bottom-sheet.douxcode.com/) 👀
-
-| ![](https://vue-spring-bottom-sheet.douxcode.com/example_basic.png) | ![](https://vue-spring-bottom-sheet.douxcode.com/example_snap.png) | ![](https://vue-spring-bottom-sheet.douxcode.com/example_blocking.png) | ![](https://vue-spring-bottom-sheet.douxcode.com/example_sticky.png) |
-| :-----------------------------------------------------------------: | :----------------------------------------------------------------: | :--------------------------------------------------------------------: | :------------------------------------------------------------------: |
-
-# Installation
-
-```
-npm install @douxcode/vue-spring-bottom-sheet
-```
-
-```
-bun install @douxcode/vue-spring-bottom-sheet
-```
-
-# Getting started
-
-## Basic usage
-
-```vue
-<script setup>
-import BottomSheet from '@douxcode/vue-spring-bottom-sheet'
-import '@douxcode/vue-spring-bottom-sheet/dist/style.css'
-import { ref } from 'vue'
-
-const bottomSheet = ref(null)
-
-const open = () => {
-  bottomSheet.value.open()
-}
-
-const close = () => {
-  bottomSheet.value.close()
-}
-</script>
-
-<template>
-  <BottomSheet ref="bottomSheet"> Your awesome content </BottomSheet>
-</template>
-```
-
-## Basic usage `setup` + TS
-
-```vue
-<script setup lang="ts">
-import BottomSheet from '@douxcode/vue-spring-bottom-sheet'
-import '@douxcode/vue-spring-bottom-sheet/dist/style.css'
-import { ref } from 'vue'
-
-const bottomSheet = ref<InstanceType<typeof BottomSheet>>()
-
-const open = () => {
-  bottomSheet.value.open()
-}
-
-const close = () => {
-  bottomSheet.value.close()
-}
-</script>
-
-<template>
-  <BottomSheet ref="bottomSheet"> Your content </BottomSheet>
-</template>
-```
-
-## Usage in Nuxt 3
-
-For Nuxt 3, just wrap component in `<ClientOnly>`
-
-```vue
-<template>
-  <ClientOnly>
-    <BottomSheet ref="bottomSheet"> Your awesome content </BottomSheet>
-  </ClientOnly>
-</template>
-```
-
-## Slots
-
-```vue
-<template>
-  <BottomSheet ref="bottomSheet">
-    <template #header> Header </template>
-    <div>Your content</div>
-    <template #footer> Footer </template>
-  </BottomSheet>
-</template>
-```
-
-## CSS Custom Properties
-
-```css
---vsbs-backdrop-bg: rgba(0, 0, 0, 0.5);
---vsbs-shadow-color: rgba(89, 89, 89, 0.2);
---vsbs-background: #fff;
---vsbs-border-radius: 16px;
---vsbs-max-width: 640px;
---vsbs-border-color: rgba(46, 59, 66, 0.125);
---vsbs-padding-x: 16px;
---vsbs-handle-background: rgba(0, 0, 0, 0.28);
-```
-
-## Props
-
-### Prop Definitions
-
-| Prop                | Type     | Description                                                                                         | Example                          |
-| ------------------- | -------- | --------------------------------------------------------------------------------------------------- | -------------------------------- |
-| duration            | Number   | Defines the duration open and close animations.                                                     | `:duration="250"`                |
-| snapPoints          | Number[] | Defines custom snapping positions for the bottom sheet                                              | `:snapPoints="[300, 600, 900]"`  |
-| defaultSnapPoint    | Number   | Specifies the default snap point. Note that at least one snapPoint must be specified for it to work | `:default-snap-point="600"`      |
-| blocking            | Boolean  | Controls whether the bottom sheet blocks interactions with underlying content                       | `:blocking="true"`               |
-| canSwipeClose       | Boolean  | Enables or disables swipe gestures for closing the sheet                                            | `:can-swipe-close="true"`        |
-| canOverlayClose     | Boolean  | Allows tapping the overlay to close the sheet                                                       | `:can-overlay-close="true"`      |
-| expandOnContentDrag | Boolean  | Enables expanding the sheet by dragging its content                                                 | `:expand-on-content-drag="true"` |
-
-### Default Values
-
-| Prop                | Default                    |
-| ------------------- | -------------------------- |
-| duration            | `250`                      |
-| snapPoints          | `minHeight`                |
-| defaultSnapPoint    | `minHeight / minSnapPoint` |
-| blocking            | `true`                     |
-| canSwipeClose       | `true`                     |
-| canOverlayClose     | `true`                     |
-| expandOnContentDrag | `true`                     |
-
-## Exposed methods
-
-Assuming there is `const bottomSheet = ref()`
-
-| Method      | Description                          | Example                              |
-| ----------- | ------------------------------------ | ------------------------------------ |
-| snapToPoint | Snaps the sheet to a specified point | `bottomSheet.value.snapToPoint(300)` |
-| open        | Opens the bottom sheet               | `bottomSheet.value.open()`           |
-| close       | Closes the bottom sheet              | `bottomSheet.value.close()`          |
-
-## Events
-
-| Event         | Description                                                                                                                                   | Example                     |
-| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |
-| min-height    | Fires when the minimum height of the sheet changes. Passes the value as an argument.                                                          | `@min-height="(n) => {}"`   |
-| max-height    | Fires when the height of the window changes. Passes the value as an argument. Note that this value is throttled to prevent excessive updates. | `@max-height="(n) => {}"`   |
-| dragging-up   | Fires when the bottom sheet is being dragged up                                                                                               | `@dragging-up="() => {}"`   |
-| dragging-down | Fires when the bottom sheet is being dragged down                                                                                             | `@dragging-down="() => {}"` |
-| opened        | Fires when the bottom sheet is opened                                                                                                         | `@opened="() => {}"`        |
-| closed        | Fires when the bottom sheet is closed                                                                                                         | `@closed="() => {}"`        |
-
-## Acknowledgments
-
-This project was inspired by the following:
-
-- [react-spring-bottom-sheet]: Accessible ♿️, Delightful ✨, & Fast 🚀
-- [@webzlodimir/vue-bottom-sheet]: 🔥 A nice clean and touch-friendly bottom sheet component based on Vue.js and Hammer.js for Vue 3
-
-[@vueuse/gesture]: https://gesture.vueuse.org/
-[@vueuse/motion]: https://motion.vueuse.org/
-[react-spring-bottom-sheet]: https://react-spring.bottom-sheet.dev/
-[@webzlodimir/vue-bottom-sheet]: https://github.com/vaban-ru/vue-bottom-sheet