Refactor #3885 - For ConfirmPopup

api-generator/components/confirmpopup.js

@@ -4,6 +4,12 @@ const ConfirmPopupProps = [
         type: 'string',
         default: 'null',
         description: 'Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

components/lib/confirmpopup/ConfirmPopup.d.ts

@@ -11,6 +11,81 @@ import { VNode } from 'vue';
 import { ConfirmationOptions } from '../confirmationoptions';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type ConfirmPopupPassThroughOptionType = ConfirmPopupPassThroughAttributes | ((options: ConfirmPopupPassThroughMethodOptions) => ConfirmPopupPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ConfirmPopupPassThroughMethodOptions {
+    props: ConfirmPopupProps;
+    state: ConfirmPopupState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ConfirmPopupProps.pt}
+ */
+export interface ConfirmPopupPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ConfirmPopupPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: ConfirmPopupPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: ConfirmPopupPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the message's DOM element.
+     */
+    message?: ConfirmPopupPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the footer's DOM element.
+     */
+    footer?: ConfirmPopupPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the reject button's DOM element.
+     */
+    rejectButton?: ConfirmPopupPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the reject icon's DOM element.
+     */
+    rejectIcon?: ConfirmPopupPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the accept button's DOM element.
+     */
+    acceptButton?: ConfirmPopupPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the accept icon's DOM element.
+     */
+    acceptIcon?: ConfirmPopupPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface ConfirmPopupPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in ConfirmPopup component.
+ */
+export interface ConfirmPopupState {
+    /**
+     * Current visible state as a boolean.
+     * @defaultValue false
+     */
+    visible: boolean;
+    /**
+     * Current confirmation message.
+     */
+    confirmation: ConfirmationOptions;
+}
+
 /**
  * Defines valid properties in ConfirmPopup component.
  */
@@ -19,6 +94,11 @@ export interface ConfirmPopupProps {
      * Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.
      */
     group?: string;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ConfirmPopupPassThroughOptions}
+     */
+    pt?: ConfirmPopupPassThroughOptions;
 }
 
 /**

components/lib/confirmpopup/ConfirmPopup.vue

@@ -1,29 +1,29 @@
 <template>
     <Portal>
         <transition name="p-confirm-popup" @enter="onEnter" @after-enter="onAfterEnter" @leave="onLeave" @after-leave="onAfterLeave">
-            <div v-if="visible" :ref="containerRef" v-focustrap role="alertdialog" :class="containerClass" :aria-modal="visible" @click="onOverlayClick" @keydown="onOverlayKeydown" v-bind="$attrs">
+            <div v-if="visible" :ref="containerRef" v-focustrap role="alertdialog" :class="containerClass" :aria-modal="visible" @click="onOverlayClick" @keydown="onOverlayKeydown" v-bind="{ ...$attrs, ...ptm('root') }">
                 <template v-if="!$slots.message">
-                    <div class="p-confirm-popup-content">
+                    <div class="p-confirm-popup-content" v-bind="ptm('content')">
                         <slot name="icon" class="p-confirm-popup-icon">
                             <component v-if="$slots.icon" :is="$slots.icon" class="p-confirm-popup-icon" />
-                            <span v-else-if="confirmation.icon" :class="iconClass" />
+                            <span v-else-if="confirmation.icon" :class="iconClass" v-bind="ptm('icon')" />
                         </slot>
-                        <span class="p-confirm-popup-message">{{ confirmation.message }}</span>
+                        <span class="p-confirm-popup-message" v-bind="ptm('message')">{{ confirmation.message }}</span>
                     </div>
                 </template>
                 <component v-else :is="$slots.message" :message="confirmation"></component>
-                <div class="p-confirm-popup-footer">
+                <div class="p-confirm-popup-footer" v-bind="ptm('footer')">
-                    <CPButton :label="rejectLabel" :class="rejectClass" @click="reject()" @keydown="onRejectKeydown" :autofocus="autoFocusReject">
+                    <CPButton :label="rejectLabel" :class="rejectClass" @click="reject()" @keydown="onRejectKeydown" :autofocus="autoFocusReject" v-bind="ptm('rejectButton')">
                         <template #icon="iconProps">
                             <slot name="rejecticon">
-                                <span :class="[rejectIcon, iconProps.class]" />
+                                <span :class="[rejectIcon, iconProps.class]" v-bind="ptm('rejectIcon')" />
                             </slot>
                         </template>
                     </CPButton>
-                    <CPButton :label="acceptLabel" :class="acceptClass" @click="accept()" @keydown="onAcceptKeydown" :autofocus="autoFocusAccept">
+                    <CPButton :label="acceptLabel" :class="acceptClass" @click="accept()" @keydown="onAcceptKeydown" :autofocus="autoFocusAccept" v-bind="ptm('acceptButton')">
                         <template #icon="iconProps">
                             <slot name="accepticon">
-                                <span :class="[acceptIcon, iconProps.class]" />
+                                <span :class="[acceptIcon, iconProps.class]" v-bind="ptm('acceptIcon')" />
                             </slot>
                         </template>
                     </CPButton>
@@ -34,6 +34,7 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import Button from 'primevue/button';
 import ConfirmationEventBus from 'primevue/confirmationeventbus';
 import FocusTrap from 'primevue/focustrap';
@@ -43,6 +44,7 @@ import { ConnectedOverlayScrollHandler, DomHandler, ZIndexUtils } from 'primevue
 
 export default {
     name: 'ConfirmPopup',
+    extends: BaseComponent,
     inheritAttrs: false,
     props: {
         group: String