@polymarbot/nuxt-layer-shadcn-ui 0.8.0 → 0.8.1

package/app/assets/styles/z-index.css

@@ -8,6 +8,7 @@
  * Stacking order (low → high):
  *   layout header                         z-100  (project convention)
  *   dialog / sheet (Modal / Drawer)       z-200  (cover the header)
+ *   alert dialog (system interrupts)      z-250  (always above other modals)
  *   tooltip / popover / dropdown / select z-300  (above modal when nested)
  * ========================================================================= */
 
@@ -19,6 +20,17 @@
   z-index: 200;
 }
 
+/* AlertDialog must always sit above regular Modals, regardless of teleport
+ * order. Vue's <Teleport> places content at a stable anchor based on the
+ * host component's mount time — so an AlertDialog declared in app.vue (early
+ * mount) ends up *behind* a page-level Modal opened later. The overlay is
+ * matched via :has() because reka-ui's DialogPortal renders it as the
+ * adjacent previous sibling of the content. */
+[data-slot='dialog-content'][data-alert-dialog],
+[data-slot='dialog-overlay']:has(+ [data-slot='dialog-content'][data-alert-dialog]) {
+  z-index: 250;
+}
+
 [data-slot='tooltip-content'],
 [data-slot='popover-content'],
 [data-slot='dropdown-menu-content'],

package/app/components/ui/AlertDialog/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { current, isOpen, close, onClosed } = useDialogState()
+const { current, isOpen, isActive, close, onClosed } = useDialogState()
 
 const isAlert = computed(() => current.value?.options.rejectLabel === '')
 const isDestructive = computed(() => {
@@ -10,6 +10,8 @@ const isDestructive = computed(() => {
 
 <template>
   <Modal
+    v-if="isActive"
+    data-alert-dialog
     :visible="isOpen"
     :title="current?.options.title"
     :type="current?.options.type"

package/app/components/ui/Drawer/index.vue

@@ -11,6 +11,8 @@ import {
 } from '../../shadcn/sheet'
 import type { DrawerProps } from './types'
 
+defineOptions({ inheritAttrs: false })
+
 const props = withDefaults(defineProps<DrawerProps>(), {
   showClose: true,
   closeOnClickOutside: false,
@@ -92,6 +94,7 @@ const contentClass = computed(() =>
     </SheetTrigger>
 
     <SheetContent
+      v-bind="$attrs"
       :side="side"
       :class="contentClass"
       @pointerDownOutside="onPointerDownOutside"

package/app/components/ui/Modal/index.vue

@@ -11,6 +11,8 @@ import {
 } from '../../shadcn/dialog'
 import type { ModalProps } from './types'
 
+defineOptions({ inheritAttrs: false })
+
 const props = withDefaults(defineProps<ModalProps>(), {
   showClose: true,
   closeOnClickOutside: false,
@@ -97,6 +99,7 @@ const contentClass = computed(() =>
     </DialogTrigger>
 
     <DialogContent
+      v-bind="$attrs"
       :class="contentClass"
       :showCloseButton="false"
       @pointerDownOutside="onPointerDownOutside"

package/app/composables/useDialog.ts

@@ -18,6 +18,7 @@ interface DialogQueueItem {
 
 const dialogQueue = reactive<DialogQueueItem[]>([])
 const isOpen = ref(false)
+const mountedInstances = ref<symbol[]>([])
 
 function showDialog (options: DialogOptions): Promise<boolean> {
   return new Promise<boolean>(resolve => {
@@ -52,8 +53,22 @@ export function useDialog () {
 
 /**
  * Internal composable for the AlertDialog component to access dialog queue.
+ *
+ * Multiple `<AlertDialog />` instances can be mounted simultaneously (e.g. in
+ * Storybook docs view), but only the first one renders the modal — the rest
+ * stay inert via `isActive`. This prevents stacked overlays and duplicate
+ * `onClosed` events from over-shifting the shared queue.
  */
 export function useDialogState () {
+  const id = Symbol('AlertDialog')
+  mountedInstances.value.push(id)
+
+  onScopeDispose(() => {
+    const idx = mountedInstances.value.indexOf(id)
+    if (idx >= 0) mountedInstances.value.splice(idx, 1)
+  })
+
+  const isActive = computed(() => mountedInstances.value[0] === id)
   const current = computed(() => dialogQueue[0] ?? null)
 
   /** Resolve current dialog and trigger close animation */
@@ -72,5 +87,5 @@ export function useDialogState () {
     }
   }
 
-  return { current, isOpen, close, onClosed }
+  return { current, isOpen, isActive, close, onClosed }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polymarbot/nuxt-layer-shadcn-ui",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "Nuxt layer providing shadcn-vue based UI components",
   "type": "module",
   "main": "./nuxt.config.ts",
@@ -42,5 +42,5 @@
     "vue-i18n": "^11",
     "vue-router": "^4 || ^5"
   },
-  "gitHead": "dbce6d8341e369cdd6ae0c7008b31325c339d200"
+  "gitHead": "6e895437229b0f15e709d90785903ea846399c36"
 }