motion-v 0.4.1 → 0.5.0-beta.2

package/dist/cjs/index.js

@@ -5193,7 +5193,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);
@@ -5253,7 +5257,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) => {
@@ -5635,7 +5643,7 @@ const isDebug = typeof window !== "undefined" && window.MotionDebug !== void 0;
 const transformAxes = ["", "X", "Y", "Z"];
 const hiddenVisibility = { visibility: "hidden" };
 const animationTarget = 1e3;
-let id = 0;
+let id$1 = 0;
 function resetDistortingTransform(key, visualElement, values, sharedAnimationValues) {
   const { latestValues } = visualElement;
   if (latestValues[key]) {
@@ -5666,7 +5674,7 @@ function cancelTreeOptimisedTransformAnimations(projectionNode) {
 function createProjectionNode({ attachResizeListener, defaultParent, measureScroll, checkIsScrollRoot, resetTransform }) {
   return class ProjectionNode {
     constructor(latestValues = {}, parent = defaultParent === null || defaultParent === void 0 ? void 0 : defaultParent()) {
-      this.id = id++;
+      this.id = id$1++;
       this.animationId = 0;
       this.children = /* @__PURE__ */ new Set();
       this.options = {};
@@ -6806,11 +6814,8 @@ class LayoutFeature extends Feature {
         (_a = visualElement.projection) == null ? void 0 : _a.root.didUpdate();
       });
       vue.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();
         }
       });
     }
@@ -6833,6 +6838,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);
+    }
   }
 }
 class FeatureManager {
@@ -6880,7 +6891,7 @@ function unscheduleAnimation(state2) {
   scheduled && removeItem(scheduled, state2);
 }
 function compareByDepth(a, b) {
-  return a.getDepth() - b.getDepth();
+  return a.depth - b.depth;
 }
 function motionEvent(name, target, isExit) {
   return new CustomEvent(name, { detail: { target, isExit } });
@@ -6888,16 +6899,84 @@ function motionEvent(name, target, isExit) {
 function createVisualElement(Component, options) {
   return isSVGElement$1(Component) ? new SVGVisualElement(options) : new HTMLVisualElement(options);
 }
+function animateVariantsChildren(state2, activeState) {
+  const variantChildren = state2.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()))
+  };
+}
 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;
@@ -6905,7 +6984,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: {
@@ -6941,19 +7023,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]);
@@ -6964,6 +7056,7 @@ class MotionState {
       }
     }
     this.featureManager.mount();
+    scheduleAnimation(this);
   }
   unmount() {
     var _a;
@@ -6973,14 +7066,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);
@@ -6988,15 +7080,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 };
@@ -7005,7 +7113,7 @@ class MotionState {
           continue;
         this.target[key] = variant[key];
         animationOptions[key] = getOptions(
-          variant.transition ?? this.options.transition ?? {},
+          transition,
           key
         );
       }
@@ -7022,12 +7130,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] || {}
             );
@@ -7035,14 +7144,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 animationTarget2 = this.target;
     this.element.dispatchEvent(motionEvent("motionstart", animationTarget2));
