@douxcode/vue-spring-bottom-sheet 1.2.0 → 1.2.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/README.md +8 -8
- package/dist/BottomSheet.d.ts +12 -3
- package/dist/index.mjs +104 -101
- package/dist/style.css +1 -1
- package/package.json +14 -14
package/README.md
CHANGED
|
@@ -95,14 +95,14 @@ For Nuxt 3, just wrap component in `<ClientOnly>`
|
|
|
95
95
|
|
|
96
96
|
### Prop Definitions
|
|
97
97
|
|
|
98
|
-
| Prop | Type | Description
|
|
99
|
-
| ------------------- | -------- |
|
|
100
|
-
| snapPoints | Number[] | Defines custom snapping positions for the bottom sheet
|
|
101
|
-
| defaultSnapPoint | Number | Specifies the default snap point
|
|
102
|
-
| blocking | Boolean | Controls whether the bottom sheet blocks interactions with underlying content
|
|
103
|
-
| canSwipeClose | Boolean | Enables or disables swipe gestures for closing the sheet
|
|
104
|
-
| canOverlayClose | Boolean | Allows tapping the overlay to close the sheet
|
|
105
|
-
| expandOnContentDrag | Boolean | Enables expanding the sheet by dragging its content
|
|
98
|
+
| Prop | Type | Description | Example |
|
|
99
|
+
| ------------------- | -------- | --------------------------------------------------------------------------------------------------- | -------------------------------- |
|
|
100
|
+
| snapPoints | Number[] | Defines custom snapping positions for the bottom sheet | `:snapPoints="[300, 600, 900]"` |
|
|
101
|
+
| defaultSnapPoint | Number | Specifies the default snap point. Note that at least one snapPoint must be specified for it to work | `:default-snap-point="600"` |
|
|
102
|
+
| blocking | Boolean | Controls whether the bottom sheet blocks interactions with underlying content | `:blocking="true"` |
|
|
103
|
+
| canSwipeClose | Boolean | Enables or disables swipe gestures for closing the sheet | `:can-swipe-close="true"` |
|
|
104
|
+
| canOverlayClose | Boolean | Allows tapping the overlay to close the sheet | `:can-overlay-close="true"` |
|
|
105
|
+
| expandOnContentDrag | Boolean | Enables expanding the sheet by dragging its content | `:expand-on-content-drag="true"` |
|
|
106
106
|
|
|
107
107
|
### Default Values
|
|
108
108
|
|
package/dist/BottomSheet.d.ts
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
interface IProps {
|
|
2
2
|
duration?: number;
|
|
3
3
|
snapPoints?: number[];
|
|
4
|
-
|
|
4
|
+
defaultSnapPoint?: number;
|
|
5
5
|
blocking?: boolean;
|
|
6
6
|
canSwipeClose?: boolean;
|
|
7
7
|
canBackdropClose?: boolean;
|
|
8
8
|
expandOnContentDrag?: boolean;
|
|
9
9
|
}
|
|
10
10
|
declare function __VLS_template(): {
|
|
11
|
+
attrs: Partial<{}>;
|
|
11
12
|
slots: {
|
|
12
13
|
header?(_: {}): any;
|
|
13
14
|
default?(_: {}): any;
|
|
@@ -22,7 +23,7 @@ declare function __VLS_template(): {
|
|
|
22
23
|
sheetContent: HTMLDivElement;
|
|
23
24
|
sheetFooter: HTMLDivElement;
|
|
24
25
|
};
|
|
25
|
-
|
|
26
|
+
rootEl: any;
|
|
26
27
|
};
|
|
27
28
|
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
28
29
|
declare const __VLS_component: import('vue').DefineComponent<IProps, {
|
|
@@ -51,7 +52,15 @@ declare const __VLS_component: import('vue').DefineComponent<IProps, {
|
|
|
51
52
|
canSwipeClose: boolean;
|
|
52
53
|
canBackdropClose: boolean;
|
|
53
54
|
expandOnContentDrag: boolean;
|
|
54
|
-
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
|
|
55
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
|
|
56
|
+
backdrop: HTMLDivElement;
|
|
57
|
+
sheet: HTMLDivElement;
|
|
58
|
+
sheetHeader: HTMLDivElement;
|
|
59
|
+
sheetScroll: HTMLDivElement;
|
|
60
|
+
sheetContentWrapper: HTMLDivElement;
|
|
61
|
+
sheetContent: HTMLDivElement;
|
|
62
|
+
sheetFooter: HTMLDivElement;
|
|
63
|
+
}, any>;
|
|
55
64
|
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
56
65
|
export default _default;
|
|
57
66
|
type __VLS_WithTemplateSlots<T, S> = T & {
|
package/dist/index.mjs
CHANGED
|
@@ -1,54 +1,54 @@
|
|
|
1
|
-
import { computed as y, defineComponent as
|
|
2
|
-
import { useWindowSize as
|
|
1
|
+
import { computed as y, defineComponent as ve, useCssVars as de, ref as p, toRefs as ce, watch as J, nextTick as A, onMounted as fe, openBlock as ge, createBlock as pe, Teleport as he, createElementVNode as b, createVNode as me, Transition as be, withCtx as ye, withDirectives as Se, vShow as we, renderSlot as R } from "vue";
|
|
2
|
+
import { useWindowSize as ke, useElementBounding as I, useScrollLock as Z } from "@vueuse/core";
|
|
3
3
|
import { useGesture as z, rubberbandIfOutOfBounds as N } from "@vueuse/gesture";
|
|
4
|
-
import { useMotionProperties as
|
|
5
|
-
import { useFocusTrap as
|
|
6
|
-
function
|
|
4
|
+
import { useMotionProperties as Te, useMotionTransitions as Ce, useMotionControls as De } from "@vueuse/motion";
|
|
5
|
+
import { useFocusTrap as xe } from "@vueuse/integrations/useFocusTrap";
|
|
6
|
+
function Me(n, u, a) {
|
|
7
7
|
let e = (o) => n(o, ...u);
|
|
8
8
|
return a === void 0 ? e : Object.assign(e, { lazy: a, lazyArgs: u });
|
|
9
9
|
}
|
|
10
|
-
function
|
|
10
|
+
function Pe(n, u, a) {
|
|
11
11
|
let e = n.length - u.length;
|
|
12
12
|
if (e === 0) return n(...u);
|
|
13
|
-
if (e === 1) return
|
|
13
|
+
if (e === 1) return Me(n, u, a);
|
|
14
14
|
throw new Error("Wrong number of arguments");
|
|
15
15
|
}
|
|
16
|
-
function
|
|
17
|
-
let s, r, f,
|
|
18
|
-
let
|
|
19
|
-
|
|
16
|
+
function _e(n, { triggerAt: u = "end", minQuietPeriodMs: a, maxBurstDurationMs: e, minGapMs: o, reducer: v = He }) {
|
|
17
|
+
let s, r, f, S, C = () => {
|
|
18
|
+
let d = f;
|
|
19
|
+
d !== void 0 && (f = void 0, n(d), o !== void 0 && (r = setTimeout(O, o)));
|
|
20
20
|
}, O = () => {
|
|
21
21
|
clearTimeout(r), r = void 0, s === void 0 && C();
|
|
22
|
-
},
|
|
23
|
-
clearTimeout(s), s = void 0,
|
|
22
|
+
}, w = () => {
|
|
23
|
+
clearTimeout(s), s = void 0, S = void 0, r === void 0 && C();
|
|
24
24
|
};
|
|
25
|
-
return { call: (...
|
|
25
|
+
return { call: (...d) => {
|
|
26
26
|
let g = s === void 0 && r === void 0;
|
|
27
|
-
if ((u !== "start" || g) && (f =
|
|
27
|
+
if ((u !== "start" || g) && (f = v(f, ...d)), !(s === void 0 && !g)) {
|
|
28
28
|
if (a !== void 0 || e !== void 0 || o === void 0) {
|
|
29
29
|
clearTimeout(s);
|
|
30
30
|
let h = Date.now();
|
|
31
|
-
|
|
32
|
-
let W = e === void 0 ? a ?? 0 : Math.min(a ?? e, e - (h -
|
|
33
|
-
s = setTimeout(
|
|
31
|
+
S ?? (S = h);
|
|
32
|
+
let W = e === void 0 ? a ?? 0 : Math.min(a ?? e, e - (h - S));
|
|
33
|
+
s = setTimeout(w, W);
|
|
34
34
|
}
|
|
35
35
|
u !== "end" && g && C();
|
|
36
36
|
}
|
|
37
37
|
}, cancel: () => {
|
|
38
|
-
clearTimeout(s), s = void 0,
|
|
38
|
+
clearTimeout(s), s = void 0, S = void 0, clearTimeout(r), r = void 0, f = void 0;
|
|
39
39
|
}, flush: () => {
|
|
40
|
-
|
|
40
|
+
w(), O();
|
|
41
41
|
}, get isIdle() {
|
|
42
42
|
return s === void 0 && r === void 0;
|
|
43
43
|
} };
|
|
44
44
|
}
|
|
45
|
-
var
|
|
45
|
+
var He = () => "";
|
|
46
46
|
function $(...n) {
|
|
47
|
-
return
|
|
47
|
+
return Pe(Oe, n);
|
|
48
48
|
}
|
|
49
|
-
var
|
|
50
|
-
function
|
|
51
|
-
const a = y(() => n.value.sort()), e = y(() => a.value[0]), o = y(() => a.value[a.value.length - 1]),
|
|
49
|
+
var Oe = (n, { min: u, max: a }) => u !== void 0 && n < u ? u : a !== void 0 && n > a ? a : n;
|
|
50
|
+
function Be(n, u) {
|
|
51
|
+
const a = y(() => n.value.sort()), e = y(() => a.value[0]), o = y(() => a.value[a.value.length - 1]), v = y(() => {
|
|
52
52
|
const s = a.value.reduce(
|
|
53
53
|
(r, f) => Math.abs(f - u.value) < Math.abs(r - u.value) ? f : r
|
|
54
54
|
);
|
|
@@ -58,15 +58,15 @@ function Ee(n, u) {
|
|
|
58
58
|
minSnap: e,
|
|
59
59
|
maxSnap: o,
|
|
60
60
|
snapPoints: n,
|
|
61
|
-
closestSnapPointIndex:
|
|
61
|
+
closestSnapPointIndex: v
|
|
62
62
|
};
|
|
63
63
|
}
|
|
64
|
-
const
|
|
64
|
+
const Ee = { "data-vsbs-container": "" }, Ie = ["data-vsbs-shadow", "data-vsbs-sheet-show"], $e = /* @__PURE__ */ ve({
|
|
65
65
|
__name: "BottomSheet",
|
|
66
66
|
props: {
|
|
67
67
|
duration: { default: 250 },
|
|
68
68
|
snapPoints: {},
|
|
69
|
-
|
|
69
|
+
defaultSnapPoint: {},
|
|
70
70
|
blocking: { type: Boolean, default: !0 },
|
|
71
71
|
canSwipeClose: { type: Boolean, default: !0 },
|
|
72
72
|
canBackdropClose: { type: Boolean, default: !0 },
|
|
@@ -74,25 +74,28 @@ const Ie = { "data-vsbs-container": "" }, $e = ["data-vsbs-shadow", "data-vsbs-s
|
|
|
74
74
|
},
|
|
75
75
|
emits: ["opened", "closed", "ready", "dragging-up", "dragging-down", "minHeight", "maxHeight"],
|
|
76
76
|
setup(n, { expose: u, emit: a }) {
|
|
77
|
-
|
|
78
|
-
"
|
|
79
|
-
"
|
|
77
|
+
de((i) => ({
|
|
78
|
+
"793b3c04": te.value,
|
|
79
|
+
"96eb7ec2": ae.value
|
|
80
80
|
}));
|
|
81
|
-
const e = n, o = a,
|
|
82
|
-
|
|
83
|
-
|
|
81
|
+
const e = n, o = a, v = p(null), s = p(null), r = p(null), f = p(null), S = p(null), C = p(null), O = p(null), w = p(!1), d = p(e.expandOnContentDrag), { height: g } = ke(), { height: h } = I(v), { height: W } = I(s), { height: Y } = I(r), { height: ee } = I(C), G = xe([v, O], {
|
|
82
|
+
immediate: !1,
|
|
83
|
+
fallbackFocus: () => v.value || document.body
|
|
84
|
+
}), k = y(
|
|
85
|
+
() => Math.ceil(ee.value + W.value + Y.value)
|
|
86
|
+
), te = y(() => `visibility ${e.duration}ms ease-in-out`), ae = y(() => `opacity ${e.duration}ms ease-in-out`), { motionProperties: D } = Te(v), { push: x, stop: ne, motionValues: M } = Ce(), { set: P, stop: F } = De(
|
|
84
87
|
D,
|
|
85
88
|
{},
|
|
86
|
-
{ push: x, motionValues: M, stop:
|
|
87
|
-
), t = p(0), l = p(0), { snapPoints:
|
|
88
|
-
minSnap:
|
|
89
|
+
{ push: x, motionValues: M, stop: ne }
|
|
90
|
+
), t = p(0), l = p(0), { snapPoints: oe } = ce(e), le = y(() => oe.value ?? [k.value]), {
|
|
91
|
+
minSnap: _,
|
|
89
92
|
maxSnap: H,
|
|
90
93
|
snapPoints: T,
|
|
91
|
-
closestSnapPointIndex:
|
|
92
|
-
} =
|
|
94
|
+
closestSnapPointIndex: L
|
|
95
|
+
} = Be(le, t), Q = Z(document.body), j = Z(document.documentElement), K = (i) => {
|
|
93
96
|
i.key === "Escape" && E();
|
|
94
|
-
},
|
|
95
|
-
|
|
97
|
+
}, ue = () => {
|
|
98
|
+
v.value && (t.value = Math.min(e.defaultSnapPoint ?? _.value, g.value), P({
|
|
96
99
|
height: t.value,
|
|
97
100
|
y: t.value
|
|
98
101
|
}), x("y", 0, D, {
|
|
@@ -100,51 +103,51 @@ const Ie = { "data-vsbs-container": "" }, $e = ["data-vsbs-shadow", "data-vsbs-s
|
|
|
100
103
|
easings: "easeInOut",
|
|
101
104
|
bounce: 0,
|
|
102
105
|
duration: e.duration
|
|
103
|
-
}),
|
|
104
|
-
M.value.y.get() - 0 < 0.1 && (o("opened"),
|
|
106
|
+
}), w.value = !0, Q.value = !0, j.value = !0, window.addEventListener("keydown", K), e.blocking && setTimeout(() => {
|
|
107
|
+
M.value.y.get() - 0 < 0.1 && (o("opened"), G.activate());
|
|
105
108
|
}, e.duration));
|
|
106
109
|
}, E = () => {
|
|
107
|
-
|
|
110
|
+
v.value && (x("y", h.value, D, {
|
|
108
111
|
type: "tween",
|
|
109
112
|
bounce: 0,
|
|
110
113
|
duration: e.duration
|
|
111
|
-
}),
|
|
114
|
+
}), w.value = !1, Q.value = !1, j.value = !1, e.blocking && G.deactivate(), window.removeEventListener("keydown", K), setTimeout(() => {
|
|
112
115
|
M.value.y.get() - h.value < 0.1 && o("closed");
|
|
113
116
|
}, e.duration));
|
|
114
|
-
},
|
|
117
|
+
}, ie = () => {
|
|
115
118
|
e.canBackdropClose && E();
|
|
116
119
|
};
|
|
117
|
-
function
|
|
118
|
-
|
|
120
|
+
function se(i) {
|
|
121
|
+
d.value && i.preventDefault();
|
|
119
122
|
}
|
|
120
|
-
const
|
|
123
|
+
const V = (i) => {
|
|
121
124
|
t.value = i, x("height", t.value, D, {
|
|
122
125
|
type: "tween",
|
|
123
126
|
easings: "easeInOut",
|
|
124
127
|
bounce: 0,
|
|
125
128
|
duration: e.duration
|
|
126
129
|
});
|
|
127
|
-
},
|
|
128
|
-
delta: [i,
|
|
129
|
-
direction: [
|
|
130
|
+
}, U = ({
|
|
131
|
+
delta: [i, c],
|
|
132
|
+
direction: [B, m]
|
|
130
133
|
}) => {
|
|
131
|
-
|
|
134
|
+
v.value && (l.value <= 0 && (t.value -= c), t.value <= _.value && (t.value = _.value, l.value += c, P({
|
|
132
135
|
y: e.canSwipeClose ? $(l.value, { min: 0 }) : $(N(l.value, -h.value, 0, 0.5), { min: 0 })
|
|
133
|
-
})),
|
|
136
|
+
})), P({
|
|
134
137
|
height: $(N(t.value, 0, H.value, 0.25), {
|
|
135
138
|
min: 0,
|
|
136
139
|
max: g.value
|
|
137
140
|
})
|
|
138
141
|
}), m > 0 ? o("dragging-down") : m < 0 && o("dragging-up"));
|
|
139
|
-
},
|
|
140
|
-
|
|
141
|
-
(i,
|
|
142
|
+
}, X = () => {
|
|
143
|
+
v.value && (l.value = e.canSwipeClose ? [0, t.value].reduce(
|
|
144
|
+
(i, c) => Math.abs(c - l.value) < Math.abs(i - l.value) ? c : i
|
|
142
145
|
) : 0, x("y", l.value, D, {
|
|
143
146
|
type: "tween",
|
|
144
147
|
easings: "easeInOut",
|
|
145
148
|
bounce: 0,
|
|
146
149
|
duration: e.duration
|
|
147
|
-
}), l.value === t.value && (l.value = 0, E()), t.value = Math.min(T.value[
|
|
150
|
+
}), l.value === t.value && (l.value = 0, E()), t.value = Math.min(T.value[L.value], g.value), x("height", t.value, D, {
|
|
148
151
|
type: "tween",
|
|
149
152
|
easings: "easeInOut",
|
|
150
153
|
bounce: 0,
|
|
@@ -154,10 +157,10 @@ const Ie = { "data-vsbs-container": "" }, $e = ["data-vsbs-shadow", "data-vsbs-s
|
|
|
154
157
|
z(
|
|
155
158
|
{
|
|
156
159
|
onDragStart: () => {
|
|
157
|
-
t.value = h.value, l.value = M.value.y.get(),
|
|
160
|
+
t.value = h.value, l.value = M.value.y.get(), F();
|
|
158
161
|
},
|
|
159
|
-
onDrag:
|
|
160
|
-
onDragEnd:
|
|
162
|
+
onDrag: U,
|
|
163
|
+
onDragEnd: X
|
|
161
164
|
},
|
|
162
165
|
{
|
|
163
166
|
domTarget: s,
|
|
@@ -166,10 +169,10 @@ const Ie = { "data-vsbs-container": "" }, $e = ["data-vsbs-shadow", "data-vsbs-s
|
|
|
166
169
|
), z(
|
|
167
170
|
{
|
|
168
171
|
onDragStart: () => {
|
|
169
|
-
t.value = h.value, l.value = M.value.y.get(),
|
|
172
|
+
t.value = h.value, l.value = M.value.y.get(), F();
|
|
170
173
|
},
|
|
171
|
-
onDrag:
|
|
172
|
-
onDragEnd:
|
|
174
|
+
onDrag: U,
|
|
175
|
+
onDragEnd: X
|
|
173
176
|
},
|
|
174
177
|
{
|
|
175
178
|
domTarget: r,
|
|
@@ -177,73 +180,73 @@ const Ie = { "data-vsbs-container": "" }, $e = ["data-vsbs-shadow", "data-vsbs-s
|
|
|
177
180
|
}
|
|
178
181
|
), z(
|
|
179
182
|
{
|
|
180
|
-
onDragStart: ({ direction: [i,
|
|
181
|
-
t.value = h.value, l.value = M.value.y.get(),
|
|
182
|
-
const
|
|
183
|
-
T.value.length === 1 ? l.value === 0 &&
|
|
183
|
+
onDragStart: ({ direction: [i, c] }) => {
|
|
184
|
+
t.value = h.value, l.value = M.value.y.get(), F();
|
|
185
|
+
const B = f.value.scrollTop === 0, m = c > 0;
|
|
186
|
+
T.value.length === 1 ? l.value === 0 && B && (d.value = m) : (e.expandOnContentDrag && t.value !== H.value && (d.value = !0), t.value === H.value && B && (d.value = m));
|
|
184
187
|
},
|
|
185
|
-
onDrag: ({ delta: [i,
|
|
188
|
+
onDrag: ({ delta: [i, c], direction: [B, m] }) => {
|
|
186
189
|
if (!e.expandOnContentDrag) {
|
|
187
|
-
|
|
190
|
+
d.value = !1;
|
|
188
191
|
return;
|
|
189
192
|
}
|
|
190
|
-
if (!
|
|
191
|
-
l.value === 0 &&
|
|
193
|
+
if (!v.value) return;
|
|
194
|
+
l.value === 0 && d.value && e.expandOnContentDrag && (t.value -= c), t.value <= _.value && (t.value = _.value, d.value && e.expandOnContentDrag && (l.value += c), l.value = $(l.value, { min: 0, max: _.value }), P({
|
|
192
195
|
y: e.canSwipeClose ? l.value : N(l.value, -h.value, 0, 0.5)
|
|
193
196
|
})), t.value > H.value && (t.value = H.value), t.value = Math.min(t.value, g.value);
|
|
194
|
-
const
|
|
195
|
-
T.value.length === 1 ?
|
|
197
|
+
const q = f.value.scrollTop === 0;
|
|
198
|
+
T.value.length === 1 ? c < 0 && l.value === 0 && q && (d.value = !1) : t.value === H.value && (d.value = !1), P({
|
|
196
199
|
height: t.value
|
|
197
200
|
}), m > 0 ? o("dragging-down") : m < 0 && o("dragging-up");
|
|
198
201
|
},
|
|
199
|
-
onDragEnd:
|
|
202
|
+
onDragEnd: X
|
|
200
203
|
},
|
|
201
204
|
{
|
|
202
|
-
domTarget:
|
|
205
|
+
domTarget: S,
|
|
203
206
|
drag: { filterTaps: !0 }
|
|
204
207
|
}
|
|
205
208
|
);
|
|
206
|
-
const
|
|
209
|
+
const re = _e(
|
|
207
210
|
() => {
|
|
208
|
-
o("maxHeight", g.value),
|
|
209
|
-
t.value = T.value[
|
|
211
|
+
o("maxHeight", g.value), A(() => {
|
|
212
|
+
t.value = T.value[L.value], V(T.value[L.value]);
|
|
210
213
|
});
|
|
211
214
|
},
|
|
212
215
|
{ minQuietPeriodMs: 50 }
|
|
213
216
|
);
|
|
214
|
-
return
|
|
215
|
-
|
|
216
|
-
}),
|
|
217
|
-
o("minHeight", k.value), T.value.length === 1 &&
|
|
218
|
-
T.value[0] === k.value &&
|
|
217
|
+
return J(g, () => {
|
|
218
|
+
re.call();
|
|
219
|
+
}), J(k, () => {
|
|
220
|
+
o("minHeight", k.value), T.value.length === 1 && A(() => {
|
|
221
|
+
T.value[0] === k.value && V(Math.min(k.value, g.value));
|
|
219
222
|
});
|
|
220
|
-
}),
|
|
221
|
-
o("minHeight", k.value), o("maxHeight", g.value), t.value = e.
|
|
223
|
+
}), fe(() => {
|
|
224
|
+
o("minHeight", k.value), o("maxHeight", g.value), t.value = e.defaultSnapPoint ?? Number(k.value), P({
|
|
222
225
|
height: t.value,
|
|
223
226
|
y: t.value
|
|
224
|
-
}),
|
|
227
|
+
}), A(() => {
|
|
225
228
|
o("ready");
|
|
226
229
|
});
|
|
227
|
-
}), u({ open:
|
|
228
|
-
b("div",
|
|
229
|
-
be
|
|
230
|
-
default:
|
|
230
|
+
}), u({ open: ue, close: E, snapToPoint: V }), (i, c) => (ge(), pe(he, { to: "body" }, [
|
|
231
|
+
b("div", Ee, [
|
|
232
|
+
me(be, { name: "fade" }, {
|
|
233
|
+
default: ye(() => [
|
|
231
234
|
Se(b("div", {
|
|
232
235
|
ref_key: "backdrop",
|
|
233
236
|
ref: O,
|
|
234
237
|
"data-vsbs-backdrop": "",
|
|
235
|
-
onClick:
|
|
238
|
+
onClick: c[0] || (c[0] = (B) => ie())
|
|
236
239
|
}, null, 512), [
|
|
237
|
-
[
|
|
240
|
+
[we, w.value && i.blocking]
|
|
238
241
|
])
|
|
239
242
|
]),
|
|
240
243
|
_: 1
|
|
241
244
|
}),
|
|
242
245
|
b("div", {
|
|
243
246
|
ref_key: "sheet",
|
|
244
|
-
ref:
|
|
247
|
+
ref: v,
|
|
245
248
|
"data-vsbs-shadow": !i.blocking,
|
|
246
|
-
"data-vsbs-sheet-show":
|
|
249
|
+
"data-vsbs-sheet-show": w.value,
|
|
247
250
|
"aria-modal": "true",
|
|
248
251
|
"data-vsbs-sheet": "",
|
|
249
252
|
tabindex: "-1"
|
|
@@ -259,11 +262,11 @@ const Ie = { "data-vsbs-container": "" }, $e = ["data-vsbs-shadow", "data-vsbs-s
|
|
|
259
262
|
ref_key: "sheetScroll",
|
|
260
263
|
ref: f,
|
|
261
264
|
"data-vsbs-scroll": "",
|
|
262
|
-
onTouchmove:
|
|
265
|
+
onTouchmove: se
|
|
263
266
|
}, [
|
|
264
267
|
b("div", {
|
|
265
268
|
ref_key: "sheetContentWrapper",
|
|
266
|
-
ref:
|
|
269
|
+
ref: S,
|
|
267
270
|
"data-vsbs-content-wrapper": ""
|
|
268
271
|
}, [
|
|
269
272
|
b("div", {
|
|
@@ -282,16 +285,16 @@ const Ie = { "data-vsbs-container": "" }, $e = ["data-vsbs-shadow", "data-vsbs-s
|
|
|
282
285
|
}, [
|
|
283
286
|
R(i.$slots, "footer", {}, void 0, !0)
|
|
284
287
|
], 512)
|
|
285
|
-
], 8,
|
|
288
|
+
], 8, Ie)
|
|
286
289
|
])
|
|
287
290
|
]));
|
|
288
291
|
}
|
|
289
|
-
}),
|
|
292
|
+
}), We = (n, u) => {
|
|
290
293
|
const a = n.__vccOpts || n;
|
|
291
294
|
for (const [e, o] of u)
|
|
292
295
|
a[e] = o;
|
|
293
296
|
return a;
|
|
294
|
-
},
|
|
297
|
+
}, Re = /* @__PURE__ */ We($e, [["__scopeId", "data-v-69256342"]]);
|
|
295
298
|
export {
|
|
296
|
-
|
|
299
|
+
Re as default
|
|
297
300
|
};
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
[data-vsbs-backdrop][data-v-
|
|
1
|
+
[data-vsbs-container][data-v-69256342]{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-69256342]{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-69256342]{box-shadow:0 -5px 60px 0 var(--vsbs-shadow-color, rgba(89, 89, 89, .2))}[data-vsbs-sheet][data-v-69256342]{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:var(--793b3c04);visibility:hidden;width:100%;will-change:height;z-index:2}[data-vsbs-sheet-show=true][data-v-69256342]{visibility:visible}[data-vsbs-header][data-v-69256342]{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}[data-vsbs-header][data-v-69256342]: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-69256342]:empty{box-shadow:none;padding:12px var(--vsbs-padding-x, 16px) 8px}[data-vsbs-footer][data-v-69256342]{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-69256342]:empty{display:none}[data-vsbs-scroll][data-v-69256342]{flex-grow:1;overflow-y:auto;overscroll-behavior:contain}[data-vsbs-content-wrapper][data-v-69256342]{height:100%}[data-vsbs-content][data-v-69256342]{display:grid;padding:1vh var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}.fade-enter-active[data-v-69256342],.fade-leave-active[data-v-69256342]{transition:var(--96eb7ec2)}.fade-enter-from[data-v-69256342],.fade-leave-to[data-v-69256342]{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.2.
|
|
35
|
+
"version": "1.2.2",
|
|
36
36
|
"type": "module",
|
|
37
37
|
"exports": {
|
|
38
38
|
".": {
|
|
@@ -60,28 +60,28 @@
|
|
|
60
60
|
"vue": ">=3.3"
|
|
61
61
|
},
|
|
62
62
|
"dependencies": {
|
|
63
|
-
"@vueuse/core": "^12.
|
|
63
|
+
"@vueuse/core": "^12.5.0",
|
|
64
64
|
"@vueuse/gesture": "^2.0.0",
|
|
65
|
-
"@vueuse/integrations": "^12.
|
|
65
|
+
"@vueuse/integrations": "^12.5.0",
|
|
66
66
|
"@vueuse/motion": "^2.2.6",
|
|
67
|
-
"focus-trap": "^7",
|
|
68
|
-
"remeda": "^2.
|
|
69
|
-
"vue": "
|
|
67
|
+
"focus-trap": "^7.6.4",
|
|
68
|
+
"remeda": "^2.20.0",
|
|
69
|
+
"vue": "^3.5.13"
|
|
70
70
|
},
|
|
71
71
|
"devDependencies": {
|
|
72
|
-
"@types/node": "^22.10.
|
|
72
|
+
"@types/node": "^22.10.10",
|
|
73
73
|
"@vitejs/plugin-vue": "^5.2.1",
|
|
74
|
-
"@vue/eslint-config-prettier": "^10.
|
|
75
|
-
"@vue/eslint-config-typescript": "^14.
|
|
74
|
+
"@vue/eslint-config-prettier": "^10.2.0",
|
|
75
|
+
"@vue/eslint-config-typescript": "^14.3.0",
|
|
76
76
|
"@vue/tsconfig": "^0.7.0",
|
|
77
77
|
"ajv": "^8.17.1",
|
|
78
|
-
"eslint": "^9.
|
|
78
|
+
"eslint": "^9.19.0",
|
|
79
79
|
"eslint-plugin-vue": "^9.32.0",
|
|
80
80
|
"prettier": "^3.4.2",
|
|
81
|
-
"typescript": "~5.6.
|
|
82
|
-
"vite": "^6.0.
|
|
83
|
-
"vite-plugin-dts": "^4.
|
|
84
|
-
"vue-tsc": "^2.
|
|
81
|
+
"typescript": "~5.6.3",
|
|
82
|
+
"vite": "^6.0.11",
|
|
83
|
+
"vite-plugin-dts": "^4.5.0",
|
|
84
|
+
"vue-tsc": "^2.2.0"
|
|
85
85
|
},
|
|
86
86
|
"files": [
|
|
87
87
|
"dist",
|