Allow footer component and position props in dialogs (#3090)

src/components/dialog/GlobalDialog.vue

@@ -25,6 +25,10 @@
       v-bind="item.contentProps"
       :maximized="item.dialogComponentProps.maximized"
     />
+
+    <template #footer v-if="item.footerComponent">
+      <component :is="item.footerComponent" />
+    </template>
   </Dialog>
 </template>
 

src/stores/dialogStore.ts

@@ -7,11 +7,24 @@ import { type Component, markRaw, ref } from 'vue'
 
 import type GlobalDialog from '@/components/dialog/GlobalDialog.vue'
 
+type DialogPosition =
+  | 'center'
+  | 'top'
+  | 'bottom'
+  | 'left'
+  | 'right'
+  | 'topleft'
+  | 'topright'
+  | 'bottomleft'
+  | 'bottomright'
+
 interface CustomDialogComponentProps {
   maximizable?: boolean
   maximized?: boolean
   onClose?: () => void
   closable?: boolean
+  modal?: boolean
+  position?: DialogPosition
   pt?: DialogPassThroughOptions
 }
 
@@ -25,6 +38,7 @@ interface DialogInstance {
   headerComponent?: Component
   component: Component
   contentProps: Record<string, any>
+  footerComponent?: Component
   dialogComponentProps: DialogComponentProps
 }
 
@@ -32,6 +46,7 @@ export interface ShowDialogOptions {
   key?: string
   title?: string
   headerComponent?: Component
+  footerComponent?: Component
   component: Component
   props?: Record<string, any>
   dialogComponentProps?: DialogComponentProps
@@ -66,6 +81,7 @@ export const useDialogStore = defineStore('dialog', () => {
     key: string
     title?: string
     headerComponent?: Component
+    footerComponent?: Component
     component: Component
     props?: Record<string, any>
     dialogComponentProps?: DialogComponentProps
@@ -81,6 +97,9 @@ export const useDialogStore = defineStore('dialog', () => {
       headerComponent: options.headerComponent
         ? markRaw(options.headerComponent)
         : undefined,
+      footerComponent: options.footerComponent
+        ? markRaw(options.footerComponent)
+        : undefined,
       component: markRaw(options.component),
       contentProps: { ...options.props },
       dialogComponentProps: {