motion-v
Version:
<p align="center"> <img width="100" height="100" alt="Motion logo" src="https://user-images.githubusercontent.com/7850794/164965523-3eced4c4-6020-467e-acde-f11b7900ad62.png" /> </p> <h1 align="center">Motion for Vue</h1>
95 lines (94 loc) • 4.09 kB
TypeScript
import { MotionValue } from 'framer-motion/dom';
import { Options } from './state';
import { AriaAttributes, Events, IntrinsicElementAttributes, SVGAttributes } from 'vue';
import { ElementType } from './common';
type EventHandlers<E> = {
[K in keyof E]?: E[K] extends (...args: any) => any ? E[K] : (payload: E[K]) => void;
};
type EventKeys = keyof EventHandlers<Events>;
interface SVGAttributesWithoutMotionProps extends Pick<SVGAttributes, Exclude<keyof SVGAttributes, keyof Options | keyof AriaAttributes | EventKeys>> {
}
/**
* @public
*/
export interface CustomValueType {
mix: (from: any, to: any) => (p: number) => number | string;
toValue: () => number | string;
}
export type MakeCustomValueType<T> = {
[K in keyof T]: T[K] | CustomValueType;
};
export type MakeMotion<T> = MakeCustomValueType<{
[K in keyof T]: T[K] | MotionValue<number> | MotionValue<string> | MotionValue<any>;
}>;
/**
* Blanket-accept any SVG attribute as a `MotionValue`
* @public
*/
export type SVGAttributesAsMotionValues = MakeMotion<SVGAttributesWithoutMotionProps>;
export interface SVGAttributesWithMotionValues {
svg: SVGAttributesAsMotionValues;
animate: SVGAttributesAsMotionValues;
animateMotion: SVGAttributesAsMotionValues;
animateTransform: SVGAttributesAsMotionValues;
circle: SVGAttributesAsMotionValues;
clipPath: SVGAttributesAsMotionValues;
defs: SVGAttributesAsMotionValues;
desc: SVGAttributesAsMotionValues;
ellipse: SVGAttributesAsMotionValues;
feBlend: SVGAttributesAsMotionValues;
feColorMatrix: SVGAttributesAsMotionValues;
feComponentTransfer: SVGAttributesAsMotionValues;
feComposite: SVGAttributesAsMotionValues;
feConvolveMatrix: SVGAttributesAsMotionValues;
feDiffuseLighting: SVGAttributesAsMotionValues;
feDisplacementMap: SVGAttributesAsMotionValues;
feDistantLight: SVGAttributesAsMotionValues;
feDropShadow: SVGAttributesAsMotionValues;
feFlood: SVGAttributesAsMotionValues;
feFuncA: SVGAttributesAsMotionValues;
feFuncB: SVGAttributesAsMotionValues;
feFuncG: SVGAttributesAsMotionValues;
feFuncR: SVGAttributesAsMotionValues;
feGaussianBlur: SVGAttributesAsMotionValues;
feImage: SVGAttributesAsMotionValues;
feMerge: SVGAttributesAsMotionValues;
feMergeNode: SVGAttributesAsMotionValues;
feMorphology: SVGAttributesAsMotionValues;
feOffset: SVGAttributesAsMotionValues;
fePointLight: SVGAttributesAsMotionValues;
feSpecularLighting: SVGAttributesAsMotionValues;
feSpotLight: SVGAttributesAsMotionValues;
feTile: SVGAttributesAsMotionValues;
feTurbulence: SVGAttributesAsMotionValues;
filter: SVGAttributesAsMotionValues;
foreignObject: SVGAttributesAsMotionValues;
g: SVGAttributesAsMotionValues;
image: SVGAttributesAsMotionValues;
line: SVGAttributesAsMotionValues;
linearGradient: SVGAttributesAsMotionValues;
marker: SVGAttributesAsMotionValues;
mask: SVGAttributesAsMotionValues;
metadata: SVGAttributesAsMotionValues;
mpath: SVGAttributesAsMotionValues;
path: SVGAttributesAsMotionValues;
pattern: SVGAttributesAsMotionValues;
polygon: SVGAttributesAsMotionValues;
polyline: SVGAttributesAsMotionValues;
radialGradient: SVGAttributesAsMotionValues;
rect: SVGAttributesAsMotionValues;
stop: SVGAttributesAsMotionValues;
switch: SVGAttributesAsMotionValues;
symbol: SVGAttributesAsMotionValues;
text: SVGAttributesAsMotionValues;
textPath: SVGAttributesAsMotionValues;
tspan: SVGAttributesAsMotionValues;
use: SVGAttributesAsMotionValues;
view: SVGAttributesAsMotionValues;
}
export type SetMotionValueType<T, Keys extends keyof T> = {
[K in keyof T]: K extends Keys ? SVGAttributesAsMotionValues : T[K];
};
type IntrinsicElementAttributesAsMotionValues = SetMotionValueType<IntrinsicElementAttributes, keyof SVGAttributesWithMotionValues>;
export type MotionHTMLAttributes<C extends ElementType> = Omit<IntrinsicElementAttributesAsMotionValues[C], keyof Options | 'style' | 'as' | 'asChild'>;
export {};