@douxcode/vue-spring-bottom-sheet 1.2.0 → 1.2.1
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/dist/index.mjs +106 -101
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -1,31 +1,31 @@
|
|
|
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 we, vShow as Se, 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
|
|
7
|
-
let e = (
|
|
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(o, u, a) {
|
|
7
|
+
let e = (n) => o(n, ...u);
|
|
8
8
|
return a === void 0 ? e : Object.assign(e, { lazy: a, lazyArgs: u });
|
|
9
9
|
}
|
|
10
|
-
function
|
|
11
|
-
let e =
|
|
12
|
-
if (e === 0) return
|
|
13
|
-
if (e === 1) return
|
|
10
|
+
function _e(o, u, a) {
|
|
11
|
+
let e = o.length - u.length;
|
|
12
|
+
if (e === 0) return o(...u);
|
|
13
|
+
if (e === 1) return Me(o, u, a);
|
|
14
14
|
throw new Error("Wrong number of arguments");
|
|
15
15
|
}
|
|
16
|
-
function
|
|
16
|
+
function Be(o, { triggerAt: u = "end", minQuietPeriodMs: a, maxBurstDurationMs: e, minGapMs: n, reducer: v = He }) {
|
|
17
17
|
let s, r, f, w, C = () => {
|
|
18
|
-
let
|
|
19
|
-
|
|
18
|
+
let d = f;
|
|
19
|
+
d !== void 0 && (f = void 0, o(d), n !== void 0 && (r = setTimeout(O, n)));
|
|
20
20
|
}, O = () => {
|
|
21
21
|
clearTimeout(r), r = void 0, s === void 0 && C();
|
|
22
22
|
}, S = () => {
|
|
23
23
|
clearTimeout(s), s = void 0, w = 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 =
|
|
28
|
-
if (a !== void 0 || e !== void 0 ||
|
|
27
|
+
if ((u !== "start" || g) && (f = v(f, ...d)), !(s === void 0 && !g)) {
|
|
28
|
+
if (a !== void 0 || e !== void 0 || n === void 0) {
|
|
29
29
|
clearTimeout(s);
|
|
30
30
|
let h = Date.now();
|
|
31
31
|
w ?? (w = h);
|
|
@@ -42,13 +42,13 @@ function He(n, { triggerAt: u = "end", minQuietPeriodMs: a, maxBurstDurationMs:
|
|
|
42
42
|
return s === void 0 && r === void 0;
|
|
43
43
|
} };
|
|
44
44
|
}
|
|
45
|
-
var
|
|
46
|
-
function $(...
|
|
47
|
-
return
|
|
45
|
+
var He = () => "";
|
|
46
|
+
function $(...o) {
|
|
47
|
+
return _e(Oe, o);
|
|
48
48
|
}
|
|
49
|
-
var
|
|
50
|
-
function
|
|
51
|
-
const a = y(() =>
|
|
49
|
+
var Oe = (o, { min: u, max: a }) => u !== void 0 && o < u ? u : a !== void 0 && o > a ? a : o;
|
|
50
|
+
function Pe(o, u) {
|
|
51
|
+
const a = y(() => o.value.sort()), e = y(() => a.value[0]), n = 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
|
);
|
|
@@ -56,12 +56,12 @@ function Ee(n, u) {
|
|
|
56
56
|
});
|
|
57
57
|
return {
|
|
58
58
|
minSnap: e,
|
|
59
|
-
maxSnap:
|
|
60
|
-
snapPoints:
|
|
61
|
-
closestSnapPointIndex:
|
|
59
|
+
maxSnap: n,
|
|
60
|
+
snapPoints: o,
|
|
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 },
|
|
@@ -73,26 +73,31 @@ const Ie = { "data-vsbs-container": "" }, $e = ["data-vsbs-shadow", "data-vsbs-s
|
|
|
73
73
|
expandOnContentDrag: { type: Boolean, default: !0 }
|
|
74
74
|
},
|
|
75
75
|
emits: ["opened", "closed", "ready", "dragging-up", "dragging-down", "minHeight", "maxHeight"],
|
|
76
|
-
setup(
|
|
77
|
-
|
|
78
|
-
"
|
|
79
|
-
"
|
|
76
|
+
setup(o, { expose: u, emit: a }) {
|
|
77
|
+
de((i) => ({
|
|
78
|
+
"547540e6": te.value,
|
|
79
|
+
"5567c570": ae.value
|
|
80
80
|
}));
|
|
81
|
-
const e =
|
|
82
|
-
|
|
83
|
-
|
|
81
|
+
const e = o, n = a, v = p(null), s = p(null), r = p(null), f = p(null), w = p(null), C = p(null), O = p(null), S = 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);
|
|
82
|
+
let G = xe([v, O], {
|
|
83
|
+
immediate: !1,
|
|
84
|
+
fallbackFocus: () => v.value || document.body
|
|
85
|
+
});
|
|
86
|
+
const k = y(
|
|
87
|
+
() => Math.ceil(ee.value + W.value + Y.value)
|
|
88
|
+
), 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: oe, motionValues: M } = Ce(), { set: _, stop: F } = De(
|
|
84
89
|
D,
|
|
85
90
|
{},
|
|
86
91
|
{ push: x, motionValues: M, stop: oe }
|
|
87
|
-
), t = p(0), l = p(0), { snapPoints:
|
|
92
|
+
), t = p(0), l = p(0), { snapPoints: ne } = ce(e), le = y(() => ne.value ?? [k.value]), {
|
|
88
93
|
minSnap: B,
|
|
89
94
|
maxSnap: H,
|
|
90
95
|
snapPoints: T,
|
|
91
|
-
closestSnapPointIndex:
|
|
92
|
-
} =
|
|
96
|
+
closestSnapPointIndex: L
|
|
97
|
+
} = Pe(le, t), Q = Z(document.body), j = Z(document.documentElement), K = (i) => {
|
|
93
98
|
i.key === "Escape" && E();
|
|
94
|
-
},
|
|
95
|
-
|
|
99
|
+
}, ue = () => {
|
|
100
|
+
v.value && (t.value = Math.min(e.defaultBreakpoint ?? B.value, g.value), _({
|
|
96
101
|
height: t.value,
|
|
97
102
|
y: t.value
|
|
98
103
|
}), x("y", 0, D, {
|
|
@@ -100,51 +105,51 @@ const Ie = { "data-vsbs-container": "" }, $e = ["data-vsbs-shadow", "data-vsbs-s
|
|
|
100
105
|
easings: "easeInOut",
|
|
101
106
|
bounce: 0,
|
|
102
107
|
duration: e.duration
|
|
103
|
-
}), S.value = !0,
|
|
104
|
-
M.value.y.get() - 0 < 0.1 && (
|
|
108
|
+
}), S.value = !0, Q.value = !0, j.value = !0, window.addEventListener("keydown", K), e.blocking && setTimeout(() => {
|
|
109
|
+
M.value.y.get() - 0 < 0.1 && (n("opened"), G.activate());
|
|
105
110
|
}, e.duration));
|
|
106
111
|
}, E = () => {
|
|
107
|
-
|
|
112
|
+
v.value && (x("y", h.value, D, {
|
|
108
113
|
type: "tween",
|
|
109
114
|
bounce: 0,
|
|
110
115
|
duration: e.duration
|
|
111
|
-
}), S.value = !1,
|
|
112
|
-
M.value.y.get() - h.value < 0.1 &&
|
|
116
|
+
}), S.value = !1, Q.value = !1, j.value = !1, e.blocking && G.deactivate(), window.removeEventListener("keydown", K), setTimeout(() => {
|
|
117
|
+
M.value.y.get() - h.value < 0.1 && n("closed");
|
|
113
118
|
}, e.duration));
|
|
114
|
-
},
|
|
119
|
+
}, ie = () => {
|
|
115
120
|
e.canBackdropClose && E();
|
|
116
121
|
};
|
|
117
|
-
function
|
|
118
|
-
|
|
122
|
+
function se(i) {
|
|
123
|
+
d.value && i.preventDefault();
|
|
119
124
|
}
|
|
120
|
-
const
|
|
125
|
+
const V = (i) => {
|
|
121
126
|
t.value = i, x("height", t.value, D, {
|
|
122
127
|
type: "tween",
|
|
123
128
|
easings: "easeInOut",
|
|
124
129
|
bounce: 0,
|
|
125
130
|
duration: e.duration
|
|
126
131
|
});
|
|
127
|
-
},
|
|
128
|
-
delta: [i,
|
|
132
|
+
}, U = ({
|
|
133
|
+
delta: [i, c],
|
|
129
134
|
direction: [P, m]
|
|
130
135
|
}) => {
|
|
131
|
-
|
|
136
|
+
v.value && (l.value <= 0 && (t.value -= c), t.value <= B.value && (t.value = B.value, l.value += c, _({
|
|
132
137
|
y: e.canSwipeClose ? $(l.value, { min: 0 }) : $(N(l.value, -h.value, 0, 0.5), { min: 0 })
|
|
133
138
|
})), _({
|
|
134
139
|
height: $(N(t.value, 0, H.value, 0.25), {
|
|
135
140
|
min: 0,
|
|
136
141
|
max: g.value
|
|
137
142
|
})
|
|
138
|
-
}), m > 0 ?
|
|
139
|
-
},
|
|
140
|
-
|
|
141
|
-
(i,
|
|
143
|
+
}), m > 0 ? n("dragging-down") : m < 0 && n("dragging-up"));
|
|
144
|
+
}, X = () => {
|
|
145
|
+
v.value && (l.value = e.canSwipeClose ? [0, t.value].reduce(
|
|
146
|
+
(i, c) => Math.abs(c - l.value) < Math.abs(i - l.value) ? c : i
|
|
142
147
|
) : 0, x("y", l.value, D, {
|
|
143
148
|
type: "tween",
|
|
144
149
|
easings: "easeInOut",
|
|
145
150
|
bounce: 0,
|
|
146
151
|
duration: e.duration
|
|
147
|
-
}), l.value === t.value && (l.value = 0, E()), t.value = Math.min(T.value[
|
|
152
|
+
}), l.value === t.value && (l.value = 0, E()), t.value = Math.min(T.value[L.value], g.value), x("height", t.value, D, {
|
|
148
153
|
type: "tween",
|
|
149
154
|
easings: "easeInOut",
|
|
150
155
|
bounce: 0,
|
|
@@ -154,10 +159,10 @@ const Ie = { "data-vsbs-container": "" }, $e = ["data-vsbs-shadow", "data-vsbs-s
|
|
|
154
159
|
z(
|
|
155
160
|
{
|
|
156
161
|
onDragStart: () => {
|
|
157
|
-
t.value = h.value, l.value = M.value.y.get(),
|
|
162
|
+
t.value = h.value, l.value = M.value.y.get(), F();
|
|
158
163
|
},
|
|
159
|
-
onDrag:
|
|
160
|
-
onDragEnd:
|
|
164
|
+
onDrag: U,
|
|
165
|
+
onDragEnd: X
|
|
161
166
|
},
|
|
162
167
|
{
|
|
163
168
|
domTarget: s,
|
|
@@ -166,10 +171,10 @@ const Ie = { "data-vsbs-container": "" }, $e = ["data-vsbs-shadow", "data-vsbs-s
|
|
|
166
171
|
), z(
|
|
167
172
|
{
|
|
168
173
|
onDragStart: () => {
|
|
169
|
-
t.value = h.value, l.value = M.value.y.get(),
|
|
174
|
+
t.value = h.value, l.value = M.value.y.get(), F();
|
|
170
175
|
},
|
|
171
|
-
onDrag:
|
|
172
|
-
onDragEnd:
|
|
176
|
+
onDrag: U,
|
|
177
|
+
onDragEnd: X
|
|
173
178
|
},
|
|
174
179
|
{
|
|
175
180
|
domTarget: r,
|
|
@@ -177,71 +182,71 @@ const Ie = { "data-vsbs-container": "" }, $e = ["data-vsbs-shadow", "data-vsbs-s
|
|
|
177
182
|
}
|
|
178
183
|
), z(
|
|
179
184
|
{
|
|
180
|
-
onDragStart: ({ direction: [i,
|
|
181
|
-
t.value = h.value, l.value = M.value.y.get(),
|
|
182
|
-
const P = f.value.scrollTop === 0, m =
|
|
183
|
-
T.value.length === 1 ? l.value === 0 && P && (
|
|
185
|
+
onDragStart: ({ direction: [i, c] }) => {
|
|
186
|
+
t.value = h.value, l.value = M.value.y.get(), F();
|
|
187
|
+
const P = f.value.scrollTop === 0, m = c > 0;
|
|
188
|
+
T.value.length === 1 ? l.value === 0 && P && (d.value = m) : (e.expandOnContentDrag && t.value !== H.value && (d.value = !0), t.value === H.value && P && (d.value = m));
|
|
184
189
|
},
|
|
185
|
-
onDrag: ({ delta: [i,
|
|
190
|
+
onDrag: ({ delta: [i, c], direction: [P, m] }) => {
|
|
186
191
|
if (!e.expandOnContentDrag) {
|
|
187
|
-
|
|
192
|
+
d.value = !1;
|
|
188
193
|
return;
|
|
189
194
|
}
|
|
190
|
-
if (!
|
|
191
|
-
l.value === 0 &&
|
|
195
|
+
if (!v.value) return;
|
|
196
|
+
l.value === 0 && d.value && e.expandOnContentDrag && (t.value -= c), t.value <= B.value && (t.value = B.value, d.value && e.expandOnContentDrag && (l.value += c), l.value = $(l.value, { min: 0, max: B.value }), _({
|
|
192
197
|
y: e.canSwipeClose ? l.value : N(l.value, -h.value, 0, 0.5)
|
|
193
198
|
})), t.value > H.value && (t.value = H.value), t.value = Math.min(t.value, g.value);
|
|
194
|
-
const
|
|
195
|
-
T.value.length === 1 ?
|
|
199
|
+
const q = f.value.scrollTop === 0;
|
|
200
|
+
T.value.length === 1 ? c < 0 && l.value === 0 && q && (d.value = !1) : t.value === H.value && (d.value = !1), _({
|
|
196
201
|
height: t.value
|
|
197
|
-
}), m > 0 ?
|
|
202
|
+
}), m > 0 ? n("dragging-down") : m < 0 && n("dragging-up");
|
|
198
203
|
},
|
|
199
|
-
onDragEnd:
|
|
204
|
+
onDragEnd: X
|
|
200
205
|
},
|
|
201
206
|
{
|
|
202
207
|
domTarget: w,
|
|
203
208
|
drag: { filterTaps: !0 }
|
|
204
209
|
}
|
|
205
210
|
);
|
|
206
|
-
const
|
|
211
|
+
const re = Be(
|
|
207
212
|
() => {
|
|
208
|
-
|
|
209
|
-
t.value = T.value[
|
|
213
|
+
n("maxHeight", g.value), A(() => {
|
|
214
|
+
t.value = T.value[L.value], V(T.value[L.value]);
|
|
210
215
|
});
|
|
211
216
|
},
|
|
212
217
|
{ minQuietPeriodMs: 50 }
|
|
213
218
|
);
|
|
214
|
-
return
|
|
215
|
-
|
|
216
|
-
}),
|
|
217
|
-
|
|
218
|
-
T.value[0] === k.value &&
|
|
219
|
+
return J(g, () => {
|
|
220
|
+
re.call();
|
|
221
|
+
}), J(k, () => {
|
|
222
|
+
n("minHeight", k.value), T.value.length === 1 && A(() => {
|
|
223
|
+
T.value[0] === k.value && V(Math.min(k.value, g.value));
|
|
219
224
|
});
|
|
220
|
-
}),
|
|
221
|
-
|
|
225
|
+
}), fe(() => {
|
|
226
|
+
n("minHeight", k.value), n("maxHeight", g.value), t.value = e.defaultBreakpoint ?? Number(k.value), _({
|
|
222
227
|
height: t.value,
|
|
223
228
|
y: t.value
|
|
224
|
-
}),
|
|
225
|
-
|
|
229
|
+
}), A(() => {
|
|
230
|
+
n("ready");
|
|
226
231
|
});
|
|
227
|
-
}), u({ open:
|
|
228
|
-
b("div",
|
|
229
|
-
be
|
|
230
|
-
default:
|
|
231
|
-
|
|
232
|
+
}), u({ open: ue, close: E, snapToPoint: V }), (i, c) => (ge(), pe(he, { to: "body" }, [
|
|
233
|
+
b("div", Ee, [
|
|
234
|
+
me(be, { name: "fade" }, {
|
|
235
|
+
default: ye(() => [
|
|
236
|
+
we(b("div", {
|
|
232
237
|
ref_key: "backdrop",
|
|
233
238
|
ref: O,
|
|
234
239
|
"data-vsbs-backdrop": "",
|
|
235
|
-
onClick:
|
|
240
|
+
onClick: c[0] || (c[0] = (P) => ie())
|
|
236
241
|
}, null, 512), [
|
|
237
|
-
[
|
|
242
|
+
[Se, S.value && i.blocking]
|
|
238
243
|
])
|
|
239
244
|
]),
|
|
240
245
|
_: 1
|
|
241
246
|
}),
|
|
242
247
|
b("div", {
|
|
243
248
|
ref_key: "sheet",
|
|
244
|
-
ref:
|
|
249
|
+
ref: v,
|
|
245
250
|
"data-vsbs-shadow": !i.blocking,
|
|
246
251
|
"data-vsbs-sheet-show": S.value,
|
|
247
252
|
"aria-modal": "true",
|
|
@@ -259,7 +264,7 @@ const Ie = { "data-vsbs-container": "" }, $e = ["data-vsbs-shadow", "data-vsbs-s
|
|
|
259
264
|
ref_key: "sheetScroll",
|
|
260
265
|
ref: f,
|
|
261
266
|
"data-vsbs-scroll": "",
|
|
262
|
-
onTouchmove:
|
|
267
|
+
onTouchmove: se
|
|
263
268
|
}, [
|
|
264
269
|
b("div", {
|
|
265
270
|
ref_key: "sheetContentWrapper",
|
|
@@ -282,16 +287,16 @@ const Ie = { "data-vsbs-container": "" }, $e = ["data-vsbs-shadow", "data-vsbs-s
|
|
|
282
287
|
}, [
|
|
283
288
|
R(i.$slots, "footer", {}, void 0, !0)
|
|
284
289
|
], 512)
|
|
285
|
-
], 8,
|
|
290
|
+
], 8, Ie)
|
|
286
291
|
])
|
|
287
292
|
]));
|
|
288
293
|
}
|
|
289
|
-
}),
|
|
290
|
-
const a =
|
|
291
|
-
for (const [e,
|
|
292
|
-
a[e] =
|
|
294
|
+
}), We = (o, u) => {
|
|
295
|
+
const a = o.__vccOpts || o;
|
|
296
|
+
for (const [e, n] of u)
|
|
297
|
+
a[e] = n;
|
|
293
298
|
return a;
|
|
294
|
-
},
|
|
299
|
+
}, Re = /* @__PURE__ */ We($e, [["__scopeId", "data-v-fbbc3cbe"]]);
|
|
295
300
|
export {
|
|
296
|
-
|
|
301
|
+
Re as default
|
|
297
302
|
};
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
[data-vsbs-backdrop][data-v-
|
|
1
|
+
[data-vsbs-container][data-v-fbbc3cbe]{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-fbbc3cbe]{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-fbbc3cbe]{box-shadow:0 -5px 60px 0 var(--vsbs-shadow-color, rgba(89, 89, 89, .2))}[data-vsbs-sheet][data-v-fbbc3cbe]{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(--547540e6);visibility:hidden;width:100%;will-change:height;z-index:2}[data-vsbs-sheet-show=true][data-v-fbbc3cbe]{visibility:visible}[data-vsbs-header][data-v-fbbc3cbe]{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-fbbc3cbe]: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-fbbc3cbe]:empty{box-shadow:none;padding:12px var(--vsbs-padding-x, 16px) 8px}[data-vsbs-footer][data-v-fbbc3cbe]{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-fbbc3cbe]:empty{display:none}[data-vsbs-scroll][data-v-fbbc3cbe]{flex-grow:1;overflow-y:auto;overscroll-behavior:contain}[data-vsbs-content-wrapper][data-v-fbbc3cbe]{height:100%}[data-vsbs-content][data-v-fbbc3cbe]{display:grid;padding:1vh var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}.fade-enter-active[data-v-fbbc3cbe],.fade-leave-active[data-v-fbbc3cbe]{transition:var(--5567c570)}.fade-enter-from[data-v-fbbc3cbe],.fade-leave-to[data-v-fbbc3cbe]{opacity:0}
|