2878 lines
81 KiB
JavaScript
2878 lines
81 KiB
JavaScript
import {
|
|
defu
|
|
} from "./chunk-E45RIW2X.js";
|
|
import {
|
|
isObject,
|
|
tryOnUnmounted,
|
|
unrefElement,
|
|
useEventListener,
|
|
useIntersectionObserver,
|
|
useMediaQuery
|
|
} from "./chunk-RNX5SLTR.js";
|
|
import "./chunk-VAL2CHZC.js";
|
|
import {
|
|
Fragment,
|
|
computed,
|
|
defineComponent,
|
|
h,
|
|
inject,
|
|
isRef,
|
|
nextTick,
|
|
onUpdated,
|
|
reactive,
|
|
ref,
|
|
toRaw,
|
|
unref,
|
|
useSlots,
|
|
watch
|
|
} from "./chunk-AAHVYXXY.js";
|
|
import "./chunk-OWZYVOTZ.js";
|
|
import "./chunk-V4OQ3NZ2.js";
|
|
|
|
// ../node_modules/.pnpm/framesync@6.1.2/node_modules/framesync/dist/es/on-next-frame.mjs
|
|
var defaultTimestep = 1 / 60 * 1e3;
|
|
var getCurrentTime = typeof performance !== "undefined" ? () => performance.now() : () => Date.now();
|
|
var onNextFrame = typeof window !== "undefined" ? (callback) => window.requestAnimationFrame(callback) : (callback) => setTimeout(() => callback(getCurrentTime()), defaultTimestep);
|
|
|
|
// ../node_modules/.pnpm/framesync@6.1.2/node_modules/framesync/dist/es/create-render-step.mjs
|
|
function createRenderStep(runNextFrame2) {
|
|
let toRun = [];
|
|
let toRunNextFrame = [];
|
|
let numToRun = 0;
|
|
let isProcessing2 = false;
|
|
let flushNextFrame = false;
|
|
const toKeepAlive = /* @__PURE__ */ new WeakSet();
|
|
const step = {
|
|
schedule: (callback, keepAlive = false, immediate = false) => {
|
|
const addToCurrentFrame = immediate && isProcessing2;
|
|
const buffer = addToCurrentFrame ? toRun : toRunNextFrame;
|
|
if (keepAlive)
|
|
toKeepAlive.add(callback);
|
|
if (buffer.indexOf(callback) === -1) {
|
|
buffer.push(callback);
|
|
if (addToCurrentFrame && isProcessing2)
|
|
numToRun = toRun.length;
|
|
}
|
|
return callback;
|
|
},
|
|
cancel: (callback) => {
|
|
const index = toRunNextFrame.indexOf(callback);
|
|
if (index !== -1)
|
|
toRunNextFrame.splice(index, 1);
|
|
toKeepAlive.delete(callback);
|
|
},
|
|
process: (frameData) => {
|
|
if (isProcessing2) {
|
|
flushNextFrame = true;
|
|
return;
|
|
}
|
|
isProcessing2 = true;
|
|
[toRun, toRunNextFrame] = [toRunNextFrame, toRun];
|
|
toRunNextFrame.length = 0;
|
|
numToRun = toRun.length;
|
|
if (numToRun) {
|
|
for (let i = 0; i < numToRun; i++) {
|
|
const callback = toRun[i];
|
|
callback(frameData);
|
|
if (toKeepAlive.has(callback)) {
|
|
step.schedule(callback);
|
|
runNextFrame2();
|
|
}
|
|
}
|
|
}
|
|
isProcessing2 = false;
|
|
if (flushNextFrame) {
|
|
flushNextFrame = false;
|
|
step.process(frameData);
|
|
}
|
|
}
|
|
};
|
|
return step;
|
|
}
|
|
|
|
// ../node_modules/.pnpm/framesync@6.1.2/node_modules/framesync/dist/es/index.mjs
|
|
var maxElapsed = 40;
|
|
var useDefaultElapsed = true;
|
|
var runNextFrame = false;
|
|
var isProcessing = false;
|
|
var frame = {
|
|
delta: 0,
|
|
timestamp: 0
|
|
};
|
|
var stepsOrder = [
|
|
"read",
|
|
"update",
|
|
"preRender",
|
|
"render",
|
|
"postRender"
|
|
];
|
|
var steps = stepsOrder.reduce((acc, key) => {
|
|
acc[key] = createRenderStep(() => runNextFrame = true);
|
|
return acc;
|
|
}, {});
|
|
var sync = stepsOrder.reduce((acc, key) => {
|
|
const step = steps[key];
|
|
acc[key] = (process2, keepAlive = false, immediate = false) => {
|
|
if (!runNextFrame)
|
|
startLoop();
|
|
return step.schedule(process2, keepAlive, immediate);
|
|
};
|
|
return acc;
|
|
}, {});
|
|
var cancelSync = stepsOrder.reduce((acc, key) => {
|
|
acc[key] = steps[key].cancel;
|
|
return acc;
|
|
}, {});
|
|
var flushSync = stepsOrder.reduce((acc, key) => {
|
|
acc[key] = () => steps[key].process(frame);
|
|
return acc;
|
|
}, {});
|
|
var processStep = (stepId) => steps[stepId].process(frame);
|
|
var processFrame = (timestamp) => {
|
|
runNextFrame = false;
|
|
frame.delta = useDefaultElapsed ? defaultTimestep : Math.max(Math.min(timestamp - frame.timestamp, maxElapsed), 1);
|
|
frame.timestamp = timestamp;
|
|
isProcessing = true;
|
|
stepsOrder.forEach(processStep);
|
|
isProcessing = false;
|
|
if (runNextFrame) {
|
|
useDefaultElapsed = false;
|
|
onNextFrame(processFrame);
|
|
}
|
|
};
|
|
var startLoop = () => {
|
|
runNextFrame = true;
|
|
useDefaultElapsed = true;
|
|
if (!isProcessing)
|
|
onNextFrame(processFrame);
|
|
};
|
|
var getFrameData = () => frame;
|
|
var es_default = sync;
|
|
|
|
// ../node_modules/.pnpm/tslib@2.4.0/node_modules/tslib/tslib.es6.js
|
|
function __rest(s, e) {
|
|
var t = {};
|
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
t[p] = s[p];
|
|
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
t[p[i]] = s[p[i]];
|
|
}
|
|
return t;
|
|
}
|
|
|
|
// ../node_modules/.pnpm/hey-listen@1.0.8/node_modules/hey-listen/dist/hey-listen.es.js
|
|
var warning = function() {
|
|
};
|
|
var invariant = function() {
|
|
};
|
|
if (true) {
|
|
warning = function(check, message) {
|
|
if (!check && typeof console !== "undefined") {
|
|
console.warn(message);
|
|
}
|
|
};
|
|
invariant = function(check, message) {
|
|
if (!check) {
|
|
throw new Error(message);
|
|
}
|
|
};
|
|
}
|
|
|
|
// ../node_modules/.pnpm/popmotion@11.0.5/node_modules/popmotion/dist/es/utils/clamp.mjs
|
|
var clamp = (min, max, v) => Math.min(Math.max(v, min), max);
|
|
|
|
// ../node_modules/.pnpm/popmotion@11.0.5/node_modules/popmotion/dist/es/animations/utils/find-spring.mjs
|
|
var safeMin = 1e-3;
|
|
var minDuration = 0.01;
|
|
var maxDuration = 10;
|
|
var minDamping = 0.05;
|
|
var maxDamping = 1;
|
|
function findSpring({ duration = 800, bounce = 0.25, velocity = 0, mass = 1 }) {
|
|
let envelope;
|
|
let derivative;
|
|
warning(duration <= maxDuration * 1e3, "Spring duration must be 10 seconds or less");
|
|
let dampingRatio = 1 - bounce;
|
|
dampingRatio = clamp(minDamping, maxDamping, dampingRatio);
|
|
duration = clamp(minDuration, maxDuration, duration / 1e3);
|
|
if (dampingRatio < 1) {
|
|
envelope = (undampedFreq2) => {
|
|
const exponentialDecay = undampedFreq2 * dampingRatio;
|
|
const delta = exponentialDecay * duration;
|
|
const a2 = exponentialDecay - velocity;
|
|
const b2 = calcAngularFreq(undampedFreq2, dampingRatio);
|
|
const c2 = Math.exp(-delta);
|
|
return safeMin - a2 / b2 * c2;
|
|
};
|
|
derivative = (undampedFreq2) => {
|
|
const exponentialDecay = undampedFreq2 * dampingRatio;
|
|
const delta = exponentialDecay * duration;
|
|
const d = delta * velocity + velocity;
|
|
const e = Math.pow(dampingRatio, 2) * Math.pow(undampedFreq2, 2) * duration;
|
|
const f = Math.exp(-delta);
|
|
const g = calcAngularFreq(Math.pow(undampedFreq2, 2), dampingRatio);
|
|
const factor = -envelope(undampedFreq2) + safeMin > 0 ? -1 : 1;
|
|
return factor * ((d - e) * f) / g;
|
|
};
|
|
} else {
|
|
envelope = (undampedFreq2) => {
|
|
const a2 = Math.exp(-undampedFreq2 * duration);
|
|
const b2 = (undampedFreq2 - velocity) * duration + 1;
|
|
return -safeMin + a2 * b2;
|
|
};
|
|
derivative = (undampedFreq2) => {
|
|
const a2 = Math.exp(-undampedFreq2 * duration);
|
|
const b2 = (velocity - undampedFreq2) * (duration * duration);
|
|
return a2 * b2;
|
|
};
|
|
}
|
|
const initialGuess = 5 / duration;
|
|
const undampedFreq = approximateRoot(envelope, derivative, initialGuess);
|
|
duration = duration * 1e3;
|
|
if (isNaN(undampedFreq)) {
|
|
return {
|
|
stiffness: 100,
|
|
damping: 10,
|
|
duration
|
|
};
|
|
} else {
|
|
const stiffness = Math.pow(undampedFreq, 2) * mass;
|
|
return {
|
|
stiffness,
|
|
damping: dampingRatio * 2 * Math.sqrt(mass * stiffness),
|
|
duration
|
|
};
|
|
}
|
|
}
|
|
var rootIterations = 12;
|
|
function approximateRoot(envelope, derivative, initialGuess) {
|
|
let result = initialGuess;
|
|
for (let i = 1; i < rootIterations; i++) {
|
|
result = result - envelope(result) / derivative(result);
|
|
}
|
|
return result;
|
|
}
|
|
function calcAngularFreq(undampedFreq, dampingRatio) {
|
|
return undampedFreq * Math.sqrt(1 - dampingRatio * dampingRatio);
|
|
}
|
|
|
|
// ../node_modules/.pnpm/popmotion@11.0.5/node_modules/popmotion/dist/es/animations/generators/spring.mjs
|
|
var durationKeys = ["duration", "bounce"];
|
|
var physicsKeys = ["stiffness", "damping", "mass"];
|
|
function isSpringType(options, keys) {
|
|
return keys.some((key) => options[key] !== void 0);
|
|
}
|
|
function getSpringOptions(options) {
|
|
let springOptions = Object.assign({ velocity: 0, stiffness: 100, damping: 10, mass: 1, isResolvedFromDuration: false }, options);
|
|
if (!isSpringType(options, physicsKeys) && isSpringType(options, durationKeys)) {
|
|
const derived = findSpring(options);
|
|
springOptions = Object.assign(Object.assign(Object.assign({}, springOptions), derived), { velocity: 0, mass: 1 });
|
|
springOptions.isResolvedFromDuration = true;
|
|
}
|
|
return springOptions;
|
|
}
|
|
function spring(_a) {
|
|
var { from = 0, to = 1, restSpeed = 2, restDelta } = _a, options = __rest(_a, ["from", "to", "restSpeed", "restDelta"]);
|
|
const state = { done: false, value: from };
|
|
let { stiffness, damping, mass, velocity, duration, isResolvedFromDuration } = getSpringOptions(options);
|
|
let resolveSpring = zero;
|
|
let resolveVelocity = zero;
|
|
function createSpring() {
|
|
const initialVelocity = velocity ? -(velocity / 1e3) : 0;
|
|
const initialDelta = to - from;
|
|
const dampingRatio = damping / (2 * Math.sqrt(stiffness * mass));
|
|
const undampedAngularFreq = Math.sqrt(stiffness / mass) / 1e3;
|
|
if (restDelta === void 0) {
|
|
restDelta = Math.min(Math.abs(to - from) / 100, 0.4);
|
|
}
|
|
if (dampingRatio < 1) {
|
|
const angularFreq = calcAngularFreq(undampedAngularFreq, dampingRatio);
|
|
resolveSpring = (t) => {
|
|
const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
|
|
return to - envelope * ((initialVelocity + dampingRatio * undampedAngularFreq * initialDelta) / angularFreq * Math.sin(angularFreq * t) + initialDelta * Math.cos(angularFreq * t));
|
|
};
|
|
resolveVelocity = (t) => {
|
|
const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
|
|
return dampingRatio * undampedAngularFreq * envelope * (Math.sin(angularFreq * t) * (initialVelocity + dampingRatio * undampedAngularFreq * initialDelta) / angularFreq + initialDelta * Math.cos(angularFreq * t)) - envelope * (Math.cos(angularFreq * t) * (initialVelocity + dampingRatio * undampedAngularFreq * initialDelta) - angularFreq * initialDelta * Math.sin(angularFreq * t));
|
|
};
|
|
} else if (dampingRatio === 1) {
|
|
resolveSpring = (t) => to - Math.exp(-undampedAngularFreq * t) * (initialDelta + (initialVelocity + undampedAngularFreq * initialDelta) * t);
|
|
} else {
|
|
const dampedAngularFreq = undampedAngularFreq * Math.sqrt(dampingRatio * dampingRatio - 1);
|
|
resolveSpring = (t) => {
|
|
const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
|
|
const freqForT = Math.min(dampedAngularFreq * t, 300);
|
|
return to - envelope * ((initialVelocity + dampingRatio * undampedAngularFreq * initialDelta) * Math.sinh(freqForT) + dampedAngularFreq * initialDelta * Math.cosh(freqForT)) / dampedAngularFreq;
|
|
};
|
|
}
|
|
}
|
|
createSpring();
|
|
return {
|
|
next: (t) => {
|
|
const current = resolveSpring(t);
|
|
if (!isResolvedFromDuration) {
|
|
const currentVelocity = resolveVelocity(t) * 1e3;
|
|
const isBelowVelocityThreshold = Math.abs(currentVelocity) <= restSpeed;
|
|
const isBelowDisplacementThreshold = Math.abs(to - current) <= restDelta;
|
|
state.done = isBelowVelocityThreshold && isBelowDisplacementThreshold;
|
|
} else {
|
|
state.done = t >= duration;
|
|
}
|
|
state.value = state.done ? to : current;
|
|
return state;
|
|
},
|
|
flipTarget: () => {
|
|
velocity = -velocity;
|
|
[from, to] = [to, from];
|
|
createSpring();
|
|
}
|
|
};
|
|
}
|
|
spring.needsInterpolation = (a2, b2) => typeof a2 === "string" || typeof b2 === "string";
|
|
var zero = (_t) => 0;
|
|
|
|
// ../node_modules/.pnpm/popmotion@11.0.5/node_modules/popmotion/dist/es/utils/progress.mjs
|
|
var progress = (from, to, value) => {
|
|
const toFromDifference = to - from;
|
|
return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;
|
|
};
|
|
|
|
// ../node_modules/.pnpm/popmotion@11.0.5/node_modules/popmotion/dist/es/utils/mix.mjs
|
|
var mix = (from, to, progress2) => -progress2 * from + progress2 * to + from;
|
|
|
|
// ../node_modules/.pnpm/style-value-types@5.1.2/node_modules/style-value-types/dist/es/utils.mjs
|
|
var clamp2 = (min, max) => (v) => Math.max(Math.min(v, max), min);
|
|
var sanitize = (v) => v % 1 ? Number(v.toFixed(5)) : v;
|
|
var floatRegex = /(-)?([\d]*\.?[\d])+/g;
|
|
var colorRegex = /(#[0-9a-f]{6}|#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2}(-?[\d\.]+%?)\s*[\,\/]?\s*[\d\.]*%?\))/gi;
|
|
var singleColorRegex = /^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2}(-?[\d\.]+%?)\s*[\,\/]?\s*[\d\.]*%?\))$/i;
|
|
function isString(v) {
|
|
return typeof v === "string";
|
|
}
|
|
|
|
// ../node_modules/.pnpm/style-value-types@5.1.2/node_modules/style-value-types/dist/es/numbers/index.mjs
|
|
var number = {
|
|
test: (v) => typeof v === "number",
|
|
parse: parseFloat,
|
|
transform: (v) => v
|
|
};
|
|
var alpha = Object.assign(Object.assign({}, number), { transform: clamp2(0, 1) });
|
|
var scale = Object.assign(Object.assign({}, number), { default: 1 });
|
|
|
|
// ../node_modules/.pnpm/style-value-types@5.1.2/node_modules/style-value-types/dist/es/numbers/units.mjs
|
|
var createUnitType = (unit) => ({
|
|
test: (v) => isString(v) && v.endsWith(unit) && v.split(" ").length === 1,
|
|
parse: parseFloat,
|
|
transform: (v) => `${v}${unit}`
|
|
});
|
|
var degrees = createUnitType("deg");
|
|
var percent = createUnitType("%");
|
|
var px = createUnitType("px");
|
|
var vh = createUnitType("vh");
|
|
var vw = createUnitType("vw");
|
|
var progressPercentage = Object.assign(Object.assign({}, percent), { parse: (v) => percent.parse(v) / 100, transform: (v) => percent.transform(v * 100) });
|
|
|
|
// ../node_modules/.pnpm/style-value-types@5.1.2/node_modules/style-value-types/dist/es/color/utils.mjs
|
|
var isColorString = (type, testProp) => (v) => {
|
|
return Boolean(isString(v) && singleColorRegex.test(v) && v.startsWith(type) || testProp && Object.prototype.hasOwnProperty.call(v, testProp));
|
|
};
|
|
var splitColor = (aName, bName, cName) => (v) => {
|
|
if (!isString(v))
|
|
return v;
|
|
const [a2, b2, c2, alpha2] = v.match(floatRegex);
|
|
return {
|
|
[aName]: parseFloat(a2),
|
|
[bName]: parseFloat(b2),
|
|
[cName]: parseFloat(c2),
|
|
alpha: alpha2 !== void 0 ? parseFloat(alpha2) : 1
|
|
};
|
|
};
|
|
|
|
// ../node_modules/.pnpm/style-value-types@5.1.2/node_modules/style-value-types/dist/es/color/hsla.mjs
|
|
var hsla = {
|
|
test: isColorString("hsl", "hue"),
|
|
parse: splitColor("hue", "saturation", "lightness"),
|
|
transform: ({ hue, saturation, lightness, alpha: alpha$1 = 1 }) => {
|
|
return "hsla(" + Math.round(hue) + ", " + percent.transform(sanitize(saturation)) + ", " + percent.transform(sanitize(lightness)) + ", " + sanitize(alpha.transform(alpha$1)) + ")";
|
|
}
|
|
};
|
|
|
|
// ../node_modules/.pnpm/style-value-types@5.1.2/node_modules/style-value-types/dist/es/color/rgba.mjs
|
|
var clampRgbUnit = clamp2(0, 255);
|
|
var rgbUnit = Object.assign(Object.assign({}, number), { transform: (v) => Math.round(clampRgbUnit(v)) });
|
|
var rgba = {
|
|
test: isColorString("rgb", "red"),
|
|
parse: splitColor("red", "green", "blue"),
|
|
transform: ({ red, green, blue, alpha: alpha$1 = 1 }) => "rgba(" + rgbUnit.transform(red) + ", " + rgbUnit.transform(green) + ", " + rgbUnit.transform(blue) + ", " + sanitize(alpha.transform(alpha$1)) + ")"
|
|
};
|
|
|
|
// ../node_modules/.pnpm/style-value-types@5.1.2/node_modules/style-value-types/dist/es/color/hex.mjs
|
|
function parseHex(v) {
|
|
let r = "";
|
|
let g = "";
|
|
let b2 = "";
|
|
let a2 = "";
|
|
if (v.length > 5) {
|
|
r = v.substr(1, 2);
|
|
g = v.substr(3, 2);
|
|
b2 = v.substr(5, 2);
|
|
a2 = v.substr(7, 2);
|
|
} else {
|
|
r = v.substr(1, 1);
|
|
g = v.substr(2, 1);
|
|
b2 = v.substr(3, 1);
|
|
a2 = v.substr(4, 1);
|
|
r += r;
|
|
g += g;
|
|
b2 += b2;
|
|
a2 += a2;
|
|
}
|
|
return {
|
|
red: parseInt(r, 16),
|
|
green: parseInt(g, 16),
|
|
blue: parseInt(b2, 16),
|
|
alpha: a2 ? parseInt(a2, 16) / 255 : 1
|
|
};
|
|
}
|
|
var hex = {
|
|
test: isColorString("#"),
|
|
parse: parseHex,
|
|
transform: rgba.transform
|
|
};
|
|
|
|
// ../node_modules/.pnpm/style-value-types@5.1.2/node_modules/style-value-types/dist/es/color/index.mjs
|
|
var color = {
|
|
test: (v) => rgba.test(v) || hex.test(v) || hsla.test(v),
|
|
parse: (v) => {
|
|
if (rgba.test(v)) {
|
|
return rgba.parse(v);
|
|
} else if (hsla.test(v)) {
|
|
return hsla.parse(v);
|
|
} else {
|
|
return hex.parse(v);
|
|
}
|
|
},
|
|
transform: (v) => {
|
|
return isString(v) ? v : v.hasOwnProperty("red") ? rgba.transform(v) : hsla.transform(v);
|
|
}
|
|
};
|
|
|
|
// ../node_modules/.pnpm/style-value-types@5.1.2/node_modules/style-value-types/dist/es/complex/index.mjs
|
|
var colorToken = "${c}";
|
|
var numberToken = "${n}";
|
|
function test(v) {
|
|
var _a, _b, _c, _d;
|
|
return isNaN(v) && isString(v) && ((_b = (_a = v.match(floatRegex)) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) + ((_d = (_c = v.match(colorRegex)) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0) > 0;
|
|
}
|
|
function analyse(v) {
|
|
if (typeof v === "number")
|
|
v = `${v}`;
|
|
const values = [];
|
|
let numColors = 0;
|
|
const colors = v.match(colorRegex);
|
|
if (colors) {
|
|
numColors = colors.length;
|
|
v = v.replace(colorRegex, colorToken);
|
|
values.push(...colors.map(color.parse));
|
|
}
|
|
const numbers = v.match(floatRegex);
|
|
if (numbers) {
|
|
v = v.replace(floatRegex, numberToken);
|
|
values.push(...numbers.map(number.parse));
|
|
}
|
|
return { values, numColors, tokenised: v };
|
|
}
|
|
function parse(v) {
|
|
return analyse(v).values;
|
|
}
|
|
function createTransformer(v) {
|
|
const { values, numColors, tokenised } = analyse(v);
|
|
const numValues = values.length;
|
|
return (v2) => {
|
|
let output = tokenised;
|
|
for (let i = 0; i < numValues; i++) {
|
|
output = output.replace(i < numColors ? colorToken : numberToken, i < numColors ? color.transform(v2[i]) : sanitize(v2[i]));
|
|
}
|
|
return output;
|
|
};
|
|
}
|
|
var convertNumbersToZero = (v) => typeof v === "number" ? 0 : v;
|
|
function getAnimatableNone(v) {
|
|
const parsed = parse(v);
|
|
const transformer = createTransformer(v);
|
|
return transformer(parsed.map(convertNumbersToZero));
|
|
}
|
|
var complex = { test, parse, createTransformer, getAnimatableNone };
|
|
|
|
// ../node_modules/.pnpm/style-value-types@5.1.2/node_modules/style-value-types/dist/es/complex/filter.mjs
|
|
var maxDefaults = /* @__PURE__ */ new Set(["brightness", "contrast", "saturate", "opacity"]);
|
|
function applyDefaultFilter(v) {
|
|
let [name, value] = v.slice(0, -1).split("(");
|
|
if (name === "drop-shadow")
|
|
return v;
|
|
const [number2] = value.match(floatRegex) || [];
|
|
if (!number2)
|
|
return v;
|
|
const unit = value.replace(number2, "");
|
|
let defaultValue = maxDefaults.has(name) ? 1 : 0;
|
|
if (number2 !== value)
|
|
defaultValue *= 100;
|
|
return name + "(" + defaultValue + unit + ")";
|
|
}
|
|
var functionRegex = /([a-z-]*)\(.*?\)/g;
|
|
var filter = Object.assign(Object.assign({}, complex), { getAnimatableNone: (v) => {
|
|
const functions = v.match(functionRegex);
|
|
return functions ? functions.map(applyDefaultFilter).join(" ") : v;
|
|
} });
|
|
|
|
// ../node_modules/.pnpm/popmotion@11.0.5/node_modules/popmotion/dist/es/utils/hsla-to-rgba.mjs
|
|
function hueToRgb(p, q, t) {
|
|
if (t < 0)
|
|
t += 1;
|
|
if (t > 1)
|
|
t -= 1;
|
|
if (t < 1 / 6)
|
|
return p + (q - p) * 6 * t;
|
|
if (t < 1 / 2)
|
|
return q;
|
|
if (t < 2 / 3)
|
|
return p + (q - p) * (2 / 3 - t) * 6;
|
|
return p;
|
|
}
|
|
function hslaToRgba({ hue, saturation, lightness, alpha: alpha2 }) {
|
|
hue /= 360;
|
|
saturation /= 100;
|
|
lightness /= 100;
|
|
let red = 0;
|
|
let green = 0;
|
|
let blue = 0;
|
|
if (!saturation) {
|
|
red = green = blue = lightness;
|
|
} else {
|
|
const q = lightness < 0.5 ? lightness * (1 + saturation) : lightness + saturation - lightness * saturation;
|
|
const p = 2 * lightness - q;
|
|
red = hueToRgb(p, q, hue + 1 / 3);
|
|
green = hueToRgb(p, q, hue);
|
|
blue = hueToRgb(p, q, hue - 1 / 3);
|
|
}
|
|
return {
|
|
red: Math.round(red * 255),
|
|
green: Math.round(green * 255),
|
|
blue: Math.round(blue * 255),
|
|
alpha: alpha2
|
|
};
|
|
}
|
|
|
|
// ../node_modules/.pnpm/popmotion@11.0.5/node_modules/popmotion/dist/es/utils/mix-color.mjs
|
|
var mixLinearColor = (from, to, v) => {
|
|
const fromExpo = from * from;
|
|
const toExpo = to * to;
|
|
return Math.sqrt(Math.max(0, v * (toExpo - fromExpo) + fromExpo));
|
|
};
|
|
var colorTypes = [hex, rgba, hsla];
|
|
var getColorType = (v) => colorTypes.find((type) => type.test(v));
|
|
var notAnimatable = (color2) => `'${color2}' is not an animatable color. Use the equivalent color code instead.`;
|
|
var mixColor = (from, to) => {
|
|
let fromColorType = getColorType(from);
|
|
let toColorType = getColorType(to);
|
|
invariant(!!fromColorType, notAnimatable(from));
|
|
invariant(!!toColorType, notAnimatable(to));
|
|
let fromColor = fromColorType.parse(from);
|
|
let toColor = toColorType.parse(to);
|
|
if (fromColorType === hsla) {
|
|
fromColor = hslaToRgba(fromColor);
|
|
fromColorType = rgba;
|
|
}
|
|
if (toColorType === hsla) {
|
|
toColor = hslaToRgba(toColor);
|
|
toColorType = rgba;
|
|
}
|
|
const blended = Object.assign({}, fromColor);
|
|
return (v) => {
|
|
for (const key in blended) {
|
|
if (key !== "alpha") {
|
|
blended[key] = mixLinearColor(fromColor[key], toColor[key], v);
|
|
}
|
|
}
|
|
blended.alpha = mix(fromColor.alpha, toColor.alpha, v);
|
|
return fromColorType.transform(blended);
|
|
};
|
|
};
|
|
|
|
// ../node_modules/.pnpm/popmotion@11.0.5/node_modules/popmotion/dist/es/utils/inc.mjs
|
|
var isNum = (v) => typeof v === "number";
|
|
|
|
// ../node_modules/.pnpm/popmotion@11.0.5/node_modules/popmotion/dist/es/utils/pipe.mjs
|
|
var combineFunctions = (a2, b2) => (v) => b2(a2(v));
|
|
var pipe = (...transformers) => transformers.reduce(combineFunctions);
|
|
|
|
// ../node_modules/.pnpm/popmotion@11.0.5/node_modules/popmotion/dist/es/utils/mix-complex.mjs
|
|
function getMixer(origin, target) {
|
|
if (isNum(origin)) {
|
|
return (v) => mix(origin, target, v);
|
|
} else if (color.test(origin)) {
|
|
return mixColor(origin, target);
|
|
} else {
|
|
return mixComplex(origin, target);
|
|
}
|
|
}
|
|
var mixArray = (from, to) => {
|
|
const output = [...from];
|
|
const numValues = output.length;
|
|
const blendValue = from.map((fromThis, i) => getMixer(fromThis, to[i]));
|
|
return (v) => {
|
|
for (let i = 0; i < numValues; i++) {
|
|
output[i] = blendValue[i](v);
|
|
}
|
|
return output;
|
|
};
|
|
};
|
|
var mixObject = (origin, target) => {
|
|
const output = Object.assign(Object.assign({}, origin), target);
|
|
const blendValue = {};
|
|
for (const key in output) {
|
|
if (origin[key] !== void 0 && target[key] !== void 0) {
|
|
blendValue[key] = getMixer(origin[key], target[key]);
|
|
}
|
|
}
|
|
return (v) => {
|
|
for (const key in blendValue) {
|
|
output[key] = blendValue[key](v);
|
|
}
|
|
return output;
|
|
};
|
|
};
|
|
function analyse2(value) {
|
|
const parsed = complex.parse(value);
|
|
const numValues = parsed.length;
|
|
let numNumbers = 0;
|
|
let numRGB = 0;
|
|
let numHSL = 0;
|
|
for (let i = 0; i < numValues; i++) {
|
|
if (numNumbers || typeof parsed[i] === "number") {
|
|
numNumbers++;
|
|
} else {
|
|
if (parsed[i].hue !== void 0) {
|
|
numHSL++;
|
|
} else {
|
|
numRGB++;
|
|
}
|
|
}
|
|
}
|
|
return { parsed, numNumbers, numRGB, numHSL };
|
|
}
|
|
var mixComplex = (origin, target) => {
|
|
const template = complex.createTransformer(target);
|
|
const originStats = analyse2(origin);
|
|
const targetStats = analyse2(target);
|
|
const canInterpolate = originStats.numHSL === targetStats.numHSL && originStats.numRGB === targetStats.numRGB && originStats.numNumbers >= targetStats.numNumbers;
|
|
if (canInterpolate) {
|
|
return pipe(mixArray(originStats.parsed, targetStats.parsed), template);
|
|
} else {
|
|
warning(true, `Complex values '${origin}' and '${target}' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.`);
|
|
return (p) => `${p > 0 ? target : origin}`;
|
|
}
|
|
};
|
|
|
|
// ../node_modules/.pnpm/popmotion@11.0.5/node_modules/popmotion/dist/es/utils/interpolate.mjs
|
|
var mixNumber = (from, to) => (p) => mix(from, to, p);
|
|
function detectMixerFactory(v) {
|
|
if (typeof v === "number") {
|
|
return mixNumber;
|
|
} else if (typeof v === "string") {
|
|
if (color.test(v)) {
|
|
return mixColor;
|
|
} else {
|
|
return mixComplex;
|
|
}
|
|
} else if (Array.isArray(v)) {
|
|
return mixArray;
|
|
} else if (typeof v === "object") {
|
|
return mixObject;
|
|
}
|
|
}
|
|
function createMixers(output, ease, customMixer) {
|
|
const mixers = [];
|
|
const mixerFactory = customMixer || detectMixerFactory(output[0]);
|
|
const numMixers = output.length - 1;
|
|
for (let i = 0; i < numMixers; i++) {
|
|
let mixer = mixerFactory(output[i], output[i + 1]);
|
|
if (ease) {
|
|
const easingFunction = Array.isArray(ease) ? ease[i] : ease;
|
|
mixer = pipe(easingFunction, mixer);
|
|
}
|
|
mixers.push(mixer);
|
|
}
|
|
return mixers;
|
|
}
|
|
function fastInterpolate([from, to], [mixer]) {
|
|
return (v) => mixer(progress(from, to, v));
|
|
}
|
|
function slowInterpolate(input, mixers) {
|
|
const inputLength = input.length;
|
|
const lastInputIndex = inputLength - 1;
|
|
return (v) => {
|
|
let mixerIndex = 0;
|
|
let foundMixerIndex = false;
|
|
if (v <= input[0]) {
|
|
foundMixerIndex = true;
|
|
} else if (v >= input[lastInputIndex]) {
|
|
mixerIndex = lastInputIndex - 1;
|
|
foundMixerIndex = true;
|
|
}
|
|
if (!foundMixerIndex) {
|
|
let i = 1;
|
|
for (; i < inputLength; i++) {
|
|
if (input[i] > v || i === lastInputIndex) {
|
|
break;
|
|
}
|
|
}
|
|
mixerIndex = i - 1;
|
|
}
|
|
const progressInRange = progress(input[mixerIndex], input[mixerIndex + 1], v);
|
|
return mixers[mixerIndex](progressInRange);
|
|
};
|
|
}
|
|
function interpolate(input, output, { clamp: isClamp = true, ease, mixer } = {}) {
|
|
const inputLength = input.length;
|
|
invariant(inputLength === output.length, "Both input and output ranges must be the same length");
|
|
invariant(!ease || !Array.isArray(ease) || ease.length === inputLength - 1, "Array of easing functions must be of length `input.length - 1`, as it applies to the transitions **between** the defined values.");
|
|
if (input[0] > input[inputLength - 1]) {
|
|
input = [].concat(input);
|
|
output = [].concat(output);
|
|
input.reverse();
|
|
output.reverse();
|
|
}
|
|
const mixers = createMixers(output, ease, mixer);
|
|
const interpolator = inputLength === 2 ? fastInterpolate(input, mixers) : slowInterpolate(input, mixers);
|
|
return isClamp ? (v) => interpolator(clamp(input[0], input[inputLength - 1], v)) : interpolator;
|
|
}
|
|
|
|
// ../node_modules/.pnpm/popmotion@11.0.5/node_modules/popmotion/dist/es/easing/utils.mjs
|
|
var reverseEasing = (easing) => (p) => 1 - easing(1 - p);
|
|
var mirrorEasing = (easing) => (p) => p <= 0.5 ? easing(2 * p) / 2 : (2 - easing(2 * (1 - p))) / 2;
|
|
var createExpoIn = (power) => (p) => Math.pow(p, power);
|
|
var createBackIn = (power) => (p) => p * p * ((power + 1) * p - power);
|
|
var createAnticipate = (power) => {
|
|
const backEasing = createBackIn(power);
|
|
return (p) => (p *= 2) < 1 ? 0.5 * backEasing(p) : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));
|
|
};
|
|
|
|
// ../node_modules/.pnpm/popmotion@11.0.5/node_modules/popmotion/dist/es/easing/index.mjs
|
|
var DEFAULT_OVERSHOOT_STRENGTH = 1.525;
|
|
var BOUNCE_FIRST_THRESHOLD = 4 / 11;
|
|
var BOUNCE_SECOND_THRESHOLD = 8 / 11;
|
|
var BOUNCE_THIRD_THRESHOLD = 9 / 10;
|
|
var linear = (p) => p;
|
|
var easeIn = createExpoIn(2);
|
|
var easeOut = reverseEasing(easeIn);
|
|
var easeInOut = mirrorEasing(easeIn);
|
|
var circIn = (p) => 1 - Math.sin(Math.acos(p));
|
|
var circOut = reverseEasing(circIn);
|
|
var circInOut = mirrorEasing(circOut);
|
|
var backIn = createBackIn(DEFAULT_OVERSHOOT_STRENGTH);
|
|
var backOut = reverseEasing(backIn);
|
|
var backInOut = mirrorEasing(backIn);
|
|
var anticipate = createAnticipate(DEFAULT_OVERSHOOT_STRENGTH);
|
|
var ca = 4356 / 361;
|
|
var cb = 35442 / 1805;
|
|
var cc = 16061 / 1805;
|
|
var bounceOut = (p) => {
|
|
if (p === 1 || p === 0)
|
|
return p;
|
|
const p2 = p * p;
|
|
return p < BOUNCE_FIRST_THRESHOLD ? 7.5625 * p2 : p < BOUNCE_SECOND_THRESHOLD ? 9.075 * p2 - 9.9 * p + 3.4 : p < BOUNCE_THIRD_THRESHOLD ? ca * p2 - cb * p + cc : 10.8 * p * p - 20.52 * p + 10.72;
|
|
};
|
|
var bounceIn = reverseEasing(bounceOut);
|
|
var bounceInOut = (p) => p < 0.5 ? 0.5 * (1 - bounceOut(1 - p * 2)) : 0.5 * bounceOut(p * 2 - 1) + 0.5;
|
|
|
|
// ../node_modules/.pnpm/popmotion@11.0.5/node_modules/popmotion/dist/es/animations/generators/keyframes.mjs
|
|
function defaultEasing(values, easing) {
|
|
return values.map(() => easing || easeInOut).splice(0, values.length - 1);
|
|
}
|
|
function defaultOffset(values) {
|
|
const numValues = values.length;
|
|
return values.map((_value, i) => i !== 0 ? i / (numValues - 1) : 0);
|
|
}
|
|
function convertOffsetToTimes(offset, duration) {
|
|
return offset.map((o) => o * duration);
|
|
}
|
|
function keyframes({ from = 0, to = 1, ease, offset, duration = 300 }) {
|
|
const state = { done: false, value: from };
|
|
const values = Array.isArray(to) ? to : [from, to];
|
|
const times = convertOffsetToTimes(offset && offset.length === values.length ? offset : defaultOffset(values), duration);
|
|
function createInterpolator() {
|
|
return interpolate(times, values, {
|
|
ease: Array.isArray(ease) ? ease : defaultEasing(values, ease)
|
|
});
|
|
}
|
|
let interpolator = createInterpolator();
|
|
return {
|
|
next: (t) => {
|
|
state.value = interpolator(t);
|
|
state.done = t >= duration;
|
|
return state;
|
|
},
|
|
flipTarget: () => {
|
|
values.reverse();
|
|
interpolator = createInterpolator();
|
|
}
|
|
};
|
|
}
|
|
|
|
// ../node_modules/.pnpm/popmotion@11.0.5/node_modules/popmotion/dist/es/animations/generators/decay.mjs
|
|
function decay({ velocity = 0, from = 0, power = 0.8, timeConstant = 350, restDelta = 0.5, modifyTarget }) {
|
|
const state = { done: false, value: from };
|
|
let amplitude = power * velocity;
|
|
const ideal = from + amplitude;
|
|
const target = modifyTarget === void 0 ? ideal : modifyTarget(ideal);
|
|
if (target !== ideal)
|
|
amplitude = target - from;
|
|
return {
|
|
next: (t) => {
|
|
const delta = -amplitude * Math.exp(-t / timeConstant);
|
|
state.done = !(delta > restDelta || delta < -restDelta);
|
|
state.value = state.done ? target : target + delta;
|
|
return state;
|
|
},
|
|
flipTarget: () => {
|
|
}
|
|
};
|
|
}
|
|
|
|
// ../node_modules/.pnpm/popmotion@11.0.5/node_modules/popmotion/dist/es/animations/utils/detect-animation-from-options.mjs
|
|
var types = { keyframes, spring, decay };
|
|
function detectAnimationFromOptions(config) {
|
|
if (Array.isArray(config.to)) {
|
|
return keyframes;
|
|
} else if (types[config.type]) {
|
|
return types[config.type];
|
|
}
|
|
const keys = new Set(Object.keys(config));
|
|
if (keys.has("ease") || keys.has("duration") && !keys.has("dampingRatio")) {
|
|
return keyframes;
|
|
} else if (keys.has("dampingRatio") || keys.has("stiffness") || keys.has("mass") || keys.has("damping") || keys.has("restSpeed") || keys.has("restDelta")) {
|
|
return spring;
|
|
}
|
|
return keyframes;
|
|
}
|
|
|
|
// ../node_modules/.pnpm/popmotion@11.0.5/node_modules/popmotion/dist/es/animations/utils/elapsed.mjs
|
|
function loopElapsed(elapsed, duration, delay = 0) {
|
|
return elapsed - duration - delay;
|
|
}
|
|
function reverseElapsed(elapsed, duration, delay = 0, isForwardPlayback = true) {
|
|
return isForwardPlayback ? loopElapsed(duration + -elapsed, duration, delay) : duration - (elapsed - duration) + delay;
|
|
}
|
|
function hasRepeatDelayElapsed(elapsed, duration, delay, isForwardPlayback) {
|
|
return isForwardPlayback ? elapsed >= duration + delay : elapsed <= -delay;
|
|
}
|
|
|
|
// ../node_modules/.pnpm/popmotion@11.0.5/node_modules/popmotion/dist/es/animations/index.mjs
|
|
var framesync = (update) => {
|
|
const passTimestamp = ({ delta }) => update(delta);
|
|
return {
|
|
start: () => es_default.update(passTimestamp, true),
|
|
stop: () => cancelSync.update(passTimestamp)
|
|
};
|
|
};
|
|
function animate(_a) {
|
|
var _b, _c;
|
|
var { from, autoplay = true, driver = framesync, elapsed = 0, repeat: repeatMax = 0, repeatType = "loop", repeatDelay = 0, onPlay, onStop, onComplete, onRepeat, onUpdate } = _a, options = __rest(_a, ["from", "autoplay", "driver", "elapsed", "repeat", "repeatType", "repeatDelay", "onPlay", "onStop", "onComplete", "onRepeat", "onUpdate"]);
|
|
let { to } = options;
|
|
let driverControls;
|
|
let repeatCount = 0;
|
|
let computedDuration = options.duration;
|
|
let latest;
|
|
let isComplete = false;
|
|
let isForwardPlayback = true;
|
|
let interpolateFromNumber;
|
|
const animator = detectAnimationFromOptions(options);
|
|
if ((_c = (_b = animator).needsInterpolation) === null || _c === void 0 ? void 0 : _c.call(_b, from, to)) {
|
|
interpolateFromNumber = interpolate([0, 100], [from, to], {
|
|
clamp: false
|
|
});
|
|
from = 0;
|
|
to = 100;
|
|
}
|
|
const animation = animator(Object.assign(Object.assign({}, options), { from, to }));
|
|
function repeat() {
|
|
repeatCount++;
|
|
if (repeatType === "reverse") {
|
|
isForwardPlayback = repeatCount % 2 === 0;
|
|
elapsed = reverseElapsed(elapsed, computedDuration, repeatDelay, isForwardPlayback);
|
|
} else {
|
|
elapsed = loopElapsed(elapsed, computedDuration, repeatDelay);
|
|
if (repeatType === "mirror")
|
|
animation.flipTarget();
|
|
}
|
|
isComplete = false;
|
|
onRepeat && onRepeat();
|
|
}
|
|
function complete() {
|
|
driverControls.stop();
|
|
onComplete && onComplete();
|
|
}
|
|
function update(delta) {
|
|
if (!isForwardPlayback)
|
|
delta = -delta;
|
|
elapsed += delta;
|
|
if (!isComplete) {
|
|
const state = animation.next(Math.max(0, elapsed));
|
|
latest = state.value;
|
|
if (interpolateFromNumber)
|
|
latest = interpolateFromNumber(latest);
|
|
isComplete = isForwardPlayback ? state.done : elapsed <= 0;
|
|
}
|
|
onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(latest);
|
|
if (isComplete) {
|
|
if (repeatCount === 0)
|
|
computedDuration !== null && computedDuration !== void 0 ? computedDuration : computedDuration = elapsed;
|
|
if (repeatCount < repeatMax) {
|
|
hasRepeatDelayElapsed(elapsed, computedDuration, repeatDelay, isForwardPlayback) && repeat();
|
|
} else {
|
|
complete();
|
|
}
|
|
}
|
|
}
|
|
function play() {
|
|
onPlay === null || onPlay === void 0 ? void 0 : onPlay();
|
|
driverControls = driver(update);
|
|
driverControls.start();
|
|
}
|
|
autoplay && play();
|
|
return {
|
|
stop: () => {
|
|
onStop === null || onStop === void 0 ? void 0 : onStop();
|
|
driverControls.stop();
|
|
}
|
|
};
|
|
}
|
|
|
|
// ../node_modules/.pnpm/popmotion@11.0.5/node_modules/popmotion/dist/es/utils/velocity-per-second.mjs
|
|
function velocityPerSecond(velocity, frameDuration) {
|
|
return frameDuration ? velocity * (1e3 / frameDuration) : 0;
|
|
}
|
|
|
|
// ../node_modules/.pnpm/popmotion@11.0.5/node_modules/popmotion/dist/es/animations/inertia.mjs
|
|
function inertia({ from = 0, velocity = 0, min, max, power = 0.8, timeConstant = 750, bounceStiffness = 500, bounceDamping = 10, restDelta = 1, modifyTarget, driver, onUpdate, onComplete, onStop }) {
|
|
let currentAnimation;
|
|
function isOutOfBounds(v) {
|
|
return min !== void 0 && v < min || max !== void 0 && v > max;
|
|
}
|
|
function boundaryNearest(v) {
|
|
if (min === void 0)
|
|
return max;
|
|
if (max === void 0)
|
|
return min;
|
|
return Math.abs(min - v) < Math.abs(max - v) ? min : max;
|
|
}
|
|
function startAnimation(options) {
|
|
currentAnimation === null || currentAnimation === void 0 ? void 0 : currentAnimation.stop();
|
|
currentAnimation = animate(Object.assign(Object.assign({}, options), {
|
|
driver,
|
|
onUpdate: (v) => {
|
|
var _a;
|
|
onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(v);
|
|
(_a = options.onUpdate) === null || _a === void 0 ? void 0 : _a.call(options, v);
|
|
},
|
|
onComplete,
|
|
onStop
|
|
}));
|
|
}
|
|
function startSpring(options) {
|
|
startAnimation(Object.assign({ type: "spring", stiffness: bounceStiffness, damping: bounceDamping, restDelta }, options));
|
|
}
|
|
if (isOutOfBounds(from)) {
|
|
startSpring({ from, velocity, to: boundaryNearest(from) });
|
|
} else {
|
|
let target = power * velocity + from;
|
|
if (typeof modifyTarget !== "undefined")
|
|
target = modifyTarget(target);
|
|
const boundary = boundaryNearest(target);
|
|
const heading = boundary === min ? -1 : 1;
|
|
let prev;
|
|
let current;
|
|
const checkBoundary = (v) => {
|
|
prev = current;
|
|
current = v;
|
|
velocity = velocityPerSecond(v - prev, getFrameData().delta);
|
|
if (heading === 1 && v > boundary || heading === -1 && v < boundary) {
|
|
startSpring({ from: v, to: boundary, velocity });
|
|
}
|
|
};
|
|
startAnimation({
|
|
type: "decay",
|
|
from,
|
|
velocity,
|
|
timeConstant,
|
|
power,
|
|
restDelta,
|
|
modifyTarget,
|
|
onUpdate: isOutOfBounds(target) ? checkBoundary : void 0
|
|
});
|
|
}
|
|
return {
|
|
stop: () => currentAnimation === null || currentAnimation === void 0 ? void 0 : currentAnimation.stop()
|
|
};
|
|
}
|
|
|
|
// ../node_modules/.pnpm/popmotion@11.0.5/node_modules/popmotion/dist/es/utils/attract.mjs
|
|
var identity = (v) => v;
|
|
var createAttractor = (alterDisplacement = identity) => (constant, origin, v) => {
|
|
const displacement = origin - v;
|
|
const springModifiedDisplacement = -(0 - constant + 1) * (0 - alterDisplacement(Math.abs(displacement)));
|
|
return displacement <= 0 ? origin + springModifiedDisplacement : origin - springModifiedDisplacement;
|
|
};
|
|
var attract = createAttractor();
|
|
var attractExpo = createAttractor(Math.sqrt);
|
|
|
|
// ../node_modules/.pnpm/popmotion@11.0.5/node_modules/popmotion/dist/es/easing/cubic-bezier.mjs
|
|
var a = (a1, a2) => 1 - 3 * a2 + 3 * a1;
|
|
var b = (a1, a2) => 3 * a2 - 6 * a1;
|
|
var c = (a1) => 3 * a1;
|
|
var calcBezier = (t, a1, a2) => ((a(a1, a2) * t + b(a1, a2)) * t + c(a1)) * t;
|
|
var getSlope = (t, a1, a2) => 3 * a(a1, a2) * t * t + 2 * b(a1, a2) * t + c(a1);
|
|
var subdivisionPrecision = 1e-7;
|
|
var subdivisionMaxIterations = 10;
|
|
function binarySubdivide(aX, aA, aB, mX1, mX2) {
|
|
let currentX;
|
|
let currentT;
|
|
let i = 0;
|
|
do {
|
|
currentT = aA + (aB - aA) / 2;
|
|
currentX = calcBezier(currentT, mX1, mX2) - aX;
|
|
if (currentX > 0) {
|
|
aB = currentT;
|
|
} else {
|
|
aA = currentT;
|
|
}
|
|
} while (Math.abs(currentX) > subdivisionPrecision && ++i < subdivisionMaxIterations);
|
|
return currentT;
|
|
}
|
|
var newtonIterations = 8;
|
|
var newtonMinSlope = 1e-3;
|
|
function newtonRaphsonIterate(aX, aGuessT, mX1, mX2) {
|
|
for (let i = 0; i < newtonIterations; ++i) {
|
|
const currentSlope = getSlope(aGuessT, mX1, mX2);
|
|
if (currentSlope === 0) {
|
|
return aGuessT;
|
|
}
|
|
const currentX = calcBezier(aGuessT, mX1, mX2) - aX;
|
|
aGuessT -= currentX / currentSlope;
|
|
}
|
|
return aGuessT;
|
|
}
|
|
var kSplineTableSize = 11;
|
|
var kSampleStepSize = 1 / (kSplineTableSize - 1);
|
|
function cubicBezier(mX1, mY1, mX2, mY2) {
|
|
if (mX1 === mY1 && mX2 === mY2)
|
|
return linear;
|
|
const sampleValues = new Float32Array(kSplineTableSize);
|
|
for (let i = 0; i < kSplineTableSize; ++i) {
|
|
sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
|
|
}
|
|
function getTForX(aX) {
|
|
let intervalStart = 0;
|
|
let currentSample = 1;
|
|
const lastSample = kSplineTableSize - 1;
|
|
for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) {
|
|
intervalStart += kSampleStepSize;
|
|
}
|
|
--currentSample;
|
|
const dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]);
|
|
const guessForT = intervalStart + dist * kSampleStepSize;
|
|
const initialSlope = getSlope(guessForT, mX1, mX2);
|
|
if (initialSlope >= newtonMinSlope) {
|
|
return newtonRaphsonIterate(aX, guessForT, mX1, mX2);
|
|
} else if (initialSlope === 0) {
|
|
return guessForT;
|
|
} else {
|
|
return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2);
|
|
}
|
|
}
|
|
return (t) => t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2);
|
|
}
|
|
|
|
// ../node_modules/.pnpm/@vueuse+motion@3.0.3_vue@3.5.24_typescript@5.9.3_/node_modules/@vueuse/motion/dist/index.mjs
|
|
var motionState = {};
|
|
var SubscriptionManager = class {
|
|
subscriptions = /* @__PURE__ */ new Set();
|
|
add(handler) {
|
|
this.subscriptions.add(handler);
|
|
return () => this.subscriptions.delete(handler);
|
|
}
|
|
notify(a2, b2, c2) {
|
|
if (!this.subscriptions.size)
|
|
return;
|
|
for (const handler of this.subscriptions) handler(a2, b2, c2);
|
|
}
|
|
clear() {
|
|
this.subscriptions.clear();
|
|
}
|
|
};
|
|
function isFloat(value) {
|
|
return !Number.isNaN(Number.parseFloat(value));
|
|
}
|
|
var MotionValue = class {
|
|
/**
|
|
* The current state of the `MotionValue`.
|
|
*/
|
|
current;
|
|
/**
|
|
* The previous state of the `MotionValue`.
|
|
*/
|
|
prev;
|
|
/**
|
|
* Duration, in milliseconds, since last updating frame.
|
|
*/
|
|
timeDelta = 0;
|
|
/**
|
|
* Timestamp of the last time this `MotionValue` was updated.
|
|
*/
|
|
lastUpdated = 0;
|
|
/**
|
|
* Functions to notify when the `MotionValue` updates.
|
|
*/
|
|
updateSubscribers = new SubscriptionManager();
|
|
/**
|
|
* A reference to the currently-controlling Popmotion animation
|
|
*/
|
|
stopAnimation;
|
|
/**
|
|
* Tracks whether this value can output a velocity.
|
|
*/
|
|
canTrackVelocity = false;
|
|
/**
|
|
* init - The initiating value
|
|
* config - Optional configuration options
|
|
*/
|
|
constructor(init) {
|
|
this.prev = this.current = init;
|
|
this.canTrackVelocity = isFloat(this.current);
|
|
}
|
|
/**
|
|
* Adds a function that will be notified when the `MotionValue` is updated.
|
|
*
|
|
* It returns a function that, when called, will cancel the subscription.
|
|
*/
|
|
onChange(subscription) {
|
|
return this.updateSubscribers.add(subscription);
|
|
}
|
|
clearListeners() {
|
|
this.updateSubscribers.clear();
|
|
}
|
|
/**
|
|
* Sets the state of the `MotionValue`.
|
|
*
|
|
* @param v
|
|
* @param render
|
|
*/
|
|
set(v) {
|
|
this.updateAndNotify(v);
|
|
}
|
|
/**
|
|
* Update and notify `MotionValue` subscribers.
|
|
*
|
|
* @param v
|
|
* @param render
|
|
*/
|
|
updateAndNotify = (v) => {
|
|
this.prev = this.current;
|
|
this.current = v;
|
|
const { delta, timestamp } = getFrameData();
|
|
if (this.lastUpdated !== timestamp) {
|
|
this.timeDelta = delta;
|
|
this.lastUpdated = timestamp;
|
|
}
|
|
es_default.postRender(this.scheduleVelocityCheck);
|
|
this.updateSubscribers.notify(this.current);
|
|
};
|
|
/**
|
|
* Returns the latest state of `MotionValue`
|
|
*
|
|
* @returns - The latest state of `MotionValue`
|
|
*/
|
|
get() {
|
|
return this.current;
|
|
}
|
|
/**
|
|
* Get previous value.
|
|
*
|
|
* @returns - The previous latest state of `MotionValue`
|
|
*/
|
|
getPrevious() {
|
|
return this.prev;
|
|
}
|
|
/**
|
|
* Returns the latest velocity of `MotionValue`
|
|
*
|
|
* @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical.
|
|
*/
|
|
getVelocity() {
|
|
return this.canTrackVelocity ? velocityPerSecond(Number.parseFloat(this.current) - Number.parseFloat(this.prev), this.timeDelta) : 0;
|
|
}
|
|
/**
|
|
* Schedule a velocity check for the next frame.
|
|
*/
|
|
scheduleVelocityCheck = () => es_default.postRender(this.velocityCheck);
|
|
/**
|
|
* Updates `prev` with `current` if the value hasn't been updated this frame.
|
|
* This ensures velocity calculations return `0`.
|
|
*/
|
|
velocityCheck = ({ timestamp }) => {
|
|
if (!this.canTrackVelocity)
|
|
this.canTrackVelocity = isFloat(this.current);
|
|
if (timestamp !== this.lastUpdated)
|
|
this.prev = this.current;
|
|
};
|
|
/**
|
|
* Registers a new animation to control this `MotionValue`. Only one
|
|
* animation can drive a `MotionValue` at one time.
|
|
*/
|
|
start(animation) {
|
|
this.stop();
|
|
return new Promise((resolve) => {
|
|
const { stop } = animation(resolve);
|
|
this.stopAnimation = stop;
|
|
}).then(() => this.clearAnimation());
|
|
}
|
|
/**
|
|
* Stop the currently active animation.
|
|
*/
|
|
stop() {
|
|
if (this.stopAnimation)
|
|
this.stopAnimation();
|
|
this.clearAnimation();
|
|
}
|
|
/**
|
|
* Returns `true` if this value is currently animating.
|
|
*/
|
|
isAnimating() {
|
|
return !!this.stopAnimation;
|
|
}
|
|
/**
|
|
* Clear the current animation reference.
|
|
*/
|
|
clearAnimation() {
|
|
this.stopAnimation = null;
|
|
}
|
|
/**
|
|
* Destroy and clean up subscribers to this `MotionValue`.
|
|
*/
|
|
destroy() {
|
|
this.updateSubscribers.clear();
|
|
this.stop();
|
|
}
|
|
};
|
|
function getMotionValue(init) {
|
|
return new MotionValue(init);
|
|
}
|
|
var { isArray } = Array;
|
|
function useMotionValues() {
|
|
const motionValues = ref({});
|
|
const stop = (keys) => {
|
|
const destroyKey = (key) => {
|
|
if (!motionValues.value[key])
|
|
return;
|
|
motionValues.value[key].stop();
|
|
motionValues.value[key].destroy();
|
|
delete motionValues.value[key];
|
|
};
|
|
if (keys) {
|
|
if (isArray(keys)) {
|
|
keys.forEach(destroyKey);
|
|
} else {
|
|
destroyKey(keys);
|
|
}
|
|
} else {
|
|
Object.keys(motionValues.value).forEach(destroyKey);
|
|
}
|
|
};
|
|
const get = (key, from, target) => {
|
|
if (motionValues.value[key])
|
|
return motionValues.value[key];
|
|
const motionValue = getMotionValue(from);
|
|
motionValue.onChange((v) => target[key] = v);
|
|
motionValues.value[key] = motionValue;
|
|
return motionValue;
|
|
};
|
|
tryOnUnmounted(stop);
|
|
return {
|
|
motionValues,
|
|
get,
|
|
stop
|
|
};
|
|
}
|
|
function isKeyframesTarget(v) {
|
|
return Array.isArray(v);
|
|
}
|
|
function underDampedSpring() {
|
|
return {
|
|
type: "spring",
|
|
stiffness: 500,
|
|
damping: 25,
|
|
restDelta: 0.5,
|
|
restSpeed: 10
|
|
};
|
|
}
|
|
function criticallyDampedSpring(to) {
|
|
return {
|
|
type: "spring",
|
|
stiffness: 550,
|
|
damping: to === 0 ? 2 * Math.sqrt(550) : 30,
|
|
restDelta: 0.01,
|
|
restSpeed: 10
|
|
};
|
|
}
|
|
function overDampedSpring(to) {
|
|
return {
|
|
type: "spring",
|
|
stiffness: 550,
|
|
damping: to === 0 ? 100 : 30,
|
|
restDelta: 0.01,
|
|
restSpeed: 10
|
|
};
|
|
}
|
|
function linearTween() {
|
|
return {
|
|
type: "keyframes",
|
|
ease: "linear",
|
|
duration: 300
|
|
};
|
|
}
|
|
function keyframes2(values) {
|
|
return {
|
|
type: "keyframes",
|
|
duration: 800,
|
|
values
|
|
};
|
|
}
|
|
var defaultTransitions = {
|
|
default: overDampedSpring,
|
|
x: underDampedSpring,
|
|
y: underDampedSpring,
|
|
z: underDampedSpring,
|
|
rotate: underDampedSpring,
|
|
rotateX: underDampedSpring,
|
|
rotateY: underDampedSpring,
|
|
rotateZ: underDampedSpring,
|
|
scaleX: criticallyDampedSpring,
|
|
scaleY: criticallyDampedSpring,
|
|
scale: criticallyDampedSpring,
|
|
backgroundColor: linearTween,
|
|
color: linearTween,
|
|
opacity: linearTween
|
|
};
|
|
function getDefaultTransition(valueKey, to) {
|
|
let transitionFactory;
|
|
if (isKeyframesTarget(to)) {
|
|
transitionFactory = keyframes2;
|
|
} else {
|
|
transitionFactory = defaultTransitions[valueKey] || defaultTransitions.default;
|
|
}
|
|
return { to, ...transitionFactory(to) };
|
|
}
|
|
var int = {
|
|
...number,
|
|
transform: Math.round
|
|
};
|
|
var valueTypes = {
|
|
// Color props
|
|
color,
|
|
backgroundColor: color,
|
|
outlineColor: color,
|
|
fill: color,
|
|
stroke: color,
|
|
// Border props
|
|
borderColor: color,
|
|
borderTopColor: color,
|
|
borderRightColor: color,
|
|
borderBottomColor: color,
|
|
borderLeftColor: color,
|
|
borderWidth: px,
|
|
borderTopWidth: px,
|
|
borderRightWidth: px,
|
|
borderBottomWidth: px,
|
|
borderLeftWidth: px,
|
|
borderRadius: px,
|
|
radius: px,
|
|
borderTopLeftRadius: px,
|
|
borderTopRightRadius: px,
|
|
borderBottomRightRadius: px,
|
|
borderBottomLeftRadius: px,
|
|
// Positioning props
|
|
width: px,
|
|
maxWidth: px,
|
|
height: px,
|
|
maxHeight: px,
|
|
size: px,
|
|
top: px,
|
|
right: px,
|
|
bottom: px,
|
|
left: px,
|
|
// Spacing props
|
|
padding: px,
|
|
paddingTop: px,
|
|
paddingRight: px,
|
|
paddingBottom: px,
|
|
paddingLeft: px,
|
|
margin: px,
|
|
marginTop: px,
|
|
marginRight: px,
|
|
marginBottom: px,
|
|
marginLeft: px,
|
|
// Transform props
|
|
rotate: degrees,
|
|
rotateX: degrees,
|
|
rotateY: degrees,
|
|
rotateZ: degrees,
|
|
scale,
|
|
scaleX: scale,
|
|
scaleY: scale,
|
|
scaleZ: scale,
|
|
skew: degrees,
|
|
skewX: degrees,
|
|
skewY: degrees,
|
|
distance: px,
|
|
translateX: px,
|
|
translateY: px,
|
|
translateZ: px,
|
|
x: px,
|
|
y: px,
|
|
z: px,
|
|
perspective: px,
|
|
transformPerspective: px,
|
|
opacity: alpha,
|
|
originX: progressPercentage,
|
|
originY: progressPercentage,
|
|
originZ: px,
|
|
// Misc
|
|
zIndex: int,
|
|
filter,
|
|
WebkitFilter: filter,
|
|
// SVG
|
|
fillOpacity: alpha,
|
|
strokeOpacity: alpha,
|
|
numOctaves: int
|
|
};
|
|
var getValueType = (key) => valueTypes[key];
|
|
function getValueAsType(value, type) {
|
|
return type && typeof value === "number" && type.transform ? type.transform(value) : value;
|
|
}
|
|
function getAnimatableNone2(key, value) {
|
|
let defaultValueType = getValueType(key);
|
|
if (defaultValueType !== filter)
|
|
defaultValueType = complex;
|
|
return defaultValueType.getAnimatableNone ? defaultValueType.getAnimatableNone(value) : void 0;
|
|
}
|
|
var easingLookup = {
|
|
linear,
|
|
easeIn,
|
|
easeInOut,
|
|
easeOut,
|
|
circIn,
|
|
circInOut,
|
|
circOut,
|
|
backIn,
|
|
backInOut,
|
|
backOut,
|
|
anticipate,
|
|
bounceIn,
|
|
bounceInOut,
|
|
bounceOut
|
|
};
|
|
function easingDefinitionToFunction(definition) {
|
|
if (Array.isArray(definition)) {
|
|
const [x1, y1, x2, y2] = definition;
|
|
return cubicBezier(x1, y1, x2, y2);
|
|
} else if (typeof definition === "string") {
|
|
return easingLookup[definition];
|
|
}
|
|
return definition;
|
|
}
|
|
function isEasingArray(ease) {
|
|
return Array.isArray(ease) && typeof ease[0] !== "number";
|
|
}
|
|
function isAnimatable(key, value) {
|
|
if (key === "zIndex")
|
|
return false;
|
|
if (typeof value === "number" || Array.isArray(value))
|
|
return true;
|
|
if (typeof value === "string" && complex.test(value) && !value.startsWith("url(")) {
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
function hydrateKeyframes(options) {
|
|
if (Array.isArray(options.to) && options.to[0] === null) {
|
|
options.to = [...options.to];
|
|
options.to[0] = options.from;
|
|
}
|
|
return options;
|
|
}
|
|
function convertTransitionToAnimationOptions({ ease, times, delay, ...transition }) {
|
|
const options = { ...transition };
|
|
if (times)
|
|
options.offset = times;
|
|
if (ease) {
|
|
options.ease = isEasingArray(ease) ? ease.map(easingDefinitionToFunction) : easingDefinitionToFunction(ease);
|
|
}
|
|
if (delay)
|
|
options.elapsed = -delay;
|
|
return options;
|
|
}
|
|
function getPopmotionAnimationOptions(transition, options, key) {
|
|
if (Array.isArray(options.to)) {
|
|
if (!transition.duration)
|
|
transition.duration = 800;
|
|
}
|
|
hydrateKeyframes(options);
|
|
if (!isTransitionDefined(transition)) {
|
|
transition = {
|
|
...transition,
|
|
...getDefaultTransition(key, options.to)
|
|
};
|
|
}
|
|
return {
|
|
...options,
|
|
...convertTransitionToAnimationOptions(transition)
|
|
};
|
|
}
|
|
function isTransitionDefined({ delay, repeat, repeatType, repeatDelay, from, ...transition }) {
|
|
return !!Object.keys(transition).length;
|
|
}
|
|
function getValueTransition(transition, key) {
|
|
return transition[key] || transition.default || transition;
|
|
}
|
|
function getAnimation(key, value, target, transition, onComplete) {
|
|
const valueTransition = getValueTransition(transition, key);
|
|
let origin = valueTransition.from === null || valueTransition.from === void 0 ? value.get() : valueTransition.from;
|
|
const isTargetAnimatable = isAnimatable(key, target);
|
|
if (origin === "none" && isTargetAnimatable && typeof target === "string")
|
|
origin = getAnimatableNone2(key, target);
|
|
const isOriginAnimatable = isAnimatable(key, origin);
|
|
function start(complete) {
|
|
const options = {
|
|
from: origin,
|
|
to: target,
|
|
velocity: transition.velocity ? transition.velocity : value.getVelocity(),
|
|
onUpdate: (v) => value.set(v)
|
|
};
|
|
return valueTransition.type === "inertia" || valueTransition.type === "decay" ? inertia({ ...options, ...valueTransition }) : animate({
|
|
...getPopmotionAnimationOptions(valueTransition, options, key),
|
|
onUpdate: (v) => {
|
|
options.onUpdate(v);
|
|
if (valueTransition.onUpdate)
|
|
valueTransition.onUpdate(v);
|
|
},
|
|
onComplete: () => {
|
|
if (onComplete)
|
|
onComplete();
|
|
if (complete)
|
|
complete();
|
|
}
|
|
});
|
|
}
|
|
function set(complete) {
|
|
value.set(target);
|
|
if (onComplete)
|
|
onComplete();
|
|
if (complete)
|
|
complete();
|
|
return { stop: () => {
|
|
} };
|
|
}
|
|
return !isOriginAnimatable || !isTargetAnimatable || valueTransition.type === false ? set : start;
|
|
}
|
|
function useMotionTransitions() {
|
|
const { motionValues, stop, get } = useMotionValues();
|
|
const push = (key, value, target, transition = {}, onComplete) => {
|
|
const from = target[key];
|
|
const motionValue = get(key, from, target);
|
|
if (transition && transition.immediate) {
|
|
motionValue.set(value);
|
|
return;
|
|
}
|
|
const animation = getAnimation(key, motionValue, value, transition, onComplete);
|
|
motionValue.start(animation);
|
|
};
|
|
return { motionValues, stop, push };
|
|
}
|
|
function useMotionControls(motionProperties, variants = {}, { motionValues, push, stop } = useMotionTransitions()) {
|
|
const _variants = unref(variants);
|
|
const isAnimating = ref(false);
|
|
watch(
|
|
motionValues,
|
|
(newVal) => {
|
|
isAnimating.value = Object.values(newVal).filter((value) => value.isAnimating()).length > 0;
|
|
},
|
|
{
|
|
immediate: true,
|
|
deep: true
|
|
}
|
|
);
|
|
const getVariantFromKey = (variant) => {
|
|
if (!_variants || !_variants[variant])
|
|
throw new Error(`The variant ${variant} does not exist.`);
|
|
return _variants[variant];
|
|
};
|
|
const apply = (variant) => {
|
|
if (typeof variant === "string")
|
|
variant = getVariantFromKey(variant);
|
|
const animations = Object.entries(variant).map(([key, value]) => {
|
|
if (key === "transition")
|
|
return void 0;
|
|
return new Promise(
|
|
(resolve) => (
|
|
// @ts-expect-error - Fix errors later for typescript 5
|
|
push(key, value, motionProperties, variant.transition || getDefaultTransition(key, variant[key]), resolve)
|
|
)
|
|
);
|
|
}).filter(Boolean);
|
|
async function waitForComplete() {
|
|
await Promise.all(animations);
|
|
variant.transition?.onComplete?.();
|
|
}
|
|
return Promise.all([waitForComplete()]);
|
|
};
|
|
const set = (variant) => {
|
|
const variantData = isObject(variant) ? variant : getVariantFromKey(variant);
|
|
Object.entries(variantData).forEach(([key, value]) => {
|
|
if (key === "transition")
|
|
return;
|
|
push(key, value, motionProperties, {
|
|
immediate: true
|
|
});
|
|
});
|
|
};
|
|
const leave = async (done) => {
|
|
let leaveVariant;
|
|
if (_variants) {
|
|
if (_variants.leave)
|
|
leaveVariant = _variants.leave;
|
|
if (!_variants.leave && _variants.initial)
|
|
leaveVariant = _variants.initial;
|
|
}
|
|
if (!leaveVariant) {
|
|
done();
|
|
return;
|
|
}
|
|
await apply(leaveVariant);
|
|
done();
|
|
};
|
|
return {
|
|
isAnimating,
|
|
apply,
|
|
set,
|
|
leave,
|
|
stop
|
|
};
|
|
}
|
|
var isBrowser = typeof window !== "undefined";
|
|
var supportsPointerEvents = () => isBrowser && (window.onpointerdown === null || import.meta.env?.TEST);
|
|
var supportsTouchEvents = () => isBrowser && (window.ontouchstart === null || import.meta.env?.TEST);
|
|
var supportsMouseEvents = () => isBrowser && (window.onmousedown === null || import.meta.env?.TEST);
|
|
function registerEventListeners({ target, state, variants, apply }) {
|
|
const _variants = unref(variants);
|
|
const hovered = ref(false);
|
|
const tapped = ref(false);
|
|
const focused = ref(false);
|
|
const mutableKeys = computed(() => {
|
|
let result = [...Object.keys(state.value || {})];
|
|
if (!_variants)
|
|
return result;
|
|
if (_variants.hovered)
|
|
result = [...result, ...Object.keys(_variants.hovered)];
|
|
if (_variants.tapped)
|
|
result = [...result, ...Object.keys(_variants.tapped)];
|
|
if (_variants.focused)
|
|
result = [...result, ...Object.keys(_variants.focused)];
|
|
return result;
|
|
});
|
|
const computedProperties = computed(() => {
|
|
const result = {};
|
|
Object.assign(result, state.value);
|
|
if (hovered.value && _variants.hovered)
|
|
Object.assign(result, _variants.hovered);
|
|
if (tapped.value && _variants.tapped)
|
|
Object.assign(result, _variants.tapped);
|
|
if (focused.value && _variants.focused)
|
|
Object.assign(result, _variants.focused);
|
|
for (const key in result) {
|
|
if (!mutableKeys.value.includes(key))
|
|
delete result[key];
|
|
}
|
|
return result;
|
|
});
|
|
if (_variants.hovered) {
|
|
useEventListener(target, "mouseenter", () => hovered.value = true);
|
|
useEventListener(target, "mouseleave", () => {
|
|
hovered.value = false;
|
|
tapped.value = false;
|
|
});
|
|
}
|
|
if (_variants.tapped) {
|
|
if (supportsMouseEvents()) {
|
|
useEventListener(target, "mousedown", () => tapped.value = true);
|
|
useEventListener(target, "mouseup", () => tapped.value = false);
|
|
}
|
|
if (supportsPointerEvents()) {
|
|
useEventListener(target, "pointerdown", () => tapped.value = true);
|
|
useEventListener(target, "pointerup", () => tapped.value = false);
|
|
}
|
|
if (supportsTouchEvents()) {
|
|
useEventListener(target, "touchstart", () => tapped.value = true);
|
|
useEventListener(target, "touchend", () => tapped.value = false);
|
|
}
|
|
}
|
|
if (_variants.focused) {
|
|
useEventListener(target, "focus", () => focused.value = true);
|
|
useEventListener(target, "blur", () => focused.value = false);
|
|
}
|
|
watch([hovered, tapped, focused], () => {
|
|
apply(computedProperties.value);
|
|
});
|
|
}
|
|
function registerLifeCycleHooks({ set, target, variants, variant }) {
|
|
const _variants = unref(variants);
|
|
watch(
|
|
() => target,
|
|
() => {
|
|
if (!_variants)
|
|
return;
|
|
if (_variants.initial) {
|
|
set("initial");
|
|
variant.value = "initial";
|
|
}
|
|
if (_variants.enter)
|
|
variant.value = "enter";
|
|
},
|
|
{
|
|
immediate: true,
|
|
flush: "pre"
|
|
}
|
|
);
|
|
}
|
|
function registerVariantsSync({ state, apply }) {
|
|
watch(
|
|
state,
|
|
(newVal) => {
|
|
if (newVal)
|
|
apply(newVal);
|
|
},
|
|
{
|
|
immediate: true
|
|
}
|
|
);
|
|
}
|
|
function registerVisibilityHooks({ target, variants, variant }) {
|
|
const _variants = unref(variants);
|
|
if (_variants && (_variants.visible || _variants.visibleOnce)) {
|
|
useIntersectionObserver(target, ([{ isIntersecting }]) => {
|
|
if (_variants.visible) {
|
|
if (isIntersecting)
|
|
variant.value = "visible";
|
|
else variant.value = "initial";
|
|
} else if (_variants.visibleOnce) {
|
|
if (isIntersecting && variant.value !== "visibleOnce")
|
|
variant.value = "visibleOnce";
|
|
else if (!variant.value)
|
|
variant.value = "initial";
|
|
}
|
|
});
|
|
}
|
|
}
|
|
function useMotionFeatures(instance, options = {
|
|
syncVariants: true,
|
|
lifeCycleHooks: true,
|
|
visibilityHooks: true,
|
|
eventListeners: true
|
|
}) {
|
|
if (options.lifeCycleHooks)
|
|
registerLifeCycleHooks(instance);
|
|
if (options.syncVariants)
|
|
registerVariantsSync(instance);
|
|
if (options.visibilityHooks)
|
|
registerVisibilityHooks(instance);
|
|
if (options.eventListeners)
|
|
registerEventListeners(instance);
|
|
}
|
|
function reactiveStyle(props = {}) {
|
|
const state = reactive({
|
|
...props
|
|
});
|
|
const style = ref({});
|
|
watch(
|
|
state,
|
|
() => {
|
|
const result = {};
|
|
for (const [key, value] of Object.entries(state)) {
|
|
const valueType = getValueType(key);
|
|
const valueAsType = getValueAsType(value, valueType);
|
|
result[key] = valueAsType;
|
|
}
|
|
style.value = result;
|
|
},
|
|
{
|
|
immediate: true,
|
|
deep: true
|
|
}
|
|
);
|
|
return {
|
|
state,
|
|
style
|
|
};
|
|
}
|
|
function usePermissiveTarget(target, onTarget) {
|
|
watch(
|
|
() => unrefElement(target),
|
|
(el) => {
|
|
if (!el)
|
|
return;
|
|
onTarget(el);
|
|
},
|
|
{
|
|
immediate: true
|
|
}
|
|
);
|
|
}
|
|
var translateAlias = {
|
|
x: "translateX",
|
|
y: "translateY",
|
|
z: "translateZ"
|
|
};
|
|
function reactiveTransform(props = {}, enableHardwareAcceleration = true) {
|
|
const state = reactive({ ...props });
|
|
const transform = ref("");
|
|
watch(
|
|
state,
|
|
(newVal) => {
|
|
let result = "";
|
|
let hasHardwareAcceleration = false;
|
|
if (enableHardwareAcceleration && (newVal.x || newVal.y || newVal.z)) {
|
|
const str = [newVal.x || 0, newVal.y || 0, newVal.z || 0].map((val) => getValueAsType(val, px)).join(",");
|
|
result += `translate3d(${str}) `;
|
|
hasHardwareAcceleration = true;
|
|
}
|
|
for (const [key, value] of Object.entries(newVal)) {
|
|
if (enableHardwareAcceleration && (key === "x" || key === "y" || key === "z"))
|
|
continue;
|
|
const valueType = getValueType(key);
|
|
const valueAsType = getValueAsType(value, valueType);
|
|
result += `${translateAlias[key] || key}(${valueAsType}) `;
|
|
}
|
|
if (enableHardwareAcceleration && !hasHardwareAcceleration)
|
|
result += "translateZ(0px) ";
|
|
transform.value = result.trim();
|
|
},
|
|
{
|
|
immediate: true,
|
|
deep: true
|
|
}
|
|
);
|
|
return {
|
|
state,
|
|
transform
|
|
};
|
|
}
|
|
var transformAxes = ["", "X", "Y", "Z"];
|
|
var order = ["perspective", "translate", "scale", "rotate", "skew"];
|
|
var transformProps = ["transformPerspective", "x", "y", "z"];
|
|
order.forEach((operationKey) => {
|
|
transformAxes.forEach((axesKey) => {
|
|
const key = operationKey + axesKey;
|
|
transformProps.push(key);
|
|
});
|
|
});
|
|
var transformPropSet = new Set(transformProps);
|
|
function isTransformProp(key) {
|
|
return transformPropSet.has(key);
|
|
}
|
|
var transformOriginProps = /* @__PURE__ */ new Set(["originX", "originY", "originZ"]);
|
|
function isTransformOriginProp(key) {
|
|
return transformOriginProps.has(key);
|
|
}
|
|
function splitValues(variant) {
|
|
const transform = {};
|
|
const style = {};
|
|
Object.entries(variant).forEach(([key, value]) => {
|
|
if (isTransformProp(key) || isTransformOriginProp(key))
|
|
transform[key] = value;
|
|
else style[key] = value;
|
|
});
|
|
return { transform, style };
|
|
}
|
|
function variantToStyle(variant) {
|
|
const { transform: _transform, style: _style } = splitValues(variant);
|
|
const { transform } = reactiveTransform(_transform);
|
|
const { style } = reactiveStyle(_style);
|
|
if (transform.value)
|
|
style.value.transform = transform.value;
|
|
return style.value;
|
|
}
|
|
function useElementStyle(target, onInit) {
|
|
let _cache;
|
|
let _target;
|
|
const { state, style } = reactiveStyle();
|
|
usePermissiveTarget(target, (el) => {
|
|
_target = el;
|
|
for (const key of Object.keys(valueTypes)) {
|
|
if (el.style[key] === null || el.style[key] === "" || isTransformProp(key) || isTransformOriginProp(key))
|
|
continue;
|
|
state[key] = el.style[key];
|
|
}
|
|
if (_cache) {
|
|
Object.entries(_cache).forEach(([key, value]) => el.style[key] = value);
|
|
}
|
|
if (onInit)
|
|
onInit(state);
|
|
});
|
|
watch(
|
|
style,
|
|
(newVal) => {
|
|
if (!_target) {
|
|
_cache = newVal;
|
|
return;
|
|
}
|
|
for (const key in newVal) _target.style[key] = newVal[key];
|
|
},
|
|
{
|
|
immediate: true
|
|
}
|
|
);
|
|
return {
|
|
style: state
|
|
};
|
|
}
|
|
function parseTransform(transform) {
|
|
const transforms = transform.trim().split(/\) |\)/);
|
|
if (transforms.length === 1)
|
|
return {};
|
|
const parseValues = (value) => {
|
|
if (value.endsWith("px") || value.endsWith("deg"))
|
|
return Number.parseFloat(value);
|
|
if (Number.isNaN(Number(value)))
|
|
return Number(value);
|
|
return value;
|
|
};
|
|
return transforms.reduce((acc, transform2) => {
|
|
if (!transform2)
|
|
return acc;
|
|
const [name, transformValue] = transform2.split("(");
|
|
const valueArray = transformValue.split(",");
|
|
const values = valueArray.map((val) => {
|
|
return parseValues(val.endsWith(")") ? val.replace(")", "") : val.trim());
|
|
});
|
|
const value = values.length === 1 ? values[0] : values;
|
|
return {
|
|
...acc,
|
|
[name]: value
|
|
};
|
|
}, {});
|
|
}
|
|
function stateFromTransform(state, transform) {
|
|
Object.entries(parseTransform(transform)).forEach(([key, value]) => {
|
|
const axes = ["x", "y", "z"];
|
|
if (key === "translate3d") {
|
|
if (value === 0) {
|
|
axes.forEach((axis) => state[axis] = 0);
|
|
return;
|
|
}
|
|
value.forEach((axisValue, index) => state[axes[index]] = axisValue);
|
|
return;
|
|
}
|
|
value = Number.parseFloat(`${value}`);
|
|
if (key === "translateX") {
|
|
state.x = value;
|
|
return;
|
|
}
|
|
if (key === "translateY") {
|
|
state.y = value;
|
|
return;
|
|
}
|
|
if (key === "translateZ") {
|
|
state.z = value;
|
|
return;
|
|
}
|
|
state[key] = value;
|
|
});
|
|
}
|
|
function useElementTransform(target, onInit) {
|
|
let _cache;
|
|
let _target;
|
|
const { state, transform } = reactiveTransform();
|
|
usePermissiveTarget(target, (el) => {
|
|
_target = el;
|
|
if (el.style.transform)
|
|
stateFromTransform(state, el.style.transform);
|
|
if (_cache)
|
|
el.style.transform = _cache;
|
|
if (onInit)
|
|
onInit(state);
|
|
});
|
|
watch(
|
|
transform,
|
|
(newValue) => {
|
|
if (!_target) {
|
|
_cache = newValue;
|
|
return;
|
|
}
|
|
_target.style.transform = newValue;
|
|
},
|
|
{
|
|
immediate: true
|
|
}
|
|
);
|
|
return {
|
|
transform: state
|
|
};
|
|
}
|
|
function objectEntries(obj) {
|
|
return Object.entries(obj);
|
|
}
|
|
function useMotionProperties(target, defaultValues) {
|
|
const motionProperties = reactive({});
|
|
const apply = (values) => Object.entries(values).forEach(([key, value]) => motionProperties[key] = value);
|
|
const { style } = useElementStyle(target, apply);
|
|
const { transform } = useElementTransform(target, apply);
|
|
watch(
|
|
motionProperties,
|
|
(newVal) => {
|
|
objectEntries(newVal).forEach(([key, value]) => {
|
|
const target2 = isTransformProp(key) ? transform : style;
|
|
if (target2[key] && target2[key] === value)
|
|
return;
|
|
target2[key] = value;
|
|
});
|
|
},
|
|
{
|
|
immediate: true,
|
|
deep: true
|
|
}
|
|
);
|
|
usePermissiveTarget(target, () => defaultValues && apply(defaultValues));
|
|
return {
|
|
motionProperties,
|
|
style,
|
|
transform
|
|
};
|
|
}
|
|
function useMotionVariants(variants = {}) {
|
|
const _variants = unref(variants);
|
|
const variant = ref();
|
|
const state = computed(() => {
|
|
if (!variant.value)
|
|
return;
|
|
return _variants[variant.value];
|
|
});
|
|
return {
|
|
state,
|
|
variant
|
|
};
|
|
}
|
|
function useMotion(target, variants = {}, options) {
|
|
const { motionProperties } = useMotionProperties(target);
|
|
const { variant, state } = useMotionVariants(variants);
|
|
const controls = useMotionControls(motionProperties, variants);
|
|
const instance = {
|
|
target,
|
|
variant,
|
|
variants,
|
|
state,
|
|
motionProperties,
|
|
...controls
|
|
};
|
|
useMotionFeatures(instance, options);
|
|
return instance;
|
|
}
|
|
var transitionKeys = ["delay", "duration"];
|
|
var directivePropsKeys = ["initial", "enter", "leave", "visible", "visible-once", "visibleOnce", "hovered", "tapped", "focused", ...transitionKeys];
|
|
function isTransitionKey(val) {
|
|
return transitionKeys.includes(val);
|
|
}
|
|
function resolveVariants(node, variantsRef) {
|
|
const target = node.props ? node.props : node.data && node.data.attrs ? node.data.attrs : {};
|
|
if (target) {
|
|
if (target.variants && isObject(target.variants)) {
|
|
variantsRef.value = {
|
|
...variantsRef.value,
|
|
...target.variants
|
|
};
|
|
}
|
|
for (let key of directivePropsKeys) {
|
|
if (!target || !target[key])
|
|
continue;
|
|
if (isTransitionKey(key) && typeof target[key] === "number") {
|
|
for (const variantKey of ["enter", "visible", "visibleOnce"]) {
|
|
const variantConfig = variantsRef.value[variantKey];
|
|
if (variantConfig == null)
|
|
continue;
|
|
variantConfig.transition ??= {};
|
|
variantConfig.transition[key] = target[key];
|
|
}
|
|
continue;
|
|
}
|
|
if (isObject(target[key])) {
|
|
const prop = target[key];
|
|
if (key === "visible-once")
|
|
key = "visibleOnce";
|
|
variantsRef.value[key] = prop;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
function directive(variants, isPreset = false) {
|
|
const register = (el, binding, node) => {
|
|
const key = binding.value && typeof binding.value === "string" ? binding.value : node.key;
|
|
if (key && motionState[key])
|
|
motionState[key].stop();
|
|
const variantsObject = isPreset ? structuredClone(toRaw(variants) || {}) : variants || {};
|
|
const variantsRef = ref(variantsObject);
|
|
if (typeof binding.value === "object")
|
|
variantsRef.value = binding.value;
|
|
resolveVariants(node, variantsRef);
|
|
const motionOptions = { eventListeners: true, lifeCycleHooks: true, syncVariants: true, visibilityHooks: false };
|
|
const motionInstance = useMotion(
|
|
el,
|
|
variantsRef,
|
|
motionOptions
|
|
);
|
|
el.motionInstance = motionInstance;
|
|
if (key)
|
|
motionState[key] = motionInstance;
|
|
};
|
|
const mounted = (el, _binding, _node) => {
|
|
el.motionInstance && registerVisibilityHooks(el.motionInstance);
|
|
};
|
|
return {
|
|
created: register,
|
|
mounted,
|
|
getSSRProps(binding, node) {
|
|
let { initial: bindingInitial } = binding.value || node && node?.props || {};
|
|
bindingInitial = unref(bindingInitial);
|
|
const initial = defu({}, variants?.initial || {}, bindingInitial || {});
|
|
if (!initial || Object.keys(initial).length === 0)
|
|
return;
|
|
const style = variantToStyle(initial);
|
|
return {
|
|
style
|
|
};
|
|
}
|
|
};
|
|
}
|
|
var fade = {
|
|
initial: {
|
|
opacity: 0
|
|
},
|
|
enter: {
|
|
opacity: 1
|
|
}
|
|
};
|
|
var fadeVisible = {
|
|
initial: {
|
|
opacity: 0
|
|
},
|
|
visible: {
|
|
opacity: 1
|
|
}
|
|
};
|
|
var fadeVisibleOnce = {
|
|
initial: {
|
|
opacity: 0
|
|
},
|
|
visibleOnce: {
|
|
opacity: 1
|
|
}
|
|
};
|
|
var pop = {
|
|
initial: {
|
|
scale: 0,
|
|
opacity: 0
|
|
},
|
|
enter: {
|
|
scale: 1,
|
|
opacity: 1
|
|
}
|
|
};
|
|
var popVisible = {
|
|
initial: {
|
|
scale: 0,
|
|
opacity: 0
|
|
},
|
|
visible: {
|
|
scale: 1,
|
|
opacity: 1
|
|
}
|
|
};
|
|
var popVisibleOnce = {
|
|
initial: {
|
|
scale: 0,
|
|
opacity: 0
|
|
},
|
|
visibleOnce: {
|
|
scale: 1,
|
|
opacity: 1
|
|
}
|
|
};
|
|
var rollLeft = {
|
|
initial: {
|
|
x: -100,
|
|
rotate: 90,
|
|
opacity: 0
|
|
},
|
|
enter: {
|
|
x: 0,
|
|
rotate: 0,
|
|
opacity: 1
|
|
}
|
|
};
|
|
var rollVisibleLeft = {
|
|
initial: {
|
|
x: -100,
|
|
rotate: 90,
|
|
opacity: 0
|
|
},
|
|
visible: {
|
|
x: 0,
|
|
rotate: 0,
|
|
opacity: 1
|
|
}
|
|
};
|
|
var rollVisibleOnceLeft = {
|
|
initial: {
|
|
x: -100,
|
|
rotate: 90,
|
|
opacity: 0
|
|
},
|
|
visibleOnce: {
|
|
x: 0,
|
|
rotate: 0,
|
|
opacity: 1
|
|
}
|
|
};
|
|
var rollRight = {
|
|
initial: {
|
|
x: 100,
|
|
rotate: -90,
|
|
opacity: 0
|
|
},
|
|
enter: {
|
|
x: 0,
|
|
rotate: 0,
|
|
opacity: 1
|
|
}
|
|
};
|
|
var rollVisibleRight = {
|
|
initial: {
|
|
x: 100,
|
|
rotate: -90,
|
|
opacity: 0
|
|
},
|
|
visible: {
|
|
x: 0,
|
|
rotate: 0,
|
|
opacity: 1
|
|
}
|
|
};
|
|
var rollVisibleOnceRight = {
|
|
initial: {
|
|
x: 100,
|
|
rotate: -90,
|
|
opacity: 0
|
|
},
|
|
visibleOnce: {
|
|
x: 0,
|
|
rotate: 0,
|
|
opacity: 1
|
|
}
|
|
};
|
|
var rollTop = {
|
|
initial: {
|
|
y: -100,
|
|
rotate: -90,
|
|
opacity: 0
|
|
},
|
|
enter: {
|
|
y: 0,
|
|
rotate: 0,
|
|
opacity: 1
|
|
}
|
|
};
|
|
var rollVisibleTop = {
|
|
initial: {
|
|
y: -100,
|
|
rotate: -90,
|
|
opacity: 0
|
|
},
|
|
visible: {
|
|
y: 0,
|
|
rotate: 0,
|
|
opacity: 1
|
|
}
|
|
};
|
|
var rollVisibleOnceTop = {
|
|
initial: {
|
|
y: -100,
|
|
rotate: -90,
|
|
opacity: 0
|
|
},
|
|
visibleOnce: {
|
|
y: 0,
|
|
rotate: 0,
|
|
opacity: 1
|
|
}
|
|
};
|
|
var rollBottom = {
|
|
initial: {
|
|
y: 100,
|
|
rotate: 90,
|
|
opacity: 0
|
|
},
|
|
enter: {
|
|
y: 0,
|
|
rotate: 0,
|
|
opacity: 1
|
|
}
|
|
};
|
|
var rollVisibleBottom = {
|
|
initial: {
|
|
y: 100,
|
|
rotate: 90,
|
|
opacity: 0
|
|
},
|
|
visible: {
|
|
y: 0,
|
|
rotate: 0,
|
|
opacity: 1
|
|
}
|
|
};
|
|
var rollVisibleOnceBottom = {
|
|
initial: {
|
|
y: 100,
|
|
rotate: 90,
|
|
opacity: 0
|
|
},
|
|
visibleOnce: {
|
|
y: 0,
|
|
rotate: 0,
|
|
opacity: 1
|
|
}
|
|
};
|
|
var slideLeft = {
|
|
initial: {
|
|
x: -100,
|
|
opacity: 0
|
|
},
|
|
enter: {
|
|
x: 0,
|
|
opacity: 1
|
|
}
|
|
};
|
|
var slideVisibleLeft = {
|
|
initial: {
|
|
x: -100,
|
|
opacity: 0
|
|
},
|
|
visible: {
|
|
x: 0,
|
|
opacity: 1
|
|
}
|
|
};
|
|
var slideVisibleOnceLeft = {
|
|
initial: {
|
|
x: -100,
|
|
opacity: 0
|
|
},
|
|
visibleOnce: {
|
|
x: 0,
|
|
opacity: 1
|
|
}
|
|
};
|
|
var slideRight = {
|
|
initial: {
|
|
x: 100,
|
|
opacity: 0
|
|
},
|
|
enter: {
|
|
x: 0,
|
|
opacity: 1
|
|
}
|
|
};
|
|
var slideVisibleRight = {
|
|
initial: {
|
|
x: 100,
|
|
opacity: 0
|
|
},
|
|
visible: {
|
|
x: 0,
|
|
opacity: 1
|
|
}
|
|
};
|
|
var slideVisibleOnceRight = {
|
|
initial: {
|
|
x: 100,
|
|
opacity: 0
|
|
},
|
|
visibleOnce: {
|
|
x: 0,
|
|
opacity: 1
|
|
}
|
|
};
|
|
var slideTop = {
|
|
initial: {
|
|
y: -100,
|
|
opacity: 0
|
|
},
|
|
enter: {
|
|
y: 0,
|
|
opacity: 1
|
|
}
|
|
};
|
|
var slideVisibleTop = {
|
|
initial: {
|
|
y: -100,
|
|
opacity: 0
|
|
},
|
|
visible: {
|
|
y: 0,
|
|
opacity: 1
|
|
}
|
|
};
|
|
var slideVisibleOnceTop = {
|
|
initial: {
|
|
y: -100,
|
|
opacity: 0
|
|
},
|
|
visibleOnce: {
|
|
y: 0,
|
|
opacity: 1
|
|
}
|
|
};
|
|
var slideBottom = {
|
|
initial: {
|
|
y: 100,
|
|
opacity: 0
|
|
},
|
|
enter: {
|
|
y: 0,
|
|
opacity: 1
|
|
}
|
|
};
|
|
var slideVisibleBottom = {
|
|
initial: {
|
|
y: 100,
|
|
opacity: 0
|
|
},
|
|
visible: {
|
|
y: 0,
|
|
opacity: 1
|
|
}
|
|
};
|
|
var slideVisibleOnceBottom = {
|
|
initial: {
|
|
y: 100,
|
|
opacity: 0
|
|
},
|
|
visibleOnce: {
|
|
y: 0,
|
|
opacity: 1
|
|
}
|
|
};
|
|
var presets = {
|
|
__proto__: null,
|
|
fade,
|
|
fadeVisible,
|
|
fadeVisibleOnce,
|
|
pop,
|
|
popVisible,
|
|
popVisibleOnce,
|
|
rollBottom,
|
|
rollLeft,
|
|
rollRight,
|
|
rollTop,
|
|
rollVisibleBottom,
|
|
rollVisibleLeft,
|
|
rollVisibleOnceBottom,
|
|
rollVisibleOnceLeft,
|
|
rollVisibleOnceRight,
|
|
rollVisibleOnceTop,
|
|
rollVisibleRight,
|
|
rollVisibleTop,
|
|
slideBottom,
|
|
slideLeft,
|
|
slideRight,
|
|
slideTop,
|
|
slideVisibleBottom,
|
|
slideVisibleLeft,
|
|
slideVisibleOnceBottom,
|
|
slideVisibleOnceLeft,
|
|
slideVisibleOnceRight,
|
|
slideVisibleOnceTop,
|
|
slideVisibleRight,
|
|
slideVisibleTop
|
|
};
|
|
function slugify(str) {
|
|
const a2 = "àáâäæãåāăąçćčđďèéêëēėęěğǵḧîïíīįìłḿñńǹňôöòóœøōõőṕŕřßśšşșťțûüùúūǘůűųẃẍÿýžźż·/_,:;";
|
|
const b2 = "aaaaaaaaaacccddeeeeeeeegghiiiiiilmnnnnoooooooooprrsssssttuuuuuuuuuwxyyzzz------";
|
|
const p = new RegExp(a2.split("").join("|"), "g");
|
|
return str.toString().replace(/[A-Z]/g, (s) => `-${s}`).toLowerCase().replace(/\s+/g, "-").replace(p, (c2) => b2.charAt(a2.indexOf(c2))).replace(/&/g, "-and-").replace(/[^\w\-]+/g, "").replace(/-{2,}/g, "-").replace(/^-+/, "").replace(/-+$/, "");
|
|
}
|
|
var CUSTOM_PRESETS = Symbol(
|
|
import.meta.env?.MODE === "development" ? "motionCustomPresets" : ""
|
|
);
|
|
var MotionComponentProps = {
|
|
// Preset to be loaded
|
|
preset: {
|
|
type: String,
|
|
required: false
|
|
},
|
|
// Instance
|
|
instance: {
|
|
type: Object,
|
|
required: false
|
|
},
|
|
// Variants
|
|
variants: {
|
|
type: Object,
|
|
required: false
|
|
},
|
|
// Initial variant
|
|
initial: {
|
|
type: Object,
|
|
required: false
|
|
},
|
|
// Lifecycle hooks variants
|
|
enter: {
|
|
type: Object,
|
|
required: false
|
|
},
|
|
leave: {
|
|
type: Object,
|
|
required: false
|
|
},
|
|
// Intersection observer variants
|
|
visible: {
|
|
type: Object,
|
|
required: false
|
|
},
|
|
visibleOnce: {
|
|
type: Object,
|
|
required: false
|
|
},
|
|
// Event listeners variants
|
|
hovered: {
|
|
type: Object,
|
|
required: false
|
|
},
|
|
tapped: {
|
|
type: Object,
|
|
required: false
|
|
},
|
|
focused: {
|
|
type: Object,
|
|
required: false
|
|
},
|
|
// Helpers
|
|
delay: {
|
|
type: [Number, String],
|
|
required: false
|
|
},
|
|
duration: {
|
|
type: [Number, String],
|
|
required: false
|
|
}
|
|
};
|
|
function isObject2(val) {
|
|
return Object.prototype.toString.call(val) === "[object Object]";
|
|
}
|
|
function clone(v) {
|
|
if (Array.isArray(v)) {
|
|
return v.map(clone);
|
|
}
|
|
if (isObject2(v)) {
|
|
const res = {};
|
|
for (const key in v) {
|
|
res[key] = clone(v[key]);
|
|
}
|
|
return res;
|
|
}
|
|
return v;
|
|
}
|
|
function setupMotionComponent(props) {
|
|
const instances = reactive({});
|
|
const customPresets = inject(CUSTOM_PRESETS, {});
|
|
const preset = computed(() => {
|
|
if (props.preset == null) {
|
|
return {};
|
|
}
|
|
if (customPresets != null && props.preset in customPresets) {
|
|
return structuredClone(toRaw(customPresets)[props.preset]);
|
|
}
|
|
if (props.preset in presets) {
|
|
return structuredClone(presets[props.preset]);
|
|
}
|
|
return {};
|
|
});
|
|
const propsConfig = computed(() => ({
|
|
initial: props.initial,
|
|
enter: props.enter,
|
|
leave: props.leave,
|
|
visible: props.visible,
|
|
visibleOnce: props.visibleOnce,
|
|
hovered: props.hovered,
|
|
tapped: props.tapped,
|
|
focused: props.focused
|
|
}));
|
|
function applyTransitionHelpers(config, values) {
|
|
for (const transitionKey of ["delay", "duration"]) {
|
|
if (values[transitionKey] == null)
|
|
continue;
|
|
const transitionValueParsed = Number.parseInt(
|
|
values[transitionKey]
|
|
);
|
|
for (const variantKey of ["enter", "visible", "visibleOnce"]) {
|
|
const variantConfig = config[variantKey];
|
|
if (variantConfig == null)
|
|
continue;
|
|
variantConfig.transition ??= {};
|
|
variantConfig.transition[transitionKey] = transitionValueParsed;
|
|
}
|
|
}
|
|
return config;
|
|
}
|
|
const motionConfig = computed(() => {
|
|
const config = defu(
|
|
{},
|
|
propsConfig.value,
|
|
preset.value,
|
|
props.variants || {}
|
|
);
|
|
return applyTransitionHelpers({ ...config }, props);
|
|
});
|
|
if (import.meta.env?.MODE === "development") {
|
|
if (props.preset != null && presets?.[props.preset] == null && customPresets?.[props.preset] == null) {
|
|
console.warn(`[@vueuse/motion]: Preset \`${props.preset}\` not found.`);
|
|
}
|
|
const replayAnimation = (instance) => {
|
|
if (instance.variants?.initial) {
|
|
instance.set("initial");
|
|
}
|
|
nextTick(() => {
|
|
if (instance.variants?.enter)
|
|
instance.apply("enter");
|
|
if (instance.variants?.visible)
|
|
instance.apply("visible");
|
|
if (instance.variants?.visibleOnce)
|
|
instance.apply("visibleOnce");
|
|
});
|
|
};
|
|
onUpdated(() => {
|
|
for (const key in instances) {
|
|
replayAnimation(instances[key]);
|
|
}
|
|
});
|
|
}
|
|
function setNodeInstance(node, index, style) {
|
|
node.props ??= {};
|
|
node.props.style ??= {};
|
|
node.props.style = { ...node.props.style, ...style };
|
|
const elementMotionConfig = applyTransitionHelpers(
|
|
clone(motionConfig.value),
|
|
node.props
|
|
);
|
|
node.props.onVnodeMounted = ({ el }) => {
|
|
instances[index] = useMotion(
|
|
el,
|
|
elementMotionConfig
|
|
);
|
|
};
|
|
node.props.onVnodeUpdated = ({ el }) => {
|
|
const styles = variantToStyle(instances[index].state);
|
|
for (const [key, val] of Object.entries(styles)) {
|
|
el.style[key] = val;
|
|
}
|
|
};
|
|
return node;
|
|
}
|
|
return {
|
|
motionConfig,
|
|
setNodeInstance
|
|
};
|
|
}
|
|
var MotionComponent = defineComponent({
|
|
name: "Motion",
|
|
props: {
|
|
...MotionComponentProps,
|
|
is: {
|
|
type: [String, Object],
|
|
default: "div"
|
|
}
|
|
},
|
|
setup(props) {
|
|
const slots = useSlots();
|
|
const { motionConfig, setNodeInstance } = setupMotionComponent(props);
|
|
return () => {
|
|
const style = variantToStyle(motionConfig.value.initial || {});
|
|
const node = h(props.is, void 0, slots);
|
|
setNodeInstance(node, 0, style);
|
|
return node;
|
|
};
|
|
}
|
|
});
|
|
var MotionGroupComponent = defineComponent({
|
|
name: "MotionGroup",
|
|
props: {
|
|
...MotionComponentProps,
|
|
is: {
|
|
type: [String, Object],
|
|
required: false
|
|
}
|
|
},
|
|
setup(props) {
|
|
const slots = useSlots();
|
|
const { motionConfig, setNodeInstance } = setupMotionComponent(props);
|
|
return () => {
|
|
const style = variantToStyle(motionConfig.value.initial || {});
|
|
const nodes = slots.default?.() || [];
|
|
for (let i = 0; i < nodes.length; i++) {
|
|
const n = nodes[i];
|
|
if (n.type === Fragment && Array.isArray(n.children)) {
|
|
n.children.forEach(function setChildInstance(child, index) {
|
|
if (child == null)
|
|
return;
|
|
if (Array.isArray(child)) {
|
|
setChildInstance(child, index);
|
|
return;
|
|
}
|
|
if (typeof child === "object") {
|
|
setNodeInstance(child, index, style);
|
|
}
|
|
});
|
|
} else {
|
|
setNodeInstance(n, i, style);
|
|
}
|
|
}
|
|
if (props.is) {
|
|
return h(props.is, void 0, nodes);
|
|
}
|
|
return nodes;
|
|
};
|
|
}
|
|
});
|
|
var MotionPlugin = {
|
|
install(app, options) {
|
|
app.directive("motion", directive());
|
|
if (!options || options && !options.excludePresets) {
|
|
for (const key in presets) {
|
|
const preset = presets[key];
|
|
app.directive(`motion-${slugify(key)}`, directive(preset, true));
|
|
}
|
|
}
|
|
if (options && options.directives) {
|
|
for (const key in options.directives) {
|
|
const variants = options.directives[key];
|
|
if (!variants.initial && import.meta.env?.MODE === "development") {
|
|
console.warn(
|
|
`Your directive v-motion-${key} is missing initial variant!`
|
|
);
|
|
}
|
|
app.directive(`motion-${key}`, directive(variants, true));
|
|
}
|
|
}
|
|
app.provide(CUSTOM_PRESETS, options?.directives);
|
|
app.component("Motion", MotionComponent);
|
|
app.component("MotionGroup", MotionGroupComponent);
|
|
}
|
|
};
|
|
function isMotionInstance(obj) {
|
|
const _obj = obj;
|
|
return _obj.apply !== void 0 && typeof _obj.apply === "function" && _obj.set !== void 0 && typeof _obj.set === "function" && _obj.target !== void 0 && isRef(_obj.target);
|
|
}
|
|
function useMotions() {
|
|
return motionState;
|
|
}
|
|
function useSpring(values, spring2) {
|
|
const { stop, get } = useMotionValues();
|
|
return {
|
|
values,
|
|
stop,
|
|
set: (properties) => Promise.all(
|
|
Object.entries(properties).map(([key, value]) => {
|
|
const motionValue = get(key, values[key], values);
|
|
return motionValue.start((onComplete) => {
|
|
const options = {
|
|
type: "spring",
|
|
...spring2 || getDefaultTransition(key, value)
|
|
};
|
|
return animate({
|
|
from: motionValue.get(),
|
|
to: value,
|
|
velocity: motionValue.getVelocity(),
|
|
onUpdate: (v) => motionValue.set(v),
|
|
onComplete,
|
|
...options
|
|
});
|
|
});
|
|
})
|
|
)
|
|
};
|
|
}
|
|
function useReducedMotion(options = {}) {
|
|
const reducedMotion = useMediaQuery("(prefers-reduced-motion: reduce)", options);
|
|
return computed(() => reducedMotion.value);
|
|
}
|
|
export {
|
|
MotionComponent,
|
|
directive as MotionDirective,
|
|
MotionGroupComponent,
|
|
MotionPlugin,
|
|
fade,
|
|
fadeVisible,
|
|
fadeVisibleOnce,
|
|
isMotionInstance,
|
|
pop,
|
|
popVisible,
|
|
popVisibleOnce,
|
|
reactiveStyle,
|
|
reactiveTransform,
|
|
rollBottom,
|
|
rollLeft,
|
|
rollRight,
|
|
rollTop,
|
|
rollVisibleBottom,
|
|
rollVisibleLeft,
|
|
rollVisibleOnceBottom,
|
|
rollVisibleOnceLeft,
|
|
rollVisibleOnceRight,
|
|
rollVisibleOnceTop,
|
|
rollVisibleRight,
|
|
rollVisibleTop,
|
|
slideBottom,
|
|
slideLeft,
|
|
slideRight,
|
|
slideTop,
|
|
slideVisibleBottom,
|
|
slideVisibleLeft,
|
|
slideVisibleOnceBottom,
|
|
slideVisibleOnceLeft,
|
|
slideVisibleOnceRight,
|
|
slideVisibleOnceTop,
|
|
slideVisibleRight,
|
|
slideVisibleTop,
|
|
slugify,
|
|
useElementStyle,
|
|
useElementTransform,
|
|
useMotion,
|
|
useMotionControls,
|
|
useMotionFeatures,
|
|
useMotionProperties,
|
|
useMotionTransitions,
|
|
useMotionVariants,
|
|
useMotions,
|
|
useReducedMotion,
|
|
useSpring
|
|
};
|
|
//# sourceMappingURL=@vueuse_motion.js.map
|