@douxcode/vue-spring-bottom-sheet 1.0.5 → 1.0.7

package/dist/index.mjs

@@ -1,10 +1,10 @@
-import { computed as S, defineComponent as te, ref as u, toRefs as ae, watch as ne, nextTick as R, onMounted as oe, openBlock as le, createBlock as se, Teleport as ue, createElementVNode as d, createVNode as ie, Transition as re, withCtx as ve, withDirectives as de, vShow as ce, renderSlot as O } from "vue";
-import { useWindowSize as he, useElementBounding as x, useScrollLock as pe } from "@vueuse/core";
-import { useGesture as P, rubberbandIfOutOfBounds as E } from "@vueuse/gesture";
+import { computed as C, defineComponent as ae, ref as u, toRefs as te, watch as ne, nextTick as R, onMounted as oe, openBlock as le, createBlock as se, Teleport as ue, createElementVNode as d, createVNode as ie, Transition as re, withCtx as ve, withDirectives as de, vShow as ce, renderSlot as P } from "vue";
+import { useWindowSize as he, useElementBounding as B, useScrollLock as pe } from "@vueuse/core";
+import { useGesture as E, rubberbandIfOutOfBounds as I } from "@vueuse/gesture";
 import { useMotionProperties as fe, useMotionTransitions as ge, useMotionControls as me } from "@vueuse/motion";
 import { useFocusTrap as be } from "@vueuse/integrations/useFocusTrap";
 function ye(c, g) {
-  const i = S(() => c.value.slice().sort((h, v) => h - v)), n = S(() => i.value[0]), l = S(() => i.value[i.value.length - 1]), s = S(() => {
+  const i = C(() => c.value.slice().sort((h, v) => h - v)), n = C(() => i.value[0]), o = C(() => i.value[i.value.length - 1]), s = C(() => {
     const h = i.value.reduce(
       (v, m) => Math.abs(m - g.value) < Math.abs(v - g.value) ? m : v
     );
@@ -12,12 +12,12 @@ function ye(c, g) {
   });
   return {
     minSnap: n,
-    maxSnap: l,
+    maxSnap: o,
     snapPoints: c,
     closestSnapPoint: s
   };
 }
-const ke = { "data-vsbs-container": "" }, we = ["data-vsbs-shadow", "data-vsbs-sheet-show"], Se = /* @__PURE__ */ te({
+const ke = { "data-vsbs-container": "" }, we = ["data-vsbs-shadow", "data-vsbs-sheet-show"], Se = /* @__PURE__ */ ae({
   __name: "BottomSheet",
   props: {
     snapPoints: {},
@@ -29,107 +29,107 @@ const ke = { "data-vsbs-container": "" }, we = ["data-vsbs-shadow", "data-vsbs-s
   },
   emits: ["opened", "closed", "ready", "dragging-up", "dragging-down", "minHeight", "maxHeight"],
   setup(c, { expose: g, emit: i }) {
-    const n = c, l = i, s = u(null), h = u(null), v = u(null), m = u(null), I = u(null), F = u(null), L = u(null), D = u(!1), r = u(n.expandOnContentDrag), { height: W } = he(), { height: T } = x(s), { height: z } = x(h), { height: G } = x(v), { height: K } = x(F), { activate: Y, deactivate: j } = be([s, L]), p = S(() => Math.ceil(K.value + z.value + G.value)), { motionProperties: b } = fe(s), { push: y, stop: q, motionValues: B } = ge(), { set: k } = me(b, {}, { push: y, motionValues: B, stop: q }), e = u(0), a = u(0), { snapPoints: J } = ae(n), Q = S(() => J.value ?? [p.value]), { minSnap: f, maxSnap: w, snapPoints: C, closestSnapPoint: U } = ye(Q, e), $ = pe(document.body), N = (t) => {
-      t.key === "Escape" && _();
+    const n = c, o = i, s = u(null), h = u(null), v = u(null), m = u(null), F = u(null), L = u(null), W = u(null), T = u(!1), r = u(n.expandOnContentDrag), { height: b } = he(), { height: _ } = B(s), { height: z } = B(h), { height: G } = B(v), { height: K } = B(L), { activate: Y, deactivate: j } = be([s, W]), p = C(() => Math.ceil(K.value + z.value + G.value)), { motionProperties: y } = fe(s), { push: k, stop: q, motionValues: H } = ge(), { set: w } = me(y, {}, { push: k, motionValues: H, stop: q }), e = u(0), t = u(0), { snapPoints: J } = te(n), Q = C(() => J.value ?? [p.value]), { minSnap: f, maxSnap: S, snapPoints: D, closestSnapPoint: U } = ye(Q, e), $ = pe(document.body), N = (a) => {
+      a.key === "Escape" && x();
     }, X = () => {
-      s.value && (e.value = n.defaultBreakpoint ?? f.value, k({
+      s.value && (e.value = Math.min(n.defaultBreakpoint ?? f.value, b.value), w({
         height: e.value,
         y: e.value
-      }), y("y", 0, b, { type: "tween", easings: "easeInOut", bounce: 0, duration: 300 }), D.value = !0, $.value = !0, window.addEventListener("keydown", N), n.blocking && setTimeout(() => {
-        B.value.y.get() - 0 < 0.1 && (l("opened"), Y());
+      }), k("y", 0, y, { type: "tween", easings: "easeInOut", bounce: 0, duration: 300 }), T.value = !0, $.value = !0, window.addEventListener("keydown", N), n.blocking && setTimeout(() => {
+        H.value.y.get() - 0 < 0.1 && (o("opened"), Y());
       }, 300));
-    }, _ = () => {
-      s.value && (y("y", T.value, b, { type: "tween", bounce: 0, duration: 300 }), D.value = !1, $.value = !1, n.blocking && j(), window.removeEventListener("keydown", N), setTimeout(() => {
-        B.value.y.get() - T.value < 0.1 && l("closed");
+    }, x = () => {
+      s.value && (k("y", _.value, y, { type: "tween", bounce: 0, duration: 300 }), T.value = !1, $.value = !1, n.blocking && j(), window.removeEventListener("keydown", N), setTimeout(() => {
+        H.value.y.get() - _.value < 0.1 && o("closed");
       }, 300));
     }, Z = () => {
-      n.canBackdropClose && _();
+      n.canBackdropClose && x();
     };
-    function ee(t) {
-      r.value && t.preventDefault();
+    function ee(a) {
+      r.value && a.preventDefault();
     }
-    const V = (t) => {
-      s.value && (e.value = t, y("height", e.value, b, {
+    const V = (a) => {
+      s.value && (e.value = a, k("height", e.value, y, {
         type: "tween",
         easings: "easeInOut",
         bounce: 0,
         duration: 300
       }));
-    }, A = ({ delta: t, direction: o }) => {
-      s.value && (a.value === 0 && (e.value -= t[1]), e.value <= f.value && (e.value = f.value, a.value += t[1], a.value = Math.max(0, Math.min(a.value, f.value)), k({
-        y: n.canSwipeClose ? a.value : E(a.value, -T.value, 0, 0.5)
-      })), k({
-        height: Math.min(Math.max(E(e.value, 0, w.value, 0.25), 0), W.value)
-      }), o[1] > 0 ? l("dragging-down") : o[1] < 0 && l("dragging-up"));
-    }, M = () => {
-      s.value && (a.value = n.canSwipeClose ? [0, e.value].reduce((t, o) => Math.abs(o - a.value) < Math.abs(t - a.value) ? o : t) : 0, y("y", a.value, b, { type: "tween", easings: "easeInOut", bounce: 0, duration: 300 }), a.value === e.value && (a.value = 0, _()), e.value = C.value[U.value], y("height", e.value, b, { type: "tween", easings: "easeInOut", bounce: 0, duration: 300 }));
+    }, A = ({ delta: a, direction: l }) => {
+      s.value && (t.value === 0 && (e.value -= a[1]), e.value <= f.value && (e.value = f.value, t.value += a[1], t.value = Math.max(0, Math.min(t.value, f.value)), w({
+        y: n.canSwipeClose ? t.value : I(t.value, -_.value, 0, 0.5)
+      })), e.value = Math.min(e.value, b.value), w({
+        height: Math.max(I(e.value, 0, S.value, 0.25), 0)
+      }), l[1] > 0 ? o("dragging-down") : l[1] < 0 && o("dragging-up"));
+    }, O = () => {
+      s.value && (t.value = n.canSwipeClose ? [0, e.value].reduce((a, l) => Math.abs(l - t.value) < Math.abs(a - t.value) ? l : a) : 0, k("y", t.value, y, { type: "tween", easings: "easeInOut", bounce: 0, duration: 300 }), t.value === e.value && (t.value = 0, x()), e.value = Math.min(D.value[U.value], b.value), k("height", e.value, y, { type: "tween", easings: "easeInOut", bounce: 0, duration: 300 }));
     };
-    return P(
+    return E(
       {
         onDrag: A,
-        onDragEnd: M
+        onDragEnd: O
       },
       {
         domTarget: h,
         drag: { filterTaps: !0 }
       }
-    ), P(
+    ), E(
       {
         onDrag: A,
-        onDragEnd: M
+        onDragEnd: O
       },
       {
         domTarget: v,
         drag: { filterTaps: !0 }
       }
-    ), P(
+    ), E(
       {
-        onDragStart: ({ direction: t }) => {
-          const o = m.value.scrollTop === 0, H = t[1] > 0;
-          C.value.length === 1 ? a.value === 0 && o && (r.value = H) : (n.expandOnContentDrag && e.value !== w.value && (r.value = !0), e.value === w.value && o && (r.value = H));
+        onDragStart: ({ direction: a }) => {
+          const l = m.value.scrollTop === 0, M = a[1] > 0;
+          D.value.length === 1 ? t.value === 0 && l && (r.value = M) : (n.expandOnContentDrag && e.value !== S.value && (r.value = !0), e.value === S.value && l && (r.value = M));
         },
-        onDrag: ({ delta: t }) => {
+        onDrag: ({ delta: a, direction: l }) => {
           if (!n.expandOnContentDrag) {
             r.value = !1;
             return;
           }
           if (!s.value) return;
-          a.value === 0 && r.value && n.expandOnContentDrag && (e.value -= t[1]), e.value <= f.value && (e.value = f.value, r.value && n.expandOnContentDrag && (a.value += t[1]), a.value = Math.max(0, Math.min(a.value, f.value)), k({
-            y: n.canSwipeClose ? a.value : E(a.value, -T.value, 0, 0.5)
-          })), e.value > w.value && (e.value = w.value);
-          const o = m.value.scrollTop === 0;
-          C.value.length === 1 ? t[1] < 0 && a.value === 0 && o && (r.value = !1) : e.value === w.value && (r.value = !1), k({
+          t.value === 0 && r.value && n.expandOnContentDrag && (e.value -= a[1]), e.value <= f.value && (e.value = f.value, r.value && n.expandOnContentDrag && (t.value += a[1]), t.value = Math.max(0, Math.min(t.value, f.value)), w({
+            y: n.canSwipeClose ? t.value : I(t.value, -_.value, 0, 0.5)
+          })), e.value > S.value && (e.value = S.value), e.value = Math.min(e.value, b.value);
+          const M = m.value.scrollTop === 0;
+          D.value.length === 1 ? a[1] < 0 && t.value === 0 && M && (r.value = !1) : e.value === S.value && (r.value = !1), w({
             height: e.value
-          });
+          }), l[1] > 0 ? o("dragging-down") : l[1] < 0 && o("dragging-up");
         },
-        onDragEnd: M
+        onDragEnd: O
       },
       {
-        domTarget: I,
+        domTarget: F,
         drag: { filterTaps: !0 }
       }
     ), ne(p, () => {
-      l("minHeight", p.value), C.value.length === 1 && R(() => {
-        C.value[0] === p.value && V(p.value);
+      o("minHeight", p.value), D.value.length === 1 && R(() => {
+        D.value[0] === p.value && V(Math.min(p.value, b.value));
       });
     }), oe(() => {
-      l("minHeight", p.value), l("maxHeight", W.value), e.value = n.defaultBreakpoint ?? Number(p.value), k({
+      o("minHeight", p.value), o("maxHeight", b.value), e.value = n.defaultBreakpoint ?? Number(p.value), w({
         height: e.value,
         y: e.value
       }), R(() => {
-        l("ready");
+        o("ready");
       });
-    }), g({ open: X, close: _, snapToPoint: V }), (t, o) => (le(), se(ue, { to: "body" }, [
+    }), g({ open: X, close: x, snapToPoint: V }), (a, l) => (le(), se(ue, { to: "body" }, [
       d("div", ke, [
         ie(re, { name: "fade" }, {
           default: ve(() => [
             de(d("div", {
               ref_key: "backdrop",
-              ref: L,
+              ref: W,
               "data-vsbs-backdrop": "",
-              onClick: o[0] || (o[0] = (H) => Z())
+              onClick: l[0] || (l[0] = (M) => Z())
             }, null, 512), [
-              [ce, D.value && t.blocking]
+              [ce, T.value && a.blocking]
             ])
           ]),
           _: 1
@@ -137,8 +137,8 @@ const ke = { "data-vsbs-container": "" }, we = ["data-vsbs-shadow", "data-vsbs-s
         d("div", {
           ref_key: "sheet",
           ref: s,
-          "data-vsbs-shadow": !t.blocking,
-          "data-vsbs-sheet-show": D.value,
+          "data-vsbs-shadow": !a.blocking,
+          "data-vsbs-sheet-show": T.value,
           "aria-modal": "true",
           "data-vsbs-sheet": "",
           tabindex: "-1"
@@ -148,7 +148,7 @@ const ke = { "data-vsbs-container": "" }, we = ["data-vsbs-shadow", "data-vsbs-s
             ref: h,
             "data-vsbs-header": ""
           }, [
-            O(t.$slots, "header", {}, void 0, !0)
+            P(a.$slots, "header", {}, void 0, !0)
           ], 512),
           d("div", {
             ref_key: "sheetScroll",
@@ -158,15 +158,15 @@ const ke = { "data-vsbs-container": "" }, we = ["data-vsbs-shadow", "data-vsbs-s
           }, [
             d("div", {
               ref_key: "sheetContentWrapper",
-              ref: I,
+              ref: F,
               "data-vsbs-content-wrapper": ""
             }, [
               d("div", {
                 ref_key: "sheetContent",
-                ref: F,
+                ref: L,
                 "data-vsbs-content": ""
               }, [
-                O(t.$slots, "default", {}, void 0, !0)
+                P(a.$slots, "default", {}, void 0, !0)
               ], 512)
             ], 512)
           ], 544),
@@ -175,7 +175,7 @@ const ke = { "data-vsbs-container": "" }, we = ["data-vsbs-shadow", "data-vsbs-s
             ref: v,
             "data-vsbs-footer": ""
           }, [
-            O(t.$slots, "footer", {}, void 0, !0)
+            P(a.$slots, "footer", {}, void 0, !0)
           ], 512)
         ], 8, we)
       ])
@@ -183,10 +183,10 @@ const ke = { "data-vsbs-container": "" }, we = ["data-vsbs-shadow", "data-vsbs-s
   }
 }), Ce = (c, g) => {
   const i = c.__vccOpts || c;
-  for (const [n, l] of g)
-    i[n] = l;
+  for (const [n, o] of g)
+    i[n] = o;
   return i;
-}, He = /* @__PURE__ */ Ce(Se, [["__scopeId", "data-v-853fc310"]]);
+}, He = /* @__PURE__ */ Ce(Se, [["__scopeId", "data-v-31145f24"]]);
 export {
   He as default
 };

package/dist/style.css

@@ -1 +1 @@
-[data-vsbs-backdrop][data-v-853fc310]{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:100}[data-vsbs-shadow=true][data-v-853fc310]{box-shadow:0 -5px 60px #26597333,0 -1px #2659730f}[data-vsbs-sheet][data-v-853fc310]{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:visibility .3s ease-in-out;visibility:hidden;width:100%;will-change:height;z-index:100}[data-vsbs-sheet-show=true][data-v-853fc310]{visibility:visible}[data-vsbs-header][data-v-853fc310]{box-shadow:0 1px #2e3b4220;flex-shrink:0;padding:20px 16px 8px;-webkit-user-select:none;user-select:none;z-index:1}[data-vsbs-header][data-v-853fc310]: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-853fc310]:empty{box-shadow:none;padding:12px 16px 8px}[data-vsbs-footer][data-v-853fc310]{box-shadow:0 -1px #2e3b4220;flex-grow:0;flex-shrink:0;padding:16px;-webkit-user-select:none;user-select:none}[data-vsbs-footer][data-v-853fc310]:empty{display:none}[data-vsbs-scroll][data-v-853fc310]{flex-grow:1;overflow-y:auto;overscroll-behavior:contain}[data-vsbs-content-wrapper][data-v-853fc310]{height:100%}[data-vsbs-content][data-v-853fc310]{display:grid;padding:1vh 3vh 3vh;-webkit-user-select:none;user-select:none}.fade-enter-active[data-v-853fc310],.fade-leave-active[data-v-853fc310]{transition:opacity .3s ease}.fade-enter-from[data-v-853fc310],.fade-leave-to[data-v-853fc310]{opacity:0}
+[data-vsbs-backdrop][data-v-31145f24]{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:100}[data-vsbs-shadow=true][data-v-31145f24]{box-shadow:0 -5px 60px #26597333,0 -1px #2659730f}[data-vsbs-sheet][data-v-31145f24]{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:visibility .3s ease-in-out;visibility:hidden;width:100%;will-change:height;z-index:100}[data-vsbs-sheet-show=true][data-v-31145f24]{visibility:visible}[data-vsbs-header][data-v-31145f24]{box-shadow:0 1px #2e3b4220;flex-shrink:0;padding:20px 16px 8px;-webkit-user-select:none;user-select:none;z-index:1}[data-vsbs-header][data-v-31145f24]: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-31145f24]:empty{box-shadow:none;padding:12px 16px 8px}[data-vsbs-footer][data-v-31145f24]{box-shadow:0 -1px #2e3b4220;flex-grow:0;flex-shrink:0;padding:16px;-webkit-user-select:none;user-select:none}[data-vsbs-footer][data-v-31145f24]:empty{display:none}[data-vsbs-scroll][data-v-31145f24]{flex-grow:1;overflow-y:auto;overscroll-behavior:contain}[data-vsbs-content-wrapper][data-v-31145f24]{height:100%}[data-vsbs-content][data-v-31145f24]{display:grid;padding:1vh 3vh 3vh;-webkit-user-select:none;user-select:none}.fade-enter-active[data-v-31145f24],.fade-leave-active[data-v-31145f24]{transition:opacity .3s ease}.fade-enter-from[data-v-31145f24],.fade-leave-to[data-v-31145f24]{opacity:0}

package/package.json

@@ -32,7 +32,7 @@
     "url": "https://github.com/megaarmos/vue-spring-bottom-sheet/issues"
   },
   "private": false,
-  "version": "1.0.5",
+  "version": "1.0.7",
   "type": "module",
   "exports": {
     ".": {
@@ -49,7 +49,8 @@
   "scripts": {
     "build": "vue-tsc -b && vite build",
     "build:watch": "vite build --watch",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "publish": "npm run build && npm publish --access public"
   },
   "peerDependencies": {
     "vue": ">=3.3",