motion-v 0.2.6 → 0.3.1-beta.1

package/dist/es/features/events.mjs

@@ -0,0 +1,69 @@
+import { Feature } from "./feature.mjs";
+class EventFeature extends Feature {
+  constructor() {
+    super(...arguments);
+    this.handlers = {};
+  }
+  mount() {
+    const element = this.state.getElement();
+    if (!element)
+      return;
+    this.handlers.motionstart = (event) => {
+      var _a, _b;
+      const target = event.detail.target;
+      (_b = (_a = this.state.getOptions()).onMotionStart) == null ? void 0 : _b.call(_a, target);
+    };
+    this.handlers.motioncomplete = (event) => {
+      var _a, _b;
+      const target = event.detail.target;
+      (_b = (_a = this.state.getOptions()).onMotionComplete) == null ? void 0 : _b.call(_a, target);
+    };
+    this.handlers.hoverstart = (event) => {
+      var _a, _b;
+      const e = event.detail;
+      (_b = (_a = this.state.getOptions()).onHoverStart) == null ? void 0 : _b.call(_a, e);
+    };
+    this.handlers.hoverend = (event) => {
+      var _a, _b;
+      const e = event.detail;
+      (_b = (_a = this.state.getOptions()).onHoverEnd) == null ? void 0 : _b.call(_a, e);
+    };
+    this.handlers.pressstart = (event) => {
+      var _a, _b;
+      const e = event.detail;
+      (_b = (_a = this.state.getOptions()).onPressStart) == null ? void 0 : _b.call(_a, e);
+    };
+    this.handlers.pressend = (event) => {
+      var _a, _b;
+      const e = event.detail;
+      (_b = (_a = this.state.getOptions()).onPressEnd) == null ? void 0 : _b.call(_a, e);
+    };
+    this.handlers.viewenter = (event) => {
+      var _a, _b;
+      const target = event.detail.target;
+      (_b = (_a = this.state.getOptions()).onViewEnter) == null ? void 0 : _b.call(_a, target);
+    };
+    this.handlers.viewleave = (event) => {
+      var _a, _b;
+      const target = event.detail.target;
+      (_b = (_a = this.state.getOptions()).onViewLeave) == null ? void 0 : _b.call(_a, target);
+    };
+    Object.entries(this.handlers).forEach(([event, handler]) => {
+      element.addEventListener(event, handler);
+    });
+  }
+  unmount() {
+    const element = this.state.getElement();
+    if (!element)
+      return;
+    Object.entries(this.handlers).forEach(([event, handler]) => {
+      if (handler) {
+        element.removeEventListener(event, handler);
+        delete this.handlers[event];
+      }
+    });
+  }
+}
+export {
+  EventFeature
+};

package/dist/es/features/feature-manager.mjs

@@ -0,0 +1,29 @@
+import { EventFeature } from "./events.mjs";
+import { SVGFeature } from "./svg.mjs";
+import { HoverGesture } from "./gestures/hover.mjs";
+import { PressGesture } from "./gestures/press.mjs";
+import { InViewGesture } from "./gestures/in-view.mjs";
+class FeatureManager {
+  constructor(state) {
+    this.features = [];
+    this.features = [
+      new HoverGesture(state),
+      new PressGesture(state),
+      new InViewGesture(state),
+      new SVGFeature(state),
+      new EventFeature(state)
+    ];
+  }
+  mount() {
+    this.features.forEach((feature) => feature.mount());
+  }
+  unmount() {
+    this.features.forEach((feature) => feature.unmount());
+  }
+  update() {
+    this.features.forEach((feature) => feature.update());
+  }
+}
+export {
+  FeatureManager
+};

package/dist/es/features/feature.mjs

@@ -0,0 +1,10 @@
+class Feature {
+  constructor(state) {
+    this.state = state;
+  }
+  update() {
+  }
+}
+export {
+  Feature
+};

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

