@douxcode/vue-spring-bottom-sheet 2.4.3 → 2.5.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/README.md +16 -15
- package/dist/index.mjs +99 -95
- package/dist/style.css +1 -1
- package/dist/types.d.ts +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -132,20 +132,21 @@ For Nuxt 3, just wrap component in `<ClientOnly>`
|
|
|
132
132
|
|
|
133
133
|
### Prop Definitions
|
|
134
134
|
|
|
135
|
-
| Prop | Type | Default | Description
|
|
136
|
-
| ------------------- | ------------------------- | ---------------- |
|
|
137
|
-
| duration | Number | 250 | Animation duration in milliseconds
|
|
138
|
-
| snapPoints | Array<number\|string> | [instinctHeight] | Custom snapping positions
|
|
139
|
-
| initialSnapPoint | Number | minHeight | Initial snap point index
|
|
140
|
-
| blocking | Boolean | true | Block interactions with underlying content
|
|
141
|
-
| canSwipeClose | Boolean | true | Enable swipe-to-close gesture
|
|
142
|
-
|
|
|
143
|
-
|
|
|
144
|
-
|
|
|
145
|
-
|
|
|
146
|
-
|
|
|
147
|
-
|
|
|
148
|
-
|
|
|
135
|
+
| Prop | Type | Default | Description |
|
|
136
|
+
| ------------------- | ------------------------- | ---------------- | ------------------------------------------------------------------------- |
|
|
137
|
+
| duration | Number | 250 | Animation duration in milliseconds |
|
|
138
|
+
| snapPoints | Array<number\|string> | [instinctHeight] | Custom snapping positions |
|
|
139
|
+
| initialSnapPoint | Number | minHeight | Initial snap point index |
|
|
140
|
+
| blocking | Boolean | true | Block interactions with underlying content |
|
|
141
|
+
| canSwipeClose | Boolean | true | Enable swipe-to-close gesture |
|
|
142
|
+
| swipeCloseThreshold | Number\|String | "50%" | The amount of translation (in px or %) after which the element will close |
|
|
143
|
+
| canBackdropClose | Boolean | true | Allow closing by tapping backdrop |
|
|
144
|
+
| expandOnContentDrag | Boolean | true | Enable expanding by dragging content |
|
|
145
|
+
| teleportTo | String \| RendererElement | body | Teleport to a specific element |
|
|
146
|
+
| teleportDefer | Boolean | false | Defer teleporting until opened (Vue 3.5+ only) |
|
|
147
|
+
| headerClass | String | '' | Set header element class |
|
|
148
|
+
| contentClass | String | '' | Set content element class |
|
|
149
|
+
| footerClass | String | '' | Set footer element class |
|
|
149
150
|
|
|
150
151
|
## Exposed methods
|
|
151
152
|
|
|
@@ -160,7 +161,7 @@ Assuming there is `const bottomSheet = ref()`
|
|
|
160
161
|
## Events
|
|
161
162
|
|
|
162
163
|
| Event | Description | Payload |
|
|
163
|
-
|
|
|
164
|
+
| --------------- | -------------------------------------- | ----------------------- |
|
|
164
165
|
| opened | Emitted when sheet finishes opening | - |
|
|
165
166
|
| opening-started | Emitted when sheet starts opening | - |
|
|
166
167
|
| closed | Emitted when sheet finishes closing | - |
|
package/dist/index.mjs
CHANGED
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
import { ref as
|
|
2
|
-
import { useMotionValue as me, animate as B, AnimatePresence as
|
|
3
|
-
import { useVModel as Ve, useWindowSize as Fe, useElementBounding as Q, useScrollLock as
|
|
1
|
+
import { ref as C, computed as _, defineComponent as Be, watch as q, onMounted as Ie, toRefs as Ee, nextTick as N, onUnmounted as _e, createBlock as te, openBlock as ae, Teleport as De, createElementVNode as ne, createVNode as $, unref as m, withCtx as E, createCommentVNode as ge, normalizeStyle as He, normalizeClass as oe, renderSlot as le } from "vue";
|
|
2
|
+
import { useMotionValue as me, animate as B, AnimatePresence as ye, Motion as A } from "motion-v";
|
|
3
|
+
import { useVModel as Ve, useWindowSize as Fe, useElementBounding as Q, useScrollLock as be } from "@vueuse/core";
|
|
4
4
|
import { useFocusTrap as Re } from "@vueuse/integrations/useFocusTrap";
|
|
5
5
|
function G(n, a) {
|
|
6
6
|
const o = parseFloat(n);
|
|
7
7
|
return a * o / 100;
|
|
8
8
|
}
|
|
9
9
|
function $e(n, a, o) {
|
|
10
|
-
const t =
|
|
11
|
-
const
|
|
12
|
-
(
|
|
10
|
+
const t = C(0), s = _(() => n.value.map((f) => typeof f == "string" ? G(f, o.value) : f)), b = _(() => Math.min(...s.value)), r = _(() => Math.max(...s.value)), p = _(() => {
|
|
11
|
+
const f = s.value.reduce(
|
|
12
|
+
(h, O) => Math.abs(O - a.value) < Math.abs(h - a.value) ? O : h
|
|
13
13
|
);
|
|
14
|
-
return s.value.indexOf(
|
|
14
|
+
return s.value.indexOf(f);
|
|
15
15
|
});
|
|
16
16
|
return {
|
|
17
17
|
currentSnapPointIndex: t,
|
|
18
18
|
flattenedSnapPoints: s,
|
|
19
|
-
minSnapPoint:
|
|
19
|
+
minSnapPoint: b,
|
|
20
20
|
maxSnapPoint: r,
|
|
21
|
-
closestSnapPointIndex:
|
|
21
|
+
closestSnapPointIndex: p
|
|
22
22
|
};
|
|
23
23
|
}
|
|
24
24
|
function Ae(n, a, o) {
|
|
@@ -31,37 +31,37 @@ function We(n, a, o) {
|
|
|
31
31
|
if (t === 1) return Ae(n, a, o);
|
|
32
32
|
throw new Error("Wrong number of arguments");
|
|
33
33
|
}
|
|
34
|
-
function je(n, { triggerAt: a = "end", minQuietPeriodMs: o, maxBurstDurationMs: t, minGapMs: s, reducer:
|
|
35
|
-
let r,
|
|
36
|
-
let i =
|
|
37
|
-
i !== void 0 && (
|
|
34
|
+
function je(n, { triggerAt: a = "end", minQuietPeriodMs: o, maxBurstDurationMs: t, minGapMs: s, reducer: b = ze }) {
|
|
35
|
+
let r, p, f, h, O = () => {
|
|
36
|
+
let i = f;
|
|
37
|
+
i !== void 0 && (f = void 0, n(i), s !== void 0 && (p = setTimeout(D, s)));
|
|
38
38
|
}, D = () => {
|
|
39
|
-
clearTimeout(
|
|
39
|
+
clearTimeout(p), p = void 0, r === void 0 && O();
|
|
40
40
|
}, H = () => {
|
|
41
|
-
clearTimeout(r), r = void 0,
|
|
41
|
+
clearTimeout(r), r = void 0, h = void 0, p === void 0 && O();
|
|
42
42
|
};
|
|
43
43
|
return { call: (...i) => {
|
|
44
|
-
let c = r === void 0 &&
|
|
45
|
-
if ((a !== "start" || c) && (
|
|
44
|
+
let c = r === void 0 && p === void 0;
|
|
45
|
+
if ((a !== "start" || c) && (f = b(f, ...i)), !(r === void 0 && !c)) {
|
|
46
46
|
if (o !== void 0 || t !== void 0 || s === void 0) {
|
|
47
47
|
clearTimeout(r);
|
|
48
|
-
let
|
|
49
|
-
|
|
50
|
-
let W = t === void 0 ? o ?? 0 : Math.min(o ?? t, t - (
|
|
48
|
+
let P = Date.now();
|
|
49
|
+
h ?? (h = P);
|
|
50
|
+
let W = t === void 0 ? o ?? 0 : Math.min(o ?? t, t - (P - h));
|
|
51
51
|
r = setTimeout(H, W);
|
|
52
52
|
}
|
|
53
|
-
a !== "end" && c &&
|
|
53
|
+
a !== "end" && c && O();
|
|
54
54
|
}
|
|
55
55
|
}, cancel: () => {
|
|
56
|
-
clearTimeout(r), r = void 0,
|
|
56
|
+
clearTimeout(r), r = void 0, h = void 0, clearTimeout(p), p = void 0, f = void 0;
|
|
57
57
|
}, flush: () => {
|
|
58
58
|
H(), D();
|
|
59
59
|
}, get isIdle() {
|
|
60
|
-
return r === void 0 &&
|
|
60
|
+
return r === void 0 && p === void 0;
|
|
61
61
|
} };
|
|
62
62
|
}
|
|
63
63
|
var ze = () => "";
|
|
64
|
-
function
|
|
64
|
+
function y(...n) {
|
|
65
65
|
return We(Le, n);
|
|
66
66
|
}
|
|
67
67
|
var Le = (n, { min: a, max: o }) => a !== void 0 && n < a ? a : o !== void 0 && n > o ? o : n;
|
|
@@ -85,6 +85,7 @@ const Qe = { "data-vsbs-container": "" }, Ge = /* @__PURE__ */ Be({
|
|
|
85
85
|
initialSnapPoint: {},
|
|
86
86
|
blocking: { type: Boolean, default: !0 },
|
|
87
87
|
canSwipeClose: { type: Boolean, default: !0 },
|
|
88
|
+
swipeCloseThreshold: {},
|
|
88
89
|
canBackdropClose: { type: Boolean, default: !0 },
|
|
89
90
|
expandOnContentDrag: { type: Boolean, default: !0 },
|
|
90
91
|
modelValue: { type: Boolean },
|
|
@@ -96,17 +97,17 @@ const Qe = { "data-vsbs-container": "" }, Ge = /* @__PURE__ */ Be({
|
|
|
96
97
|
},
|
|
97
98
|
emits: ["opened", "opening-started", "closed", "closing-started", "ready", "dragging-up", "dragging-down", "snapped", "instinctHeight", "update:modelValue"],
|
|
98
99
|
setup(n, { expose: a, emit: o }) {
|
|
99
|
-
const t = n, s = o,
|
|
100
|
+
const t = n, s = o, b = Ve(t, "modelValue", s, {
|
|
100
101
|
passive: !0
|
|
101
102
|
});
|
|
102
|
-
q(
|
|
103
|
+
q(b, (e) => {
|
|
103
104
|
e && X();
|
|
104
105
|
}), Ie(() => {
|
|
105
|
-
|
|
106
|
+
b.value && X();
|
|
106
107
|
});
|
|
107
|
-
const r =
|
|
108
|
+
const r = C(), p = C(null), f = C(null), h = C(null), O = C(null), D = C(null), H = C(null), i = C(t.expandOnContentDrag), { height: c } = Fe(), { height: P } = Q(r), { height: W } = Q(p), { height: se } = Q(D), { height: re } = Q(f), K = _({
|
|
108
109
|
get() {
|
|
109
|
-
return
|
|
110
|
+
return y(
|
|
110
111
|
Math.ceil(se.value + W.value + re.value),
|
|
111
112
|
{
|
|
112
113
|
max: c.value
|
|
@@ -116,15 +117,15 @@ const Qe = { "data-vsbs-container": "" }, Ge = /* @__PURE__ */ Be({
|
|
|
116
117
|
set(e) {
|
|
117
118
|
[W.value, se.value, re.value] = e;
|
|
118
119
|
}
|
|
119
|
-
}), l =
|
|
120
|
+
}), l = C(0), v = C(0), w = me(0), S = me(0), { snapPoints: Ce } = Ee(t), d = _(() => Ce.value ?? [K.value]), {
|
|
120
121
|
flattenedSnapPoints: U,
|
|
121
122
|
currentSnapPointIndex: I,
|
|
122
123
|
closestSnapPointIndex: V,
|
|
123
|
-
minSnapPoint:
|
|
124
|
+
minSnapPoint: M,
|
|
124
125
|
maxSnapPoint: F
|
|
125
126
|
} = $e(d, l, c);
|
|
126
|
-
let
|
|
127
|
-
const j =
|
|
127
|
+
let T;
|
|
128
|
+
const j = be(document.body), z = be(document.documentElement), Y = Re([r, H], {
|
|
128
129
|
immediate: !1,
|
|
129
130
|
fallbackFocus: () => {
|
|
130
131
|
var e;
|
|
@@ -139,22 +140,22 @@ const Qe = { "data-vsbs-container": "" }, Ge = /* @__PURE__ */ Be({
|
|
|
139
140
|
}
|
|
140
141
|
const de = (e) => {
|
|
141
142
|
e.key === "Escape" && L();
|
|
142
|
-
},
|
|
143
|
+
}, Pe = () => {
|
|
143
144
|
t.canBackdropClose && L();
|
|
144
145
|
};
|
|
145
146
|
let J = !1;
|
|
146
147
|
const X = async () => {
|
|
147
148
|
if (J) return;
|
|
148
|
-
|
|
149
|
+
b.value = !0, J = !0, s("opening-started"), t.blocking && (j.value = !0, z.value = !0), await N();
|
|
149
150
|
const e = r.value.$el;
|
|
150
|
-
|
|
151
|
-
const u = e.querySelector("[data-vsbs-content]"),
|
|
151
|
+
P.value = e.getBoundingClientRect().height;
|
|
152
|
+
const u = e.querySelector("[data-vsbs-content]"), g = e.querySelector("[data-vsbs-header]"), k = e.querySelector("[data-vsbs-footer]");
|
|
152
153
|
if (K.value = [
|
|
153
|
-
|
|
154
|
+
g.getBoundingClientRect().height,
|
|
154
155
|
u.getBoundingClientRect().height,
|
|
155
|
-
|
|
156
|
+
k.getBoundingClientRect().height
|
|
156
157
|
], await N(), I.value = U.value.findIndex(
|
|
157
|
-
(x) => x ===
|
|
158
|
+
(x) => x === M.value
|
|
158
159
|
), t.initialSnapPoint) {
|
|
159
160
|
const x = t.initialSnapPoint;
|
|
160
161
|
if (x < 0 || x >= d.value.length) {
|
|
@@ -162,18 +163,18 @@ const Qe = { "data-vsbs-container": "" }, Ge = /* @__PURE__ */ Be({
|
|
|
162
163
|
return;
|
|
163
164
|
}
|
|
164
165
|
let R;
|
|
165
|
-
typeof d.value[x] == "number" ? R =
|
|
166
|
+
typeof d.value[x] == "number" ? R = y(d.value[x], {
|
|
166
167
|
max: c.value
|
|
167
168
|
}) : R = G(d.value[x], c.value), l.value = R;
|
|
168
169
|
} else
|
|
169
|
-
l.value =
|
|
170
|
+
l.value = y(M.value, {
|
|
170
171
|
max: c.value
|
|
171
172
|
});
|
|
172
|
-
v.value = l.value,
|
|
173
|
-
|
|
173
|
+
v.value = l.value, w.jump(l.value), S.jump(l.value), requestAnimationFrame(() => {
|
|
174
|
+
T = B(w, l.value, {
|
|
174
175
|
duration: t.duration / 1e3,
|
|
175
176
|
ease: "easeInOut"
|
|
176
|
-
}),
|
|
177
|
+
}), T = B(S, 0, {
|
|
177
178
|
duration: t.duration / 1e3,
|
|
178
179
|
ease: "easeInOut",
|
|
179
180
|
onComplete: () => {
|
|
@@ -184,7 +185,7 @@ const Qe = { "data-vsbs-container": "" }, Ge = /* @__PURE__ */ Be({
|
|
|
184
185
|
};
|
|
185
186
|
let Z = !1;
|
|
186
187
|
const L = () => {
|
|
187
|
-
Z || (
|
|
188
|
+
Z || (b.value = !1, Z = !0, s("closing-started"), t.blocking && (j.value = !1, z.value = !1), window.removeEventListener("keydown", de), t.blocking && Y.deactivate(), setTimeout(() => {
|
|
188
189
|
s("closed"), Z = !1;
|
|
189
190
|
}, t.duration));
|
|
190
191
|
}, ce = (e) => {
|
|
@@ -195,9 +196,9 @@ const Qe = { "data-vsbs-container": "" }, Ge = /* @__PURE__ */ Be({
|
|
|
195
196
|
}
|
|
196
197
|
I.value = e;
|
|
197
198
|
let u;
|
|
198
|
-
typeof d.value[e] == "number" ? u =
|
|
199
|
+
typeof d.value[e] == "number" ? u = y(d.value[e], {
|
|
199
200
|
max: c.value
|
|
200
|
-
}) : u = G(d.value[e], c.value), l.value = u,
|
|
201
|
+
}) : u = G(d.value[e], c.value), l.value = u, T = B(w, l.value, {
|
|
201
202
|
duration: t.duration / 1e3,
|
|
202
203
|
ease: "easeInOut",
|
|
203
204
|
onComplete: () => s("snapped", d.value.indexOf(d.value[e]))
|
|
@@ -207,92 +208,95 @@ const Qe = { "data-vsbs-container": "" }, Ge = /* @__PURE__ */ Be({
|
|
|
207
208
|
e > 0 ? s("dragging-down") : e < 0 && s("dragging-up");
|
|
208
209
|
}
|
|
209
210
|
const pe = () => {
|
|
210
|
-
l.value =
|
|
211
|
+
l.value = P.value, v.value = S.get(), w.jump(l.value), S.jump(v.value);
|
|
211
212
|
}, he = async (e, u) => {
|
|
212
|
-
await N(), r.value && (v.value <= 0 && (l.value -= u.delta.y), l.value <=
|
|
213
|
-
t.canSwipeClose ?
|
|
213
|
+
await N(), r.value && (v.value <= 0 && (l.value -= u.delta.y), l.value <= M.value && (l.value = M.value, v.value += u.delta.y, S.set(
|
|
214
|
+
t.canSwipeClose ? y(v.value, { min: 0 }) : y(ue(v.value, -P.value, 0, 0.5), {
|
|
214
215
|
min: 0
|
|
215
216
|
})
|
|
216
|
-
)),
|
|
217
|
-
|
|
217
|
+
)), w.set(
|
|
218
|
+
y(ue(l.value, 0, F.value, 0.25), {
|
|
218
219
|
min: 0,
|
|
219
220
|
max: c.value
|
|
220
221
|
})
|
|
221
222
|
), fe(u.delta.y));
|
|
222
223
|
}, ee = () => {
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
224
|
+
if (t.canSwipeClose) {
|
|
225
|
+
let u = l.value / 2;
|
|
226
|
+
t.swipeCloseThreshold && typeof t.swipeCloseThreshold == "number" && (u = t.swipeCloseThreshold), t.swipeCloseThreshold && typeof t.swipeCloseThreshold == "string" && t.swipeCloseThreshold.includes("%") && (u = l.value * (Number(t.swipeCloseThreshold.replace("%", "")) / 100)), v.value > u && (v.value = l.value);
|
|
227
|
+
} else
|
|
228
|
+
v.value = 0;
|
|
229
|
+
T = B(S, v.value, {
|
|
226
230
|
duration: t.duration / 1e3,
|
|
227
231
|
ease: "easeInOut"
|
|
228
232
|
}), v.value === l.value && (v.value = 0, L()), I.value = V.value;
|
|
229
233
|
let e;
|
|
230
|
-
typeof d.value[V.value] == "number" ? e =
|
|
234
|
+
typeof d.value[V.value] == "number" ? e = y(d.value[V.value], {
|
|
231
235
|
max: c.value
|
|
232
236
|
}) : e = G(
|
|
233
237
|
d.value[V.value],
|
|
234
238
|
c.value
|
|
235
|
-
), l.value = e,
|
|
239
|
+
), l.value = e, T = B(w, l.value, {
|
|
236
240
|
duration: t.duration / 1e3,
|
|
237
241
|
ease: "easeInOut",
|
|
238
242
|
onComplete: () => s(
|
|
239
243
|
"snapped",
|
|
240
244
|
d.value.indexOf(d.value[V.value])
|
|
241
245
|
)
|
|
242
|
-
}),
|
|
246
|
+
}), T = B(S, 0, {
|
|
243
247
|
duration: t.duration / 1e3,
|
|
244
248
|
ease: "easeInOut"
|
|
245
249
|
});
|
|
246
|
-
},
|
|
247
|
-
if (l.value =
|
|
248
|
-
const
|
|
250
|
+
}, we = (e, u) => {
|
|
251
|
+
if (l.value = P.value, v.value = S.get(), T && T.stop(), !h.value) return;
|
|
252
|
+
const g = h.value.scrollTop === 0, k = u.delta.y > 0, x = U.value.length === 1, R = 0.5 > Math.abs(l.value - F.value);
|
|
249
253
|
if (x) {
|
|
250
254
|
if (!t.expandOnContentDrag) {
|
|
251
255
|
i.value = !1;
|
|
252
256
|
return;
|
|
253
257
|
}
|
|
254
|
-
S.get() === 0 &&
|
|
258
|
+
S.get() === 0 && g && k && (i.value = !0), S.get() === 0 && g && !k && (i.value = !1);
|
|
255
259
|
} else {
|
|
256
260
|
if (!t.expandOnContentDrag) {
|
|
257
261
|
i.value = !1;
|
|
258
262
|
return;
|
|
259
263
|
}
|
|
260
|
-
i.value = !0, R && (
|
|
264
|
+
i.value = !0, R && (k && g && (i.value = !0), !k && g && (i.value = !1), g || (i.value = !1));
|
|
261
265
|
}
|
|
262
|
-
},
|
|
266
|
+
}, Te = async (e, u) => {
|
|
263
267
|
if (await N(), !t.expandOnContentDrag) {
|
|
264
268
|
i.value = !1;
|
|
265
269
|
return;
|
|
266
270
|
}
|
|
267
271
|
if (!r.value) return;
|
|
268
|
-
v.value === 0 && i.value && t.expandOnContentDrag && (l.value -= u.delta.y), l.value <=
|
|
269
|
-
t.canSwipeClose ?
|
|
272
|
+
v.value === 0 && i.value && t.expandOnContentDrag && (l.value -= u.delta.y), l.value <= M.value && (l.value = M.value, i.value && t.expandOnContentDrag && (v.value += u.delta.y), v.value = y(v.value, { min: 0, max: M.value }), S.set(
|
|
273
|
+
t.canSwipeClose ? y(v.value, { min: 0 }) : y(ue(v.value, -P.value, 0, 0.5), {
|
|
270
274
|
min: 0
|
|
271
275
|
})
|
|
272
|
-
)), l.value > F.value && (l.value = F.value), l.value =
|
|
273
|
-
},
|
|
276
|
+
)), l.value > F.value && (l.value = F.value), l.value = y(l.value, { max: c.value }), U.value.length === 1 || l.value === F.value && (i.value = !1), w.set(l.value), fe(u.delta.y);
|
|
277
|
+
}, ke = () => {
|
|
274
278
|
t.blocking || (j.value = !0, z.value = !0);
|
|
275
279
|
}, xe = () => {
|
|
276
280
|
t.blocking || (j.value = !1, z.value = !1);
|
|
277
|
-
},
|
|
278
|
-
if (!
|
|
279
|
-
const e =
|
|
281
|
+
}, Oe = () => {
|
|
282
|
+
if (!h.value) return;
|
|
283
|
+
const e = h.value.scrollTop === 0;
|
|
280
284
|
i.value = e;
|
|
281
|
-
},
|
|
285
|
+
}, Me = je((e) => ce(e), {
|
|
282
286
|
minQuietPeriodMs: t.duration,
|
|
283
287
|
reducer: (e, u) => u
|
|
284
288
|
});
|
|
285
289
|
return q(d, (e, u) => {
|
|
286
|
-
if (
|
|
287
|
-
const
|
|
288
|
-
typeof
|
|
290
|
+
if (b.value === !1 || !e || !u) return;
|
|
291
|
+
const g = e[I.value], k = u[I.value];
|
|
292
|
+
typeof g != "string" && typeof k != "string" && (l.value = y(g, {
|
|
289
293
|
max: c.value
|
|
290
|
-
}),
|
|
294
|
+
}), g !== k && (T = B(w, l.value, {
|
|
291
295
|
duration: t.duration / 1e3,
|
|
292
296
|
ease: "easeInOut"
|
|
293
297
|
})));
|
|
294
298
|
}), q(c, () => {
|
|
295
|
-
|
|
299
|
+
Me.call(I.value);
|
|
296
300
|
}), q(K, (e) => {
|
|
297
301
|
s("instinctHeight", e);
|
|
298
302
|
}), _e(() => {
|
|
@@ -302,14 +306,14 @@ const Qe = { "data-vsbs-container": "" }, Ge = /* @__PURE__ */ Be({
|
|
|
302
306
|
defer: e.teleportDefer
|
|
303
307
|
}, [
|
|
304
308
|
ne("div", Qe, [
|
|
305
|
-
$(m(
|
|
309
|
+
$(m(ye), null, {
|
|
306
310
|
default: E(() => [
|
|
307
|
-
m(
|
|
311
|
+
m(b) && e.blocking ? (ae(), te(m(A), {
|
|
308
312
|
key: 0,
|
|
309
313
|
ref_key: "backdrop",
|
|
310
314
|
ref: H,
|
|
311
315
|
"data-vsbs-backdrop": "",
|
|
312
|
-
onClick: u[0] || (u[0] = (
|
|
316
|
+
onClick: u[0] || (u[0] = (g) => Pe()),
|
|
313
317
|
transition: {
|
|
314
318
|
ease: "easeInOut",
|
|
315
319
|
duration: e.duration / 1e3
|
|
@@ -321,27 +325,27 @@ const Qe = { "data-vsbs-container": "" }, Ge = /* @__PURE__ */ Be({
|
|
|
321
325
|
]),
|
|
322
326
|
_: 1
|
|
323
327
|
}),
|
|
324
|
-
$(m(
|
|
328
|
+
$(m(ye), null, {
|
|
325
329
|
default: E(() => [
|
|
326
|
-
m(
|
|
330
|
+
m(b) ? (ae(), te(m(A), {
|
|
327
331
|
key: 0,
|
|
328
332
|
ref_key: "sheet",
|
|
329
333
|
ref: r,
|
|
330
|
-
exit: { y: "100%", height: m(
|
|
334
|
+
exit: { y: "100%", height: m(P) },
|
|
331
335
|
initial: !1,
|
|
332
|
-
style: He({ y: m(S), height: m(
|
|
336
|
+
style: He({ y: m(S), height: m(w) }),
|
|
333
337
|
"data-vsbs-shadow": !e.blocking,
|
|
334
|
-
"data-vsbs-sheet-show": m(
|
|
338
|
+
"data-vsbs-sheet-show": m(b),
|
|
335
339
|
"aria-modal": "true",
|
|
336
340
|
"data-vsbs-sheet": "",
|
|
337
341
|
tabindex: "-1",
|
|
338
|
-
onTouchstart:
|
|
342
|
+
onTouchstart: ke,
|
|
339
343
|
onTouchend: xe
|
|
340
344
|
}, {
|
|
341
345
|
default: E(() => [
|
|
342
346
|
$(m(A), {
|
|
343
347
|
ref_key: "sheetHeader",
|
|
344
|
-
ref:
|
|
348
|
+
ref: p,
|
|
345
349
|
"data-vsbs-header": "",
|
|
346
350
|
onPanStart: pe,
|
|
347
351
|
onPan: he,
|
|
@@ -356,16 +360,16 @@ const Qe = { "data-vsbs-container": "" }, Ge = /* @__PURE__ */ Be({
|
|
|
356
360
|
}, 8, ["class"]),
|
|
357
361
|
ne("div", {
|
|
358
362
|
ref_key: "sheetScroll",
|
|
359
|
-
ref:
|
|
363
|
+
ref: h,
|
|
360
364
|
"data-vsbs-scroll": "",
|
|
361
|
-
onScrollend:
|
|
365
|
+
onScrollend: Oe
|
|
362
366
|
}, [
|
|
363
367
|
$(m(A), {
|
|
364
368
|
ref_key: "sheetContentWrapper",
|
|
365
|
-
ref:
|
|
369
|
+
ref: O,
|
|
366
370
|
"data-vsbs-content-wrapper": "",
|
|
367
|
-
onPanStart:
|
|
368
|
-
onPan:
|
|
371
|
+
onPanStart: we,
|
|
372
|
+
onPan: Te,
|
|
369
373
|
onPanEnd: ee,
|
|
370
374
|
onTouchmove: ve
|
|
371
375
|
}, {
|
|
@@ -384,7 +388,7 @@ const Qe = { "data-vsbs-container": "" }, Ge = /* @__PURE__ */ Be({
|
|
|
384
388
|
], 544),
|
|
385
389
|
$(m(A), {
|
|
386
390
|
ref_key: "sheetFooter",
|
|
387
|
-
ref:
|
|
391
|
+
ref: f,
|
|
388
392
|
"data-vsbs-footer": "",
|
|
389
393
|
onPanStart: pe,
|
|
390
394
|
onPan: he,
|
|
@@ -411,7 +415,7 @@ const Qe = { "data-vsbs-container": "" }, Ge = /* @__PURE__ */ Be({
|
|
|
411
415
|
for (const [t, s] of a)
|
|
412
416
|
o[t] = s;
|
|
413
417
|
return o;
|
|
414
|
-
}, Ze = /* @__PURE__ */ Ke(Ge, [["__scopeId", "data-v-
|
|
418
|
+
}, Ze = /* @__PURE__ */ Ke(Ge, [["__scopeId", "data-v-ccadc172"]]);
|
|
415
419
|
export {
|
|
416
420
|
Ze as default
|
|
417
421
|
};
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
[data-vsbs-container][data-v-
|
|
1
|
+
[data-vsbs-container][data-v-ccadc172]{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-ccadc172]{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-ccadc172]: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-ccadc172]{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-ccadc172]{visibility:visible}[data-vsbs-header][data-v-ccadc172]{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-ccadc172]: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-ccadc172]:empty{box-shadow:none;padding:14px var(--vsbs-padding-x, 16px) 10px}[data-vsbs-footer][data-v-ccadc172]{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-ccadc172]:empty{display:none}[data-vsbs-scroll][data-v-ccadc172]{flex-grow:1;overflow-y:auto;overscroll-behavior:none}[data-vsbs-content-wrapper][data-v-ccadc172]{height:100%}[data-vsbs-content][data-v-ccadc172]{display:grid;padding:8px var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}
|
package/dist/types.d.ts
CHANGED