@douxcode/vue-spring-bottom-sheet 3.0.0-next.3 → 3.0.0-next.5

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/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # Vue Spring Bottom Sheet
2
2
 
3
- **vue-spring-bottom-sheet** is built on top of **[motion-v]**.
3
+ **vue-spring-bottom-sheet** is a Vue.js bottom sheet component.
4
4
 
5
5
  😎 **Modern** and 🚀 **Performant** Bottom Sheet for Vue.js
6
6
 
@@ -178,6 +178,5 @@ This project was inspired by the following:
178
178
  - [react-spring-bottom-sheet]: Accessible ♿️, Delightful ✨, & Fast 🚀
179
179
  - [@webzlodimir/vue-bottom-sheet]: 🔥 A nice clean and touch-friendly bottom sheet component based on Vue.js and Hammer.js for Vue 3
180
180
 
181
- [motion-v]: https://motion.unovue.com/
182
- [react-spring-bottom-sheet]: https://react-spring.bottom-sheet.dev/
181
+ [react-spring-bottom-sheet]: https://react-spring.bottom.sheet.dev/
183
182
  [@webzlodimir/vue-bottom-sheet]: https://github.com/vaban-ru/vue-bottom-sheet
@@ -26,7 +26,6 @@ declare const __VLS_component: import('vue').DefineComponent<BottomSheetProps, {
26
26
  "opening-started": () => any;
27
27
  closed: () => any;
28
28
  "closing-started": () => any;
29
- ready: () => any;
30
29
  "dragging-up": () => any;
31
30
  "dragging-down": () => any;
32
31
  snapped: (snapPointIndex?: number | undefined) => any;
@@ -37,18 +36,17 @@ declare const __VLS_component: import('vue').DefineComponent<BottomSheetProps, {
37
36
  "onOpening-started"?: (() => any) | undefined;
38
37
  onClosed?: (() => any) | undefined;
39
38
  "onClosing-started"?: (() => any) | undefined;
40
- onReady?: (() => any) | undefined;
41
39
  "onDragging-up"?: (() => any) | undefined;
42
40
  "onDragging-down"?: (() => any) | undefined;
43
41
  onSnapped?: ((snapPointIndex?: number | undefined) => any) | undefined;
44
42
  onInstinctHeight?: ((instinctHeight: number) => any) | undefined;
45
43
  "onUpdate:modelValue"?: (() => any) | undefined;
46
44
  }>, {
47
- duration: number;
48
- blocking: boolean;
49
45
  canSwipeClose: boolean;
50
- canBackdropClose: boolean;
51
46
  expandOnContentDrag: boolean;
47
+ blocking: boolean;
48
+ duration: number;
49
+ canBackdropClose: boolean;
52
50
  teleportTo: string | import('vue').RendererElement;
53
51
  teleportDefer: boolean;
54
52
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
@@ -0,0 +1,47 @@
1
+ import { Ref, ComputedRef, ShallowRef } from 'vue';
2
+ export interface UseDragGesturesOptions {
3
+ sheetRef: ShallowRef<HTMLElement | null>;
4
+ sheetScrollRef: ShallowRef<HTMLElement | null>;
5
+ height: Ref<number>;
6
+ translateY: Ref<number>;
7
+ sheetHeight: Ref<number>;
8
+ windowHeight: Ref<number>;
9
+ snapPointsRef: ComputedRef<Array<number | `${number}%`>>;
10
+ flattenedSnapPoints: ComputedRef<number[]>;
11
+ currentSnapPointIndex: Ref<number>;
12
+ closestSnapPointIndex: ComputedRef<number>;
13
+ minSnapPoint: ComputedRef<number>;
14
+ maxSnapPoint: ComputedRef<number>;
15
+ canSwipeClose: Ref<boolean>;
16
+ swipeCloseThreshold: Ref<string | number | undefined>;
17
+ expandOnContentDrag: Ref<boolean>;
18
+ onClose: () => void;
19
+ onSnapped: (index: number) => void;
20
+ onDraggingUp: () => void;
21
+ onDraggingDown: () => void;
22
+ }
23
+ /**
24
+ * Composable that handles all drag/pan gesture logic for the bottom sheet.
25
+ * Manages header/footer dragging, content area dragging, and snap point navigation.
26
+ */
27
+ export declare function useDragGestures(options: UseDragGesturesOptions): {
28
+ isDragging: Ref<boolean, boolean>;
29
+ preventContentScroll: Ref<boolean, boolean>;
30
+ headerFooterHandlers: ComputedRef<{
31
+ onPointerdown: (event: PointerEvent) => void;
32
+ onPointermove: (event: PointerEvent) => void;
33
+ onPointerup: (event: PointerEvent) => void;
34
+ onPointercancel: (event: PointerEvent) => void;
35
+ onContextmenu: (event: MouseEvent) => void;
36
+ onTouchmove: (event: TouchEvent) => void;
37
+ }>;
38
+ contentWrapperHandlers: ComputedRef<{
39
+ onPointerdown: (event: PointerEvent) => void;
40
+ onPointermove: (event: PointerEvent) => void;
41
+ onPointerup: (event: PointerEvent) => void;
42
+ onPointercancel: (event: PointerEvent) => void;
43
+ onContextmenu: (event: MouseEvent) => void;
44
+ onTouchmove: (event: TouchEvent) => void;
45
+ }>;
46
+ scrollEnd: () => void;
47
+ };
@@ -0,0 +1,17 @@
1
+ import { Ref, ShallowRef } from 'vue';
2
+ export interface UseFocusManagementOptions {
3
+ sheetRef: ShallowRef<HTMLElement | null>;
4
+ backdropRef: ShallowRef<HTMLElement | null>;
5
+ blocking: Ref<boolean>;
6
+ onEscape: () => void;
7
+ }
8
+ /**
9
+ * Manage focus trap and aria-expanded observer for accessibility.
10
+ * Handles keyboard escape, focus trapping, and pausing trap when
11
+ * nested aria-expanded elements (like dropdowns) are open.
12
+ */
13
+ export declare function useFocusManagement(options: UseFocusManagementOptions): {
14
+ activate: () => void;
15
+ deactivate: () => void;
16
+ cleanup: () => void;
17
+ };
@@ -0,0 +1,17 @@
1
+ import { Ref } from 'vue';
2
+ export interface UseSheetScrollLockOptions {
3
+ blocking: Ref<boolean>;
4
+ }
5
+ /**
6
+ * Manage scroll locking for the sheet.
7
+ * When blocking mode is enabled, locks body scroll when sheet is open.
8
+ * When non-blocking, temporarily locks during touch interactions.
9
+ */
10
+ export declare function useSheetScrollLock(options: UseSheetScrollLockOptions): {
11
+ lock: () => void;
12
+ unlock: () => void;
13
+ lockIfBlocking: () => void;
14
+ unlockIfBlocking: () => void;
15
+ touchStartHandler: () => void;
16
+ touchEndHandler: () => void;
17
+ };
package/dist/index.mjs CHANGED
@@ -1,114 +1,372 @@
1
- import { ref as m, computed as $, defineComponent as qe, useCssVars as ze, watch as ee, onMounted as We, toRefs as Qe, nextTick as Se, onUnmounted as je, createElementBlock as ue, openBlock as Q, Fragment as Ge, createBlock as Ce, Teleport as xe, createVNode as ye, Transition as Pe, withCtx as Te, createCommentVNode as ke, unref as se, normalizeStyle as Ke, createElementVNode as j, normalizeClass as re, renderSlot as ie } from "vue";
2
- import { useVModel as Ue, useWindowSize as Je, useElementBounding as te, useScrollLock as Ye } from "@vueuse/core";
3
- import { useFocusTrap as Xe } from "@vueuse/integrations/useFocusTrap";
4
- function G(a, o) {
5
- const s = parseFloat(a);
6
- return o * s / 100;
1
+ import { ref as P, computed as D, defineComponent as ye, useCssVars as Ee, watch as te, onMounted as De, shallowRef as q, toRefs as He, nextTick as fe, onUnmounted as Be, createElementBlock as ie, openBlock as X, Fragment as Ie, createBlock as pe, Teleport as he, createVNode as ge, Transition as me, withCtx as Se, createCommentVNode as be, unref as E, normalizeStyle as Ye, createElementVNode as j, mergeProps as ce, renderSlot as ve, normalizeClass as Me } from "vue";
2
+ import { useScrollLock as Pe, useVModel as Re, useWindowSize as Oe, useElementBounding as ne } from "@vueuse/core";
3
+ import { useFocusTrap as Ae } from "@vueuse/integrations/useFocusTrap";
4
+ function Te(t, a) {
5
+ const u = parseFloat(t);
6
+ return a * u / 100;
7
7
  }
8
- function Ze(a, o, s) {
9
- const t = m(0), v = $(() => a.value.map((C) => typeof C == "string" ? G(C, s.value) : C)), S = $(() => Math.min(...v.value)), i = $(() => Math.max(...v.value)), x = $(() => {
10
- const C = v.value.reduce(
11
- (y, h) => Math.abs(h - o.value) < Math.abs(y - o.value) ? h : y
8
+ function Le(t, a, u) {
9
+ const e = P(0), n = D(() => t.value.map((f) => typeof f == "string" ? Te(f, u.value) : f)), i = D(() => Math.min(...n.value)), r = D(() => Math.max(...n.value)), p = D(() => {
10
+ const f = n.value.reduce(
11
+ (b, v) => Math.abs(v - a.value) < Math.abs(b - a.value) ? v : b
12
12
  );
13
- return v.value.indexOf(C);
13
+ return n.value.indexOf(f);
14
14
  });
15
15
  return {
16
- currentSnapPointIndex: t,
17
- flattenedSnapPoints: v,
18
- minSnapPoint: S,
19
- maxSnapPoint: i,
20
- closestSnapPointIndex: x
16
+ currentSnapPointIndex: e,
17
+ flattenedSnapPoints: n,
18
+ minSnapPoint: i,
19
+ maxSnapPoint: r,
20
+ closestSnapPointIndex: p
21
21
  };
22
22
  }
23
- function _e(a = {}) {
24
- const { velocityThreshold: o = 0.5 } = a, s = m(0), t = m(0), v = m(0), S = m(0), i = m([]);
23
+ function Fe(t, a, u) {
24
+ let e = (n) => t(n, ...a);
25
+ return u === void 0 ? e : Object.assign(e, { lazy: u, lazyArgs: a });
26
+ }
27
+ function $e(t, a, u) {
28
+ let e = t.length - a.length;
29
+ if (e === 0) return t(...a);
30
+ if (e === 1) return Fe(t, a, u);
31
+ throw Error("Wrong number of arguments");
32
+ }
33
+ function I(...t) {
34
+ return $e(Ne, t);
35
+ }
36
+ const Ne = (t, { min: a, max: u }) => a !== void 0 && t < a ? a : u !== void 0 && t > u ? u : t, ke = /* @__PURE__ */ Symbol("funnel/voidReducer"), Ve = () => ke;
37
+ function Ue(t, { triggerAt: a = "end", minQuietPeriodMs: u, maxBurstDurationMs: e, minGapMs: n, reducer: i = Ve }) {
38
+ let r, p, f, b, v = () => {
39
+ let g = f;
40
+ g !== void 0 && (f = void 0, g === ke ? t() : t(g), n !== void 0 && (p = setTimeout(d, n)));
41
+ }, d = () => {
42
+ clearTimeout(p), p = void 0, r === void 0 && v();
43
+ }, h = () => {
44
+ clearTimeout(r), r = void 0, b = void 0, p === void 0 && v();
45
+ };
46
+ return { call: (...g) => {
47
+ let w = r === void 0 && p === void 0;
48
+ if ((a !== "start" || w) && (f = i(f, ...g)), !(r === void 0 && !w)) {
49
+ if (u !== void 0 || e !== void 0 || n === void 0) {
50
+ clearTimeout(r);
51
+ let C = Date.now();
52
+ b ??= C;
53
+ let x = e === void 0 ? u ?? 0 : Math.min(u ?? e, e - (C - b));
54
+ r = setTimeout(h, x);
55
+ }
56
+ a !== "end" && w && v();
57
+ }
58
+ }, cancel: () => {
59
+ clearTimeout(r), r = void 0, b = void 0, clearTimeout(p), p = void 0, f = void 0;
60
+ }, flush: () => {
61
+ h(), d();
62
+ }, get isIdle() {
63
+ return r === void 0 && p === void 0;
64
+ } };
65
+ }
66
+ function We(t = {}) {
67
+ const { velocityThreshold: a = 0.5 } = t, u = P(0), e = P(0), n = P(0), i = P(0), r = P([]);
25
68
  return {
26
- start: (h) => {
27
- const w = performance.now();
28
- s.value = h, t.value = w, v.value = h, S.value = w, i.value = [{ y: h, time: w }];
69
+ start: (v) => {
70
+ const d = performance.now();
71
+ u.value = v, e.value = d, n.value = v, i.value = d, r.value = [{ y: v, time: d }];
29
72
  },
30
- update: (h) => {
31
- const w = performance.now();
32
- v.value = h, S.value = w, i.value.push({ y: h, time: w });
33
- const f = w - 100;
34
- i.value = i.value.filter((d) => d.time > f).slice(-5);
73
+ update: (v) => {
74
+ const d = performance.now();
75
+ n.value = v, i.value = d, r.value.push({ y: v, time: d });
76
+ const h = d - 100;
77
+ r.value = r.value.filter((g) => g.time > h).slice(-5);
35
78
  },
36
79
  end: () => {
37
- const h = i.value;
38
- let w = 0;
39
- if (h.length >= 2) {
40
- const M = h[0], O = h[h.length - 1];
41
- if (M && O) {
42
- const F = O.y - M.y, L = O.time - M.time;
43
- L > 0 && (w = F / L);
80
+ const v = r.value;
81
+ let d = 0;
82
+ if (v.length >= 2) {
83
+ const w = v[0], C = v[v.length - 1];
84
+ if (w && C) {
85
+ const x = C.y - w.y, R = C.time - w.time;
86
+ R > 0 && (d = x / R);
44
87
  }
45
88
  }
46
- const f = Math.abs(w) >= o;
47
- let d = "none";
48
- return f && (d = w < 0 ? "up" : "down"), i.value = [], {
49
- direction: d,
50
- velocity: Math.abs(w),
51
- isSwipe: f
89
+ const h = Math.abs(d) >= a;
90
+ let g = "none";
91
+ return h && (g = d < 0 ? "up" : "down"), r.value = [], {
92
+ direction: g,
93
+ velocity: Math.abs(d),
94
+ isSwipe: h
52
95
  };
53
96
  }
54
97
  };
55
98
  }
56
- function et(a, o, s) {
57
- let t = (v) => a(v, ...o);
58
- return s === void 0 ? t : Object.assign(t, { lazy: s, lazyArgs: o });
99
+ function qe(t, a, u) {
100
+ return Math.max(a, Math.min(t, u));
59
101
  }
60
- function tt(a, o, s) {
61
- let t = a.length - o.length;
62
- if (t === 0) return a(...o);
63
- if (t === 1) return et(a, o, s);
64
- throw Error("Wrong number of arguments");
102
+ function ze(t, a) {
103
+ return Math.pow(t, a * 5);
65
104
  }
66
- function P(...a) {
67
- return tt(nt, a);
105
+ function we(t, a, u) {
106
+ return a === 0 || Math.abs(a) === 1 / 0 ? ze(t, u) : t * a * u / (a + u * t);
68
107
  }
69
- const nt = (a, { min: o, max: s }) => o !== void 0 && a < o ? o : s !== void 0 && a > s ? s : a, Ee = /* @__PURE__ */ Symbol("funnel/voidReducer"), at = () => Ee;
70
- function lt(a, { triggerAt: o = "end", minQuietPeriodMs: s, maxBurstDurationMs: t, minGapMs: v, reducer: S = at }) {
71
- let i, x, C, y, h = () => {
72
- let d = C;
73
- d !== void 0 && (C = void 0, d === Ee ? a() : a(d), v !== void 0 && (x = setTimeout(w, v)));
74
- }, w = () => {
75
- clearTimeout(x), x = void 0, i === void 0 && h();
76
- }, f = () => {
77
- clearTimeout(i), i = void 0, y = void 0, x === void 0 && h();
78
- };
79
- return { call: (...d) => {
80
- let M = i === void 0 && x === void 0;
81
- if ((o !== "start" || M) && (C = S(C, ...d)), !(i === void 0 && !M)) {
82
- if (s !== void 0 || t !== void 0 || v === void 0) {
83
- clearTimeout(i);
84
- let O = Date.now();
85
- y ??= O;
86
- let F = t === void 0 ? s ?? 0 : Math.min(s ?? t, t - (O - y));
87
- i = setTimeout(f, F);
88
- }
89
- o !== "end" && M && h();
90
- }
91
- }, cancel: () => {
92
- clearTimeout(i), i = void 0, y = void 0, clearTimeout(x), x = void 0, C = void 0;
93
- }, flush: () => {
94
- f(), w();
95
- }, get isIdle() {
96
- return i === void 0 && x === void 0;
97
- } };
108
+ function de(t, a, u, e = 0.15) {
109
+ return e === 0 ? qe(t, a, u) : t < a ? -we(a - t, u - a, e) + a : t > u ? +we(t - u, u - a, e) + u : t;
98
110
  }
99
- function ot(a, o, s) {
100
- return Math.max(o, Math.min(a, s));
111
+ function ae(t, a) {
112
+ return typeof t == "number" ? I(t, { max: a }) : Te(t, a);
101
113
  }
102
- function ut(a, o) {
103
- return Math.pow(a, o * 5);
114
+ function Ce(t, a) {
115
+ if (t === void 0)
116
+ return a / 2;
117
+ if (typeof t == "number")
118
+ return t;
119
+ if (typeof t == "string" && t.includes("%")) {
120
+ const u = Number(t.replace("%", ""));
121
+ return a * (u / 100);
122
+ }
123
+ return a / 2;
104
124
  }
105
- function Me(a, o, s) {
106
- return o === 0 || Math.abs(o) === 1 / 0 ? ut(a, s) : a * o * s / (o + s * a);
125
+ const Ge = 10, Qe = 3, Xe = 0.25, xe = 0.5, je = 0.5;
126
+ function Ke(t) {
127
+ const {
128
+ sheetRef: a,
129
+ sheetScrollRef: u,
130
+ height: e,
131
+ translateY: n,
132
+ sheetHeight: i,
133
+ windowHeight: r,
134
+ snapPointsRef: p,
135
+ flattenedSnapPoints: f,
136
+ currentSnapPointIndex: b,
137
+ closestSnapPointIndex: v,
138
+ minSnapPoint: d,
139
+ maxSnapPoint: h,
140
+ canSwipeClose: g,
141
+ swipeCloseThreshold: w,
142
+ expandOnContentDrag: C,
143
+ onClose: x,
144
+ onSnapped: R,
145
+ onDraggingUp: oe,
146
+ onDraggingDown: H
147
+ } = t, T = P(!1), F = P(0), N = P(0), k = P(0), Y = P(0), B = P(!0), S = P(!0), O = We({ velocityThreshold: je }), K = (o) => {
148
+ o > 0 ? H() : o < 0 && oe();
149
+ }, z = () => {
150
+ if (!a.value) return;
151
+ const o = window.getComputedStyle(a.value), c = parseFloat(o.height);
152
+ let l = 0;
153
+ o.transform && o.transform !== "none" && (l = new DOMMatrix(o.transform).m42), e.value = c, n.value = l;
154
+ }, le = () => {
155
+ const o = v.value;
156
+ b.value = o;
157
+ const c = p.value[o];
158
+ if (!c) return;
159
+ const l = ae(c, r.value);
160
+ e.value = l, n.value = 0, R(p.value.indexOf(c));
161
+ }, _ = (o = !0) => {
162
+ const c = O.end();
163
+ if (o && c.isSwipe && c.direction === "down" && g.value && e.value <= d.value + Ge)
164
+ return n.value = e.value, x(), !0;
165
+ let l;
166
+ if (o && c.isSwipe && f.value.length > 1) {
167
+ const M = [...f.value].sort((y, L) => y - L);
168
+ if (c.direction === "up") {
169
+ const y = M.find((L) => L > e.value + 1);
170
+ l = y !== void 0 ? f.value.indexOf(y) : v.value;
171
+ } else {
172
+ const y = [...M].reverse().find((L) => L < e.value - 1);
173
+ l = y !== void 0 ? f.value.indexOf(y) : v.value;
174
+ }
175
+ } else
176
+ l = v.value;
177
+ b.value = l;
178
+ const s = p.value[l];
179
+ if (!s)
180
+ return x(), !0;
181
+ const m = ae(s, r.value);
182
+ return m === 0 ? (x(), !0) : (e.value = m, n.value = 0, R(p.value.indexOf(s)), !1);
183
+ }, ue = (o) => {
184
+ a.value && o.button === 0 && (z(), T.value = !0, F.value = o.clientY, N.value = e.value, k.value = n.value, Y.value = o.clientY, O.start(o.clientY), o.target.setPointerCapture(o.pointerId));
185
+ }, A = (o) => {
186
+ if (!T.value) return;
187
+ if (o.buttons !== 1) {
188
+ $(o);
189
+ return;
190
+ }
191
+ const c = o.clientY - F.value, l = o.clientY;
192
+ n.value <= 0 && (e.value = N.value - c), e.value <= d.value && (e.value = d.value, n.value = k.value + c, g.value ? n.value = I(n.value, { min: 0 }) : n.value = I(
193
+ de(
194
+ n.value,
195
+ -i.value,
196
+ 0,
197
+ xe
198
+ ),
199
+ { min: 0 }
200
+ )), e.value = I(
201
+ de(e.value, 0, h.value, Xe),
202
+ {
203
+ min: 0,
204
+ max: r.value
205
+ }
206
+ ), K(o.clientY - Y.value), O.update(o.clientY), Y.value = l;
207
+ }, $ = (o) => {
208
+ if (T.value = !1, o.target.releasePointerCapture(o.pointerId), g.value) {
209
+ const c = Ce(w.value, e.value);
210
+ if (n.value > c) {
211
+ n.value = e.value, x();
212
+ return;
213
+ }
214
+ } else
215
+ n.value = 0;
216
+ if (n.value === e.value) {
217
+ n.value = 0, x();
218
+ return;
219
+ }
220
+ _();
221
+ }, re = (o) => {
222
+ if (!u.value) return;
223
+ const c = u.value.scrollTop === 0, l = o > 0, s = f.value.length === 1, m = 0.5 > Math.abs(e.value - h.value);
224
+ if (s) {
225
+ if (!C.value) {
226
+ S.value = !1;
227
+ return;
228
+ }
229
+ n.value === 0 && c && l && (S.value = !0), n.value === 0 && c && !l && (S.value = !1);
230
+ } else {
231
+ if (!C.value) {
232
+ S.value = !1;
233
+ return;
234
+ }
235
+ S.value = !0, m && (l && c && (S.value = !0), !l && c && (S.value = !1), c || (S.value = !1));
236
+ }
237
+ }, J = (o) => {
238
+ a.value && o.button === 0 && (z(), T.value = !0, F.value = o.clientY, N.value = e.value, k.value = n.value, Y.value = o.clientY, B.value = !0, O.start(o.clientY), o.target.setPointerCapture(o.pointerId));
239
+ }, se = (o) => {
240
+ if (!T.value) return;
241
+ if (o.buttons !== 1) {
242
+ V(o);
243
+ return;
244
+ }
245
+ if (!C.value) {
246
+ S.value = !1;
247
+ return;
248
+ }
249
+ const c = o.clientY - F.value, l = o.clientY, s = o.clientY - Y.value;
250
+ if (B.value) {
251
+ const M = o.clientY - F.value;
252
+ if (Math.abs(M) > Qe)
253
+ B.value = !1, re(M);
254
+ else {
255
+ Y.value = l;
256
+ return;
257
+ }
258
+ }
259
+ n.value === 0 && S.value && C.value && (e.value = N.value - c), e.value <= d.value && (e.value = d.value, S.value && C.value && (n.value = k.value + c), n.value = I(n.value, { min: 0, max: d.value }), g.value ? n.value = I(n.value, { min: 0 }) : n.value = I(
260
+ de(
261
+ n.value,
262
+ -i.value,
263
+ 0,
264
+ xe
265
+ ),
266
+ { min: 0 }
267
+ )), e.value > h.value && (e.value = h.value), e.value = I(e.value, { max: r.value }), f.value.length === 1 || e.value === h.value && (S.value = !1), K(s), O.update(o.clientY), Y.value = l;
268
+ }, V = (o) => {
269
+ if (T.value = !1, B.value = !0, o.target.releasePointerCapture(o.pointerId), g.value) {
270
+ const l = Ce(w.value, e.value);
271
+ if (n.value > l) {
272
+ n.value = e.value, x();
273
+ return;
274
+ }
275
+ } else
276
+ n.value = 0;
277
+ if (n.value === e.value) {
278
+ n.value = 0, x();
279
+ return;
280
+ }
281
+ const c = S.value;
282
+ _(c);
283
+ }, U = (o) => {
284
+ T.value && (o.preventDefault(), T.value = !1, B.value = !0, le());
285
+ }, G = (o) => {
286
+ S.value = !0, Z(o);
287
+ }, Z = (o) => {
288
+ S.value && o.preventDefault();
289
+ }, Q = () => {
290
+ if (!u.value) return;
291
+ const o = u.value.scrollTop === 0;
292
+ S.value = o;
293
+ }, W = D(() => ({
294
+ onPointerdown: ue,
295
+ onPointermove: A,
296
+ onPointerup: $,
297
+ onPointercancel: $,
298
+ onContextmenu: U,
299
+ onTouchmove: G
300
+ })), ee = D(() => ({
301
+ onPointerdown: J,
302
+ onPointermove: se,
303
+ onPointerup: V,
304
+ onPointercancel: V,
305
+ onContextmenu: U,
306
+ onTouchmove: Z
307
+ }));
308
+ return {
309
+ isDragging: T,
310
+ preventContentScroll: S,
311
+ headerFooterHandlers: W,
312
+ contentWrapperHandlers: ee,
313
+ scrollEnd: Q
314
+ };
107
315
  }
108
- function ve(a, o, s, t = 0.15) {
109
- return t === 0 ? ot(a, o, s) : a < o ? -Me(o - a, s - o, t) + o : a > s ? +Me(a - s, s - o, t) + s : a;
316
+ function _e(t) {
317
+ const { blocking: a } = t, u = Pe(document.body), e = Pe(document.documentElement), n = () => {
318
+ u.value = !0, e.value = !0;
319
+ }, i = () => {
320
+ u.value = !1, e.value = !1;
321
+ };
322
+ return {
323
+ lock: n,
324
+ unlock: i,
325
+ lockIfBlocking: () => {
326
+ a.value && n();
327
+ },
328
+ unlockIfBlocking: () => {
329
+ a.value && i();
330
+ },
331
+ touchStartHandler: () => {
332
+ a.value || n();
333
+ },
334
+ touchEndHandler: () => {
335
+ a.value || i();
336
+ }
337
+ };
110
338
  }
111
- const st = ["data-vsbs-shadow", "data-vsbs-sheet-show"], rt = /* @__PURE__ */ qe({
339
+ function Je(t) {
340
+ const { sheetRef: a, backdropRef: u, blocking: e, onEscape: n } = t, i = P(null), r = Ae([a, u], {
341
+ immediate: !1,
342
+ fallbackFocus: () => a.value || document.body
343
+ }), p = (g) => {
344
+ g.key === "Escape" && n();
345
+ }, f = () => {
346
+ a.value && (i.value = new MutationObserver((g) => {
347
+ for (const w of g)
348
+ w.type === "attributes" && w.attributeName === "aria-expanded" && (w.target.getAttribute("aria-expanded") === "true" ? r.pause() : a.value?.querySelector('[aria-expanded="true"]') || r.unpause());
349
+ }), i.value.observe(a.value, {
350
+ attributes: !0,
351
+ attributeFilter: ["aria-expanded"],
352
+ subtree: !0
353
+ }));
354
+ }, b = () => {
355
+ i.value && (i.value.disconnect(), i.value = null);
356
+ };
357
+ return {
358
+ activate: () => {
359
+ e.value && (r.activate(), f()), window.addEventListener("keydown", p);
360
+ },
361
+ deactivate: () => {
362
+ window.removeEventListener("keydown", p), b(), e.value && r.deactivate();
363
+ },
364
+ cleanup: () => {
365
+ b(), r.deactivate();
366
+ }
367
+ };
368
+ }
369
+ const Ze = ["data-vsbs-shadow", "data-vsbs-sheet-show"], et = /* @__PURE__ */ ye({
112
370
  __name: "BottomSheet",
113
371
  props: {
114
372
  duration: { default: 250 },
@@ -126,405 +384,214 @@ const st = ["data-vsbs-shadow", "data-vsbs-sheet-show"], rt = /* @__PURE__ */ qe
126
384
  contentClass: {},
127
385
  footerClass: {}
128
386
  },
129
- emits: ["opened", "opening-started", "closed", "closing-started", "ready", "dragging-up", "dragging-down", "snapped", "instinctHeight", "update:modelValue"],
130
- setup(a, { expose: o, emit: s }) {
131
- ze((e) => ({
132
- v6f938e48: Oe.value
387
+ emits: ["opened", "opening-started", "closed", "closing-started", "dragging-up", "dragging-down", "snapped", "instinctHeight", "update:modelValue"],
388
+ setup(t, { expose: a, emit: u }) {
389
+ Ee((l) => ({
390
+ d0a9abc2: F.value
133
391
  }));
134
- const t = a, v = s, S = Ue(t, "modelValue", v, {
392
+ const e = t, n = u, i = Re(e, "modelValue", n, {
135
393
  passive: !0
136
394
  });
137
- ee(S, (e) => {
138
- e && le();
139
- }), We(() => {
140
- S.value && le();
395
+ te(i, (l) => {
396
+ l && Q();
397
+ }), De(() => {
398
+ i.value && Q();
141
399
  });
142
- const i = m(null), x = m(null), C = m(null), y = m(null), h = m(null), w = m(null), f = m(t.expandOnContentDrag), { height: d } = Je(), { height: M } = te(i), { height: O } = te(x), { height: F } = te(h), { height: L } = te(C), ne = $({
143
- get() {
144
- return P(
145
- Math.ceil(F.value + O.value + L.value),
146
- {
147
- max: d.value
148
- }
149
- );
150
- },
151
- set(e) {
152
- O.value = e[0], F.value = e[1], L.value = e[2];
153
- }
154
- }), l = m(0), u = m(0), Oe = $(() => t.duration + "ms"), { snapPoints: De } = Qe(t), Y = $(() => De.value ?? [ne.value]), {
155
- flattenedSnapPoints: E,
400
+ const r = q(null), p = q(null), f = q(null), b = q(null), v = q(null), d = q(null), { height: h } = Oe(), { height: g } = ne(r), { height: w } = ne(p), { height: C } = ne(v), { height: x } = ne(f), R = D(() => I(
401
+ Math.ceil(C.value + w.value + x.value),
402
+ { max: h.value }
403
+ )), oe = (l, s, m) => {
404
+ w.value = l, C.value = s, x.value = m;
405
+ }, H = P(0), T = P(0), F = D(() => e.duration + "ms"), { snapPoints: N } = He(e), k = D(() => N.value ?? [R.value]), {
406
+ flattenedSnapPoints: Y,
156
407
  currentSnapPointIndex: B,
157
- closestSnapPointIndex: A,
158
- minSnapPoint: D,
159
- maxSnapPoint: V
160
- } = Ze(Y, l, d), K = Ye(document.body), U = Ye(document.documentElement), H = m(!1), N = m(0), J = m(0), X = m(0), I = m(0), Z = m(!0), R = _e({ velocityThreshold: 0.5 }), q = Xe([i, w], {
161
- immediate: !1,
162
- fallbackFocus: () => i.value || document.body
163
- });
164
- let z = null;
165
- const Be = () => {
166
- i.value && (z = new MutationObserver((e) => {
167
- for (const n of e)
168
- n.type === "attributes" && n.attributeName === "aria-expanded" && (n.target.getAttribute("aria-expanded") === "true" ? q.pause() : i.value?.querySelector('[aria-expanded="true"]') || q.unpause());
169
- }), z.observe(i.value, {
170
- attributes: !0,
171
- attributeFilter: ["aria-expanded"],
172
- subtree: !0
173
- }));
174
- }, ce = () => {
175
- z && (z.disconnect(), z = null);
176
- };
177
- function de(e) {
178
- f.value = !0, fe(e);
179
- }
180
- function fe(e) {
181
- f.value && e.preventDefault();
182
- }
183
- const pe = (e) => {
184
- e.key === "Escape" && T();
185
- }, He = () => {
186
- t.canBackdropClose && T();
187
- };
188
- let ae = !1;
189
- const le = async () => {
190
- if (ae) return;
191
- S.value = !0, ae = !0, v("opening-started"), t.blocking && (K.value = !0, U.value = !0), await Se();
192
- const e = i.value;
193
- M.value = e.getBoundingClientRect().height;
194
- const n = e.querySelector("[data-vsbs-content]"), r = e.querySelector("[data-vsbs-header]"), c = e.querySelector("[data-vsbs-footer]");
195
- if (ne.value = [
196
- r.getBoundingClientRect().height,
197
- n.getBoundingClientRect().height,
198
- c.getBoundingClientRect().height
199
- ], await Se(), B.value = E.value.findIndex(
200
- (p) => p === D.value
201
- ), t.initialSnapPoint) {
202
- const p = t.initialSnapPoint;
203
- if (p < 0 || p >= Y.value.length) {
408
+ closestSnapPointIndex: S,
409
+ minSnapPoint: O,
410
+ maxSnapPoint: K
411
+ } = Le(k, H, h), z = D(() => e.blocking), le = D(() => e.canSwipeClose), _ = D(() => e.swipeCloseThreshold), ue = D(() => e.expandOnContentDrag), A = _e({ blocking: z }), $ = Je({
412
+ sheetRef: r,
413
+ backdropRef: d,
414
+ blocking: z,
415
+ onEscape: () => W()
416
+ }), { isDragging: re, headerFooterHandlers: J, contentWrapperHandlers: se, scrollEnd: V } = Ke({
417
+ sheetRef: r,
418
+ sheetScrollRef: b,
419
+ height: H,
420
+ translateY: T,
421
+ sheetHeight: g,
422
+ windowHeight: h,
423
+ snapPointsRef: k,
424
+ flattenedSnapPoints: Y,
425
+ currentSnapPointIndex: B,
426
+ closestSnapPointIndex: S,
427
+ minSnapPoint: O,
428
+ maxSnapPoint: K,
429
+ canSwipeClose: le,
430
+ swipeCloseThreshold: _,
431
+ expandOnContentDrag: ue,
432
+ onClose: () => W(),
433
+ onSnapped: (l) => n("snapped", l),
434
+ onDraggingUp: () => n("dragging-up"),
435
+ onDraggingDown: () => n("dragging-down")
436
+ }), U = P(!1), G = P(!1), Z = () => {
437
+ e.canBackdropClose && W();
438
+ }, Q = async () => {
439
+ if (U.value) return;
440
+ i.value = !0, U.value = !0, n("opening-started"), A.lockIfBlocking(), await fe();
441
+ const l = r.value;
442
+ g.value = l.getBoundingClientRect().height;
443
+ const s = l.querySelector("[data-vsbs-content]"), m = l.querySelector("[data-vsbs-header]"), M = l.querySelector("[data-vsbs-footer]");
444
+ if (oe(
445
+ m.getBoundingClientRect().height,
446
+ s.getBoundingClientRect().height,
447
+ M.getBoundingClientRect().height
448
+ ), await fe(), B.value = Y.value.findIndex(
449
+ (y) => y === O.value
450
+ ), e.initialSnapPoint !== void 0) {
451
+ const y = e.initialSnapPoint;
452
+ if (y < 0 || y >= k.value.length) {
204
453
  console.warn("Index out of bounds");
205
454
  return;
206
455
  }
207
- const g = Y.value[p];
208
- if (!g) return;
209
- let b;
210
- typeof g == "number" ? b = P(g, {
211
- max: d.value
212
- }) : b = G(g, d.value), l.value = b;
456
+ const L = k.value[y];
457
+ if (!L) return;
458
+ H.value = ae(L, h.value);
213
459
  } else
214
- l.value = P(D.value, {
215
- max: d.value
216
- });
217
- u.value = l.value, requestAnimationFrame(() => {
218
- u.value = 0, t.blocking && setTimeout(() => {
219
- S.value && (v("opened"), q.activate(), Be());
220
- }, t.duration);
221
- }), window.addEventListener("keydown", pe), ae = !1;
222
- };
223
- let oe = !1;
224
- const T = () => {
225
- oe || (S.value = !1, oe = !0, v("closing-started"), t.blocking && (K.value = !1, U.value = !1), window.removeEventListener("keydown", pe), ce(), t.blocking && q.deactivate(), u.value = l.value, setTimeout(() => {
226
- v("closed"), oe = !1;
227
- }, t.duration));
228
- }, he = (e) => {
229
- if (!Y.value) return;
230
- if (e < 0 || e >= Y.value.length) {
460
+ H.value = I(O.value, { max: h.value });
461
+ T.value = H.value, requestAnimationFrame(() => {
462
+ T.value = 0, e.blocking && setTimeout(() => {
463
+ i.value && (n("opened"), $.activate());
464
+ }, e.duration);
465
+ }), U.value = !1;
466
+ }, W = () => {
467
+ G.value || (i.value = !1, G.value = !0, n("closing-started"), A.unlockIfBlocking(), $.deactivate(), T.value = H.value, setTimeout(() => {
468
+ n("closed"), G.value = !1;
469
+ }, e.duration));
470
+ }, ee = (l) => {
471
+ if (!k.value) return;
472
+ if (l < 0 || l >= k.value.length) {
231
473
  console.warn("Index out of bounds");
232
474
  return;
233
475
  }
234
- B.value = e;
235
- const n = Y.value[e];
236
- if (!n) return;
237
- let r;
238
- typeof n == "number" ? r = P(n, {
239
- max: d.value
240
- }) : r = G(n, d.value), l.value = r, v("snapped", Y.value.indexOf(n));
241
- };
242
- function me(e) {
243
- e > 0 ? v("dragging-down") : e < 0 && v("dragging-up");
244
- }
245
- const ge = (e) => {
246
- if (!i.value) return;
247
- const n = window.getComputedStyle(i.value), r = parseFloat(n.height);
248
- let c = 0;
249
- n.transform && n.transform !== "none" && (c = new DOMMatrix(n.transform).m42), l.value = r, u.value = c, H.value = !0, N.value = e.clientY, J.value = l.value, X.value = u.value, I.value = e.clientY, R.start(e.clientY), e.target.setPointerCapture(e.pointerId);
250
- }, we = (e) => {
251
- if (!H.value) return;
252
- const n = e.clientY - N.value, r = e.clientY;
253
- u.value <= 0 && (l.value = J.value - n), l.value <= D.value && (l.value = D.value, u.value = X.value + n, t.canSwipeClose ? u.value = P(u.value, { min: 0 }) : u.value = P(
254
- ve(u.value, -M.value, 0, 0.5),
255
- { min: 0 }
256
- )), l.value = P(ve(l.value, 0, V.value, 0.25), {
257
- min: 0,
258
- max: d.value
259
- }), me(e.clientY - I.value), R.update(e.clientY), I.value = r;
260
- }, _ = (e) => {
261
- if (H.value = !1, e.target.releasePointerCapture(e.pointerId), t.canSwipeClose) {
262
- let g = l.value / 2;
263
- if (t.swipeCloseThreshold && typeof t.swipeCloseThreshold == "number" && (g = t.swipeCloseThreshold), t.swipeCloseThreshold && typeof t.swipeCloseThreshold == "string" && t.swipeCloseThreshold.includes("%") && (g = l.value * (Number(t.swipeCloseThreshold.replace("%", "")) / 100)), u.value > g) {
264
- u.value = l.value, T();
265
- return;
266
- }
267
- } else
268
- u.value = 0;
269
- if (u.value === l.value) {
270
- u.value = 0, T();
271
- return;
272
- }
273
- const n = R.end();
274
- if (n.isSwipe && n.direction === "down" && t.canSwipeClose && l.value <= D.value + 10) {
275
- u.value = l.value, T();
276
- return;
277
- }
278
- let r;
279
- if (n.isSwipe && E.value.length > 1) {
280
- const g = [...E.value].sort((b, k) => b - k);
281
- if (n.direction === "up") {
282
- const b = g.find((k) => k > l.value + 1);
283
- r = b !== void 0 ? E.value.indexOf(b) : A.value;
284
- } else {
285
- const b = [...g].reverse().find((k) => k < l.value - 1);
286
- r = b !== void 0 ? E.value.indexOf(b) : A.value;
287
- }
288
- } else
289
- r = A.value;
290
- B.value = r;
291
- const c = Y.value[r];
292
- if (!c) {
293
- T();
294
- return;
295
- }
296
- let p;
297
- if (typeof c == "number" ? p = P(c, {
298
- max: d.value
299
- }) : p = G(c, d.value), p === 0) {
300
- T();
301
- return;
302
- }
303
- l.value = p, u.value = 0, v("snapped", Y.value.indexOf(c));
304
- }, Ie = (e) => {
305
- if (!y.value) return;
306
- const n = y.value.scrollTop === 0, r = e > 0, c = E.value.length === 1, p = 0.5 > Math.abs(l.value - V.value);
307
- if (c) {
308
- if (!t.expandOnContentDrag) {
309
- f.value = !1;
310
- return;
311
- }
312
- u.value === 0 && n && r && (f.value = !0), u.value === 0 && n && !r && (f.value = !1);
313
- } else {
314
- if (!t.expandOnContentDrag) {
315
- f.value = !1;
316
- return;
317
- }
318
- f.value = !0, p && (r && n && (f.value = !0), !r && n && (f.value = !1), n || (f.value = !1));
319
- }
320
- }, $e = (e) => {
321
- if (!i.value) return;
322
- const n = window.getComputedStyle(i.value), r = parseFloat(n.height);
323
- let c = 0;
324
- n.transform && n.transform !== "none" && (c = new DOMMatrix(n.transform).m42), l.value = r, u.value = c, H.value = !0, N.value = e.clientY, J.value = l.value, X.value = u.value, I.value = e.clientY, Z.value = !0, R.start(e.clientY), e.target.setPointerCapture(e.pointerId);
325
- }, Fe = (e) => {
326
- if (!H.value) return;
327
- if (!t.expandOnContentDrag) {
328
- f.value = !1;
329
- return;
330
- }
331
- const n = e.clientY - N.value, r = e.clientY, c = e.clientY - I.value;
332
- if (Z.value) {
333
- const g = e.clientY - N.value;
334
- if (Math.abs(g) > 3)
335
- Z.value = !1, Ie(g);
336
- else {
337
- I.value = r;
338
- return;
339
- }
340
- }
341
- u.value === 0 && f.value && t.expandOnContentDrag && (l.value = J.value - n), l.value <= D.value && (l.value = D.value, f.value && t.expandOnContentDrag && (u.value = X.value + n), u.value = P(u.value, { min: 0, max: D.value }), t.canSwipeClose ? u.value = P(u.value, { min: 0 }) : u.value = P(
342
- ve(u.value, -M.value, 0, 0.5),
343
- { min: 0 }
344
- )), l.value > V.value && (l.value = V.value), l.value = P(l.value, { max: d.value }), E.value.length === 1 || l.value === V.value && (f.value = !1), me(c), R.update(e.clientY), I.value = r;
345
- }, be = (e) => {
346
- if (H.value = !1, Z.value = !0, e.target.releasePointerCapture(e.pointerId), t.canSwipeClose) {
347
- let b = l.value / 2;
348
- if (t.swipeCloseThreshold && typeof t.swipeCloseThreshold == "number" && (b = t.swipeCloseThreshold), t.swipeCloseThreshold && typeof t.swipeCloseThreshold == "string" && t.swipeCloseThreshold.includes("%") && (b = l.value * (Number(t.swipeCloseThreshold.replace("%", "")) / 100)), u.value > b) {
349
- u.value = l.value, T();
350
- return;
351
- }
352
- } else
353
- u.value = 0;
354
- if (u.value === l.value) {
355
- u.value = 0, T();
356
- return;
357
- }
358
- const n = R.end(), r = f.value;
359
- if (r && n.isSwipe && n.direction === "down" && t.canSwipeClose && l.value <= D.value + 10) {
360
- u.value = l.value, T();
361
- return;
362
- }
363
- let c;
364
- if (r && n.isSwipe && E.value.length > 1) {
365
- const b = [...E.value].sort((k, W) => k - W);
366
- if (n.direction === "up") {
367
- const k = b.find((W) => W > l.value + 1);
368
- c = k !== void 0 ? E.value.indexOf(k) : A.value;
369
- } else {
370
- const k = [...b].reverse().find((W) => W < l.value - 1);
371
- c = k !== void 0 ? E.value.indexOf(k) : A.value;
372
- }
373
- } else
374
- c = A.value;
375
- B.value = c;
376
- const p = Y.value[c];
377
- if (!p) {
378
- T();
379
- return;
380
- }
381
- let g;
382
- if (typeof p == "number" ? g = P(p, {
383
- max: d.value
384
- }) : g = G(p, d.value), g === 0) {
385
- T();
386
- return;
387
- }
388
- l.value = g, u.value = 0, v("snapped", Y.value.indexOf(p));
389
- }, Ae = () => {
390
- t.blocking || (K.value = !0, U.value = !0);
391
- }, Re = () => {
392
- t.blocking || (K.value = !1, U.value = !1);
393
- }, Le = () => {
394
- if (!y.value) return;
395
- const e = y.value.scrollTop === 0;
396
- f.value = e;
397
- }, Ve = lt((e) => he(e), {
398
- minQuietPeriodMs: t.duration,
399
- reducer: (e, n) => n
476
+ B.value = l;
477
+ const s = k.value[l];
478
+ s && (H.value = ae(s, h.value), n("snapped", k.value.indexOf(s)));
479
+ }, o = Ue((l) => ee(l), {
480
+ minQuietPeriodMs: e.duration,
481
+ reducer: (l, s) => s
400
482
  });
401
- ee(Y, (e, n) => {
402
- if (S.value === !1 || !e || !n) return;
403
- const r = e[B.value], c = n[B.value];
404
- !r || typeof r == "string" || !c || typeof c == "string" || (l.value = P(r, {
405
- max: d.value
406
- }));
407
- }), ee(d, () => {
408
- Ve.call(B.value);
409
- }), ee(ne, (e) => {
410
- v("instinctHeight", e);
411
- }), je(() => {
412
- ce(), q.deactivate();
483
+ te(k, (l, s) => {
484
+ if (i.value === !1 || !l || !s) return;
485
+ const m = l[B.value], M = s[B.value];
486
+ !m || typeof m == "string" || !M || typeof M == "string" || (H.value = I(m, { max: h.value }));
487
+ }), te(h, () => {
488
+ o.call(B.value);
489
+ }), te(R, (l) => {
490
+ n("instinctHeight", l);
491
+ }), Be(() => {
492
+ $.cleanup();
413
493
  });
414
- const Ne = (e) => {
415
- const n = e;
416
- n.style.transition = `transform ${t.duration}ms ease, height ${t.duration}ms ease`, n.style.transform = `translateY(${l.value}px)`;
494
+ const c = (l) => {
495
+ const s = l;
496
+ s.style.transition = `transform ${e.duration}ms ease, height ${e.duration}ms ease`, s.style.transform = `translateY(${H.value}px)`;
417
497
  };
418
- return o({ open: le, close: T, snapToPoint: he }), (e, n) => (Q(), ue(Ge, null, [
419
- (Q(), Ce(xe, {
420
- to: a.teleportTo,
421
- defer: a.teleportDefer
498
+ return a({ open: Q, close: W, snapToPoint: ee }), (l, s) => (X(), ie(Ie, null, [
499
+ (X(), pe(he, {
500
+ to: t.teleportTo,
501
+ defer: t.teleportDefer
422
502
  }, [
423
- ye(Pe, { name: "vsbs-backdrop" }, {
424
- default: Te(() => [
425
- se(S) && a.blocking ? (Q(), ue("div", {
503
+ ge(me, { name: "vsbs-backdrop" }, {
504
+ default: Se(() => [
505
+ E(i) && t.blocking ? (X(), ie("div", {
426
506
  key: 0,
427
507
  ref_key: "backdrop",
428
- ref: w,
508
+ ref: d,
429
509
  "data-vsbs-backdrop": "",
430
- onClick: n[0] || (n[0] = (r) => He())
431
- }, null, 512)) : ke("", !0)
510
+ onClick: s[0] || (s[0] = (m) => Z())
511
+ }, null, 512)) : be("", !0)
432
512
  ]),
433
513
  _: 1
434
514
  })
435
515
  ], 8, ["to", "defer"])),
436
- (Q(), Ce(xe, {
437
- to: a.teleportTo,
438
- defer: a.teleportDefer
516
+ (X(), pe(he, {
517
+ to: t.teleportTo,
518
+ defer: t.teleportDefer
439
519
  }, [
440
- ye(Pe, {
520
+ ge(me, {
441
521
  name: "vsbs-sheet",
442
- onLeave: Ne
522
+ onLeave: c
443
523
  }, {
444
- default: Te(() => [
445
- se(S) ? (Q(), ue("div", {
524
+ default: Se(() => [
525
+ E(i) ? (X(), ie("div", {
446
526
  key: 0,
447
527
  ref_key: "sheet",
448
- ref: i,
449
- style: Ke({
450
- transform: `translateY(${u.value}px)`,
451
- height: `${l.value}px`,
452
- transition: H.value ? "none" : `transform ${a.duration}ms ease, height ${a.duration}ms ease`
528
+ ref: r,
529
+ style: Ye({
530
+ transform: `translateY(${T.value}px)`,
531
+ height: `${H.value}px`,
532
+ transition: E(re) ? "none" : `transform ${t.duration}ms ease, height ${t.duration}ms ease`
453
533
  }),
454
- "data-vsbs-shadow": !a.blocking,
455
- "data-vsbs-sheet-show": se(S),
534
+ "data-vsbs-shadow": !t.blocking,
535
+ "data-vsbs-sheet-show": E(i),
456
536
  "aria-modal": "true",
457
537
  "data-vsbs-sheet": "",
458
538
  tabindex: "-1",
459
- onTouchstart: Ae,
460
- onTouchend: Re
539
+ onTouchstart: s[2] || (s[2] = //@ts-ignore
540
+ (...m) => E(A).touchStartHandler && E(A).touchStartHandler(...m)),
541
+ onTouchend: s[3] || (s[3] = //@ts-ignore
542
+ (...m) => E(A).touchEndHandler && E(A).touchEndHandler(...m))
461
543
  }, [
462
- j("div", {
544
+ j("div", ce({
463
545
  ref_key: "sheetHeader",
464
- ref: x,
465
- "data-vsbs-header": "",
466
- onPointerdown: ge,
467
- onPointermove: we,
468
- onPointerup: _,
469
- onPointercancel: _,
470
- onTouchmove: de,
471
- class: re(a.headerClass),
546
+ ref: p,
547
+ "data-vsbs-header": ""
548
+ }, E(J), {
549
+ class: t.headerClass,
472
550
  style: { "touch-action": "none" }
473
- }, [
474
- ie(e.$slots, "header", {}, void 0, !0)
475
- ], 34),
551
+ }), [
552
+ ve(l.$slots, "header", {}, void 0, !0)
553
+ ], 16),
476
554
  j("div", {
477
555
  ref_key: "sheetScroll",
478
- ref: y,
556
+ ref: b,
479
557
  "data-vsbs-scroll": "",
480
- onScrollend: Le
558
+ onScrollend: s[1] || (s[1] = //@ts-ignore
559
+ (...m) => E(V) && E(V)(...m))
481
560
  }, [
482
- j("div", {
483
- "data-vsbs-content-wrapper": "",
484
- onPointerdown: $e,
485
- onPointermove: Fe,
486
- onPointerup: be,
487
- onPointercancel: be,
488
- onTouchmove: fe,
489
- style: { touchAction: "pan-y" }
490
- }, [
561
+ j("div", ce({ "data-vsbs-content-wrapper": "" }, E(se), { style: { touchAction: "pan-y" } }), [
491
562
  j("div", {
492
563
  ref_key: "sheetContent",
493
- ref: h,
564
+ ref: v,
494
565
  "data-vsbs-content": "",
495
- class: re(a.contentClass)
566
+ class: Me(t.contentClass)
496
567
  }, [
497
- ie(e.$slots, "default", {}, void 0, !0)
568
+ ve(l.$slots, "default", {}, void 0, !0)
498
569
  ], 2)
499
- ], 32)
570
+ ], 16)
500
571
  ], 544),
501
- j("div", {
572
+ j("div", ce({
502
573
  ref_key: "sheetFooter",
503
- ref: C,
504
- "data-vsbs-footer": "",
505
- onPointerdown: ge,
506
- onPointermove: we,
507
- onPointerup: _,
508
- onPointercancel: _,
509
- onTouchmove: de,
510
- class: re(a.footerClass),
574
+ ref: f,
575
+ "data-vsbs-footer": ""
576
+ }, E(J), {
577
+ class: t.footerClass,
511
578
  style: { "touch-action": "none" }
512
- }, [
513
- ie(e.$slots, "footer", {}, void 0, !0)
514
- ], 34)
515
- ], 44, st)) : ke("", !0)
579
+ }), [
580
+ ve(l.$slots, "footer", {}, void 0, !0)
581
+ ], 16)
582
+ ], 44, Ze)) : be("", !0)
516
583
  ]),
517
584
  _: 3
518
585
  })
519
586
  ], 8, ["to", "defer"]))
520
587
  ], 64));
521
588
  }
522
- }), it = (a, o) => {
523
- const s = a.__vccOpts || a;
524
- for (const [t, v] of o)
525
- s[t] = v;
526
- return s;
527
- }, ft = /* @__PURE__ */ it(rt, [["__scopeId", "data-v-1827f711"]]);
589
+ }), tt = (t, a) => {
590
+ const u = t.__vccOpts || t;
591
+ for (const [e, n] of a)
592
+ u[e] = n;
593
+ return u;
594
+ }, lt = /* @__PURE__ */ tt(et, [["__scopeId", "data-v-6b92b612"]]);
528
595
  export {
529
- ft as default
596
+ lt as default
530
597
  };
package/dist/style.css CHANGED
@@ -1 +1 @@
1
- [data-vsbs-backdrop][data-v-1827f711]{background-color:var(--vsbs-backdrop-bg, rgba(0, 0, 0, .5));inset:0;pointer-events:auto;position:fixed;-webkit-user-select:none;user-select:none;will-change:opacity;--vsbs-duration: var(--v6f938e48)}[data-vsbs-shadow=true][data-v-1827f711]: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-1827f711]{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-width:var(--vsbs-max-width, 640px);pointer-events:all;position:fixed;right:0;width:100%;will-change:height,transform}[data-vsbs-sheet-show=true][data-v-1827f711]{visibility:visible}[data-vsbs-header][data-v-1827f711]{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-1827f711]: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-1827f711]:empty{box-shadow:none;padding:14px var(--vsbs-padding-x, 16px) 10px}[data-vsbs-footer][data-v-1827f711]{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-1827f711]:empty{display:none}[data-vsbs-scroll][data-v-1827f711]{flex-grow:1;overflow-y:auto;overscroll-behavior:none}[data-vsbs-content-wrapper][data-v-1827f711]{height:100%}[data-vsbs-content][data-v-1827f711]{display:grid;padding:8px var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}.vsbs-backdrop-enter-active[data-v-1827f711],.vsbs-backdrop-leave-active[data-v-1827f711]{transition:opacity var(--vsbs-duration) ease}.vsbs-backdrop-enter-from[data-v-1827f711],.vsbs-backdrop-leave-to[data-v-1827f711]{opacity:0}
1
+ [data-vsbs-backdrop][data-v-6b92b612]{background-color:var(--vsbs-backdrop-bg, rgba(0, 0, 0, .5));inset:0;pointer-events:auto;position:fixed;-webkit-user-select:none;user-select:none;will-change:opacity;--vsbs-duration: var(--d0a9abc2)}[data-vsbs-shadow=true][data-v-6b92b612]: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-6b92b612]{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-width:var(--vsbs-max-width, 640px);pointer-events:all;position:fixed;right:0;width:100%;will-change:height,transform}[data-vsbs-sheet-show=true][data-v-6b92b612]{visibility:visible}[data-vsbs-header][data-v-6b92b612]{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-6b92b612]: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-6b92b612]:empty{box-shadow:none;padding:14px var(--vsbs-padding-x, 16px) 10px}[data-vsbs-footer][data-v-6b92b612]{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-6b92b612]:empty{display:none}[data-vsbs-scroll][data-v-6b92b612]{flex-grow:1;overflow-y:auto;overscroll-behavior:none}[data-vsbs-content-wrapper][data-v-6b92b612]{height:100%}[data-vsbs-content][data-v-6b92b612]{display:grid;padding:8px var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}.vsbs-backdrop-enter-active[data-v-6b92b612],.vsbs-backdrop-leave-active[data-v-6b92b612]{transition:opacity var(--vsbs-duration) ease}.vsbs-backdrop-enter-from[data-v-6b92b612],.vsbs-backdrop-leave-to[data-v-6b92b612]{opacity:0}
@@ -0,0 +1,5 @@
1
+ /**
2
+ * Calculate the swipe close threshold based on prop value and current height.
3
+ * Supports absolute pixel values, percentage strings, or defaults to half height.
4
+ */
5
+ export declare function calculateSwipeThreshold(threshold: string | number | undefined, height: number): number;
@@ -0,0 +1,5 @@
1
+ export declare const SNAP_POINT_TOLERANCE_PX = 10;
2
+ export declare const MOVEMENT_THRESHOLD_PX = 3;
3
+ export declare const RUBBERBAND_ELASTICITY = 0.25;
4
+ export declare const RUBBERBAND_ELASTICITY_STRONG = 0.5;
5
+ export declare const DEFAULT_VELOCITY_THRESHOLD = 0.5;
@@ -0,0 +1,4 @@
1
+ /**
2
+ * Resolve a snap point value (number or percentage string) to pixels
3
+ */
4
+ export declare function resolveSnapPoint(snapValue: number | `${number}%`, windowHeight: number): number;
package/package.json CHANGED
@@ -16,8 +16,6 @@
16
16
  "overlay",
17
17
  "popup",
18
18
  "vue",
19
- "vueuse/motion",
20
- "vueuse/gesture",
21
19
  "sheet",
22
20
  "typescript"
23
21
  ],
@@ -32,7 +30,7 @@
32
30
  "url": "https://github.com/megaarmos/vue-spring-bottom-sheet/issues"
33
31
  },
34
32
  "private": false,
35
- "version": "3.0.0-next.3",
33
+ "version": "3.0.0-next.5",
36
34
  "type": "module",
37
35
  "exports": {
38
36
  ".": {