356 lines
12 KiB
JavaScript
356 lines
12 KiB
JavaScript
import { Dt as mergeProps, et as createVNode, n as Transition, pt as h, r as TransitionGroup } from "./vue.runtime.esm-bundler-BvoXUmaf.js";
|
|
import { $ as PREFERS_REDUCED_MOTION, l as propsFactory, n as genericComponent } from "./defineComponent-DB6xIcDy.js";
|
|
import { i as getTargetBox, t as Box } from "./box-BNWMOtF7.js";
|
|
import { i as standardEasing, n as deceleratedEasing, t as acceleratedEasing } from "./easing-DfcvkbkS.js";
|
|
//#region node_modules/vuetify/lib/util/animation.js
|
|
/** @see https://stackoverflow.com/a/57876601/2074736 */
|
|
function nullifyTransforms(el) {
|
|
const rect = new Box(el);
|
|
const style = getComputedStyle(el);
|
|
const tx = style.transform;
|
|
if (tx) {
|
|
let ta, sx, sy, dx, dy;
|
|
if (tx.startsWith("matrix3d(")) {
|
|
ta = tx.slice(9, -1).split(/, /);
|
|
sx = Number(ta[0]);
|
|
sy = Number(ta[5]);
|
|
dx = Number(ta[12]);
|
|
dy = Number(ta[13]);
|
|
} else if (tx.startsWith("matrix(")) {
|
|
ta = tx.slice(7, -1).split(/, /);
|
|
sx = Number(ta[0]);
|
|
sy = Number(ta[3]);
|
|
dx = Number(ta[4]);
|
|
dy = Number(ta[5]);
|
|
} else return new Box(rect);
|
|
const to = style.transformOrigin;
|
|
return new Box({
|
|
x: rect.x - dx - (1 - sx) * parseFloat(to),
|
|
y: rect.y - dy - (1 - sy) * parseFloat(to.slice(to.indexOf(" ") + 1)),
|
|
width: sx ? rect.width / sx : el.offsetWidth + 1,
|
|
height: sy ? rect.height / sy : el.offsetHeight + 1
|
|
});
|
|
} else return new Box(rect);
|
|
}
|
|
function animate(el, keyframes, options) {
|
|
if (typeof el.animate === "undefined") return { finished: Promise.resolve() };
|
|
let animation;
|
|
try {
|
|
animation = el.animate(keyframes, options);
|
|
} catch (err) {
|
|
return { finished: Promise.resolve() };
|
|
}
|
|
if (typeof animation.finished === "undefined") animation.finished = new Promise((resolve) => {
|
|
animation.onfinish = () => {
|
|
resolve(animation);
|
|
};
|
|
});
|
|
return animation;
|
|
}
|
|
//#endregion
|
|
//#region node_modules/vuetify/lib/components/transitions/createTransition.js
|
|
var makeTransitionProps = propsFactory({
|
|
disabled: Boolean,
|
|
group: Boolean,
|
|
hideOnLeave: Boolean,
|
|
leaveAbsolute: Boolean,
|
|
mode: String,
|
|
origin: String
|
|
}, "transition");
|
|
function createCssTransition(name, origin, mode) {
|
|
return genericComponent()({
|
|
name,
|
|
props: makeTransitionProps({
|
|
mode,
|
|
origin
|
|
}),
|
|
setup(props, { slots }) {
|
|
const functions = {
|
|
onBeforeEnter(el) {
|
|
if (props.origin) el.style.transformOrigin = props.origin;
|
|
},
|
|
onLeave(el) {
|
|
if (props.leaveAbsolute) {
|
|
const { offsetTop, offsetLeft, offsetWidth, offsetHeight } = el;
|
|
el._transitionInitialStyles = {
|
|
position: el.style.position,
|
|
top: el.style.top,
|
|
left: el.style.left,
|
|
width: el.style.width,
|
|
height: el.style.height
|
|
};
|
|
el.style.position = "absolute";
|
|
el.style.top = `${offsetTop}px`;
|
|
el.style.left = `${offsetLeft}px`;
|
|
el.style.width = `${offsetWidth}px`;
|
|
el.style.height = `${offsetHeight}px`;
|
|
}
|
|
if (props.hideOnLeave) el.style.setProperty("display", "none", "important");
|
|
},
|
|
onAfterLeave(el) {
|
|
if (props.leaveAbsolute && el?._transitionInitialStyles) {
|
|
const { position, top, left, width, height } = el._transitionInitialStyles;
|
|
delete el._transitionInitialStyles;
|
|
el.style.position = position || "";
|
|
el.style.top = top || "";
|
|
el.style.left = left || "";
|
|
el.style.width = width || "";
|
|
el.style.height = height || "";
|
|
}
|
|
}
|
|
};
|
|
return () => {
|
|
return h(props.group ? TransitionGroup : Transition, {
|
|
name: props.disabled ? "" : name,
|
|
css: !props.disabled,
|
|
...props.group ? void 0 : { mode: props.mode },
|
|
...props.disabled ? {} : functions
|
|
}, slots.default);
|
|
};
|
|
}
|
|
});
|
|
}
|
|
function createJavascriptTransition(name, functions, mode = "in-out") {
|
|
return genericComponent()({
|
|
name,
|
|
props: {
|
|
mode: {
|
|
type: String,
|
|
default: mode
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: PREFERS_REDUCED_MOTION()
|
|
},
|
|
group: Boolean,
|
|
hideOnLeave: Boolean
|
|
},
|
|
setup(props, { slots }) {
|
|
const tag = props.group ? TransitionGroup : Transition;
|
|
return () => {
|
|
return h(tag, {
|
|
name: props.disabled ? "" : name,
|
|
css: !props.disabled,
|
|
...props.disabled ? {} : {
|
|
...functions,
|
|
onLeave: (el) => {
|
|
if (props.hideOnLeave) el.style.setProperty("display", "none", "important");
|
|
else functions.onLeave?.(el);
|
|
}
|
|
}
|
|
}, slots.default);
|
|
};
|
|
}
|
|
});
|
|
}
|
|
//#endregion
|
|
//#region node_modules/vuetify/lib/components/transitions/expand-transition.js
|
|
function expand_transition_default(expandedParentClass = "", type = "y") {
|
|
return {
|
|
onBeforeEnter(el) {
|
|
el._parent = el.parentNode;
|
|
el._initialStyle = {
|
|
transition: el.style.transition,
|
|
overflow: el.style.overflow,
|
|
width: el.style.width,
|
|
height: el.style.height
|
|
};
|
|
},
|
|
onEnter(el) {
|
|
const initialStyle = el._initialStyle;
|
|
if (!initialStyle) return;
|
|
el.style.setProperty("transition", "none", "important");
|
|
el.style.overflow = "hidden";
|
|
const offsetWidth = `${el.offsetWidth}px`;
|
|
const offsetHeight = `${el.offsetHeight}px`;
|
|
if (["x", "both"].includes(type)) el.style.width = "0";
|
|
if (["y", "both"].includes(type)) el.style.height = "0";
|
|
el.offsetHeight;
|
|
el.style.transition = initialStyle.transition;
|
|
if (expandedParentClass && el._parent) el._parent.classList.add(expandedParentClass);
|
|
requestAnimationFrame(() => {
|
|
if (["x", "both"].includes(type)) el.style.width = offsetWidth;
|
|
if (["y", "both"].includes(type)) el.style.height = offsetHeight;
|
|
});
|
|
},
|
|
onAfterEnter: resetStyles,
|
|
onEnterCancelled: resetStyles,
|
|
onLeave(el) {
|
|
el._initialStyle = {
|
|
transition: "",
|
|
overflow: el.style.overflow,
|
|
width: el.style.width,
|
|
height: el.style.height
|
|
};
|
|
el.style.overflow = "hidden";
|
|
if (["x", "both"].includes(type)) el.style.width = `${el.offsetWidth}px`;
|
|
if (["y", "both"].includes(type)) el.style.height = `${el.offsetHeight}px`;
|
|
el.offsetHeight;
|
|
requestAnimationFrame(() => {
|
|
if (["x", "both"].includes(type)) el.style.width = "0";
|
|
if (["y", "both"].includes(type)) el.style.height = "0";
|
|
});
|
|
},
|
|
onAfterLeave,
|
|
onLeaveCancelled: onAfterLeave
|
|
};
|
|
function onAfterLeave(el) {
|
|
if (expandedParentClass && el._parent) el._parent.classList.remove(expandedParentClass);
|
|
resetStyles(el);
|
|
}
|
|
function resetStyles(el) {
|
|
if (!el._initialStyle) return;
|
|
const { width: w, height: h } = el._initialStyle;
|
|
el.style.overflow = el._initialStyle.overflow;
|
|
if (w != null && ["x", "both"].includes(type)) el.style.width = w;
|
|
if (h != null && ["y", "both"].includes(type)) el.style.height = h;
|
|
delete el._initialStyle;
|
|
}
|
|
}
|
|
//#endregion
|
|
//#region node_modules/vuetify/lib/components/transitions/dialog-transition.js
|
|
var makeVDialogTransitionProps = propsFactory({ target: [Object, Array] }, "v-dialog-transition");
|
|
var saved = /* @__PURE__ */ new WeakMap();
|
|
var VDialogTransition = genericComponent()({
|
|
name: "VDialogTransition",
|
|
props: makeVDialogTransitionProps(),
|
|
setup(props, { slots }) {
|
|
const functions = {
|
|
onBeforeEnter(el) {
|
|
el.style.pointerEvents = "none";
|
|
el.style.visibility = "hidden";
|
|
},
|
|
async onEnter(el, done) {
|
|
await new Promise((resolve) => requestAnimationFrame(resolve));
|
|
await new Promise((resolve) => requestAnimationFrame(resolve));
|
|
el.style.visibility = "";
|
|
const dimensions = getDimensions(props.target, el);
|
|
const { x, y, sx, sy, speed } = dimensions;
|
|
saved.set(el, dimensions);
|
|
if (PREFERS_REDUCED_MOTION()) animate(el, [{ opacity: 0 }, {}], {
|
|
duration: 125 * speed,
|
|
easing: deceleratedEasing
|
|
}).finished.then(() => done());
|
|
else {
|
|
const animation = animate(el, [{
|
|
transform: `translate(${x}px, ${y}px) scale(${sx}, ${sy})`,
|
|
opacity: 0
|
|
}, {}], {
|
|
duration: 225 * speed,
|
|
easing: deceleratedEasing
|
|
});
|
|
getChildren(el)?.forEach((el) => {
|
|
animate(el, [
|
|
{ opacity: 0 },
|
|
{
|
|
opacity: 0,
|
|
offset: .33
|
|
},
|
|
{}
|
|
], {
|
|
duration: 450 * speed,
|
|
easing: standardEasing
|
|
});
|
|
});
|
|
animation.finished.then(() => done());
|
|
}
|
|
},
|
|
onAfterEnter(el) {
|
|
el.style.removeProperty("pointer-events");
|
|
},
|
|
onBeforeLeave(el) {
|
|
el.style.pointerEvents = "none";
|
|
},
|
|
async onLeave(el, done) {
|
|
await new Promise((resolve) => requestAnimationFrame(resolve));
|
|
let dimensions;
|
|
if (!saved.has(el) || Array.isArray(props.target) || props.target.offsetParent || props.target.getClientRects().length) dimensions = getDimensions(props.target, el);
|
|
else dimensions = saved.get(el);
|
|
const { x, y, sx, sy, speed } = dimensions;
|
|
if (PREFERS_REDUCED_MOTION()) animate(el, [{}, { opacity: 0 }], {
|
|
duration: 85 * speed,
|
|
easing: acceleratedEasing
|
|
}).finished.then(() => done());
|
|
else {
|
|
animate(el, [{}, {
|
|
transform: `translate(${x}px, ${y}px) scale(${sx}, ${sy})`,
|
|
opacity: 0
|
|
}], {
|
|
duration: 125 * speed,
|
|
easing: acceleratedEasing
|
|
}).finished.then(() => done());
|
|
getChildren(el)?.forEach((el) => {
|
|
animate(el, [
|
|
{},
|
|
{
|
|
opacity: 0,
|
|
offset: .2
|
|
},
|
|
{ opacity: 0 }
|
|
], {
|
|
duration: 250 * speed,
|
|
easing: standardEasing
|
|
});
|
|
});
|
|
}
|
|
},
|
|
onAfterLeave(el) {
|
|
el.style.removeProperty("pointer-events");
|
|
}
|
|
};
|
|
return () => {
|
|
return props.target ? createVNode(Transition, mergeProps({ "name": "dialog-transition" }, functions, { "css": false }), slots) : createVNode(Transition, { "name": "dialog-transition" }, slots);
|
|
};
|
|
}
|
|
});
|
|
/** Animatable children (card, sheet, list) */
|
|
function getChildren(el) {
|
|
const els = el.querySelector(":scope > .v-card, :scope > .v-sheet, :scope > .v-list")?.children;
|
|
return els && [...els];
|
|
}
|
|
function getDimensions(target, el) {
|
|
const targetBox = getTargetBox(target);
|
|
const elBox = nullifyTransforms(el);
|
|
const [originX, originY] = getComputedStyle(el).transformOrigin.split(" ").map((v) => parseFloat(v));
|
|
const [anchorSide, anchorOffset] = getComputedStyle(el).getPropertyValue("--v-overlay-anchor-origin").split(" ");
|
|
let offsetX = targetBox.left + targetBox.width / 2;
|
|
if (anchorSide === "left" || anchorOffset === "left") offsetX -= targetBox.width / 2;
|
|
else if (anchorSide === "right" || anchorOffset === "right") offsetX += targetBox.width / 2;
|
|
let offsetY = targetBox.top + targetBox.height / 2;
|
|
if (anchorSide === "top" || anchorOffset === "top") offsetY -= targetBox.height / 2;
|
|
else if (anchorSide === "bottom" || anchorOffset === "bottom") offsetY += targetBox.height / 2;
|
|
const tsx = targetBox.width / elBox.width;
|
|
const tsy = targetBox.height / elBox.height;
|
|
const maxs = Math.max(1, tsx, tsy);
|
|
const sx = tsx / maxs || 0;
|
|
const sy = tsy / maxs || 0;
|
|
const asa = elBox.width * elBox.height / (window.innerWidth * window.innerHeight);
|
|
const speed = asa > .12 ? Math.min(1.5, (asa - .12) * 10 + 1) : 1;
|
|
return {
|
|
x: offsetX - (originX + elBox.left),
|
|
y: offsetY - (originY + elBox.top),
|
|
sx,
|
|
sy,
|
|
speed
|
|
};
|
|
}
|
|
createCssTransition("fab-transition", "center center", "out-in");
|
|
createCssTransition("dialog-bottom-transition");
|
|
createCssTransition("dialog-top-transition");
|
|
var VFadeTransition = createCssTransition("fade-transition");
|
|
var VScaleTransition = createCssTransition("scale-transition");
|
|
createCssTransition("scroll-x-transition");
|
|
createCssTransition("scroll-x-reverse-transition");
|
|
createCssTransition("scroll-y-transition");
|
|
createCssTransition("scroll-y-reverse-transition");
|
|
createCssTransition("slide-x-transition");
|
|
createCssTransition("slide-x-reverse-transition");
|
|
var VSlideYTransition = createCssTransition("slide-y-transition");
|
|
createCssTransition("slide-y-reverse-transition");
|
|
var VExpandTransition = createJavascriptTransition("expand-transition", expand_transition_default());
|
|
var VExpandXTransition = createJavascriptTransition("expand-x-transition", expand_transition_default("", "x"));
|
|
createJavascriptTransition("expand-both-transition", expand_transition_default("", "both"));
|
|
//#endregion
|
|
export { VSlideYTransition as a, nullifyTransforms as c, VScaleTransition as i, VExpandXTransition as n, VDialogTransition as o, VFadeTransition as r, animate as s, VExpandTransition as t };
|
|
|
|
//# sourceMappingURL=transitions-DCQ3sjjZ.js.map
|