motion-v 0.4.1 → 0.5.0-beta.2

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

@@ -1,7 +1,5 @@
-import { defineComponent, watch, renderSlot } from "vue";
-import { injectLayoutGroup, provideLayoutGroup, shouldInheritId, shouldInheritGroup } from "./context.mjs";
-import { nodeGroup } from "./group.mjs";
-import { useForceUpdate } from "./use-force-update.mjs";
+import { defineComponent, renderSlot } from "vue";
+import { useLayoutGroup } from "./use-layout-group.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LayoutGroup",
   props: {
@@ -10,25 +8,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const layoutGroup = injectLayoutGroup(null);
-    const [forceRender, key] = useForceUpdate();
-    function generateId() {
-      const upstreamId = layoutGroup == null ? void 0 : layoutGroup.id;
-      return shouldInheritId(props.inherit) && upstreamId ? props.id ? `${upstreamId}-${props.id}` : upstreamId : props.id;
-    }
-    function generateGroup() {
-      return shouldInheritGroup(props.inherit) ? (layoutGroup == null ? void 0 : layoutGroup.group) || nodeGroup() : nodeGroup();
-    }
-    const memoizedContext = {
-      id: generateId(),
-      group: generateGroup(),
-      forceRender,
-      key
-    };
-    watch(key, () => {
-      memoizedContext.id = generateId();
-    });
-    provideLayoutGroup(memoizedContext);
+    useLayoutGroup(props);
     return (_ctx, _cache) => {
       return renderSlot(_ctx.$slots, "default");
     };

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

@@ -3,8 +3,8 @@ import { injectMotion, injectLayoutGroup, provideMotion } from "./context.mjs";
 import { convertSvgStyleToAttributes, createStyles } from "../state/style.mjs";
 import { Primitive } from "./Primitive.mjs";
 import { MotionState } from "../state/motion-state.mjs";
-import { isSVGElement } from "../state/utils.mjs";
 import { injectAnimatePresence } from "./presence.mjs";
+import { getMotionElement } from "./utils.mjs";
 import { isMotionValue } from "../utils/motion-value.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
@@ -35,7 +35,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     onPressEnd: { type: Function },
     onViewEnter: { type: Function },
     onViewLeave: { type: Function },
-    layout: { type: Boolean },
+    layout: { type: [Boolean, String] },
     layoutId: {},
     layoutScroll: { type: Boolean },
     layoutRoot: { type: Boolean },
@@ -66,16 +66,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       parentState
     );
     provideMotion(state);
