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