@chencu/liquid-glass-vue/dist/index.d.ts

Performance-optimized Apple's Liquid Glass effect for Vue 3. Fork with 70% better performance.

import { AllowedComponentProps } from 'vue';
import { App } from 'vue';
import { ComponentCustomProperties } from 'vue';
import { ComponentCustomProps } from 'vue';
import { ComponentInternalInstance } from 'vue';
import { ComponentOptionsBase } from 'vue';
import { ComponentOptionsMixin } from 'vue';
import { ComponentProvideOptions } from 'vue';
import { ComponentPublicInstance } from 'vue';
import { CSSProperties } from 'vue';
import { DebuggerEvent } from 'vue';
import { DefineComponent } from 'vue';
import { GlobalComponents } from 'vue';
import { GlobalDirectives } from 'vue';
import { nextTick } from 'vue';
import { OnCleanup } from '@vue/reactivity';
import { PublicProps } from 'vue';
import { ShallowUnwrapRef } from 'vue';
import { Slot } from 'vue';
import { VNodeProps } from 'vue';
import { WatchOptions } from 'vue';
import { WatchStopHandle } from 'vue';

declare const __VLS_component: DefineComponent<LiquidGlassProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<LiquidGlassProps> & Readonly<{}>, {
displacementScale: number;
aberrationIntensity: number;
mode: GlassMode;
padding: string;
saturation: number;
className: string;
blurAmount: number;
overLight: boolean;
cornerRadius: number;
elasticity: number;
}, {}, {}, {}, string, ComponentProvideOptions, false, {
glassRef: ({
$: ComponentInternalInstance;
$data: {};
$props: {
readonly className?: string | undefined;
readonly style?: Partial<CSSProperties> | undefined;
readonly displacementScale?: number | undefined;
readonly blurAmount?: number | undefined;
readonly saturation?: number | undefined;
readonly aberrationIntensity?: number | undefined;
readonly mouseOffset?: {
x: number;
y: number;
} | undefined;
readonly onMouseLeave?: (() => void) | undefined;
readonly onMouseEnter?: (() => void) | undefined;
readonly onMouseDown?: (() => void) | undefined;
readonly onMouseUp?: (() => void) | undefined;
readonly active?: boolean | undefined;
readonly overLight?: boolean | undefined;
readonly cornerRadius?: number | undefined;
readonly padding?: string | undefined;
readonly glassSize?: {
width: number;
height: number;
} | undefined;
readonly onClick?: (() => void) | undefined;
readonly mode?: GlassMode | undefined;
readonly effect?: FragmentShaderType | undefined;
} & VNodeProps & AllowedComponentProps & ComponentCustomProps;
$attrs: {
[x: string]: unknown;
};
$refs: {
[x: string]: unknown;
};
$slots: Readonly<{
[name: string]: Slot<any> | undefined;
}>;
$root: ComponentPublicInstance | null;
$parent: ComponentPublicInstance | null;
$host: Element | null;
$emit: (event: string, ...args: any[]) => void;
$el: HTMLDivElement;
$options: ComponentOptionsBase<Readonly<GlassContainerProps> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {
displacementScale: number;
aberrationIntensity: number;
mode: GlassMode;
padding: string;
saturation: number;
active: boolean;
className: string;
blurAmount: number;
overLight: boolean;
cornerRadius: number;
glassSize: {
width: number;
height: number;
};
effect: FragmentShaderType;
}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & {
beforeCreate?: (() => void) | (() => void)[];
created?: (() => void) | (() => void)[];
beforeMount?: (() => void) | (() => void)[];
mounted?: (() => void) | (() => void)[];
beforeUpdate?: (() => void) | (() => void)[];
updated?: (() => void) | (() => void)[];
activated?: (() => void) | (() => void)[];
deactivated?: (() => void) | (() => void)[];
beforeDestroy?: (() => void) | (() => void)[];
beforeUnmount?: (() => void) | (() => void)[];
destroyed?: (() => void) | (() => void)[];
unmounted?: (() => void) | (() => void)[];
renderTracked?: ((e: DebuggerEvent) => void) | ((e: DebuggerEvent) => void)[];
renderTriggered?: ((e: DebuggerEvent) => void) | ((e: DebuggerEvent) => void)[];
errorCaptured?: ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void)[];
};
$forceUpdate: () => void;
$nextTick: nextTick;
$watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, OnCleanup]) => any : (...args: [any, any, OnCleanup]) => any, options?: WatchOptions): WatchStopHandle;
} & Readonly<{
displacementScale: number;
aberrationIntensity: number;
mode: GlassMode;
padding: string;
saturation: number;
active: boolean;
className: string;
blurAmount: number;
overLight: boolean;
cornerRadius: number;
glassSize: {
width: number;
height: number;
};
effect: FragmentShaderType;
}> & Omit<Readonly<GlassContainerProps> & Readonly<{}>, "displacementScale" | "aberrationIntensity" | "mode" | "padding" | "saturation" | "active" | "className" | "blurAmount" | "overLight" | "cornerRadius" | "glassSize" | "effect"> & ShallowUnwrapRef<    {}> & {} & ComponentCustomProperties & {} & {
$slots: {
default?(_: {}): any;
};
}) | null;
}, HTMLDivElement>;