@@ -0,0 +1,19 @@
+import { Feature } from "../feature.mjs";
+class BaseGesture extends Feature {
+  updateGestureSubscriptions() {
+    const isActive = this.isActive();
+    if (isActive && !this.removeGestureSubscriptions) {
+      this.removeGestureSubscriptions = this.subscribeEvents();
+    } else if (!isActive && this.removeGestureSubscriptions) {
+      this.removeGestureSubscriptions();
+      this.removeGestureSubscriptions = void 0;
+    }
+  }
+  unmount() {
+    var _a;
+    (_a = this.removeGestureSubscriptions) == null ? void 0 : _a.call(this);
+  }
+}
+export {
+  BaseGesture
+};

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

@@ -0,0 +1,42 @@
+import { dispatchPointerEvent } from "../../utils/events.mjs";
+import { BaseGesture } from "./base.mjs";
+function mouseEvent(element, name, action) {
+  return (event) => {
+    if (event.pointerType && event.pointerType !== "mouse")
+      return;
+    action();
+    dispatchPointerEvent(element, name, event);
+  };
+}
+class HoverGesture extends BaseGesture {
+  isActive() {
+    return Boolean(this.state.getOptions().hover);
+  }
+  constructor(state) {
+    super(state);
+    this.subscribeEvents = () => {
+      const element = this.state.getElement();
+      const onEnter = mouseEvent(element, "hoverstart", () => {
+        this.state.setActive("hover", true);
+      });
+      const onLeave = mouseEvent(element, "hoverend", () => {
+        this.state.setActive("hover", false);
+      });
+      element.addEventListener("pointerenter", onEnter);
+      element.addEventListener("pointerleave", onLeave);
+      return () => {
+        element.removeEventListener("pointerenter", onEnter);
+        element.removeEventListener("pointerleave", onLeave);
+      };
+    };
+  }
+  mount() {
+    this.updateGestureSubscriptions();
+  }
+  update() {
+    this.updateGestureSubscriptions();
+  }
+}
+export {
+  HoverGesture
+};

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

@@ -0,0 +1,35 @@
+import { dispatchPointerEvent } from "../../utils/events.mjs";
+import { inView } from "../../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/render/dom/viewport/index.mjs";
+import { BaseGesture } from "./base.mjs";
+class InViewGesture extends BaseGesture {
+  isActive() {
+    return Boolean(this.state.getOptions().inView);
+  }
+  constructor(state) {
+    super(state);
+    this.subscribeEvents = () => {
+      var _a;
+      const element = this.state.getElement();
+      const { once, ...viewOptions } = ((_a = this.state.getOptions()) == null ? void 0 : _a.inViewOptions) || {};
+      return inView(element, (enterEntry) => {
+        this.state.setActive("inView", true);
+        dispatchPointerEvent(element, "viewenter", enterEntry);
+        if (!once) {
+          return (leaveEntry) => {
+            this.state.setActive("inView", false);
+            dispatchPointerEvent(element, "viewleave", leaveEntry);
+          };
+        }
+      }, viewOptions);
+    };
+  }
+  mount() {
+    this.updateGestureSubscriptions();
+  }
+  update() {
+    this.updateGestureSubscriptions();
+  }
+}
+export {
+  InViewGesture
+};

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

@@ -0,0 +1,37 @@
+import { dispatchPointerEvent } from "../../utils/events.mjs";
+import { BaseGesture } from "./base.mjs";
+class PressGesture extends BaseGesture {
+  isActive() {
+    return Boolean(this.state.getOptions().press);
+  }
+  constructor(state) {
+    super(state);
+    this.subscribeEvents = () => {
+      const element = this.state.getElement();
+      const onPointerUp = (event) => {
+        this.state.setActive("press", false);
+        dispatchPointerEvent(element, "pressend", event);
+        window.removeEventListener("pointerup", onPointerUp);
+      };
+      const onPointerDown = (event) => {
+        this.state.setActive("press", true);
+        dispatchPointerEvent(element, "pressstart", event);
+        window.addEventListener("pointerup", onPointerUp);
+      };
+      element.addEventListener("pointerdown", onPointerDown);
+      return () => {
+        element.removeEventListener("pointerdown", onPointerDown);
+        window.removeEventListener("pointerup", onPointerUp);
+      };
+    };
+  }
+  mount() {
+    this.updateGestureSubscriptions();
+  }
+  update() {
+    this.updateGestureSubscriptions();
+  }
+}
+export {
+  PressGesture
+};

