@dvcol/svelte-utils/dist/transition.d.ts

Svelte library for common utility functions and constants

import { type AnimationConfig, type FlipParams } from 'svelte/animate';
import { type EasingFunction, type FlyParams, type ScaleParams, type TransitionConfig } from 'svelte/transition';
export type TransitionProps = Record<string, any>;
export type TransitionFunction<T extends TransitionProps | undefined = TransitionProps | undefined> = (node: Element, props: T, options: {
    direction: 'in' | 'out';
}) => TransitionConfig | (() => TransitionConfig);
export declare const emptyTransition: TransitionFunction;
export type AnimationProps = Record<string, any>;
export type AnimationFunction<T extends AnimationProps | undefined = AnimationProps | undefined> = (node: Element, directions: {
    from: DOMRect;
    to: DOMRect;
}, params?: T) => AnimationConfig;
export declare const emptyAnimation: AnimationFunction;
export type TransitionWithProps<T extends TransitionProps | undefined = TransitionProps, F extends TransitionFunction<T> | AnimationFunction<T> = TransitionFunction<T>> = {
    /**
     * Transition function.
     */
    use: F;
    /**
     * Optional transition props.
     */
    props?: T;
};
export type AnimationWithProps<T extends AnimationProps | undefined = AnimationProps> = {
    /**
     * Transition function.
     */
    use: AnimationFunction<T>;
    /**
     * Optional transition props.
     */
    props?: T;
};
export type FreezeParams = {
    /**
     * If `true`, the element size (height or width) will be frozen during the transition.
     */
    freeze?: boolean | ((node: Element) => boolean);
};
export type SkipParams = {
    /**
     * If `true`, the transition will be skipped.
     */
    skip?: boolean | ((node: Element) => boolean);
};
export type TransformParams = {
    /**
     * Transform function to apply to the css after parsing.
     */
    transform?: (css: string, t: number, u: number) => string;
};
export type BaseParams = {
    /**
     * Delay before the transition starts in milliseconds.
     */
    delay?: number;
    /**
     * Duration of the transition in milliseconds.
     */
    duration?: number;
    /**
     * Easing function to apply to the transition.
     */
    easing?: EasingFunction;
    /**
     * Additional CSS to apply to the element during the transition.
     */
    css?: string;
} & FreezeParams & SkipParams;
/**
 * Parses a CSS property from a string to a number.
 * @param node - The element to parse the CSS property from.
 * @param css - The CSS property to parse.
 */
export declare const parseCSSString: (node: Element, css: keyof CSSStyleDeclaration) => number;
export type OpacityParams = {
    /**
     * The opacity will be gradually increased (or decreased) over the duration of the transition.
     * The opacity will range from the current (or minimum) opacity to the provided minimum (or current).
     */
    opacity?: boolean | {
        /**
         * Minimum opacity to respect (before entering, or after leaving)
         * @default 0
         */
        minimum?: number;
        /**
         * Easing to use
         * @default the parent transition easing
         */
        easing?: EasingFunction;
    };
};
export type WidthParams = BaseParams & OpacityParams & TransformParams;
export type HeightParams = BaseParams & OpacityParams & TransformParams;
/**
 * Animates the height of an element from 0 to the current height for `in` transitions and from the current height to 0 for `out` transitions.
 * If `freeze` is `true`, the width of the element will be frozen during the transition.
 * If `skip` is `true`, the transition will be skipped.
 * If `opacity` is a truthy, the opacity will be gradually increased or decreased over the duration.
 * @default { easing: x => x, freeze: true, skip: false }
 */
export declare function height(node: Element, { easing, freeze, skip, css, opacity, transform, ...params }?: HeightParams, { direction }?: {
    direction?: 'in' | 'out';
}): TransitionConfig;
/**
 * Animates the width of an element from 0 to the current width for `in` transitions and from the current width to 0 for `out` transitions.
 * If `freeze` is `true`, the width of the element will be frozen during the transition.
 * If `skip` is `true`, the transition will be skipped.
 * If `opacity` is a number, the opacity will be gradually increased or decreased over the duration of the transition but never below the provided value.
 * @default { easing: x => x, freeze: true, skip: false }
 */
export declare function width(node: Element, { easing, freeze, skip, css, opacity, transform, ...params }?: WidthParams, { direction }?: {
    direction?: 'in' | 'out';
}): TransitionConfig;
/**
 * Composes multiple transitions into a single transition.
 * @param transitions - The transition functions and their props to compose into one.
 */
export declare function composeTransition<T extends TransitionProps = TransitionProps>(...transitions: TransitionWithProps<T>[]): TransitionFunction<T>;
export type ScaleFreezeParams = BaseParams & ScaleParams;
/**
 * Animates the opacity and scale of an element.
 * `in` transitions animate from an element's current (default) values to the provided values, passed as parameters.
 * `out` transitions animate from the provided values to an element's default values.
 * @default { duration: 400, start: 0.95, freeze: true }
 */
export declare function scaleFreeze(node: Element, { duration, start, freeze, css, ...params }?: ScaleFreezeParams, { direction }?: {
    direction?: 'in' | 'out';
}): TransitionConfig;
export type ScaleWidthParams = BaseParams & ScaleParams & {
    scale?: Omit<ScaleParams, 'duration' | 'delay' | 'easing'>;
    width?: Omit<WidthParams, 'duration' | 'delay' | 'easing'>;
};
/**
 * Combines the `width` and `scale` transitions to animate the width of an element.
 * @default { duration: 400, start: 0.95 }
 */
export declare function scaleWidth(node: Element, { duration, start, scale: scaleParam, width: widthParam, opacity, ...params }?: ScaleWidthParams): TransitionConfig;
export type ScaleHeightParams = BaseParams & ScaleParams & {
    scale?: Omit<ScaleParams, 'duration' | 'delay' | 'easing'>;
    height?: Omit<HeightParams, 'duration' | 'delay' | 'easing'>;
};
/**
 * Combines the `height` and `scale` transitions to animate the height of an element.
 * @default { duration: 400, start: 0.95 }
 */
export declare function scaleHeight(node: Element, { duration, start, scale: scaleParam, height: heightParam, opacity, ...params }?: ScaleHeightParams): TransitionConfig;
export type FlipToggleParams = FlipParams & SkipParams;
export declare const flipToggle: AnimationFunction<FlipToggleParams>;
type FlyUnit = {
    value: number;
    unit: string;
};
type FlyValue = number | string | FlyUnit;
type StartValue = string | number | {
    x?: FlyValue;
    y?: FlyValue;
};
type StartFunction = (options: {
    node: Element;
    style: CSSStyleDeclaration;
}) => StartValue;
export declare function scaleValue(start?: number): (t: number, u: number) => string;
export type FlyFrom = Omit<FlyParams, 'x' | 'y'> & {
    x?: FlyValue;
    y?: FlyValue;
    start?: StartValue | StartFunction;
    scale?: number;
};
export declare function flyFrom(node: Element, { delay, duration, easing, x, y, opacity, start, scale: scaleStart }?: FlyFrom): TransitionConfig;
export {};