@douxcode/vue-spring-bottom-sheet 1.0.4 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -6
- package/dist/BottomSheet.d.ts +4 -0
- package/dist/index.mjs +50 -50
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -124,12 +124,13 @@ Assuming there is `const bottomSheet = ref()`
|
|
|
124
124
|
|
|
125
125
|
## Events
|
|
126
126
|
|
|
127
|
-
| Event
|
|
128
|
-
|
|
|
129
|
-
| min-height
|
|
130
|
-
|
|
|
131
|
-
|
|
|
132
|
-
|
|
|
127
|
+
| Event | Description | Example |
|
|
128
|
+
| ------------- | ------------------------------------------------------------------------------------ | --------------------------- |
|
|
129
|
+
| min-height | Fires when the minimum height of the sheet changes. Passes the value as an argument. | `@min-height="(n) => {}"` |
|
|
130
|
+
| dragging-up | Fires when the bottom sheet is being dragged up | `@dragging-up="() => {}"` |
|
|
131
|
+
| dragging-down | Fires when the bottom sheet is being dragged down | `@dragging-down="() => {}"` |
|
|
132
|
+
| opened | Fires when the bottom sheet is opened | `@opened="() => {}"` |
|
|
133
|
+
| closed | Fires when the bottom sheet is closed | `@closed="() => {}"` |
|
|
133
134
|
|
|
134
135
|
## Acknowledgments
|
|
135
136
|
|
package/dist/BottomSheet.d.ts
CHANGED
|
@@ -32,12 +32,16 @@ declare const __VLS_component: import('vue').DefineComponent<IProps, {
|
|
|
32
32
|
opened: () => any;
|
|
33
33
|
closed: () => any;
|
|
34
34
|
ready: () => any;
|
|
35
|
+
"dragging-up": () => any;
|
|
36
|
+
"dragging-down": () => any;
|
|
35
37
|
minHeight: (minSheetHeight: number) => any;
|
|
36
38
|
maxHeight: (maxSheetHeight: number) => any;
|
|
37
39
|
}, string, import('vue').PublicProps, Readonly<IProps> & Readonly<{
|
|
38
40
|
onOpened?: (() => any) | undefined;
|
|
39
41
|
onClosed?: (() => any) | undefined;
|
|
40
42
|
onReady?: (() => any) | undefined;
|
|
43
|
+
"onDragging-up"?: (() => any) | undefined;
|
|
44
|
+
"onDragging-down"?: (() => any) | undefined;
|
|
41
45
|
onMinHeight?: ((minSheetHeight: number) => any) | undefined;
|
|
42
46
|
onMaxHeight?: ((maxSheetHeight: number) => any) | undefined;
|
|
43
47
|
}>, {
|
package/dist/index.mjs
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
import { computed as
|
|
1
|
+
import { computed as S, defineComponent as te, ref as u, toRefs as ae, watch as ne, nextTick as R, onMounted as oe, openBlock as le, createBlock as se, Teleport as ue, createElementVNode as d, createVNode as ie, Transition as re, withCtx as ve, withDirectives as de, vShow as ce, renderSlot as O } from "vue";
|
|
2
2
|
import { useWindowSize as he, useElementBounding as x, useScrollLock as pe } from "@vueuse/core";
|
|
3
3
|
import { useGesture as P, rubberbandIfOutOfBounds as E } from "@vueuse/gesture";
|
|
4
4
|
import { useMotionProperties as fe, useMotionTransitions as ge, useMotionControls as me } from "@vueuse/motion";
|
|
5
5
|
import { useFocusTrap as be } from "@vueuse/integrations/useFocusTrap";
|
|
6
|
-
function ye(
|
|
7
|
-
const
|
|
8
|
-
const h =
|
|
6
|
+
function ye(c, g) {
|
|
7
|
+
const i = S(() => c.value.slice().sort((h, v) => h - v)), n = S(() => i.value[0]), l = S(() => i.value[i.value.length - 1]), s = S(() => {
|
|
8
|
+
const h = i.value.reduce(
|
|
9
9
|
(v, m) => Math.abs(m - g.value) < Math.abs(v - g.value) ? m : v
|
|
10
10
|
);
|
|
11
|
-
return
|
|
11
|
+
return i.value.indexOf(h);
|
|
12
12
|
});
|
|
13
13
|
return {
|
|
14
14
|
minSnap: n,
|
|
15
|
-
maxSnap:
|
|
16
|
-
snapPoints:
|
|
17
|
-
closestSnapPoint:
|
|
15
|
+
maxSnap: l,
|
|
16
|
+
snapPoints: c,
|
|
17
|
+
closestSnapPoint: s
|
|
18
18
|
};
|
|
19
19
|
}
|
|
20
|
-
const ke = { "data-vsbs-container": "" },
|
|
20
|
+
const ke = { "data-vsbs-container": "" }, we = ["data-vsbs-shadow", "data-vsbs-sheet-show"], Se = /* @__PURE__ */ te({
|
|
21
21
|
__name: "BottomSheet",
|
|
22
22
|
props: {
|
|
23
23
|
snapPoints: {},
|
|
@@ -27,20 +27,20 @@ const ke = { "data-vsbs-container": "" }, Se = ["data-vsbs-shadow", "data-vsbs-s
|
|
|
27
27
|
canBackdropClose: { type: Boolean, default: !0 },
|
|
28
28
|
expandOnContentDrag: { type: Boolean, default: !0 }
|
|
29
29
|
},
|
|
30
|
-
emits: ["opened", "closed", "ready", "minHeight", "maxHeight"],
|
|
31
|
-
setup(
|
|
32
|
-
const n =
|
|
30
|
+
emits: ["opened", "closed", "ready", "dragging-up", "dragging-down", "minHeight", "maxHeight"],
|
|
31
|
+
setup(c, { expose: g, emit: i }) {
|
|
32
|
+
const n = c, l = i, s = u(null), h = u(null), v = u(null), m = u(null), I = u(null), F = u(null), L = u(null), D = u(!1), r = u(n.expandOnContentDrag), { height: W } = he(), { height: T } = x(s), { height: z } = x(h), { height: G } = x(v), { height: K } = x(F), { activate: Y, deactivate: j } = be([s, L]), p = S(() => Math.ceil(K.value + z.value + G.value)), { motionProperties: b } = fe(s), { push: y, stop: q, motionValues: B } = ge(), { set: k } = me(b, {}, { push: y, motionValues: B, stop: q }), e = u(0), a = u(0), { snapPoints: J } = ae(n), Q = S(() => J.value ?? [p.value]), { minSnap: f, maxSnap: w, snapPoints: C, closestSnapPoint: U } = ye(Q, e), $ = pe(document.body), N = (t) => {
|
|
33
33
|
t.key === "Escape" && _();
|
|
34
34
|
}, X = () => {
|
|
35
|
-
|
|
35
|
+
s.value && (e.value = n.defaultBreakpoint ?? f.value, k({
|
|
36
36
|
height: e.value,
|
|
37
37
|
y: e.value
|
|
38
38
|
}), y("y", 0, b, { type: "tween", easings: "easeInOut", bounce: 0, duration: 300 }), D.value = !0, $.value = !0, window.addEventListener("keydown", N), n.blocking && setTimeout(() => {
|
|
39
|
-
B.value.y.get() - 0 < 0.1 && (
|
|
39
|
+
B.value.y.get() - 0 < 0.1 && (l("opened"), Y());
|
|
40
40
|
}, 300));
|
|
41
41
|
}, _ = () => {
|
|
42
|
-
|
|
43
|
-
B.value.y.get() - T.value < 0.1 &&
|
|
42
|
+
s.value && (y("y", T.value, b, { type: "tween", bounce: 0, duration: 300 }), D.value = !1, $.value = !1, n.blocking && j(), window.removeEventListener("keydown", N), setTimeout(() => {
|
|
43
|
+
B.value.y.get() - T.value < 0.1 && l("closed");
|
|
44
44
|
}, 300));
|
|
45
45
|
}, Z = () => {
|
|
46
46
|
n.canBackdropClose && _();
|
|
@@ -49,20 +49,20 @@ const ke = { "data-vsbs-container": "" }, Se = ["data-vsbs-shadow", "data-vsbs-s
|
|
|
49
49
|
r.value && t.preventDefault();
|
|
50
50
|
}
|
|
51
51
|
const V = (t) => {
|
|
52
|
-
|
|
52
|
+
s.value && (e.value = t, y("height", e.value, b, {
|
|
53
53
|
type: "tween",
|
|
54
54
|
easings: "easeInOut",
|
|
55
55
|
bounce: 0,
|
|
56
56
|
duration: 300
|
|
57
57
|
}));
|
|
58
|
-
}, A = ({ delta: t }) => {
|
|
59
|
-
|
|
58
|
+
}, A = ({ delta: t, direction: o }) => {
|
|
59
|
+
s.value && (a.value === 0 && (e.value -= t[1]), e.value <= f.value && (e.value = f.value, a.value += t[1], a.value = Math.max(0, Math.min(a.value, f.value)), k({
|
|
60
60
|
y: n.canSwipeClose ? a.value : E(a.value, -T.value, 0, 0.5)
|
|
61
61
|
})), k({
|
|
62
|
-
height: Math.min(Math.max(E(e.value, 0,
|
|
63
|
-
}));
|
|
62
|
+
height: Math.min(Math.max(E(e.value, 0, w.value, 0.25), 0), W.value)
|
|
63
|
+
}), o[1] > 0 ? l("dragging-down") : o[1] < 0 && l("dragging-up"));
|
|
64
64
|
}, M = () => {
|
|
65
|
-
|
|
65
|
+
s.value && (a.value = n.canSwipeClose ? [0, e.value].reduce((t, o) => Math.abs(o - a.value) < Math.abs(t - a.value) ? o : t) : 0, y("y", a.value, b, { type: "tween", easings: "easeInOut", bounce: 0, duration: 300 }), a.value === e.value && (a.value = 0, _()), e.value = C.value[U.value], y("height", e.value, b, { type: "tween", easings: "easeInOut", bounce: 0, duration: 300 }));
|
|
66
66
|
};
|
|
67
67
|
return P(
|
|
68
68
|
{
|
|
@@ -85,20 +85,20 @@ const ke = { "data-vsbs-container": "" }, Se = ["data-vsbs-shadow", "data-vsbs-s
|
|
|
85
85
|
), P(
|
|
86
86
|
{
|
|
87
87
|
onDragStart: ({ direction: t }) => {
|
|
88
|
-
const
|
|
89
|
-
C.value.length === 1 ? a.value === 0 &&
|
|
88
|
+
const o = m.value.scrollTop === 0, H = t[1] > 0;
|
|
89
|
+
C.value.length === 1 ? a.value === 0 && o && (r.value = H) : (n.expandOnContentDrag && e.value !== w.value && (r.value = !0), e.value === w.value && o && (r.value = H));
|
|
90
90
|
},
|
|
91
91
|
onDrag: ({ delta: t }) => {
|
|
92
92
|
if (!n.expandOnContentDrag) {
|
|
93
93
|
r.value = !1;
|
|
94
94
|
return;
|
|
95
95
|
}
|
|
96
|
-
if (!
|
|
96
|
+
if (!s.value) return;
|
|
97
97
|
a.value === 0 && r.value && n.expandOnContentDrag && (e.value -= t[1]), e.value <= f.value && (e.value = f.value, r.value && n.expandOnContentDrag && (a.value += t[1]), a.value = Math.max(0, Math.min(a.value, f.value)), k({
|
|
98
98
|
y: n.canSwipeClose ? a.value : E(a.value, -T.value, 0, 0.5)
|
|
99
|
-
})), e.value >
|
|
100
|
-
const
|
|
101
|
-
C.value.length === 1 ? t[1] < 0 && a.value === 0 &&
|
|
99
|
+
})), e.value > w.value && (e.value = w.value);
|
|
100
|
+
const o = m.value.scrollTop === 0;
|
|
101
|
+
C.value.length === 1 ? t[1] < 0 && a.value === 0 && o && (r.value = !1) : e.value === w.value && (r.value = !1), k({
|
|
102
102
|
height: e.value
|
|
103
103
|
});
|
|
104
104
|
},
|
|
@@ -109,59 +109,59 @@ const ke = { "data-vsbs-container": "" }, Se = ["data-vsbs-shadow", "data-vsbs-s
|
|
|
109
109
|
drag: { filterTaps: !0 }
|
|
110
110
|
}
|
|
111
111
|
), ne(p, () => {
|
|
112
|
-
|
|
112
|
+
l("minHeight", p.value), C.value.length === 1 && R(() => {
|
|
113
113
|
C.value[0] === p.value && V(p.value);
|
|
114
114
|
});
|
|
115
115
|
}), oe(() => {
|
|
116
|
-
|
|
116
|
+
l("minHeight", p.value), l("maxHeight", W.value), e.value = n.defaultBreakpoint ?? Number(p.value), k({
|
|
117
117
|
height: e.value,
|
|
118
118
|
y: e.value
|
|
119
119
|
}), R(() => {
|
|
120
|
-
|
|
120
|
+
l("ready");
|
|
121
121
|
});
|
|
122
|
-
}), g({ open: X, close: _, snapToPoint: V }), (t,
|
|
123
|
-
|
|
122
|
+
}), g({ open: X, close: _, snapToPoint: V }), (t, o) => (le(), se(ue, { to: "body" }, [
|
|
123
|
+
d("div", ke, [
|
|
124
124
|
ie(re, { name: "fade" }, {
|
|
125
125
|
default: ve(() => [
|
|
126
|
-
|
|
126
|
+
de(d("div", {
|
|
127
127
|
ref_key: "backdrop",
|
|
128
128
|
ref: L,
|
|
129
129
|
"data-vsbs-backdrop": "",
|
|
130
|
-
onClick:
|
|
130
|
+
onClick: o[0] || (o[0] = (H) => Z())
|
|
131
131
|
}, null, 512), [
|
|
132
|
-
[
|
|
132
|
+
[ce, D.value && t.blocking]
|
|
133
133
|
])
|
|
134
134
|
]),
|
|
135
135
|
_: 1
|
|
136
136
|
}),
|
|
137
|
-
|
|
137
|
+
d("div", {
|
|
138
138
|
ref_key: "sheet",
|
|
139
|
-
ref:
|
|
139
|
+
ref: s,
|
|
140
140
|
"data-vsbs-shadow": !t.blocking,
|
|
141
141
|
"data-vsbs-sheet-show": D.value,
|
|
142
142
|
"aria-modal": "true",
|
|
143
143
|
"data-vsbs-sheet": "",
|
|
144
144
|
tabindex: "-1"
|
|
145
145
|
}, [
|
|
146
|
-
|
|
146
|
+
d("div", {
|
|
147
147
|
ref_key: "sheetHeader",
|
|
148
148
|
ref: h,
|
|
149
149
|
"data-vsbs-header": ""
|
|
150
150
|
}, [
|
|
151
151
|
O(t.$slots, "header", {}, void 0, !0)
|
|
152
152
|
], 512),
|
|
153
|
-
|
|
153
|
+
d("div", {
|
|
154
154
|
ref_key: "sheetScroll",
|
|
155
155
|
ref: m,
|
|
156
156
|
"data-vsbs-scroll": "",
|
|
157
157
|
onTouchmove: ee
|
|
158
158
|
}, [
|
|
159
|
-
|
|
159
|
+
d("div", {
|
|
160
160
|
ref_key: "sheetContentWrapper",
|
|
161
161
|
ref: I,
|
|
162
162
|
"data-vsbs-content-wrapper": ""
|
|
163
163
|
}, [
|
|
164
|
-
|
|
164
|
+
d("div", {
|
|
165
165
|
ref_key: "sheetContent",
|
|
166
166
|
ref: F,
|
|
167
167
|
"data-vsbs-content": ""
|
|
@@ -170,23 +170,23 @@ const ke = { "data-vsbs-container": "" }, Se = ["data-vsbs-shadow", "data-vsbs-s
|
|
|
170
170
|
], 512)
|
|
171
171
|
], 512)
|
|
172
172
|
], 544),
|
|
173
|
-
|
|
173
|
+
d("div", {
|
|
174
174
|
ref_key: "sheetFooter",
|
|
175
175
|
ref: v,
|
|
176
176
|
"data-vsbs-footer": ""
|
|
177
177
|
}, [
|
|
178
178
|
O(t.$slots, "footer", {}, void 0, !0)
|
|
179
179
|
], 512)
|
|
180
|
-
], 8,
|
|
180
|
+
], 8, we)
|
|
181
181
|
])
|
|
182
182
|
]));
|
|
183
183
|
}
|
|
184
|
-
}), Ce = (
|
|
185
|
-
const
|
|
186
|
-
for (const [n,
|
|
187
|
-
|
|
188
|
-
return
|
|
189
|
-
}, He = /* @__PURE__ */ Ce(
|
|
184
|
+
}), Ce = (c, g) => {
|
|
185
|
+
const i = c.__vccOpts || c;
|
|
186
|
+
for (const [n, l] of g)
|
|
187
|
+
i[n] = l;
|
|
188
|
+
return i;
|
|
189
|
+
}, He = /* @__PURE__ */ Ce(Se, [["__scopeId", "data-v-853fc310"]]);
|
|
190
190
|
export {
|
|
191
191
|
He as default
|
|
192
192
|
};
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
[data-vsbs-backdrop][data-v-
|
|
1
|
+
[data-vsbs-backdrop][data-v-853fc310]{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:100}[data-vsbs-shadow=true][data-v-853fc310]{box-shadow:0 -5px 60px #26597333,0 -1px #2659730f}[data-vsbs-sheet][data-v-853fc310]{background-color:var(--vsbs-background, #fff);border-top-left-radius:var(--vsbs-border-radius, 16px);border-top-right-radius:var(--vsbs-border-radius, 16px);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;transition:visibility .3s ease-in-out;visibility:hidden;width:100%;will-change:height;z-index:100}[data-vsbs-sheet-show=true][data-v-853fc310]{visibility:visible}[data-vsbs-header][data-v-853fc310]{box-shadow:0 1px #2e3b4220;flex-shrink:0;padding:20px 16px 8px;-webkit-user-select:none;user-select:none;z-index:1}[data-vsbs-header][data-v-853fc310]: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-853fc310]:empty{box-shadow:none;padding:12px 16px 8px}[data-vsbs-footer][data-v-853fc310]{box-shadow:0 -1px #2e3b4220;flex-grow:0;flex-shrink:0;padding:16px;-webkit-user-select:none;user-select:none}[data-vsbs-footer][data-v-853fc310]:empty{display:none}[data-vsbs-scroll][data-v-853fc310]{flex-grow:1;overflow-y:auto;overscroll-behavior:contain}[data-vsbs-content-wrapper][data-v-853fc310]{height:100%}[data-vsbs-content][data-v-853fc310]{display:grid;padding:1vh 3vh 3vh;-webkit-user-select:none;user-select:none}.fade-enter-active[data-v-853fc310],.fade-leave-active[data-v-853fc310]{transition:opacity .3s ease}.fade-enter-from[data-v-853fc310],.fade-leave-to[data-v-853fc310]{opacity:0}
|