Change dialog to multi-window mode (#1695)

Fixed Dropdown's z-index being below the dialog

src/components/dialog/GlobalDialog.vue

@@ -1,61 +1,51 @@
 <!-- The main global dialog to show various things -->
 <template>
   <Dialog
-    v-model:visible="dialogStore.isVisible"
+    v-for="(item, index) in dialogStore.dialogStack"
+    :key="item.key"
+    v-model:visible="item.visible"
     class="global-dialog"
-    modal
-    closable
-    closeOnEscape
-    dismissableMask
-    :maximizable="maximizable"
-    :maximized="maximized"
-    @hide="dialogStore.closeDialog"
-    @maximize="onMaximize"
-    @unmaximize="onUnmaximize"
-    :aria-labelledby="headerId"
+    v-bind="item.dialogComponentProps"
+    :auto-z-index="false"
+    :pt:mask:style="{ zIndex: baseZIndex + index + 1 }"
+    :aria-labelledby="item.key"
   >
     <template #header>
       <component
-        v-if="dialogStore.headerComponent"
-        :is="dialogStore.headerComponent"
-        :id="headerId"
+        v-if="item.headerComponent"
+        :is="item.headerComponent"
+        :id="item.key"
       />
-      <h3 v-else :id="headerId">{{ dialogStore.title || ' ' }}</h3>
+      <h3 v-else :id="item.key">{{ item.title || ' ' }}</h3>
     </template>
 
-    <component :is="dialogStore.component" v-bind="contentProps" />
+    <component
+      :is="item.component"
+      v-bind="item.contentProps"
+      :maximized="item.dialogComponentProps.maximized"
+    />
   </Dialog>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, onMounted } from 'vue'
+import { ZIndex } from '@primeuix/utils/zindex'
+import { usePrimeVue } from '@primevue/core'
 import { useDialogStore } from '@/stores/dialogStore'
 import Dialog from 'primevue/dialog'
 
 const dialogStore = useDialogStore()
-const maximizable = computed(
-  () => dialogStore.dialogComponentProps.maximizable ?? false
-)
-const maximized = ref(false)
 
-const onMaximize = () => {
-  maximized.value = true
-}
+const primevue = usePrimeVue()
 
-const onUnmaximize = () => {
-  maximized.value = false
-}
+const baseZIndex = computed(() => {
+  return primevue?.config?.zIndex?.modal ?? 1100
+})
 
-const contentProps = computed(() =>
-  maximizable.value
-    ? {
-        ...dialogStore.props,
-        maximized: maximized.value
-      }
-    : dialogStore.props
-)
-
-const headerId = `dialog-${Math.random().toString(36).substr(2, 9)}`
+onMounted(() => {
+  const mask = document.createElement('div')
+  ZIndex.set('model', mask, baseZIndex.value)
+})
 </script>
 
 <style>

src/stores/dialogStore.ts

@@ -2,52 +2,126 @@
 // Currently we need to bridge between legacy app code and Vue app with a Pinia store.
 
 import { defineStore } from 'pinia'
-import { ref, shallowRef, type Component, markRaw } from 'vue'
+import { ref, type Component, markRaw } from 'vue'
 
 interface DialogComponentProps {
   maximizable?: boolean
   onClose?: () => void
 }
 
-export const useDialogStore = defineStore('dialog', () => {
-  const isVisible = ref(false)
-  const title = ref('')
-  const headerComponent = shallowRef<Component | null>(null)
-  const component = shallowRef<Component | null>(null)
-  const props = ref<Record<string, any>>({})
-  const dialogComponentProps = ref<DialogComponentProps>({})
+interface DialogInstance {
+  key: string
+  visible: boolean
+  title?: string
+  headerComponent?: Component
+  component: Component
+  contentProps: Record<string, any>
+  dialogComponentProps: Record<string, any>
+}
 
-  function showDialog(options: {
+export const useDialogStore = defineStore('dialog', () => {
+  const dialogStack = ref<DialogInstance[]>([])
+
+  const genDialogKey = () => `dialog-${Math.random().toString(36).slice(2, 9)}`
+
+  function riseDialog(options: { key: string }) {
+    const dialogKey = options.key
+
+    const index = dialogStack.value.findIndex((d) => d.key === dialogKey)
+    if (index !== -1) {
+      const dialogs = dialogStack.value.splice(index, 1)
+      dialogStack.value.push(...dialogs)
+    }
+  }
+
+  function closeDialog(options?: { key: string }) {
+    if (!options) {
+      dialogStack.value.pop()
+      return
+    }
+
+    const dialogKey = options.key
+
+    const index = dialogStack.value.findIndex((d) => d.key === dialogKey)
+    if (index === -1) {
+      return
+    }
+    dialogStack.value.splice(index, 1)
+  }
+
+  function createDialog(options: {
+    key: string
     title?: string
     headerComponent?: Component
     component: Component
     props?: Record<string, any>
     dialogComponentProps?: DialogComponentProps
   }) {
-    isVisible.value = true
-    title.value = options.title ?? ''
-    headerComponent.value = options.headerComponent
-      ? markRaw(options.headerComponent)
-      : null
-    component.value = markRaw(options.component)
-    props.value = options.props || {}
-    dialogComponentProps.value = options.dialogComponentProps || {}
+    const dialog = {
+      key: options.key,
+      visible: true,
+      title: options.title,
+      headerComponent: options.headerComponent
+        ? markRaw(options.headerComponent)
+        : undefined,
+      component: markRaw(options.component),
+      contentProps: { ...options.props },
+      dialogComponentProps: {
+        maximizable: false,
+        modal: true,
+        closable: true,
+        closeOnEscape: true,
+        dismissableMask: true,
+        ...options.dialogComponentProps,
+        maximized: false,
+        onMaximize: () => {
+          dialog.dialogComponentProps.maximized = true
+        },
+        onUnmaximize: () => {
+          dialog.dialogComponentProps.maximized = false
+        },
+        onAfterHide: () => {
+          options.dialogComponentProps?.onClose?.()
+          closeDialog(dialog)
+        },
+        pt: {
+          root: {
+            onMousedown: () => {
+              riseDialog(dialog)
+            }
+          }
+        }
+      }
+    }
+    dialogStack.value.push(dialog)
+
+    return dialog
   }
 
-  function closeDialog() {
-    if (dialogComponentProps.value.onClose) {
-      dialogComponentProps.value.onClose()
+  function showDialog(options: {
+    key?: string
+    title?: string
+    headerComponent?: Component
+    component: Component
+    props?: Record<string, any>
+    dialogComponentProps?: DialogComponentProps
+  }) {
+    const dialogKey = options.key || genDialogKey()
+
+    let dialog = dialogStack.value.find((d) => d.key === dialogKey)
+
+    if (dialog) {
+      dialog.visible = true
+      riseDialog(dialog)
+    } else {
+      dialog = createDialog({ ...options, key: dialogKey })
     }
-    isVisible.value = false
+    return dialog
   }
 
   return {
-    isVisible,
-    title,
-    headerComponent,
-    component,
-    props,
-    dialogComponentProps,
+    dialogStack,
+    riseDialog,
     showDialog,
     closeDialog
   }