package/dist/es/features/svg.mjs

@@ -0,0 +1,31 @@
+import { Feature } from "./feature.mjs";
+import { frame } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/frameloop/frame.mjs";
+function isSVGElement(element) {
+  return element instanceof SVGElement && element.tagName !== "svg";
+}
+class SVGFeature extends Feature {
+  mount() {
+    const instance = this.state.getElement();
+    if (!isSVGElement(instance)) {
+      return;
+    }
+    const visualElement = this.state.visualElement;
+    frame.read(() => {
+      try {
+        visualElement.renderState.dimensions = typeof instance.getBBox === "function" ? instance.getBBox() : instance.getBoundingClientRect();
+      } catch (e) {
+        visualElement.renderState.dimensions = {
+          x: 0,
+          y: 0,
+          width: 0,
+          height: 0
+        };
+      }
+    });
+  }
+  unmount() {
+  }
+}
+export {
+  SVGFeature
+};

package/dist/es/index.mjs

@@ -0,0 +1,104 @@
+import { default as default2 } from "./components/Motion.vue.mjs";
+import { default as default3 } from "./components/AnimatePresence.vue.mjs";
+import { components, utilities } from "./constants/index.mjs";
+import { MotionValue, motionValue, motionValue as motionValue2 } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/value/index.mjs";
+import { animate, createScopedAnimate } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/animation/animate/index.mjs";
+import { animateMini } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/animation/animators/waapi/animate-style.mjs";
+import { scroll } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/render/dom/scroll/index.mjs";
+import { scrollInfo } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/render/dom/scroll/track.mjs";
+import { inView } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/render/dom/viewport/index.mjs";
+import { anticipate } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/easing/anticipate.mjs";
+import { backIn, backInOut, backOut } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/easing/back.mjs";
+import { circIn, circInOut, circOut } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/easing/circ.mjs";
+import { easeIn, easeInOut, easeOut } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/easing/ease.mjs";
+import { cubicBezier } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/easing/cubic-bezier.mjs";
+import { steps } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/easing/steps.mjs";
+import { mirrorEasing } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/easing/modifiers/mirror.mjs";
+import { reverseEasing } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/easing/modifiers/reverse.mjs";
+import { spring } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/animation/generators/spring/index.mjs";
+import { inertia } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/animation/generators/inertia.mjs";
+import { keyframes } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/animation/generators/keyframes.mjs";
+import { stagger } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/animation/utils/stagger.mjs";
+import { transform } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/utils/transform.mjs";
+import { clamp } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/utils/clamp.mjs";
+import { delayInSeconds } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/utils/delay.mjs";
+import { distance, distance2D } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/utils/distance.mjs";
+import { invariant, warning } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/utils/errors.mjs";
+import { interpolate } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/utils/interpolate.mjs";
+import { mix } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/utils/mix/index.mjs";
+import { pipe } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/utils/pipe.mjs";
+import { progress } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/utils/progress.mjs";
+import { wrap } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/utils/wrap.mjs";
+import { cancelSync, sync } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/frameloop/index-legacy.mjs";
+import { cancelFrame, frame, frameData, frameSteps } from "./external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/frameloop/frame.mjs";
+import { useTransform } from "./value/use-transform.mjs";
+import { useTime } from "./value/use-time.mjs";
+import { useMotionTemplate } from "./value/use-motion-template.mjs";
+import { useSpring } from "./value/use-spring.mjs";
+import { useScroll } from "./value/use-scroll.mjs";
+import { useAnimate } from "./animation/use-animate.mjs";
+import { createContext } from "./utils/createContext.mjs";
+import { isMotionValue } from "./utils/motion-value.mjs";
+import { useInView } from "./utils/use-in-view.mjs";
+import { useAnimationFrame } from "./utils/use-animation-frame.mjs";
+export {
+  default3 as AnimatePresence,
+  default2 as Motion,
+  MotionValue,
+  animate,
+  animateMini,
+  anticipate,
+  backIn,
+  backInOut,
+  backOut,
+  cancelFrame,
+  cancelSync,
+  circIn,
+  circInOut,
+  circOut,
+  clamp,
+  components,
+  createContext,
+  createScopedAnimate,
+  cubicBezier,
+  delayInSeconds as delay,
+  distance,
+  distance2D,
+  easeIn,
+  easeInOut,
+  easeOut,
+  frame,
+  frameData,
+  frameSteps,
+  inView,
+  inertia,
+  interpolate,
+  invariant,
+  isMotionValue,
+  keyframes,
+  mirrorEasing,
+  mix,
+  motionValue,
+  pipe,
+  progress,
+  reverseEasing,
+  scroll,
+  scrollInfo,
+  spring,
+  stagger,
+  steps,
+  sync,
+  transform,
+  useAnimate,
+  useAnimationFrame,
+  useInView,
+  useMotionTemplate,
+  motionValue2 as useMotionValue,
+  useScroll,
+  useSpring,
+  useTime,
+  useTransform,
+  utilities,
+  warning,
+  wrap
+};

