@jaymago/simple-display-alert/dist/index.d.ts

A lightweight, customizable alert system for web applications with TypeScript support

declare const ALERT_POSITIONS: string[];
type AlertPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
interface DisplayAlertProps {
    /**
     * Alert variant/type that determines the style and icon
     * @default 'primary'
     */
    variant?: 'primary' | 'info' | 'success' | 'danger' | 'warning' | 'white' | 'light' | DisplayAlertProps;
    /**
     * Text message to be displayed in the alert
     * @default 'Undefined'
     */
    message?: string | DisplayAlertProps;
    /**
     * Unique identifier for the alert element
     * Important when using multiple alerts simultaneously
     * @default ''
     */
    className?: string;
    /**
     * Duration in milliseconds before the alert is automatically removed
     * @default 5000
     */
    timeout?: number;
    /**
     * Whether to show a close button on the alert
     * @default false
     */
    closeBtn?: boolean | number;
    /**
     * Allow multiple alerts to be displayed simultaneously
     * @default false
     */
    multiple?: boolean | number;
    /**
     * Icon to be displayed in the alert
     * Set to null to remove the icon
     * @default Based on variant
     */
    icon?: 'loader' | 'success' | 'danger' | 'warning' | 'info' | null;
    /**
     * Whether to show a backdrop behind the alert
     * @default false
     */
    backdrop?: boolean | number;
    /**
     * Animation style for the alert's appearance and disappearance
     * @default 'none'
     */
    fadeDirection?: 'none' | 'top' | 'bottom' | 'left' | 'right';
    /**
     * Position of the alert in the window
     * @default 'bottom-right'
     */
    position?: AlertPosition;
}
interface DisplayAlertReturnProps {
    remove: () => void;
}

declare global {
    interface Window {
        alertTimer: any;
    }
}
/**
 * Create the alert DIV.
 *
 * @param {string} variant The class name
 * @param {string} message Text to display
 * @param {string|null} className Set class name identifier
 * @param {mixed|null} props Other properties, see `displayAlert()`
 * @returns {HTMLDivElement}
 */
declare function createAlertElement(variant: string, message: string, className?: string, props?: DisplayAlertProps): HTMLDivElement;
/**
 * Display alert v2.
 * Indicate a className or set `multiple: true` for multiple alert.
 * Example usage:
 * `showAlert('success', 'Thanks!')` |
 * `showAlert('success', 'Thanks!', 5000)` |
 * `showAlert('success', { message: 'Thanks!'})` |
 * `showAlert({ variant: 'success', message: 'Thanks!' })`
 *
 * @param {string|object} variant `AlertProps` or The class name `primary`|`info`|`success`|`danger`|`warning`|`white`|`light`
|* @param {string|object} message `AlertProps` or Text to display in the alert element
 * @param {object|number} props Timeout (ms) or AlertProps: { `variant`: string, `message`: string, `timeout`: number|null, `className`: string|null, `closeBtn`: boolean, `multiple`: boolean, `loader`: string }
 * @returns {void}
 */
declare function displayAlert(variant?: DisplayAlertProps['variant'] | DisplayAlertProps, message?: string | DisplayAlertProps, props?: DisplayAlertProps | number): DisplayAlertReturnProps;
/**
 * Remove all existing response instance.
 *
 * @param {string|null} _className Specify alert with className
 * @param {boolean|number|null} _isFade Specify if animation is fade or not.
 * @param {boolean|number|null} _isAll Specify if all alert will be affected.
 * @return {void}
 */
declare function removeResponseAlert(_className?: string, _isFade?: boolean | number, _position?: string): void;
/**
 * This extends the `removeResponseAlert()`
 * Remove display alert.
 *
 * @param {string|null} className Specify alert with className
 * @param {boolean|number|null} isFade Specify if animation is fade or not.
 * @return {void}
 */
declare function removeDisplayAlert(className?: string, isFade?: boolean | number): void;
/**
 * Returns the reponse error message.
 *
 * @param {mixed} error Error object
 * @param {mixed} _default Default error message
 * @returns mixed
 */
