@css-spring-animation/vue
Version:
Intuitive and predictable spring animation library powered by CSS Transition
1,260 lines (1,259 loc) • 29.1 kB
JavaScript
import { computed as O, toValue as pe, ref as $e, toRef as me, watch as je, readonly as Z, nextTick as ye, defineComponent as oe, h as be, Transition as Fe, TransitionGroup as De, onUpdated as Le, vShow as ke } from "vue";
const A = "--css-spring-animation-time";
let ve = !1;
function Be() {
typeof CSS > "u" || typeof CSS.registerProperty != "function" || ve || (CSS.registerProperty({
name: A,
inherits: !1,
initialValue: "0",
syntax: "<number>"
}), ve = !0);
}
function de(e, t) {
let r = !1, n;
return new Promise((o) => {
function s() {
r || (r = !0, clearTimeout(n), o());
}
t && t.fn.push(s), n = setTimeout(s, e);
});
}
function M(e) {
return { type: "value", value: e };
}
function F(e) {
return { type: "variable", name: e };
}
function qe(e) {
return { type: "cosine", radian: e };
}
function U(e, t) {
return { type: "binary", left: e, right: t, operator: "+" };
}
function x(e, t) {
return { type: "binary", left: e, right: t, operator: "*" };
}
function W(e) {
return { type: "exponential", exponent: e };
}
function R(e) {
switch (e.type) {
case "value":
return `${e.value}`;
case "variable":
return `var(${e.name})`;
case "cosine":
return `cos(1rad * (${R(e.radian)}))`;
case "exponential":
return `exp(${R(e.exponent)})`;
case "binary":
return `(${R(e.left)} ${e.operator} ${R(e.right)})`;
}
}
function T(e, t) {
switch (e.type) {
case "value":
return e.value;
case "variable": {
const r = t == null ? void 0 : t[e.name];
if (r === void 0)
throw new Error(`variable '${e.name}' is not provided`);
return r;
}
case "cosine":
return Math.cos(T(e.radian, t));
case "exponential":
return Math.exp(T(e.exponent, t));
case "binary":
switch (e.operator) {
case "+":
return T(e.left, t) + T(e.right, t);
case "*":
return T(e.left, t) * T(e.right, t);
}
}
}
function C(e, t) {
const r = {};
for (const n in e)
r[n] = t(e[n], n);
return r;
}
function Ce(e, t) {
const r = [], n = Math.min(e.length, t.length);
for (let o = 0; o < n; o++)
r.push([e[o], t[o]]);
return r;
}
function Re(e, t) {
const r = [];
for (let n = e; n < t; n++)
r.push(n);
return r;
}
function We() {
return typeof CSS < "u" && CSS.supports("transition-timing-function", "linear(0, 1)");
}
function _e() {
return typeof CSS < "u" && typeof CSS.registerProperty == "function" && CSS.supports("width", "calc(1px * exp(0))");
}
function ee() {
document.body.offsetHeight;
}
function ze(e, t) {
return ((n) => `calc(${n})`)(R(Ve(e, t)));
}
function se(e, t) {
const r = {
[A]: t.time
};
return T(Ve(e, t), r);
}
function Ve(e, t) {
if (G(t))
return M(t.to);
const r = x(e.bounce(t), e.decay(t));
return U(x(M(ue(t.from, t.to)), r), M(t.to));
}
function ht(e, t) {
const r = {
[A]: t.time
};
return T(e.bounce(t), r);
}
function gt(e, t) {
const r = {
[A]: t.time
};
return T(e.decay(t), r);
}
function we(e, t) {
return e.velocity(t);
}
function Ae(e, t) {
const r = Math.abs(t.from - t.to), n = 6e4, o = r < 5, s = o ? 1e-3 : 1, i = o ? 5e-4 : 0.01, u = Math.min(50, Math.ceil(e.duration / 30));
let c = e.duration;
for (; c < n; ) {
const f = c / e.duration, m = se(e, {
...t,
time: f
}), y = we(e, {
...t,
time: f
}), a = Math.abs(m - t.to) <= s, l = Math.abs(y) <= i;
if (a && l)
return c;
c += u;
}
return n;
}
function St(e, t = 0) {
const r = Ee({
bounce: t,
duration: e
}), n = Ae(r, {
from: 0,
to: 1,
initialVelocity: 0
});
return Me({
spring: r,
settlingDuration: n,
normalizedVelocity: 0
});
}
function Me(e) {
const { spring: t, settlingDuration: r, normalizedVelocity: n } = e, o = Math.ceil(r / (1e3 / 60)), s = Re(0, o + 1).map((i) => {
const u = i / o * (r / t.duration);
return se(t, {
time: u,
from: 0,
to: 1,
initialVelocity: n
});
});
return `${r}ms linear(${s.join(",")})`;
}
function Ee(e) {
return e.bounce > 0 ? Ie(e) : e.bounce < 0 ? Ue(e) : Ne(e);
}
function ie(e) {
return e < 0 ? 3.8 * (2 - Math.sqrt(-e)) : e > 0 ? 10 * (1 - Math.sqrt(e)) : 8;
}
function ue(e, t) {
return e - t === 0 ? 1e-6 : e - t;
}
function ce(e, { from: t, to: r, duration: n }) {
return e / ue(t, r) * (n / 1e3);
}
function le(e, { from: t, to: r, duration: n }) {
return e * ue(t, r) * (1e3 / n);
}
function G(e) {
return e.from === e.to && e.initialVelocity === 0;
}
function J({
from: e,
to: t,
bounce: r,
duration: n,
initialVelocity: o
}) {
const s = ce(o, { from: e, to: t, duration: n }), i = ie(r), u = 1.7 * Math.PI, c = Math.atan2(-i - s, u);
return {
A: 1 / Math.cos(c),
a: u,
b: c,
c: i
};
}
function Q({
from: e,
to: t,
bounce: r,
duration: n,
initialVelocity: o
}) {
const s = ce(o, { from: e, to: t, duration: n }), i = ie(r), u = 1;
return {
A: s + u * i,
B: u,
c: i
};
}
function X({
from: e,
to: t,
bounce: r,
duration: n,
initialVelocity: o
}) {
const s = ce(o, { from: e, to: t, duration: n }), i = ie(r), u = 1e-5, c = (u + i + s) / (2 * u), f = (u - i - s) / (2 * u);
return {
A: c,
B: f,
a: u,
c: i
};
}
function Ie({
bounce: e,
duration: t
}) {
return {
duration: t,
bounce: (n) => {
const { A: o, a: s, b: i } = J({
...n,
bounce: e,
duration: t
});
return x(M(o), qe(U(x(M(s), F(A)), M(i))));
},
decay: (n) => {
const { c: o } = J({
...n,
bounce: e,
duration: t
});
return W(x(M(-o), F(A)));
},
velocity: (n) => {
if (G(n))
return 0;
const { A: o, a: s, b: i, c: u } = J({
...n,
bounce: e,
duration: t
}), c = n.time, f = -o * Math.exp(-u * c) * (u * Math.cos(s * c + i) + s * Math.sin(s * c + i));
return le(f, {
...n,
duration: t
});
}
};
}
function Ne({
bounce: e,
duration: t
}) {
return {
duration: t,
bounce: (n) => {
const { A: o, B: s } = Q({
...n,
bounce: e,
duration: t
});
return U(x(M(o), F(A)), M(s));
},
decay: (n) => {
const { c: o } = Q({
...n,
bounce: e,
duration: t
});
return W(x(M(-o), F(A)));
},
velocity: (n) => {
if (G(n))
return 0;
const { A: o, B: s, c: i } = Q({
...n,
bounce: e,
duration: t
}), u = n.time, c = Math.exp(-i * u) * (o * -i * u + o - s * i);
return le(c, {
...n,
duration: t
});
}
};
}
function Ue({
bounce: e,
duration: t
}) {
return {
duration: t,
bounce: (n) => {
const { A: o, B: s, a: i } = X({
...n,
bounce: e,
duration: t
}), u = x(M(o), W(x(M(i), F(A)))), c = x(M(s), W(x(M(-1e-5), F(A))));
return U(u, c);
},
decay: (n) => {
const { c: o } = X({
...n,
bounce: e,
duration: t
});
return W(x(M(-o), F(A)));
},
velocity: (n) => {
if (G(n))
return 0;
const { A: o, B: s, a: i, c: u } = X({
...n,
bounce: e,
duration: t
}), c = n.time, f = Math.exp(-u * c) * (i * o * Math.exp(i * c) - i * s * Math.exp(-1e-5 * c)) - u * Math.exp(-u * c) * (o * Math.exp(i * c) + s * Math.exp(-1e-5 * c));
return le(f, {
...n,
duration: t
});
}
};
}
const H = {
ok: !1
};
function L(e) {
return (t) => {
const r = t.match(e);
return r ? {
ok: !0,
value: r[0],
rest: t.slice(r[0].length)
} : H;
};
}
function k(...e) {
return (t) => {
for (const r of e) {
const n = r(t);
if (n.ok)
return n;
}
return H;
};
}
function N(e, t) {
return (r) => {
const n = e(r);
return n.ok ? {
...n,
value: t(n.value)
} : n;
};
}
function j(...e) {
return (t) => e.reduce(
(r, n) => {
if (!r.ok)
return r;
const o = n(r.rest);
return o.ok ? {
...r,
value: [...r.value, o.value],
rest: o.rest
} : o;
},
{
ok: !0,
value: [],
rest: t
}
);
}
function Ge(e) {
return (t) => {
let r = {
ok: !0,
value: [],
rest: t
};
for (; ; ) {
if (r.rest === "")
return r;
const n = e(r.rest);
if (!n.ok)
return r;
r.value.push(n.value), r.rest = n.rest;
}
};
}
function B(e) {
return (t) => {
const r = e(t);
return {
ok: !0,
value: r.ok ? r.value : "",
rest: r.ok ? r.rest : t
};
};
}
function q(e) {
return N(e, (t) => t.join(""));
}
function D(e) {
return (t) => t.startsWith(e) ? {
ok: !0,
value: e,
rest: t.slice(e.length)
} : H;
}
const He = (e) => e === "" ? H : {
ok: !0,
value: e[0],
rest: e.slice(1)
}, te = (e) => {
const t = L(/^[1-9]/), r = L(/^\d*/), n = B(k(D("+"), D("-"))), o = D("0"), s = q(j(t, r));
return q(j(n, k(o, s)))(e);
}, Ke = (e) => {
const t = q(j(B(te), D("."))), r = L(/^\d+/);
return q(j(t, r))(e);
}, Ze = (e) => {
const t = k(Ke, te), r = q(j(k(D("e"), D("E")), te));
return q(j(t, B(r)))(e);
}, Je = (e) => {
const t = D("#"), r = L(/^[0-9a-fA-F]/), n = L(/^[0-9a-fA-F]{2}/), o = j(t, r, r, r, B(r)), s = j(t, n, n, n, B(n));
return k(s, o)(e);
}, Qe = L(/^([a-z%]+)/), Xe = (e) => {
const t = N(
j(Ze, B(Qe)),
(o) => ({
type: "number",
value: Number(o[0]),
unit: o[1] ?? ""
})
), r = N(Je, (o) => {
const [s, i, u, c] = o.slice(1).map((f, m) => {
if (!f)
return;
const y = f.length === 1 ? f + f : f, a = parseInt(y, 16);
return m === 3 ? a / 255 : a;
});
return {
type: "hexColor",
red: s,
green: i,
blue: u,
alpha: c
};
}), n = N(
He,
(o) => ({
type: "char",
value: o
})
);
return Ge(k(t, r, n))(e);
};
function ne(e) {
const t = Xe(e);
if (!t.ok)
return {
values: [],
units: [],
wraps: [e]
};
const r = [...t.value, { type: "char", value: "" }];
return r.reduce(
(n, o, s) => {
const i = r[s - 1], u = (i == null ? void 0 : i.type) === "char" || (i == null ? void 0 : i.type) === "hexColor";
if (o.type === "char")
return u ? n.wraps[n.wraps.length - 1] += o.value : n.wraps.push(o.value), n;
if (o.type === "number")
return u || n.wraps.push(""), n.values.push(o.value), n.units.push(o.unit), n;
if (o.type === "hexColor") {
const c = o.alpha === void 0 ? "rgb(" : "rgba(";
return u ? n.wraps[n.wraps.length - 1] += c : n.wraps.push(c), n.values.push(o.red, o.green, o.blue), n.units.push("", "", ""), n.wraps.push(", ", ", "), o.alpha !== void 0 && (n.values.push(o.alpha), n.units.push(""), n.wraps.push(", ")), n.wraps.push(")"), n;
}
return n;
},
{
values: [],
units: [],
wraps: []
}
);
}
function K(e, t) {
const r = e.units.map((n, o) => !n && e.values[o] === 0 ? t.units[o] ?? "" : n);
return {
...e,
units: r
};
}
function $(e, t) {
return e.wraps.reduce((r, n, o) => {
const s = e.units[o] ?? "", i = t[o] === void 0 ? "" : typeof t[o] == "number" ? `${t[o]}${s}` : `calc(1${s} * (${t[o]}))`;
return r + n + i;
}, "");
}
function Ye(e, t, r = {}) {
const n = C(e, ([a, l]) => {
const p = typeof a == "object" ? a : ne(String(a)), v = typeof l == "object" ? l : ne(String(l));
return [p, v];
}), o = r.duration ?? 1e3, s = r.bounce ?? 0, i = Ee({
bounce: s,
duration: o
}), u = et(n, r.velocity), c = Object.values(u).flatMap((a) => a.map(({ from: l, to: p, velocity: v }) => Ae(i, {
from: l,
to: p,
initialVelocity: v
}))), f = Math.max(...c), m = performance.now(), y = st({
spring: i,
fromTo: n,
inputValues: u,
startTime: m,
duration: o,
settlingDuration: f,
set: t
});
return We() && tt(n, r.velocity) ? nt({
spring: i,
fromTo: n,
inputValues: u,
settlingDuration: f,
set: t
}) : _e() ? rt({
spring: i,
fromTo: n,
inputValues: u,
duration: o,
settlingDuration: f,
set: t
}) : ot({
fromTo: n,
context: y,
set: t
}), y;
}
function et(e, t) {
return C(e, ([r, n], o) => Ce(r.values, n.values).map(([s, i], u) => {
var c;
return {
from: s,
to: i,
velocity: ((c = t == null ? void 0 : t[o]) == null ? void 0 : c[u]) ?? 0
};
}));
}
function tt(e, t) {
return t ? Object.keys(e).every((r) => {
const [n, o] = e[r], s = t[r];
return !!(!s || s.every((u) => u === 0) || Ce(n.values, o.values).filter(([u, c]) => u !== c).length <= 1);
}) : !0;
}
function nt({
spring: e,
fromTo: t,
inputValues: r,
settlingDuration: n,
set: o
}) {
const s = C(t, ([i, u]) => i.values.length !== u.values.length ? $(u, u.values) : $(i, i.values));
o({
...s,
transition: "none"
}), requestAnimationFrame(() => {
requestAnimationFrame(() => {
const i = C(t, ([f, m]) => $(m, m.values)), u = C(r, (f) => {
const m = f.reduce(
(y, { from: a, to: l, velocity: p }) => {
if (y !== void 0)
return y;
if (a !== l)
return p / (l - a);
},
void 0
);
return Me({
spring: e,
settlingDuration: n,
normalizedVelocity: m ?? 0
});
}), c = Object.entries(u).map(([f, m]) => `${f} ${m}`).join(",");
o({
...i,
transition: c
});
});
});
}
function rt({
spring: e,
fromTo: t,
inputValues: r,
duration: n,
settlingDuration: o,
set: s
}) {
Be();
const i = C(t, ([u, c], f) => {
if (u.values.length !== c.values.length)
return $(c, c.values);
const y = r[f].map(({ from: l, to: p, velocity: v }) => ze(e, {
from: l,
to: p,
initialVelocity: v
})), a = K(c, u);
return $(a, y);
});
s({
...i,
transition: "none",
[A]: "0"
}), requestAnimationFrame(() => {
requestAnimationFrame(() => {
s({
...i,
transition: `${A} ${o}ms linear`,
[A]: String(o / n)
});
});
});
}
function ot({
fromTo: e,
context: t,
set: r
}) {
function n() {
if (t.settled)
return;
const o = C(e, ([s, i], u) => {
if (s.values.length !== i.values.length)
return $(i, i.values);
const c = t.realValue[u];
if (!c)
return "";
const f = K(i, s);
return $(f, c);
});
r({
...o,
transition: "none"
}), requestAnimationFrame(n);
}
n();
}
function st({
spring: e,
fromTo: t,
inputValues: r,
startTime: n,
duration: o,
settlingDuration: s,
set: i
}) {
const u = { fn: [] };
function c() {
m.settled || (m.finished = m.settled = !0, m.stoppedDuration = performance.now() - n, f(), u.fn.forEach((y) => y()));
}
function f() {
const y = C(t, ([a, l], p) => {
const v = m.realValue[p];
if (!v)
return "";
const S = K(l, a);
return $(S, v);
});
i({
...y,
transition: "",
[A]: ""
});
}
const m = {
finishingPromise: de(o + 1, u).then(() => {
m.finished = !0;
}),
settlingPromise: de(s + 1, u).then(() => {
m.finished = m.settled = !0, m.stoppedDuration === void 0 && f();
}),
finished: !1,
settled: !1,
stop: c,
stoppedDuration: void 0,
get realValue() {
const y = {};
for (const [a, [l, p]] of Object.entries(t)) {
const v = r[a];
Object.defineProperty(y, a, {
configurable: !0,
enumerable: !0,
get() {
if (m.settled && m.stoppedDuration === void 0)
return p.values;
const h = (m.stoppedDuration ?? performance.now() - n) / o;
return v.map(({ from: d, to: g, velocity: V }) => se(e, {
from: d,
to: g,
initialVelocity: V,
time: h
}));
}
});
}
return y;
},
get realVelocity() {
const y = {};
for (const [a, l] of Object.entries(r))
Object.defineProperty(y, a, {
configurable: !0,
enumerable: !0,
get() {
if (m.settled)
return new Array(l.length).fill(0);
const p = (performance.now() - n) / o;
return l.map(({ from: v, to: S, velocity: h }) => we(e, {
time: p,
from: v,
to: S,
initialVelocity: h
}));
}
});
return y;
}
};
return m;
}
function _(e) {
let t, r = {}, n, o = [], s;
function i(l, p, v) {
const S = v ?? u(l);
return {
fromTo: C(p, (d, g) => [d, l[g]]),
velocity: S
};
}
function u(l) {
if (n)
return n;
const p = it(o, performance.now());
if (p)
return p;
if (s) {
const v = s.realVelocity;
return C(l, (S, h) => S.values.map((d, g) => {
var V;
return ((V = v[h]) == null ? void 0 : V[g]) ?? 0;
}));
}
return C(l, (v) => new Array(v.values.length).fill(0));
}
function c({ keepVelocity: l } = {}) {
n = l && s ? { ...s.realVelocity } : void 0, s && !s.settled && s.stop(), t && (t = s ? he(t, s.realValue) : t, s = Y(t)), o = [];
}
function f(l, p = {}) {
const v = p.animate ?? !0, S = C(l, (V, b) => {
const w = t == null ? void 0 : t[b], P = ne(String(V));
return w ? K(P, w) : P;
});
if (t && Pe(t, S))
return s ?? Y(t);
let h = t;
if (t = S, !v || !h)
return s && !s.settled && s.stop(), s = Y(t), e({
...ut(t),
transition: "",
[A]: ""
}), n || o.push({
value: C(t, (V) => typeof V == "number" ? [V] : V.values),
timestamp: performance.now()
}), s;
s && !s.settled && (h = he(h, s.realValue));
const { fromTo: d, velocity: g } = i(
t,
h,
p.velocity
);
return s && !s.settled && s.stop(), s = Ye(d, e, {
...r,
velocity: g
}), n = void 0, o = [], s;
}
function m(l) {
r = l;
}
function y(l) {
if (!s) {
l({ stopped: !1 });
return;
}
const p = s;
p.finishingPromise.then(() => {
l({ stopped: p.stoppedDuration !== void 0 });
});
}
function a(l) {
if (!s) {
l({ stopped: !1 });
return;
}
const p = s;
p.settlingPromise.then(() => {
l({ stopped: p.stoppedDuration !== void 0 });
});
}
return {
get realValue() {
if (s)
return s.realValue;
if (t)
return C(t, (l) => l.values);
throw new Error("style is not set yet. Call setStyle() first.");
},
get realVelocity() {
if (!t)
throw new Error("style is not set yet. Call setStyle() first.");
return u(t);
},
stop: c,
setStyle: f,
setOptions: m,
onFinishCurrent: y,
onSettleCurrent: a
};
}
function it(e, t) {
const r = e.filter((u) => {
const c = t - 100, f = t;
return c <= u.timestamp && u.timestamp <= f;
}), n = r[r.length - 1], o = r[0];
if (n === o || !n || !o)
return;
const s = n.timestamp - o.timestamp;
return C(n.value, (u, c) => u.map((f, m) => {
var a;
const y = ((a = o.value[c]) == null ? void 0 : a[m]) ?? 0;
return (f - y) * 1e3 / s;
}));
}
function he(e, t) {
return C(e, (r, n) => {
const o = t[n];
return {
wraps: r.wraps,
units: r.units,
values: o ?? new Array(r.values.length).fill(0)
};
});
}
function ut(e) {
return C(
e,
(t) => $(t, t.values)
);
}
function Y(e) {
return {
realValue: C(e, (t) => t.values),
realVelocity: C(e, (t) => new Array(t.values.length).fill(0)),
finished: !0,
settled: !0,
finishingPromise: Promise.resolve(),
settlingPromise: Promise.resolve(),
stop: () => {
},
stoppedDuration: 0
};
}
function Pe(e, t) {
const r = /* @__PURE__ */ new Set([...Object.keys(e), ...Object.keys(t)]);
return Array.from(r).every((n) => {
const o = e[n], s = t[n];
if (typeof o != "object" || typeof s != "object")
return o === s;
const i = o.values, u = s.values;
return i.length === u.length && i.every((c, f) => c === u[f]);
});
}
function ct(e, t) {
const r = O(() => pe(e)), n = O(() => pe(t) ?? {}), o = O(() => n.value.disabled ?? !1), s = O(() => n.value.relocating ?? !1), i = O(() => o.value || s.value), u = $e({}), c = _((l) => {
u.value = l;
});
c.setStyle(r.value), c.setOptions(n.value);
const f = me(() => c.realValue), m = me(() => c.realVelocity);
function y(l) {
ye().then(() => {
c.onFinishCurrent(l);
});
}
function a(l) {
ye().then(() => {
c.onSettleCurrent(l);
});
}
return je(
[i, () => ({ ...r.value }), () => ({ ...n.value })],
([l, p, v], [S, h]) => {
l && !S && c.stop({
keepVelocity: s.value
}), c.setOptions(v), Pe(p, h) || c.setStyle(p, { animate: !l });
}
), {
style: Z(u),
realValue: Z(f),
realVelocity: Z(m),
onFinishCurrent: y,
onSettleCurrent: a
};
}
const lt = (e) => oe({
props: {
springStyle: {
type: Object,
required: !0
},
bounce: Number,
duration: Number,
disabled: Boolean,
relocating: Boolean
},
setup(t, { slots: r }) {
const { style: n } = ct(
() => t.springStyle,
() => ({
bounce: t.bounce,
duration: t.duration,
disabled: t.disabled,
relocating: t.relocating
})
);
return () => {
var o;
return be(e, { style: n.value }, (o = r.default) == null ? void 0 : o.call(r));
};
}
}), at = {}, bt = new Proxy(at, {
get: (e, t) => {
const r = e[t];
if (r)
return r;
const n = lt(t);
return e[t] = n, n;
}
}), E = Symbol("SpringController");
function re(e) {
return (t) => {
for (const r in t)
r.startsWith("--") ? e.style.setProperty(r, t[r] ?? "") : e.style[r] = t[r] ?? "";
};
}
function xe(e, t) {
const r = O(() => typeof e.bounce == "number" ? {
enter: e.bounce,
leave: e.bounce
} : e.bounce), n = O(() => typeof e.duration == "number" ? {
enter: e.duration,
leave: e.duration
} : e.duration);
function o(a) {
t("beforeEnter", a);
}
function s(a) {
t("afterEnter", a);
}
function i(a) {
t("enterCancelled", a);
}
function u(a, l) {
var h, d;
const p = a;
p[E] || (p[E] = _(re(p)), p[E].setStyle(
{
...e.springStyle,
...e.enterFrom
},
{ animate: !1 }
), ee());
const v = p[E];
v.setOptions({
bounce: (h = r.value) == null ? void 0 : h.enter,
duration: (d = n.value) == null ? void 0 : d.enter
});
const S = v.setStyle(e.springStyle);
S.finishingPromise.then(() => {
S.stoppedDuration === void 0 && l();
});
}
function c(a, l) {
var d, g;
const p = a;
p[E] || (p[E] = _(re(p)), p[E].setStyle(e.springStyle, { animate: !1 }), ee());
const v = p[E];
v.setOptions({
bounce: (d = r.value) == null ? void 0 : d.leave,
duration: (g = n.value) == null ? void 0 : g.leave
});
const S = e.leaveTo ?? e.enterFrom, h = v.setStyle({
...e.springStyle,
...S
});
h.finishingPromise.then(() => {
h.stoppedDuration === void 0 && l();
});
}
function f(a) {
t("beforeLeave", a);
}
function m(a) {
var p;
(p = a[E]) == null || p.setStyle(
{
...e.springStyle,
...e.enterFrom
},
{ animate: !1 }
), t("afterLeave", a);
}
function y(a) {
t("leaveCancelled", a);
}
return {
onBeforeEnter: o,
onEnter: u,
onAfterEnter: s,
onEnterCancelled: i,
onBeforeLeave: f,
onLeave: c,
onAfterLeave: m,
onLeaveCancelled: y
};
}
const Te = {
springStyle: {
type: Object,
required: !0
},
enterFrom: Object,
leaveTo: Object,
bounce: [Number, Object],
duration: [Number, Object]
}, Ct = oe({
name: "SpringTransition",
inheritAttrs: !1,
props: Te,
setup(e, { attrs: t, emit: r, slots: n }) {
const {
onBeforeEnter: o,
onEnter: s,
onAfterEnter: i,
onEnterCancelled: u,
onBeforeLeave: c,
onLeave: f,
onAfterLeave: m,
onLeaveCancelled: y
} = xe(e, r);
return () => be(
Fe,
{
...t,
onBeforeEnter: o,
onEnter: s,
onAfterEnter: i,
onEnterCancelled: u,
onBeforeLeave: c,
onLeave: f,
onAfterLeave: m,
onLeaveCancelled: y
},
n.default
);
}
});
function ft(e, t) {
const { [t]: r, ...n } = e;
return n;
}
const pt = {
...ft(Te, "mode"),
tag: String,
bounce: [Number, Object],
duration: [Number, Object]
}, ge = /* @__PURE__ */ new WeakMap(), Se = /* @__PURE__ */ new WeakMap(), Vt = oe({
name: "SpringTransitionGroup",
inheritAttrs: !1,
props: pt,
setup(e, t) {
const { emit: r } = t, n = t.attrs;
let o = [], s = [];
const {
onBeforeEnter: i,
onEnter: u,
onAfterEnter: c,
onEnterCancelled: f,
onBeforeLeave: m,
onLeave: y,
onAfterLeave: a,
onLeaveCancelled: l
} = xe(e, r), p = De.setup(
{
...n,
tag: e.tag,
onBeforeEnter: i,
onEnter: u,
onAfterEnter: c,
onEnterCancelled: f,
onBeforeLeave: m,
onLeave: y,
onAfterLeave: a,
onLeaveCancelled: l
},
t
), v = O(() => {
var d;
return typeof e.bounce == "number" ? e.bounce : (d = e.bounce) == null ? void 0 : d.move;
}), S = O(() => {
var d;
return typeof e.duration == "number" ? e.duration : (d = e.duration) == null ? void 0 : d.move;
});
Le(() => {
if (o.length === 0)
return;
const d = new Set(
s.filter((b) => {
var P;
const w = (P = b.dirs) == null ? void 0 : P.find((z) => z.dir === ke);
return !w || w.value;
}).map((b) => b.key)
), g = o.filter((b) => d.has(b.key));
g.forEach((b) => {
const w = b.el, P = w[E];
P && (P.stop({
keepVelocity: !0
}), P.setStyle(
{
...e.springStyle,
transform: ""
},
{
animate: !1
}
), h(w));
}), g.forEach((b) => {
const w = b.el;
Se.set(b, w.getBoundingClientRect());
});
const V = g.filter((b) => {
const w = ge.get(b), P = Se.get(b), z = w.left - P.left, ae = w.top - P.top;
if (z === 0 && ae === 0)
return !1;
const I = b.el;
I[E] || (I[E] = _(re(I)));
const fe = I[E];
return fe.setOptions({
bounce: v.value,
duration: S.value
}), fe.setStyle(
{
...e.springStyle,
transform: `translate(${z}px, ${ae}px)`
},
{ animate: !1 }
), !0;
});
ee(), V.forEach((b) => {
b.el[E].setStyle({
...e.springStyle,
transform: "translate(0px, 0px)"
});
});
});
function h(d) {
const g = n.name ?? "v", V = n.enterFromClass ?? `${g}-enter-from`, b = n.enterActiveClass ?? `${g}-enter-active`, w = n.enterToClass ?? `${g}-enter-to`;
d.classList.remove(V), d.classList.remove(b), d.classList.remove(w);
}
return () => {
o = s;
const d = p();
return s = d.children, o.forEach((g) => {
const V = g.el;
ge.set(g, V.getBoundingClientRect());
}), d;
};
}
});
function mt(e) {
e.directive("spring-style", yt), e.directive("spring-options", Oe);
}
const wt = {
install: mt
}, yt = (e, { value: t }, r) => {
var o;
const n = vt(e);
(o = r.dirs) == null || o.forEach((s) => {
if (s.dir === Oe) {
const i = s.value;
i && n.setOptions(i);
}
}), n.setStyle(t);
}, Oe = {};
function vt(e) {
let t = e.__springController;
return t || (t = _((r) => {
for (const n in r)
n.startsWith("--") ? e.style.setProperty(n, r[n] ?? "") : e.style[n] = r[n] ?? "";
}), e.__springController = t), t;
}
export {
Ct as SpringTransition,
Vt as SpringTransitionGroup,
Ye as animate,
_ as createAnimateController,
Ee as createSpring,
se as evaluateSpring,
ht as evaluateSpringBounce,
gt as evaluateSpringDecay,
we as evaluateSpringVelocity,
ee as forceReflow,
$ as interpolateParsedStyle,
We as isCssLinearTimingFunctionSupported,
_e as isCssMathAnimationSupported,
C as mapValues,
Re as range,
bt as spring,
St as springCSS,
wt as springDirectives,
Ae as springSettlingDuration,
ct as useSpring,
Ce as zip
};