declare const __VLS_component_2: DefineComponent<GlassContainerProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<GlassContainerProps> & Readonly<{}>, {
displacementScale: number;
aberrationIntensity: number;
mode: GlassMode;
padding: string;
saturation: number;
active: boolean;
className: string;
blurAmount: number;
overLight: boolean;
cornerRadius: number;
glassSize: {
width: number;
height: number;
};
effect: FragmentShaderType;
}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;

declare function __VLS_template(): {
    attrs: Partial<{}>;
    slots: {
        default?(_: {}): any;
    };
    refs: {
        glassRef: ({
            $: ComponentInternalInstance;
            $data: {};
            $props: {
                readonly className?: string | undefined;
                readonly style?: Partial<CSSProperties> | undefined;
                readonly displacementScale?: number | undefined;
                readonly blurAmount?: number | undefined;
                readonly saturation?: number | undefined;
                readonly aberrationIntensity?: number | undefined;
                readonly mouseOffset?: {
                    x: number;
                    y: number;
                } | undefined;
                readonly onMouseLeave?: (() => void) | undefined;
                readonly onMouseEnter?: (() => void) | undefined;
                readonly onMouseDown?: (() => void) | undefined;
                readonly onMouseUp?: (() => void) | undefined;
                readonly active?: boolean | undefined;
                readonly overLight?: boolean | undefined;
                readonly cornerRadius?: number | undefined;
                readonly padding?: string | undefined;
                readonly glassSize?: {
                    width: number;
                    height: number;
                } | undefined;
                readonly onClick?: (() => void) | undefined;
                readonly mode?: GlassMode | undefined;
                readonly effect?: FragmentShaderType | undefined;
            } & VNodeProps & AllowedComponentProps & ComponentCustomProps;
            $attrs: {
                [x: string]: unknown;
            };
            $refs: {
                [x: string]: unknown;
            };
            $slots: Readonly<{
                [name: string]: Slot<any> | undefined;
            }>;
            $root: ComponentPublicInstance | null;
            $parent: ComponentPublicInstance | null;
            $host: Element | null;
            $emit: (event: string, ...args: any[]) => void;
            $el: HTMLDivElement;
            $options: ComponentOptionsBase<Readonly<GlassContainerProps> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {
            displacementScale: number;
            aberrationIntensity: number;
            mode: GlassMode;
            padding: string;
            saturation: number;
            active: boolean;
            className: string;
            blurAmount: number;
            overLight: boolean;
            cornerRadius: number;
            glassSize: {
            width: number;
            height: number;
            };
            effect: FragmentShaderType;
            }, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & {
                beforeCreate?: (() => void) | (() => void)[];
                created?: (() => void) | (() => void)[];
                beforeMount?: (() => void) | (() => void)[];
                mounted?: (() => void) | (() => void)[];
                beforeUpdate?: (() => void) | (() => void)[];
                updated?: (() => void) | (() => void)[];
                activated?: (() => void) | (() => void)[];
                deactivated?: (() => void) | (() => void)[];
                beforeDestroy?: (() => void) | (() => void)[];
                beforeUnmount?: (() => void) | (() => void)[];
                destroyed?: (() => void) | (() => void)[];
                unmounted?: (() => void) | (() => void)[];
                renderTracked?: ((e: DebuggerEvent) => void) | ((e: DebuggerEvent) => void)[];
                renderTriggered?: ((e: DebuggerEvent) => void) | ((e: DebuggerEvent) => void)[];
                errorCaptured?: ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void)[];
            };
            $forceUpdate: () => void;
            $nextTick: nextTick;
            $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, OnCleanup]) => any : (...args: [any, any, OnCleanup]) => any, options?: WatchOptions): WatchStopHandle;
        } & Readonly<{
            displacementScale: number;
            aberrationIntensity: number;
            mode: GlassMode;
            padding: string;
            saturation: number;
            active: boolean;
            className: string;
            blurAmount: number;
            overLight: boolean;
            cornerRadius: number;
            glassSize: {
                width: number;
                height: number;
            };
            effect: FragmentShaderType;
        }> & Omit<Readonly<GlassContainerProps> & Readonly<{}>, "displacementScale" | "aberrationIntensity" | "mode" | "padding" | "saturation" | "active" | "className" | "blurAmount" | "overLight" | "cornerRadius" | "glassSize" | "effect"> & ShallowUnwrapRef<    {}> & {} & ComponentCustomProperties & {} & {
            $slots: {
                default?(_: {}): any;
            };
        }) | null;
    };
    rootEl: HTMLDivElement;
};

