motion-v 0.3.1-beta.1 → 0.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.js +1826 -47
- package/dist/es/components/LayoutGroup.vue.mjs +39 -0
- package/dist/es/components/LayoutGroup.vue2.mjs +4 -0
- package/dist/es/components/Motion.vue.mjs +22 -10
- package/dist/es/components/context.mjs +12 -1
- package/dist/es/components/group.mjs +30 -0
- package/dist/es/components/use-force-update.mjs +11 -0
- package/dist/es/constants/index.mjs +8 -2
- package/dist/es/external/.pnpm/@vueuse_shared@12.0.0_typescript@5.5.4/external/@vueuse/shared/index.mjs +6 -0
- package/dist/es/external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/events/add-dom-event.mjs +7 -0
- package/dist/es/external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/frameloop/microtask.mjs +6 -0
- package/dist/es/external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/projection/animation/mix-values.mjs +60 -0
- package/dist/es/external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/projection/geometry/copy.mjs +19 -0
- package/dist/es/external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/projection/geometry/delta-apply.mjs +81 -0
- package/dist/es/external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/projection/geometry/delta-calc.mjs +55 -0
- package/dist/es/external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/projection/geometry/delta-remove.mjs +40 -0
- package/dist/es/external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/projection/geometry/models.mjs +13 -1
- package/dist/es/external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/projection/geometry/utils.mjs +34 -0
- package/dist/es/external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/projection/node/DocumentProjectionNode.mjs +13 -0
- package/dist/es/external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/projection/node/HTMLProjectionNode.mjs +28 -0
- package/dist/es/external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/projection/node/create-projection-node.mjs +1086 -0
- package/dist/es/external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/projection/node/state.mjs +15 -0
- package/dist/es/external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/projection/shared/stack.mjs +94 -0
- package/dist/es/external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/projection/styles/scale-border-radius.mjs +26 -0
- package/dist/es/external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/projection/styles/scale-box-shadow.mjs +25 -0
- package/dist/es/external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/projection/styles/scale-correction.mjs +4 -0
- package/dist/es/external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/projection/styles/transform.mjs +36 -0
- package/dist/es/external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/projection/utils/each-axis.mjs +6 -0
- package/dist/es/external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/projection/utils/has-transform.mjs +20 -0
- package/dist/es/external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/render/utils/compare-by-depth.mjs +4 -0
- package/dist/es/external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/render/utils/flat-tree.mjs +24 -0
- package/dist/es/external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/utils/resolve-value.mjs +4 -0
- package/dist/es/external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/value/utils/resolve-motion-value.mjs +9 -0
- package/dist/es/features/events.mjs +2 -2
- package/dist/es/features/feature-manager.mjs +3 -1
- package/dist/es/features/gestures/hover.mjs +1 -1
- package/dist/es/features/gestures/in-view.mjs +1 -1
- package/dist/es/features/gestures/press.mjs +1 -1
- package/dist/es/features/layout/config.mjs +21 -0
- package/dist/es/features/layout/layout.mjs +74 -0
- package/dist/es/features/layout/utils.mjs +8 -0
- package/dist/es/features/svg.mjs +1 -1
- package/dist/es/index.mjs +17 -0
- package/dist/es/state/create-visual-element.mjs +9 -0
- package/dist/es/state/motion-state.mjs +24 -11
- package/dist/es/state/style.mjs +2 -2
- package/dist/es/state/transform.mjs +0 -1
- package/dist/es/value/use-motion-value-event.mjs +11 -0
- package/dist/es/value/use-velocity.mjs +20 -0
- package/dist/src/components/LayoutGroup.d.ts +30 -0
- package/dist/src/components/context.d.ts +17 -0
- package/dist/src/components/group.d.ts +7 -0
- package/dist/src/components/use-force-update.d.ts +2 -0
- package/dist/src/features/index.d.ts +1 -0
- package/dist/src/features/layout/config.d.ts +8 -0
- package/dist/src/features/layout/layout.d.ts +10 -0
- package/dist/src/features/layout/types.d.ts +7 -0
- package/dist/src/features/layout/utils.d.ts +4 -0
- package/dist/src/index.d.ts +2 -0
- package/dist/src/state/create-visual-element.d.ts +1 -0
- package/dist/src/state/motion-state.d.ts +1 -2
- package/dist/src/types/state.d.ts +2 -1
- package/dist/src/value/index.d.ts +4 -0
- package/package.json +1 -1
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { useMotionValueEvent } from "./use-motion-value-event.mjs";
|
|
2
|
+
import { motionValue } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/value/index.mjs";
|
|
3
|
+
import { frame } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/frameloop/frame.mjs";
|
|
4
|
+
function useVelocity(value) {
|
|
5
|
+
const velocity = motionValue(value.getVelocity());
|
|
6
|
+
const updateVelocity = () => {
|
|
7
|
+
const latest = value.getVelocity();
|
|
8
|
+
velocity.set(latest);
|
|
9
|
+
if (latest) {
|
|
10
|
+
frame.update(updateVelocity);
|
|
11
|
+
}
|
|
12
|
+
};
|
|
13
|
+
useMotionValueEvent(value, "change", () => {
|
|
14
|
+
frame.update(updateVelocity, false, true);
|
|
15
|
+
});
|
|
16
|
+
return velocity;
|
|
17
|
+
}
|
|
18
|
+
export {
|
|
19
|
+
useVelocity
|
|
20
|
+
};
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { InheritOption } from './context';
|
|
2
|
+
export interface LayoutGroupProps {
|
|
3
|
+
id?: string;
|
|
4
|
+
inherit?: InheritOption;
|
|
5
|
+
}
|
|
6
|
+
declare function __VLS_template(): {
|
|
7
|
+
slots: {
|
|
8
|
+
default?(_: {}): any;
|
|
9
|
+
};
|
|
10
|
+
refs: {};
|
|
11
|
+
attrs: Partial<{}>;
|
|
12
|
+
};
|
|
13
|
+
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
14
|
+
declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToOption<LayoutGroupProps>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToOption<LayoutGroupProps>>>, {}, {}>;
|
|
15
|
+
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
16
|
+
export default _default;
|
|
17
|
+
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
18
|
+
type __VLS_TypePropsToOption<T> = {
|
|
19
|
+
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
20
|
+
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
21
|
+
} : {
|
|
22
|
+
type: import('vue').PropType<T[K]>;
|
|
23
|
+
required: true;
|
|
24
|
+
};
|
|
25
|
+
};
|
|
26
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
27
|
+
new (): {
|
|
28
|
+
$slots: S;
|
|
29
|
+
};
|
|
30
|
+
};
|
|
@@ -1,2 +1,19 @@
|
|
|
1
1
|
import { MotionState } from '../state/motion-state';
|
|
2
|
+
import { IProjectionNode } from 'framer-motion';
|
|
3
|
+
import { Ref } from 'vue';
|
|
2
4
|
export declare const injectMotion: <T extends MotionState = MotionState>(fallback?: T) => T extends null ? MotionState : MotionState, provideMotion: (contextValue: MotionState) => MotionState;
|
|
5
|
+
export interface NodeGroup {
|
|
6
|
+
add: (node: IProjectionNode) => void;
|
|
7
|
+
remove: (node: IProjectionNode) => void;
|
|
8
|
+
dirty: VoidFunction;
|
|
9
|
+
}
|
|
10
|
+
export interface LayoutGroupState {
|
|
11
|
+
id?: string;
|
|
12
|
+
group?: NodeGroup;
|
|
13
|
+
forceRender?: VoidFunction;
|
|
14
|
+
key?: Ref<number>;
|
|
15
|
+
}
|
|
16
|
+
export declare const injectLayoutGroup: <T extends LayoutGroupState = LayoutGroupState>(fallback?: T) => T extends null ? LayoutGroupState : LayoutGroupState, provideLayoutGroup: (contextValue: LayoutGroupState) => LayoutGroupState;
|
|
17
|
+
export type InheritOption = boolean | 'id';
|
|
18
|
+
export declare function shouldInheritGroup(inherit: InheritOption): inherit is true;
|
|
19
|
+
export declare function shouldInheritId(inherit: InheritOption): boolean;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { Feature } from '../feature';
|
|
2
|
+
import { MotionState } from '../../state/motion-state';
|
|
3
|
+
import { LayoutGroupState } from '../../components/context';
|
|
4
|
+
export declare class LayoutFeature extends Feature {
|
|
5
|
+
layoutGroup: LayoutGroupState;
|
|
6
|
+
constructor(state: MotionState);
|
|
7
|
+
update(): void;
|
|
8
|
+
mount(): void;
|
|
9
|
+
unmount(): void;
|
|
10
|
+
}
|
package/dist/src/index.d.ts
CHANGED
|
@@ -2,6 +2,8 @@ export * from 'framer-motion/dom';
|
|
|
2
2
|
export { motionValue as useMotionValue } from 'framer-motion/dom';
|
|
3
3
|
export { default as Motion, type MotionProps } from './components/Motion';
|
|
4
4
|
export { default as AnimatePresence, type AnimatePresenceProps } from './components/AnimatePresence';
|
|
5
|
+
export { default as LayoutGroup, type LayoutGroupProps } from './components/LayoutGroup';
|
|
6
|
+
export * from './components/context';
|
|
5
7
|
export * from './value';
|
|
6
8
|
export * from './constants';
|
|
7
9
|
export type { Variant, Options } from './types';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function createVisualElement(Component: string, options: any): any;
|
|
@@ -4,7 +4,7 @@ declare const STATE_TYPES: readonly ["initial", "animate", "inView", "hover", "p
|
|
|
4
4
|
type StateType = typeof STATE_TYPES[number];
|
|
5
5
|
export declare const mountedStates: WeakMap<Element, MotionState>;
|
|
6
6
|
export declare class MotionState {
|
|
7
|
-
|
|
7
|
+
element: HTMLElement | null;
|
|
8
8
|
private parent?;
|
|
9
9
|
private options;
|
|
10
10
|
private activeStates;
|
|
@@ -26,7 +26,6 @@ export declare class MotionState {
|
|
|
26
26
|
isMounted(): boolean;
|
|
27
27
|
getDepth(): number;
|
|
28
28
|
getOptions(): Options<any>;
|
|
29
|
-
getElement(): HTMLElement;
|
|
30
29
|
getTarget(): DOMKeyframesDefinition;
|
|
31
30
|
}
|
|
32
31
|
export {};
|
|
@@ -2,6 +2,7 @@ import { DOMKeyframesDefinition, DynamicAnimationOptions } from 'framer-motion';
|
|
|
2
2
|
import { MotionValue, animate } from 'framer-motion/dom';
|
|
3
3
|
import { IntrinsicElementAttributes } from 'vue';
|
|
4
4
|
import { TransformProperties } from './transform';
|
|
5
|
+
import { LayoutOptions } from '../features/layout/types';
|
|
5
6
|
type AnimationPlaybackControls = ReturnType<typeof animate>;
|
|
6
7
|
export interface Variant extends DOMKeyframesDefinition {
|
|
7
8
|
transition?: DynamicAnimationOptions;
|
|
@@ -28,7 +29,7 @@ export type MotionStyle = Partial<{
|
|
|
28
29
|
[K in keyof Variant]: Variant[K] | MotionValue;
|
|
29
30
|
}>;
|
|
30
31
|
export type ElementType = keyof IntrinsicElementAttributes;
|
|
31
|
-
export interface Options<T = any> {
|
|
32
|
+
export interface Options<T = any> extends LayoutOptions {
|
|
32
33
|
custom?: T;
|
|
33
34
|
as?: ElementType;
|
|
34
35
|
inViewOptions?: InViewOptions & {
|
|
@@ -1,5 +1,9 @@
|
|
|
1
|
+
export * from './use-computed';
|
|
2
|
+
export * from './use-combine-values';
|
|
1
3
|
export * from './use-transform';
|
|
2
4
|
export * from './use-time';
|
|
3
5
|
export * from './use-motion-template';
|
|
6
|
+
export * from './use-motion-value-event';
|
|
4
7
|
export * from './use-spring';
|
|
5
8
|
export * from './use-scroll';
|
|
9
|
+
export * from './use-velocity';
|