-    const isExit = this.activeStates.exit;
-    Promise.all(animations).then(() => {
+    animationPromise.then(() => {
       this.element.dispatchEvent(motionEvent("motioncomplete", {
         ...animationTarget2
       }, isExit));
@@ -7051,17 +7186,12 @@ class MotionState {
   isMounted() {
     return Boolean(this.element);
   }
-  getDepth() {
-    return this.depth;
-  }
   getOptions() {
     return this.options;
   }
-  getTarget() {
-    return this.target;
-  }
 }
-const doneCallbacks = /* @__PURE__ */ new Map();
+const doneCallbacks = /* @__PURE__ */ new WeakMap();
+const unPresenceDom = vue.ref(/* @__PURE__ */ new WeakMap());
 function removeDoneCallback(element) {
   const prevDoneCallback = doneCallbacks.get(element);
   if (prevDoneCallback) {
@@ -7070,6 +7200,11 @@ function removeDoneCallback(element) {
   doneCallbacks.delete(element);
 }
 const [injectAnimatePresence, provideAnimatePresence] = createContext("AnimatePresenceContext");
+function getMotionElement(el) {
+  if ((el == null ? void 0 : el.nodeType) === 3 || (el == null ? void 0 : el.nodeType) === 8)
+    return getMotionElement(el.nextSibling);
+  return el;
+}
 const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
   ...{
     name: "Motion",
@@ -7099,7 +7234,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     onPressEnd: { type: Function },
     onViewEnter: { type: Function },
     onViewLeave: { type: Function },
-    layout: { type: Boolean },
+    layout: { type: [Boolean, String] },
     layoutId: {},
     layoutScroll: { type: Boolean },
     layoutRoot: { type: Boolean },
@@ -7130,16 +7265,16 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
       parentState
     );
     provideMotion(state2);
-    const instance = vue.getCurrentInstance();
+    const instance = vue.getCurrentInstance().proxy;
     vue.onMounted(() => {
-      state2.mount(instance == null ? void 0 : instance.vnode.el);
-      state2.update({
+      state2.mount(getMotionElement(instance.$el), {
         ...attrs,
-        ...props
+        ...props,
+        initial: presenceInitial.value === false ? presenceInitial.value : props.initial === true ? void 0 : props.initial
       });
     });
     vue.onUnmounted(() => {
-      if (safeUnmount(instance == null ? void 0 : instance.vnode.el))
+      if (safeUnmount(getMotionElement(instance.$el)))
         state2.unmount();
     });
     vue.onUpdated(() => {
@@ -7150,22 +7285,23 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
       });
     });
     function getProps() {
+      const isSVG = state2.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 ? {} : state2.visualElement.latestValues
       };
+      if (isSVG) {
+        const { attributes, style: style2 } = convertSvgStyleToAttributes(state2.target);
+        Object.assign(attrsProps, attributes);
+        Object.assign(styleProps, style2, props.style);
+      }
       if (!state2.isMounted()) {
-        if (isSVGElement$1(props.as)) {
-          const { attributes, style: style2 } = convertSvgStyleToAttributes(state2.getTarget());
-          Object.assign(attrsProps, attributes);
-          Object.assign(styleProps, style2, props.style);
-        } else {
-          Object.assign(styleProps, state2.getTarget(), props.style);
-        }
+        Object.assign(styleProps, state2.target, props.style);
       }
       styleProps = createStyles(styleProps);
       attrsProps.style = styleProps;
@@ -7187,6 +7323,111 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
+function useForceUpdate() {
+  const key = vue.ref(0);
+  function forceUpdate() {
+    key.value++;
+  }
+  return [forceUpdate, key];
+}
+function notify(node) {
+  return !node.isLayoutDirty && node.willUpdate(false);
+}
+function nodeGroup() {
+  const nodes = /* @__PURE__ */ new Set();
+  const subscriptions = /* @__PURE__ */ new WeakMap();
+  const dirtyAll = () => nodes.forEach(notify);
+  return {
+    add: (node) => {
+      nodes.add(node);
+      subscriptions.set(
+        node,
+        node.addEventListener("willUpdate", dirtyAll)
+      );
+    },
+    remove: (node) => {
+      nodes.delete(node);
+      const unsubscribe = subscriptions.get(node);
+      if (unsubscribe) {
+        unsubscribe();
+        subscriptions.delete(node);
+      }
+      dirtyAll();
+    },
+    dirty: dirtyAll
+  };
+}
+function useLayoutGroup(props) {
+  const parentGroup = injectLayoutGroup(null);
+  const [forceRender, key] = useForceUpdate();
+  const context = {
+    id: getGroupId(props, parentGroup),
+    group: getGroup(props, parentGroup),
+    forceRender,
+    key
+  };
+  vue.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();
+}
+function usePopLayout(props) {
+  const styles = /* @__PURE__ */ new WeakMap();
+  function addPopStyle(state2) {
+    if (props.mode !== "popLayout")
+      return;
+    const size = {
+      height: state2.element.offsetHeight || 0,
+      width: state2.element.offsetWidth || 0,
+      top: state2.element.offsetTop,
+      left: state2.element.offsetLeft
+    };
+    state2.element.dataset.motionPopId = state2.id;
+    const style2 = document.createElement("style");
+    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}"] {
+      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(state2) {
+    const style2 = styles.get(state2);
+    if (style2) {
+      styles.delete(state2);
+      document.head.removeChild(style2);
+    }
+  }
+  return {
+    addPopStyle,
+    removePopStyle
+  };
+}
 const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
   ...{
     name: "AnimatePresence",
@@ -7215,17 +7456,26 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
       }
       removeDoneCallback(el);
       state2.setActive("exit", false);
+      unPresenceDom.value.delete(el);
     }
+    const layoutGroup = useLayoutGroup(props);
+    const { addPopStyle, removePopStyle } = usePopLayout(props);
     function exit(el, done) {
+      unPresenceDom.value.set(el, true);
       const state2 = mountedStates.get(el);
       if (!state2) {
         return done();
       }
       removeDoneCallback(el);
+      addPopStyle(state2);
       function doneCallback(e) {
-        var _a;
+        var _a, _b, _c;
+        removePopStyle(state2);
         if ((_a = e == null ? void 0 : e.detail) == null ? void 0 : _a.isExit) {
           removeDoneCallback(el);
+          unPresenceDom.value.delete(el);
+          (_b = state2.visualElement.projection) == null ? void 0 : _b.willUpdate();
+          (_c = layoutGroup.forceRender) == null ? void 0 : _c.call(layoutGroup);
           done();
           if (!el.isConnected) {
             state2.unmount();
@@ -7252,40 +7502,6 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-function notify(node) {
-  return !node.isLayoutDirty && node.willUpdate(false);
-}
-function nodeGroup() {
-  const nodes = /* @__PURE__ */ new Set();
-  const subscriptions = /* @__PURE__ */ new WeakMap();
-  const dirtyAll = () => nodes.forEach(notify);
-  return {
-    add: (node) => {
-      nodes.add(node);
-      subscriptions.set(
-        node,
-        node.addEventListener("willUpdate", dirtyAll)
-      );
-    },
-    remove: (node) => {
-      nodes.delete(node);
-      const unsubscribe = subscriptions.get(node);
-      if (unsubscribe) {
-        unsubscribe();
-        subscriptions.delete(node);
-      }
-      dirtyAll();
-    },
-    dirty: dirtyAll
-  };
-}
-function useForceUpdate() {
-  const key = vue.ref(0);
-  function forceUpdate() {
-    key.value++;
-  }
-  return [forceUpdate, key];
-}
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "LayoutGroup",
   props: {
@@ -7294,25 +7510,7 @@ const _sfc_main = /* @__PURE__ */ vue.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
-    };
-    vue.watch(key, () => {
-      memoizedContext.id = generateId();
-    });
-    provideLayoutGroup(memoizedContext);
+    useLayoutGroup(props);
     return (_ctx, _cache) => {
       return vue.renderSlot(_ctx.$slots, "default");
     };
@@ -7522,7 +7720,7 @@ function useVelocity(value) {
 const components = {
   motion: [
     "Motion",
-    "MotionPresence",
+    "AnimatePresence",
     "LayoutGroup"
   ]
 };

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

@@ -1,6 +1,8 @@
 import { defineComponent, toRefs, openBlock, createBlock, resolveDynamicComponent, TransitionGroup, Transition, withCtx, renderSlot } from "vue";
 import { mountedStates } from "../state/motion-state.mjs";
-import { provideAnimatePresence, doneCallbacks, removeDoneCallback } from "./presence.mjs";
+import { provideAnimatePresence, doneCallbacks, removeDoneCallback, unPresenceDom } from "./presence.mjs";
+import { useLayoutGroup } from "./use-layout-group.mjs";
+import { usePopLayout } from "./use-pop-layout.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "AnimatePresence",
@@ -29,17 +31,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       removeDoneCallback(el);
       state.setActive("exit", false);
+      unPresenceDom.value.delete(el);
     }
+    const layoutGroup = useLayoutGroup(props);
+    const { addPopStyle, removePopStyle } = usePopLayout(props);
     function exit(el, done) {
+      unPresenceDom.value.set(el, true);
       const state = mountedStates.get(el);
       if (!state) {
         return done();
       }
       removeDoneCallback(el);
+      addPopStyle(state);
       function doneCallback(e) {
-        var _a;
+        var _a, _b, _c;
+        removePopStyle(state);
         if ((_a = e == null ? void 0 : e.detail) == null ? void 0 : _a.isExit) {
           removeDoneCallback(el);
+          unPresenceDom.value.delete(el);
+          (_b = state.visualElement.projection) == null ? void 0 : _b.willUpdate();
+          (_c = layoutGroup.forceRender) == null ? void 0 : _c.call(layoutGroup);
           done();
           if (!el.isConnected) {
             state.unmount();