Refactor #5437 - For ConfirmDialog/ConfirmPopup

components/lib/confirmationoptions/ConfirmationOptions.d.ts

@@ -5,6 +5,7 @@
  * @module confirmationoptions
  *
  */
+import { ButtonProps } from '../button';
 
 /**
  * Confirmation Service options.
@@ -85,4 +86,14 @@ export interface ConfirmationOptions {
      * Element to receive the focus when the dialog gets visible, valid values are "accept" and "reject".
      */
     defaultFocus?: string | undefined;
+    /**
+     * Used to pass all properties of the ButtonProps to the reject button inside the component.
+     * @type {ButtonProps}
+     */
+    rejectProps?: object | undefined;
+    /**
+     * Used to pass all properties of the ButtonProps to the accept button inside the component.
+     * @type {ButtonProps}
+     */
+    acceptProps?: object | undefined;
 }

components/lib/confirmdialog/BaseConfirmDialog.vue

@@ -14,20 +14,6 @@ export default {
         draggable: {
             type: Boolean,
             default: true
-        },
-        rejectButtonProps: {
-            type: Object,
-            default() {
-                return {
-                    text: true
-                };
-            }
-        },
-        acceptButtonProps: {
-            type: Object,
-            default() {
-                return {};
-            }
         }
     },
     style: ConfirmDialogStyle,

components/lib/confirmdialog/ConfirmDialog.d.ts