declare function getErrorMessage(error: any, _default?: string): string;
/**
 * Returns the reponse error message.
 *
 * @param {mixed} response Response object
 * @returns mixed
 */
declare function getStatusCode(response: any): number;
/**
 * Remove/hide alert loader with backdrop.
 *
 * @return {void}
 */
declare function hideAlertLoader(): void;
/**
 * Display alert for errors.
 *
 * @param {Array<any>} errors Array error object
 * @return {void}
 */
declare function displayErrors(errors?: Array<any>): void;
/**
 * Display alert loader with backdrop.
 *
 * @param {string} message The loading message.
 * @param {DisplayAlertProps} props Has backdrop
 * @return {DisplayAlertReturnProps}
 */
declare function displayAlertLoader(message?: string, props?: DisplayAlertProps): DisplayAlertReturnProps;
/**
 * Extend DisplayAlert for error alert.
 * Indicate a className or set `multiple: true` for multiple alert.
 * Example usage:
 * `displayAlertError('Thanks!')` |
 * `displayAlertError('Thanks!', 5000)` |
 * `displayAlertError({ message: 'Thanks!'})`
 *
 * @param {string|object} message `DisplayAlertProps` or Text to display in the alert element
 * @param {object|number} props Timeout (ms) or `DisplayAlertProps`
 * @returns {void}
 */
declare function displayAlertError(message?: string | DisplayAlertProps, props?: DisplayAlertProps | number): DisplayAlertReturnProps;
/**
 * Extend DisplayAlert for success alert.
 * Indicate a className or set `multiple: true` for multiple alert.
 * Example usage:
 * `displayAlertSuccess('Thanks!')` |
 * `displayAlertSuccess('Thanks!', 5000)` |
 * `displayAlertSuccess({ message: 'Thanks!'})`
 *
 * @param {string|object} message `DisplayAlertProps` or Text to display in the alert element
 * @param {object|number} props Timeout (ms) or `DisplayAlertProps`
 * @returns {void}
 */
declare function displayAlertSuccess(message?: string | DisplayAlertProps, props?: DisplayAlertProps | number): DisplayAlertReturnProps;
/**
 * Extend DisplayAlert for success alert.
 * Indicate a className or set `multiple: true` for multiple alert.
 * Example usage:
 * `displayAlertSuccess('Thanks!')` |
 * `displayAlertSuccess('Thanks!', 5000)` |
 * `displayAlertSuccess({ message: 'Thanks!'})`
 *
 * @param {string|object} message `DisplayAlertProps` or Text to display in the alert element
 * @param {object|number} props Timeout (ms) or `DisplayAlertProps`
 * @returns {void}
 */
declare function displayAlertWarning(message?: string | DisplayAlertProps, props?: DisplayAlertProps | number): DisplayAlertReturnProps;
/**
 * Extend DisplayAlert for success alert.
 * Indicate a className or set `multiple: true` for multiple alert.
 * Example usage:
 * `displayAlertSuccess('Thanks!')` |
 * `displayAlertSuccess('Thanks!', 5000)` |
 * `displayAlertSuccess({ message: 'Thanks!'})`
 *
 * @param {string|object} message `DisplayAlertProps` or Text to display in the alert element
 * @param {object|number} props Timeout (ms) or `DisplayAlertProps`
 * @returns {void}
 */
declare function displayAlertInfo(message?: string | DisplayAlertProps, props?: DisplayAlertProps | number): DisplayAlertReturnProps;

export { ALERT_POSITIONS, type AlertPosition, type DisplayAlertProps, type DisplayAlertReturnProps, createAlertElement, displayAlert, displayAlertError, displayAlertInfo, displayAlertLoader, displayAlertSuccess, displayAlertWarning, displayErrors, getErrorMessage, getStatusCode, hideAlertLoader, removeDisplayAlert, removeResponseAlert };