bootstrap-vue-next/dist/composables/useShowHide.d.mts

Seamless integration of Vue 3, Bootstrap 5, and TypeScript for modern, type-safe UI development

import { EmitFn, Ref, TransitionProps } from 'vue';
import { BvTriggerableEvent } from '../utils';
export declare const fadeBaseTransitionProps: {
    readonly name: "fade";
    readonly enterActiveClass: "";
    readonly enterFromClass: "showing";
    readonly enterToClass: "";
    readonly leaveActiveClass: "";
    readonly leaveFromClass: "";
    readonly leaveToClass: "showing";
    readonly css: true;
};
export declare const useShowHide: (modelValue: Ref<boolean | number>, props: {
    visible?: boolean;
    show?: boolean;
    noAnimation?: boolean;
    noFade?: boolean;
    noCloseOnBackdrop?: boolean;
    noCloseOnEsc?: boolean;
    transitionProps?: TransitionProps;
    lazy?: boolean;
    initialAnimation?: boolean;
    delay?: number | {
        show: number;
        hide: number;
    };
} & Record<string, unknown>, emit: EmitFn, element: Ref<HTMLElement | null>, computedId: Ref<string>, options?: {
    transitionProps?: TransitionProps;
    showFn?: () => void;
    hideFn?: () => void;
}) => {
    showRef: Readonly<Ref<boolean, boolean>>;
    renderRef: Readonly<Ref<boolean, boolean>>;
    renderBackdropRef: Readonly<Ref<boolean, boolean>>;
    isVisible: Readonly<Ref<boolean, boolean>>;
    isActive: Readonly<Ref<boolean, boolean>>;
    trapActive: Readonly<Ref<boolean, boolean>>;
    show: (resolveOnHide?: boolean) => Promise<boolean | string>;
    hide: (trigger?: string, noTriggerEmit?: boolean) => Promise<string>;
    toggle: (resolveOnHide?: boolean) => Promise<boolean | string>;
    throttleHide: import('../../node_modules/@vueuse/shared').PromisifyFn<(a: any) => Promise<string>>;
    throttleShow: import('../../node_modules/@vueuse/shared').PromisifyFn<() => Promise<string | boolean>>;
    buildTriggerableEvent: (type: string, opts?: Readonly<Partial<BvTriggerableEvent>>) => BvTriggerableEvent;
    computedNoAnimation: import('vue').ComputedRef<boolean>;
    localNoAnimation: Readonly<Ref<boolean, boolean>>;
    setLocalNoAnimation: (value: boolean) => void;
    localTemporaryHide: Readonly<Ref<boolean, boolean>>;
    setLocalTemporaryHide: (value: boolean) => void;
    isLeaving: Readonly<Ref<boolean, boolean>>;
    transitionProps: {
        onBeforeEnter: ((el: Element) => void)[];
        onEnter: ((el: Element, done: () => void) => void)[];
        onAfterEnter: ((el: Element) => void)[];
        onBeforeLeave: ((el: Element) => void)[];
        onLeave: ((el: Element, done: () => void) => void)[];
        onAfterLeave: ((el: Element) => void)[];
        name: string;
        type?: "transition" | "animation";
        css: boolean;
        duration?: number | {
            enter: number;
            leave: number;
        };
        enterFromClass: string;
        enterActiveClass: string;
        enterToClass: string;
        appearFromClass?: string;
        appearActiveClass?: string;
        appearToClass?: string;
        leaveFromClass: string;
        leaveActiveClass: string;
        leaveToClass: string;
        mode?: "in-out" | "out-in" | "default";
        appear?: boolean;
        persisted?: boolean;
        onEnterCancelled?: (((el: Element) => void) | ((el: Element) => void)[]) | undefined;
        onLeaveCancelled?: (((el: Element) => void) | ((el: Element) => void)[]) | undefined;
        onBeforeAppear?: (((el: Element) => void) | ((el: Element) => void)[]) | undefined;
        onAppear?: (((el: Element, done: () => void) => void) | ((el: Element, done: () => void) => void)[]) | undefined;
        onAfterAppear?: (((el: Element) => void) | ((el: Element) => void)[]) | undefined;
        onAppearCancelled?: (((el: Element) => void) | ((el: Element) => void)[]) | undefined;
    };
    lazyLoadCompleted: Readonly<Ref<boolean, boolean>>;
    markLazyLoadCompleted: () => void;
    contentShowing: import('vue').ComputedRef<boolean>;
    backdropReady: Readonly<Ref<boolean, boolean>>;
    backdropVisible: Readonly<Ref<boolean, boolean>>;
    backdropTransitionProps: {
        onBeforeEnter: () => void;
        onAfterEnter: () => void;
        onBeforeLeave: () => void;
        onAfterLeave: () => void;
        name: "fade";
        enterActiveClass: "";
        enterFromClass: "showing";
        enterToClass: "";
        leaveActiveClass: "";
        leaveFromClass: "";
        leaveToClass: "showing";
        css: true;
    };
};