@douxcode/vue-spring-bottom-sheet 2.4.0 → 2.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  import { ref as P, computed as _, defineComponent as Be, watch as q, onMounted as Ie, toRefs as Ee, nextTick as N, onUnmounted as _e, createBlock as te, openBlock as ae, Teleport as De, createElementVNode as ne, createVNode as $, unref as m, withCtx as E, createCommentVNode as ge, normalizeStyle as He, normalizeClass as oe, renderSlot as le } from "vue";
2
2
  import { useMotionValue as me, animate as B, AnimatePresence as be, Motion as A } from "motion-v";
3
- import { useVModel as Ve, useWindowSize as Re, useElementBounding as Q, useScrollLock as ye } from "@vueuse/core";
4
- import { useFocusTrap as Fe } from "@vueuse/integrations/useFocusTrap";
3
+ import { useVModel as Ve, useWindowSize as Fe, useElementBounding as Q, useScrollLock as ye } from "@vueuse/core";
4
+ import { useFocusTrap as Re } from "@vueuse/integrations/useFocusTrap";
5
5
  function G(n, a) {
6
6
  const o = parseFloat(n);
7
7
  return a * o / 100;
@@ -9,7 +9,7 @@ function G(n, a) {
9
9
  function $e(n, a, o) {
10
10
  const t = P(0), s = _(() => n.value.map((p) => typeof p == "string" ? G(p, o.value) : p)), y = _(() => Math.min(...s.value)), r = _(() => Math.max(...s.value)), h = _(() => {
11
11
  const p = s.value.reduce(
12
- (g, x) => Math.abs(x - a.value) < Math.abs(g - a.value) ? x : g
12
+ (g, M) => Math.abs(M - a.value) < Math.abs(g - a.value) ? M : g
13
13
  );
14
14
  return s.value.indexOf(p);
15
15
  });
@@ -31,26 +31,26 @@ function We(n, a, o) {
31
31
  if (t === 1) return Ae(n, a, o);
32
32
  throw new Error("Wrong number of arguments");
33
33
  }
34
- function ze(n, { triggerAt: a = "end", minQuietPeriodMs: o, maxBurstDurationMs: t, minGapMs: s, reducer: y = Le }) {
35
- let r, h, p, g, x = () => {
34
+ function je(n, { triggerAt: a = "end", minQuietPeriodMs: o, maxBurstDurationMs: t, minGapMs: s, reducer: y = ze }) {
35
+ let r, h, p, g, M = () => {
36
36
  let i = p;
37
37
  i !== void 0 && (p = void 0, n(i), s !== void 0 && (h = setTimeout(D, s)));
38
38
  }, D = () => {
39
- clearTimeout(h), h = void 0, r === void 0 && x();
39
+ clearTimeout(h), h = void 0, r === void 0 && M();
40
40
  }, H = () => {
41
- clearTimeout(r), r = void 0, g = void 0, h === void 0 && x();
41
+ clearTimeout(r), r = void 0, g = void 0, h === void 0 && M();
42
42
  };
43
43
  return { call: (...i) => {
44
44
  let c = r === void 0 && h === void 0;
45
45
  if ((a !== "start" || c) && (p = y(p, ...i)), !(r === void 0 && !c)) {
46
46
  if (o !== void 0 || t !== void 0 || s === void 0) {
47
47
  clearTimeout(r);
48
- let k = Date.now();
49
- g ?? (g = k);
50
- let W = t === void 0 ? o ?? 0 : Math.min(o ?? t, t - (k - g));
48
+ let C = Date.now();
49
+ g ?? (g = C);
50
+ let W = t === void 0 ? o ?? 0 : Math.min(o ?? t, t - (C - g));
51
51
  r = setTimeout(H, W);
52
52
  }
53
- a !== "end" && c && x();
53
+ a !== "end" && c && M();
54
54
  }
55
55
  }, cancel: () => {
56
56
  clearTimeout(r), r = void 0, g = void 0, clearTimeout(h), h = void 0, p = void 0;
@@ -60,11 +60,11 @@ function ze(n, { triggerAt: a = "end", minQuietPeriodMs: o, maxBurstDurationMs:
60
60
  return r === void 0 && h === void 0;
61
61
  } };
62
62
  }
63
- var Le = () => "";
63
+ var ze = () => "";
64
64
  function b(...n) {
65
- return We(je, n);
65
+ return We(Le, n);
66
66
  }
67
- var je = (n, { min: a, max: o }) => a !== void 0 && n < a ? a : o !== void 0 && n > o ? o : n;
67
+ var Le = (n, { min: a, max: o }) => a !== void 0 && n < a ? a : o !== void 0 && n > o ? o : n;
68
68
  function qe(n, a, o) {
69
69
  return Math.max(a, Math.min(n, o));
70
70
  }
@@ -104,7 +104,7 @@ const Qe = { "data-vsbs-container": "" }, Ge = /* @__PURE__ */ Be({
104
104
  }), Ie(() => {
105
105
  y.value && X();
106
106
  });
107
- const r = P(), h = P(null), p = P(null), g = P(null), x = P(null), D = P(null), H = P(null), i = P(t.expandOnContentDrag), { height: c } = Re(), { height: k } = Q(r), { height: W } = Q(h), { height: se } = Q(D), { height: re } = Q(p), K = _({
107
+ const r = P(), h = P(null), p = P(null), g = P(null), M = P(null), D = P(null), H = P(null), i = P(t.expandOnContentDrag), { height: c } = Fe(), { height: C } = Q(r), { height: W } = Q(h), { height: se } = Q(D), { height: re } = Q(p), K = _({
108
108
  get() {
109
109
  return b(
110
110
  Math.ceil(se.value + W.value + re.value),
@@ -116,17 +116,20 @@ const Qe = { "data-vsbs-container": "" }, Ge = /* @__PURE__ */ Be({
116
116
  set(e) {
117
117
  [W.value, se.value, re.value] = e;
118
118
  }
119
- }), l = P(0), v = P(0), C = me(0), S = me(0), { snapPoints: Pe } = Ee(t), d = _(() => Pe.value ?? [K.value]), {
119
+ }), l = P(0), v = P(0), k = me(0), S = me(0), { snapPoints: Pe } = Ee(t), d = _(() => Pe.value ?? [K.value]), {
120
120
  flattenedSnapPoints: U,
121
121
  currentSnapPointIndex: I,
122
122
  closestSnapPointIndex: V,
123
123
  minSnapPoint: O,
124
- maxSnapPoint: R
124
+ maxSnapPoint: F
125
125
  } = $e(d, l, c);
126
- let M;
127
- const z = ye(document.body), L = ye(document.documentElement), Y = Fe([r, H], {
126
+ let w;
127
+ const j = ye(document.body), z = ye(document.documentElement), Y = Re([r, H], {
128
128
  immediate: !1,
129
- fallbackFocus: () => r.value || document.body
129
+ fallbackFocus: () => {
130
+ var e;
131
+ return ((e = r.value) == null ? void 0 : e.$el) || document.body;
132
+ }
130
133
  });
131
134
  function ie(e) {
132
135
  i.value = !0, ve(e);
@@ -135,50 +138,53 @@ const Qe = { "data-vsbs-container": "" }, Ge = /* @__PURE__ */ Be({
135
138
  i.value && e.preventDefault();
136
139
  }
137
140
  const de = (e) => {
138
- e.key === "Escape" && j();
141
+ e.key === "Escape" && L();
139
142
  }, Ce = () => {
140
- t.canBackdropClose && j();
143
+ t.canBackdropClose && L();
141
144
  };
142
145
  let J = !1;
143
146
  const X = async () => {
144
147
  if (J) return;
145
- y.value = !0, J = !0, s("opening-started"), t.blocking && (z.value = !0, L.value = !0), await N();
148
+ y.value = !0, J = !0, s("opening-started"), t.blocking && (j.value = !0, z.value = !0), await N();
146
149
  const e = r.value.$el;
147
- k.value = e.getBoundingClientRect().height;
148
- const u = e.querySelector("[data-vsbs-content]"), f = e.querySelector("[data-vsbs-header]"), w = e.querySelector("[data-vsbs-footer]");
150
+ C.value = e.getBoundingClientRect().height;
151
+ const u = e.querySelector("[data-vsbs-content]"), f = e.querySelector("[data-vsbs-header]"), T = e.querySelector("[data-vsbs-footer]");
149
152
  if (K.value = [
150
153
  f.getBoundingClientRect().height,
151
154
  u.getBoundingClientRect().height,
152
- w.getBoundingClientRect().height
155
+ T.getBoundingClientRect().height
153
156
  ], await N(), I.value = U.value.findIndex(
154
- (T) => T === O.value
157
+ (x) => x === O.value
155
158
  ), t.initialSnapPoint) {
156
- const T = t.initialSnapPoint;
157
- if (T < 0 || T >= d.value.length) {
159
+ const x = t.initialSnapPoint;
160
+ if (x < 0 || x >= d.value.length) {
158
161
  console.warn("Index out of bounds");
159
162
  return;
160
163
  }
161
- let F;
162
- typeof d.value[T] == "number" ? F = b(d.value[T], {
164
+ let R;
165
+ typeof d.value[x] == "number" ? R = b(d.value[x], {
163
166
  max: c.value
164
- }) : F = G(d.value[T], c.value), l.value = F;
167
+ }) : R = G(d.value[x], c.value), l.value = R;
165
168
  } else
166
169
  l.value = b(O.value, {
167
170
  max: c.value
168
171
  });
169
- v.value = l.value, C.set(l.value), S.set(l.value), M = B(C, l.value, {
170
- duration: t.duration / 1e3,
171
- ease: "easeInOut"
172
- }), M = B(S, 0, {
173
- duration: t.duration / 1e3,
174
- ease: "easeInOut"
175
- }), window.addEventListener("keydown", de), J = !1, t.blocking && setTimeout(() => {
176
- C.get() < 1 && (s("opened"), Y.activate());
177
- }, t.duration);
172
+ v.value = l.value, k.jump(l.value), S.jump(l.value), requestAnimationFrame(() => {
173
+ w = B(k, l.value, {
174
+ duration: t.duration / 1e3,
175
+ ease: "easeInOut"
176
+ }), w = B(S, 0, {
177
+ duration: t.duration / 1e3,
178
+ ease: "easeInOut",
179
+ onComplete: () => {
180
+ t.blocking && (s("opened"), Y.activate());
181
+ }
182
+ });
183
+ }), window.addEventListener("keydown", de), J = !1;
178
184
  };
179
185
  let Z = !1;
180
- const j = () => {
181
- Z || (y.value = !1, Z = !0, s("closing-started"), t.blocking && (z.value = !1, L.value = !1), window.removeEventListener("keydown", de), t.blocking && Y.deactivate(), setTimeout(() => {
186
+ const L = () => {
187
+ Z || (y.value = !1, Z = !0, s("closing-started"), t.blocking && (j.value = !1, z.value = !1), window.removeEventListener("keydown", de), t.blocking && Y.deactivate(), setTimeout(() => {
182
188
  s("closed"), Z = !1;
183
189
  }, t.duration));
184
190
  }, ce = (e) => {
@@ -191,7 +197,7 @@ const Qe = { "data-vsbs-container": "" }, Ge = /* @__PURE__ */ Be({
191
197
  let u;
192
198
  typeof d.value[e] == "number" ? u = b(d.value[e], {
193
199
  max: c.value
194
- }) : u = G(d.value[e], c.value), l.value = u, M = B(C, l.value, {
200
+ }) : u = G(d.value[e], c.value), l.value = u, w = B(k, l.value, {
195
201
  duration: t.duration / 1e3,
196
202
  ease: "easeInOut",
197
203
  onComplete: () => s("snapped", d.value.indexOf(d.value[e]))
@@ -201,14 +207,14 @@ const Qe = { "data-vsbs-container": "" }, Ge = /* @__PURE__ */ Be({
201
207
  e > 0 ? s("dragging-down") : e < 0 && s("dragging-up");
202
208
  }
203
209
  const pe = () => {
204
- l.value = k.value, v.value = S.get(), C.jump(l.value), S.jump(v.value);
210
+ l.value = C.value, v.value = S.get(), k.jump(l.value), S.jump(v.value);
205
211
  }, he = async (e, u) => {
206
212
  await N(), r.value && (v.value <= 0 && (l.value -= u.delta.y), l.value <= O.value && (l.value = O.value, v.value += u.delta.y, S.set(
207
- t.canSwipeClose ? b(v.value, { min: 0 }) : b(ue(v.value, -k.value, 0, 0.5), {
213
+ t.canSwipeClose ? b(v.value, { min: 0 }) : b(ue(v.value, -C.value, 0, 0.5), {
208
214
  min: 0
209
215
  })
210
- )), C.set(
211
- b(ue(l.value, 0, R.value, 0.25), {
216
+ )), k.set(
217
+ b(ue(l.value, 0, F.value, 0.25), {
212
218
  min: 0,
213
219
  max: c.value
214
220
  })
@@ -216,42 +222,42 @@ const Qe = { "data-vsbs-container": "" }, Ge = /* @__PURE__ */ Be({
216
222
  }, ee = () => {
217
223
  v.value = t.canSwipeClose ? [0, l.value].reduce(
218
224
  (u, f) => Math.abs(f - v.value) < Math.abs(u - v.value) ? f : u
219
- ) : 0, M = B(S, v.value, {
225
+ ) : 0, w = B(S, v.value, {
220
226
  duration: t.duration / 1e3,
221
227
  ease: "easeInOut"
222
- }), v.value === l.value && (v.value = 0, j()), I.value = V.value;
228
+ }), v.value === l.value && (v.value = 0, L()), I.value = V.value;
223
229
  let e;
224
230
  typeof d.value[V.value] == "number" ? e = b(d.value[V.value], {
225
231
  max: c.value
226
232
  }) : e = G(
227
233
  d.value[V.value],
228
234
  c.value
229
- ), l.value = e, M = B(C, l.value, {
235
+ ), l.value = e, w = B(k, l.value, {
230
236
  duration: t.duration / 1e3,
231
237
  ease: "easeInOut",
232
238
  onComplete: () => s(
233
239
  "snapped",
234
240
  d.value.indexOf(d.value[V.value])
235
241
  )
236
- }), M = B(S, 0, {
242
+ }), w = B(S, 0, {
237
243
  duration: t.duration / 1e3,
238
244
  ease: "easeInOut"
239
245
  });
240
246
  }, ke = (e, u) => {
241
- if (l.value = k.value, v.value = S.get(), M.stop(), !g.value) return;
242
- const f = g.value.scrollTop === 0, w = u.delta.y > 0, T = U.value.length === 1, F = 0.5 > Math.abs(l.value - R.value);
243
- if (T) {
247
+ if (l.value = C.value, v.value = S.get(), w && w.stop(), !g.value) return;
248
+ const f = g.value.scrollTop === 0, T = u.delta.y > 0, x = U.value.length === 1, R = 0.5 > Math.abs(l.value - F.value);
249
+ if (x) {
244
250
  if (!t.expandOnContentDrag) {
245
251
  i.value = !1;
246
252
  return;
247
253
  }
248
- S.get() === 0 && f && w && (i.value = !0), S.get() === 0 && f && !w && (i.value = !1);
254
+ S.get() === 0 && f && T && (i.value = !0), S.get() === 0 && f && !T && (i.value = !1);
249
255
  } else {
250
256
  if (!t.expandOnContentDrag) {
251
257
  i.value = !1;
252
258
  return;
253
259
  }
254
- i.value = !0, F && (w && f && (i.value = !0), !w && f && (i.value = !1), f || (i.value = !1));
260
+ i.value = !0, R && (T && f && (i.value = !0), !T && f && (i.value = !1), f || (i.value = !1));
255
261
  }
256
262
  }, we = async (e, u) => {
257
263
  if (await N(), !t.expandOnContentDrag) {
@@ -260,28 +266,28 @@ const Qe = { "data-vsbs-container": "" }, Ge = /* @__PURE__ */ Be({
260
266
  }
261
267
  if (!r.value) return;
262
268
  v.value === 0 && i.value && t.expandOnContentDrag && (l.value -= u.delta.y), l.value <= O.value && (l.value = O.value, i.value && t.expandOnContentDrag && (v.value += u.delta.y), v.value = b(v.value, { min: 0, max: O.value }), S.set(
263
- t.canSwipeClose ? b(v.value, { min: 0 }) : b(ue(v.value, -k.value, 0, 0.5), {
269
+ t.canSwipeClose ? b(v.value, { min: 0 }) : b(ue(v.value, -C.value, 0, 0.5), {
264
270
  min: 0
265
271
  })
266
- )), l.value > R.value && (l.value = R.value), l.value = b(l.value, { max: c.value }), U.value.length === 1 || l.value === R.value && (i.value = !1), C.set(l.value), fe(u.delta.y);
272
+ )), l.value > F.value && (l.value = F.value), l.value = b(l.value, { max: c.value }), U.value.length === 1 || l.value === F.value && (i.value = !1), k.set(l.value), fe(u.delta.y);
267
273
  }, Te = () => {
268
- t.blocking || (z.value = !0, L.value = !0);
274
+ t.blocking || (j.value = !0, z.value = !0);
269
275
  }, xe = () => {
270
- t.blocking || (z.value = !1, L.value = !1);
276
+ t.blocking || (j.value = !1, z.value = !1);
271
277
  }, Me = () => {
272
278
  if (!g.value) return;
273
279
  const e = g.value.scrollTop === 0;
274
280
  i.value = e;
275
- }, Oe = ze((e) => ce(e), {
281
+ }, Oe = je((e) => ce(e), {
276
282
  minQuietPeriodMs: t.duration,
277
283
  reducer: (e, u) => u
278
284
  });
279
285
  return q(d, (e, u) => {
280
286
  if (y.value === !1 || !e || !u) return;
281
- const f = e[I.value], w = u[I.value];
282
- typeof f != "string" && typeof w != "string" && (l.value = b(f, {
287
+ const f = e[I.value], T = u[I.value];
288
+ typeof f != "string" && typeof T != "string" && (l.value = b(f, {
283
289
  max: c.value
284
- }), f !== w && (M = B(C, l.value, {
290
+ }), f !== T && (w = B(k, l.value, {
285
291
  duration: t.duration / 1e3,
286
292
  ease: "easeInOut"
287
293
  })));
@@ -291,7 +297,7 @@ const Qe = { "data-vsbs-container": "" }, Ge = /* @__PURE__ */ Be({
291
297
  s("instinctHeight", e);
292
298
  }), _e(() => {
293
299
  Y.deactivate();
294
- }), a({ open: X, close: j, snapToPoint: ce }), (e, u) => (ae(), te(De, {
300
+ }), a({ open: X, close: L, snapToPoint: ce }), (e, u) => (ae(), te(De, {
295
301
  to: e.teleportTo,
296
302
  defer: e.teleportDefer
297
303
  }, [
@@ -321,9 +327,9 @@ const Qe = { "data-vsbs-container": "" }, Ge = /* @__PURE__ */ Be({
321
327
  key: 0,
322
328
  ref_key: "sheet",
323
329
  ref: r,
324
- exit: { y: "100%", height: m(k) },
325
- initial: { y: "100%" },
326
- style: He({ y: m(S), height: m(C) }),
330
+ exit: { y: "100%", height: m(C) },
331
+ initial: !1,
332
+ style: He({ y: m(S), height: m(k) }),
327
333
  "data-vsbs-shadow": !e.blocking,
328
334
  "data-vsbs-sheet-show": m(y),
329
335
  "aria-modal": "true",
@@ -356,7 +362,7 @@ const Qe = { "data-vsbs-container": "" }, Ge = /* @__PURE__ */ Be({
356
362
  }, [
357
363
  $(m(A), {
358
364
  ref_key: "sheetContentWrapper",
359
- ref: x,
365
+ ref: M,
360
366
  "data-vsbs-content-wrapper": "",
361
367
  onPanStart: ke,
362
368
  onPan: we,
@@ -405,7 +411,7 @@ const Qe = { "data-vsbs-container": "" }, Ge = /* @__PURE__ */ Be({
405
411
  for (const [t, s] of a)
406
412
  o[t] = s;
407
413
  return o;
408
- }, Ze = /* @__PURE__ */ Ke(Ge, [["__scopeId", "data-v-ff3b8e9e"]]);
414
+ }, Ze = /* @__PURE__ */ Ke(Ge, [["__scopeId", "data-v-3c41a73f"]]);
409
415
  export {
410
416
  Ze as default
411
417
  };
package/dist/style.css CHANGED
@@ -1 +1 @@
1
- [data-vsbs-container][data-v-ff3b8e9e]{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-ff3b8e9e]{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-ff3b8e9e]: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-ff3b8e9e]{background-color:var(--vsbs-background, #fff);border-top-left-radius:var(--vsbs-border-radius, 16px);border-top-right-radius:var(--vsbs-border-radius, 16px);border-right:1px solid var(--vsbs-outer-border-color, transparent);border-left:1px solid var(--vsbs-outer-border-color, transparent);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-ff3b8e9e]{visibility:visible}[data-vsbs-header][data-v-ff3b8e9e]{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;border-top-left-radius:var(--vsbs-border-radius, 16px);border-top-right-radius:var(--vsbs-border-radius, 16px);border-top:1px solid var(--vsbs-outer-border-color, transparent)}[data-vsbs-header][data-v-ff3b8e9e]: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-ff3b8e9e]:empty{box-shadow:none;padding:14px var(--vsbs-padding-x, 16px) 10px}[data-vsbs-footer][data-v-ff3b8e9e]{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-ff3b8e9e]:empty{display:none}[data-vsbs-scroll][data-v-ff3b8e9e]{flex-grow:1;overflow-y:auto;overscroll-behavior:none}[data-vsbs-content-wrapper][data-v-ff3b8e9e]{height:100%}[data-vsbs-content][data-v-ff3b8e9e]{display:grid;padding:8px var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}
1
+ [data-vsbs-container][data-v-3c41a73f]{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-3c41a73f]{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-3c41a73f]: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-3c41a73f]{background-color:var(--vsbs-background, #fff);border-top-left-radius:var(--vsbs-border-radius, 16px);border-top-right-radius:var(--vsbs-border-radius, 16px);border-right:1px solid var(--vsbs-outer-border-color, transparent);border-left:1px solid var(--vsbs-outer-border-color, transparent);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-3c41a73f]{visibility:visible}[data-vsbs-header][data-v-3c41a73f]{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;border-top-left-radius:var(--vsbs-border-radius, 16px);border-top-right-radius:var(--vsbs-border-radius, 16px);border-top:1px solid var(--vsbs-outer-border-color, transparent)}[data-vsbs-header][data-v-3c41a73f]: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-3c41a73f]:empty{box-shadow:none;padding:14px var(--vsbs-padding-x, 16px) 10px}[data-vsbs-footer][data-v-3c41a73f]{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-3c41a73f]:empty{display:none}[data-vsbs-scroll][data-v-3c41a73f]{flex-grow:1;overflow-y:auto;overscroll-behavior:none}[data-vsbs-content-wrapper][data-v-3c41a73f]{height:100%}[data-vsbs-content][data-v-3c41a73f]{display:grid;padding:8px var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}
package/package.json CHANGED
@@ -32,7 +32,7 @@
32
32
  "url": "https://github.com/megaarmos/vue-spring-bottom-sheet/issues"
33
33
  },
34
34
  "private": false,
35
- "version": "2.4.0",
35
+ "version": "2.4.2",
36
36
  "type": "module",
37
37
  "exports": {
38
38
  ".": {
@@ -62,7 +62,7 @@
62
62
  "@vueuse/core": "^13.2.0",
63
63
  "@vueuse/integrations": "^13.2.0",
64
64
  "focus-trap": "^7.6.4",
65
- "motion-v": "^1.0.2",
65
+ "motion-v": "^1.5.0",
66
66
  "remeda": "^2.21.6",
67
67
  "vue": "^3.5.14"
68
68
  },