package/dist/es/state/event.mjs

@@ -0,0 +1,6 @@
+function motionEvent(name, target, isExit) {
+  return new CustomEvent(name, { detail: { target, isExit } });
+}
+export {
+  motionEvent
+};

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

@@ -0,0 +1,175 @@
+import { invariant } from "../external/.pnpm/hey-listen@1.0.8/external/hey-listen/dist/hey-listen.es.mjs";
+import { visualElementStore } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/render/store.mjs";
+import { createDOMVisualElement } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/animation/utils/create-visual-element.mjs";
+import { isDef } from "@vueuse/core";
+import { resolveVariant, getOptions, hasChanged, noop } from "./utils.mjs";
+import { FeatureManager } from "../features/feature-manager.mjs";
+import { style } from "./style.mjs";
+import { transformResetValue } from "./transform.mjs";
+import { scheduleAnimation, unscheduleAnimation } from "./schedule.mjs";
+import { motionEvent } from "./event.mjs";
+import { animate } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/animation/animate/index.mjs";
+const STATE_TYPES = ["initial", "animate", "inView", "hover", "press", "exit", "drag"];
+const mountedStates = /* @__PURE__ */ new WeakMap();
+class MotionState {
+  constructor(options, parent) {
+    this.element = null;
+    this.activeStates = {
+      initial: true,
+      animate: true
+    };
+    this._context = null;
+    this.options = options;
+    this.parent = parent;
+    this.depth = (parent == null ? void 0 : parent.depth) + 1 || 0;
+    const initialVariantSource = options.initial === false ? "animate" : "initial";
+    this.featureManager = new FeatureManager(this);
+    this.initTarget(initialVariantSource);
+  }
+  get context() {
+    if (!this._context) {
+      const handler = {
+        get: (target, prop) => {
+          var _a;
+          return typeof this.options[prop] === "string" ? this.options[prop] : (_a = this.parent) == null ? void 0 : _a.context[prop];
+        }
+      };
+      this._context = new Proxy({}, handler);
+    }
+    return this._context;
+  }
+  initTarget(initialVariantSource) {
+    this.baseTarget = resolveVariant(this.options[initialVariantSource] || this.context[initialVariantSource], this.options.variants) || {};
+    this.target = { ...this.baseTarget };
+  }
+  get initial() {
+    return isDef(this.options.initial) ? this.options.initial : this.context.initial;
+  }
+  mount(element) {
+    var _a;
+    invariant(
+      Boolean(element),
+      "Animation state must be mounted with valid Element"
+    );
+    this.element = element;
+    mountedStates.set(element, this);
+    if (!visualElementStore.get(element)) {
+      createDOMVisualElement(element);
+    }
+    const visualElement = visualElementStore.get(element);
+    this.visualElement = visualElement;
+    visualElement.update(this.options, (_a = this.parent) == null ? void 0 : _a.context);
+    if (typeof this.initial === "object") {
+      for (const key in this.initial) {
+        visualElement.setStaticValue(key, this.initial[key]);
+      }
+    } else if (typeof this.initial === "string" && this.options.variants) {
+      for (const key in this.options.variants[this.initial]) {
+        visualElement.setStaticValue(key, this.options.variants[this.initial][key]);
+      }
+    }
+    this.featureManager.mount();
+  }
+  unmount() {
+    var _a;
+    mountedStates.delete(this.element);
+    unscheduleAnimation(this);
+    (_a = visualElementStore.get(this.element)) == null ? void 0 : _a.unmount();
+    this.featureManager.unmount();
+  }
+  update(options) {
+    var _a;
+    this.options = options;
+    this.visualElement.update(this.options, (_a = this.parent) == null ? void 0 : _a.context);
+    this.featureManager.update();
+    scheduleAnimation(this);
+  }
+  setActive(name, isActive) {
+    if (!this.element)
+      return;
+    this.activeStates[name] = isActive;
+    scheduleAnimation(this);
+  }
+  *animateUpdates() {
+    const prevTarget = this.target;
+    this.target = {};
+    const animationOptions = {};
+    for (const name of STATE_TYPES) {
+      if (!this.activeStates[name])
+        continue;
+      const variant = resolveVariant(
+        isDef(this.options[name]) ? this.options[name] : this.context[name],
+        this.options.variants,
+        this.options.custom
+      );
+      if (!variant)
+        continue;
+      const allTarget = { ...prevTarget, ...variant };
+      for (const key in allTarget) {
+        if (key === "transition")
+          continue;
+        this.target[key] = variant[key];
+        animationOptions[key] = getOptions(
+          variant.transition ?? this.options.transition ?? {},
+          key
+        );
+      }
+    }
+    const allTargetKeys = /* @__PURE__ */ new Set([
+      ...Object.keys(this.target),
+      ...Object.keys(prevTarget)
+    ]);
+    const animationFactories = [];
+    allTargetKeys.forEach((key) => {
+      var _a;
+      if (this.target[key] === void 0) {
+        this.target[key] = this.baseTarget[key];
+      }
+      if (hasChanged(prevTarget[key], this.target[key])) {
+        (_a = this.baseTarget)[key] ?? (_a[key] = style.get(this.element, key));
+        animationFactories.push(
+          () => {
+            return animate(
+              this.element,
+              {
+                [key]: this.target[key] === "none" ? transformResetValue[key] : this.target[key]
+              },
+              animationOptions[key] || {}
+            );
+          }
+        );
+      }
+    });
+    yield;
+    const animations = animationFactories.map((factory) => factory()).filter(Boolean);
+    if (!animations.length)
+      return;
+    const animationTarget = this.target;
+    this.element.dispatchEvent(motionEvent("motionstart", animationTarget));
+    const isExit = this.activeStates.exit;
+    Promise.all(animations).then(() => {
+      this.element.dispatchEvent(motionEvent("motioncomplete", {
+        ...animationTarget
+      }, isExit));
+    }).catch(noop);
+  }
+  isMounted() {
+    return Boolean(this.element);
+  }
+  getDepth() {
+    return this.depth;
+  }
+  getOptions() {
+    return this.options;
+  }
+  getElement() {
+    return this.element;
+  }
+  getTarget() {
+    return this.target;
+  }
+}
+export {
+  MotionState,
+  mountedStates
+};

package/dist/es/state/schedule.mjs

@@ -0,0 +1,30 @@
+import { addUniqueItem, removeItem } from "./utils.mjs";
+let scheduled;
+const fireNext = (iterator) => iterator.next();
+const fireAnimateUpdates = (state) => state.animateUpdates();
+function processScheduledAnimations() {
+  if (!scheduled)
+    return;
+  const generators = scheduled.sort(compareByDepth).map(fireAnimateUpdates);
+  generators.forEach(fireNext);
+  generators.forEach(fireNext);
+  scheduled = void 0;
+}
+function scheduleAnimation(state) {
+  if (!scheduled) {
+    scheduled = [state];
+    requestAnimationFrame(processScheduledAnimations);
+  } else {
+    addUniqueItem(scheduled, state);
+  }
+}
+function unscheduleAnimation(state) {
+  scheduled && removeItem(scheduled, state);
+}
+function compareByDepth(a, b) {
+  return a.getDepth() - b.getDepth();
+}
+export {
+  scheduleAnimation,
+  unscheduleAnimation
+};