@douxcode/vue-spring-bottom-sheet 3.0.0-next.1 → 3.0.0-next.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 +237 -223
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -1,112 +1,112 @@
|
|
|
1
|
-
import { ref as
|
|
2
|
-
import { useVModel as
|
|
3
|
-
import { useFocusTrap as
|
|
4
|
-
function
|
|
1
|
+
import { ref as g, computed as I, defineComponent as Ve, useCssVars as Ne, watch as Z, onMounted as We, toRefs as qe, nextTick as Se, onUnmounted as ze, createElementBlock as oe, openBlock as q, Fragment as Qe, createBlock as Ce, Teleport as ye, createVNode as Pe, Transition as Te, withCtx as xe, createCommentVNode as ke, unref as ue, normalizeStyle as je, createElementVNode as z, normalizeClass as se, renderSlot as re } from "vue";
|
|
2
|
+
import { useVModel as Ge, useWindowSize as Ke, useElementBounding as ee, useScrollLock as Ye } from "@vueuse/core";
|
|
3
|
+
import { useFocusTrap as Ue } from "@vueuse/integrations/useFocusTrap";
|
|
4
|
+
function Q(o, l) {
|
|
5
5
|
const s = parseFloat(o);
|
|
6
6
|
return l * s / 100;
|
|
7
7
|
}
|
|
8
|
-
function
|
|
9
|
-
const t =
|
|
10
|
-
const
|
|
8
|
+
function Je(o, l, s) {
|
|
9
|
+
const t = g(0), v = I(() => o.value.map((C) => typeof C == "string" ? Q(C, s.value) : C)), S = I(() => Math.min(...v.value)), i = I(() => Math.max(...v.value)), y = I(() => {
|
|
10
|
+
const C = v.value.reduce(
|
|
11
11
|
(P, w) => Math.abs(w - l.value) < Math.abs(P - l.value) ? w : P
|
|
12
12
|
);
|
|
13
|
-
return v.value.indexOf(
|
|
13
|
+
return v.value.indexOf(C);
|
|
14
14
|
});
|
|
15
15
|
return {
|
|
16
16
|
currentSnapPointIndex: t,
|
|
17
17
|
flattenedSnapPoints: v,
|
|
18
|
-
minSnapPoint:
|
|
18
|
+
minSnapPoint: S,
|
|
19
19
|
maxSnapPoint: i,
|
|
20
20
|
closestSnapPointIndex: y
|
|
21
21
|
};
|
|
22
22
|
}
|
|
23
|
-
function
|
|
24
|
-
const { velocityThreshold: l = 0.5 } = o, s =
|
|
23
|
+
function Xe(o = {}) {
|
|
24
|
+
const { velocityThreshold: l = 0.5 } = o, s = g(0), t = g(0), v = g(0), S = g(0), i = g([]);
|
|
25
25
|
return {
|
|
26
26
|
start: (w) => {
|
|
27
|
-
const
|
|
28
|
-
s.value = w, t.value =
|
|
27
|
+
const b = performance.now();
|
|
28
|
+
s.value = w, t.value = b, v.value = w, S.value = b, i.value = [{ y: w, time: b }];
|
|
29
29
|
},
|
|
30
30
|
update: (w) => {
|
|
31
|
-
const
|
|
32
|
-
v.value = w,
|
|
33
|
-
const M =
|
|
31
|
+
const b = performance.now();
|
|
32
|
+
v.value = w, S.value = b, i.value.push({ y: w, time: b });
|
|
33
|
+
const M = b - 100;
|
|
34
34
|
i.value = i.value.filter((d) => d.time > M).slice(-5);
|
|
35
35
|
},
|
|
36
36
|
end: () => {
|
|
37
37
|
const w = i.value;
|
|
38
|
-
let
|
|
38
|
+
let b = 0;
|
|
39
39
|
if (w.length >= 2) {
|
|
40
|
-
const h = w[0],
|
|
41
|
-
|
|
40
|
+
const h = w[0], E = w[w.length - 1], F = E.y - h.y, R = E.time - h.time;
|
|
41
|
+
R > 0 && (b = F / R);
|
|
42
42
|
}
|
|
43
|
-
const M = Math.abs(
|
|
43
|
+
const M = Math.abs(b) >= l;
|
|
44
44
|
let d = "none";
|
|
45
|
-
return M && (d =
|
|
45
|
+
return M && (d = b < 0 ? "up" : "down"), i.value = [], {
|
|
46
46
|
direction: d,
|
|
47
|
-
velocity: Math.abs(
|
|
47
|
+
velocity: Math.abs(b),
|
|
48
48
|
isSwipe: M
|
|
49
49
|
};
|
|
50
50
|
}
|
|
51
51
|
};
|
|
52
52
|
}
|
|
53
|
-
function
|
|
53
|
+
function Ze(o, l, s) {
|
|
54
54
|
let t = (v) => o(v, ...l);
|
|
55
55
|
return s === void 0 ? t : Object.assign(t, { lazy: s, lazyArgs: l });
|
|
56
56
|
}
|
|
57
|
-
function
|
|
57
|
+
function et(o, l, s) {
|
|
58
58
|
let t = o.length - l.length;
|
|
59
59
|
if (t === 0) return o(...l);
|
|
60
|
-
if (t === 1) return
|
|
60
|
+
if (t === 1) return Ze(o, l, s);
|
|
61
61
|
throw new Error("Wrong number of arguments");
|
|
62
62
|
}
|
|
63
|
-
function
|
|
64
|
-
let i, y,
|
|
65
|
-
let d =
|
|
66
|
-
d !== void 0 && (
|
|
67
|
-
},
|
|
63
|
+
function tt(o, { triggerAt: l = "end", minQuietPeriodMs: s, maxBurstDurationMs: t, minGapMs: v, reducer: S = at }) {
|
|
64
|
+
let i, y, C, P, w = () => {
|
|
65
|
+
let d = C;
|
|
66
|
+
d !== void 0 && (C = void 0, o(d), v !== void 0 && (y = setTimeout(b, v)));
|
|
67
|
+
}, b = () => {
|
|
68
68
|
clearTimeout(y), y = void 0, i === void 0 && w();
|
|
69
69
|
}, M = () => {
|
|
70
70
|
clearTimeout(i), i = void 0, P = void 0, y === void 0 && w();
|
|
71
71
|
};
|
|
72
72
|
return { call: (...d) => {
|
|
73
73
|
let h = i === void 0 && y === void 0;
|
|
74
|
-
if ((l !== "start" || h) && (
|
|
74
|
+
if ((l !== "start" || h) && (C = S(C, ...d)), !(i === void 0 && !h)) {
|
|
75
75
|
if (s !== void 0 || t !== void 0 || v === void 0) {
|
|
76
76
|
clearTimeout(i);
|
|
77
|
-
let
|
|
78
|
-
P ?? (P =
|
|
79
|
-
let
|
|
80
|
-
i = setTimeout(M,
|
|
77
|
+
let E = Date.now();
|
|
78
|
+
P ?? (P = E);
|
|
79
|
+
let F = t === void 0 ? s ?? 0 : Math.min(s ?? t, t - (E - P));
|
|
80
|
+
i = setTimeout(M, F);
|
|
81
81
|
}
|
|
82
82
|
l !== "end" && h && w();
|
|
83
83
|
}
|
|
84
84
|
}, cancel: () => {
|
|
85
|
-
clearTimeout(i), i = void 0, P = void 0, clearTimeout(y), y = void 0,
|
|
85
|
+
clearTimeout(i), i = void 0, P = void 0, clearTimeout(y), y = void 0, C = void 0;
|
|
86
86
|
}, flush: () => {
|
|
87
|
-
M(),
|
|
87
|
+
M(), b();
|
|
88
88
|
}, get isIdle() {
|
|
89
89
|
return i === void 0 && y === void 0;
|
|
90
90
|
} };
|
|
91
91
|
}
|
|
92
|
-
var
|
|
92
|
+
var at = () => "";
|
|
93
93
|
function T(...o) {
|
|
94
|
-
return
|
|
94
|
+
return et(nt, o);
|
|
95
95
|
}
|
|
96
|
-
var
|
|
97
|
-
function
|
|
96
|
+
var nt = (o, { min: l, max: s }) => l !== void 0 && o < l ? l : s !== void 0 && o > s ? s : o;
|
|
97
|
+
function lt(o, l, s) {
|
|
98
98
|
return Math.max(l, Math.min(o, s));
|
|
99
99
|
}
|
|
100
|
-
function
|
|
100
|
+
function ot(o, l) {
|
|
101
101
|
return Math.pow(o, l * 5);
|
|
102
102
|
}
|
|
103
|
-
function
|
|
104
|
-
return l === 0 || Math.abs(l) === 1 / 0 ?
|
|
103
|
+
function Me(o, l, s) {
|
|
104
|
+
return l === 0 || Math.abs(l) === 1 / 0 ? ot(o, s) : o * l * s / (l + s * o);
|
|
105
105
|
}
|
|
106
|
-
function
|
|
107
|
-
return t === 0 ?
|
|
106
|
+
function ie(o, l, s, t = 0.15) {
|
|
107
|
+
return t === 0 ? lt(o, l, s) : o < l ? -Me(l - o, s - l, t) + l : o > s ? +Me(o - s, s - l, t) + s : o;
|
|
108
108
|
}
|
|
109
|
-
const
|
|
109
|
+
const ut = ["data-vsbs-shadow", "data-vsbs-sheet-show"], st = /* @__PURE__ */ Ve({
|
|
110
110
|
__name: "BottomSheet",
|
|
111
111
|
props: {
|
|
112
112
|
duration: { default: 250 },
|
|
@@ -126,62 +126,76 @@ const at = ["data-vsbs-shadow", "data-vsbs-sheet-show"], lt = /* @__PURE__ */ Le
|
|
|
126
126
|
},
|
|
127
127
|
emits: ["opened", "opening-started", "closed", "closing-started", "ready", "dragging-up", "dragging-down", "snapped", "instinctHeight", "update:modelValue"],
|
|
128
128
|
setup(o, { expose: l, emit: s }) {
|
|
129
|
-
|
|
130
|
-
"
|
|
129
|
+
Ne((e) => ({
|
|
130
|
+
"0a9ba53d": Ee.value
|
|
131
131
|
}));
|
|
132
|
-
const t = o, v = s,
|
|
132
|
+
const t = o, v = s, S = Ge(t, "modelValue", v, {
|
|
133
133
|
passive: !0
|
|
134
134
|
});
|
|
135
|
-
|
|
135
|
+
Z(S, (e) => {
|
|
136
136
|
e && ne();
|
|
137
|
-
}),
|
|
138
|
-
|
|
137
|
+
}), We(() => {
|
|
138
|
+
S.value && ne();
|
|
139
139
|
});
|
|
140
|
-
const i =
|
|
140
|
+
const i = g(null), y = g(null), C = g(null), P = g(null), w = g(null), b = g(null), M = g(null), d = g(t.expandOnContentDrag), { height: h } = Ke(), { height: E } = ee(i), { height: F } = ee(y), { height: R } = ee(b), { height: ve } = ee(C), te = I({
|
|
141
141
|
get() {
|
|
142
142
|
return T(
|
|
143
|
-
Math.ceil(
|
|
143
|
+
Math.ceil(R.value + F.value + ve.value),
|
|
144
144
|
{
|
|
145
145
|
max: h.value
|
|
146
146
|
}
|
|
147
147
|
);
|
|
148
148
|
},
|
|
149
149
|
set(e) {
|
|
150
|
-
[
|
|
150
|
+
[F.value, R.value, ve.value] = e;
|
|
151
151
|
}
|
|
152
|
-
}),
|
|
153
|
-
flattenedSnapPoints:
|
|
154
|
-
currentSnapPointIndex:
|
|
155
|
-
closestSnapPointIndex:
|
|
152
|
+
}), n = g(0), u = g(0), Ee = I(() => t.duration + "ms"), { snapPoints: Oe } = qe(t), p = I(() => Oe.value ?? [te.value]), {
|
|
153
|
+
flattenedSnapPoints: k,
|
|
154
|
+
currentSnapPointIndex: D,
|
|
155
|
+
closestSnapPointIndex: $,
|
|
156
156
|
minSnapPoint: O,
|
|
157
|
-
maxSnapPoint:
|
|
158
|
-
} =
|
|
157
|
+
maxSnapPoint: L
|
|
158
|
+
} = Je(p, n, h), j = Ye(document.body), G = Ye(document.documentElement), B = g(!1), _ = g(0), K = g(0), U = g(0), H = g(0), J = g(!0), A = Xe({ velocityThreshold: 0.5 }), V = Ue([i, M], {
|
|
159
159
|
immediate: !1,
|
|
160
160
|
fallbackFocus: () => i.value || document.body
|
|
161
161
|
});
|
|
162
|
-
|
|
163
|
-
|
|
162
|
+
let N = null;
|
|
163
|
+
const De = () => {
|
|
164
|
+
i.value && (N = new MutationObserver((e) => {
|
|
165
|
+
var a;
|
|
166
|
+
for (const r of e)
|
|
167
|
+
r.type === "attributes" && r.attributeName === "aria-expanded" && (r.target.getAttribute("aria-expanded") === "true" ? V.pause() : (a = i.value) != null && a.querySelector('[aria-expanded="true"]') || V.unpause());
|
|
168
|
+
}), N.observe(i.value, {
|
|
169
|
+
attributes: !0,
|
|
170
|
+
attributeFilter: ["aria-expanded"],
|
|
171
|
+
subtree: !0
|
|
172
|
+
}));
|
|
173
|
+
}, ce = () => {
|
|
174
|
+
N && (N.disconnect(), N = null);
|
|
175
|
+
};
|
|
176
|
+
function de(e) {
|
|
177
|
+
d.value = !0, fe(e);
|
|
164
178
|
}
|
|
165
|
-
function
|
|
179
|
+
function fe(e) {
|
|
166
180
|
d.value && e.preventDefault();
|
|
167
181
|
}
|
|
168
|
-
const
|
|
182
|
+
const pe = (e) => {
|
|
169
183
|
e.key === "Escape" && Y();
|
|
170
|
-
},
|
|
184
|
+
}, Be = () => {
|
|
171
185
|
t.canBackdropClose && Y();
|
|
172
186
|
};
|
|
173
|
-
let
|
|
187
|
+
let ae = !1;
|
|
174
188
|
const ne = async () => {
|
|
175
|
-
if (
|
|
176
|
-
|
|
189
|
+
if (ae) return;
|
|
190
|
+
S.value = !0, ae = !0, v("opening-started"), t.blocking && (j.value = !0, G.value = !0), await Se();
|
|
177
191
|
const e = i.value;
|
|
178
|
-
|
|
179
|
-
const
|
|
180
|
-
if (
|
|
192
|
+
E.value = e.getBoundingClientRect().height;
|
|
193
|
+
const a = e.querySelector("[data-vsbs-content]"), r = e.querySelector("[data-vsbs-header]"), c = e.querySelector("[data-vsbs-footer]");
|
|
194
|
+
if (te.value = [
|
|
181
195
|
r.getBoundingClientRect().height,
|
|
182
|
-
|
|
196
|
+
a.getBoundingClientRect().height,
|
|
183
197
|
c.getBoundingClientRect().height
|
|
184
|
-
], await
|
|
198
|
+
], await Se(), D.value = k.value.findIndex(
|
|
185
199
|
(f) => f === O.value
|
|
186
200
|
), t.initialSnapPoint) {
|
|
187
201
|
const f = t.initialSnapPoint;
|
|
@@ -189,321 +203,321 @@ const at = ["data-vsbs-shadow", "data-vsbs-sheet-show"], lt = /* @__PURE__ */ Le
|
|
|
189
203
|
console.warn("Index out of bounds");
|
|
190
204
|
return;
|
|
191
205
|
}
|
|
192
|
-
let
|
|
193
|
-
typeof p.value[f] == "number" ?
|
|
206
|
+
let m;
|
|
207
|
+
typeof p.value[f] == "number" ? m = T(p.value[f], {
|
|
194
208
|
max: h.value
|
|
195
|
-
}) :
|
|
209
|
+
}) : m = Q(p.value[f], h.value), n.value = m;
|
|
196
210
|
} else
|
|
197
|
-
|
|
211
|
+
n.value = T(O.value, {
|
|
198
212
|
max: h.value
|
|
199
213
|
});
|
|
200
|
-
u.value =
|
|
214
|
+
u.value = n.value, requestAnimationFrame(() => {
|
|
201
215
|
u.value = 0, t.blocking && setTimeout(() => {
|
|
202
|
-
|
|
216
|
+
S.value && (v("opened"), V.activate(), De());
|
|
203
217
|
}, t.duration);
|
|
204
|
-
}), window.addEventListener("keydown",
|
|
218
|
+
}), window.addEventListener("keydown", pe), ae = !1;
|
|
205
219
|
};
|
|
206
|
-
let
|
|
220
|
+
let le = !1;
|
|
207
221
|
const Y = () => {
|
|
208
|
-
|
|
209
|
-
v("closed"),
|
|
222
|
+
le || (S.value = !1, le = !0, v("closing-started"), t.blocking && (j.value = !1, G.value = !1), window.removeEventListener("keydown", pe), ce(), t.blocking && V.deactivate(), u.value = n.value, setTimeout(() => {
|
|
223
|
+
v("closed"), le = !1;
|
|
210
224
|
}, t.duration));
|
|
211
|
-
},
|
|
225
|
+
}, he = (e) => {
|
|
212
226
|
if (!p.value) return;
|
|
213
227
|
if (e < 0 || e >= p.value.length) {
|
|
214
228
|
console.warn("Index out of bounds");
|
|
215
229
|
return;
|
|
216
230
|
}
|
|
217
|
-
|
|
218
|
-
let
|
|
219
|
-
typeof p.value[e] == "number" ?
|
|
231
|
+
D.value = e;
|
|
232
|
+
let a;
|
|
233
|
+
typeof p.value[e] == "number" ? a = T(p.value[e], {
|
|
220
234
|
max: h.value
|
|
221
|
-
}) :
|
|
235
|
+
}) : a = Q(p.value[e], h.value), n.value = a, v("snapped", p.value.indexOf(p.value[e]));
|
|
222
236
|
};
|
|
223
|
-
function
|
|
237
|
+
function me(e) {
|
|
224
238
|
e > 0 ? v("dragging-down") : e < 0 && v("dragging-up");
|
|
225
239
|
}
|
|
226
|
-
const
|
|
240
|
+
const ge = (e) => {
|
|
227
241
|
if (!i.value) return;
|
|
228
|
-
const
|
|
242
|
+
const a = window.getComputedStyle(i.value), r = parseFloat(a.height);
|
|
229
243
|
let c = 0;
|
|
230
|
-
|
|
231
|
-
},
|
|
232
|
-
if (!
|
|
233
|
-
const
|
|
234
|
-
u.value <= 0 && (
|
|
235
|
-
|
|
244
|
+
a.transform && a.transform !== "none" && (c = new DOMMatrix(a.transform).m42), n.value = r, u.value = c, B.value = !0, _.value = e.clientY, K.value = n.value, U.value = u.value, H.value = e.clientY, A.start(e.clientY), e.target.setPointerCapture(e.pointerId);
|
|
245
|
+
}, we = (e) => {
|
|
246
|
+
if (!B.value) return;
|
|
247
|
+
const a = e.clientY - _.value, r = e.clientY;
|
|
248
|
+
u.value <= 0 && (n.value = K.value - a), n.value <= O.value && (n.value = O.value, u.value = U.value + a, t.canSwipeClose ? u.value = T(u.value, { min: 0 }) : u.value = T(
|
|
249
|
+
ie(u.value, -E.value, 0, 0.5),
|
|
236
250
|
{ min: 0 }
|
|
237
|
-
)),
|
|
251
|
+
)), n.value = T(ie(n.value, 0, L.value, 0.25), {
|
|
238
252
|
min: 0,
|
|
239
253
|
max: h.value
|
|
240
|
-
}),
|
|
241
|
-
},
|
|
242
|
-
if (
|
|
243
|
-
let f =
|
|
244
|
-
if (t.swipeCloseThreshold && typeof t.swipeCloseThreshold == "number" && (f = t.swipeCloseThreshold), t.swipeCloseThreshold && typeof t.swipeCloseThreshold == "string" && t.swipeCloseThreshold.includes("%") && (f =
|
|
245
|
-
u.value =
|
|
254
|
+
}), me(e.clientY - H.value), A.update(e.clientY), H.value = r;
|
|
255
|
+
}, X = (e) => {
|
|
256
|
+
if (B.value = !1, e.target.releasePointerCapture(e.pointerId), t.canSwipeClose) {
|
|
257
|
+
let f = n.value / 2;
|
|
258
|
+
if (t.swipeCloseThreshold && typeof t.swipeCloseThreshold == "number" && (f = t.swipeCloseThreshold), t.swipeCloseThreshold && typeof t.swipeCloseThreshold == "string" && t.swipeCloseThreshold.includes("%") && (f = n.value * (Number(t.swipeCloseThreshold.replace("%", "")) / 100)), u.value > f) {
|
|
259
|
+
u.value = n.value, Y();
|
|
246
260
|
return;
|
|
247
261
|
}
|
|
248
262
|
} else
|
|
249
263
|
u.value = 0;
|
|
250
|
-
if (u.value ===
|
|
264
|
+
if (u.value === n.value) {
|
|
251
265
|
u.value = 0, Y();
|
|
252
266
|
return;
|
|
253
267
|
}
|
|
254
|
-
const
|
|
255
|
-
if (
|
|
256
|
-
u.value =
|
|
268
|
+
const a = A.end();
|
|
269
|
+
if (a.isSwipe && a.direction === "down" && t.canSwipeClose && n.value <= O.value + 10) {
|
|
270
|
+
u.value = n.value, Y();
|
|
257
271
|
return;
|
|
258
272
|
}
|
|
259
273
|
let r;
|
|
260
|
-
if (
|
|
261
|
-
const f = [...
|
|
262
|
-
if (
|
|
263
|
-
const
|
|
264
|
-
r =
|
|
274
|
+
if (a.isSwipe && k.value.length > 1) {
|
|
275
|
+
const f = [...k.value].sort((m, x) => m - x);
|
|
276
|
+
if (a.direction === "up") {
|
|
277
|
+
const m = f.find((x) => x > n.value + 1);
|
|
278
|
+
r = m !== void 0 ? k.value.indexOf(m) : $.value;
|
|
265
279
|
} else {
|
|
266
|
-
const
|
|
267
|
-
r =
|
|
280
|
+
const m = [...f].reverse().find((x) => x < n.value - 1);
|
|
281
|
+
r = m !== void 0 ? k.value.indexOf(m) : $.value;
|
|
268
282
|
}
|
|
269
283
|
} else
|
|
270
|
-
r =
|
|
271
|
-
|
|
284
|
+
r = $.value;
|
|
285
|
+
D.value = r;
|
|
272
286
|
let c;
|
|
273
287
|
if (typeof p.value[r] == "number" ? c = T(p.value[r], {
|
|
274
288
|
max: h.value
|
|
275
|
-
}) : c =
|
|
289
|
+
}) : c = Q(
|
|
276
290
|
p.value[r],
|
|
277
291
|
h.value
|
|
278
292
|
), c === 0) {
|
|
279
293
|
Y();
|
|
280
294
|
return;
|
|
281
295
|
}
|
|
282
|
-
|
|
283
|
-
},
|
|
296
|
+
n.value = c, u.value = 0, v("snapped", p.value.indexOf(p.value[r]));
|
|
297
|
+
}, He = (e) => {
|
|
284
298
|
if (!P.value) return;
|
|
285
|
-
const
|
|
286
|
-
if (
|
|
299
|
+
const a = P.value.scrollTop === 0, r = e > 0, c = k.value.length === 1, f = 0.5 > Math.abs(n.value - L.value);
|
|
300
|
+
if (c) {
|
|
287
301
|
if (!t.expandOnContentDrag) {
|
|
288
302
|
d.value = !1;
|
|
289
303
|
return;
|
|
290
304
|
}
|
|
291
|
-
u.value === 0 &&
|
|
305
|
+
u.value === 0 && a && r && (d.value = !0), u.value === 0 && a && !r && (d.value = !1);
|
|
292
306
|
} else {
|
|
293
307
|
if (!t.expandOnContentDrag) {
|
|
294
308
|
d.value = !1;
|
|
295
309
|
return;
|
|
296
310
|
}
|
|
297
|
-
d.value = !0, f && (r &&
|
|
311
|
+
d.value = !0, f && (r && a && (d.value = !0), !r && a && (d.value = !1), a || (d.value = !1));
|
|
298
312
|
}
|
|
299
|
-
},
|
|
313
|
+
}, Ie = (e) => {
|
|
300
314
|
if (!i.value) return;
|
|
301
|
-
const
|
|
315
|
+
const a = window.getComputedStyle(i.value), r = parseFloat(a.height);
|
|
302
316
|
let c = 0;
|
|
303
|
-
|
|
304
|
-
},
|
|
305
|
-
if (!
|
|
317
|
+
a.transform && a.transform !== "none" && (c = new DOMMatrix(a.transform).m42), n.value = r, u.value = c, B.value = !0, _.value = e.clientY, K.value = n.value, U.value = u.value, H.value = e.clientY, J.value = !0, A.start(e.clientY), e.target.setPointerCapture(e.pointerId);
|
|
318
|
+
}, Fe = (e) => {
|
|
319
|
+
if (!B.value) return;
|
|
306
320
|
if (!t.expandOnContentDrag) {
|
|
307
321
|
d.value = !1;
|
|
308
322
|
return;
|
|
309
323
|
}
|
|
310
|
-
const
|
|
311
|
-
if (
|
|
312
|
-
const
|
|
313
|
-
if (Math.abs(
|
|
314
|
-
|
|
324
|
+
const a = e.clientY - _.value, r = e.clientY, c = e.clientY - H.value;
|
|
325
|
+
if (J.value) {
|
|
326
|
+
const m = e.clientY - _.value;
|
|
327
|
+
if (Math.abs(m) > 3)
|
|
328
|
+
J.value = !1, He(m);
|
|
315
329
|
else {
|
|
316
330
|
H.value = r;
|
|
317
331
|
return;
|
|
318
332
|
}
|
|
319
333
|
}
|
|
320
|
-
u.value === 0 && d.value && t.expandOnContentDrag && (
|
|
321
|
-
|
|
334
|
+
u.value === 0 && d.value && t.expandOnContentDrag && (n.value = K.value - a), n.value <= O.value && (n.value = O.value, d.value && t.expandOnContentDrag && (u.value = U.value + a), u.value = T(u.value, { min: 0, max: O.value }), t.canSwipeClose ? u.value = T(u.value, { min: 0 }) : u.value = T(
|
|
335
|
+
ie(u.value, -E.value, 0, 0.5),
|
|
322
336
|
{ min: 0 }
|
|
323
|
-
)),
|
|
324
|
-
},
|
|
325
|
-
if (
|
|
326
|
-
let
|
|
327
|
-
if (t.swipeCloseThreshold && typeof t.swipeCloseThreshold == "number" && (
|
|
328
|
-
u.value =
|
|
337
|
+
)), n.value > L.value && (n.value = L.value), n.value = T(n.value, { max: h.value }), k.value.length === 1 || n.value === L.value && (d.value = !1), me(c), A.update(e.clientY), H.value = r;
|
|
338
|
+
}, be = (e) => {
|
|
339
|
+
if (B.value = !1, J.value = !0, e.target.releasePointerCapture(e.pointerId), t.canSwipeClose) {
|
|
340
|
+
let m = n.value / 2;
|
|
341
|
+
if (t.swipeCloseThreshold && typeof t.swipeCloseThreshold == "number" && (m = t.swipeCloseThreshold), t.swipeCloseThreshold && typeof t.swipeCloseThreshold == "string" && t.swipeCloseThreshold.includes("%") && (m = n.value * (Number(t.swipeCloseThreshold.replace("%", "")) / 100)), u.value > m) {
|
|
342
|
+
u.value = n.value, Y();
|
|
329
343
|
return;
|
|
330
344
|
}
|
|
331
345
|
} else
|
|
332
346
|
u.value = 0;
|
|
333
|
-
if (u.value ===
|
|
347
|
+
if (u.value === n.value) {
|
|
334
348
|
u.value = 0, Y();
|
|
335
349
|
return;
|
|
336
350
|
}
|
|
337
|
-
const
|
|
338
|
-
if (r &&
|
|
339
|
-
u.value =
|
|
351
|
+
const a = A.end(), r = d.value;
|
|
352
|
+
if (r && a.isSwipe && a.direction === "down" && t.canSwipeClose && n.value <= O.value + 10) {
|
|
353
|
+
u.value = n.value, Y();
|
|
340
354
|
return;
|
|
341
355
|
}
|
|
342
356
|
let c;
|
|
343
|
-
if (r &&
|
|
344
|
-
const
|
|
345
|
-
if (
|
|
346
|
-
const
|
|
347
|
-
c =
|
|
357
|
+
if (r && a.isSwipe && k.value.length > 1) {
|
|
358
|
+
const m = [...k.value].sort((x, W) => x - W);
|
|
359
|
+
if (a.direction === "up") {
|
|
360
|
+
const x = m.find((W) => W > n.value + 1);
|
|
361
|
+
c = x !== void 0 ? k.value.indexOf(x) : $.value;
|
|
348
362
|
} else {
|
|
349
|
-
const
|
|
350
|
-
c =
|
|
363
|
+
const x = [...m].reverse().find((W) => W < n.value - 1);
|
|
364
|
+
c = x !== void 0 ? k.value.indexOf(x) : $.value;
|
|
351
365
|
}
|
|
352
366
|
} else
|
|
353
|
-
c =
|
|
354
|
-
|
|
367
|
+
c = $.value;
|
|
368
|
+
D.value = c;
|
|
355
369
|
let f;
|
|
356
370
|
if (typeof p.value[c] == "number" ? f = T(p.value[c], {
|
|
357
371
|
max: h.value
|
|
358
|
-
}) : f =
|
|
372
|
+
}) : f = Q(
|
|
359
373
|
p.value[c],
|
|
360
374
|
h.value
|
|
361
375
|
), f === 0) {
|
|
362
376
|
Y();
|
|
363
377
|
return;
|
|
364
378
|
}
|
|
365
|
-
|
|
366
|
-
}, He = () => {
|
|
367
|
-
t.blocking || (q.value = !0, Q.value = !0);
|
|
368
|
-
}, Ie = () => {
|
|
369
|
-
t.blocking || (q.value = !1, Q.value = !1);
|
|
379
|
+
n.value = f, u.value = 0, v("snapped", p.value.indexOf(p.value[c]));
|
|
370
380
|
}, $e = () => {
|
|
381
|
+
t.blocking || (j.value = !0, G.value = !0);
|
|
382
|
+
}, Ae = () => {
|
|
383
|
+
t.blocking || (j.value = !1, G.value = !1);
|
|
384
|
+
}, Re = () => {
|
|
371
385
|
if (!P.value) return;
|
|
372
386
|
const e = P.value.scrollTop === 0;
|
|
373
387
|
d.value = e;
|
|
374
|
-
},
|
|
388
|
+
}, Le = tt((e) => he(e), {
|
|
375
389
|
minQuietPeriodMs: t.duration,
|
|
376
|
-
reducer: (e,
|
|
390
|
+
reducer: (e, a) => a
|
|
377
391
|
});
|
|
378
|
-
|
|
379
|
-
if (
|
|
380
|
-
const r = e[
|
|
381
|
-
typeof r != "string" && typeof c != "string" && (
|
|
392
|
+
Z(p, (e, a) => {
|
|
393
|
+
if (S.value === !1 || !e || !a) return;
|
|
394
|
+
const r = e[D.value], c = a[D.value];
|
|
395
|
+
typeof r != "string" && typeof c != "string" && (n.value = T(r, {
|
|
382
396
|
max: h.value
|
|
383
397
|
}));
|
|
384
|
-
}),
|
|
385
|
-
|
|
386
|
-
}),
|
|
398
|
+
}), Z(h, () => {
|
|
399
|
+
Le.call(D.value);
|
|
400
|
+
}), Z(te, (e) => {
|
|
387
401
|
v("instinctHeight", e);
|
|
388
|
-
}),
|
|
389
|
-
|
|
402
|
+
}), ze(() => {
|
|
403
|
+
ce(), V.deactivate();
|
|
390
404
|
});
|
|
391
|
-
const
|
|
392
|
-
const
|
|
393
|
-
|
|
405
|
+
const _e = (e) => {
|
|
406
|
+
const a = e;
|
|
407
|
+
a.style.transition = `transform ${t.duration}ms ease, height ${t.duration}ms ease`, a.style.transform = `translateY(${n.value}px)`;
|
|
394
408
|
};
|
|
395
|
-
return l({ open: ne, close: Y, snapToPoint:
|
|
396
|
-
(
|
|
409
|
+
return l({ open: ne, close: Y, snapToPoint: he }), (e, a) => (q(), oe(Qe, null, [
|
|
410
|
+
(q(), Ce(ye, {
|
|
397
411
|
to: e.teleportTo,
|
|
398
412
|
defer: e.teleportDefer
|
|
399
413
|
}, [
|
|
400
|
-
|
|
401
|
-
default:
|
|
402
|
-
|
|
414
|
+
Pe(Te, { name: "vsbs-backdrop" }, {
|
|
415
|
+
default: xe(() => [
|
|
416
|
+
ue(S) && e.blocking ? (q(), oe("div", {
|
|
403
417
|
key: 0,
|
|
404
418
|
ref_key: "backdrop",
|
|
405
419
|
ref: M,
|
|
406
420
|
"data-vsbs-backdrop": "",
|
|
407
|
-
onClick:
|
|
408
|
-
}, null, 512)) :
|
|
421
|
+
onClick: a[0] || (a[0] = (r) => Be())
|
|
422
|
+
}, null, 512)) : ke("", !0)
|
|
409
423
|
]),
|
|
410
424
|
_: 1
|
|
411
425
|
})
|
|
412
426
|
], 8, ["to", "defer"])),
|
|
413
|
-
(
|
|
427
|
+
(q(), Ce(ye, {
|
|
414
428
|
to: e.teleportTo,
|
|
415
429
|
defer: e.teleportDefer
|
|
416
430
|
}, [
|
|
417
|
-
|
|
431
|
+
Pe(Te, {
|
|
418
432
|
name: "vsbs-sheet",
|
|
419
|
-
onLeave:
|
|
433
|
+
onLeave: _e
|
|
420
434
|
}, {
|
|
421
|
-
default:
|
|
422
|
-
|
|
435
|
+
default: xe(() => [
|
|
436
|
+
ue(S) ? (q(), oe("div", {
|
|
423
437
|
key: 0,
|
|
424
438
|
ref_key: "sheet",
|
|
425
439
|
ref: i,
|
|
426
|
-
style:
|
|
440
|
+
style: je({
|
|
427
441
|
transform: `translateY(${u.value}px)`,
|
|
428
|
-
height: `${
|
|
429
|
-
transition:
|
|
442
|
+
height: `${n.value}px`,
|
|
443
|
+
transition: B.value ? "none" : `transform ${e.duration}ms ease, height ${e.duration}ms ease`
|
|
430
444
|
}),
|
|
431
445
|
"data-vsbs-shadow": !e.blocking,
|
|
432
|
-
"data-vsbs-sheet-show":
|
|
446
|
+
"data-vsbs-sheet-show": ue(S),
|
|
433
447
|
"aria-modal": "true",
|
|
434
448
|
"data-vsbs-sheet": "",
|
|
435
449
|
tabindex: "-1",
|
|
436
|
-
onTouchstart:
|
|
437
|
-
onTouchend:
|
|
450
|
+
onTouchstart: $e,
|
|
451
|
+
onTouchend: Ae
|
|
438
452
|
}, [
|
|
439
453
|
z("div", {
|
|
440
454
|
ref_key: "sheetHeader",
|
|
441
455
|
ref: y,
|
|
442
456
|
"data-vsbs-header": "",
|
|
443
|
-
onPointerdown:
|
|
444
|
-
onPointermove:
|
|
445
|
-
onPointerup:
|
|
446
|
-
onPointercancel:
|
|
447
|
-
onTouchmove:
|
|
448
|
-
class:
|
|
457
|
+
onPointerdown: ge,
|
|
458
|
+
onPointermove: we,
|
|
459
|
+
onPointerup: X,
|
|
460
|
+
onPointercancel: X,
|
|
461
|
+
onTouchmove: de,
|
|
462
|
+
class: se(e.headerClass),
|
|
449
463
|
style: { "touch-action": "none" }
|
|
450
464
|
}, [
|
|
451
|
-
|
|
465
|
+
re(e.$slots, "header", {}, void 0, !0)
|
|
452
466
|
], 34),
|
|
453
467
|
z("div", {
|
|
454
468
|
ref_key: "sheetScroll",
|
|
455
469
|
ref: P,
|
|
456
470
|
"data-vsbs-scroll": "",
|
|
457
|
-
onScrollend:
|
|
471
|
+
onScrollend: Re
|
|
458
472
|
}, [
|
|
459
473
|
z("div", {
|
|
460
474
|
ref_key: "sheetContentWrapper",
|
|
461
475
|
ref: w,
|
|
462
476
|
"data-vsbs-content-wrapper": "",
|
|
463
|
-
onPointerdown:
|
|
464
|
-
onPointermove:
|
|
465
|
-
onPointerup:
|
|
466
|
-
onPointercancel:
|
|
467
|
-
onTouchmove:
|
|
477
|
+
onPointerdown: Ie,
|
|
478
|
+
onPointermove: Fe,
|
|
479
|
+
onPointerup: be,
|
|
480
|
+
onPointercancel: be,
|
|
481
|
+
onTouchmove: fe,
|
|
468
482
|
style: { touchAction: "pan-y" }
|
|
469
483
|
}, [
|
|
470
484
|
z("div", {
|
|
471
485
|
ref_key: "sheetContent",
|
|
472
|
-
ref:
|
|
486
|
+
ref: b,
|
|
473
487
|
"data-vsbs-content": "",
|
|
474
|
-
class:
|
|
488
|
+
class: se(e.contentClass)
|
|
475
489
|
}, [
|
|
476
|
-
|
|
490
|
+
re(e.$slots, "default", {}, void 0, !0)
|
|
477
491
|
], 2)
|
|
478
492
|
], 544)
|
|
479
493
|
], 544),
|
|
480
494
|
z("div", {
|
|
481
495
|
ref_key: "sheetFooter",
|
|
482
|
-
ref:
|
|
496
|
+
ref: C,
|
|
483
497
|
"data-vsbs-footer": "",
|
|
484
|
-
onPointerdown:
|
|
485
|
-
onPointermove:
|
|
486
|
-
onPointerup:
|
|
487
|
-
onPointercancel:
|
|
488
|
-
onTouchmove:
|
|
489
|
-
class:
|
|
498
|
+
onPointerdown: ge,
|
|
499
|
+
onPointermove: we,
|
|
500
|
+
onPointerup: X,
|
|
501
|
+
onPointercancel: X,
|
|
502
|
+
onTouchmove: de,
|
|
503
|
+
class: se(e.footerClass),
|
|
490
504
|
style: { "touch-action": "none" }
|
|
491
505
|
}, [
|
|
492
|
-
|
|
506
|
+
re(e.$slots, "footer", {}, void 0, !0)
|
|
493
507
|
], 34)
|
|
494
|
-
], 44,
|
|
508
|
+
], 44, ut)) : ke("", !0)
|
|
495
509
|
]),
|
|
496
510
|
_: 3
|
|
497
511
|
})
|
|
498
512
|
], 8, ["to", "defer"]))
|
|
499
513
|
], 64));
|
|
500
514
|
}
|
|
501
|
-
}),
|
|
515
|
+
}), rt = (o, l) => {
|
|
502
516
|
const s = o.__vccOpts || o;
|
|
503
517
|
for (const [t, v] of l)
|
|
504
518
|
s[t] = v;
|
|
505
519
|
return s;
|
|
506
|
-
},
|
|
520
|
+
}, dt = /* @__PURE__ */ rt(st, [["__scopeId", "data-v-01259485"]]);
|
|
507
521
|
export {
|
|
508
|
-
|
|
522
|
+
dt as default
|
|
509
523
|
};
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
[data-vsbs-backdrop][data-v-
|
|
1
|
+
[data-vsbs-backdrop][data-v-01259485]{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;--vsbs-duration: var(--0a9ba53d)}[data-vsbs-shadow=true][data-v-01259485]: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-01259485]{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-01259485]{visibility:visible}[data-vsbs-header][data-v-01259485]{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-01259485]: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-01259485]:empty{box-shadow:none;padding:14px var(--vsbs-padding-x, 16px) 10px}[data-vsbs-footer][data-v-01259485]{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-01259485]:empty{display:none}[data-vsbs-scroll][data-v-01259485]{flex-grow:1;overflow-y:auto;overscroll-behavior:none}[data-vsbs-content-wrapper][data-v-01259485]{height:100%}[data-vsbs-content][data-v-01259485]{display:grid;padding:8px var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}.vsbs-backdrop-enter-active[data-v-01259485],.vsbs-backdrop-leave-active[data-v-01259485]{transition:opacity var(--vsbs-duration) ease}.vsbs-backdrop-enter-from[data-v-01259485],.vsbs-backdrop-leave-to[data-v-01259485]{opacity:0}
|