@volverjs/ui-vue/dist/composables/alert/useAlert.d.ts

@volverjs/ui-vue is a lightweight Vue 3 component library to accompany @volverjs/style.

import type { Alert } from '@/types/alert';
type AlertInGroup = Alert & {
    timestamp: number;
    group: string;
};
/**
 * @description Composable to access alert groups, alerts and functions to add, remove and get alerts by group.
 * @example
 *  const { groups, alerts, addAlert, removeAlert, getAlerts } = useAlert()
 *  addAlert({
 *      title: 'Success!',
 *      modifiers: 'success',
 *  })
 *
 *  `<vv-alert-group :items="alerts" :onClose="removeAlert" />`
 *
 *  @returns  {
 *      alerts: ComputedRef<Alert[]> reactive list of alerts default group,
 *      groups: ReactiveRef<Map<string, Map<string, Alert>>>,
 *      addAlert: Function to add alert,
 *      removeAlert: Function to remove alert,
 *      getAlerts: Function to get alerts by group
 *  } the reactive list of alerts, groups, addAlert, removeAlert and getAlerts functions
 */
export declare function useAlert(): {
    groups: import("vue").Reactive<Map<string, Map<string, AlertInGroup>>>;
    alerts: globalThis.ComputedRef<{
        id: string | number;
        title?: string | undefined;
        icon?: string | {
            name: string;
            color?: string | undefined;
            width?: string | number | undefined;
            height?: string | number | undefined;
            provider?: string | undefined;
            prefix?: (import("../../components/VvIcon").IconPrefix | string) | undefined;
            src?: string | undefined;
            horizontalFlip?: boolean | undefined;
            verticalFlip?: boolean | undefined;
            flip?: string | undefined;
            mode?: import("@iconify/vue").IconifyRenderMode | undefined;
            inline?: boolean | undefined;
            rotate?: number | string | undefined;
            onLoad?: ((icon: import("@iconify/types").IconifyIcon) => void) | undefined;
            svg?: string | undefined;
            modifiers?: string | string[] | undefined;
        } | undefined;
        content?: string | undefined;
        footer?: string | undefined;
        modifiers?: (import("@/types/alert").AlertModifier | import("@/types/alert").AlertModifier[]) | undefined;
        dismissable?: boolean | undefined;
        autoClose?: number | undefined;
        closeLabel?: string | undefined;
        role?: import("@/constants").AlertRole | undefined;
        timestamp: number;
        group: string;
    }[]>;
    addAlert: ({ id, group, title, icon, content, footer, modifiers, dismissable, autoClose, timestamp, }?: Partial<AlertInGroup>) => void;
    removeAlert: (id: string | number, group?: string) => void;
    getAlerts: (group?: string) => globalThis.ComputedRef<{
        id: string | number;
        title?: string | undefined;
        icon?: string | {
            name: string;
            color?: string | undefined;
            width?: string | number | undefined;
            height?: string | number | undefined;
            provider?: string | undefined;
            prefix?: (import("../../components/VvIcon").IconPrefix | string) | undefined;
            src?: string | undefined;
            horizontalFlip?: boolean | undefined;
            verticalFlip?: boolean | undefined;
            flip?: string | undefined;
            mode?: import("@iconify/vue").IconifyRenderMode | undefined;
            inline?: boolean | undefined;
            rotate?: number | string | undefined;
            onLoad?: ((icon: import("@iconify/types").IconifyIcon) => void) | undefined;
            svg?: string | undefined;
            modifiers?: string | string[] | undefined;
        } | undefined;
        content?: string | undefined;
        footer?: string | undefined;
        modifiers?: (import("@/types/alert").AlertModifier | import("@/types/alert").AlertModifier[]) | undefined;
        dismissable?: boolean | undefined;
        autoClose?: number | undefined;
        closeLabel?: string | undefined;
        role?: import("@/constants").AlertRole | undefined;
        timestamp: number;
        group: string;
    }[]>;
};
export {};