@douxcode/vue-spring-bottom-sheet 1.2.5 → 1.2.6

package/dist/index.mjs

@@ -1,6 +1,6 @@
-import { computed as y, defineComponent as ce, useCssVars as fe, ref as g, toRefs as he, watch as ee, nextTick as X, 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 A } from "vue";
+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 R, rubberbandIfOutOfBounds as z } from "@vueuse/gesture";
+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) {
@@ -13,7 +13,7 @@ function He(o, u, a) {
   if (e === 1) return _e(o, u, a);
   throw new Error("Wrong number of arguments");
 }
-function Oe(o, { triggerAt: u = "end", minQuietPeriodMs: a, maxBurstDurationMs: e, minGapMs: n, reducer: d = Be }) {
+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)));
@@ -24,7 +24,7 @@ function Oe(o, { triggerAt: u = "end", minQuietPeriodMs: a, maxBurstDurationMs:
   };
   return { call: (...v) => {
     let h = s === void 0 && r === void 0;
-    if ((u !== "start" || h) && (f = d(f, ...v)), !(s === void 0 && !h)) {
+    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();
@@ -48,7 +48,7 @@ function $(...o) {
 }
 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()), e = y(() => a.value[0]), n = y(() => a.value[a.value.length - 1]), d = y(() => {
+  const a = y(() => o.value.sort()), 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
     );
@@ -58,7 +58,7 @@ function Ie(o, u) {
     minSnap: e,
     maxSnap: n,
     snapPoints: o,
-    closestSnapPointIndex: d
+    closestSnapPointIndex: c
   };
 }
 const $e = { "data-vsbs-container": "" }, We = ["data-vsbs-shadow", "data-vsbs-sheet-show"], Fe = /* @__PURE__ */ ce({
@@ -75,15 +75,15 @@ const $e = { "data-vsbs-container": "" }, We = ["data-vsbs-shadow", "data-vsbs-s
   emits: ["opened", "closed", "ready", "dragging-up", "dragging-down", "minHeight", "maxHeight"],
   setup(o, { expose: u, emit: a }) {
     fe((i) => ({
-      56909704: ne.value,
-      "3f5ccd4e": ue.value
+      "14f7879e": ne.value,
+      "5872cb4c": ue.value
     }));
-    const e = o, n = a, d = 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(d), { height: W } = I(s), { height: ae } = I(r), { height: oe } = I(C), N = Pe([d, H], {
+    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], {
       immediate: !1,
-      fallbackFocus: () => d.value || document.body
+      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(d), { push: x, stop: le, motionValues: O } = xe(), { set: M, stop: G } = Me(
+    ), 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 }
@@ -92,10 +92,10 @@ const $e = { "data-vsbs-container": "" }, We = ["data-vsbs-shadow", "data-vsbs-s
       maxSnap: _,
       snapPoints: T,
       closestSnapPointIndex: F
-    } = Ie(se, t), Q = te(document.body), j = te(document.documentElement), K = (i) => {
+    } = Ie(se, t), L = te(document.body), V = te(document.documentElement), K = (i) => {
       i.key === "Escape" && E();
     }, re = () => {
-      d.value && (t.value = Math.min(e.defaultSnapPoint ?? P.value, h.value), M({
+      c.value && (t.value = Math.min(e.defaultSnapPoint ?? P.value, h.value), M({
         height: t.value,
         y: t.value
       }), x("y", 0, D, {
@@ -103,15 +103,15 @@ const $e = { "data-vsbs-container": "" }, We = ["data-vsbs-shadow", "data-vsbs-s
         easings: "easeInOut",
         bounce: 0,
         duration: e.duration
-      }), w.value = !0, Q.value = !0, j.value = !0, window.addEventListener("keydown", K), e.blocking && setTimeout(() => {
-        O.value.y.get() - 0 < 0.1 && (n("opened"), N.activate());
+      }), w.value = !0, window.addEventListener("keydown", K), e.blocking && setTimeout(() => {
+        O.value.y.get() - 0 < 0.1 && (n("opened"), Q.activate());
       }, e.duration));
     }, E = () => {
-      d.value && (x("y", p.value, D, {
+      c.value && (x("y", p.value, D, {
         type: "tween",
         bounce: 0,
         duration: e.duration
-      }), w.value = !1, Q.value = !1, j.value = !1, e.blocking && N.deactivate(), window.removeEventListener("keydown", K), setTimeout(() => {
+      }), 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 = () => {
@@ -123,7 +123,7 @@ const $e = { "data-vsbs-container": "" }, We = ["data-vsbs-shadow", "data-vsbs-s
     function q(i) {
       v.value && i.preventDefault();
     }
-    const L = (i) => {
+    const X = (i) => {
       t.value = i, x("height", t.value, D, {
         type: "tween",
         easings: "easeInOut",
@@ -131,20 +131,20 @@ const $e = { "data-vsbs-container": "" }, We = ["data-vsbs-shadow", "data-vsbs-s
         duration: e.duration
       });
     }, J = ({
-      delta: [i, c],
+      delta: [i, d],
       direction: [B, m]
     }) => {
-      d.value && (l.value <= 0 && (t.value -= c), t.value <= P.value && (t.value = P.value, l.value += c, M({
-        y: e.canSwipeClose ? $(l.value, { min: 0 }) : $(z(l.value, -p.value, 0, 0.5), { min: 0 })
+      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: $(z(t.value, 0, _.value, 0.25), {
+        height: $(G(t.value, 0, _.value, 0.25), {
           min: 0,
           max: h.value
         })
       }), m > 0 ? n("dragging-down") : m < 0 && n("dragging-up"));
-    }, V = () => {
-      d.value && (l.value = e.canSwipeClose ? [0, t.value].reduce(
-        (i, c) => Math.abs(c - l.value) < Math.abs(i - l.value) ? c : i
+    }, 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",
@@ -155,52 +155,52 @@ const $e = { "data-vsbs-container": "" }, We = ["data-vsbs-shadow", "data-vsbs-s
         easings: "easeInOut",
         bounce: 0,
         duration: e.duration
-      }));
+      });
     }, Z = () => {
-      t.value = p.value, l.value = O.value.y.get(), G();
+      L.value = !0, V.value = !0, t.value = p.value, l.value = O.value.y.get(), j();
     };
-    R(
+    N(
       {
         onDragStart: Z,
         onDrag: J,
-        onDragEnd: V
+        onDragEnd: A
       },
       {
         domTarget: s,
         drag: { filterTaps: !0 }
       }
-    ), R(
+    ), N(
       {
         onDragStart: Z,
         onDrag: J,
-        onDragEnd: V
+        onDragEnd: A
       },
       {
         domTarget: r,
         drag: { filterTaps: !0 }
       }
-    ), R(
+    ), N(
       {
-        onDragStart: ({ direction: [i, c] }) => {
-          t.value = p.value, l.value = O.value.y.get(), G();
-          const B = f.value.scrollTop === 0, m = c > 0;
+        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, c], direction: [B, m] }) => {
+        onDrag: ({ delta: [i, d], direction: [B, m] }) => {
           if (!e.expandOnContentDrag) {
             v.value = !1;
             return;
           }
-          if (!d.value) return;
-          l.value === 0 && v.value && e.expandOnContentDrag && (t.value -= c), t.value <= P.value && (t.value = P.value, v.value && e.expandOnContentDrag && (l.value += c), l.value = $(l.value, { min: 0, max: P.value }), M({
-            y: e.canSwipeClose ? l.value : z(l.value, -p.value, 0, 0.5)
+          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 ? c < 0 && l.value === 0 && Y && (v.value = !1) : t.value === _.value && (v.value = !1), M({
+          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: V
+        onDragEnd: A
       },
       {
         domTarget: S,
@@ -209,8 +209,8 @@ const $e = { "data-vsbs-container": "" }, We = ["data-vsbs-shadow", "data-vsbs-s
     );
     const de = Oe(
       () => {
-        n("maxHeight", h.value), X(() => {
-          t.value = T.value[F.value], L(T.value[F.value]);
+        n("maxHeight", h.value), R(() => {
+          t.value = T.value[F.value], X(T.value[F.value]);
         });
       },
       { minQuietPeriodMs: 50 }
@@ -218,17 +218,17 @@ const $e = { "data-vsbs-container": "" }, We = ["data-vsbs-shadow", "data-vsbs-s
     return ee(h, () => {
       de.call();
     }), ee(k, () => {
-      n("minHeight", k.value), T.value.length === 1 && X(() => {
-        T.value[0] === k.value && L(Math.min(k.value, h.value));
+      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
-      }), X(() => {
+      }), R(() => {
         n("ready");
       });
-    }), u({ open: re, close: E, snapToPoint: L }), (i, c) => (pe(), me(be, { to: "body" }, [
+    }), u({ open: re, close: E, snapToPoint: X }), (i, d) => (pe(), me(be, { to: "body" }, [
       b("div", $e, [
         ye(Se, { name: "fade" }, {
           default: we(() => [
@@ -236,7 +236,7 @@ const $e = { "data-vsbs-container": "" }, We = ["data-vsbs-shadow", "data-vsbs-s
               ref_key: "backdrop",
               ref: H,
               "data-vsbs-backdrop": "",
-              onClick: c[0] || (c[0] = (B) => ve())
+              onClick: d[0] || (d[0] = (B) => ve())
             }, null, 512), [
               [Te, w.value && i.blocking]
             ])
@@ -245,7 +245,7 @@ const $e = { "data-vsbs-container": "" }, We = ["data-vsbs-shadow", "data-vsbs-s
         }),
         b("div", {
           ref_key: "sheet",
-          ref: d,
+          ref: c,
           "data-vsbs-shadow": !i.blocking,
           "data-vsbs-sheet-show": w.value,
           "aria-modal": "true",
@@ -258,7 +258,7 @@ const $e = { "data-vsbs-container": "" }, We = ["data-vsbs-shadow", "data-vsbs-s
             "data-vsbs-header": "",
             onTouchmove: U
           }, [
-            A(i.$slots, "header", {}, void 0, !0)
+            z(i.$slots, "header", {}, void 0, !0)
           ], 544),
           b("div", {
             ref_key: "sheetScroll",
@@ -276,7 +276,7 @@ const $e = { "data-vsbs-container": "" }, We = ["data-vsbs-shadow", "data-vsbs-s
                 ref: C,
                 "data-vsbs-content": ""
               }, [
-                A(i.$slots, "default", {}, void 0, !0)
+                z(i.$slots, "default", {}, void 0, !0)
               ], 512)
             ], 512)
           ], 544),
@@ -286,7 +286,7 @@ const $e = { "data-vsbs-container": "" }, We = ["data-vsbs-shadow", "data-vsbs-s
             "data-vsbs-footer": "",
             onTouchmove: U
           }, [
-            A(i.$slots, "footer", {}, void 0, !0)
+            z(i.$slots, "footer", {}, void 0, !0)
           ], 544)
         ], 8, We)
       ])
@@ -297,7 +297,7 @@ const $e = { "data-vsbs-container": "" }, We = ["data-vsbs-shadow", "data-vsbs-s
   for (const [e, n] of u)
     a[e] = n;
   return a;
-}, Ne = /* @__PURE__ */ Le(Fe, [["__scopeId", "data-v-524792f4"]]);
+}, Ne = /* @__PURE__ */ Le(Fe, [["__scopeId", "data-v-7f53bf25"]]);
 export {
   Ne as default
 };

package/dist/style.css

@@ -1 +1 @@
-[data-vsbs-container][data-v-524792f4]{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-524792f4]{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-524792f4]{box-shadow:0 -5px 60px 0 var(--vsbs-shadow-color, rgba(89, 89, 89, .2))}[data-vsbs-sheet][data-v-524792f4]{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(--56909704);visibility:hidden;width:100%;will-change:height;z-index:2}[data-vsbs-sheet-show=true][data-v-524792f4]{visibility:visible}[data-vsbs-header][data-v-524792f4]{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-524792f4]: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-524792f4]:empty{box-shadow:none;padding:12px var(--vsbs-padding-x, 16px) 8px}[data-vsbs-footer][data-v-524792f4]{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-524792f4]:empty{display:none}[data-vsbs-scroll][data-v-524792f4]{flex-grow:1;overflow-y:auto;overscroll-behavior:contain}[data-vsbs-content-wrapper][data-v-524792f4]{height:100%}[data-vsbs-content][data-v-524792f4]{display:grid;padding:1vh var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}.fade-enter-active[data-v-524792f4],.fade-leave-active[data-v-524792f4]{transition:var(--3f5ccd4e)}.fade-enter-from[data-v-524792f4],.fade-leave-to[data-v-524792f4]{opacity:0}
+[data-vsbs-container][data-v-7f53bf25]{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-7f53bf25]{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-7f53bf25]{box-shadow:0 -5px 60px 0 var(--vsbs-shadow-color, rgba(89, 89, 89, .2))}[data-vsbs-sheet][data-v-7f53bf25]{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(--14f7879e);visibility:hidden;width:100%;will-change:height;z-index:2}[data-vsbs-sheet-show=true][data-v-7f53bf25]{visibility:visible}[data-vsbs-header][data-v-7f53bf25]{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-7f53bf25]: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-7f53bf25]:empty{box-shadow:none;padding:12px var(--vsbs-padding-x, 16px) 8px}[data-vsbs-footer][data-v-7f53bf25]{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-7f53bf25]:empty{display:none}[data-vsbs-scroll][data-v-7f53bf25]{flex-grow:1;overflow-y:auto;overscroll-behavior:contain}[data-vsbs-content-wrapper][data-v-7f53bf25]{height:100%}[data-vsbs-content][data-v-7f53bf25]{display:grid;padding:1vh var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}.fade-enter-active[data-v-7f53bf25],.fade-leave-active[data-v-7f53bf25]{transition:var(--5872cb4c)}.fade-enter-from[data-v-7f53bf25],.fade-leave-to[data-v-7f53bf25]{opacity:0}

package/package.json

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