Refactor #3832 Refactor #3833 - ConfirmDialog & ConfirmPopup updates

primefaces · Apr 18, 2023 · 95ca69d · 95ca69d
1 parent 361a0f0
commit 95ca69d
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 6 deletions.
diff --git a/components/lib/confirmdialog/ConfirmDialog.d.ts b/components/lib/confirmdialog/ConfirmDialog.d.ts
@@ -62,6 +62,18 @@ export interface ConfirmDialogSlots {
      * @param {Object} scope - message slot's params.
      */
     message(scope: { message: ConfirmationOptions }): VNode[];
+    /**
+     * Custom icon template.
+     */
+    icon(): VNode[];
+    /**
+     * Custom icon template.
+     */
+    accepticon(): VNode[];
+    /**
+     * Custom icon template.
+     */
+    rejecticon(): VNode[];
 }
 
 /**

diff --git a/components/lib/confirmdialog/ConfirmDialog.vue b/components/lib/confirmdialog/ConfirmDialog.vue
@@ -13,13 +13,28 @@
         @update:visible="onHide"
     >
         <template v-if="!$slots.message">
-            <i v-if="confirmation.icon" :class="iconClass" />
+            <slot name="icon">
+                <component v-if="$slots.icon" :is="$slots.icon" class="p-confirm-dialog-icon" />
+                <span v-else-if="confirmation.icon" :class="iconClass" />
+            </slot>
             <span class="p-confirm-dialog-message">{{ message }}</span>
         </template>
         <component v-else :is="$slots.message" :message="confirmation"></component>
         <template #footer>
-            <CDButton :label="rejectLabel" :icon="rejectIcon" :class="rejectClass" @click="reject()" :autofocus="autoFocusReject" />
-            <CDButton :label="acceptLabel" :icon="acceptIcon" :class="acceptClass" @click="accept()" :autofocus="autoFocusAccept" />
+            <CDButton :label="rejectLabel" :class="rejectClass" iconPos="left" @click="reject()" :autofocus="autoFocusReject">
+                <template #icon="iconProps">
+                    <slot name="rejecticon">
+                        <span :class="[rejectIcon, iconProps.class]" />
+                    </slot>
+                </template>
+            </CDButton>
+            <CDButton :label="acceptLabel" :class="acceptClass" iconPos="left" @click="accept()" :autofocus="autoFocusAccept">
+                <template #icon="iconProps">
+                    <slot name="accepticon">
+                        <span :class="[acceptIcon, iconProps.class]" />
+                    </slot>
+                </template>
+            </CDButton>
         </template>
     </CDialog>
 </template>

diff --git a/components/lib/confirmpopup/ConfirmPopup.d.ts b/components/lib/confirmpopup/ConfirmPopup.d.ts
@@ -30,6 +30,18 @@ export interface ConfirmPopupSlots {
      * @param {Object} scope - message slot's params.
      */
     message(scope: { message: ConfirmationOptions }): VNode[];
+    /**
+     * Custom icon template.
+     */
+    icon(): VNode[];
+    /**
+     * Custom icon template.
+     */
+    accepticon(): VNode[];
+    /**
+     * Custom icon template.
+     */
+    rejecticon(): VNode[];
 }
 
 /**

diff --git a/components/lib/confirmpopup/ConfirmPopup.vue b/components/lib/confirmpopup/ConfirmPopup.vue
@@ -4,14 +4,29 @@
             <div v-if="visible" :ref="containerRef" v-focustrap role="alertdialog" :class="containerClass" :aria-modal="visible" @click="onOverlayClick" @keydown="onOverlayKeydown" v-bind="$attrs">
                 <template v-if="!$slots.message">
                     <div class="p-confirm-popup-content">
-                        <i :class="iconClass" />
+                        <slot name="icon">
+                            <component v-if="$slots.icon" :is="$slots.icon" class="p-confirm-popup-icon" />
+                            <span v-else-if="confirmation.icon" :class="iconClass" />
+                        </slot>
                         <span class="p-confirm-popup-message">{{ confirmation.message }}</span>
                     </div>
                 </template>
                 <component v-else :is="$slots.message" :message="confirmation"></component>
                 <div class="p-confirm-popup-footer">
-                    <CPButton :label="rejectLabel" :icon="rejectIcon" :class="rejectClass" @click="reject()" @keydown="onRejectKeydown" :autofocus="autoFocusReject" />
-                    <CPButton :label="acceptLabel" :icon="acceptIcon" :class="acceptClass" @click="accept()" @keydown="onAcceptKeydown" :autofocus="autoFocusAccept" />
+                    <CPButton :label="rejectLabel" :class="rejectClass" @click="reject()" @keydown="onRejectKeydown" :autofocus="autoFocusReject">
+                        <template #icon="iconProps">
+                            <slot name="rejecticon">
+                                <span :class="[rejectIcon, iconProps.class]" />
+                            </slot>
+                        </template>
+                    </CPButton>
+                    <CPButton :label="acceptLabel" :class="acceptClass" @click="accept()" @keydown="onAcceptKeydown" :autofocus="autoFocusAccept">
+                        <template #icon="iconProps">
+                            <slot name="accepticon">
+                                <span :class="[acceptIcon, iconProps.class]" />
+                            </slot>
+                        </template>
+                    </CPButton>
                 </div>
             </div>
         </transition>