import { Component } from 'vue'; import { ComponentOptionsMixin } from 'vue'; import { ComputedRef } from 'vue'; import { CSSProperties } from 'vue'; import { DefineComponent } from 'vue'; import { ExtractPropTypes } from 'vue'; import { Plugin as Plugin_2 } from 'vue'; import { PropType } from 'vue'; import { PublicProps } from 'vue'; import { Ref } from 'vue'; import { ShallowRef } from 'vue'; import { ToRefs } from 'vue'; declare const __VLS_component: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption, { readonly listAriaLabel: "Notifications"; }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly, { readonly listAriaLabel: "Notifications"; }>>>, { listAriaLabel: string; }, {}>; declare const __VLS_component_2: DefineComponent<__VLS_WithDefaults_2<__VLS_TypePropsToOption_2, { readonly listAriaLabel: "Notifications"; }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly, { readonly listAriaLabel: "Notifications"; }>>>, { listAriaLabel: string; }, {}>; declare const __VLS_component_3: DefineComponent<__VLS_WithDefaults_3<__VLS_TypePropsToOption_3, { readonly touchOnly: false; readonly exclude: "a, button"; readonly disabled: false; readonly threshold: 0.5; }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly, { readonly touchOnly: false; readonly exclude: "a, button"; readonly disabled: false; readonly threshold: 0.5; }>>>, { exclude: string; disabled: boolean; touchOnly: boolean; threshold: number; }, {}>; declare const __VLS_component_4: DefineComponent<__VLS_WithDefaults_4<__VLS_TypePropsToOption_4, { readonly comboKey: "n"; readonly handleClicks: true; readonly leaveMessage: "You're leaving the notifications stream. Press Control + N to navigate it again."; readonly emptyMessage: "No notifications to navigate"; readonly renderAnnouncement: true; readonly maxAnnouncements: 2; }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly, { readonly comboKey: "n"; readonly handleClicks: true; readonly leaveMessage: "You're leaving the notifications stream. Press Control + N to navigate it again."; readonly emptyMessage: "No notifications to navigate"; readonly renderAnnouncement: true; readonly maxAnnouncements: 2; }>>>, { comboKey: string; handleClicks: boolean; leaveMessage: string; emptyMessage: string; renderAnnouncement: boolean; maxAnnouncements: number; }, {}>; declare const __VLS_component_5: DefineComponent<__VLS_WithDefaults_5<__VLS_TypePropsToOption_5, { readonly icons: () => Partial>; readonly theme: () => Partial>; readonly hideClose: false; readonly closeAriaLabel: "Close"; }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly, { readonly icons: () => Partial>; readonly theme: () => Partial>; readonly hideClose: false; readonly closeAriaLabel: "Close"; }>>>, { icons: NotivueIcons; theme: NotivueTheme; closeAriaLabel: string; hideClose: boolean; }, {}>; declare type __VLS_NonUndefinedable = T extends undefined ? never : T; declare type __VLS_NonUndefinedable_2 = T extends undefined ? never : T; declare type __VLS_NonUndefinedable_3 = T extends undefined ? never : T; declare type __VLS_NonUndefinedable_4 = T extends undefined ? never : T; declare type __VLS_NonUndefinedable_5 = T extends undefined ? never : T; declare type __VLS_NonUndefinedable_6 = T extends undefined ? never : T; declare type __VLS_Prettify = { [K in keyof T]: T[K]; } & {}; declare type __VLS_Prettify_2 = { [K in keyof T]: T[K]; } & {}; declare type __VLS_Prettify_3 = { [K in keyof T]: T[K]; } & {}; declare type __VLS_Prettify_4 = { [K in keyof T]: T[K]; } & {}; declare type __VLS_Prettify_5 = { [K in keyof T]: T[K]; } & {}; declare function __VLS_template(): Readonly & NotivueComponentSlot; declare function __VLS_template_2(): Readonly & NotivueComponentSlot; declare function __VLS_template_3(): { default?(_: {}): any; default?(_: {}): any; }; declare function __VLS_template_4(): Readonly & NotivueKeyboardSlot; declare function __VLS_template_5(): { default?(_: {}): any; }; declare type __VLS_TypePropsToOption = { [K in keyof T]-?: {} extends Pick ? { type: PropType<__VLS_NonUndefinedable>; } : { type: PropType; required: true; }; }; declare type __VLS_TypePropsToOption_2 = { [K in keyof T]-?: {} extends Pick ? { type: PropType<__VLS_NonUndefinedable_2>; } : { type: PropType; required: true; }; }; declare type __VLS_TypePropsToOption_3 = { [K in keyof T]-?: {} extends Pick ? { type: PropType<__VLS_NonUndefinedable_3>; } : { type: PropType; required: true; }; }; declare type __VLS_TypePropsToOption_4 = { [K in keyof T]-?: {} extends Pick ? { type: PropType<__VLS_NonUndefinedable_4>; } : { type: PropType; required: true; }; }; declare type __VLS_TypePropsToOption_5 = { [K in keyof T]-?: {} extends Pick ? { type: PropType<__VLS_NonUndefinedable_5>; } : { type: PropType; required: true; }; }; declare type __VLS_TypePropsToOption_6 = { [K in keyof T]-?: {} extends Pick ? { type: PropType<__VLS_NonUndefinedable_6>; } : { type: PropType; required: true; }; }; declare type __VLS_WithDefaults = { [K in keyof Pick]: K extends keyof D ? __VLS_Prettify : P[K]; }; declare type __VLS_WithDefaults_2 = { [K in keyof Pick]: K extends keyof D ? __VLS_Prettify_2 : P[K]; }; declare type __VLS_WithDefaults_3 = { [K in keyof Pick]: K extends keyof D ? __VLS_Prettify_3 : P[K]; }; declare type __VLS_WithDefaults_4 = { [K in keyof Pick]: K extends keyof D ? __VLS_Prettify_4 : P[K]; }; declare type __VLS_WithDefaults_5 = { [K in keyof Pick]: K extends keyof D ? __VLS_Prettify_5 : P[K]; }; declare type __VLS_WithTemplateSlots = T & { new (): { $slots: S; }; }; declare type __VLS_WithTemplateSlots_2 = T & { new (): { $slots: S; }; }; declare type __VLS_WithTemplateSlots_3 = T & { new (): { $slots: S; }; }; declare type __VLS_WithTemplateSlots_4 = T & { new (): { $slots: S; }; }; declare type __VLS_WithTemplateSlots_5 = T & { new (): { $slots: S; }; }; export declare type AnimationsSlice = ReturnType; export declare type ClearFunctions = NotificationClearMethods; export declare type ClearMethods = NotificationClearMethods; export declare type ConfigSlice = ToRefs & { update: (newConfig: UpdateParam) => void; }; export declare type ContainersTabIndexMap = Record; declare function createAnimations(config: ConfigSlice, items: ItemsSlice, queue: QueueSlice, elements: ElementsSlice): { isReducedMotion: Ref; setReducedMotion(newVal: boolean): void; playLeave(id: string, { isDestroy, isUserTriggered }?: { isDestroy?: boolean | undefined; isUserTriggered?: boolean | undefined; }): void; playClearAll(): void; updatePositions({ isImmediate }?: { isImmediate?: boolean | undefined; }): void; }; declare function createElements(): { root: Ref; rootAttrs: Ref void; }>>; items: Ref; containers: Ref; setRootAttrs(newAttrs: Partial<{ class: string; onAnimationend: () => void; }>): void; getSortedItems(): HTMLElement[]; }; declare function createItems(config: ConfigSlice, queue: QueueSlice): { entries: ShallowRef; readonly length: number; lifecycleEventsCount: Ref; addLifecycleEvent(): void; clearLifecycleEvents(): void; add(item: StoreItem): void; addFromQueue(): void; findDupe(item: StoreItem): StoreItem | undefined; get(id: string): StoreItem | undefined; update(id: string, newOptions: DeepPartial): void; triggerRef(): void; updateAll(updateFn: (item: StoreItem) => StoreItem): void; remove(id: string): void; clear(): void; }; export declare function createNotivue(pluginConfig?: NotivueConfig & { startOnCreation?: boolean; }): Plugin_2; export declare function createNotivueAstro(pluginConfig?: NotivueConfig & { startOnCreation?: boolean; }): Plugin_2; declare function createQueue(): { entries: ShallowRef; readonly length: number; add(item: StoreItem): void; get(id: string): StoreItem | undefined; update(id: string, newOptions: DeepPartial): void; remove(id: string): void; triggerRef(): void; clear(): void; }; declare function createTimeouts(items: ItemsSlice, animations: AnimationsSlice): { isStreamPaused: Ref; isStreamFocused: Ref; debounceTimeout: undefined | number; setStreamPause(newVal?: boolean): void; setStreamFocus(newVal?: boolean): void; clearDebounceTimeout(): void; reset(): void; create(id: string, duration: number): number | undefined; pause(): void; resume(): void; resumeWithDebounce(ms: number): void; }; export declare const darkTheme: NotivueTheme; export declare type DeepPartial = { [K in keyof T]?: T[K] extends object ? DeepPartial : T[K]; }; export declare type DeepRequired = { [K in keyof T]-?: T[K] extends object ? DeepRequired : T[K]; }; declare const _default: __VLS_WithTemplateSlots_5>; export { _default as Notification } export { _default as Notifications } declare const _default_2: DefineComponent<__VLS_TypePropsToOption_6<{ item: NotivueItem; }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly>>, {}, {}>; export { _default_2 as NotificationProgress } export { _default_2 as NotificationsProgress } export declare const DEFAULT_CONFIG: NotivueConfigRequired; export declare type ElementsSlice = ReturnType; declare type ErrorColorsVars = '--nv-error-fg' | '--nv-error-bg' | '--nv-error-border' | '--nv-error-accent'; export declare interface ExposedInternalItemData extends NotificationClearMethods { createdAt: number; duplicateCount: number; } export declare const filledIcons: NotivueIcons; export declare interface HiddenInternalItemData { timeout: number | undefined | (() => void) | void; resumedAt: number; remaining: number; animationAttrs: Partial<{ class: string; onAnimationend: () => void; }>; positionStyles: CSSProperties; } declare type InfoColorsVars = '--nv-info-fg' | '--nv-info-bg' | '--nv-info-border' | '--nv-info-accent'; /** Options added internally when creating a notification. */ export declare type InternalItemData = ExposedInternalItemData & HiddenInternalItemData; /** Added in background after calling push() */ export declare type InternalPushOptions = { id: string; type: NotificationType; }; export declare type ItemsSlice = ReturnType; export declare const lightTheme: NotivueTheme; export declare const materialTheme: NotivueTheme; export declare type MaybeAstroPushPromiseReturn = T extends PushOptions & { type: 'promise'; } ? PushPromiseReturn : T extends PushOptions ? ClearFunctions : never; export declare interface NotificationClearMethods { clear: () => void; destroy: () => void; } declare interface NotificationOptions_2 { /** String to use as default title, an empty string doesn't render the title. */ title?: string | Ref; /** String to use as default message. */ message?: string | Ref; /** Duration of the notification. */ duration?: number; /** Value of `aria-live` attribute. */ ariaLive?: 'polite' | 'assertive'; /** Value of `role` attribute. */ ariaRole?: 'alert' | 'status'; } export { NotificationOptions_2 as NotificationOptions } export declare type NotificationProps = NotificationsProps; export declare interface NotificationsProps { item: NotivueItem; icons?: NotivueIcons; theme?: NotivueTheme; closeAriaLabel?: string; hideClose?: boolean; } export declare type NotificationType = 'success' | 'error' | 'info' | 'warning' | 'promise' | 'promise-resolve' | 'promise-reject'; export declare type NotificationTypes = NotificationType; export declare type NotificationTypesOptions = Record; export declare const Notivue: __VLS_WithTemplateSlots>; export declare interface NotivueAnimations { enter?: string; leave?: string; clearAll?: string; } export declare const NotivueAstro: __VLS_WithTemplateSlots_2>; export declare interface NotivueComponentSlot { default(item: NotivueItem & { key?: string; }): Component; } export declare interface NotivueComputedEntries { entries: ComputedRef; queue: ComputedRef; } export declare interface NotivueConfig { /** Whether to pause all notifications when hovering over them with mouse. */ pauseOnHover?: boolean; /** Whether to pause all notifications when tapping on them with touch devices. */ pauseOnTouch?: boolean; /** Whether to pause all notifications when switching tabs or window. */ pauseOnTabChange?: boolean; /** Wheter to enqueue notifications when limit is reached. */ enqueue?: boolean; /** Position of notifications, one of 'top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'. */ position?: Position; /** Notification options for each type. */ notifications?: Partial; /** Animation classes for `enter`, `leave` and `clearAll`. */ animations?: NotivueAnimations; /** Transition property applied when repositioning notifications. Must match the following pattern: * * `transform ` * * @example * * ```ts * transition: 'transform 0.35s cubic-bezier(0.5, 1, 0.25, 1)' * ``` */ transition?: string; /** Tag or element to which the stream will be teleported. */ teleportTo?: string | HTMLElement | false; /** Notifications limit. Defaults to `Infinity`. */ limit?: number; /** Whether to prevent duplicate notifications if already displayed. Duplicates will be announced again and their duration replaces the current one. */ avoidDuplicates?: boolean; } export declare type NotivueConfigRequired = DeepRequired & { notifications: DeepRequired; }; export declare type NotivueElements = 'list' | 'listItem' | 'itemContainer'; export declare type NotivueIcons = Partial>; export declare interface NotivueInstance { isRunning: Readonly>; startInstance: () => void; stopInstance: () => void; } /** Portion of the store item exposed to slot */ export declare type NotivueItem = Omit, keyof HiddenInternalItemData>; export declare const NotivueKeyboard: __VLS_WithTemplateSlots_4>; export declare interface NotivueKeyboardData { /** * Reactive tab index value for the custom notification focusable elements tabindex. * * Meant to be added to the custom notification elements via `:tabindex="elementsTabIndex"`. */ elementsTabIndex: Ref; /** * Reactive map of tab index values for the notification containers. * * Meant to be passed as prop to Notivue via `:containersTabIndex="containersTabIndex"`. */ containersTabIndex: ComputedRef; } export declare interface NotivueKeyboardProps { /** * Key to combine with Shift to enter or exit the stream. * * @default "n" */ comboKey?: string; /** * Whether to focus next candidate or exit the stream after pressing * any button or link inside a notification. * * @default true */ handleClicks?: boolean; /** * Text to be announced when leaving the stream * * @default "You're leaving the notifications stream. Press Control + N to navigate it again." */ leaveMessage?: string; /** * Text to be announced when attempting to navigate the stream but no candidates are available. * * @default "No notifications to navigate" */ emptyMessage?: string; /** * Whether to render the enter/leave notification or just announce it via screen reader. * * @default true */ renderAnnouncement?: boolean; /** * Maximum times to announce that the user is leaving the stream. * * @default 3 */ maxAnnouncements?: number; } export declare interface NotivueKeyboardSlot { default(props: { elementsTabIndex: TabIndexValue; containersTabIndex: ContainersTabIndexMap; }): Component; } export declare type NotivueNotificationOptions = NotificationOptions_2; export declare type NotivueNotificationType = NotificationType; export declare type NotivuePosition = Position; export declare interface NotivueProps { class?: string | Record | (string | Record)[]; /** * Notification containers reactive tabindex map. Only needed if using NotivueKeyboard. * * @default undefined */ containersTabIndex?: ContainersTabIndexMap; /** * Aria label for the list container. Only effective if using NotivueKeyboard. * * @default "Notifications" */ listAriaLabel?: string; /** * CSS styles for the list container, list items and notification containers. * * They have higher priority over the internal styles and will override them. * * ```ts * const styles = { * list: { * position: 'relative', * height: '100%', * }, * listItem: { * // ... * }, * itemContainer: { * // ... * }, * } * ``` * * @default undefined */ styles?: Partial>; } export declare type NotivueSlot = NotivueItem; export declare interface NotivueStore { config: ConfigSlice; animations: AnimationsSlice; timeouts: TimeoutsSlice; queue: QueueSlice; items: ItemsSlice; elements: ElementsSlice; } export declare const NotivueSwipe: __VLS_WithTemplateSlots_3>; export declare interface NotivueSwipeProps { /** Notivue's exposed notification item. */ item: NotivueItem; /** * Whether to enable clear on swipe only on touch interactions. */ touchOnly?: boolean; /** * A [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) * string that specifies elements to be exempted from the swipe action. * * @default "a, button" */ exclude?: string; /** * Whether to disable the swipe gesture or not. * Useful for disabling the behavior on desktop devices, for example. * * @default false */ disabled?: boolean; /** * Fraction of notification's width needed to be swiped for clearing. * For instance, a threshold of 0.5 indicates 50% of the notification's width must be swiped. * * @default 0.5 */ threshold?: number; /** * @deprecated * * @since 1.4.0 * * This is no longer required. * * * Whether to call the 'destroy' item method instead of 'clear' when * the swipe threshold is met. * * @default false */ destroy?: boolean; } export declare type NotivueTheme = Partial>; export declare type Obj = Record; export declare const outlinedIcons: NotivueIcons; export declare const pastelTheme: NotivueTheme; export declare type Position = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'; declare type PromiseColorsVars = '--nv-promise-fg' | '--nv-promise-bg' | '--nv-promise-border' | '--nv-promise-accent'; export declare interface Push { success: PushStatic; error: PushStatic; info: PushStatic; warning: PushStatic; promise: PushPromise; load: PushPromise; clearAll: () => void; destroyAll: () => void; } export declare const push: Push; export declare const pushAstro: Push; export declare type PushAstroEvent = PushOptions & { type: Exclude; resultEventName: string; }; export declare interface PushCallbacks { onAutoClear?: (item: NotivueItem) => void; onManualClear?: (item: NotivueItem) => void; } export declare type PushClearMethods = NotificationClearMethods; /** Defined by the user when calling push() */ export declare type PushOptions = NotificationOptions_2 & PushProps & PushSpecificOptions & PushCallbacks; export declare type PushOptionsWithInternals = PushOptions & InternalPushOptions; export declare type PushParameter = PushOptions | Exclude; export declare type PushPromise = (options: PushParameter) => NotificationClearMethods & PushPromiseReturn; export declare interface PushPromiseReturn { resolve: PushPromiseReturnMethod; success: PushPromiseReturnMethod; reject: PushPromiseReturnMethod; error: PushPromiseReturnMethod; } export declare type PushPromiseReturnMethod = (options: PushParameter) => NotificationClearMethods; export declare interface PushProps { props?: T; } export declare interface PushSpecificOptions { skipQueue?: boolean; ariaLiveOnly?: boolean; } export declare type PushStatic = (options: PushParameter) => NotificationClearMethods; export declare type QueueSlice = ReturnType; export declare const slateTheme: NotivueTheme; export declare let startInstance: () => void; export declare let stopInstance: () => void; /** Final shape of the store item */ export declare type StoreItem = DeepRequired & Required> & InternalPushOptions & InternalItemData & PushSpecificOptions & PushCallbacks; declare type SuccessColorsVars = '--nv-success-fg' | '--nv-success-bg' | '--nv-success-border' | '--nv-success-accent'; export declare type TabIndexValue = 0 | -1; declare type ThemeGlobalColorsVars = '--nv-global-bg' | '--nv-global-fg' | '--nv-global-accent' | '--nv-global-border'; declare type ThemeLayoutVars = '--nv-width' | '--nv-min-width' | '--nv-spacing' | '--nv-radius' | '--nv-border-width' | '--nv-icon-size' | '--nv-title-size' | '--nv-message-size' | '--nv-shadow' | '--nv-tip-width' | '--nv-y-align' | '--nv-y-align-has-title' | '--nv-progress-height'; export declare type ThemeNames = 'lightTheme' | 'pastelTheme' | 'materialTheme' | 'darkTheme' | 'slateTheme'; declare type ThemeVars = ThemeLayoutVars | ThemeGlobalColorsVars | SuccessColorsVars | ErrorColorsVars | WarningColorsVars | InfoColorsVars | PromiseColorsVars; export declare type TimeoutsSlice = ReturnType; export declare let updateConfig: (newConfig: UpdateParam) => void; export declare type UpdateParam = NotivueConfig | ((config: NotivueConfigRequired) => NotivueConfig); /** * Composable to get the current displayed notifications and queue. * * @returns * * Object of two computed properties: * * - `entries` - read-only reactive array of all the current displayed notifications * - `queue` - read-only reactive array of all the notifications waiting to be displayed * * @docs https://docs.notivue.smastrom.io/api/use-notifications */ export declare function useNotifications(): NotivueComputedEntries; /** * Composable to get and update the current Notivue config. * * @returns * * The current [configuration](https://docs.notivue.smastrom.io/customization/configuration) * where each property is a [ref](https://vuejs.org/guide/essentials/reactivity-fundamentals.html#ref) * that allows for reactive updates and side effects watching. * * @docs https://docs.notivue.smastrom.io/api/use-notivue */ export declare function useNotivue(): UseNotivueReturn; /** * Composable to start and stop the Notivue instance. * * @returns * * - `startInstance` - Starts or restarts the Notivue instance. * - `stopInstance` - Stops the Notivue instance. * - `isRunning` - Readonly ref to check if the Notivue instance is running. * * @docs https://docs.notivue.smastrom.io/api/use-notivue-instance */ export declare function useNotivueInstance(): NotivueInstance; export declare function useNotivueKeyboard(): NotivueKeyboardData; export declare type UseNotivueReturn = ConfigSlice & { isStreamPaused: Readonly>; isTopAlign: ComputedRef; }; /** * @deprecated * * Since version 2.0.0, import `push` directly instead. * * ```ts * import { push } from 'notivue' * ``` */ export declare function usePush(): Push; export declare type UserPushOptions = PushOptions; declare type WarningColorsVars = '--nv-warning-fg' | '--nv-warning-bg' | '--nv-warning-border' | '--nv-warning-accent'; export { } declare global { interface WindowEventMap extends CustomEventMap { } }