motion-v 0.3.0 → 0.4.0

package/dist/es/value/use-velocity.mjs

@@ -0,0 +1,20 @@
+import { useMotionValueEvent } from "./use-motion-value-event.mjs";
+import { motionValue } from "../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/value/index.mjs";
+import { frame } from "../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/frameloop/frame.mjs";
+function useVelocity(value) {
+  const velocity = motionValue(value.getVelocity());
+  const updateVelocity = () => {
+    const latest = value.getVelocity();
+    velocity.set(latest);
+    if (latest) {
+      frame.update(updateVelocity);
+    }
+  };
+  useMotionValueEvent(value, "change", () => {
+    frame.update(updateVelocity, false, true);
+  });
+  return velocity;
+}
+export {
+  useVelocity
+};

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

@@ -0,0 +1,30 @@
+import { InheritOption } from './context';
+export interface LayoutGroupProps {
+    id?: string;
+    inherit?: InheritOption;
+}
+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_TypePropsToOption<LayoutGroupProps>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToOption<LayoutGroupProps>>>, {}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+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;
+    };
+};

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

@@ -1,2 +1,19 @@
 import { MotionState } from '../state/motion-state';
+import { IProjectionNode } from 'framer-motion';
+import { Ref } from 'vue';
 export declare const injectMotion: <T extends MotionState = MotionState>(fallback?: T) => T extends null ? MotionState : MotionState, provideMotion: (contextValue: MotionState) => MotionState;
+export interface NodeGroup {
+    add: (node: IProjectionNode) => void;
+    remove: (node: IProjectionNode) => void;
+    dirty: VoidFunction;
+}
+export interface LayoutGroupState {
+    id?: string;
+    group?: NodeGroup;
+    forceRender?: VoidFunction;
+    key?: Ref<number>;
+}
+export declare const injectLayoutGroup: <T extends LayoutGroupState = LayoutGroupState>(fallback?: T) => T extends null ? LayoutGroupState : LayoutGroupState, provideLayoutGroup: (contextValue: LayoutGroupState) => LayoutGroupState;
+export type InheritOption = boolean | 'id';
+export declare function shouldInheritGroup(inherit: InheritOption): inherit is true;
+export declare function shouldInheritId(inherit: InheritOption): boolean;

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

@@ -0,0 +1,7 @@
+import { IProjectionNode } from 'framer-motion';
+export interface NodeGroup {
+    add: (node: IProjectionNode) => void;
+    remove: (node: IProjectionNode) => void;
+    dirty: VoidFunction;
+}
+export declare function nodeGroup(): NodeGroup;

package/dist/src/components/use-force-update.d.ts

@@ -0,0 +1,2 @@
+import { Ref } from 'vue';
+export declare function useForceUpdate(): [() => void, Ref<number>];

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

@@ -2,4 +2,5 @@ export * from './feature';
 export * from './events';
 export * from './gestures';
 export * from './svg';
+export * from './layout/layout';
 export * from './feature-manager';

package/dist/src/features/layout/config.d.ts

@@ -0,0 +1,8 @@
+export declare const defaultScaleCorrector: {
+    borderRadius: any;
+    borderTopLeftRadius: any;
+    borderTopRightRadius: any;
+    borderBottomLeftRadius: any;
+    borderBottomRightRadius: any;
+    boxShadow: any;
+};

package/dist/src/features/layout/layout.d.ts

@@ -0,0 +1,10 @@
+import { Feature } from '../feature';
+import { MotionState } from '../../state/motion-state';
+import { LayoutGroupState } from '../../components/context';
+export declare class LayoutFeature extends Feature {
+    layoutGroup: LayoutGroupState;
+    constructor(state: MotionState);
+    update(): void;
+    mount(): void;
+    unmount(): void;
+}

package/dist/src/features/layout/types.d.ts

@@ -0,0 +1,7 @@
+export interface LayoutOptions {
+    'layout'?: boolean;
+    'layoutId'?: string;
+    'layoutScroll'?: boolean;
+    'layoutRoot'?: boolean;
+    'data-framer-portal-id'?: string;
+}

package/dist/src/features/layout/utils.d.ts

@@ -0,0 +1,4 @@
+import { IProjectionNode, VisualElement } from 'framer-motion';
+export declare function getClosestProjectingNode(visualElement?: VisualElement<unknown, unknown, {
+    allowProjection?: boolean;
+}>): IProjectionNode | undefined;

package/dist/src/index.d.ts

@@ -2,6 +2,8 @@ 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, type AnimatePresenceProps } from './components/AnimatePresence';
+export { default as LayoutGroup, type LayoutGroupProps } from './components/LayoutGroup';
+export * from './components/context';
 export * from './value';
 export * from './constants';
 export type { Variant, Options } from './types';

package/dist/src/state/create-visual-element.d.ts

@@ -0,0 +1 @@
+export declare function createVisualElement(Component: string, options: any): any;

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

@@ -4,7 +4,7 @@ declare const STATE_TYPES: readonly ["initial", "animate", "inView", "hover", "p
 type StateType = typeof STATE_TYPES[number];
 export declare const mountedStates: WeakMap<Element, MotionState>;
 export declare class MotionState {
-    private element;
+    element: HTMLElement | null;
     private parent?;
     private options;
     private activeStates;
@@ -26,7 +26,6 @@ export declare class MotionState {
     isMounted(): boolean;
     getDepth(): number;
     getOptions(): Options<any>;
-    getElement(): HTMLElement;
     getTarget(): DOMKeyframesDefinition;
 }
 export {};

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

@@ -2,6 +2,7 @@ import { DOMKeyframesDefinition, DynamicAnimationOptions } from 'framer-motion';
 import { MotionValue, animate } from 'framer-motion/dom';
 import { IntrinsicElementAttributes } from 'vue';
 import { TransformProperties } from './transform';
+import { LayoutOptions } from '../features/layout/types';
 type AnimationPlaybackControls = ReturnType<typeof animate>;
 export interface Variant extends DOMKeyframesDefinition {
     transition?: DynamicAnimationOptions;
@@ -28,7 +29,7 @@ export type MotionStyle = Partial<{
     [K in keyof Variant]: Variant[K] | MotionValue;
 }>;
 export type ElementType = keyof IntrinsicElementAttributes;
-export interface Options<T = any> {
+export interface Options<T = any> extends LayoutOptions {
     custom?: T;
     as?: ElementType;
     inViewOptions?: InViewOptions & {

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

@@ -1,5 +1,9 @@
+export * from './use-computed';
+export * from './use-combine-values';
 export * from './use-transform';
 export * from './use-time';
 export * from './use-motion-template';
+export * from './use-motion-value-event';
 export * from './use-spring';
 export * from './use-scroll';
+export * from './use-velocity';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motion-v",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "",
   "author": "",
   "license": "MIT",
@@ -52,6 +52,7 @@
     "./dist"
   ],
   "dependencies": {
+    "@vueuse/core": "^12.0.0",
     "framer-motion": "11.11.11"
   },
   "devDependencies": {

package/dist/es/node_modules/.pnpm/@vueuse_shared@11.1.0_vue@3.4.38_typescript@5.5.4_/node_modules/@vueuse/shared/index.mjs

@@ -1,6 +0,0 @@
-import "vue";
-typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
-const n = (e) => typeof e < "u";
-export {
-  n as isDef
-};

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

@@ -1,5 +0,0 @@
-import { ComponentPublicInstance } from 'vue';
-export declare function usePrimitiveElement(): {
-    primitiveElement: import('vue').Ref<ComponentPublicInstance>;
-    currentElement: import('vue').ComputedRef<HTMLElement>;
-};