Changelog

Full history is on GitHub. This page summarises notable changes by release.

v2.3.0

Added

• Global lifecycle events onModalOpen / onModalClose — subscribe to modal open/close events globally or scoped to a single group, with overloads (handler) and (group, handler). Handlers receive the ModalItem and run synchronously — onModalOpen fires right after the modal is pushed to state, onModalClose fires after the modal is finalized and removed (before the openModal promise settles). Both return an unsubscribe function. Useful for cross-group coordination (e.g. closing every 'sidebar' modal whenever something opens in 'main'), analytics, focus restoration. Thrown errors inside handlers are caught and logged so a faulty subscriber can't break the open/close flow. See Global events.

v2.2.1

Fixed

• disableCloseOnInteractOutside now correctly suppresses true outside clicks — clicks landing outside the entire <ModalTarget> region (e.g. on the host site's header when the region is positioned below it) used to close the modal regardless of this flag, because reka-ui's pointer-down-outside handler treated them as overlay interactions. <ModalRoot> now scopes its overlay-close path to clicks whose target lies inside the region; outside-region clicks are handled exclusively by the disableCloseOnInteractOutside gesture. The two flags are now fully independent.

v2.2.0

Added

• <ModalOverlay> default slot — overlay now exposes a default slot so you can place decorative elements (blur layers, gradients, noise textures, branding watermarks, animated backgrounds) on top of the dimming layer. The overlay keeps pointer-events: none by default; set pointer-events: auto on slotted elements that need to receive interaction.

v2.1.0

Added

• useModal().isTop — reactive ComputedRef<boolean>, true only when the controller's instance is the topmost modal in the global stack. Complements isOpen, which stays true while the instance is mounted regardless of stack position.

v2.0.0

Added

• Modal groups — every modal belongs to a named group; groups are registered via declare module '@kolirt/vue-modal' { interface ModalGroupRegistry { … } } for compile-time safety.
• <ModalRoot> / <ModalContent> / <ModalTitle> / <ModalDescription> / <ModalOverlay> — headless component primitives replacing the v1 BaseModal scoped-slot pattern.
• useModalContext() — composable for confirm(data), close(), onBeforeClose(guard), isTopmost, effectiveOptions inside a modal component.
• useModal() — composable that binds a controller (open / close / isOpen / on / off) to a component with auto-cleanup on scope dispose.
• replaceModal() — replaces the topmost modal in a group with a new one (instant exit, then open).
• closeAllModals() / closeModalsByGroup() / closeModalById() — close helpers with optional ignoreGuard and instantExit flags (closeModalById also accepts success / data).
• beforeClose guards — return false from a guard registered with onBeforeClose() to veto a close attempt.
• instantEnter / instantExit options — skip enter or exit animations for programmatic flows.
• ModalHandle.on / .off — subscribe to events emitted by the modal component after openModal returns.
• modals / isOpened / groupModals() / isGroupOpen() — reactive state exports for reading the current stack.
• ModalGroupRegistry TypeScript augmentation — all group strings are checked at compile time.
• reka-ui integration — <ModalRoot> delegates to <DialogRoot> for ARIA, focus trap, and Escape handling.
• Scroll lock with layout-shift compensation — useScrollLock sets body.overflow and adds compensating body.paddingRight equal to the scrollbar width.

Changed

• openModal(Component, props, options?) → openModal(Component, options?) — props moved inside options.props.
• Plugin registration: createModal(Options) animation/style options removed; replaced with createModal({ groups: ModalGroupsConfig }).
• ModalTarget group prop is now required and type-checked.
• Source moved from lib/ to packages/core/src/.

Removed

• confirmModal() global function (use useModalContext().confirm() from inside a modal, or closeModalById(id, { success: true, data }) from outside).
• $on / $off / $emit event bus and Events enum.
• SimpleModal built-in layout component.
• useLock scroll-lock composable (scroll lock is now automatic per target).
• BaseModal internal component.
• Animation / style options (transitionTime, animationType, modalStyle, overlayStyle).

v1.x (on master branch)

See GitHub releases for the v1 history. Notable v1 milestones:

• v1.2 — backdrop-filter overlay option, force option on openModal to close all before opening.
• v1.1 — multiple group support, withoutOverlay prop on ModalTarget.
• v1.0 — initial release: imperative openModal, global event bus, SimpleModal layout, useLock scroll lock.