motion-v 0.6.1 → 0.7.0

package/dist/cjs/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
+const core = require("@vueuse/core");
 const heyListen = require("hey-listen");
 const noop = (any) => any;
 let warning = noop;
@@ -5081,8 +5082,6 @@ const svgElementSet = new Set(svgElements);
 function isSVGElement$1(as) {
   return svgElementSet.has(as);
 }
-typeof WorkerGlobalScope !== "undefined" && globalThis instanceof WorkerGlobalScope;
-const isDef = (val) => typeof val !== "undefined";
 const rotation = {
   syntax: "<angle>",
   initialValue: "0deg",
@@ -5433,20 +5432,40 @@ class InViewGesture extends Feature {
   constructor(state2) {
     super(state2);
   }
-  mount() {
+  startObserver() {
     const element = this.state.element;
     if (!element)
       return;
+    this.unmount();
+    const { once, ...viewOptions } = this.state.getOptions().inViewOptions || {};
     this.unmount = inView(
       element,
       (entry) => {
         handleHoverEvent(this.state, entry, "Enter");
-        return (endEvent) => {
-          handleHoverEvent(this.state, entry, "Leave");
-        };
-      }
+        if (!once) {
+          return (endEvent) => {
+            handleHoverEvent(this.state, entry, "Leave");
+          };
+        }
+      },
+      viewOptions
     );
   }
+  mount() {
+    this.startObserver();
+  }
+  update() {
+    const { props, prevProps } = this.state.visualElement;
+    const hasOptionsChanged = ["amount", "margin", "root"].some(
+      hasViewportOptionChanged(props, prevProps)
+    );
+    if (hasOptionsChanged) {
+      this.startObserver();
+    }
+  }
+}
+function hasViewportOptionChanged({ inViewOptions = {} }, { inViewOptions: prevViewport = {} } = {}) {
+  return (name) => inViewOptions[name] !== prevViewport[name];
 }
 function isPrimaryPointer(event) {
   if (event.pointerType === "mouse") {
@@ -7897,43 +7916,17 @@ class ProjectionFeature extends Feature {
       options["data-framer-portal-id"] ? void 0 : getClosestProjectingNode(this.state.visualElement.parent)
     );
     this.state.visualElement.projection.isPresent = true;
-    this.state.visualElement.projection.setOptions({
-      layout: options.layout,
-      layoutId: options.layoutId,
-      // TODO: drag
-      alwaysMeasureLayout: false,
-      visualElement: this.state.visualElement,
-      animationType: typeof options.layout === "string" ? options.layout : "both",
-      // initialPromotionConfig
-      layoutRoot: options.layoutRoot,
-      layoutScroll: options.layoutScroll,
-      crossfade: options.crossfade,
-      onExitComplete: () => {
-        var _a;
-        if (!((_a = this.state.visualElement.projection) == null ? void 0 : _a.isPresent)) {
-          const done = doneCallbacks.get(this.state.element);
-          this.state.isSafeToRemove = true;
-          if (done) {
-            done({
-              detail: {
-                isExit: true
-              }
-            }, true);
-          }
-        }
-      }
-    });
+    this.setOptions();
   }
   beforeMount() {
     this.initProjection();
   }
-  update() {
+  setOptions() {
     const options = this.state.options;
     this.state.visualElement.projection.setOptions({
       layout: options.layout,
       layoutId: options.layoutId,
-      // TODO: drag
-      alwaysMeasureLayout: false,
+      alwaysMeasureLayout: Boolean(options.drag) || options.dragConstraints && isHTMLElement(options.dragConstraints),
       visualElement: this.state.visualElement,
       animationType: typeof options.layout === "string" ? options.layout : "both",
       // initialPromotionConfig
@@ -7942,6 +7935,9 @@ class ProjectionFeature extends Feature {
       crossfade: options.crossfade
     });
   }
+  update() {
+    this.setOptions();
+  }
   mount() {
     var _a;
     (_a = this.state.visualElement.projection) == null ? void 0 : _a.mount(this.state.element);
@@ -7992,73 +7988,6 @@ function motionEvent(name, target, isExit) {
 function createVisualElement(Component, options) {
   return isSVGElement$1(Component) ? new SVGVisualElement(options) : new HTMLVisualElement(options);
 }
-function animateVariantsChildren(state2, activeState, isFirstAnimate = false) {
-  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 = isFirstAnimate ? child.state.baseTarget : child.state.target;
-    const childState = child.state;
-    childState.target = {};
-    for (const name in activeState) {
-      if (name === "initial" && !isFirstAnimate) {
-        continue;
-      }
-      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", "whileDrag", "exit"];
 const mountedStates = /* @__PURE__ */ new WeakMap();
 let id = 0;
@@ -8070,7 +7999,7 @@ class MotionState {
     this.isVShow = false;
     this.children = /* @__PURE__ */ new Set();
     this.activeStates = {
-      // initial: true,
+      initial: true,
       animate: true
     };
     this._context = null;
@@ -8104,6 +8033,7 @@ class MotionState {
     this.initTarget(initialVariantSource);
     this.featureManager = new FeatureManager(this);
   }
+  // Get animation context, falling back to parent context
   get context() {
     if (!this._context) {
       const handler = {
@@ -8116,13 +8046,16 @@ class MotionState {
     }
     return this._context;
   }
+  // Initialize animation target values
   initTarget(initialVariantSource) {
     this.baseTarget = resolveVariant(this.options[initialVariantSource] || this.context[initialVariantSource], this.options.variants) || {};
     this.target = {};
   }
+  // Get initial animation state
   get initial() {
-    return isDef(this.options.initial) ? this.options.initial : this.context.initial;
+    return core.isDef(this.options.initial) ? this.options.initial : this.context.initial;
   }
+  // Update visual element with new options
   updateOptions() {
     this.visualElement.update({
       ...this.options,
@@ -8137,6 +8070,7 @@ class MotionState {
   beforeMount() {
     this.featureManager.beforeMount();
   }
+  // Mount motion state to DOM element
   mount(element, options, notAnimate = false) {
     heyListen.invariant(
       Boolean(element),
@@ -8161,13 +8095,14 @@ class MotionState {
       }
     }
     this.featureManager.mount();
-    if (!notAnimate) {
-      this.animateUpdates(true);
+    if (!notAnimate && this.options.animate) {
+      this.animateUpdates();
     }
   }
   beforeUnmount() {
     this.featureManager.beforeUnmount();
   }
+  // Unmount motion state and optionally unmount children
   unmount(unMountChildren = false) {
     var _a, _b, _c;
     mountedStates.delete(this.element);
@@ -8193,6 +8128,7 @@ class MotionState {
   beforeUpdate() {
     this.featureManager.beforeUpdate();
   }
+  // Update motion state with new options
   update(options, notAnimate = false) {
     const prevAnimate = JSON.stringify(this.options.animate);
     this.options = options;
@@ -8206,6 +8142,7 @@ class MotionState {
       this.animateUpdates();
     }
   }
+  // Set animation state active status
   setActive(name, isActive, isAnimate = true) {
     var _a;
     if (!this.element || this.activeStates[name] === isActive)
@@ -8218,37 +8155,32 @@ class MotionState {
       this.animateUpdates();
     }
   }
-  animateUpdates(isInitial = false) {
+  // Core animation update logic
+  animateUpdates(controlActiveState = void 0, controlDelay = 0) {
+    var _a;
     const prevTarget = this.target;
-    this.target = {};
-    const activeState = {};
+    this.target = {
+      ...this.baseTarget
+    };
     const animationOptions = {};
     let transition;
+    if (controlActiveState) {
+      this.activeStates = { ...this.activeStates, ...controlActiveState };
+    }
     for (const name of STATE_TYPES) {
-      if (name === "initial") {
-        if (!isInitial) {
-          continue;
-        }
-      }
-      if (!this.activeStates[name] && name !== "initial") {
+      if (!this.activeStates[name]) {
         continue;
       }
-      const definition = isDef(this.options[name]) ? this.options[name] : this.context[name];
+      const definition = core.isDef(this.options[name]) ? this.options[name] : this.context[name];
       const variant = resolveVariant(
         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 };
+      const allTarget = { ...variant };
       for (const key in allTarget) {
         if (key === "transition")
           continue;
@@ -8260,18 +8192,15 @@ class MotionState {
       }
     }
     const allTargetKeys = /* @__PURE__ */ new Set([
-      ...Object.keys(this.target),
-      ...Object.keys(prevTarget)
+      ...Object.keys(this.target)
     ]);
     const animationFactories = [];
     allTargetKeys.forEach((key) => {
-      var _a;
-      if (this.target[key] === void 0) {
-        this.target[key] = this.baseTarget[key];
-      }
+      var _a2;
       if (hasChanged(prevTarget[key], this.target[key])) {
-        (_a = this.baseTarget)[key] ?? (_a[key] = style.get(this.element, key));
+        (_a2 = this.baseTarget)[key] ?? (_a2[key] = style.get(this.element, key));
         const keyValue = this.target[key] === "none" ? transformResetValue[key] : this.target[key];
+        const targetTransition = animationOptions[key];
         animationFactories.push(
           () => {
             return animate(
@@ -8279,7 +8208,10 @@ class MotionState {
               {
                 [key]: keyValue
               },
-              animationOptions[key] || {}
+              {
+                ...targetTransition,
+                delay: ((targetTransition == null ? void 0 : targetTransition.delay) || 0) + controlDelay
+              }
             );
           }
         );
@@ -8287,10 +8219,15 @@ class MotionState {
     });
     let getChildAnimations = () => Promise.resolve();
     let childAnimations = [];
-    if (Object.keys(activeState).length) {
-      const { getAnimations, animations: animations2 } = animateVariantsChildren(this, activeState, isInitial);
-      getChildAnimations = getAnimations;
-      childAnimations = animations2;
+    if (((_a = this.visualElement.variantChildren) == null ? void 0 : _a.size) && !controlActiveState) {
+      const { staggerChildren = 0, staggerDirection = 1, delayChildren = 0 } = transition || {};
+      const maxStaggerDuration = (this.visualElement.variantChildren.size - 1) * staggerChildren;
+      const generateStaggerDuration = staggerDirection === 1 ? (i = 0) => i * staggerChildren : (i = 0) => maxStaggerDuration - i * staggerChildren;
+      childAnimations = Array.from(this.visualElement.variantChildren).map((child, index) => {
+        const childDelay = delayChildren + generateStaggerDuration(index);
+        return child.state.animateUpdates(this.activeStates, childDelay);
+      }).filter(Boolean);
+      getChildAnimations = () => Promise.all(childAnimations.map((animation) => animation()));
     }
     let animations;
     const getAnimation = () => {
@@ -8299,29 +8236,38 @@ class MotionState {
     };
     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));
+    const animationTarget2 = { ...this.target };
+    const element = this.element;
+    function finishAnimation2() {
+      if (!(animations == null ? void 0 : animations.length) && !childAnimations.length) {
+        if (isExit) {
+          element.dispatchEvent(motionEvent("motionstart", animationTarget2));
+          element.dispatchEvent(motionEvent("motioncomplete", animationTarget2, isExit));
+        }
+        return;
+      }
+      element.dispatchEvent(motionEvent("motionstart", animationTarget2));
+      animationPromise.then(() => {
+        element.dispatchEvent(motionEvent("motioncomplete", animationTarget2, isExit));
+      }).catch(noop);
+    }
+    function getAnimationPromise() {
+      if (when) {
+        const [first, last] = when === "beforeChildren" ? [getAnimation, getChildAnimations] : [getChildAnimations, getAnimation];
+        animationPromise = first().then(() => last());
+        finishAnimation2();
+        return animationPromise;
+      } else {
+        animationPromise = Promise.all([getAnimation(), getChildAnimations()]);
+        finishAnimation2();
+        return animationPromise;
       }
-      return;
     }
-    const animationTarget2 = this.target;
-    this.element.dispatchEvent(motionEvent("motionstart", animationTarget2));
-    animationPromise.then(() => {
-      this.element.dispatchEvent(motionEvent("motioncomplete", {
-        ...animationTarget2
-      }, isExit));
-    }).catch(noop);
+    if (controlActiveState) {
+      return getAnimationPromise;
+    }
+    getAnimationPromise();
   }
   isMounted() {
     return Boolean(this.element);
@@ -8426,7 +8372,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     layoutScroll: false,
     layoutRoot: false,
     dragListener: true,
-    dragElastic: 0.2,
+    dragElastic: 0.5,
     dragMomentum: true,
     whileDrag: void 0,
     crossfade: true
@@ -8539,6 +8485,48 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
+const componentCache = /* @__PURE__ */ new Map();
+const motion = new Proxy(_sfc_main$3, {
+  get(target, prop) {
+    if (typeof prop === "symbol")
+      return target[prop];
+    let motionComponent = componentCache.get(prop);
+    if (prop === "create") {
+      return (component) => {
+        return vue.defineComponent({
+          inheritAttrs: false,
+          name: `motion.${component.$name}`,
+          setup(_, { attrs, slots }) {
+            return () => {
+              return vue.h(_sfc_main$3, {
+                ...attrs,
+                as: component,
+                asChild: false
+              }, slots);
+            };
+          }
+        });
+      };
+    }
+    if (!motionComponent) {
+      motionComponent = vue.defineComponent({
+        inheritAttrs: false,
+        name: `motion.${prop}`,
+        setup(_, { attrs, slots }) {
+          return () => {
+            return vue.h(_sfc_main$3, {
+              ...attrs,
+              as: prop,
+              asChild: false
+            }, slots);
+          };
+        }
+      });
+      componentCache.set(prop, motionComponent);
+    }
+    return motionComponent;
+  }
+});
 function usePopLayout(props) {
   const styles = /* @__PURE__ */ new WeakMap();
   const config = useMotionConfig();
@@ -8590,6 +8578,13 @@ function usePopLayout(props) {
     styles
   };
 }
+function requestIdleCallback$1(callback) {
+  if (typeof requestIdleCallback$1 !== "undefined") {
+    requestIdleCallback$1(callback);
+  } else {
+    setTimeout(callback, 50);
+  }
+}
 const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
   ...{
     name: "AnimatePresence",
@@ -8650,9 +8645,12 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
           }
           if (!styles.has(state2)) {
             state2.willUpdate("done");
+          } else {
+            requestIdleCallback$1(() => {
+              removePopStyle(state2);
+            });
           }
           done();
-          removePopStyle(state2);
           if (!(el == null ? void 0 : el.isConnected)) {
             state2.unmount(true);
           }
@@ -8662,19 +8660,26 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
       el.addEventListener("motioncomplete", doneCallback);
       state2.setActive("exit", true);
     }
+    const transitionProps = vue.computed(() => {
+      if (props.multiple) {
+        return {
+          tag: props.as
+        };
+      }
+      return {
+        mode: props.mode === "wait" ? "out-in" : void 0
+      };
+    });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.multiple ? vue.TransitionGroup : vue.Transition), {
-        tag: _ctx.multiple ? _ctx.as : void 0,
-        css: false,
-        mode: _ctx.mode === "wait" ? "out-in" : void 0,
+      return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.multiple ? vue.TransitionGroup : vue.Transition), vue.mergeProps({ css: false }, transitionProps.value, {
         onEnter: enter,
         onLeave: exit
-      }, {
+      }), {
         default: vue.withCtx(() => [
           vue.renderSlot(_ctx.$slots, "default")
         ]),
         _: 3
-      }, 40, ["tag", "mode"]);
+      }, 16);
     };
   }
 });
@@ -8988,6 +8993,7 @@ function useVelocity(value) {
 }
 const components = {
   motion: [
+    "motion",
     "Motion",
     "AnimatePresence",
     "LayoutGroup",
@@ -9007,7 +9013,8 @@ const utilities = {
     "useInView",
     "useAnimationFrame",
     "useMotionValueEvent",
-    "useLayoutGroup"
+    "useLayoutGroup",
+    "useDragControls"
   ]
 };
 function useAnimate() {
@@ -9036,6 +9043,45 @@ function useAnimate() {
   });
   return [domProxy, animate2];
 }
+class DragControls {
+  constructor() {
+    this.componentControls = /* @__PURE__ */ new Set();
+  }
+  /**
+   * Subscribe a component's internal `VisualElementDragControls` to the user-facing API.
+   *
+   * @internal
+   */
+  subscribe(controls) {
+    this.componentControls.add(controls);
+    return () => this.componentControls.delete(controls);
+  }
+  /**
+   * Start a drag gesture on every `motion` component that has this set of drag controls
+   * passed into it via the `dragControls` prop.
+   *
+   * ```jsx
+   * dragControls.start(e, {
+   *   snapToCursor: true
+   * })
+   * ```
+   *
+   * @param event - PointerEvent
+   * @param options - Options
+   *
+   * @public
+   */
+  start(event, options) {
+    this.componentControls.forEach((controls) => {
+      controls.start(
+        event,
+        options
+      );
+    });
+  }
+}
+const createDragControls = () => new DragControls();
+const useDragControls = createDragControls;
 exports.AnimatePresence = _sfc_main$2;
 exports.LayoutGroup = _sfc_main;
 exports.Motion = _sfc_main$3;
@@ -9078,6 +9124,7 @@ exports.keyframes = keyframes;
 exports.millisecondsToSeconds = millisecondsToSeconds;
 exports.mirrorEasing = mirrorEasing;
 exports.mix = mix;
+exports.motion = motion;
 exports.motionValue = motionValue;
 exports.noop = noop;
 exports.pipe = pipe;
@@ -9099,6 +9146,7 @@ exports.useAnimate = useAnimate;
 exports.useAnimationFrame = useAnimationFrame;
 exports.useCombineMotionValues = useCombineMotionValues;
 exports.useComputed = useComputed;
+exports.useDragControls = useDragControls;
 exports.useInView = useInView;
 exports.useLayoutGroup = useLayoutGroup;
 exports.useMotionConfig = useMotionConfig;

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

@@ -1,7 +1,8 @@
-import { defineComponent, onMounted, onUnmounted, openBlock, createBlock, resolveDynamicComponent, TransitionGroup, Transition, withCtx, renderSlot } from "vue";
+import { defineComponent, onMounted, onUnmounted, computed, openBlock, createBlock, resolveDynamicComponent, TransitionGroup, Transition, mergeProps, withCtx, renderSlot } from "vue";
 import { mountedStates } from "../../state/motion-state.mjs";
 import { provideAnimatePresence, removeDoneCallback, doneCallbacks } from "../presence.mjs";
 import { usePopLayout } from "./use-pop-layout.mjs";
+import { requestIdleCallback } from "./utils.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "AnimatePresence",
@@ -62,9 +63,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }
           if (!styles.has(state)) {
             state.willUpdate("done");
+          } else {
+            requestIdleCallback(() => {
+              removePopStyle(state);
+            });
           }
           done();
-          removePopStyle(state);
           if (!(el == null ? void 0 : el.isConnected)) {
             state.unmount(true);
           }
@@ -74,19 +78,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       el.addEventListener("motioncomplete", doneCallback);
       state.setActive("exit", true);
     }
+    const transitionProps = computed(() => {
+      if (props.multiple) {
+        return {
+          tag: props.as
+        };
+      }
+      return {
+        mode: props.mode === "wait" ? "out-in" : void 0
+      };
+    });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(resolveDynamicComponent(_ctx.multiple ? TransitionGroup : Transition), {
-        tag: _ctx.multiple ? _ctx.as : void 0,
-        css: false,
-        mode: _ctx.mode === "wait" ? "out-in" : void 0,
+      return openBlock(), createBlock(resolveDynamicComponent(_ctx.multiple ? TransitionGroup : Transition), mergeProps({ css: false }, transitionProps.value, {
         onEnter: enter,
         onLeave: exit
-      }, {
+      }), {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default")
         ]),
         _: 3
-      }, 40, ["tag", "mode"]);
+      }, 16);
     };
   }
 });

package/dist/es/components/animate-presence/utils.mjs

@@ -0,0 +1,10 @@
+function requestIdleCallback(callback) {
+  if (typeof requestIdleCallback !== "undefined") {
+    requestIdleCallback(callback);
+  } else {
+    setTimeout(callback, 50);
+  }
+}
+export {
+  requestIdleCallback
+};