motion-v 0.11.3 → 0.12.0-beta.2

package/dist/es/components/reorder/index.mjs

@@ -3,8 +3,8 @@ import _sfc_main$1 from "./Item.vue.mjs";
 const ReorderGroup = _sfc_main;
 const ReorderItem = _sfc_main$1;
 const Reorder = {
-  Group: ReorderGroup,
-  Item: ReorderItem
+  Group: _sfc_main,
+  Item: _sfc_main$1
 };
 export {
   Reorder,

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

@@ -1,4 +1,3 @@
-import { SVGFeature } from "./svg.mjs";
 import { LayoutFeature } from "./layout/layout.mjs";
 import { PanGesture } from "./gestures/pan/index.mjs";
 import { AnimationFeature } from "./animation/animation.mjs";
@@ -15,7 +14,6 @@ class FeatureManager {
       new HoverGesture(state),
       new PressGesture(state),
       new InViewGesture(state),
-      new SVGFeature(state),
       new LayoutFeature(state),
       new ProjectionFeature(state),
       new PanGesture(state),

package/dist/es/features/gestures/types.d.ts

@@ -1,4 +1,5 @@
 import { Options } from '../../types';
+import { InertiaOptions } from 'framer-motion';
 export interface StateHandlers {
     enable: VoidFunction;
     disable: VoidFunction;
@@ -17,8 +18,5 @@ export interface DragOptions {
     dragSnapToOrigin?: boolean;
     dragElastic?: number;
     dragMomentum?: boolean;
-    dragTransition?: {
-        power?: number;
-        timeConstant?: number;
-    };
+    dragTransition?: InertiaOptions;
 }

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

@@ -1,6 +1,5 @@
 export * from './feature';
 export * from './gestures';
-export * from './svg';
 export * from './layout/layout';
 export * from './gestures/pan';
 export * from './feature-manager';

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

@@ -45,16 +45,12 @@ class LayoutFeature extends Feature {
     }
   }
   unmount() {
-    var _a, _b;
     const layoutGroup = this.state.options.layoutGroup;
     const projection = this.state.visualElement.projection;
     if (projection) {
       if (layoutGroup == null ? void 0 : layoutGroup.group) {
         layoutGroup.group.remove(projection);
       }
-      if ((_b = (_a = projection.getStack()) == null ? void 0 : _a.lead) == null ? void 0 : _b.animationProgress) {
-        return;
-      }
       this.didUpdate();
     }
   }

package/dist/es/state/animate-updates.mjs

@@ -1,4 +1,4 @@
-import { resolveVariant, getOptions, hasChanged } from "./utils.mjs";
+import { resolveVariant, hasChanged } from "./utils.mjs";
 import { style } from "./style.mjs";
 import { transformResetValue } from "./transform.mjs";
 import { motionEvent } from "./event.mjs";
@@ -23,9 +23,9 @@ function animateUpdates({
   if (directAnimate)
     animationOptions = resolveDirectAnimation.call(this, directAnimate, directTransition, animationOptions);
   else
-    animationOptions = resolveStateAnimation.call(this, controlActiveState, transition);
+    animationOptions = resolveStateAnimation.call(this, controlActiveState);
   const factories = createAnimationFactories.call(this, prevTarget, animationOptions, controlDelay);
-  const { getChildAnimations, childAnimations } = setupChildAnimations.call(this, transition, this.activeStates, isFallback);
+  const { getChildAnimations, childAnimations } = setupChildAnimations.call(this, animationOptions, this.activeStates, isFallback);
   return executeAnimations.call(this, {
     factories,
     getChildAnimations,
@@ -39,21 +39,18 @@ function resolveDirectAnimation(directAnimate, directTransition) {
   const variant = resolveVariant(directAnimate, this.options.variants, this.options.custom);
   if (!variant)
     return {};
-  const transition = { ...this.options.transition, ...directTransition || variant.transition };
-  const animationOptions = {};
+  const transition = variant.transition || directTransition || this.options.transition || {};
   Object.entries(variant).forEach(([key, value]) => {
     if (key === "transition")
       return;
     this.target[key] = value;
-    animationOptions[key] = getOptions(transition, key);
   });
-  return animationOptions;
+  return transition;
 }
-function resolveStateAnimation(controlActiveState, transition) {
+function resolveStateAnimation(controlActiveState) {
   if (controlActiveState)
     this.activeStates = { ...this.activeStates, ...controlActiveState };
-  const transitionOptions = {};
-  let variantTransition = {};
+  let variantTransition = this.options.transition;
   let variant = {};
   STATE_TYPES.forEach((name) => {
     if (!this.activeStates[name] || isAnimationControls(this.options[name]))
@@ -67,17 +64,15 @@ function resolveStateAnimation(controlActiveState, transition) {
     if (!resolvedVariant)
       return;
     if (name !== "initial")
-      variantTransition = resolvedVariant.transition || this.options.transition;
+      variantTransition = resolvedVariant.transition || this.options.transition || {};
     variant = Object.assign(variant, resolvedVariant);
   });
-  Object.assign(transition, variantTransition);
   Object.entries(variant).forEach(([key, value]) => {
     if (key === "transition")
       return;
     this.target[key] = value;
-    transitionOptions[key] = getOptions(transition, key);
   });
-  return transitionOptions;
+  return variantTransition;
 }
 function createAnimationFactories(prevTarget, animationOptions, controlDelay) {
   const factories = [];
@@ -86,16 +81,18 @@ function createAnimationFactories(prevTarget, animationOptions, controlDelay) {
     if (!hasChanged(prevTarget[key], this.target[key]))
       return;
     (_a = this.baseTarget)[key] ?? (_a[key] = style.get(this.element, key));
-    const keyValue = this.target[key] === "none" ? transformResetValue[key] : this.target[key];
-    const targetTransition = animationOptions[key];
-    factories.push(() => animate(
-      this.element,
-      { [key]: keyValue },
-      {
-        ...targetTransition,
-        delay: ((targetTransition == null ? void 0 : targetTransition.delay) || 0) + controlDelay
-      }
-    ));
+    const keyValue = this.target[key] === "none" && isDef(transformResetValue[key]) ? transformResetValue[key] : this.target[key];
+    factories.push(() => {
+      var _a2;
+      return animate(
+        this.element,
+        { [key]: keyValue },
+        {
+          ...animationOptions,
+          delay: (((_a2 = animationOptions == null ? void 0 : animationOptions[key]) == null ? void 0 : _a2.delay) || (animationOptions == null ? void 0 : animationOptions.delay) || 0) + controlDelay
+        }
+      );
+    });
   });
   return factories;
 }

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

@@ -112,6 +112,9 @@ class MotionState {
     this.updateOptions();
     this.featureManager.mount();
     if (!notAnimate && this.options.animate) {
+      if (this.visualElement.type === "svg") {
+        this.visualElement.updateDimensions();
+      }
       this.startAnimation();
     }
     if (this.options.layoutId) {

package/dist/es/state/utils.mjs

@@ -28,9 +28,6 @@ function shallowCompare(next, prev) {
   }
   return true;
 }
-function getOptions(options, key) {
-  return options[key] ? { ...options, ...options[key], [key]: void 0 } : { ...options };
-}
 function isCssVar(name) {
   return name == null ? void 0 : name.startsWith("--");
 }
@@ -124,7 +121,6 @@ function isAnimateChanged(oldOptions, newOptions) {
   return oldAnimate !== newAnimate;
 }
 export {
-  getOptions,
   hasChanged,
   isAnimateChanged,
   isCssVar,

package/dist/es/types/state.d.ts

@@ -16,6 +16,9 @@ type AnimationPlaybackControls = ReturnType<typeof animate>;
 export type TargetResolver = (custom: any, current: Target, velocity: Target) => TargetAndTransition | string;
 export interface Variant extends DOMKeyframesDefinition {
     transition?: $Transition;
+    attrX?: DOMKeyframesDefinition['x'];
+    attrY?: DOMKeyframesDefinition['y'];
+    attrScale?: DOMKeyframesDefinition['scale'];
 }
 /**
  * Either a string, or array of strings, that reference variants defined via the `variants` prop.
@@ -34,7 +37,7 @@ export interface DragOptions {
 }
 type TransformPropertiesWithoutTransition = Omit<TransformProperties, 'transition'>;
 export type MotionStyle = Partial<{
-    [K in keyof (Variant & TransformPropertiesWithoutTransition)]: string | number | undefined | MotionValue;
+    [K in keyof Omit<Variant & TransformPropertiesWithoutTransition, 'attrX' | 'attrY' | 'attrScale'>]: string | number | undefined | MotionValue;
 }>;
 export type ElementType = keyof IntrinsicElementAttributes;
 export interface Options<T = any> extends LayoutOptions, PressProps, HoverProps, InViewProps, DragProps, PanProps, FocusProps {

package/dist/es/value/use-spring.d.ts

@@ -1,4 +1,4 @@
-import { ComputedRef, Ref } from 'vue';
+import { Ref } from 'vue';
 import { MotionValue } from 'framer-motion/dom';
 import { SpringOptions } from 'framer-motion';
-export declare function useSpring(source: MotionValue<string> | MotionValue<number> | number, config?: SpringOptions | ComputedRef<SpringOptions> | Ref<SpringOptions>): MotionValue<number>;
+export declare function useSpring(source: MotionValue<string> | MotionValue<number> | number, config?: SpringOptions | Ref<SpringOptions>): MotionValue<number>;

package/dist/es/value/use-transform.d.ts

@@ -1,5 +1,6 @@
 import { TransformOptions } from '../types';
 import { MotionValue } from 'framer-motion/dom';
+import { MaybeRef } from 'vue';
 type InputRange = number[];
 type SingleTransformer<I, O> = (input: I) => O;
 type MultiTransformer<I, O> = (input: I[]) => O;
@@ -51,7 +52,7 @@ type MultiTransformer<I, O> = (input: I[]) => O;
  *
  * @public
  */
-export declare function useTransform<I, O>(value: MotionValue<number>, inputRange: InputRange, outputRange: O[], options?: TransformOptions<O>): MotionValue<O>;
+export declare function useTransform<I, O>(value: MotionValue<number>, inputRange: InputRange | MaybeRef<InputRange>, outputRange: O[], options?: TransformOptions<O>): MotionValue<O>;
 export declare function useTransform<I, O>(transformer: () => O): MotionValue<O>;
 export declare function useTransform<I, O>(input: MotionValue<I>, transformer: SingleTransformer<I, O>): MotionValue<O>;
 export declare function useTransform<I, O>(input: MotionValue<string>[] | MotionValue<number>[] | MotionValue<string | number>[], transformer: MultiTransformer<I, O>): MotionValue<O>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motion-v",
-  "version": "0.11.3",
+  "version": "0.12.0-beta.2",
   "description": "",
   "author": "",
   "license": "MIT",

package/dist/es/features/svg.d.ts

@@ -1,5 +0,0 @@
-import { Feature } from './feature';
-export declare class SVGFeature extends Feature {
-    mount(): void;
-    unmount(): void;
-}

package/dist/es/features/svg.mjs

@@ -1,31 +0,0 @@
-import { Feature } from "./feature.mjs";
-import { frame } from "../external/.pnpm/framer-motion@12.4.10/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.element;
-    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
-};