Refactor #3832 Refactor #3833 - For Dialog

api-generator/components/dialog.js

@@ -189,6 +189,14 @@ const DialogSlots = [
     {
         name: 'footer',
         description: "Custom content for the component's footer"
+    },
+    {
+        name: 'closeicon',
+        description: 'Custom close icon template.'
+    },
+    {
+        name: 'maximizeicon',
+        description: 'Custom maximizeicon icon template of dialog.'
     }
 ];
 

components/lib/dialog/Dialog.d.ts

@@ -146,17 +146,14 @@ export interface DialogProps {
     style?: any;
     /**
      * Icon to display in the dialog close button.
-     * @defaultValue pi pi-times
      */
     closeIcon?: string | undefined;
     /**
      * Icon to display in the dialog maximize button when dialog is not maximized.
-     * @defaultValue pi pi-window-maximize
      */
     maximizeIcon?: string | undefined;
     /**
      * Icon to display in the dialog maximize button when dialog is maximized.
-     * @defaultValue pi pi-window-minimize
      */
     minimizeIcon?: string | undefined;
 }
@@ -177,6 +174,20 @@ export interface DialogSlots {
      * Custom footer template.
      */
     footer(): VNode[];
+    /**
+     * Custom close icon template.
+     */
+    closeicon(): VNode[];
+    /**
+     * Custom maximizeicon icon template of dialog.
+     * @param {Object} scope - maximizeicon icon slot's params.
+     */
+    maximizeicon(scope: {
+        /**
+         * Maximized state as a boolean
+         */
+        maximized: boolean;
+    }): VNode[];
 }
 
 /**

components/lib/dialog/Dialog.vue

@@ -9,7 +9,9 @@
                         </slot>
                         <div class="p-dialog-header-icons">
                             <button v-if="maximizable" :ref="maximizableRef" v-ripple :autofocus="focusableMax" class="p-dialog-header-icon p-dialog-header-maximize p-link" @click="maximize" type="button" :tabindex="maximizable ? '0' : '-1'">
-                                <span :class="maximizeIconClass"></span>
+                                <slot name="maximizeicon" :maximized="maximized">
+                                    <component :is="maximizeIconComponent" :class="maximizeIconClass" />
+                                </slot>
                             </button>
                             <button
                                 v-if="closable"
@@ -22,7 +24,9 @@
                                 type="button"
                                 v-bind="closeButtonProps"
                             >
-                                <span :class="['p-dialog-header-close-icon', closeIcon]"></span>
+                                <slot name="closeicon">
+                                    <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="['p-dialog-header-close-icon', closeIcon]"></component>
+                                </slot>
                             </button>
                         </div>
                     </div>
@@ -44,6 +48,9 @@ import Portal from 'primevue/portal';
 import Ripple from 'primevue/ripple';
 import { DomHandler, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
 import { computed } from 'vue';
+import TimesIcon from 'primevue/icon/times';
+import WindowMaximizeIcon from 'primevue/icon/windowmaximize';
+import WindowMinimizeIcon from 'primevue/icon/windowminimize';
 
 export default {
     name: 'Dialog',
@@ -140,15 +147,15 @@ export default {
         },
         closeIcon: {
             type: String,
-            default: 'pi pi-times'
+            default: undefined
         },
         maximizeIcon: {
             type: String,
-            default: 'pi pi-window-maximize'
+            default: undefined
         },
         minimizeIcon: {
             type: String,
-            default: 'pi pi-window-minimize'
+            default: undefined
         },
         closeButtonProps: {
             type: null,
@@ -169,20 +176,6 @@ export default {
             focusableClose: null
         };
     },
-    documentKeydownListener: null,
-    container: null,
-    mask: null,
-    content: null,
-    headerContainer: null,
-    footerContainer: null,
-    maximizableButton: null,
-    closeButton: null,
-    styleElement: null,
-    dragging: null,
-    documentDragListener: null,
-    documentDragEndListener: null,
-    lastPageX: null,
-    lastPageY: null,
     updated() {
         if (this.visible) {
             this.containerVisible = this.visible;
@@ -475,14 +468,13 @@ export default {
                 }
             ];
         },
+        maximizeIconComponent() {
+            return this.maximized ? (this.minimizeIcon ? 'span' : 'WindowMinimizeIcon') : this.maximizeIcon ? 'span' : 'WindowMaximizeIcon';
+        },
         maximizeIconClass() {
-            return [
-                'p-dialog-header-maximize-icon',
-                {
-                    [this.maximizeIcon]: !this.maximized,
-                    [this.minimizeIcon]: this.maximized
-                }
-            ];
+            const maximizeClasses = this.maximized ? this.minimizeIcon : this.maximizeIcon;
+
+            return `p-dialog-header-maximize-icon ${maximizeClasses}`;
         },
         ariaId() {
             return UniqueComponentId();
@@ -500,12 +492,29 @@ export default {
             return ['p-dialog-content', this.contentClass];
         }
     },
+    documentKeydownListener: null,
+    container: null,
+    mask: null,
+    content: null,
+    headerContainer: null,
+    footerContainer: null,
+    maximizableButton: null,
+    closeButton: null,
+    styleElement: null,
+    dragging: null,
+    documentDragListener: null,
+    documentDragEndListener: null,
+    lastPageX: null,
+    lastPageY: null,
     directives: {
         ripple: Ripple,
         focustrap: FocusTrap
     },
     components: {
-        Portal: Portal
+        Portal: Portal,
+        WindowMinimizeIcon,
+        WindowMaximizeIcon,
+        TimesIcon
     }
 };
 </script>

components/lib/tabview/TabView.vue

@@ -13,7 +13,7 @@
                 v-bind="{ ...previousButtonProps, ...ptm('prevbutton') }"
             >
                 <slot name="previcon">
-                    <component :is="prevIcon ? prevIcon : 'ChevronLeftIcon'" v-bind="ptm('previcon')" aria-hidden="true" />
+                    <component :is="prevIcon ? 'span' : 'ChevronLeftIcon'" v-bind="ptm('previcon')" aria-hidden="true" :class="prevIcon" />
                 </slot>
             </button>
             <div ref="content" class="p-tabview-nav-content" @scroll="onScroll" v-bind="ptm('navcontent')">
@@ -59,7 +59,7 @@
                 v-bind="{ ...nextButtonProps, ...ptm('nextbutton') }"
             >
                 <slot name="nexticon">
-                    <component :is="nextIcon ? nextIcon : 'ChevronRightIcon'" v-bind="ptm('nexticon')" aria-hidden="true" />
+                    <component :is="nextIcon ? 'span' : 'ChevronRightIcon'" v-bind="ptm('nexticon')" aria-hidden="true" :class="nextIcon" />
                 </slot>
             </button>
         </div>