motion-v 0.5.2-beta.1 → 0.6.1

package/dist/src/components/hooks/use-motion-elm.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Get the actual motion element, skipping text and comment nodes
+ * @param el - The HTML element to check
+ * @returns The first non-text/comment element
+ */
+export declare function getMotionElement(el: HTMLElement): HTMLElement;
+/**
+ * Hook to get the motion element of current component instance
+ * @returns Function that returns the motion element
+ */
+export declare function useMotionElm(): {
+    value: HTMLElement | null;
+};

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

@@ -0,0 +1,2 @@
+export * from './animate-presence';
+export * from './motion-config';

package/dist/src/components/motion-config/MotionConfig.d.ts

@@ -6,34 +6,13 @@ declare function __VLS_template(): {
     attrs: Partial<{}>;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<import('./types').MotionConfigState>, {
+declare const __VLS_component: import('vue').DefineComponent<import('./types').MotionConfigState, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('./types').MotionConfigState> & Readonly<{}>, {
     reduceMotion: "user" | "never" | "always";
-}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<import('./types').MotionConfigState>, {
-    reduceMotion: "user" | "never" | "always";
-}>>>, {
-    reduceMotion: "user" | "never" | "always";
-}, {}>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
     };
 };
-type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
-} & {};

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

@@ -1,9 +1,7 @@
-import { Ref } from 'vue';
-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 const doneCallbacks: WeakMap<Element, (v?: any, safeUnmount?: boolean) => void>;
 export declare function removeDoneCallback(element: Element): void;
 export interface PresenceContext {
-    initial: Ref<boolean>;
-    safeUnmount: (el: Element) => boolean;
+    initial?: boolean;
+    custom?: any;
 }
 export declare const injectAnimatePresence: <T extends PresenceContext = PresenceContext>(fallback?: T) => T extends null ? PresenceContext : PresenceContext, provideAnimatePresence: (contextValue: PresenceContext) => PresenceContext;

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

@@ -1 +1,8 @@
+import { ComponentPublicInstance } from 'vue';
 export declare function getMotionElement(el: HTMLElement): HTMLElement;
+/**
+ * 检查是否是隐藏的 motion 元素
+ * @param instance
+ * @returns
+ */
+export declare function checkMotionIsHidden(instance: ComponentPublicInstance): boolean;

package/dist/src/features/gestures/base.d.ts

@@ -1,5 +1,4 @@
 import { Feature } from '../feature';
-import { MotionEventNames } from '../../types';
 export declare abstract class BaseGesture extends Feature {
     abstract isActive(): boolean;
     removeGestureSubscriptions?: VoidFunction;
@@ -7,4 +6,3 @@ export declare abstract class BaseGesture extends Feature {
     protected updateGestureSubscriptions(): void;
     unmount(): void;
 }
-export declare function createGestureEvent(element: HTMLElement, name: MotionEventNames, action: VoidFunction): (event: PointerEvent) => void;

package/dist/src/index.d.ts

@@ -1,12 +1,10 @@
 export * from 'framer-motion/dom';
 export { motionValue as useMotionValue } from 'framer-motion/dom';
 export { default as Motion, type MotionProps } from './components/Motion';
-export { default as AnimatePresence } from './components/AnimatePresence';
-export type { AnimatePresenceProps } from './components/type';
+export * from './components';
 export { default as LayoutGroup } from './components/LayoutGroup';
 export { useLayoutGroup } from './components/use-layout-group';
 export type { LayoutGroupProps } from './components/use-layout-group';
-export * from './components/motion-config';
 export * from './components/context';
 export * from './value';
 export * from './constants';

package/dist/src/state/animate-variants-children.d.ts

@@ -6,7 +6,7 @@ export type ActiveVariant = {
         transition: AnimateOptions;
     };
 };
