routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+356
@@ -0,0 +1,356 @@
|
||||
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
|
||||
Reference in New Issue
Block a user