@douxcode/vue-spring-bottom-sheet 2.2.2 → 2.3.0
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 +142 -136
- package/dist/style.css +1 -1
- package/dist/types.d.ts +3 -0
- package/package.json +12 -12
package/dist/index.mjs
CHANGED
|
@@ -1,53 +1,53 @@
|
|
|
1
|
-
import { ref as P, computed as
|
|
2
|
-
import { useMotionValue as
|
|
3
|
-
import { useVModel as
|
|
4
|
-
import { useFocusTrap as
|
|
1
|
+
import { ref as P, computed as _, defineComponent as Me, watch as q, onMounted as Oe, toRefs as Be, nextTick as N, onUnmounted as Ie, createBlock as Z, openBlock as ee, Teleport as Ee, createElementVNode as te, createVNode as $, unref as m, withCtx as E, createCommentVNode as pe, normalizeStyle as _e, normalizeClass as ae, renderSlot as ne } from "vue";
|
|
2
|
+
import { useMotionValue as he, animate as B, AnimatePresence as ge, Motion as A } from "motion-v";
|
|
3
|
+
import { useVModel as De, useWindowSize as He, useElementBounding as Q, useScrollLock as me } from "@vueuse/core";
|
|
4
|
+
import { useFocusTrap as Ve } from "@vueuse/integrations/useFocusTrap";
|
|
5
5
|
function G(n, a) {
|
|
6
6
|
const o = parseFloat(n);
|
|
7
7
|
return a * o / 100;
|
|
8
8
|
}
|
|
9
|
-
function
|
|
10
|
-
const t = P(0),
|
|
11
|
-
const p =
|
|
9
|
+
function Re(n, a, o) {
|
|
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
|
+
const p = s.value.reduce(
|
|
12
12
|
(g, x) => Math.abs(x - a.value) < Math.abs(g - a.value) ? x : g
|
|
13
13
|
);
|
|
14
|
-
return
|
|
14
|
+
return s.value.indexOf(p);
|
|
15
15
|
});
|
|
16
16
|
return {
|
|
17
17
|
currentSnapPointIndex: t,
|
|
18
|
-
flattenedSnapPoints:
|
|
18
|
+
flattenedSnapPoints: s,
|
|
19
19
|
minSnapPoint: y,
|
|
20
20
|
maxSnapPoint: r,
|
|
21
21
|
closestSnapPointIndex: h
|
|
22
22
|
};
|
|
23
23
|
}
|
|
24
|
-
function
|
|
25
|
-
let t = (
|
|
24
|
+
function Fe(n, a, o) {
|
|
25
|
+
let t = (s) => n(s, ...a);
|
|
26
26
|
return o === void 0 ? t : Object.assign(t, { lazy: o, lazyArgs: a });
|
|
27
27
|
}
|
|
28
|
-
function
|
|
28
|
+
function $e(n, a, o) {
|
|
29
29
|
let t = n.length - a.length;
|
|
30
30
|
if (t === 0) return n(...a);
|
|
31
|
-
if (t === 1) return
|
|
31
|
+
if (t === 1) return Fe(n, a, o);
|
|
32
32
|
throw new Error("Wrong number of arguments");
|
|
33
33
|
}
|
|
34
|
-
function
|
|
34
|
+
function Ae(n, { triggerAt: a = "end", minQuietPeriodMs: o, maxBurstDurationMs: t, minGapMs: s, reducer: y = We }) {
|
|
35
35
|
let r, h, p, g, x = () => {
|
|
36
|
-
let
|
|
37
|
-
|
|
36
|
+
let i = p;
|
|
37
|
+
i !== void 0 && (p = void 0, n(i), s !== void 0 && (h = setTimeout(D, s)));
|
|
38
38
|
}, D = () => {
|
|
39
39
|
clearTimeout(h), h = void 0, r === void 0 && x();
|
|
40
40
|
}, H = () => {
|
|
41
41
|
clearTimeout(r), r = void 0, g = void 0, h === void 0 && x();
|
|
42
42
|
};
|
|
43
|
-
return { call: (...
|
|
43
|
+
return { call: (...i) => {
|
|
44
44
|
let c = r === void 0 && h === void 0;
|
|
45
|
-
if ((a !== "start" || c) && (p = y(p, ...
|
|
46
|
-
if (o !== void 0 || t !== void 0 ||
|
|
45
|
+
if ((a !== "start" || c) && (p = y(p, ...i)), !(r === void 0 && !c)) {
|
|
46
|
+
if (o !== void 0 || t !== void 0 || s === void 0) {
|
|
47
47
|
clearTimeout(r);
|
|
48
|
-
let
|
|
49
|
-
g ?? (g =
|
|
50
|
-
let W = t === void 0 ? o ?? 0 : Math.min(o ?? t, t - (
|
|
48
|
+
let k = Date.now();
|
|
49
|
+
g ?? (g = k);
|
|
50
|
+
let W = t === void 0 ? o ?? 0 : Math.min(o ?? t, t - (k - g));
|
|
51
51
|
r = setTimeout(H, W);
|
|
52
52
|
}
|
|
53
53
|
a !== "end" && c && x();
|
|
@@ -60,24 +60,24 @@ function $e(n, { triggerAt: a = "end", minQuietPeriodMs: o, maxBurstDurationMs:
|
|
|
60
60
|
return r === void 0 && h === void 0;
|
|
61
61
|
} };
|
|
62
62
|
}
|
|
63
|
-
var
|
|
63
|
+
var We = () => "";
|
|
64
64
|
function b(...n) {
|
|
65
|
-
return
|
|
65
|
+
return $e(ze, n);
|
|
66
66
|
}
|
|
67
|
-
var
|
|
67
|
+
var ze = (n, { min: a, max: o }) => a !== void 0 && n < a ? a : o !== void 0 && n > o ? o : n;
|
|
68
68
|
function Le(n, a, o) {
|
|
69
69
|
return Math.max(a, Math.min(n, o));
|
|
70
70
|
}
|
|
71
|
-
function
|
|
71
|
+
function je(n, a) {
|
|
72
72
|
return Math.pow(n, a * 5);
|
|
73
73
|
}
|
|
74
|
-
function
|
|
75
|
-
return a === 0 || Math.abs(a) === 1 / 0 ?
|
|
74
|
+
function be(n, a, o) {
|
|
75
|
+
return a === 0 || Math.abs(a) === 1 / 0 ? je(n, o) : n * a * o / (a + o * n);
|
|
76
76
|
}
|
|
77
|
-
function
|
|
78
|
-
return t === 0 ? Le(n, a, o) : n < a ? -
|
|
77
|
+
function oe(n, a, o, t = 0.15) {
|
|
78
|
+
return t === 0 ? Le(n, a, o) : n < a ? -be(a - n, o - a, t) + a : n > o ? +be(n - o, o - a, t) + o : n;
|
|
79
79
|
}
|
|
80
|
-
const
|
|
80
|
+
const qe = { "data-vsbs-container": "" }, Ne = /* @__PURE__ */ Me({
|
|
81
81
|
__name: "BottomSheet",
|
|
82
82
|
props: {
|
|
83
83
|
duration: { default: 250 },
|
|
@@ -89,62 +89,65 @@ const je = { "data-vsbs-container": "" }, qe = /* @__PURE__ */ xe({
|
|
|
89
89
|
expandOnContentDrag: { type: Boolean, default: !0 },
|
|
90
90
|
modelValue: { type: Boolean },
|
|
91
91
|
teleportTo: { default: "body" },
|
|
92
|
-
teleportDefer: { type: Boolean, default: !1 }
|
|
92
|
+
teleportDefer: { type: Boolean, default: !1 },
|
|
93
|
+
headerClass: {},
|
|
94
|
+
contentClass: {},
|
|
95
|
+
footerClass: {}
|
|
93
96
|
},
|
|
94
97
|
emits: ["opened", "closed", "ready", "dragging-up", "dragging-down", "snapped", "instinctHeight", "update:modelValue"],
|
|
95
98
|
setup(n, { expose: a, emit: o }) {
|
|
96
|
-
const t = n,
|
|
99
|
+
const t = n, s = o, y = De(t, "modelValue", s, {
|
|
97
100
|
passive: !0
|
|
98
101
|
});
|
|
99
102
|
q(y, (e) => {
|
|
100
103
|
e && J();
|
|
101
|
-
}),
|
|
104
|
+
}), Oe(() => {
|
|
102
105
|
y.value && J();
|
|
103
106
|
});
|
|
104
|
-
const r = P(), h = P(null), p = P(null), g = P(null), x = P(null), D = P(null), H = P(null),
|
|
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 } = He(), { height: k } = Q(r), { height: W } = Q(h), { height: le } = Q(D), { height: ue } = Q(p), K = _({
|
|
105
108
|
get() {
|
|
106
109
|
return b(
|
|
107
|
-
Math.ceil(
|
|
110
|
+
Math.ceil(le.value + W.value + ue.value),
|
|
108
111
|
{
|
|
109
112
|
max: c.value
|
|
110
113
|
}
|
|
111
114
|
);
|
|
112
115
|
},
|
|
113
116
|
set(e) {
|
|
114
|
-
[W.value,
|
|
117
|
+
[W.value, le.value, ue.value] = e;
|
|
115
118
|
}
|
|
116
|
-
}), l = P(0), v = P(0),
|
|
119
|
+
}), l = P(0), v = P(0), C = he(0), S = he(0), { snapPoints: ye } = Be(t), d = _(() => ye.value ?? [K.value]), {
|
|
117
120
|
flattenedSnapPoints: U,
|
|
118
|
-
currentSnapPointIndex:
|
|
121
|
+
currentSnapPointIndex: I,
|
|
119
122
|
closestSnapPointIndex: V,
|
|
120
123
|
minSnapPoint: O,
|
|
121
124
|
maxSnapPoint: R
|
|
122
|
-
} =
|
|
125
|
+
} = Re(d, l, c);
|
|
123
126
|
let M;
|
|
124
|
-
const
|
|
127
|
+
const z = me(document.body), L = me(document.documentElement), Y = Ve([r, H], {
|
|
125
128
|
immediate: !1,
|
|
126
129
|
fallbackFocus: () => r.value || document.body
|
|
127
130
|
});
|
|
128
|
-
function
|
|
129
|
-
|
|
131
|
+
function se(e) {
|
|
132
|
+
i.value = !0, re(e);
|
|
130
133
|
}
|
|
131
|
-
function
|
|
132
|
-
|
|
134
|
+
function re(e) {
|
|
135
|
+
i.value && e.preventDefault();
|
|
133
136
|
}
|
|
134
|
-
const
|
|
137
|
+
const ie = (e) => {
|
|
135
138
|
e.key === "Escape" && j();
|
|
136
|
-
},
|
|
139
|
+
}, Se = () => {
|
|
137
140
|
t.canBackdropClose && j();
|
|
138
141
|
}, J = async () => {
|
|
139
|
-
y.value = !0, t.blocking && (
|
|
142
|
+
y.value = !0, t.blocking && (z.value = !0, L.value = !0), await N();
|
|
140
143
|
const e = r.value.$el;
|
|
141
|
-
|
|
142
|
-
const u = e.querySelector("[data-vsbs-content]"), f = e.querySelector("[data-vsbs-header]"),
|
|
144
|
+
k.value = e.getBoundingClientRect().height;
|
|
145
|
+
const u = e.querySelector("[data-vsbs-content]"), f = e.querySelector("[data-vsbs-header]"), w = e.querySelector("[data-vsbs-footer]");
|
|
143
146
|
if (K.value = [
|
|
144
147
|
f.getBoundingClientRect().height,
|
|
145
148
|
u.getBoundingClientRect().height,
|
|
146
|
-
|
|
147
|
-
], await N(),
|
|
149
|
+
w.getBoundingClientRect().height
|
|
150
|
+
], await N(), I.value = U.value.findIndex(
|
|
148
151
|
(T) => T === O.value
|
|
149
152
|
), t.initialSnapPoint) {
|
|
150
153
|
const T = t.initialSnapPoint;
|
|
@@ -160,142 +163,142 @@ const je = { "data-vsbs-container": "" }, qe = /* @__PURE__ */ xe({
|
|
|
160
163
|
l.value = b(O.value, {
|
|
161
164
|
max: c.value
|
|
162
165
|
});
|
|
163
|
-
v.value = l.value,
|
|
166
|
+
v.value = l.value, C.set(l.value), S.set(l.value), M = B(C, l.value, {
|
|
164
167
|
duration: t.duration / 1e3,
|
|
165
168
|
ease: "easeInOut"
|
|
166
|
-
}), M =
|
|
169
|
+
}), M = B(S, 0, {
|
|
167
170
|
duration: t.duration / 1e3,
|
|
168
171
|
ease: "easeInOut"
|
|
169
|
-
}), window.addEventListener("keydown",
|
|
170
|
-
|
|
172
|
+
}), window.addEventListener("keydown", ie), t.blocking && setTimeout(() => {
|
|
173
|
+
C.get() < 1 && (s("opened"), Y.activate());
|
|
171
174
|
}, t.duration);
|
|
172
175
|
}, j = () => {
|
|
173
|
-
y.value = !1, t.blocking && (
|
|
174
|
-
|
|
176
|
+
y.value = !1, t.blocking && (z.value = !1, L.value = !1), window.removeEventListener("keydown", ie), t.blocking && Y.deactivate(), setTimeout(() => {
|
|
177
|
+
s("closed");
|
|
175
178
|
}, t.duration);
|
|
176
|
-
},
|
|
179
|
+
}, ve = (e) => {
|
|
177
180
|
if (!d.value) return;
|
|
178
181
|
if (e < 0 || e >= d.value.length) {
|
|
179
182
|
console.warn("Index out of bounds");
|
|
180
183
|
return;
|
|
181
184
|
}
|
|
182
|
-
|
|
185
|
+
I.value = e;
|
|
183
186
|
let u;
|
|
184
187
|
typeof d.value[e] == "number" ? u = b(d.value[e], {
|
|
185
188
|
max: c.value
|
|
186
|
-
}) : u = G(d.value[e], c.value), l.value = u, M =
|
|
189
|
+
}) : u = G(d.value[e], c.value), l.value = u, M = B(C, l.value, {
|
|
187
190
|
duration: t.duration / 1e3,
|
|
188
191
|
ease: "easeInOut",
|
|
189
|
-
onComplete: () =>
|
|
192
|
+
onComplete: () => s("snapped", d.value.indexOf(d.value[e]))
|
|
190
193
|
});
|
|
191
194
|
};
|
|
192
|
-
function
|
|
193
|
-
e > 0 ?
|
|
195
|
+
function de(e) {
|
|
196
|
+
e > 0 ? s("dragging-down") : e < 0 && s("dragging-up");
|
|
194
197
|
}
|
|
195
|
-
const
|
|
196
|
-
l.value =
|
|
197
|
-
},
|
|
198
|
+
const ce = () => {
|
|
199
|
+
l.value = k.value, v.value = S.get(), C.jump(l.value), S.jump(v.value);
|
|
200
|
+
}, fe = async (e, u) => {
|
|
198
201
|
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(
|
|
199
|
-
t.canSwipeClose ? b(v.value, { min: 0 }) : b(
|
|
202
|
+
t.canSwipeClose ? b(v.value, { min: 0 }) : b(oe(v.value, -k.value, 0, 0.5), {
|
|
200
203
|
min: 0
|
|
201
204
|
})
|
|
202
|
-
)),
|
|
203
|
-
b(
|
|
205
|
+
)), C.set(
|
|
206
|
+
b(oe(l.value, 0, R.value, 0.25), {
|
|
204
207
|
min: 0,
|
|
205
208
|
max: c.value
|
|
206
209
|
})
|
|
207
|
-
),
|
|
210
|
+
), de(u.delta.y));
|
|
208
211
|
}, X = () => {
|
|
209
212
|
v.value = t.canSwipeClose ? [0, l.value].reduce(
|
|
210
213
|
(u, f) => Math.abs(f - v.value) < Math.abs(u - v.value) ? f : u
|
|
211
|
-
) : 0, M =
|
|
214
|
+
) : 0, M = B(S, v.value, {
|
|
212
215
|
duration: t.duration / 1e3,
|
|
213
216
|
ease: "easeInOut"
|
|
214
|
-
}), v.value === l.value && (v.value = 0, j()),
|
|
217
|
+
}), v.value === l.value && (v.value = 0, j()), I.value = V.value;
|
|
215
218
|
let e;
|
|
216
219
|
typeof d.value[V.value] == "number" ? e = b(d.value[V.value], {
|
|
217
220
|
max: c.value
|
|
218
221
|
}) : e = G(
|
|
219
222
|
d.value[V.value],
|
|
220
223
|
c.value
|
|
221
|
-
), l.value = e, M =
|
|
224
|
+
), l.value = e, M = B(C, l.value, {
|
|
222
225
|
duration: t.duration / 1e3,
|
|
223
226
|
ease: "easeInOut",
|
|
224
|
-
onComplete: () =>
|
|
227
|
+
onComplete: () => s(
|
|
225
228
|
"snapped",
|
|
226
229
|
d.value.indexOf(d.value[V.value])
|
|
227
230
|
)
|
|
228
|
-
}), M =
|
|
231
|
+
}), M = B(S, 0, {
|
|
229
232
|
duration: t.duration / 1e3,
|
|
230
233
|
ease: "easeInOut"
|
|
231
234
|
});
|
|
232
|
-
},
|
|
233
|
-
if (l.value =
|
|
234
|
-
const f = g.value.scrollTop === 0,
|
|
235
|
+
}, Pe = (e, u) => {
|
|
236
|
+
if (l.value = k.value, v.value = S.get(), M.stop(), !g.value) return;
|
|
237
|
+
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);
|
|
235
238
|
if (T) {
|
|
236
239
|
if (!t.expandOnContentDrag) {
|
|
237
|
-
|
|
240
|
+
i.value = !1;
|
|
238
241
|
return;
|
|
239
242
|
}
|
|
240
|
-
S.get() === 0 && f &&
|
|
243
|
+
S.get() === 0 && f && w && (i.value = !0), S.get() === 0 && f && !w && (i.value = !1);
|
|
241
244
|
} else {
|
|
242
245
|
if (!t.expandOnContentDrag) {
|
|
243
|
-
|
|
246
|
+
i.value = !1;
|
|
244
247
|
return;
|
|
245
248
|
}
|
|
246
|
-
|
|
249
|
+
i.value = !0, F && (w && f && (i.value = !0), !w && f && (i.value = !1), f || (i.value = !1));
|
|
247
250
|
}
|
|
248
|
-
},
|
|
251
|
+
}, Ce = async (e, u) => {
|
|
249
252
|
if (await N(), !t.expandOnContentDrag) {
|
|
250
|
-
|
|
253
|
+
i.value = !1;
|
|
251
254
|
return;
|
|
252
255
|
}
|
|
253
256
|
if (!r.value) return;
|
|
254
|
-
v.value === 0 &&
|
|
255
|
-
t.canSwipeClose ? b(v.value, { min: 0 }) : b(
|
|
257
|
+
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(
|
|
258
|
+
t.canSwipeClose ? b(v.value, { min: 0 }) : b(oe(v.value, -k.value, 0, 0.5), {
|
|
256
259
|
min: 0
|
|
257
260
|
})
|
|
258
|
-
)), l.value > R.value && (l.value = R.value), l.value = b(l.value, { max: c.value }), U.value.length === 1 || l.value === R.value && (
|
|
261
|
+
)), 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), de(u.delta.y);
|
|
259
262
|
}, ke = () => {
|
|
260
|
-
t.blocking || (
|
|
263
|
+
t.blocking || (z.value = !0, L.value = !0);
|
|
261
264
|
}, we = () => {
|
|
262
|
-
t.blocking || (
|
|
263
|
-
},
|
|
265
|
+
t.blocking || (z.value = !1, L.value = !1);
|
|
266
|
+
}, Te = () => {
|
|
264
267
|
if (!g.value) return;
|
|
265
268
|
const e = g.value.scrollTop === 0;
|
|
266
|
-
|
|
267
|
-
},
|
|
269
|
+
i.value = e;
|
|
270
|
+
}, xe = Ae((e) => ve(e), {
|
|
268
271
|
minQuietPeriodMs: t.duration,
|
|
269
272
|
reducer: (e, u) => u
|
|
270
273
|
});
|
|
271
274
|
return q(d, (e, u) => {
|
|
272
275
|
if (y.value === !1 || !e || !u) return;
|
|
273
|
-
const f = e[
|
|
274
|
-
typeof f != "string" && typeof
|
|
276
|
+
const f = e[I.value], w = u[I.value];
|
|
277
|
+
typeof f != "string" && typeof w != "string" && (l.value = b(f, {
|
|
275
278
|
max: c.value
|
|
276
|
-
}), f !==
|
|
279
|
+
}), f !== w && (M = B(C, l.value, {
|
|
277
280
|
duration: t.duration / 1e3,
|
|
278
281
|
ease: "easeInOut"
|
|
279
282
|
})));
|
|
280
283
|
}), q(c, () => {
|
|
281
|
-
|
|
284
|
+
xe.call(I.value);
|
|
282
285
|
}), q(K, (e) => {
|
|
283
|
-
|
|
284
|
-
}),
|
|
286
|
+
s("instinctHeight", e);
|
|
287
|
+
}), Ie(() => {
|
|
285
288
|
Y.deactivate();
|
|
286
|
-
}), a({ open: J, close: j, snapToPoint:
|
|
289
|
+
}), a({ open: J, close: j, snapToPoint: ve }), (e, u) => (ee(), Z(Ee, {
|
|
287
290
|
to: e.teleportTo,
|
|
288
291
|
defer: e.teleportDefer
|
|
289
292
|
}, [
|
|
290
|
-
te("div",
|
|
291
|
-
$(m(
|
|
292
|
-
default:
|
|
293
|
+
te("div", qe, [
|
|
294
|
+
$(m(ge), null, {
|
|
295
|
+
default: E(() => [
|
|
293
296
|
m(y) && e.blocking ? (ee(), Z(m(A), {
|
|
294
297
|
key: 0,
|
|
295
298
|
ref_key: "backdrop",
|
|
296
299
|
ref: H,
|
|
297
300
|
"data-vsbs-backdrop": "",
|
|
298
|
-
onClick: u[0] || (u[0] = (f) =>
|
|
301
|
+
onClick: u[0] || (u[0] = (f) => Se()),
|
|
299
302
|
transition: {
|
|
300
303
|
ease: "easeInOut",
|
|
301
304
|
duration: e.duration / 1e3
|
|
@@ -303,19 +306,19 @@ const je = { "data-vsbs-container": "" }, qe = /* @__PURE__ */ xe({
|
|
|
303
306
|
initial: { opacity: 0 },
|
|
304
307
|
animate: { opacity: 1 },
|
|
305
308
|
exit: { opacity: 0 }
|
|
306
|
-
}, null, 8, ["transition"])) :
|
|
309
|
+
}, null, 8, ["transition"])) : pe("", !0)
|
|
307
310
|
]),
|
|
308
311
|
_: 1
|
|
309
312
|
}),
|
|
310
|
-
$(m(
|
|
311
|
-
default:
|
|
313
|
+
$(m(ge), null, {
|
|
314
|
+
default: E(() => [
|
|
312
315
|
m(y) ? (ee(), Z(m(A), {
|
|
313
316
|
key: 0,
|
|
314
317
|
ref_key: "sheet",
|
|
315
318
|
ref: r,
|
|
316
|
-
exit: { y: "100%", height: m(
|
|
319
|
+
exit: { y: "100%", height: m(k) },
|
|
317
320
|
initial: { y: "100%" },
|
|
318
|
-
style:
|
|
321
|
+
style: _e({ y: m(S), height: m(C) }),
|
|
319
322
|
"data-vsbs-shadow": !e.blocking,
|
|
320
323
|
"data-vsbs-sheet-show": m(y),
|
|
321
324
|
"aria-modal": "true",
|
|
@@ -324,44 +327,46 @@ const je = { "data-vsbs-container": "" }, qe = /* @__PURE__ */ xe({
|
|
|
324
327
|
onTouchstart: ke,
|
|
325
328
|
onTouchend: we
|
|
326
329
|
}, {
|
|
327
|
-
default:
|
|
330
|
+
default: E(() => [
|
|
328
331
|
$(m(A), {
|
|
329
332
|
ref_key: "sheetHeader",
|
|
330
333
|
ref: h,
|
|
331
334
|
"data-vsbs-header": "",
|
|
332
|
-
onPanStart:
|
|
333
|
-
onPan:
|
|
335
|
+
onPanStart: ce,
|
|
336
|
+
onPan: fe,
|
|
334
337
|
onPanEnd: X,
|
|
335
|
-
onTouchmove:
|
|
338
|
+
onTouchmove: se,
|
|
339
|
+
class: ae(e.headerClass)
|
|
336
340
|
}, {
|
|
337
|
-
default:
|
|
338
|
-
|
|
341
|
+
default: E(() => [
|
|
342
|
+
ne(e.$slots, "header", {}, void 0, !0)
|
|
339
343
|
]),
|
|
340
344
|
_: 3
|
|
341
|
-
},
|
|
345
|
+
}, 8, ["class"]),
|
|
342
346
|
te("div", {
|
|
343
347
|
ref_key: "sheetScroll",
|
|
344
348
|
ref: g,
|
|
345
349
|
"data-vsbs-scroll": "",
|
|
346
|
-
onScrollend:
|
|
350
|
+
onScrollend: Te
|
|
347
351
|
}, [
|
|
348
352
|
$(m(A), {
|
|
349
353
|
ref_key: "sheetContentWrapper",
|
|
350
354
|
ref: x,
|
|
351
355
|
"data-vsbs-content-wrapper": "",
|
|
352
|
-
onPanStart:
|
|
353
|
-
onPan:
|
|
356
|
+
onPanStart: Pe,
|
|
357
|
+
onPan: Ce,
|
|
354
358
|
onPanEnd: X,
|
|
355
|
-
onTouchmove:
|
|
359
|
+
onTouchmove: re
|
|
356
360
|
}, {
|
|
357
|
-
default:
|
|
361
|
+
default: E(() => [
|
|
358
362
|
te("div", {
|
|
359
363
|
ref_key: "sheetContent",
|
|
360
364
|
ref: D,
|
|
361
|
-
"data-vsbs-content": ""
|
|
365
|
+
"data-vsbs-content": "",
|
|
366
|
+
class: ae(e.contentClass)
|
|
362
367
|
}, [
|
|
363
|
-
|
|
364
|
-
],
|
|
368
|
+
ne(e.$slots, "default", {}, void 0, !0)
|
|
369
|
+
], 2)
|
|
365
370
|
]),
|
|
366
371
|
_: 3
|
|
367
372
|
}, 512)
|
|
@@ -370,31 +375,32 @@ const je = { "data-vsbs-container": "" }, qe = /* @__PURE__ */ xe({
|
|
|
370
375
|
ref_key: "sheetFooter",
|
|
371
376
|
ref: p,
|
|
372
377
|
"data-vsbs-footer": "",
|
|
373
|
-
onPanStart:
|
|
374
|
-
onPan:
|
|
378
|
+
onPanStart: ce,
|
|
379
|
+
onPan: fe,
|
|
375
380
|
onPanEnd: X,
|
|
376
|
-
onTouchmove:
|
|
381
|
+
onTouchmove: se,
|
|
382
|
+
class: ae(e.footerClass)
|
|
377
383
|
}, {
|
|
378
|
-
default:
|
|
379
|
-
|
|
384
|
+
default: E(() => [
|
|
385
|
+
ne(e.$slots, "footer", {}, void 0, !0)
|
|
380
386
|
]),
|
|
381
387
|
_: 3
|
|
382
|
-
},
|
|
388
|
+
}, 8, ["class"])
|
|
383
389
|
]),
|
|
384
390
|
_: 3
|
|
385
|
-
}, 8, ["exit", "style", "data-vsbs-shadow", "data-vsbs-sheet-show"])) :
|
|
391
|
+
}, 8, ["exit", "style", "data-vsbs-shadow", "data-vsbs-sheet-show"])) : pe("", !0)
|
|
386
392
|
]),
|
|
387
393
|
_: 3
|
|
388
394
|
})
|
|
389
395
|
])
|
|
390
396
|
], 8, ["to", "defer"]));
|
|
391
397
|
}
|
|
392
|
-
}),
|
|
398
|
+
}), Qe = (n, a) => {
|
|
393
399
|
const o = n.__vccOpts || n;
|
|
394
|
-
for (const [t,
|
|
395
|
-
o[t] =
|
|
400
|
+
for (const [t, s] of a)
|
|
401
|
+
o[t] = s;
|
|
396
402
|
return o;
|
|
397
|
-
},
|
|
403
|
+
}, Je = /* @__PURE__ */ Qe(Ne, [["__scopeId", "data-v-e9faa2c0"]]);
|
|
398
404
|
export {
|
|
399
|
-
|
|
405
|
+
Je as default
|
|
400
406
|
};
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
[data-vsbs-container][data-v-
|
|
1
|
+
[data-vsbs-container][data-v-e9faa2c0]{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-e9faa2c0]{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-e9faa2c0]: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-e9faa2c0]{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-e9faa2c0]{visibility:visible}[data-vsbs-header][data-v-e9faa2c0]{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-e9faa2c0]: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-e9faa2c0]:empty{box-shadow:none;padding:14px var(--vsbs-padding-x, 16px) 10px}[data-vsbs-footer][data-v-e9faa2c0]{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-e9faa2c0]:empty{display:none}[data-vsbs-scroll][data-v-e9faa2c0]{flex-grow:1;overflow-y:auto;overscroll-behavior:none}[data-vsbs-content-wrapper][data-v-e9faa2c0]{height:100%}[data-vsbs-content][data-v-e9faa2c0]{display:grid;padding:8px var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}
|
package/dist/types.d.ts
CHANGED
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.
|
|
35
|
+
"version": "2.3.0",
|
|
36
36
|
"type": "module",
|
|
37
37
|
"exports": {
|
|
38
38
|
".": {
|
|
@@ -59,27 +59,27 @@
|
|
|
59
59
|
"vue": ">=3.3"
|
|
60
60
|
},
|
|
61
61
|
"dependencies": {
|
|
62
|
-
"@vueuse/core": "^13.
|
|
63
|
-
"@vueuse/integrations": "^13.
|
|
62
|
+
"@vueuse/core": "^13.2.0",
|
|
63
|
+
"@vueuse/integrations": "^13.2.0",
|
|
64
64
|
"focus-trap": "^7.6.4",
|
|
65
|
-
"motion-v": "^1.0.
|
|
66
|
-
"remeda": "^2.21.
|
|
67
|
-
"vue": "^3.5.
|
|
65
|
+
"motion-v": "^1.0.2",
|
|
66
|
+
"remeda": "^2.21.6",
|
|
67
|
+
"vue": "^3.5.14"
|
|
68
68
|
},
|
|
69
69
|
"devDependencies": {
|
|
70
|
-
"@types/node": "^22.
|
|
71
|
-
"@vitejs/plugin-vue": "^5.2.
|
|
70
|
+
"@types/node": "^22.15.18",
|
|
71
|
+
"@vitejs/plugin-vue": "^5.2.4",
|
|
72
72
|
"@vue/eslint-config-prettier": "^10.2.0",
|
|
73
73
|
"@vue/eslint-config-typescript": "^14.5.0",
|
|
74
74
|
"@vue/tsconfig": "^0.7.0",
|
|
75
75
|
"ajv": "^8.17.1",
|
|
76
|
-
"eslint": "^9.
|
|
77
|
-
"eslint-plugin-vue": "^10.
|
|
76
|
+
"eslint": "^9.27.0",
|
|
77
|
+
"eslint-plugin-vue": "^10.1.0",
|
|
78
78
|
"prettier": "^3.5.3",
|
|
79
79
|
"typescript": "~5.6.3",
|
|
80
|
-
"vite": "^6.
|
|
80
|
+
"vite": "^6.3.5",
|
|
81
81
|
"vite-plugin-dts": "4.5.3",
|
|
82
|
-
"vue-tsc": "^2.2.
|
|
82
|
+
"vue-tsc": "^2.2.10"
|
|
83
83
|
},
|
|
84
84
|
"files": [
|
|
85
85
|
"dist",
|