-export declare function animateVariantsChildren(state: MotionState, activeState: ActiveVariant): {
+export declare function animateVariantsChildren(state: MotionState, activeState: ActiveVariant, isFirstAnimate?: boolean): {
     animations: any[];
     getAnimations: () => Promise<void>;
 } | {

package/dist/src/state/event.d.ts

@@ -1,5 +1,5 @@
 import { Variant } from '../types';
-export type MotionEventNames = 'motionstart' | 'motioncomplete' | 'hoverstart' | 'hoverend' | 'pressstart' | 'pressend' | 'viewenter' | 'viewleave';
+export type MotionEventNames = 'motionstart' | 'motioncomplete';
 export declare function motionEvent(name: MotionEventNames, target: Variant, isExit?: boolean): CustomEvent<{
     target: Variant;
     isExit: boolean;

package/dist/src/state/motion-state.d.ts

@@ -8,7 +8,9 @@ export declare class MotionState {
     element: HTMLElement | null;
     private parent?;
     options: Options;
-    private isFirstAnimate;
+    isSafeToRemove: boolean;
+    isVShow: boolean;
+    private children?;
     activeStates: Partial<Record<StateType, boolean>>;
     depth: number;
     baseTarget: DOMKeyframesDefinition;
@@ -22,14 +24,15 @@ export declare class MotionState {
     get initial(): string | boolean | import('../types').Variant;
     updateOptions(): void;
     beforeMount(): void;
-    mount(element: HTMLElement, options: Options): void;
+    mount(element: HTMLElement, options: Options, notAnimate?: boolean): void;
     beforeUnmount(): void;
-    unmount(): void;
+    unmount(unMountChildren?: boolean): void;
     beforeUpdate(): void;
-    update(options: Options): void;
-    setActive(name: StateType, isActive: boolean): void;
-    animateUpdates(): Generator<any, void, unknown>;
+    update(options: Options, notAnimate?: boolean): void;
+    setActive(name: StateType, isActive: boolean, isAnimate?: boolean): void;
+    animateUpdates(isInitial?: boolean): void;
     isMounted(): boolean;
     getOptions(): Options<any>;
+    willUpdate(label: string): void;
 }
 export {};

package/dist/src/state/utils.d.ts

@@ -1,12 +1,12 @@
 import { Options } from '../types';
-import { DynamicAnimationOptions, Variant } from 'framer-motion';
+import { AnimationOptions, Variant } from 'framer-motion';
 import { IntrinsicElementAttributes } from 'vue';
 export declare function resolveVariant(definition?: Options['initial'], variants?: Options['variants'], custom?: Options['custom']): Variant | undefined;
 export declare function hasChanged(a: any, b: any): boolean;
 export declare function shallowCompare(next: any[], prev: any[]): boolean;
 export declare function addUniqueItem<T>(array: T[], item: T): void;
 export declare function removeItem<T>(array: T[], item: T): void;
-export declare function getOptions(options: DynamicAnimationOptions, key: string): DynamicAnimationOptions;
+export declare function getOptions(options: AnimationOptions, key: string): AnimationOptions;
 export declare function isCssVar(name: string): boolean;
 export declare const noopReturn: <V>(v: V) => V;
 export declare function isNumber(value: any): boolean;

package/dist/src/types/index.d.ts

@@ -2,4 +2,3 @@ export * from './transform';
 export * from './framer-motion';
 export * from './motion-values';
 export * from './state';
-export type MotionEventNames = 'motionstart' | 'motioncomplete' | 'hoverstart' | 'hoverend' | 'pressstart' | 'pressend' | 'viewenter' | 'viewleave' | 'dragstart' | 'dragend' | 'dragcancel' | 'dragmove' | 'drag';

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

@@ -1,7 +1,6 @@
-import { DOMKeyframesDefinition, DynamicAnimationOptions, Target, TargetAndTransition } from 'framer-motion';
-import { MotionValue, animate } from 'framer-motion/dom';
+import { AnimationOptions, DOMKeyframesDefinition, ResolvedValues, Target, TargetAndTransition } from 'framer-motion';
+import { MotionValue, TransformProperties, animate } from 'framer-motion/dom';
 import { IntrinsicElementAttributes } from 'vue';
-import { TransformProperties } from './transform';
 import { LayoutOptions } from '../features/layout/types';
 import { DragProps } from '../features/gestures/drag/types';
 import { PressProps } from '../features/gestures/press/types';
@@ -18,7 +17,7 @@ export interface Orchestration {
     staggerChildren?: number;
     staggerDirection?: number;
 }
-export interface AnimateOptions extends Omit<Orchestration, 'delay'>, DynamicAnimationOptions {
+export interface AnimateOptions extends Omit<Orchestration, 'delay'>, AnimationOptions {
 }
 export type TargetResolver = (custom: any, current: Target, velocity: Target) => TargetAndTransition | string;
 export interface Variant extends DOMKeyframesDefinition {
@@ -50,9 +49,13 @@ export interface Options<T = any> extends LayoutOptions, PressProps, HoverProps,
     };
     style?: MotionStyle;
     transformTemplate?: (transform: TransformProperties, generatedTransform: string) => string;
-    transition?: AnimateOptions;
+    transition?: AnimateOptions & {
+        layout?: AnimationOptions;
+    };
     layoutGroup?: LayoutGroupState;
     motionConfig?: MotionConfigState;
+    onAnimationComplete?: (definition: AnimateOptions) => void;
+    onUpdate?: (latest: ResolvedValues) => void;
 }
 export interface MotionStateContext {
     initial?: string;

package/dist/src/types/transform.d.ts

@@ -1,28 +1,4 @@
 import { EasingFunction } from 'framer-motion';
-export interface TransformProperties {
-    x?: string | number;
-    y?: string | number;
-    z?: string | number;
-    translateX?: string | number;
-    translateY?: string | number;
-    translateZ?: string | number;
-    rotate?: string | number;
-    rotateX?: string | number;
-    rotateY?: string | number;
-    rotateZ?: string | number;
-    scale?: string | number;
-    scaleX?: string | number;
-    scaleY?: string | number;
-    scaleZ?: string | number;
-    skew?: string | number;
-    skewX?: string | number;
-    skewY?: string | number;
-    originX?: string | number;
-    originY?: string | number;
-    originZ?: string | number;
-    perspective?: string | number;
-    transformPerspective?: string | number;
-}
 export interface TransformOptions<T> {
     /**
      * Clamp values to within the given range. Defaults to `true`

package/dist/src/utils/use-dom-ref.d.ts

@@ -1 +1,2 @@
-export declare function useDomRef<T extends Element = any>(): import('vue').Ref<import('vue').UnwrapRef<T>>;
+import { Ref } from 'vue';
+export declare function useDomRef<T extends Element = any>(): Ref<T>;

package/dist/src/utils/use-in-view.d.ts

@@ -1,3 +1,3 @@
 import { Ref } from 'vue';
 import { Options } from '../types/state';
-export declare function useInView<T extends Element = any>(domRef: Ref<T>, options?: Options['inViewOptions'] | Ref<Options['inViewOptions']>): Ref<boolean>;
+export declare function useInView<T extends Element = any>(domRef: Ref<T>, options?: Options['inViewOptions'] | Ref<Options['inViewOptions']>): Ref<boolean, boolean>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motion-v",
-  "version": "0.5.2-beta.1",
+  "version": "0.6.1",
   "description": "",
   "author": "",
   "license": "MIT",
@@ -51,11 +51,14 @@
     "./LICENSE",
     "./dist"
   ],
+  "peerDependencies": {
+    "vue": ">=3.0.0"
+  },
   "dependencies": {
     "@vueuse/core": "^12.0.0",
-    "framer-motion": "11.15.0",
+    "framer-motion": "11.16.6",
     "hey-listen": "^1.0.8",
-    "motion-dom": "^11.14.3"
+    "motion-dom": "^11.16.4"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.1.4",
@@ -63,15 +66,17 @@
     "@vitest/coverage-v8": "^1.4.0",
     "@vue/test-utils": "^2.4.5",
     "framer-motion": "^11.15.0",
+    "happy-dom": "^16.0.1",
     "jsdom": "^24.0.0",
     "vite": "^5.4.8",
     "vite-plugin-dts": "^4.2.4",
-    "vitest": "^1.4.0"
+    "vitest": "^1.4.0",
+    "vue": "3.4.38"
   },
   "scripts": {
     "dev": "vite build --watch",
     "build": "rm -rf dist && vite build",
-    "test": "vitest",
+    "test": "vitest --dom",
     "coverage": "vitest run --coverage",
     "pub:release": "pnpm publish --access public"
   }

package/dist/es/external/.pnpm/framer-motion@11.15.0/external/framer-motion/dist/es/animation/animators/waapi/utils/memo-supports.mjs

@@ -1,12 +0,0 @@
-import { memo } from "../../../../utils/memo.mjs";
-import { supportsFlags } from "./supports-flags.mjs";
-function memoSupports(callback, supportsFlag) {
-  const memoized = memo(callback);
-  return () => {
-    var _a;
-    return (_a = supportsFlags[supportsFlag]) !== null && _a !== void 0 ? _a : memoized();
-  };
-}
-export {
-  memoSupports
-};

package/dist/es/external/.pnpm/framer-motion@11.15.0/external/framer-motion/dist/es/animation/animators/waapi/utils/supports-waapi.mjs

@@ -1,5 +0,0 @@
-import { memo } from "../../../../utils/memo.mjs";
-const supportsWaapi = /* @__PURE__ */ memo(() => Object.hasOwnProperty.call(Element.prototype, "animate"));
-export {
-  supportsWaapi
-};

package/dist/es/external/.pnpm/framer-motion@11.15.0/external/framer-motion/dist/es/easing/utils/create-generator-easing.mjs

@@ -1,14 +0,0 @@
-import { calcGeneratorDuration, maxGeneratorDuration } from "../../animation/generators/utils/calc-duration.mjs";
-import { millisecondsToSeconds } from "../../utils/time-conversion.mjs";
-function createGeneratorEasing(options, scale = 100, createGenerator) {
-  const generator = createGenerator({ ...options, keyframes: [0, scale] });
-  const duration = Math.min(calcGeneratorDuration(generator), maxGeneratorDuration);
-  return {
-    type: "keyframes",
-    ease: (progress) => generator.next(duration * progress).value / scale,
-    duration: millisecondsToSeconds(duration)
-  };
-}
-export {
-  createGeneratorEasing
-};

package/dist/es/external/.pnpm/framer-motion@11.15.0/external/framer-motion/dist/es/render/dom/scroll/supports.mjs

@@ -1,5 +0,0 @@
-import { memo } from "../../../utils/memo.mjs";
-const supportsScrollTimeline = memo(() => window.ScrollTimeline !== void 0);
-export {
-  supportsScrollTimeline
-};

package/dist/es/state/schedule.mjs

@@ -1,30 +0,0 @@
-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.depth - b.depth;
-}
-export {
-  scheduleAnimation,
-  unscheduleAnimation
-};

package/dist/src/animation/animation-controls.d.ts

@@ -1,7 +0,0 @@
-import { AnimationDefinition, VisualElement } from 'framer-motion';
-import { AnimationControls } from './types';
-export declare function setValues(visualElement: VisualElement, definition: AnimationDefinition): void;
-/**
- * @public
- */
-export declare function animationControls(): AnimationControls;

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

@@ -1,46 +0,0 @@
-import { AnimatePresenceProps } from './type';
-declare function __VLS_template(): {
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {};
-    attrs: Partial<{}>;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<AnimatePresenceProps>, {
-    mode: string;
-    initial: boolean;
-    multiple: boolean;
-}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<AnimatePresenceProps>, {
-    mode: string;
-    initial: boolean;
-    multiple: boolean;
-}>>>, {
-    initial: boolean;
-    mode: "wait" | "popLayout" | "sync";
-    multiple: boolean;
-}, {}>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
-type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
-} & {};

package/dist/src/state/schedule.d.ts

@@ -1,3 +0,0 @@
-import { MotionState } from './motion-state';
-export declare function scheduleAnimation(state: MotionState): void;
-export declare function unscheduleAnimation(state: MotionState): void;

package/dist/es/external/.pnpm/{framer-motion@11.15.0 → framer-motion@11.16.6}/external/framer-motion/dist/es/animation/animate/single-value.mjs

@@ -1,6 +1,6 @@
-import { animateMotionValue } from "../interfaces/motion-value.mjs";
 import { motionValue } from "../../value/index.mjs";
 import { isMotionValue } from "../../value/utils/is-motion-value.mjs";
+import { animateMotionValue } from "../interfaces/motion-value.mjs";
 function animateSingleValue(value, keyframes, options) {
   const motionValue$1 = isMotionValue(value) ? value : motionValue(value);
   motionValue$1.start(animateMotionValue("", motionValue$1, keyframes, options));