Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Skip to content

feat(createStack): add overlay z-index management composable#129

Merged
johnleider merged 4 commits intomasterfrom
feat/create-stack
Feb 2, 2026
Merged

feat(createStack): add overlay z-index management composable#129
johnleider merged 4 commits intomasterfrom
feat/create-stack

Conversation

@johnleider
Copy link
Member

Summary

  • Add createStack composable for managing overlay z-index stacking with automatic calculation and scrim integration
  • Add Scrim component for shared overlay backdrops using the stack context
  • Integrate useStack into DialogContent for proper z-index coordination when multiple dialogs are open

Features

createStack Composable

  • Global reactive registry of active overlays built on createRegistry
  • Automatic z-index calculation (baseZIndex + increment per overlay)
  • globalTop/localTop tracking for keyboard event handling (e.g., Escape key)
  • Parent/child tracking via injection for nested overlays
  • SSR-safe with per-app isolation via createStackPlugin
  • Stack context with dismiss(), scrimZIndex, and isBlocking support

Scrim Component

  • Uses stack context for automatic z-index positioning below top overlay
  • Supports teleport to body and configurable transitions
  • Handles blocking state for non-dismissable dialogs

Dialog Integration

  • DialogContent now registers with stack for z-index coordination
  • Added blocking and disableGlobalStack props
  • Exposes globalTop and zIndex in slot props

API

// Basic usage
const isOpen = shallowRef(false)
const { styles, globalTop, zIndex } = useStack(isOpen, {
  baseZIndex: 2000,
  onDismiss: () => { isOpen.value = false }
})

// Stack context for scrim
import { stack } from '@vuetify/v0'
stack.isActive.value    // boolean - any overlays active?
stack.scrimZIndex.value // number - z-index for scrim
stack.dismiss()         // dismiss top non-blocking overlay

Test plan

  • Unit tests pass for createStack composable
  • Dialog tests pass with stack integration
  • Type checking passes
  • Linting passes for changed files

@pkg-pr-new
Copy link

pkg-pr-new bot commented Jan 30, 2026

Open in StackBlitz

commit: b098e42

Add createStack composable for managing overlay z-index stacking:

- Global reactive registry of active overlays
- Automatic z-index calculation (baseZIndex + increment per overlay)
- globalTop/localTop tracking for keyboard event handling
- Parent/child tracking via injection for nested overlays
- SSR-safe with per-app isolation via createStackPlugin
- Stack context with dismiss(), scrimZIndex, and isBlocking support

Integrate stack with Dialog component:
- DialogContent now registers with stack for z-index coordination
- Added blocking and disableGlobalStack props
- Exposes globalTop and zIndex in slot props

Add Scrim component:
- Uses stack context for automatic z-index positioning
- Supports teleport and transitions
- Handles blocking state (non-dismissable dialogs)
- Add readonly() wrapping to createStackContext return values
- Remove unused StackPluginOptions (baseZIndex, increment)
- Add accessibility attrs to example (role, aria-modal, aria-labelledby)
- Add Escape key handling to example using useHotkey
- Add plugin setup comment to StackProvider
- Add comprehensive tests for plugin, nesting, SSR, dismiss(id)
- Refactor Scrim from Scrim.Root to direct Scrim export
- Change useStack signature: onDismiss as 2nd arg, options as 3rd
- Add inheritAttrs: false to fix attribute forwarding warning
- Add Scrim and stack composables to API hover whitelist
- Update Dialog, docs, and examples for new patterns

BREAKING: useStack(isActive, { onDismiss }) -> useStack(isActive, onDismiss, options?)
@johnleider johnleider added this to the v0.1.x milestone Feb 2, 2026
- Rapid toggle cycles with correct final globalTop state
- Middle overlay closes (z-index preservation)
- Overlay reopen gets new z-index
- Dismiss with non-existent ID (no-op)
- Multiple blocking overlays
- onDismiss that opens another overlay
- Concurrent activation in same tick
- Parent unmount while children active
- Scope disposal during active state
- Many overlays ordering
- Dismiss called multiple times rapidly
@johnleider johnleider merged commit 8d252d2 into master Feb 2, 2026
12 of 13 checks passed
@johnleider johnleider deleted the feat/create-stack branch February 2, 2026 01:36
@johnleider johnleider modified the milestones: v0.1.x, v0.2.0 Feb 2, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant