@douxcode/vue-spring-bottom-sheet 1.0.4 → 1.0.6
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 +78 -78
- package/dist/style.css +1 -1
- package/package.json +3 -2
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
|
|
2
|
-
import { useWindowSize as he, useElementBounding as
|
|
3
|
-
import { useGesture as
|
|
1
|
+
import { computed as C, 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 P } from "vue";
|
|
2
|
+
import { useWindowSize as he, useElementBounding as B, useScrollLock as pe } from "@vueuse/core";
|
|
3
|
+
import { useGesture as E, rubberbandIfOutOfBounds as I } 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 = C(() => c.value.slice().sort((h, v) => h - v)), n = C(() => i.value[0]), o = C(() => i.value[i.value.length - 1]), s = C(() => {
|
|
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: o,
|
|
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,166 +27,166 @@ 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 =
|
|
33
|
-
t.key === "Escape" &&
|
|
30
|
+
emits: ["opened", "closed", "ready", "dragging-up", "dragging-down", "minHeight", "maxHeight"],
|
|
31
|
+
setup(c, { expose: g, emit: i }) {
|
|
32
|
+
const n = c, o = i, s = u(null), h = u(null), v = u(null), m = u(null), F = u(null), L = u(null), W = u(null), T = u(!1), r = u(n.expandOnContentDrag), { height: b } = he(), { height: _ } = B(s), { height: z } = B(h), { height: G } = B(v), { height: K } = B(L), { activate: Y, deactivate: j } = be([s, W]), p = C(() => Math.ceil(K.value + z.value + G.value)), { motionProperties: y } = fe(s), { push: k, stop: q, motionValues: H } = ge(), { set: w } = me(y, {}, { push: k, motionValues: H, stop: q }), e = u(0), a = u(0), { snapPoints: J } = ae(n), Q = C(() => J.value ?? [p.value]), { minSnap: f, maxSnap: S, snapPoints: D, closestSnapPoint: U } = ye(Q, e), $ = pe(document.body), N = (t) => {
|
|
33
|
+
t.key === "Escape" && x();
|
|
34
34
|
}, X = () => {
|
|
35
|
-
|
|
35
|
+
s.value && (e.value = Math.min(n.defaultBreakpoint ?? f.value, b.value), w({
|
|
36
36
|
height: e.value,
|
|
37
37
|
y: e.value
|
|
38
|
-
}),
|
|
39
|
-
|
|
38
|
+
}), k("y", 0, y, { type: "tween", easings: "easeInOut", bounce: 0, duration: 300 }), T.value = !0, $.value = !0, window.addEventListener("keydown", N), n.blocking && setTimeout(() => {
|
|
39
|
+
H.value.y.get() - 0 < 0.1 && (o("opened"), Y());
|
|
40
40
|
}, 300));
|
|
41
|
-
},
|
|
42
|
-
|
|
43
|
-
|
|
41
|
+
}, x = () => {
|
|
42
|
+
s.value && (k("y", _.value, y, { type: "tween", bounce: 0, duration: 300 }), T.value = !1, $.value = !1, n.blocking && j(), window.removeEventListener("keydown", N), setTimeout(() => {
|
|
43
|
+
H.value.y.get() - _.value < 0.1 && o("closed");
|
|
44
44
|
}, 300));
|
|
45
45
|
}, Z = () => {
|
|
46
|
-
n.canBackdropClose &&
|
|
46
|
+
n.canBackdropClose && x();
|
|
47
47
|
};
|
|
48
48
|
function ee(t) {
|
|
49
49
|
r.value && t.preventDefault();
|
|
50
50
|
}
|
|
51
51
|
const V = (t) => {
|
|
52
|
-
|
|
52
|
+
s.value && (e.value = t, k("height", e.value, y, {
|
|
53
53
|
type: "tween",
|
|
54
54
|
easings: "easeInOut",
|
|
55
55
|
bounce: 0,
|
|
56
56
|
duration: 300
|
|
57
57
|
}));
|
|
58
|
-
}, A = ({ delta: t }) => {
|
|
59
|
-
|
|
60
|
-
y: n.canSwipeClose ? a.value :
|
|
61
|
-
})),
|
|
62
|
-
height: Math.min(Math.max(
|
|
63
|
-
}));
|
|
64
|
-
},
|
|
65
|
-
|
|
58
|
+
}, A = ({ delta: t, direction: l }) => {
|
|
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)), w({
|
|
60
|
+
y: n.canSwipeClose ? a.value : I(a.value, -_.value, 0, 0.5)
|
|
61
|
+
})), w({
|
|
62
|
+
height: Math.min(Math.max(I(e.value, 0, S.value, 0.25), 0), b.value)
|
|
63
|
+
}), l[1] > 0 ? o("dragging-down") : l[1] < 0 && o("dragging-up"));
|
|
64
|
+
}, O = () => {
|
|
65
|
+
s.value && (a.value = n.canSwipeClose ? [0, e.value].reduce((t, l) => Math.abs(l - a.value) < Math.abs(t - a.value) ? l : t) : 0, k("y", a.value, y, { type: "tween", easings: "easeInOut", bounce: 0, duration: 300 }), a.value === e.value && (a.value = 0, x()), e.value = Math.min(D.value[U.value], b.value), k("height", e.value, y, { type: "tween", easings: "easeInOut", bounce: 0, duration: 300 }));
|
|
66
66
|
};
|
|
67
|
-
return
|
|
67
|
+
return E(
|
|
68
68
|
{
|
|
69
69
|
onDrag: A,
|
|
70
|
-
onDragEnd:
|
|
70
|
+
onDragEnd: O
|
|
71
71
|
},
|
|
72
72
|
{
|
|
73
73
|
domTarget: h,
|
|
74
74
|
drag: { filterTaps: !0 }
|
|
75
75
|
}
|
|
76
|
-
),
|
|
76
|
+
), E(
|
|
77
77
|
{
|
|
78
78
|
onDrag: A,
|
|
79
|
-
onDragEnd:
|
|
79
|
+
onDragEnd: O
|
|
80
80
|
},
|
|
81
81
|
{
|
|
82
82
|
domTarget: v,
|
|
83
83
|
drag: { filterTaps: !0 }
|
|
84
84
|
}
|
|
85
|
-
),
|
|
85
|
+
), E(
|
|
86
86
|
{
|
|
87
87
|
onDragStart: ({ direction: t }) => {
|
|
88
|
-
const
|
|
89
|
-
|
|
88
|
+
const l = m.value.scrollTop === 0, M = t[1] > 0;
|
|
89
|
+
D.value.length === 1 ? a.value === 0 && l && (r.value = M) : (n.expandOnContentDrag && e.value !== S.value && (r.value = !0), e.value === S.value && l && (r.value = M));
|
|
90
90
|
},
|
|
91
|
-
onDrag: ({ delta: t }) => {
|
|
91
|
+
onDrag: ({ delta: t, direction: l }) => {
|
|
92
92
|
if (!n.expandOnContentDrag) {
|
|
93
93
|
r.value = !1;
|
|
94
94
|
return;
|
|
95
95
|
}
|
|
96
|
-
if (!
|
|
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)),
|
|
98
|
-
y: n.canSwipeClose ? a.value :
|
|
99
|
-
})), e.value > S.value && (e.value = S.value);
|
|
100
|
-
const
|
|
101
|
-
|
|
96
|
+
if (!s.value) return;
|
|
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)), w({
|
|
98
|
+
y: n.canSwipeClose ? a.value : I(a.value, -_.value, 0, 0.5)
|
|
99
|
+
})), e.value > S.value && (e.value = S.value), e.value = Math.min(e.value, b.value);
|
|
100
|
+
const M = m.value.scrollTop === 0;
|
|
101
|
+
D.value.length === 1 ? t[1] < 0 && a.value === 0 && M && (r.value = !1) : e.value === S.value && (r.value = !1), w({
|
|
102
102
|
height: e.value
|
|
103
|
-
});
|
|
103
|
+
}), l[1] > 0 ? o("dragging-down") : l[1] < 0 && o("dragging-up");
|
|
104
104
|
},
|
|
105
|
-
onDragEnd:
|
|
105
|
+
onDragEnd: O
|
|
106
106
|
},
|
|
107
107
|
{
|
|
108
|
-
domTarget:
|
|
108
|
+
domTarget: F,
|
|
109
109
|
drag: { filterTaps: !0 }
|
|
110
110
|
}
|
|
111
111
|
), ne(p, () => {
|
|
112
|
-
|
|
113
|
-
|
|
112
|
+
o("minHeight", p.value), D.value.length === 1 && R(() => {
|
|
113
|
+
D.value[0] === p.value && V(Math.min(p.value, b.value));
|
|
114
114
|
});
|
|
115
115
|
}), oe(() => {
|
|
116
|
-
|
|
116
|
+
o("minHeight", p.value), o("maxHeight", b.value), e.value = n.defaultBreakpoint ?? Number(p.value), w({
|
|
117
117
|
height: e.value,
|
|
118
118
|
y: e.value
|
|
119
119
|
}), R(() => {
|
|
120
|
-
|
|
120
|
+
o("ready");
|
|
121
121
|
});
|
|
122
|
-
}), g({ open: X, close:
|
|
123
|
-
|
|
122
|
+
}), g({ open: X, close: x, snapToPoint: V }), (t, l) => (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
|
-
ref:
|
|
128
|
+
ref: W,
|
|
129
129
|
"data-vsbs-backdrop": "",
|
|
130
|
-
onClick:
|
|
130
|
+
onClick: l[0] || (l[0] = (M) => Z())
|
|
131
131
|
}, null, 512), [
|
|
132
|
-
[
|
|
132
|
+
[ce, T.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
|
-
"data-vsbs-sheet-show":
|
|
141
|
+
"data-vsbs-sheet-show": T.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
|
+
P(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
|
-
ref:
|
|
161
|
+
ref: F,
|
|
162
162
|
"data-vsbs-content-wrapper": ""
|
|
163
163
|
}, [
|
|
164
|
-
|
|
164
|
+
d("div", {
|
|
165
165
|
ref_key: "sheetContent",
|
|
166
|
-
ref:
|
|
166
|
+
ref: L,
|
|
167
167
|
"data-vsbs-content": ""
|
|
168
168
|
}, [
|
|
169
|
-
|
|
169
|
+
P(t.$slots, "default", {}, void 0, !0)
|
|
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
|
+
P(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, o] of g)
|
|
187
|
+
i[n] = o;
|
|
188
|
+
return i;
|
|
189
|
+
}, He = /* @__PURE__ */ Ce(Se, [["__scopeId", "data-v-d498ee26"]]);
|
|
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-d498ee26]{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-d498ee26]{box-shadow:0 -5px 60px #26597333,0 -1px #2659730f}[data-vsbs-sheet][data-v-d498ee26]{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-d498ee26]{visibility:visible}[data-vsbs-header][data-v-d498ee26]{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-d498ee26]: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-d498ee26]:empty{box-shadow:none;padding:12px 16px 8px}[data-vsbs-footer][data-v-d498ee26]{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-d498ee26]:empty{display:none}[data-vsbs-scroll][data-v-d498ee26]{flex-grow:1;overflow-y:auto;overscroll-behavior:contain}[data-vsbs-content-wrapper][data-v-d498ee26]{height:100%}[data-vsbs-content][data-v-d498ee26]{display:grid;padding:1vh 3vh 3vh;-webkit-user-select:none;user-select:none}.fade-enter-active[data-v-d498ee26],.fade-leave-active[data-v-d498ee26]{transition:opacity .3s ease}.fade-enter-from[data-v-d498ee26],.fade-leave-to[data-v-d498ee26]{opacity:0}
|
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": "1.0.
|
|
35
|
+
"version": "1.0.6",
|
|
36
36
|
"type": "module",
|
|
37
37
|
"exports": {
|
|
38
38
|
".": {
|
|
@@ -49,7 +49,8 @@
|
|
|
49
49
|
"scripts": {
|
|
50
50
|
"build": "vue-tsc -b && vite build",
|
|
51
51
|
"build:watch": "vite build --watch",
|
|
52
|
-
"preview": "vite preview"
|
|
52
|
+
"preview": "vite preview",
|
|
53
|
+
"publish": "npm run build && npm publish --access public"
|
|
53
54
|
},
|
|
54
55
|
"peerDependencies": {
|
|
55
56
|
"vue": ">=3.3",
|