@douxcode/vue-spring-bottom-sheet 2.1.0 → 2.1.1

package/README.md

@@ -162,6 +162,7 @@ Assuming there is `const bottomSheet = ref()`
 | dragging-up    | Emitted when user drags sheet upward   | -               |
 | dragging-down  | Emitted when user drags sheet downward | -               |
 | instinctHeight | Emitted when content height changes    | height (number) |
+| snapped        | Emitted when sheet finishes snapping   | snapPointIndex (number) |
 
 ## Acknowledgments
 

package/dist/BottomSheet.d.ts

@@ -28,6 +28,7 @@ declare const __VLS_component: import('vue').DefineComponent<BottomSheetProps, {
     ready: () => any;
     "dragging-up": () => any;
     "dragging-down": () => any;
+    snapped: (snapPointIndex?: number | undefined) => any;
     instinctHeight: (instinctHeight: number) => any;
     "update:modelValue": () => any;
 }, string, import('vue').PublicProps, Readonly<BottomSheetProps> & Readonly<{
@@ -36,6 +37,7 @@ declare const __VLS_component: import('vue').DefineComponent<BottomSheetProps, {
     onReady?: (() => any) | undefined;
     "onDragging-up"?: (() => any) | undefined;
     "onDragging-down"?: (() => any) | undefined;
+    onSnapped?: ((snapPointIndex?: number | undefined) => any) | undefined;
     onInstinctHeight?: ((instinctHeight: number) => any) | undefined;
     "onUpdate:modelValue"?: (() => any) | undefined;
 }>, {

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import { ref as P, computed as E, defineComponent as xe, watch as q, onMounted as Me, toRefs as _e, nextTick as N, onUnmounted as Oe, createBlock as Z, openBlock as ee, Teleport as Ie, createElementVNode as te, createVNode as F, unref as m, withCtx as B, createCommentVNode as fe, normalizeStyle as Be, renderSlot as ae } from "vue";
-import { useMotionValue as he, animate as O, AnimatePresence as pe, Motion as $ } from "motion-v";
+import { ref as P, computed as E, defineComponent as xe, watch as q, onMounted as Me, toRefs as _e, nextTick as N, onUnmounted as Oe, createBlock as Z, openBlock as ee, Teleport as Ie, createElementVNode as te, createVNode as $, unref as m, withCtx as B, createCommentVNode as fe, normalizeStyle as Be, renderSlot as ae } from "vue";
+import { useMotionValue as he, animate as O, AnimatePresence as pe, Motion as A } from "motion-v";
 import { useVModel as Ee, useWindowSize as De, useElementBounding as Q, useScrollLock as ge } from "@vueuse/core";
 import { useFocusTrap as He } from "@vueuse/integrations/useFocusTrap";
 function G(n, a) {
@@ -7,11 +7,11 @@ function G(n, a) {
   return a * o / 100;
 }
 function Ve(n, a, o) {
-  const e = P(0), i = E(() => n.value.map((f) => typeof f == "string" ? G(f, o.value) : f)), y = E(() => Math.min(...i.value)), r = E(() => Math.max(...i.value)), p = E(() => {
-    const f = i.value.reduce(
+  const e = P(0), i = E(() => n.value.map((h) => typeof h == "string" ? G(h, o.value) : h)), y = E(() => Math.min(...i.value)), r = E(() => Math.max(...i.value)), p = E(() => {
+    const h = i.value.reduce(
       (g, x) => Math.abs(x - a.value) < Math.abs(g - a.value) ? x : g
     );
-    return i.value.indexOf(f);
+    return i.value.indexOf(h);
   });
   return {
     currentSnapPointIndex: e,
@@ -32,28 +32,28 @@ function Fe(n, a, o) {
   throw new Error("Wrong number of arguments");
 }
 function $e(n, { triggerAt: a = "end", minQuietPeriodMs: o, maxBurstDurationMs: e, minGapMs: i, reducer: y = Ae }) {
-  let r, p, f, g, x = () => {
-    let s = f;
-    s !== void 0 && (f = void 0, n(s), i !== void 0 && (p = setTimeout(D, i)));
+  let r, p, h, g, x = () => {
+    let s = h;
+    s !== void 0 && (h = void 0, n(s), i !== void 0 && (p = setTimeout(D, i)));
   }, D = () => {
     clearTimeout(p), p = void 0, r === void 0 && x();
   }, H = () => {
     clearTimeout(r), r = void 0, g = void 0, p === void 0 && x();
   };
   return { call: (...s) => {
-    let d = r === void 0 && p === void 0;
-    if ((a !== "start" || d) && (f = y(f, ...s)), !(r === void 0 && !d)) {
+    let c = r === void 0 && p === void 0;
+    if ((a !== "start" || c) && (h = y(h, ...s)), !(r === void 0 && !c)) {
       if (o !== void 0 || e !== void 0 || i === void 0) {
         clearTimeout(r);
         let w = Date.now();
         g ?? (g = w);
-        let A = e === void 0 ? o ?? 0 : Math.min(o ?? e, e - (w - g));
-        r = setTimeout(H, A);
+        let W = e === void 0 ? o ?? 0 : Math.min(o ?? e, e - (w - g));
+        r = setTimeout(H, W);
       }
-      a !== "end" && d && x();
+      a !== "end" && c && x();
     }
   }, cancel: () => {
-    clearTimeout(r), r = void 0, g = void 0, clearTimeout(p), p = void 0, f = void 0;
+    clearTimeout(r), r = void 0, g = void 0, clearTimeout(p), p = void 0, h = void 0;
   }, flush: () => {
     H(), D();
   }, get isIdle() {
@@ -89,7 +89,7 @@ const je = { "data-vsbs-container": "" }, qe = /* @__PURE__ */ xe({
     expandOnContentDrag: { type: Boolean, default: !0 },
     modelValue: { type: Boolean }
   },
-  emits: ["opened", "closed", "ready", "dragging-up", "dragging-down", "instinctHeight", "update:modelValue"],
+  emits: ["opened", "closed", "ready", "dragging-up", "dragging-down", "snapped", "instinctHeight", "update:modelValue"],
   setup(n, { expose: a, emit: o }) {
     const e = n, i = o, y = Ee(e, "modelValue", i, {
       passive: !0
@@ -99,25 +99,25 @@ const je = { "data-vsbs-container": "" }, qe = /* @__PURE__ */ xe({
     }), Me(() => {
       y.value && J();
     });
-    const r = P(), p = P(null), f = P(null), g = P(null), x = P(null), D = P(null), H = P(null), s = P(e.expandOnContentDrag), { height: d } = De(), { height: w } = Q(r), { height: A } = Q(p), { height: oe } = Q(D), { height: le } = Q(f), K = E({
+    const r = P(), p = P(null), h = P(null), g = P(null), x = P(null), D = P(null), H = P(null), s = P(e.expandOnContentDrag), { height: c } = De(), { height: w } = Q(r), { height: W } = Q(p), { height: oe } = Q(D), { height: le } = Q(h), K = E({
       get() {
         return b(
-          Math.ceil(oe.value + A.value + le.value),
+          Math.ceil(oe.value + W.value + le.value),
           {
-            max: d.value
+            max: c.value
           }
         );
       },
       set(t) {
-        [A.value, oe.value, le.value] = t;
+        [W.value, oe.value, le.value] = t;
       }
-    }), l = P(0), v = P(0), k = he(0), S = he(0), { snapPoints: be } = _e(e), h = E(() => be.value ?? [K.value]), {
+    }), l = P(0), v = P(0), k = he(0), S = he(0), { snapPoints: be } = _e(e), d = E(() => be.value ?? [K.value]), {
       flattenedSnapPoints: U,
       currentSnapPointIndex: I,
-      closestSnapPointIndex: W,
+      closestSnapPointIndex: V,
       minSnapPoint: _,
-      maxSnapPoint: V
-    } = Ve(h, l, d);
+      maxSnapPoint: R
+    } = Ve(d, l, c);
     let M;
     const L = ge(document.body), z = ge(document.documentElement), Y = He([r, H], {
       immediate: !1,
@@ -137,26 +137,26 @@ const je = { "data-vsbs-container": "" }, qe = /* @__PURE__ */ xe({
       y.value = !0, e.blocking && (L.value = !0, z.value = !0), await N();
       const t = r.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]");
+      const u = t.querySelector("[data-vsbs-content]"), f = t.querySelector("[data-vsbs-header]"), C = t.querySelector("[data-vsbs-footer]");
       if (K.value = [
-        c.getBoundingClientRect().height,
+        f.getBoundingClientRect().height,
         u.getBoundingClientRect().height,
         C.getBoundingClientRect().height
       ], await N(), I.value = U.value.findIndex(
         (T) => T === _.value
       ), e.initialSnapPoint) {
         const T = e.initialSnapPoint;
-        if (T < 0 || T >= h.value.length) {
+        if (T < 0 || T >= d.value.length) {
           console.warn("Index out of bounds");
           return;
         }
-        let R;
-        typeof h.value[T] == "number" ? R = b(h.value[T], {
-          max: d.value
-        }) : R = G(h.value[T], d.value), l.value = R;
+        let F;
+        typeof d.value[T] == "number" ? F = b(d.value[T], {
+          max: c.value
+        }) : F = G(d.value[T], c.value), l.value = F;
       } else
         l.value = b(_.value, {
-          max: d.value
+          max: c.value
         });
       v.value = l.value, k.set(l.value), S.set(l.value), M = O(k, l.value, {
         duration: e.duration / 1e3,
@@ -172,18 +172,19 @@ const je = { "data-vsbs-container": "" }, qe = /* @__PURE__ */ xe({
         i("closed");
       }, e.duration);
     }, se = (t) => {
-      if (!h.value) return;
-      if (t < 0 || t >= h.value.length) {
+      if (!d.value) return;
+      if (t < 0 || t >= d.value.length) {
         console.warn("Index out of bounds");
         return;
       }
       I.value = t;
       let u;
-      typeof h.value[t] == "number" ? u = b(h.value[t], {
-        max: d.value
-      }) : u = G(h.value[t], d.value), l.value = u, M = O(k, l.value, {
+      typeof d.value[t] == "number" ? u = b(d.value[t], {
+        max: c.value
+      }) : u = G(d.value[t], c.value), l.value = u, M = O(k, l.value, {
         duration: e.duration / 1e3,
-        ease: "easeInOut"
+        ease: "easeInOut",
+        onComplete: () => i("snapped", d.value.indexOf(d.value[t]))
       });
     };
     function ve(t) {
@@ -197,46 +198,50 @@ const je = { "data-vsbs-container": "" }, qe = /* @__PURE__ */ xe({
           min: 0
         })
       )), k.set(
-        b(ne(l.value, 0, V.value, 0.25), {
+        b(ne(l.value, 0, R.value, 0.25), {
           min: 0,
-          max: d.value
+          max: c.value
         })
       ), ve(u.delta.y));
     }, X = () => {
       v.value = e.canSwipeClose ? [0, l.value].reduce(
-        (u, c) => Math.abs(c - v.value) < Math.abs(u - v.value) ? c : u
+        (u, f) => Math.abs(f - v.value) < Math.abs(u - v.value) ? f : u
       ) : 0, M = O(S, v.value, {
         duration: e.duration / 1e3,
         ease: "easeInOut"
-      }), v.value === l.value && (v.value = 0, j()), I.value = W.value;
+      }), v.value === l.value && (v.value = 0, j()), I.value = V.value;
       let t;
-      typeof h.value[W.value] == "number" ? t = b(h.value[W.value], {
-        max: d.value
+      typeof d.value[V.value] == "number" ? t = b(d.value[V.value], {
+        max: c.value
       }) : t = G(
-        h.value[W.value],
-        d.value
+        d.value[V.value],
+        c.value
       ), l.value = t, M = O(k, l.value, {
         duration: e.duration / 1e3,
-        ease: "easeInOut"
+        ease: "easeInOut",
+        onComplete: () => i(
+          "snapped",
+          d.value.indexOf(d.value[V.value])
+        )
       }), M = O(S, 0, {
         duration: e.duration / 1e3,
         ease: "easeInOut"
       });
     }, Se = (t, u) => {
       if (l.value = w.value, v.value = S.get(), M.stop(), !g.value) return;
-      const c = g.value.scrollTop === 0, C = u.delta.y > 0, T = U.value.length === 1, R = 0.5 > Math.abs(l.value - V.value);
+      const f = g.value.scrollTop === 0, C = u.delta.y > 0, T = U.value.length === 1, F = 0.5 > Math.abs(l.value - R.value);
       if (T) {
         if (!e.expandOnContentDrag) {
           s.value = !1;
           return;
         }
-        S.get() === 0 && c && C && (s.value = !0), S.get() === 0 && c && !C && (s.value = !1);
+        S.get() === 0 && f && C && (s.value = !0), S.get() === 0 && f && !C && (s.value = !1);
       } else {
         if (!e.expandOnContentDrag) {
           s.value = !1;
           return;
         }
-        s.value = !0, R && (C && c && (s.value = !0), !C && c && (s.value = !1), c || (s.value = !1));
+        s.value = !0, F && (C && f && (s.value = !0), !C && f && (s.value = !1), f || (s.value = !1));
       }
     }, Pe = async (t, u) => {
       if (await N(), !e.expandOnContentDrag) {
@@ -248,7 +253,7 @@ const je = { "data-vsbs-container": "" }, qe = /* @__PURE__ */ xe({
         e.canSwipeClose ? b(v.value, { min: 0 }) : b(ne(v.value, -w.value, 0, 0.5), {
           min: 0
         })
-      )), l.value > V.value && (l.value = V.value), l.value = b(l.value, { max: d.value }), U.value.length === 1 || l.value === V.value && (s.value = !1), k.set(l.value), ve(u.delta.y);
+      )), l.value > R.value && (l.value = R.value), l.value = b(l.value, { max: c.value }), U.value.length === 1 || l.value === R.value && (s.value = !1), k.set(l.value), ve(u.delta.y);
     }, ke = () => {
       e.blocking || (L.value = !0, z.value = !0);
     }, we = () => {
@@ -261,16 +266,16 @@ const je = { "data-vsbs-container": "" }, qe = /* @__PURE__ */ xe({
       minQuietPeriodMs: e.duration,
       reducer: (t, u) => u
     });
-    return q(h, (t, u) => {
+    return q(d, (t, u) => {
       if (y.value === !1 || !t || !u) return;
-      const c = t[I.value], C = u[I.value];
-      typeof c != "string" && typeof C != "string" && (l.value = b(c, {
-        max: d.value
-      }), c !== C && (M = O(k, l.value, {
+      const f = t[I.value], C = u[I.value];
+      typeof f != "string" && typeof C != "string" && (l.value = b(f, {
+        max: c.value
+      }), f !== C && (M = O(k, l.value, {
         duration: e.duration / 1e3,
         ease: "easeInOut"
       })));
-    }), q(d, () => {
+    }), q(c, () => {
       Te.call(I.value);
     }), q(K, (t) => {
       i("instinctHeight", t);
@@ -278,14 +283,14 @@ const je = { "data-vsbs-container": "" }, qe = /* @__PURE__ */ xe({
       Y.deactivate();
     }), a({ open: J, close: j, snapToPoint: se }), (t, u) => (ee(), Z(Ie, { to: "body" }, [
       te("div", je, [
-        F(m(pe), null, {
+        $(m(pe), null, {
           default: B(() => [
-            m(y) && t.blocking ? (ee(), Z(m($), {
+            m(y) && t.blocking ? (ee(), Z(m(A), {
               key: 0,
               ref_key: "backdrop",
               ref: H,
               "data-vsbs-backdrop": "",
-              onClick: u[0] || (u[0] = (c) => ye()),
+              onClick: u[0] || (u[0] = (f) => ye()),
               transition: {
                 ease: "easeInOut",
                 duration: t.duration / 1e3
@@ -297,9 +302,9 @@ const je = { "data-vsbs-container": "" }, qe = /* @__PURE__ */ xe({
           ]),
           _: 1
         }),
-        F(m(pe), null, {
+        $(m(pe), null, {
           default: B(() => [
-            m(y) ? (ee(), Z(m($), {
+            m(y) ? (ee(), Z(m(A), {
               key: 0,
               ref_key: "sheet",
               ref: r,
@@ -315,7 +320,7 @@ const je = { "data-vsbs-container": "" }, qe = /* @__PURE__ */ xe({
               onTouchend: we
             }, {
               default: B(() => [
-                F(m($), {
+                $(m(A), {
                   ref_key: "sheetHeader",
                   ref: p,
                   "data-vsbs-header": "",
@@ -335,7 +340,7 @@ const je = { "data-vsbs-container": "" }, qe = /* @__PURE__ */ xe({
                   "data-vsbs-scroll": "",
                   onScrollend: Ce
                 }, [
-                  F(m($), {
+                  $(m(A), {
                     ref_key: "sheetContentWrapper",
                     ref: x,
                     "data-vsbs-content-wrapper": "",
@@ -356,9 +361,9 @@ const je = { "data-vsbs-container": "" }, qe = /* @__PURE__ */ xe({
                     _: 3
                   }, 512)
                 ], 544),
-                F(m($), {
+                $(m(A), {
                   ref_key: "sheetFooter",
-                  ref: f,
+                  ref: h,
                   "data-vsbs-footer": "",
                   onPanStart: de,
                   onPan: ce,
@@ -384,7 +389,7 @@ const je = { "data-vsbs-container": "" }, qe = /* @__PURE__ */ xe({
   for (const [e, i] of a)
     o[e] = i;
   return o;
-}, Ye = /* @__PURE__ */ Ne(qe, [["__scopeId", "data-v-6364f6e9"]]);
+}, Ye = /* @__PURE__ */ Ne(qe, [["__scopeId", "data-v-20d4973e"]]);
 export {
   Ye as default
 };

package/dist/style.css

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

package/package.json

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