@@ -9,7 +9,7 @@
  */
 import { VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
-import { ButtonPassThroughOptions, ButtonProps } from '../button';
+import { ButtonPassThroughOptions } from '../button';
 import { ConfirmationOptions } from '../confirmationoptions';
 import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
@@ -184,18 +184,6 @@ export interface ConfirmDialogProps {
      * @defaultValue true
      */
     draggable?: boolean | undefined;
-    /**
-     * Used to pass all properties of the ButtonProps to the reject button inside the component.
-     * @type {ButtonProps}
-     * @defaultValue { text: true }
-     */
-    rejectButtonProps?: object | undefined;
-    /**
-     * Used to pass all properties of the ButtonProps to the accept button inside the component.
-     * @type {ButtonProps}
-     * @defaultValue {}
-     */
-    acceptButtonProps?: object | undefined;
     /**
      * Used to pass attributes to DOM elements inside the component.
      * @type {ConfirmDialogPassThroughOptions}

components/lib/confirmdialog/ConfirmDialog.vue

@@ -28,14 +28,23 @@
             <component v-else :is="$slots.message" :message="confirmation"></component>
         </template>
         <template v-if="!$slots.container" #footer>
-            <Button :label="rejectLabel" :class="[cx('rejectButton'), confirmation.rejectClass]" @click="reject()" :autofocus="autoFocusReject" :unstyled="unstyled" v-bind="rejectButtonProps" :pt="ptm('rejectButton')" :text="rejectButtonProps.text">
+            <Button
+                :class="[cx('rejectButton'), confirmation.rejectClass]"
+                :autofocus="autoFocusReject"
+                :unstyled="unstyled"
+                :text="confirmation.rejectProps?.text || false"
+                @click="reject()"
+                v-bind="confirmation.rejectProps"
+                :label="rejectLabel"
+                :pt="ptm('rejectButton')"
+            >
                 <template v-if="rejectIcon || $slots.rejecticon" #icon="iconProps">
                     <slot name="rejecticon">
                         <span :class="[rejectIcon, iconProps.class]" v-bind="ptm('rejectButton')['icon']" data-pc-section="rejectbuttonicon" />
                     </slot>
                 </template>
             </Button>
-            <Button :label="acceptLabel" :class="[cx('acceptButton'), confirmation.acceptClass]" @click="accept()" :autofocus="autoFocusAccept" :unstyled="unstyled" v-bind="acceptButtonProps" :pt="ptm('acceptButton')">
+            <Button :label="acceptLabel" :class="[cx('acceptButton'), confirmation.acceptClass]" :autofocus="autoFocusAccept" :unstyled="unstyled" @click="accept()" v-bind="confirmation.acceptProps" :pt="ptm('acceptButton')">
                 <template v-if="acceptIcon || $slots.accepticon" #icon="iconProps">
                     <slot name="accepticon">
                         <span :class="[acceptIcon, iconProps.class]" v-bind="ptm('acceptButton')['icon']" data-pc-section="acceptbuttonicon" />
@@ -132,16 +141,28 @@ export default {
             return this.confirmation ? this.confirmation.position : null;
         },
         acceptLabel() {
-            return this.confirmation ? this.confirmation.acceptLabel || this.acceptButtonProps.label || this.$primevue.config.locale.accept : null;
+            if (this.confirmation) {
+                const confirmation = this.confirmation;
+
+                return confirmation.acceptLabel ? confirmation.acceptLabel : confirmation.acceptProps ? confirmation.acceptProps.label || this.$primevue.config.locale.accept : null;
+            }
+
+            return null;
         },
         rejectLabel() {
-            return this.confirmation ? this.confirmation.rejectLabel || this.rejectButtonProps.label || this.$primevue.config.locale.reject : null;
+            if (this.confirmation) {
+                const confirmation = this.confirmation;
+
+                return confirmation.rejectLabel ? confirmation.rejectLabel : confirmation.rejectProps ? confirmation.rejectProps.label || this.$primevue.config.locale.reject : null;
+            }
+
+            return null;
         },
         acceptIcon() {
-            return this.confirmation ? this.confirmation.acceptIcon : null;
+            return this.confirmation ? this.confirmation.acceptIcon : this.confirmation?.acceptProps ? this.confirmation.acceptProps.icon : null;
         },
         rejectIcon() {
-            return this.confirmation ? this.confirmation.rejectIcon : null;
+            return this.confirmation ? this.confirmation.rejectIcon : this.confirmation?.rejectProps ? this.confirmation.rejectProps.icon : null;
         },
         autoFocusAccept() {
             return this.confirmation.defaultFocus === undefined || this.confirmation.defaultFocus === 'accept' ? true : false;

components/lib/confirmpopup/BaseConfirmPopup.vue

@@ -6,24 +6,7 @@ export default {
     name: 'BaseConfirmPopup',
     extends: BaseComponent,
     props: {
-        group: String,
+        group: String
-        rejectButtonProps: {
-            type: Object,
-            default() {
-                return {
-                    size: 'small',
-                    text: true
-                };
-            }
-        },
-        acceptButtonProps: {
-            type: Object,
-            default() {
-                return {
-                    size: 'small'
-                };
-            }
-        }
     },
     style: ConfirmPopupStyle,
     provide() {

components/lib/confirmpopup/ConfirmPopup.d.ts

@@ -9,7 +9,7 @@
  */
 import { TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
-import { ButtonPassThroughOptions, ButtonProps } from '../button';
+import { ButtonPassThroughOptions } from '../button';
 import { ConfirmationOptions } from '../confirmationoptions';
 import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
@@ -138,18 +138,6 @@ export interface ConfirmPopupProps {
      * Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.
      */
     group?: string;
-    /**
-     * Used to pass all properties of the ButtonProps to the reject button inside the component.
-     * @type {ButtonProps}
-     * @defaultValue { size: 'small', text: true }
-     */
-    rejectButtonProps?: object | undefined;
-    /**
-     * Used to pass all properties of the ButtonProps to the accept button inside the component.
-     * @type {ButtonProps}
-     * @defaultValue { size: 'small' }
-     */
-    acceptButtonProps?: object | undefined;
     /**
      * Used to pass attributes to DOM elements inside the component.
      * @type {ConfirmPopupPassThroughOptions}

components/lib/confirmpopup/ConfirmPopup.vue

@@ -16,16 +16,16 @@
                     <component v-else :is="$slots.message" :message="confirmation"></component>
                     <div :class="cx('footer')" v-bind="ptm('footer')">
                         <Button
-                            :label="rejectLabel"
+                            :class="[cx('rejectButton'), confirmation.rejectClass]"
+                            :autofocus="autoFocusReject"
+                            :unstyled="unstyled"
+                            :size="confirmation.rejectProps?.size || 'small'"
+                            :text="confirmation.rejectProps?.text || false"
                             @click="reject()"
                             @keydown="onRejectKeydown"
-                            :autofocus="autoFocusReject"
+                            v-bind="confirmation.rejectProps"
-                            :class="[cx('rejectButton'), confirmation.rejectClass]"
+                            :label="rejectLabel"
-                            :unstyled="unstyled"
-                            v-bind="rejectButtonProps"
                             :pt="ptm('rejectButton')"
-                            :size="rejectButtonProps.size"
-                            :text="rejectButtonProps.text"
                         >
                             <template v-if="rejectIcon || $slots.rejecticon" #icon="iconProps">
                                 <slot name="rejecticon">
@@ -34,15 +34,15 @@
                             </template>
                         </Button>
                         <Button
-                            :label="acceptLabel"
+                            :class="[cx('acceptButton'), confirmation.acceptClass]"
+                            :autofocus="autoFocusAccept"
+                            :unstyled="unstyled"
+                            :size="confirmation.acceptProps?.size || 'small'"
                             @click="accept()"
                             @keydown="onAcceptKeydown"
-                            :autofocus="autoFocusAccept"
+                            v-bind="confirmation.acceptProps"
-                            :class="[cx('acceptButton'), confirmation.acceptClass]"
+                            :label="acceptLabel"
-                            :unstyled="unstyled"
-                            v-bind="acceptButtonProps"
                             :pt="ptm('acceptButton')"
-                            :size="acceptButtonProps.size"
                         >
                             <template v-if="acceptIcon || $slots.accepticon" #icon="iconProps">
                                 <slot name="accepticon">
@@ -300,16 +300,28 @@ export default {
             return this.confirmation ? this.confirmation.message : null;
         },
         acceptLabel() {
-            return this.confirmation ? this.confirmation.acceptLabel || this.acceptButtonProps.label || this.$primevue.config.locale.accept : null;
+            if (this.confirmation) {
+                const confirmation = this.confirmation;
+
+                return confirmation.acceptLabel ? confirmation.acceptLabel : confirmation.acceptProps ? confirmation.acceptProps.label || this.$primevue.config.locale.accept : null;
+            }
+
+            return null;
         },
         rejectLabel() {
-            return this.confirmation ? this.confirmation.rejectLabel || this.rejectButtonProps.label || this.$primevue.config.locale.reject : null;
+            if (this.confirmation) {
+                const confirmation = this.confirmation;
+
+                return confirmation.rejectLabel ? confirmation.rejectLabel : confirmation.rejectProps ? confirmation.rejectProps.label || this.$primevue.config.locale.reject : null;
+            }
+
+            return null;
         },
         acceptIcon() {
-            return this.confirmation ? this.confirmation.acceptIcon : null;
+            return this.confirmation ? this.confirmation.acceptIcon : this.confirmation?.acceptProps ? this.confirmation.acceptProps.icon : null;
         },
         rejectIcon() {
-            return this.confirmation ? this.confirmation.rejectIcon : null;
+            return this.confirmation ? this.confirmation.rejectIcon : this.confirmation?.rejectProps ? this.confirmation.rejectProps.icon : null;
         }
     },
     components: {