@aotearoan/neon/dist/src/components/layout/modal/NeonModal.d.ts

Neon is a lightweight design library of Vue 3 components with minimal dependencies.

import { NeonResponsive } from '@/model/common/responsive/NeonResponsive';
/**
 * A modal dialog component. This will be rendered above the content of the main window and can either be dismissed by the user or configured to require user interaction before dismissal.
 */
declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
    /**
     * Whether the modal is currently open.
     */
    open: {
        type: BooleanConstructor;
        required: true;
    };
    /**
     * Whether the user is allowed to dismiss the modal by clicking outside the modal or pressing escape.
     */
    dismissible: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Increase the opacity so that the page behind the modal is no longer visible
     */
    opaque: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Keep the top nav visible when the modal is open
     */
    showTopNav: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Responsive breakpoint below which point the modal becomes fullscreen.
     * Supports NeonResponsive.Mobile & NeonResponsive.MobileLarge.
     */
    breakpoint: {
        type: () => NeonResponsive;
        default: NeonResponsive;
    };
    /**
     * Remove the offset from the top of the modal.
     */
    noOffset: {
        type: BooleanConstructor;
    };
}>, {
    modal: import("vue").Ref<null, null>;
    close: () => void;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "close"[], "close", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
    /**
     * Whether the modal is currently open.
     */
    open: {
        type: BooleanConstructor;
        required: true;
    };
    /**
     * Whether the user is allowed to dismiss the modal by clicking outside the modal or pressing escape.
     */
    dismissible: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Increase the opacity so that the page behind the modal is no longer visible
     */
    opaque: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Keep the top nav visible when the modal is open
     */
    showTopNav: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Responsive breakpoint below which point the modal becomes fullscreen.
     * Supports NeonResponsive.Mobile & NeonResponsive.MobileLarge.
     */
    breakpoint: {
        type: () => NeonResponsive;
        default: NeonResponsive;
    };
    /**
     * Remove the offset from the top of the modal.
     */
    noOffset: {
        type: BooleanConstructor;
    };
}>> & Readonly<{
    onClose?: ((...args: any[]) => any) | undefined;
}>, {
    opaque: boolean;
    dismissible: boolean;
    showTopNav: boolean;
    breakpoint: NeonResponsive;
    noOffset: boolean;
}, {}, {
    NeonButton: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
        href: {
            type: StringConstructor;
            default: null;
        };
        label: {
            type: StringConstructor;
            default: null;
        };
        size: {
            type: () => import("../../../neon").NeonButtonSize;
            default: import("../../../neon").NeonButtonSize;
        };
        color: {
            type: () => import("../../../neon").NeonFunctionalColor;
            default: import("../../../neon").NeonFunctionalColor;
        };
        inverse: {
            type: BooleanConstructor;
            default: boolean;
        };
        alternateColor: {
            type: () => import("../../../neon").NeonFunctionalColor;
            default: null;
        };
        icon: {
            type: StringConstructor;
            default: null;
        };
        iconAriaLabel: {
            type: StringConstructor;
        };
        iconPosition: {
            type: () => import("../../../neon").NeonHorizontalPosition;
            default: import("../../../neon").NeonHorizontalPosition;
        };
        buttonStyle: {
            type: () => import("../../../neon").NeonButtonStyle;
            default: import("../../../neon").NeonButtonStyle;
        };
        buttonType: {
            type: () => import("../../../neon").NeonButtonType;
            default: import("../../../neon").NeonButtonType;
        };
        state: {
            type: () => import("../../../neon").NeonState;
            default: import("../../../neon").NeonState;
        };
        disabled: {
            type: BooleanConstructor;
            default: boolean;
        };
        transparent: {
            type: BooleanConstructor;
            default: boolean;
        };
        outline: {
            type: BooleanConstructor;
            default: boolean;
        };
        circular: {
            type: BooleanConstructor;
            default: null;
        };
        fullWidth: {
            type: BooleanConstructor;
            default: null;
        };
        indicator: {
            type: BooleanConstructor;
            default: boolean;
        };
        indicatorExpanded: {
            type: BooleanConstructor;
            default: null;
        };
    }>, {
        iconName: import("vue").ComputedRef<string>;
        classes: import("vue").ComputedRef<(string | false | {
            [x: string]: boolean | "" | import("../../../neon").NeonFunctionalColor;
            'neon-button--text-transparent': boolean;
            'neon-button--disabled': boolean;
            'neon-button--inverse': boolean;
            'neon-button--circular': boolean;
            'neon-button--no-outline': boolean;
            'neon-button--full-width': boolean;
            'neon-button--with-icon neon-button--icon-only': boolean | "";
            'neon-button--with-icon neon-button--icon-left': boolean | "";
            'neon-button--with-icon neon-button--icon-right': boolean | "";
        })[]>;
        button: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
        attrs: {
            [x: string]: unknown;
        };
        sanitizedAttributes: import("vue").ComputedRef<{
            [x: string]: unknown;
        }>;
        clickLink: () => void | undefined;
        clickButton: () => void;
    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
        href: {
            type: StringConstructor;
            default: null;
        };
        label: {
            type: StringConstructor;
            default: null;
        };
        size: {
            type: () => import("../../../neon").NeonButtonSize;
            default: import("../../../neon").NeonButtonSize;
        };
        color: {
            type: () => import("../../../neon").NeonFunctionalColor;
            default: import("../../../neon").NeonFunctionalColor;
        };
        inverse: {
            type: BooleanConstructor;
            default: boolean;
        };
        alternateColor: {
            type: () => import("../../../neon").NeonFunctionalColor;
            default: null;
        };
        icon: {
            type: StringConstructor;
            default: null;
        };
        iconAriaLabel: {
            type: StringConstructor;
        };
        iconPosition: {
            type: () => import("../../../neon").NeonHorizontalPosition;
            default: import("../../../neon").NeonHorizontalPosition;
        };
        buttonStyle: {
            type: () => import("../../../neon").NeonButtonStyle;
            default: import("../../../neon").NeonButtonStyle;
        };
        buttonType: {
            type: () => import("../../../neon").NeonButtonType;
            default: import("../../../neon").NeonButtonType;
        };
        state: {
            type: () => import("../../../neon").NeonState;
            default: import("../../../neon").NeonState;
        };
        disabled: {
            type: BooleanConstructor;
            default: boolean;
        };
        transparent: {
            type: BooleanConstructor;
            default: boolean;
        };
        outline: {
            type: BooleanConstructor;
            default: boolean;
        };
        circular: {
            type: BooleanConstructor;
            default: null;
        };
        fullWidth: {
            type: BooleanConstructor;
            default: null;
        };
        indicator: {
            type: BooleanConstructor;
            default: boolean;
        };
        indicatorExpanded: {
            type: BooleanConstructor;
            default: null;
        };
    }>> & Readonly<{
        onClick?: ((...args: any[]) => any) | undefined;
    }>, {
        color: import("../../../neon").NeonFunctionalColor;
        icon: string;
        label: string;
        inverse: boolean;
        disabled: boolean;
        href: string;
        size: import("../../../neon").NeonButtonSize;
        alternateColor: import("../../../neon").NeonFunctionalColor;
        outline: boolean;
        iconPosition: import("../../../neon").NeonHorizontalPosition;
        buttonStyle: import("../../../neon").NeonButtonStyle;
        buttonType: import("../../../neon").NeonButtonType;
        state: import("../../../neon").NeonState;
        transparent: boolean;
        circular: boolean;
        fullWidth: boolean;
        indicator: boolean;
        indicatorExpanded: boolean;
    }, {}, {
        NeonExpansionIndicator: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
            expanded: {
                type: BooleanConstructor;
                default: boolean;
            };
            inverse: {
                type: BooleanConstructor;
                default: boolean;
            };
            disabled: {
                type: BooleanConstructor;
                default: boolean;
            };
            color: {
                type: () => import("../../../neon").NeonFunctionalColor;
                default: null;
            }; /**
             * Increase the opacity so that the page behind the modal is no longer visible
             */
        }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
            expanded: {
                type: BooleanConstructor;
                default: boolean;
            };
            inverse: {
                type: BooleanConstructor;
                default: boolean;
            };
            disabled: {
                type: BooleanConstructor;
                default: boolean;
            };
            color: {
                type: () => import("../../../neon").NeonFunctionalColor;
                default: null;
            }; /**
             * Increase the opacity so that the page behind the modal is no longer visible
             */
        }>> & Readonly<{}>, {
            color: import("../../../neon").NeonFunctionalColor;
            inverse: boolean;
            disabled: boolean;
            expanded: boolean;
        }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
        NeonIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
            name: {
                type: StringConstructor;
                /**
                 * Emitted when the modal is closed.
                 * @type {void}
                 */
                required: true;
            };
            id: {
                type: StringConstructor;
                default: null;
            };
            color: {
                type: () => import("../../../neon").NeonFunctionalColor;
                default: null;
            };
            inverse: {
                type: BooleanConstructor;
                default: boolean;
            };
            disabled: {
                type: BooleanConstructor;
                default: boolean;
            };
        }>, {
            sanitizedAttributes: import("vue").ComputedRef<{
                [x: string]: unknown;
            }>;
            icon: import("vue").ComputedRef<string | undefined>;
        }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
            name: {
                type: StringConstructor;
                /**
                 * Emitted when the modal is closed.
                 * @type {void}
                 */
                required: true;
            };
            id: {
                type: StringConstructor;
                default: null;
            };
            color: {
                type: () => import("../../../neon").NeonFunctionalColor;
                default: null;
            };
            inverse: {
                type: BooleanConstructor;
                default: boolean;
            };
            disabled: {
                type: BooleanConstructor;
                default: boolean;
            };
        }>> & Readonly<{}>, {
            color: import("../../../neon").NeonFunctionalColor;
            id: string;
            inverse: boolean;
            disabled: boolean;
        }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
        NeonLink: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
            href: {
                type: StringConstructor;
                default: null;
            };
            noStyle: {
                type: BooleanConstructor;
                default: boolean;
            };
            outlineStyle: {
                type: () => import("../../../neon").NeonOutlineStyle;
                default: import("../../../neon").NeonOutlineStyle;
            };
            externalIndicator: {
                type: BooleanConstructor;
                default: boolean;
            };
        }>, {
            neonLink: import("vue").Ref<HTMLAnchorElement | null, HTMLAnchorElement | null>;
            routerUrl: import("vue").ComputedRef<string | undefined>;
            sanitizedAttributes: import("vue").ComputedRef<{
                [x: string]: unknown;
            }>;
            activeRoute: import("vue").ComputedRef<boolean | "" | undefined>;
            exactRoute: import("vue").ComputedRef<boolean | "" | undefined>;
            onClick: () => void;
            onSpace: () => Promise<void>;
        }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
            href: {
                type: StringConstructor;
                default: null;
            };
            noStyle: {
                type: BooleanConstructor;
                default: boolean;
            };
            outlineStyle: {
                type: () => import("../../../neon").NeonOutlineStyle;
                default: import("../../../neon").NeonOutlineStyle;
            };
            externalIndicator: {
                type: BooleanConstructor;
                default: boolean;
            };
        }>> & Readonly<{
            onClick?: ((...args: any[]) => any) | undefined;
        }>, {
            href: string;
            noStyle: boolean;
            outlineStyle: import("../../../neon").NeonOutlineStyle;
            externalIndicator: boolean;
        }, {}, {
            NeonIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
                name: {
                    type: StringConstructor;
                    /**
                     * Emitted when the modal is closed.
                     * @type {void}
                     */
                    required: true;
                };
                id: {
                    type: StringConstructor;
                    default: null;
                };
                color: {
                    type: () => import("../../../neon").NeonFunctionalColor;
                    default: null;
                };
                inverse: {
                    type: BooleanConstructor;
                    default: boolean;
                };
                disabled: {
                    type: BooleanConstructor;
                    default: boolean;
                };
            }>, {
                sanitizedAttributes: import("vue").ComputedRef<{
                    [x: string]: unknown;
                }>;
                icon: import("vue").ComputedRef<string | undefined>;
            }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
                name: {
                    type: StringConstructor;
                    /**
                     * Emitted when the modal is closed.
                     * @type {void}
                     */
                    required: true;
                };
                id: {
                    type: StringConstructor;
                    default: null;
                };
                color: {
                    type: () => import("../../../neon").NeonFunctionalColor;
                    default: null;
                };
                inverse: {
                    type: BooleanConstructor;
                    default: boolean;
                };
                disabled: {
                    type: BooleanConstructor;
                    default: boolean;
                };
            }>> & Readonly<{}>, {
                color: import("../../../neon").NeonFunctionalColor;
                id: string;
                inverse: boolean;
                disabled: boolean;
            }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
        }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
    }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
export default _default;