Refactor #3911 - For Toast

api-generator/components/toast.js

@@ -28,6 +28,12 @@ const ToastProps = [
         type: 'object',
         default: 'null',
         description: 'Object literal to define widths per screen size.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

components/lib/toast/Toast.d.ts

@@ -10,6 +10,70 @@
 import { ButtonHTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type ToastPassThroughOptionType = ToastPassThroughAttributes | ((options: ToastPassThroughMethodOptions) => ToastPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ToastPassThroughMethodOptions {
+    props: ToastProps;
+    state: ToastState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ToastProps.pt}
+ */
+export interface ToastPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ToastPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the container's DOM element.
+     */
+    container?: ToastPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: ToastPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: ToastPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the text's DOM element.
+     */
+    text?: ToastPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the summary's DOM element.
+     */
+    summary?: ToastPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the detail's DOM element.
+     */
+    detail?: ToastPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the button container's DOM element.
+     */
+    buttonContainer?: ToastPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the button's DOM element.
+     */
+    button?: ToastPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the button icon's DOM element.
+     */
+    buttonIcon?: ToastPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface ToastPassThroughAttributes {
+    [key: string]: any;
+}
+
 /**
  * Defines message options in Toast component.
  */
@@ -65,6 +129,16 @@ export interface ToastBreakpointsType {
     [key: string]: any;
 }
 
+/**
+ * Defines current inline state in Toast component.
+ */
+export interface ToastState {
+    /**
+     * Current messages.
+     */
+    messages: any[];
+}
+
 /**
  * Defines valid properties in Toast component.
  */
@@ -123,6 +197,11 @@ export interface ToastProps {
      * @deprecated since v3.26.0. Use 'pt' property.
      */
     closeButtonProps?: ButtonHTMLAttributes | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ToastPassThroughOptions}
+     */
+    pt?: ToastPassThroughOptions;
 }
 
 /**

components/lib/toast/Toast.vue

@@ -1,6 +1,6 @@
 <template>
     <Portal>
-        <div ref="container" :class="containerClass" v-bind="$attrs">
+        <div ref="container" :class="containerClass" v-bind="{ ...$attrs, ...ptm('root') }">
             <transition-group name="p-toast-message" tag="div" @enter="onEnter" @leave="onLeave">
                 <ToastMessage
                     v-for="msg of messages"
@@ -14,6 +14,7 @@
                     :successIcon="successIcon"
                     :closeButtonProps="closeButtonProps"
                     @close="remove($event)"
+                    :pt="pt"
                 />
             </transition-group>
         </div>
@@ -21,6 +22,7 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import Portal from 'primevue/portal';
 import ToastEventBus from 'primevue/toasteventbus';
 import { ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
@@ -30,6 +32,7 @@ var messageIdx = 0;
 
 export default {
     name: 'Toast',
+    extends: BaseComponent,
     inheritAttrs: false,
     emits: ['close', 'life-end'],
     props: {

components/lib/toast/ToastMessage.vue

@@ -1,17 +1,17 @@
 <template>
-    <div :class="containerClass" role="alert" aria-live="assertive" aria-atomic="true">
-        <div class="p-toast-message-content" :class="message.contentStyleClass">
+    <div :class="containerClass" role="alert" aria-live="assertive" aria-atomic="true" v-bind="ptm('container')">
+        <div class="p-toast-message-content" :class="message.contentStyleClass" v-bind="ptm('content')">
             <template v-if="!templates.message">
-                <component :is="templates.icon ? templates.icon : iconComponent.name ? iconComponent : 'span'" :class="iconClass" class="p-toast-message-icon" />
-                <div class="p-toast-message-text">
-                    <span class="p-toast-summary">{{ message.summary }}</span>
-                    <div class="p-toast-detail">{{ message.detail }}</div>
+                <component :is="templates.icon ? templates.icon : iconComponent.name ? iconComponent : 'span'" :class="iconClass" class="p-toast-message-icon" v-bind="ptm('icon')" />
+                <div class="p-toast-message-text" v-bind="ptm('text')">
+                    <span class="p-toast-summary" v-bind="ptm('summary')">{{ message.summary }}</span>
+                    <div class="p-toast-detail" v-bind="ptm('detail')">{{ message.detail }}</div>
                 </div>
             </template>
             <component v-else :is="templates.message" :message="message"></component>
-            <div v-if="message.closable !== false">
-                <button v-ripple class="p-toast-icon-close p-link" type="button" :aria-label="closeAriaLabel" @click="onCloseClick" autofocus v-bind="closeButtonProps">
-                    <component :is="templates.closeicon || 'TimesIcon'" :class="['p-toast-icon-close-icon', closeIcon]" />
+            <div v-if="message.closable !== false" v-bind="ptm('buttonContainer')">
+                <button v-ripple class="p-toast-icon-close p-link" type="button" :aria-label="closeAriaLabel" @click="onCloseClick" autofocus v-bind="{ ...closeButtonProps, ...ptm('button') }">
+                    <component :is="templates.closeicon || 'TimesIcon'" :class="['p-toast-icon-close-icon', closeIcon]" v-bind="ptm('buttonIcon')" />
                 </button>
             </div>
         </div>
@@ -19,6 +19,7 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import CheckIcon from 'primevue/icons/check';
 import ExclamationTriangleIcon from 'primevue/icons/exclamationtriangle';
 import InfoCircleIcon from 'primevue/icons/infocircle';
@@ -28,6 +29,7 @@ import Ripple from 'primevue/ripple';
 
 export default {
     name: 'ToastMessage',
+    extends: BaseComponent,
     emits: ['close'],
     props: {
         message: {