motion-v
Version:
<p align="center"> <img width="100" height="100" alt="Motion logo" src="https://user-images.githubusercontent.com/7850794/164965523-3eced4c4-6020-467e-acde-f11b7900ad62.png" /> </p> <h1 align="center">Motion for Vue</h1>
57 lines (56 loc) • 1.71 kB
JavaScript
import { useMotionConfig } from "../motion-config/context.mjs";
import { frame } from "../../external/.pnpm/motion-dom@12.16.0/external/motion-dom/dist/es/frameloop/frame.mjs";
function usePopLayout(props) {
const styles = /* @__PURE__ */ new WeakMap();
const config = useMotionConfig();
function addPopStyle(state) {
if (props.mode !== "popLayout")
return;
const parent = state.element.offsetParent;
const parentWidth = parent instanceof HTMLElement ? parent.offsetWidth || 0 : 0;
const size = {
height: state.element.offsetHeight || 0,
width: state.element.offsetWidth || 0,
top: state.element.offsetTop,
left: state.element.offsetLeft,
right: 0
};
size.right = parentWidth - size.width - size.left;
const x = props.anchorX === "left" ? `left: ${size.left}` : `right: ${size.right}`;
state.element.dataset.motionPopId = state.id;
const style = document.createElement("style");
if (config.value.nonce) {
style.nonce = config.value.nonce;
}
styles.set(state, style);
document.head.appendChild(style);
if (style.sheet) {
style.sheet.insertRule(`
[data-motion-pop-id="${state.id}"] {
position: absolute !important;
width: ${size.width}px !important;
height: ${size.height}px !important;
top: ${size.top}px !important;
${x}px !important;
}
`);
}
}
function removePopStyle(state) {
const style = styles.get(state);
if (!style)
return;
styles.delete(state);
frame.render(() => {
document.head.removeChild(style);
});
}
return {
addPopStyle,
removePopStyle,
styles
};
}
export {
usePopLayout
};