declare function __VLS_template_2(): {
    attrs: Partial<{}>;
    slots: {
        default?(_: {}): any;
    };
    refs: {};
    rootEl: HTMLDivElement;
};

declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;

declare type __VLS_TemplateResult_2 = ReturnType<typeof __VLS_template_2>;

declare type __VLS_WithTemplateSlots<T, S> = T & {
    new (): {
        $slots: S;
    };
};

declare type __VLS_WithTemplateSlots_2<T, S> = T & {
    new (): {
        $slots: S;
    };
};

declare const _default: {
    install(app: App): void;
};
export default _default;

export declare const fragmentShaders: {
    readonly liquidGlass: "liquidGlass";
    readonly liquidGlass2: "liquidGlass2";
    readonly flowingLiquid: "flowingLiquid";
    readonly transparentIce: "transparentIce";
    readonly unevenGlass: "unevenGlass";
    readonly mosaicGlass: "mosaicGlass";
};

export declare type FragmentShaderType = keyof typeof fragmentShaders;

export declare const GlassContainer: __VLS_WithTemplateSlots_2<typeof __VLS_component_2, __VLS_TemplateResult_2["slots"]>;

export declare interface GlassContainerProps {
    className?: string;
    style?: Partial<CSSProperties>;
    displacementScale?: number;
    blurAmount?: number;
    saturation?: number;
    aberrationIntensity?: number;
    mouseOffset?: {
        x: number;
        y: number;
    };
    onMouseLeave?: () => void;
    onMouseEnter?: () => void;
    onMouseDown?: () => void;
    onMouseUp?: () => void;
    active?: boolean;
    overLight?: boolean;
    cornerRadius?: number;
    padding?: string;
    glassSize?: {
        width: number;
        height: number;
    };
    onClick?: () => void;
    mode?: GlassMode;
    effect?: FragmentShaderType;
}

export declare const GlassFilter: DefineComponent<GlassFilterProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<GlassFilterProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, SVGSVGElement>;

export declare interface GlassFilterProps {
    id: string;
    displacementScale: number;
    aberrationIntensity: number;
    width: number | string;
    height: number | string;
    mode: GlassMode;
    shaderMapUrl?: string;
}

export declare enum GlassMode {
    standard = "standard",
    polar = "polar",
    prominent = "prominent",
    shader = "shader"
}

export declare const LiquidGlass: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

export declare interface LiquidGlassProps {
    displacementScale?: number;
    blurAmount?: number;
    saturation?: number;
    aberrationIntensity?: number;
    elasticity?: number;
    cornerRadius?: number;
    globalMousePos?: {
        x: number;
        y: number;
    };
    mouseOffset?: {
        x: number;
        y: number;
    };
    mouseContainer?: HTMLElement;
    className?: string;
    padding?: string;
    style?: Partial<CSSProperties>;
    overLight?: boolean;
    mode?: GlassMode;
    onClick?: () => void;
    effect?: FragmentShaderType;
}

export declare class ShaderDisplacementGenerator {
    private options;
    private worker;
    private startTime;
    constructor(options: ShaderOptions);
    updateShader(mousePosition?: Vec2): Promise<string>;
    destroy(): void;
    getCurrentTime(): number;
}

declare interface ShaderOptions {
    width: number;
    height: number;
    effect: FragmentShaderType;
    mousePosition?: Vec2;
    time?: number;
}

declare interface Vec2 {
    x: number;
    y: number;
}

export { }