From 652ea15e8b392a83bea9f2f61d50c2d714e1e884 Mon Sep 17 00:00:00 2001
From: Christian Byrne <cbyrne@comfy.org>
Date: Mon, 17 Mar 2025 07:37:19 -0700
Subject: [PATCH] Allow footer component and position props in dialogs (#3090)

---
 src/components/dialog/GlobalDialog.vue |  4 ++++
 src/stores/dialogStore.ts              | 19 +++++++++++++++++++
 2 files changed, 23 insertions(+)

diff --git a/src/components/dialog/GlobalDialog.vue b/src/components/dialog/GlobalDialog.vue
index a20b030b9..e44f09ff2 100644
--- a/src/components/dialog/GlobalDialog.vue
+++ b/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>
 
diff --git a/src/stores/dialogStore.ts b/src/stores/dialogStore.ts
index 6fdda26db..675858a5a 100644
--- a/src/stores/dialogStore.ts
+++ b/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: {