motion-v 0.10.0 → 0.11.0-beta.1

package/dist/cjs/index.js

@@ -8654,12 +8654,17 @@ function usePopLayout(props) {
   function addPopStyle(state2) {
     if (props.mode !== "popLayout")
       return;
+    const parent = state2.element.offsetParent;
+    const parentWidth = parent instanceof HTMLElement ? parent.offsetWidth || 0 : 0;
     const size = {
       height: state2.element.offsetHeight || 0,
       width: state2.element.offsetWidth || 0,
       top: state2.element.offsetTop,
-      left: state2.element.offsetLeft
+      left: state2.element.offsetLeft,
+      right: 0
     };
+    size.right = parentWidth - size.width - size.left;
+    const x = props.anchorX === "left" ? `left: ${size.left}` : `right: ${size.right}`;
     state2.element.dataset.motionPopId = state2.id;
     const style2 = document.createElement("style");
     if (config.value.nonce) {
@@ -8667,11 +8672,6 @@ function usePopLayout(props) {
     }
     styles.set(state2, style2);
     document.head.appendChild(style2);
-    style2.textContent = `
-      [data-motion-pop-id="${state2.id}"] {
-        animation: pop 0.3s ease-in-out;
-      }
-    `;
     if (style2.sheet) {
       style2.sheet.insertRule(`
     [data-motion-pop-id="${state2.id}"] {
@@ -8679,8 +8679,8 @@ function usePopLayout(props) {
       width: ${size.width}px !important;
       height: ${size.height}px !important;
       top: ${size.top}px !important;
-          left: ${size.left}px !important;
-        }
+      ${x}px !important;
+      }
       `);
     }
   }
@@ -8689,7 +8689,7 @@ function usePopLayout(props) {
     if (!style2)
       return;
     styles.delete(state2);
-    requestIdleCallback(() => {
+    frame.render(() => {
       document.head.removeChild(style2);
     });
   }
@@ -8712,7 +8712,8 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     as: {},
     custom: {},
     onExitComplete: {},
-    unwrapElement: { type: Boolean, default: false }
+    unwrapElement: { type: Boolean, default: false },
+    anchorX: { default: "left" }
   },
   setup(__props) {
     const props = __props;
@@ -8724,16 +8725,17 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     vue.onMounted(() => {
       presenceContext.initial = void 0;
     });
+    const { addPopStyle, removePopStyle, styles } = usePopLayout(props);
     function enter(el) {
       const state2 = mountedStates.get(el);
       if (!state2) {
         return;
       }
+      removePopStyle(state2);
       state2.isVShow = true;
       removeDoneCallback(el);
       state2.setActive("exit", false);
     }
-    const { addPopStyle, removePopStyle, styles } = usePopLayout(props);
     const exitDom = /* @__PURE__ */ new Map();
     vue.onUnmounted(() => {
       exitDom.clear();
@@ -8765,9 +8767,7 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
           if (!styles.has(state2)) {
             state2.willUpdate("done");
           } else {
-            frame.render(() => {
-              removePopStyle(state2);
-            });
+            removePopStyle(state2);
           }
           done();
           if (!(el == null ? void 0 : el.isConnected)) {
@@ -9405,7 +9405,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "LayoutGroup",
   props: {
     id: {},
-    inherit: { type: [Boolean, String] }
+    inherit: { type: [Boolean, String], default: true }
   },
   setup(__props) {
     const props = __props;
@@ -9611,6 +9611,7 @@ exports.Reorder = Reorder;
 exports.ReorderGroup = ReorderGroup;
 exports.ReorderItem = ReorderItem;
 exports.RowValue = _sfc_main$1;
+exports.addScaleCorrector = addScaleCorrector;
 exports.animate = animate;
 exports.animateMini = animateMini;
 exports.anticipate = anticipate;
@@ -9650,6 +9651,7 @@ exports.mirrorEasing = mirrorEasing;
 exports.mix = mix;
 exports.motion = motion;
 exports.motionValue = motionValue;
+exports.mountedStates = mountedStates;
 exports.noop = noop;
 exports.pipe = pipe;
 exports.progress = progress$1;

package/dist/es/components/LayoutGroup.d.ts

@@ -10,9 +10,20 @@ declare function __VLS_template(): {
     attrs: Partial<{}>;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToOption<LayoutGroupProps>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToOption<LayoutGroupProps>>>, {}, {}>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<LayoutGroupProps>, {
+    inherit: boolean;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<LayoutGroupProps>, {
+    inherit: boolean;
+}>>>, {
+    inherit: boolean | "id" | "group";
+}, {}>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToOption<T> = {
     [K in keyof T]-?: {} extends Pick<T, K> ? {
@@ -27,3 +38,6 @@ type __VLS_WithTemplateSlots<T, S> = T & {
         $slots: S;
     };
 };
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/es/components/LayoutGroup.vue.mjs

@@ -4,7 +4,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LayoutGroup",
   props: {
     id: {},
-    inherit: { type: [Boolean, String] }
+    inherit: { type: [Boolean, String], default: true }
   },
   setup(__props) {
     const props = __props;

package/dist/es/components/animate-presence/AnimatePresence.d.ts

@@ -12,16 +12,19 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<
     initial: boolean;
     multiple: boolean;
     unwrapElement: boolean;
+    anchorX: string;
 }>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<AnimatePresenceProps>, {
     mode: string;
     initial: boolean;
     multiple: boolean;
     unwrapElement: boolean;
+    anchorX: string;
 }>>>, {
     initial: boolean;
     mode: "wait" | "popLayout" | "sync";
     multiple: boolean;
     unwrapElement: boolean;
+    anchorX: "left" | "right";
 }, {}>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/es/components/animate-presence/AnimatePresence.vue.mjs

@@ -2,7 +2,6 @@ import { defineComponent, onMounted, onUnmounted, computed, openBlock, createBlo
 import { mountedStates } from "../../state/motion-state.mjs";
 import { provideAnimatePresence, removeDoneCallback, doneCallbacks } from "../presence.mjs";
 import { usePopLayout } from "./use-pop-layout.mjs";
-import { frame } from "../../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/frameloop/frame.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "AnimatePresence",
@@ -16,7 +15,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     as: {},
     custom: {},
     onExitComplete: {},
-    unwrapElement: { type: Boolean, default: false }
+    unwrapElement: { type: Boolean, default: false },
+    anchorX: { default: "left" }
   },
   setup(__props) {
     const props = __props;
@@ -28,16 +28,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     onMounted(() => {
       presenceContext.initial = void 0;
     });
+    const { addPopStyle, removePopStyle, styles } = usePopLayout(props);
     function enter(el) {
       const state = mountedStates.get(el);
       if (!state) {
         return;
       }
+      removePopStyle(state);
       state.isVShow = true;
       removeDoneCallback(el);
       state.setActive("exit", false);
     }
-    const { addPopStyle, removePopStyle, styles } = usePopLayout(props);
     const exitDom = /* @__PURE__ */ new Map();
     onUnmounted(() => {
       exitDom.clear();
@@ -69,9 +70,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           if (!styles.has(state)) {
             state.willUpdate("done");
           } else {
-            frame.render(() => {
-              removePopStyle(state);
-            });
+            removePopStyle(state);
           }
           done();
           if (!(el == null ? void 0 : el.isConnected)) {

package/dist/es/components/animate-presence/types.d.ts

@@ -6,4 +6,5 @@ export interface AnimatePresenceProps {
     custom?: any;
     onExitComplete?: VoidFunction;
     unwrapElement?: boolean;
+    anchorX?: 'left' | 'right';
 }

package/dist/es/components/animate-presence/use-pop-layout.mjs

@@ -1,16 +1,22 @@
 import { useMotionConfig } from "../motion-config/context.mjs";
+import { frame } from "../../external/.pnpm/framer-motion@11.16.6/external/framer-motion/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
+      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) {
@@ -18,11 +24,6 @@ function usePopLayout(props) {
     }
     styles.set(state, style);
     document.head.appendChild(style);
-    style.textContent = `
-      [data-motion-pop-id="${state.id}"] {
-        animation: pop 0.3s ease-in-out;
-      }
-    `;
     if (style.sheet) {
       style.sheet.insertRule(`
     [data-motion-pop-id="${state.id}"] {
@@ -30,8 +31,8 @@ function usePopLayout(props) {
       width: ${size.width}px !important;
       height: ${size.height}px !important;
       top: ${size.top}px !important;
-          left: ${size.left}px !important;
-        }
+      ${x}px !important;
+      }
       `);
     }
   }
@@ -40,7 +41,7 @@ function usePopLayout(props) {
     if (!style)
       return;
     styles.delete(state);
-    requestIdleCallback(() => {
+    frame.render(() => {
       document.head.removeChild(style);
     });
   }

package/dist/es/components/index.d.ts

@@ -3,3 +3,4 @@ export * from './animate-presence';
 export * from './motion-config';
 export * from './reorder';
 export { default as RowValue } from './RowValue';
+export { mountedStates } from '../state';

package/dist/es/index.d.ts

@@ -1,4 +1,5 @@
 export * from 'framer-motion/dom';
+export { addScaleCorrector } from '../node_modules/framer-motion/dist/es/projection/styles/scale-correction.mjs';
 export { motionValue as useMotionValue } from 'framer-motion/dom';
 export * from './components';
 export { default as LayoutGroup } from './components/LayoutGroup';

package/dist/es/index.mjs

@@ -1,3 +1,4 @@
+import { addScaleCorrector } from "./external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/projection/styles/scale-correction.mjs";
 import { default as default2 } from "./components/LayoutGroup.vue.mjs";
 import { useLayoutGroup } from "./components/use-layout-group.mjs";
 import { injectLayoutGroup, injectMotion, provideLayoutGroup, provideMotion } from "./components/context.mjs";
@@ -41,6 +42,7 @@ import { wrap } from "./external/.pnpm/framer-motion@11.16.6/external/framer-mot
 import { cancelSync, sync } from "./external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/frameloop/index-legacy.mjs";
 import { cancelFrame, frame, frameData, frameSteps } from "./external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/frameloop/frame.mjs";
 import { motion } from "./components/motion/NameSpace.mjs";
+import { mountedStates } from "./state/motion-state.mjs";
 import { provideMotionConfig, useMotionConfig } from "./components/motion-config/context.mjs";
 import { Reorder, ReorderGroup, ReorderItem } from "./components/reorder/index.mjs";
 import { useComputed } from "./value/use-computed.mjs";
@@ -70,6 +72,7 @@ export {
   ReorderGroup,
   ReorderItem,
   default4 as RowValue,
+  addScaleCorrector,
   animate,
   animateMini,
   anticipate,
@@ -110,6 +113,7 @@ export {
   mix,
   motion,
   motionValue,
+  mountedStates,
   noop,
   pipe,
   progress,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motion-v",
-  "version": "0.10.0",
+  "version": "0.11.0-beta.1",
   "description": "",
   "author": "",
   "license": "MIT",