@douxcode/vue-spring-bottom-sheet 1.0.8 → 1.1.1

package/README.md

@@ -4,6 +4,8 @@
 
 😎 **Modern** and 🚀 **Performant** Bottom Sheet for Vue.js
 
+[Demo](https://megaarmos.douxcode.com/vue-spring-bottom-sheet/) 👀
+
 # Installation
 
 ```
@@ -76,7 +78,7 @@ For Nuxt 3, just wrap component in `<ClientOnly>`
 
 ```css
 --vsbs-backdrop-bg: rgba(0, 0, 0, 0.5);
---vsbs-shadow-color: hsla(0, 0%, 35%, 0.2);
+--vsbs-shadow-color: rgba(89, 89, 89, 0.2);
 --vsbs-background: #fff;
 --vsbs-border-radius: 16px;
 --vsbs-max-width: 640px;

package/dist/composables/useSnapPoints.d.ts

@@ -3,5 +3,5 @@ export declare function useSnapPoints(snapPoints: Ref<number[]>, height: Ref<num
     minSnap: import('vue').ComputedRef<number>;
     maxSnap: import('vue').ComputedRef<number>;
     snapPoints: Ref<number[], number[]>;
-    closestSnapPoint: import('vue').ComputedRef<number>;
+    closestSnapPointIndex: import('vue').ComputedRef<number>;
 };

package/dist/index.mjs

@@ -1,23 +1,67 @@
-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 = 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
+import { computed as H, defineComponent as ie, ref as h, toRefs as se, watch as U, nextTick as z, onMounted as re, openBlock as ve, createBlock as de, Teleport as ce, createElementVNode as b, createVNode as fe, Transition as ge, withCtx as he, withDirectives as pe, vShow as me, renderSlot as N } from "vue";
+import { useWindowSize as be, useElementBounding as I, useScrollLock as ye } from "@vueuse/core";
+import { useGesture as R, rubberbandIfOutOfBounds as V } from "@vueuse/gesture";
+import { useMotionProperties as we, useMotionTransitions as Se, useMotionControls as ke } from "@vueuse/motion";
+import { useFocusTrap as Te } from "@vueuse/integrations/useFocusTrap";
+function Ce(n, u, a) {
+  let t = (o) => n(o, ...u);
+  return a === void 0 ? t : Object.assign(t, { lazy: a, lazyArgs: u });
+}
+function De(n, u, a) {
+  let t = n.length - u.length;
+  if (t === 0) return n(...u);
+  if (t === 1) return Ce(n, u, a);
+  throw new Error("Wrong number of arguments");
+}
+function xe(n, { triggerAt: u = "end", minQuietPeriodMs: a, maxBurstDurationMs: t, minGapMs: o, reducer: c = Me }) {
+  let s, r, f, y, T = () => {
+    let v = f;
+    v !== void 0 && (f = void 0, n(v), o !== void 0 && (r = setTimeout(P, o)));
+  }, P = () => {
+    clearTimeout(r), r = void 0, s === void 0 && T();
+  }, w = () => {
+    clearTimeout(s), s = void 0, y = void 0, r === void 0 && T();
+  };
+  return { call: (...v) => {
+    let g = s === void 0 && r === void 0;
+    if ((u !== "start" || g) && (f = c(f, ...v)), !(s === void 0 && !g)) {
+      if (a !== void 0 || t !== void 0 || o === void 0) {
+        clearTimeout(s);
+        let p = Date.now();
+        y ?? (y = p);
+        let W = t === void 0 ? a ?? 0 : Math.min(a ?? t, t - (p - y));
+        s = setTimeout(w, W);
+      }
+      u !== "end" && g && T();
+    }
+  }, cancel: () => {
+    clearTimeout(s), s = void 0, y = void 0, clearTimeout(r), r = void 0, f = void 0;
+  }, flush: () => {
+    w(), P();
+  }, get isIdle() {
+    return s === void 0 && r === void 0;
+  } };
+}
+var Me = () => "";
+function $(...n) {
+  return De(_e, n);
+}
+var _e = (n, { min: u, max: a }) => u !== void 0 && n < u ? u : a !== void 0 && n > a ? a : n;
+function Be(n, u) {
+  const a = H(() => n.value.sort()), t = H(() => a.value[0]), o = H(() => a.value[a.value.length - 1]), c = H(() => {
+    const s = a.value.reduce(
+      (r, f) => Math.abs(f - u.value) < Math.abs(r - u.value) ? f : r
     );
-    return i.value.indexOf(h);
+    return a.value.indexOf(s);
   });
   return {
-    minSnap: n,
+    minSnap: t,
     maxSnap: o,
-    snapPoints: c,
-    closestSnapPoint: s
+    snapPoints: n,
+    closestSnapPointIndex: c
   };
 }
-const ke = { "data-vsbs-container": "" }, we = ["data-vsbs-shadow", "data-vsbs-sheet-show"], Se = /* @__PURE__ */ ae({
+const He = { "data-vsbs-container": "" }, Pe = ["data-vsbs-shadow", "data-vsbs-sheet-show"], Oe = /* @__PURE__ */ ie({
   __name: "BottomSheet",
   props: {
     snapPoints: {},
@@ -28,165 +72,212 @@ const ke = { "data-vsbs-container": "" }, we = ["data-vsbs-shadow", "data-vsbs-s
     expandOnContentDrag: { type: Boolean, default: !0 }
   },
   emits: ["opened", "closed", "ready", "dragging-up", "dragging-down", "minHeight", "maxHeight"],
-  setup(c, { expose: g, emit: i }) {
-    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 = Math.min(n.defaultBreakpoint ?? f.value, b.value), w({
+  setup(n, { expose: u, emit: a }) {
+    const t = n, o = a, c = h(null), s = h(null), r = h(null), f = h(null), y = h(null), T = h(null), P = h(null), w = h(!1), v = h(t.expandOnContentDrag), { height: g } = be(), { height: p } = I(c), { height: W } = I(s), { height: q } = I(r), { height: J } = I(T), { activate: Z, deactivate: Y } = Te([c, P], { immediate: !1 }), S = H(
+      () => Math.ceil(J.value + W.value + q.value)
+    ), { motionProperties: C } = we(c), { push: D, stop: ee, motionValues: x } = Se(), { set: M, stop: X } = ke(
+      C,
+      {},
+      { push: D, motionValues: x, stop: ee }
+    ), e = h(0), l = h(0), { snapPoints: te } = se(t), ae = H(() => te.value ?? [S.value]), {
+      minSnap: _,
+      maxSnap: B,
+      snapPoints: k,
+      closestSnapPointIndex: A
+    } = Be(ae, e), G = ye(document.body), Q = (i) => {
+      i.key === "Escape" && E();
+    }, ne = () => {
+      c.value && (e.value = Math.min(t.defaultBreakpoint ?? _.value, g.value), M({
         height: e.value,
         y: e.value
-      }), 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());
+      }), D("y", 0, C, { type: "tween", easings: "easeInOut", bounce: 0, duration: 300 }), w.value = !0, G.value = !0, window.addEventListener("keydown", Q), t.blocking && setTimeout(() => {
+        x.value.y.get() - 0 < 0.1 && (o("opened"), Z());
       }, 300));
-    }, 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");
+    }, E = () => {
+      c.value && (D("y", p.value, C, { type: "tween", bounce: 0, duration: 300 }), w.value = !1, G.value = !1, t.blocking && Y(), window.removeEventListener("keydown", Q), setTimeout(() => {
+        x.value.y.get() - p.value < 0.1 && o("closed");
       }, 300));
-    }, Z = () => {
-      n.canBackdropClose && x();
+    }, oe = () => {
+      t.canBackdropClose && E();
     };
-    function ee(a) {
-      r.value && a.preventDefault();
+    function le(i) {
+      v.value && i.preventDefault();
     }
-    const V = (a) => {
-      s.value && (e.value = a, k("height", e.value, y, {
+    const F = (i) => {
+      e.value = i, D("height", e.value, C, {
+        type: "tween",
+        easings: "easeInOut",
+        bounce: 0,
+        duration: 300
+      });
+    }, j = ({
+      delta: [i, d],
+      direction: [O, m]
+    }) => {
+      c.value && (l.value <= 0 && (e.value -= d), e.value <= _.value && (e.value = _.value, l.value += d, M({
+        y: t.canSwipeClose ? $(l.value, { min: 0 }) : $(V(l.value, -p.value, 0, 0.5), { min: 0 })
+      })), M({
+        height: $(V(e.value, 0, B.value, 0.25), {
+          min: 0,
+          max: g.value
+        })
+      }), m > 0 ? o("dragging-down") : m < 0 && o("dragging-up"));
+    }, L = () => {
+      c.value && (l.value = t.canSwipeClose ? [0, e.value].reduce(
+        (i, d) => Math.abs(d - l.value) < Math.abs(i - l.value) ? d : i
+      ) : 0, D("y", l.value, C, {
+        type: "tween",
+        easings: "easeInOut",
+        bounce: 0,
+        duration: 300
+      }), l.value === e.value && (l.value = 0, E()), e.value = Math.min(k.value[A.value], g.value), D("height", e.value, C, {
         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 E(
+    R(
       {
-        onDrag: A,
-        onDragEnd: O
+        onDragStart: () => {
+          e.value = p.value, l.value = x.value.y.get(), X();
+        },
+        onDrag: j,
+        onDragEnd: L
       },
       {
-        domTarget: h,
+        domTarget: s,
         drag: { filterTaps: !0 }
       }
-    ), E(
+    ), R(
       {
-        onDrag: A,
-        onDragEnd: O
+        onDragStart: () => {
+          e.value = p.value, l.value = x.value.y.get(), X();
+        },
+        onDrag: j,
+        onDragEnd: L
       },
       {
-        domTarget: v,
+        domTarget: r,
         drag: { filterTaps: !0 }
       }
-    ), E(
+    ), R(
       {
-        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));
+        onDragStart: ({ direction: [i, d] }) => {
+          e.value = p.value, l.value = x.value.y.get(), X();
+          const O = f.value.scrollTop === 0, m = d > 0;
+          k.value.length === 1 ? l.value === 0 && O && (v.value = m) : (t.expandOnContentDrag && e.value !== B.value && (v.value = !0), e.value === B.value && O && (v.value = m));
         },
-        onDrag: ({ delta: a, direction: l }) => {
-          if (!n.expandOnContentDrag) {
-            r.value = !1;
+        onDrag: ({ delta: [i, d], direction: [O, m] }) => {
+          if (!t.expandOnContentDrag) {
+            v.value = !1;
             return;
           }
-          if (!s.value) return;
-          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({
+          if (!c.value) return;
+          l.value === 0 && v.value && t.expandOnContentDrag && (e.value -= d), e.value <= _.value && (e.value = _.value, v.value && t.expandOnContentDrag && (l.value += d), l.value = $(l.value, { min: 0, max: _.value }), M({
+            y: t.canSwipeClose ? l.value : V(l.value, -p.value, 0, 0.5)
+          })), e.value > B.value && (e.value = B.value), e.value = Math.min(e.value, g.value);
+          const K = f.value.scrollTop === 0;
+          k.value.length === 1 ? d < 0 && l.value === 0 && K && (v.value = !1) : e.value === B.value && (v.value = !1), M({
             height: e.value
-          }), l[1] > 0 ? o("dragging-down") : l[1] < 0 && o("dragging-up");
+          }), m > 0 ? o("dragging-down") : m < 0 && o("dragging-up");
         },
-        onDragEnd: O
+        onDragEnd: L
       },
       {
-        domTarget: F,
+        domTarget: y,
         drag: { filterTaps: !0 }
       }
-    ), ne(p, () => {
-      o("minHeight", p.value), D.value.length === 1 && R(() => {
-        D.value[0] === p.value && V(Math.min(p.value, b.value));
+    );
+    const ue = xe(
+      () => {
+        o("maxHeight", g.value), z(() => {
+          e.value = k.value[A.value], F(k.value[A.value]);
+        });
+      },
+      { minQuietPeriodMs: 50 }
+    );
+    return U(g, () => {
+      ue.call();
+    }), U(S, () => {
+      o("minHeight", S.value), k.value.length === 1 && z(() => {
+        k.value[0] === S.value && F(Math.min(S.value, g.value));
       });
-    }), oe(() => {
-      o("minHeight", p.value), o("maxHeight", b.value), e.value = n.defaultBreakpoint ?? Number(p.value), w({
+    }), re(() => {
+      o("minHeight", S.value), o("maxHeight", g.value), e.value = t.defaultBreakpoint ?? Number(S.value), M({
         height: e.value,
         y: e.value
-      }), R(() => {
+      }), z(() => {
         o("ready");
       });
-    }), 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", {
+    }), u({ open: ne, close: E, snapToPoint: F }), (i, d) => (ve(), de(ce, { to: "body" }, [
+      b("div", He, [
+        fe(ge, { name: "fade" }, {
+          default: he(() => [
+            pe(b("div", {
               ref_key: "backdrop",
-              ref: W,
+              ref: P,
               "data-vsbs-backdrop": "",
-              onClick: l[0] || (l[0] = (M) => Z())
+              onClick: d[0] || (d[0] = (O) => oe())
             }, null, 512), [
-              [ce, T.value && a.blocking]
+              [me, w.value && i.blocking]
             ])
           ]),
           _: 1
         }),
-        d("div", {
+        b("div", {
           ref_key: "sheet",
-          ref: s,
-          "data-vsbs-shadow": !a.blocking,
-          "data-vsbs-sheet-show": T.value,
+          ref: c,
+          "data-vsbs-shadow": !i.blocking,
+          "data-vsbs-sheet-show": w.value,
           "aria-modal": "true",
           "data-vsbs-sheet": "",
           tabindex: "-1"
         }, [
-          d("div", {
+          b("div", {
             ref_key: "sheetHeader",
-            ref: h,
+            ref: s,
             "data-vsbs-header": ""
           }, [
-            P(a.$slots, "header", {}, void 0, !0)
+            N(i.$slots, "header", {}, void 0, !0)
           ], 512),
-          d("div", {
+          b("div", {
             ref_key: "sheetScroll",
-            ref: m,
+            ref: f,
             "data-vsbs-scroll": "",
-            onTouchmove: ee
+            onTouchmove: le
           }, [
-            d("div", {
+            b("div", {
               ref_key: "sheetContentWrapper",
-              ref: F,
+              ref: y,
               "data-vsbs-content-wrapper": ""
             }, [
-              d("div", {
+              b("div", {
                 ref_key: "sheetContent",
-                ref: L,
+                ref: T,
                 "data-vsbs-content": ""
               }, [
-                P(a.$slots, "default", {}, void 0, !0)
+                N(i.$slots, "default", {}, void 0, !0)
               ], 512)
             ], 512)
           ], 544),
-          d("div", {
+          b("div", {
             ref_key: "sheetFooter",
-            ref: v,
+            ref: r,
             "data-vsbs-footer": ""
           }, [
-            P(a.$slots, "footer", {}, void 0, !0)
+            N(i.$slots, "footer", {}, void 0, !0)
           ], 512)
-        ], 8, we)
+        ], 8, Pe)
       ])
     ]));
   }
-}), Ce = (c, g) => {
-  const i = c.__vccOpts || c;
-  for (const [n, o] of g)
-    i[n] = o;
-  return i;
-}, He = /* @__PURE__ */ Ce(Se, [["__scopeId", "data-v-f08e630c"]]);
+}), Ee = (n, u) => {
+  const a = n.__vccOpts || n;
+  for (const [t, o] of u)
+    a[t] = o;
+  return a;
+}, Fe = /* @__PURE__ */ Ee(Oe, [["__scopeId", "data-v-84fc7f9f"]]);
 export {
-  He as default
+  Fe as default
 };

package/dist/style.css

@@ -1 +1 @@
-[data-vsbs-backdrop][data-v-f08e630c]{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-f08e630c]{box-shadow:0 -5px 60px 0 var(--vsbs-shadow-color, hsla(0, 0%, 35%, .2))}[data-vsbs-sheet][data-v-f08e630c]{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-f08e630c]{visibility:visible}[data-vsbs-header][data-v-f08e630c]{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:1}[data-vsbs-header][data-v-f08e630c]: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-f08e630c]:empty{box-shadow:none;padding:12px var(--vsbs-padding-x, 16px) 8px}[data-vsbs-footer][data-v-f08e630c]{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-f08e630c]:empty{display:none}[data-vsbs-scroll][data-v-f08e630c]{flex-grow:1;overflow-y:auto;overscroll-behavior:contain}[data-vsbs-content-wrapper][data-v-f08e630c]{height:100%}[data-vsbs-content][data-v-f08e630c]{display:grid;padding:1vh var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}.fade-enter-active[data-v-f08e630c],.fade-leave-active[data-v-f08e630c]{transition:opacity .3s ease}.fade-enter-from[data-v-f08e630c],.fade-leave-to[data-v-f08e630c]{opacity:0}
+[data-vsbs-backdrop][data-v-84fc7f9f]{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-84fc7f9f]{box-shadow:0 -5px 60px 0 var(--vsbs-shadow-color, rgba(89, 89, 89, .2))}[data-vsbs-sheet][data-v-84fc7f9f]{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-84fc7f9f]{visibility:visible}[data-vsbs-header][data-v-84fc7f9f]{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:1}[data-vsbs-header][data-v-84fc7f9f]: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-84fc7f9f]:empty{box-shadow:none;padding:12px var(--vsbs-padding-x, 16px) 8px}[data-vsbs-footer][data-v-84fc7f9f]{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-84fc7f9f]:empty{display:none}[data-vsbs-scroll][data-v-84fc7f9f]{flex-grow:1;overflow-y:auto;overscroll-behavior:contain}[data-vsbs-content-wrapper][data-v-84fc7f9f]{height:100%}[data-vsbs-content][data-v-84fc7f9f]{display:grid;padding:1vh var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}.fade-enter-active[data-v-84fc7f9f],.fade-leave-active[data-v-84fc7f9f]{transition:opacity .3s ease}.fade-enter-from[data-v-84fc7f9f],.fade-leave-to[data-v-84fc7f9f]{opacity:0}

package/package.json

@@ -27,12 +27,12 @@
     "type": "git",
     "url": "https://github.com/megaarmos/vue-spring-bottom-sheet.git"
   },
-  "homepage": "https://github.com/megaarmos/vue-spring-bottom-sheet",
+  "homepage": "https://megaarmos.douxcode.com/vue-spring-bottom-sheet/",
   "bugs": {
     "url": "https://github.com/megaarmos/vue-spring-bottom-sheet/issues"
   },
   "private": false,
-  "version": "1.0.8",
+  "version": "1.1.1",
   "type": "module",
   "exports": {
     ".": {
@@ -49,7 +49,9 @@
   "scripts": {
     "build": "vue-tsc -b && vite build",
     "build:watch": "vite build --watch",
-    "preview": "vite preview",
+    "type-check": "vue-tsc --build",
+    "lint": "eslint . --fix",
+    "format": "prettier --write src/",
     "publish": "npm run build && npm publish --access public"
   },
   "peerDependencies": {
@@ -63,9 +65,15 @@
     "@vueuse/integrations": "^12.0.0",
     "@vueuse/motion": "^2.2.6",
     "focus-trap": "^7",
+    "remeda": "^2.19.0",
     "vue": "^3.5.13"
   },
   "devDependencies": {
+    "ajv": "^8.17.1",
+    "@vue/eslint-config-prettier": "^10.1.0",
+    "@vue/eslint-config-typescript": "^14.2.0",
+    "eslint": "^9.17.0",
+    "eslint-plugin-vue": "^9.32.0",
     "@types/node": "^22.10.2",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue/tsconfig": "^0.7.0",