-    const instance = getCurrentInstance();
+    const instance = getCurrentInstance().proxy;
     onMounted(() => {
-      state.mount(instance == null ? void 0 : instance.vnode.el);
-      state.update({
+      state.mount(getMotionElement(instance.$el), {
         ...attrs,
-        ...props
+        ...props,
+        initial: presenceInitial.value === false ? presenceInitial.value : props.initial === true ? void 0 : props.initial
       });
     });
     onUnmounted(() => {
-      if (safeUnmount(instance == null ? void 0 : instance.vnode.el))
+      if (safeUnmount(getMotionElement(instance.$el)))
         state.unmount();
     });
     onUpdated(() => {
@@ -86,22 +86,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       });
     });
     function getProps() {
+      const isSVG = state.visualElement.type === "svg";
       const attrsProps = { ...attrs };
       Object.keys(attrs).forEach((key) => {
         if (isMotionValue(attrs[key]))
           attrsProps[key] = attrs[key].get();
       });
       let styleProps = {
-        ...props.style
+        ...props.style,
+        ...isSVG ? {} : state.visualElement.latestValues
       };
+      if (isSVG) {
+        const { attributes, style } = convertSvgStyleToAttributes(state.target);
+        Object.assign(attrsProps, attributes);
+        Object.assign(styleProps, style, props.style);
+      }
       if (!state.isMounted()) {
-        if (isSVGElement(props.as)) {
-          const { attributes, style } = convertSvgStyleToAttributes(state.getTarget());
-          Object.assign(attrsProps, attributes);
-          Object.assign(styleProps, style, props.style);
-        } else {
-          Object.assign(styleProps, state.getTarget(), props.style);
-        }
+        Object.assign(styleProps, state.target, props.style);
       }
       styleProps = createStyles(styleProps);
       attrsProps.style = styleProps;

package/dist/es/components/presence.mjs

@@ -1,5 +1,7 @@
+import { ref } from "vue";
 import { createContext } from "../utils/createContext.mjs";
-const doneCallbacks = /* @__PURE__ */ new Map();
+const doneCallbacks = /* @__PURE__ */ new WeakMap();
+const unPresenceDom = ref(/* @__PURE__ */ new WeakMap());
 function removeDoneCallback(element) {
   const prevDoneCallback = doneCallbacks.get(element);
   if (prevDoneCallback) {
@@ -12,5 +14,6 @@ export {
   doneCallbacks,
   injectAnimatePresence,
   provideAnimatePresence,
-  removeDoneCallback
+  removeDoneCallback,
+  unPresenceDom
 };

package/dist/es/components/use-layout-group.mjs

@@ -0,0 +1,34 @@
+import { watch } from "vue";
+import { injectLayoutGroup, provideLayoutGroup } from "./context.mjs";
+import { useForceUpdate } from "./use-force-update.mjs";
+import { nodeGroup } from "./group.mjs";
+function useLayoutGroup(props) {
+  const parentGroup = injectLayoutGroup(null);
+  const [forceRender, key] = useForceUpdate();
+  const context = {
+    id: getGroupId(props, parentGroup),
+    group: getGroup(props, parentGroup),
+    forceRender,
+    key
+  };
+  watch(key, () => {
+    context.id = getGroupId(props, parentGroup);
+  });
+  provideLayoutGroup(context);
+  return context;
+}
+function getGroupId(props, parentGroup) {
+  const shouldInherit = props.inherit === true || props.inherit === "id";
+  const parentId = parentGroup == null ? void 0 : parentGroup.id;
+  if (shouldInherit && parentId) {
+    return props.id ? `${parentId}-${props.id}` : parentId;
+  }
+  return props.id;
+}
+function getGroup(props, parentGroup) {
+  const shouldInherit = props.inherit === true || props.inherit === "group";
+  return shouldInherit ? (parentGroup == null ? void 0 : parentGroup.group) || nodeGroup() : nodeGroup();
+}
+export {
+  useLayoutGroup
+};

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

@@ -0,0 +1,47 @@
+function usePopLayout(props) {
+  const styles = /* @__PURE__ */ new WeakMap();
+  function addPopStyle(state) {
+    if (props.mode !== "popLayout")
+      return;
+    const size = {
+      height: state.element.offsetHeight || 0,
+      width: state.element.offsetWidth || 0,
+      top: state.element.offsetTop,
+      left: state.element.offsetLeft
+    };
+    state.element.dataset.motionPopId = state.id;
+    const style = document.createElement("style");
+    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}"] {
+      position: absolute !important;
+      width: ${size.width}px !important;
+      height: ${size.height}px !important;
+      top: ${size.top}px !important;
+          left: ${size.left}px !important;
+        }
+      `);
+    }
+  }
+  function removePopStyle(state) {
+    const style = styles.get(state);
+    if (style) {
+      styles.delete(state);
+      document.head.removeChild(style);
+    }
+  }
+  return {
+    addPopStyle,
+    removePopStyle
+  };
+}
+export {
+  usePopLayout
+};

package/dist/es/components/utils.mjs

@@ -0,0 +1,8 @@
+function getMotionElement(el) {
+  if ((el == null ? void 0 : el.nodeType) === 3 || (el == null ? void 0 : el.nodeType) === 8)
+    return getMotionElement(el.nextSibling);
+  return el;
+}
+export {
+  getMotionElement
+};

package/dist/es/constants/index.mjs

@@ -1,7 +1,7 @@
 const components = {
   motion: [
     "Motion",
-    "MotionPresence",
+    "AnimatePresence",
     "LayoutGroup"
   ]
 };

package/dist/es/features/gestures/hover.mjs

@@ -20,7 +20,11 @@ class HoverGesture extends BaseGesture {
         this.state.setActive("hover", true);
       });
       const onLeave = mouseEvent(element, "hoverend", () => {
+        var _a;
         this.state.setActive("hover", false);
+        (_a = this.state.visualElement.variantChildren) == null ? void 0 : _a.forEach((child) => {
+          child.state.setActive("hover", false);
+        });
       });
       element.addEventListener("pointerenter", onEnter);
       element.addEventListener("pointerleave", onLeave);

package/dist/es/features/gestures/in-view.mjs

@@ -12,7 +12,11 @@ class InViewGesture extends BaseGesture {
       const element = this.state.element;
       const { once, ...viewOptions } = ((_a = this.state.getOptions()) == null ? void 0 : _a.inViewOptions) || {};
       return inView(element, (enterEntry) => {
+        var _a2;
         this.state.setActive("inView", true);
+        (_a2 = this.state.visualElement.variantChildren) == null ? void 0 : _a2.forEach((child) => {
+          child.state.setActive("inView", true);
+        });
         dispatchPointerEvent(element, "viewenter", enterEntry);
         if (!once) {
           return (leaveEntry) => {

package/dist/es/features/layout/layout.mjs

@@ -40,11 +40,8 @@ class LayoutFeature extends Feature {
         (_a = visualElement.projection) == null ? void 0 : _a.root.didUpdate();
       });
       onBeforeUnmount(() => {
-        var _a;
         if (visualElement.projection) {
-          visualElement.projection.unmount();
-          if ((_a = this.layoutGroup) == null ? void 0 : _a.group)
-            this.layoutGroup.group.remove(visualElement.projection);
+          visualElement.projection.willUpdate();
         }
       });
     }
@@ -67,6 +64,12 @@ class LayoutFeature extends Feature {
     }
   }
   unmount() {
+    var _a;
+    if (this.state.visualElement.projection) {
+      this.state.visualElement.projection.unmount();
+      if ((_a = this.layoutGroup) == null ? void 0 : _a.group)
+        this.layoutGroup.group.remove(this.state.visualElement.projection);
+    }
   }
 }
 export {

package/dist/es/state/animate-variants-children.mjs

@@ -0,0 +1,72 @@
+import { style } from "./style.mjs";
+import { transformResetValue } from "./transform.mjs";
+import { resolveVariant, hasChanged, getOptions } from "./utils.mjs";
+import { animate } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/animation/animate/index.mjs";
+function animateVariantsChildren(state, activeState) {
+  const variantChildren = state.visualElement.variantChildren;
+  if (!(variantChildren == null ? void 0 : variantChildren.size)) {
+    return {
+      animations: [],
+      getAnimations: () => Promise.resolve()
+    };
+  }
+  const animationFactories = [];
+  Array.from(variantChildren).forEach((child, index) => {
+    var _a;
+    const prevTarget = child.state.target;
+    const childState = child.state;
+    childState.target = {};
+    for (const name in activeState) {
+      childState.activeStates[name] = true;
+      const { definition, transition } = activeState[name];
+      const { staggerChildren = 0, staggerDirection = 1, delayChildren = 0 } = transition;
+      const maxStaggerDuration = (variantChildren.size - 1) * staggerChildren;
+      const generateStaggerDuration = staggerDirection === 1 ? (i = 0) => i * staggerChildren : (i = 0) => maxStaggerDuration - i * staggerChildren;
+      const variant = resolveVariant(
+        definition,
+        child.props.variants,
+        child.props.custom
+      );
+      const animationOptions = {};
+      const allTarget = { ...prevTarget, ...variant };
+      for (const key in allTarget) {
+        if (key === "transition")
+          continue;
+        childState.target[key] = allTarget[key];
+        if (childState.target[key] === void 0) {
+          childState.target[key] = childState.baseTarget[key];
+        }
+        if (hasChanged(prevTarget[key], childState.target[key])) {
+          (_a = childState.baseTarget)[key] ?? (_a[key] = style.get(child.current, key));
+          animationOptions[key] = getOptions(
+            Object.assign({}, transition, allTarget.transition, child.props.transition),
+            key
+          );
+          const keyValue = childState.target[key] === "none" ? transformResetValue[key] : childState.target[key];
+          animationFactories.push(
+            () => {
+              var _a2;
+              return animate(
+                child.current,
+                {
+                  [key]: keyValue
+                },
+                {
+                  ...animationOptions[key] || {},
+                  delay: (((_a2 = animationOptions[key]) == null ? void 0 : _a2.delay) || 0) + delayChildren + generateStaggerDuration(index)
+                }
+              );
+            }
+          );
+        }
+      }
+    }
+  });
+  return {
+    animations: animationFactories,
+    getAnimations: () => Promise.all(animationFactories.map((factory) => factory()))
+  };
+}
+export {
+  animateVariantsChildren
+};

package/dist/es/state/motion-state.mjs

@@ -7,18 +7,22 @@ import { transformResetValue } from "./transform.mjs";
 import { scheduleAnimation, unscheduleAnimation } from "./schedule.mjs";
 import { motionEvent } from "./event.mjs";
 import { createVisualElement } from "./create-visual-element.mjs";
+import { animateVariantsChildren } from "./animate-variants-children.mjs";
 import { animate } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/animation/animate/index.mjs";
-import { isDef } from "../external/.pnpm/@vueuse_shared@12.0.0_typescript@5.5.4/external/@vueuse/shared/index.mjs";
+import { isDef } from "../external/.pnpm/@vueuse_shared@12.0.0_typescript@5.7.2/external/@vueuse/shared/index.mjs";
 const STATE_TYPES = ["initial", "animate", "inView", "hover", "press", "exit", "drag"];
 const mountedStates = /* @__PURE__ */ new WeakMap();
+let id = 0;
 class MotionState {
   constructor(options, parent) {
     this.element = null;
+    this.isFirstAnimate = true;
     this.activeStates = {
       initial: true,
       animate: true
     };
     this._context = null;
+    this.id = `motion-state-${id++}`;
     this.options = options;
     this.parent = parent;
     this.depth = (parent == null ? void 0 : parent.depth) + 1 || 0;
@@ -26,7 +30,10 @@ class MotionState {
       presenceContext: null,
       parent: parent == null ? void 0 : parent.visualElement,
       props: {
-        ...this.options
+        ...this.options,
+        whileHover: this.options.hover,
+        whileTap: this.options.press,
+        whileInView: this.options.inView
       },
       visualState: {
         renderState: {
@@ -62,19 +69,29 @@ class MotionState {
   get initial() {
     return isDef(this.options.initial) ? this.options.initial : this.context.initial;
   }
-  mount(element) {
+  updateOptions() {
     var _a;
+    this.visualElement.update({
+      ...this.options,
+      whileHover: this.options.hover,
+      whileTap: this.options.press,
+      whileInView: this.options.inView
+    }, (_a = this.parent) == null ? void 0 : _a.context);
+  }
+  mount(element, options) {
     invariant(
       Boolean(element),
       "Animation state must be mounted with valid Element"
     );
     this.element = element;
+    this.options = options;
     mountedStates.set(element, this);
     if (!visualElementStore.get(element)) {
       this.visualElement.mount(element);
       visualElementStore.set(element, this.visualElement);
     }
-    this.visualElement.update(this.options, (_a = this.parent) == null ? void 0 : _a.context);
+    this.visualElement.state = this;
+    this.updateOptions();
     if (typeof this.initial === "object") {
       for (const key in this.initial) {
         this.visualElement.setStaticValue(key, this.initial[key]);
@@ -85,6 +102,7 @@ class MotionState {
       }
     }
     this.featureManager.mount();
+    scheduleAnimation(this);
   }
   unmount() {
     var _a;
@@ -94,14 +112,13 @@ class MotionState {
     this.featureManager.unmount();
   }
   update(options) {
-    var _a;
     this.options = options;
-    this.visualElement.update(this.options, (_a = this.parent) == null ? void 0 : _a.context);
+    this.updateOptions();
     this.featureManager.update();
     scheduleAnimation(this);
   }
   setActive(name, isActive) {
-    if (!this.element)
+    if (!this.element || this.activeStates[name] === isActive)
       return;
     this.activeStates[name] = isActive;
     scheduleAnimation(this);
@@ -109,15 +126,31 @@ class MotionState {
   *animateUpdates() {
     const prevTarget = this.target;
     this.target = {};
+    const activeState = {};
     const animationOptions = {};
+    let transition;
     for (const name of STATE_TYPES) {
+      if (name === "initial") {
+        if (!this.isFirstAnimate) {
+          continue;
+        }
+        this.isFirstAnimate = false;
+      }
       if (!this.activeStates[name])
         continue;
+      const definition = isDef(this.options[name]) ? this.options[name] : this.context[name];
       const variant = resolveVariant(
-        isDef(this.options[name]) ? this.options[name] : this.context[name],
+        definition,
         this.options.variants,
         this.options.custom
       );
+      transition = Object.assign({}, this.options.transition, variant == null ? void 0 : variant.transition);
+      if (typeof definition === "string") {
+        activeState[name] = {
+          definition,
+          transition
+        };
+      }
       if (!variant)
         continue;
       const allTarget = { ...prevTarget, ...variant };
@@ -126,7 +159,7 @@ class MotionState {
           continue;
         this.target[key] = variant[key];
         animationOptions[key] = getOptions(
-          variant.transition ?? this.options.transition ?? {},
+          transition,
           key
         );
       }
@@ -143,12 +176,13 @@ class MotionState {
       }
       if (hasChanged(prevTarget[key], this.target[key])) {
         (_a = this.baseTarget)[key] ?? (_a[key] = style.get(this.element, key));
+        const keyValue = this.target[key] === "none" ? transformResetValue[key] : this.target[key];
         animationFactories.push(
           () => {
             return animate(
               this.element,
               {
-                [key]: this.target[key] === "none" ? transformResetValue[key] : this.target[key]
+                [key]: keyValue
               },
               animationOptions[key] || {}
             );
@@ -156,14 +190,40 @@ class MotionState {
         );
       }
     });
+    let getChildAnimations = () => Promise.resolve();
+    let childAnimations = [];
+    if (Object.keys(activeState).length) {
+      const { getAnimations, animations: animations2 } = animateVariantsChildren(this, activeState);
+      getChildAnimations = getAnimations;
+      childAnimations = animations2;
+    }
     yield;
-    const animations = animationFactories.map((factory) => factory()).filter(Boolean);
-    if (!animations.length)
+    let animations;
+    const getAnimation = () => {
+      animations = animationFactories.map((factory) => factory()).filter(Boolean);
+      return Promise.all(animations);
+    };
+    const { when } = transition;
+    let animationPromise;
+    if (when) {
+      const [first, last] = when === "beforeChildren" ? [getAnimation, getChildAnimations] : [getChildAnimations, getAnimation];
+      animationPromise = first().then(() => last());
+    } else {
+      animationPromise = Promise.all([getAnimation(), getChildAnimations()]);
+    }
+    const isExit = this.activeStates.exit;
+    if (!(animations == null ? void 0 : animations.length) && !childAnimations.length) {
+      if (isExit) {
+        this.element.dispatchEvent(motionEvent("motionstart", this.target));
+        this.element.dispatchEvent(motionEvent("motioncomplete", {
+          ...this.target
+        }, isExit));
+      }
       return;
+    }
     const animationTarget = this.target;
     this.element.dispatchEvent(motionEvent("motionstart", animationTarget));
-    const isExit = this.activeStates.exit;
-    Promise.all(animations).then(() => {
+    animationPromise.then(() => {
       this.element.dispatchEvent(motionEvent("motioncomplete", {
         ...animationTarget
       }, isExit));
@@ -172,15 +232,9 @@ class MotionState {
   isMounted() {
     return Boolean(this.element);
   }
-  getDepth() {
-    return this.depth;
-  }
   getOptions() {
     return this.options;
   }
-  getTarget() {
-    return this.target;
-  }
 }
 export {
   MotionState,

package/dist/es/state/schedule.mjs

@@ -22,7 +22,7 @@ function unscheduleAnimation(state) {
   scheduled && removeItem(scheduled, state);
 }
 function compareByDepth(a, b) {
-  return a.getDepth() - b.getDepth();
+  return a.depth - b.depth;
 }
 export {
   scheduleAnimation,

package/dist/src/components/AnimatePresence.d.ts

@@ -1,9 +1,4 @@
-export interface AnimatePresenceProps {
-    mode?: 'wait' | 'sync';
-    initial?: boolean;
-    multiple?: boolean;
-    as?: string;
-}
+import { AnimatePresenceProps } from './type';
 declare function __VLS_template(): {
     slots: {
         default?(_: {}): any;
@@ -21,7 +16,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<
     initial: boolean;
     multiple: boolean;
 }>>>, {
-    mode: "wait" | "sync";
+    mode: "wait" | "popLayout" | "sync";
     initial: boolean;
     multiple: boolean;
 }, {}>;

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

@@ -1,8 +1,4 @@
-import { InheritOption } from './context';
-export interface LayoutGroupProps {
-    id?: string;
-    inherit?: InheritOption;
-}
+import { LayoutGroupProps } from './use-layout-group';
 declare function __VLS_template(): {
     slots: {
         default?(_: {}): any;

package/dist/src/components/Motion.d.ts

@@ -12,9 +12,7 @@ declare const _default: <T extends ElementType = "div", K = unknown>(__VLS_props
         default?(_: {}): any;
     };
     emit: {};
-}>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
-    [key: string]: any;
-}> & {
+}>) => import('vue').VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
 export default _default;

package/dist/src/components/presence.d.ts

@@ -1,5 +1,6 @@
 import { Ref } from 'vue';
-export declare const doneCallbacks: Map<Element, VoidFunction>;
+export declare const doneCallbacks: WeakMap<Element, VoidFunction>;
+export declare const unPresenceDom: Ref<WeakMap<Element, boolean> & Omit<WeakMap<Element, boolean>, keyof WeakMap<any, any>>>;
 export declare function removeDoneCallback(element: Element): void;
 export interface PresenceContext {
     initial: Ref<boolean>;

package/dist/src/components/type.d.ts

@@ -1,25 +1,6 @@
-interface SVGRenderState {
-    style: Record<string, any>;
-    transform: Record<string, any>;
-    transformOrigin: {
-        originX?: string | number;
-        originY?: string | number;
-        originZ?: string | number;
-    };
-    attrs: Record<string, any>;
-    dimensions?: {
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-    };
-}
-interface SVGProps {
-    attrX?: number;
-    attrY?: number;
-    attrScale?: number;
-    pathLength?: number;
-    pathSpacing?: number;
-    pathOffset?: number;
-    [key: string]: any;
+export interface AnimatePresenceProps {
+    mode?: 'wait' | 'popLayout' | 'sync';
+    initial?: boolean;
+    multiple?: boolean;
+    as?: string;
 }

package/dist/src/components/use-layout-group.d.ts

@@ -0,0 +1,20 @@
+import { LayoutGroupState } from './context';
+/**
+ * Props for configuring layout group behavior
+ */
+export interface LayoutGroupProps {
+    /** Optional ID for the layout group */
+    id?: string;
+    /**
+     * Controls inheritance of parent group properties:
+     * - true: Inherit both id and group
+     * - 'id': Only inherit id
+     * - 'group': Only inherit group
+     */
+    inherit?: boolean | 'id' | 'group';
+}
+/**
+ * Hook to create and manage a layout group
+ * Handles group inheritance, force updates, and context management
+ */
+export declare function useLayoutGroup(props: LayoutGroupProps): LayoutGroupState;