primevue 4.3.1 → 4.3.3

package/timeline/Timeline.vue

@@ -1,18 +1,18 @@
 <template>
-    <div :class="cx('root')" v-bind="ptmi('root')">
-        <div v-for="(item, index) of value" :key="getKey(item, index)" :class="cx('event')" v-bind="getPTOptions('event', index)">
-            <div :class="cx('eventOpposite', { index })" v-bind="getPTOptions('eventOpposite', index)">
+    <div :class="cx('root')" v-bind="ptmi('root')" :data-p="dataP">
+        <div v-for="(item, index) of value" :key="getKey(item, index)" :class="cx('event')" v-bind="getPTOptions('event', index)" :data-p="dataP">
+            <div :class="cx('eventOpposite', { index })" v-bind="getPTOptions('eventOpposite', index)" :data-p="dataP">
                 <slot name="opposite" :item="item" :index="index"></slot>
             </div>
-            <div :class="cx('eventSeparator')" v-bind="getPTOptions('eventSeparator', index)">
+            <div :class="cx('eventSeparator')" v-bind="getPTOptions('eventSeparator', index)" :data-p="dataP">
                 <slot name="marker" :item="item" :index="index">
-                    <div :class="cx('eventMarker')" v-bind="getPTOptions('eventMarker', index)"></div>
+                    <div :class="cx('eventMarker')" v-bind="getPTOptions('eventMarker', index)" :data-p="dataP"></div>
                 </slot>
                 <slot v-if="index !== value.length - 1" name="connector" :item="item" :index="index">
-                    <div :class="cx('eventConnector')" v-bind="getPTOptions('eventConnector', index)"></div>
+                    <div :class="cx('eventConnector')" v-bind="getPTOptions('eventConnector', index)" :data-p="dataP"></div>
                 </slot>
             </div>
-            <div :class="cx('eventContent')" v-bind="getPTOptions('eventContent', index)">
+            <div :class="cx('eventContent')" v-bind="getPTOptions('eventContent', index)" :data-p="dataP">
                 <slot name="content" :item="item" :index="index"></slot>
             </div>
         </div>
@@ -20,6 +20,7 @@
 </template>
 
 <script>
+import { cn } from '@primeuix/utils';
 import { resolveFieldData } from '@primeuix/utils/object';
 import BaseTimeline from './BaseTimeline.vue';
 
@@ -39,6 +40,14 @@ export default {
                 }
             });
         }
+    },
+    computed: {
+        dataP() {
+            return cn({
+                [this.layout]: this.layout,
+                [this.align]: this.align
+            });
+        }
     }
 };
 </script>

package/timeline/index.d.ts

@@ -7,7 +7,7 @@
  * @module timeline
  *
  */
-import type { DefineComponent, DesignToken, EmitFn, PassThrough } from '@primevue/core';
+import type { DefineComponent, DesignToken, EmitFn, HintedString, PassThrough } from '@primevue/core';
 import type { ComponentHooks } from '@primevue/core/basecomponent';
 import type { PassThroughOptions } from 'primevue/passthrough';
 import { VNode } from 'vue';
@@ -117,12 +117,12 @@ export interface TimelineProps {
      * Position of the timeline bar relative to the content.
      * @defaultValue left
      */
-    align?: 'left' | 'right' | 'alternate' | 'top' | 'bottom' | undefined;
+    align?: HintedString<'left' | 'right' | 'alternate' | 'top' | 'bottom'> | undefined;
     /**
      * Orientation of the timeline.
      * @defaultValue horizontal
      */
-    layout?: 'vertical' | 'horizontal' | undefined;
+    layout?: HintedString<'vertical' | 'horizontal'> | undefined;
     /**
      * Name of the field that uniquely identifies the a record in the data.
      */

package/timeline/index.mjs

@@ -1,3 +1,4 @@
+import { cn } from '@primeuix/utils';
 import { resolveFieldData } from '@primeuix/utils/object';
 import BaseComponent from '@primevue/core/basecomponent';
 import TimelineStyle from 'primevue/timeline/style';
@@ -27,6 +28,10 @@ var script$1 = {
   }
 };
 
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 var script = {
   name: 'Timeline',
   "extends": script$1,
@@ -43,36 +48,58 @@ var script = {
         }
       });
     }
+  },
+  computed: {
+    dataP: function dataP() {
+      return cn(_defineProperty(_defineProperty({}, this.layout, this.layout), this.align, this.align));
+    }
   }
 };
 
+var _hoisted_1 = ["data-p"];
+var _hoisted_2 = ["data-p"];
+var _hoisted_3 = ["data-p"];
+var _hoisted_4 = ["data-p"];
+var _hoisted_5 = ["data-p"];
+var _hoisted_6 = ["data-p"];
+var _hoisted_7 = ["data-p"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", mergeProps({
     "class": _ctx.cx('root')
-  }, _ctx.ptmi('root')), [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.value, function (item, index) {
+  }, _ctx.ptmi('root'), {
+    "data-p": $options.dataP
+  }), [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.value, function (item, index) {
     return openBlock(), createElementBlock("div", mergeProps({
       key: $options.getKey(item, index),
       "class": _ctx.cx('event'),
       ref_for: true
-    }, $options.getPTOptions('event', index)), [createElementVNode("div", mergeProps({
+    }, $options.getPTOptions('event', index), {
+      "data-p": $options.dataP
+    }), [createElementVNode("div", mergeProps({
       "class": _ctx.cx('eventOpposite', {
         index: index
       }),
       ref_for: true
-    }, $options.getPTOptions('eventOpposite', index)), [renderSlot(_ctx.$slots, "opposite", {
+    }, $options.getPTOptions('eventOpposite', index), {
+      "data-p": $options.dataP
+    }), [renderSlot(_ctx.$slots, "opposite", {
       item: item,
       index: index
-    })], 16), createElementVNode("div", mergeProps({
+    })], 16, _hoisted_3), createElementVNode("div", mergeProps({
       "class": _ctx.cx('eventSeparator'),
       ref_for: true
-    }, $options.getPTOptions('eventSeparator', index)), [renderSlot(_ctx.$slots, "marker", {
+    }, $options.getPTOptions('eventSeparator', index), {
+      "data-p": $options.dataP
+    }), [renderSlot(_ctx.$slots, "marker", {
       item: item,
       index: index
     }, function () {
       return [createElementVNode("div", mergeProps({
         "class": _ctx.cx('eventMarker'),
         ref_for: true
-      }, $options.getPTOptions('eventMarker', index)), null, 16)];
+      }, $options.getPTOptions('eventMarker', index), {
+        "data-p": $options.dataP
+      }), null, 16, _hoisted_5)];
     }), index !== _ctx.value.length - 1 ? renderSlot(_ctx.$slots, "connector", {
       key: 0,
       item: item,
@@ -81,15 +108,19 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       return [createElementVNode("div", mergeProps({
         "class": _ctx.cx('eventConnector'),
         ref_for: true
-      }, $options.getPTOptions('eventConnector', index)), null, 16)];
-    }) : createCommentVNode("", true)], 16), createElementVNode("div", mergeProps({
+      }, $options.getPTOptions('eventConnector', index), {
+        "data-p": $options.dataP
+      }), null, 16, _hoisted_6)];
+    }) : createCommentVNode("", true)], 16, _hoisted_4), createElementVNode("div", mergeProps({
       "class": _ctx.cx('eventContent'),
       ref_for: true
-    }, $options.getPTOptions('eventContent', index)), [renderSlot(_ctx.$slots, "content", {
+    }, $options.getPTOptions('eventContent', index), {
+      "data-p": $options.dataP
+    }), [renderSlot(_ctx.$slots, "content", {
       item: item,
       index: index
-    })], 16)], 16);
-  }), 128))], 16);
+    })], 16, _hoisted_7)], 16, _hoisted_2);
+  }), 128))], 16, _hoisted_1);
 }
 
 script.render = render;

package/timeline/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/timeline/BaseTimeline.vue","../../src/timeline/Timeline.vue","../../src/timeline/Timeline.vue?vue&type=template&id=400cfd06&lang.js"],"sourcesContent":["<script>\nimport BaseComponent from '@primevue/core/basecomponent';\nimport TimelineStyle from 'primevue/timeline/style';\n\nexport default {\n    name: 'BaseTimeline',\n    extends: BaseComponent,\n    props: {\n        value: null,\n        align: {\n            mode: String,\n            default: 'left'\n        },\n        layout: {\n            mode: String,\n            default: 'vertical'\n        },\n        dataKey: null\n    },\n    style: TimelineStyle,\n    provide() {\n        return {\n            $pcTimeline: this,\n            $parentInstance: this\n        };\n    }\n};\n</script>\n","<template>\n    <div :class=\"cx('root')\" v-bind=\"ptmi('root')\">\n        <div v-for=\"(item, index) of value\" :key=\"getKey(item, index)\" :class=\"cx('event')\" v-bind=\"getPTOptions('event', index)\">\n            <div :class=\"cx('eventOpposite', { index })\" v-bind=\"getPTOptions('eventOpposite', index)\">\n                <slot name=\"opposite\" :item=\"item\" :index=\"index\"></slot>\n            </div>\n            <div :class=\"cx('eventSeparator')\" v-bind=\"getPTOptions('eventSeparator', index)\">\n                <slot name=\"marker\" :item=\"item\" :index=\"index\">\n                    <div :class=\"cx('eventMarker')\" v-bind=\"getPTOptions('eventMarker', index)\"></div>\n                </slot>\n                <slot v-if=\"index !== value.length - 1\" name=\"connector\" :item=\"item\" :index=\"index\">\n                    <div :class=\"cx('eventConnector')\" v-bind=\"getPTOptions('eventConnector', index)\"></div>\n                </slot>\n            </div>\n            <div :class=\"cx('eventContent')\" v-bind=\"getPTOptions('eventContent', index)\">\n                <slot name=\"content\" :item=\"item\" :index=\"index\"></slot>\n            </div>\n        </div>\n    </div>\n</template>\n\n<script>\nimport { resolveFieldData } from '@primeuix/utils/object';\nimport BaseTimeline from './BaseTimeline.vue';\n\nexport default {\n    name: 'Timeline',\n    extends: BaseTimeline,\n    inheritAttrs: false,\n    methods: {\n        getKey(item, index) {\n            return this.dataKey ? resolveFieldData(item, this.dataKey) : index;\n        },\n        getPTOptions(key, index) {\n            return this.ptm(key, {\n                context: {\n                    index,\n                    count: this.value.length\n                }\n            });\n        }\n    }\n};\n</script>\n","<template>\n    <div :class=\"cx('root')\" v-bind=\"ptmi('root')\">\n        <div v-for=\"(item, index) of value\" :key=\"getKey(item, index)\" :class=\"cx('event')\" v-bind=\"getPTOptions('event', index)\">\n            <div :class=\"cx('eventOpposite', { index })\" v-bind=\"getPTOptions('eventOpposite', index)\">\n                <slot name=\"opposite\" :item=\"item\" :index=\"index\"></slot>\n            </div>\n            <div :class=\"cx('eventSeparator')\" v-bind=\"getPTOptions('eventSeparator', index)\">\n                <slot name=\"marker\" :item=\"item\" :index=\"index\">\n                    <div :class=\"cx('eventMarker')\" v-bind=\"getPTOptions('eventMarker', index)\"></div>\n                </slot>\n                <slot v-if=\"index !== value.length - 1\" name=\"connector\" :item=\"item\" :index=\"index\">\n                    <div :class=\"cx('eventConnector')\" v-bind=\"getPTOptions('eventConnector', index)\"></div>\n                </slot>\n            </div>\n            <div :class=\"cx('eventContent')\" v-bind=\"getPTOptions('eventContent', index)\">\n                <slot name=\"content\" :item=\"item\" :index=\"index\"></slot>\n            </div>\n        </div>\n    </div>\n</template>\n\n<script>\nimport { resolveFieldData } from '@primeuix/utils/object';\nimport BaseTimeline from './BaseTimeline.vue';\n\nexport default {\n    name: 'Timeline',\n    extends: BaseTimeline,\n    inheritAttrs: false,\n    methods: {\n        getKey(item, index) {\n            return this.dataKey ? resolveFieldData(item, this.dataKey) : index;\n        },\n        getPTOptions(key, index) {\n            return this.ptm(key, {\n                context: {\n                    index,\n                    count: this.value.length\n                }\n            });\n        }\n    }\n};\n</script>\n"],"names":["name","BaseComponent","props","value","align","mode","String","layout","dataKey","style","TimelineStyle","provide","$pcTimeline","$parentInstance","BaseTimeline","inheritAttrs","methods","getKey","item","index","resolveFieldData","getPTOptions","key","ptm","context","count","length","_openBlock","_createElementBlock","_mergeProps","_ctx","cx","ptmi","_Fragment","_renderList","$options","_createElementVNode","_renderSlot","$slots"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../src/timeline/BaseTimeline.vue","../../src/timeline/Timeline.vue","../../src/timeline/Timeline.vue?vue&type=template&id=93256150&lang.js"],"sourcesContent":["<script>\nimport BaseComponent from '@primevue/core/basecomponent';\nimport TimelineStyle from 'primevue/timeline/style';\n\nexport default {\n    name: 'BaseTimeline',\n    extends: BaseComponent,\n    props: {\n        value: null,\n        align: {\n            mode: String,\n            default: 'left'\n        },\n        layout: {\n            mode: String,\n            default: 'vertical'\n        },\n        dataKey: null\n    },\n    style: TimelineStyle,\n    provide() {\n        return {\n            $pcTimeline: this,\n            $parentInstance: this\n        };\n    }\n};\n</script>\n","<template>\n    <div :class=\"cx('root')\" v-bind=\"ptmi('root')\" :data-p=\"dataP\">\n        <div v-for=\"(item, index) of value\" :key=\"getKey(item, index)\" :class=\"cx('event')\" v-bind=\"getPTOptions('event', index)\" :data-p=\"dataP\">\n            <div :class=\"cx('eventOpposite', { index })\" v-bind=\"getPTOptions('eventOpposite', index)\" :data-p=\"dataP\">\n                <slot name=\"opposite\" :item=\"item\" :index=\"index\"></slot>\n            </div>\n            <div :class=\"cx('eventSeparator')\" v-bind=\"getPTOptions('eventSeparator', index)\" :data-p=\"dataP\">\n                <slot name=\"marker\" :item=\"item\" :index=\"index\">\n                    <div :class=\"cx('eventMarker')\" v-bind=\"getPTOptions('eventMarker', index)\" :data-p=\"dataP\"></div>\n                </slot>\n                <slot v-if=\"index !== value.length - 1\" name=\"connector\" :item=\"item\" :index=\"index\">\n                    <div :class=\"cx('eventConnector')\" v-bind=\"getPTOptions('eventConnector', index)\" :data-p=\"dataP\"></div>\n                </slot>\n            </div>\n            <div :class=\"cx('eventContent')\" v-bind=\"getPTOptions('eventContent', index)\" :data-p=\"dataP\">\n                <slot name=\"content\" :item=\"item\" :index=\"index\"></slot>\n            </div>\n        </div>\n    </div>\n</template>\n\n<script>\nimport { cn } from '@primeuix/utils';\nimport { resolveFieldData } from '@primeuix/utils/object';\nimport BaseTimeline from './BaseTimeline.vue';\n\nexport default {\n    name: 'Timeline',\n    extends: BaseTimeline,\n    inheritAttrs: false,\n    methods: {\n        getKey(item, index) {\n            return this.dataKey ? resolveFieldData(item, this.dataKey) : index;\n        },\n        getPTOptions(key, index) {\n            return this.ptm(key, {\n                context: {\n                    index,\n                    count: this.value.length\n                }\n            });\n        }\n    },\n    computed: {\n        dataP() {\n            return cn({\n                [this.layout]: this.layout,\n                [this.align]: this.align\n            });\n        }\n    }\n};\n</script>\n","<template>\n    <div :class=\"cx('root')\" v-bind=\"ptmi('root')\" :data-p=\"dataP\">\n        <div v-for=\"(item, index) of value\" :key=\"getKey(item, index)\" :class=\"cx('event')\" v-bind=\"getPTOptions('event', index)\" :data-p=\"dataP\">\n            <div :class=\"cx('eventOpposite', { index })\" v-bind=\"getPTOptions('eventOpposite', index)\" :data-p=\"dataP\">\n                <slot name=\"opposite\" :item=\"item\" :index=\"index\"></slot>\n            </div>\n            <div :class=\"cx('eventSeparator')\" v-bind=\"getPTOptions('eventSeparator', index)\" :data-p=\"dataP\">\n                <slot name=\"marker\" :item=\"item\" :index=\"index\">\n                    <div :class=\"cx('eventMarker')\" v-bind=\"getPTOptions('eventMarker', index)\" :data-p=\"dataP\"></div>\n                </slot>\n                <slot v-if=\"index !== value.length - 1\" name=\"connector\" :item=\"item\" :index=\"index\">\n                    <div :class=\"cx('eventConnector')\" v-bind=\"getPTOptions('eventConnector', index)\" :data-p=\"dataP\"></div>\n                </slot>\n            </div>\n            <div :class=\"cx('eventContent')\" v-bind=\"getPTOptions('eventContent', index)\" :data-p=\"dataP\">\n                <slot name=\"content\" :item=\"item\" :index=\"index\"></slot>\n            </div>\n        </div>\n    </div>\n</template>\n\n<script>\nimport { cn } from '@primeuix/utils';\nimport { resolveFieldData } from '@primeuix/utils/object';\nimport BaseTimeline from './BaseTimeline.vue';\n\nexport default {\n    name: 'Timeline',\n    extends: BaseTimeline,\n    inheritAttrs: false,\n    methods: {\n        getKey(item, index) {\n            return this.dataKey ? resolveFieldData(item, this.dataKey) : index;\n        },\n        getPTOptions(key, index) {\n            return this.ptm(key, {\n                context: {\n                    index,\n                    count: this.value.length\n                }\n            });\n        }\n    },\n    computed: {\n        dataP() {\n            return cn({\n                [this.layout]: this.layout,\n                [this.align]: this.align\n            });\n        }\n    }\n};\n</script>\n"],"names":["name","BaseComponent","props","value","align","mode","String","layout","dataKey","style","TimelineStyle","provide","$pcTimeline","$parentInstance","BaseTimeline","inheritAttrs","methods","getKey","item","index","resolveFieldData","getPTOptions","key","ptm","context","count","length","computed","dataP","cn","_defineProperty","_openBlock","_createElementBlock","_mergeProps","_ctx","cx","ptmi","$options","_Fragment","_renderList","_createElementVNode","_renderSlot","$slots","_hoisted_5","_hoisted_6"],"mappings":"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"}

package/toast/Toast.vue

@@ -1,6 +1,6 @@
 <template>
     <Portal>
-        <div ref="container" :class="cx('root')" :style="sx('root', true, { position })" v-bind="ptmi('root')">
+        <div ref="container" :class="cx('root')" :style="sx('root', true, { position })" :data-p="dataP" v-bind="ptmi('root')">
             <transition-group name="p-toast-message" tag="div" @enter="onEnter" @leave="onLeave" v-bind="{ ...ptm('transition') }">
                 <ToastMessage
                     v-for="msg of messages"
@@ -23,6 +23,7 @@
 </template>
 
 <script>
+import { cn } from '@primeuix/utils';
 import { setAttribute } from '@primeuix/utils/dom';
 import { isEmpty } from '@primeuix/utils/object';
 import { ZIndex } from '@primeuix/utils/zindex';
@@ -96,6 +97,7 @@ export default {
             }
         },
         onRemoveAllGroups() {
+            this.messages.forEach((message) => this.$emit('close', { message }));
             this.messages = [];
         },
         onEnter() {
@@ -145,6 +147,13 @@ export default {
             }
         }
     },
+    computed: {
+        dataP() {
+            return cn({
+                [this.position]: this.position
+            });
+        }
+    },
     components: {
         ToastMessage: ToastMessage,
         Portal: Portal

package/toast/ToastMessage.vue

@@ -1,17 +1,17 @@
 <template>
-    <div :class="[cx('message'), message.styleClass]" role="alert" aria-live="assertive" aria-atomic="true" v-bind="ptm('message')" @click="onMessageClick" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
+    <div :class="[cx('message'), message.styleClass]" role="alert" aria-live="assertive" aria-atomic="true" :data-p="dataP" v-bind="ptm('message')" @click="onMessageClick" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
         <component v-if="templates.container" :is="templates.container" :message="message" :closeCallback="onCloseClick" />
         <div v-else :class="[cx('messageContent'), message.contentStyleClass]" v-bind="ptm('messageContent')">
             <template v-if="!templates.message">
                 <component :is="templates.messageicon ? templates.messageicon : templates.icon ? templates.icon : iconComponent && iconComponent.name ? iconComponent : 'span'" :class="cx('messageIcon')" v-bind="ptm('messageIcon')" />
-                <div :class="cx('messageText')" v-bind="ptm('messageText')">
-                    <span :class="cx('summary')" v-bind="ptm('summary')">{{ message.summary }}</span>
-                    <div :class="cx('detail')" v-bind="ptm('detail')">{{ message.detail }}</div>
+                <div :class="cx('messageText')" :data-p="dataP" v-bind="ptm('messageText')">
+                    <span :class="cx('summary')" :data-p="dataP" v-bind="ptm('summary')">{{ message.summary }}</span>
+                    <div v-if="message.detail" :class="cx('detail')" :data-p="dataP" v-bind="ptm('detail')">{{ message.detail }}</div>
                 </div>
             </template>
             <component v-else :is="templates.message" :message="message"></component>
             <div v-if="message.closable !== false" v-bind="ptm('buttonContainer')">
-                <button v-ripple :class="cx('closeButton')" type="button" :aria-label="closeAriaLabel" @click="onCloseClick" autofocus v-bind="{ ...closeButtonProps, ...ptm('closeButton') }">
+                <button v-ripple :class="cx('closeButton')" type="button" :aria-label="closeAriaLabel" @click="onCloseClick" autofocus :data-p="dataP" v-bind="{ ...closeButtonProps, ...ptm('closeButton') }">
                     <component :is="templates.closeicon || 'TimesIcon'" :class="[cx('closeIcon'), closeIcon]" v-bind="ptm('closeIcon')" />
                 </button>
             </div>
@@ -20,6 +20,7 @@
 </template>
 
 <script>
+import { cn } from '@primeuix/utils';
 import BaseComponent from '@primevue/core/basecomponent';
 import CheckIcon from '@primevue/icons/check';
 import ExclamationTriangleIcon from '@primevue/icons/exclamationtriangle';
@@ -103,27 +104,31 @@ export default {
             this.props?.onClick && this.props.onClick({ originalEvent: event, message: this.message });
         },
         onMouseEnter(event) {
-            this.props?.onMouseEnter && this.props.onMouseEnter({ originalEvent: event, message: this.message });
+            if (this.props?.onMouseEnter) {
+                this.props.onMouseEnter({ originalEvent: event, message: this.message });
 
-            if (event.defaultPrevented) {
-                return;
-            }
+                if (event.defaultPrevented) {
+                    return;
+                }
 
-            if (this.message.life) {
-                this.lifeRemaining = this.createdAt + this.lifeRemaining - Date().valueOf();
-                this.createdAt = null;
-                this.clearCloseTimeout();
+                if (this.message.life) {
+                    this.lifeRemaining = this.createdAt + this.lifeRemaining - Date().valueOf();
+                    this.createdAt = null;
+                    this.clearCloseTimeout();
+                }
             }
         },
         onMouseLeave(event) {
-            this.props?.onMouseLeave && this.props.onMouseLeave({ originalEvent: event, message: this.message });
+            if (this.props?.onMouseLeave) {
+                this.props.onMouseLeave({ originalEvent: event, message: this.message });
 
-            if (event.defaultPrevented) {
-                return;
-            }
+                if (event.defaultPrevented) {
+                    return;
+                }
 
-            if (this.message.life) {
-                this.startTimeout();
+                if (this.message.life) {
+                    this.startTimeout();
+                }
             }
         }
     },
@@ -138,6 +143,11 @@ export default {
         },
         closeAriaLabel() {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
+        },
+        dataP() {
+            return cn({
+                [this.message.severity]: this.message.severity
+            });
         }
     },
     components: {

package/toast/index.d.ts

@@ -7,7 +7,7 @@
  * @module toast
  *
  */
-import type { DefineComponent, DesignToken, EmitFn, PassThrough } from '@primevue/core';
+import type { DefineComponent, DesignToken, EmitFn, HintedString, PassThrough } from '@primevue/core';
 import type { ComponentHooks } from '@primevue/core/basecomponent';
 import type { PassThroughOptions } from 'primevue/passthrough';
 import { ButtonHTMLAttributes, TransitionProps, VNode } from 'vue';
@@ -117,7 +117,7 @@ export interface ToastMessageOptions {
      * Severity level of the message.
      * @defaultValue info
      */
-    severity?: 'success' | 'info' | 'warn' | 'error' | 'secondary' | 'contrast' | undefined;
+    severity?: HintedString<'success' | 'info' | 'warn' | 'error' | 'secondary' | 'contrast'> | undefined;
     /**
      * Summary content of the message.
      */

package/toast/index.mjs

@@ -1,3 +1,4 @@
+import { cn } from '@primeuix/utils';
 import { setAttribute } from '@primeuix/utils/dom';
 import { isEmpty } from '@primeuix/utils/object';
 import { ZIndex } from '@primeuix/utils/zindex';
@@ -83,6 +84,10 @@ var script$2 = {
   }
 };
 
+function _typeof$3(o) { "@babel/helpers - typeof"; return _typeof$3 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$3(o); }
+function _defineProperty$3(e, r, t) { return (r = _toPropertyKey$3(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; }
+function _toPropertyKey$3(t) { var i = _toPrimitive$3(t, "string"); return "symbol" == _typeof$3(i) ? i : i + ""; }
+function _toPrimitive$3(t, r) { if ("object" != _typeof$3(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != _typeof$3(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 var script$1 = {
   name: 'ToastMessage',
   hostName: 'Toast',
@@ -170,30 +175,34 @@ var script$1 = {
     },
     onMouseEnter: function onMouseEnter(event) {
       var _this$props2;
-      ((_this$props2 = this.props) === null || _this$props2 === void 0 ? void 0 : _this$props2.onMouseEnter) && this.props.onMouseEnter({
-        originalEvent: event,
-        message: this.message
-      });
-      if (event.defaultPrevented) {
-        return;
-      }
-      if (this.message.life) {
-        this.lifeRemaining = this.createdAt + this.lifeRemaining - Date().valueOf();
-        this.createdAt = null;
-        this.clearCloseTimeout();
+      if ((_this$props2 = this.props) !== null && _this$props2 !== void 0 && _this$props2.onMouseEnter) {
+        this.props.onMouseEnter({
+          originalEvent: event,
+          message: this.message
+        });
+        if (event.defaultPrevented) {
+          return;
+        }
+        if (this.message.life) {
+          this.lifeRemaining = this.createdAt + this.lifeRemaining - Date().valueOf();
+          this.createdAt = null;
+          this.clearCloseTimeout();
+        }
       }
     },
     onMouseLeave: function onMouseLeave(event) {
       var _this$props3;
-      ((_this$props3 = this.props) === null || _this$props3 === void 0 ? void 0 : _this$props3.onMouseLeave) && this.props.onMouseLeave({
-        originalEvent: event,
-        message: this.message
-      });
-      if (event.defaultPrevented) {
-        return;
-      }
-      if (this.message.life) {
-        this.startTimeout();
+      if ((_this$props3 = this.props) !== null && _this$props3 !== void 0 && _this$props3.onMouseLeave) {
+        this.props.onMouseLeave({
+          originalEvent: event,
+          message: this.message
+        });
+        if (event.defaultPrevented) {
+          return;
+        }
+        if (this.message.life) {
+          this.startTimeout();
+        }
       }
     }
   },
@@ -208,6 +217,9 @@ var script$1 = {
     },
     closeAriaLabel: function closeAriaLabel() {
       return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
+    },
+    dataP: function dataP() {
+      return cn(_defineProperty$3({}, this.message.severity, this.message.severity));
     }
   },
   components: {
@@ -222,20 +234,25 @@ var script$1 = {
   }
 };
 
-function _typeof$1(o) { "@babel/helpers - typeof"; return _typeof$1 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$1(o); }
+function _typeof$2(o) { "@babel/helpers - typeof"; return _typeof$2 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$2(o); }
 function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty$1(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty$1(e, r, t) { return (r = _toPropertyKey$1(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; }
-function _toPropertyKey$1(t) { var i = _toPrimitive$1(t, "string"); return "symbol" == _typeof$1(i) ? i : i + ""; }
-function _toPrimitive$1(t, r) { if ("object" != _typeof$1(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != _typeof$1(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-var _hoisted_1 = ["aria-label"];
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty$2(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty$2(e, r, t) { return (r = _toPropertyKey$2(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; }
+function _toPropertyKey$2(t) { var i = _toPrimitive$2(t, "string"); return "symbol" == _typeof$2(i) ? i : i + ""; }
+function _toPrimitive$2(t, r) { if ("object" != _typeof$2(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != _typeof$2(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var _hoisted_1$1 = ["data-p"];
+var _hoisted_2 = ["data-p"];
+var _hoisted_3 = ["data-p"];
+var _hoisted_4 = ["data-p"];
+var _hoisted_5 = ["aria-label", "data-p"];
 function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   var _directive_ripple = resolveDirective("ripple");
   return openBlock(), createElementBlock("div", mergeProps({
     "class": [_ctx.cx('message'), $props.message.styleClass],
     role: "alert",
     "aria-live": "assertive",
-    "aria-atomic": "true"
+    "aria-atomic": "true",
+    "data-p": $options.dataP
   }, _ctx.ptm('message'), {
     onClick: _cache[1] || (_cache[1] = function () {
       return $options.onMessageClick && $options.onMessageClick.apply($options, arguments);
@@ -258,12 +275,16 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   }, [(openBlock(), createBlock(resolveDynamicComponent($props.templates.messageicon ? $props.templates.messageicon : $props.templates.icon ? $props.templates.icon : $options.iconComponent && $options.iconComponent.name ? $options.iconComponent : 'span'), mergeProps({
     "class": _ctx.cx('messageIcon')
   }, _ctx.ptm('messageIcon')), null, 16, ["class"])), createElementVNode("div", mergeProps({
-    "class": _ctx.cx('messageText')
+    "class": _ctx.cx('messageText'),
+    "data-p": $options.dataP
   }, _ctx.ptm('messageText')), [createElementVNode("span", mergeProps({
-    "class": _ctx.cx('summary')
-  }, _ctx.ptm('summary')), toDisplayString($props.message.summary), 17), createElementVNode("div", mergeProps({
-    "class": _ctx.cx('detail')
-  }, _ctx.ptm('detail')), toDisplayString($props.message.detail), 17)], 16)], 64)) : (openBlock(), createBlock(resolveDynamicComponent($props.templates.message), {
+    "class": _ctx.cx('summary'),
+    "data-p": $options.dataP
+  }, _ctx.ptm('summary')), toDisplayString($props.message.summary), 17, _hoisted_3), $props.message.detail ? (openBlock(), createElementBlock("div", mergeProps({
+    key: 0,
+    "class": _ctx.cx('detail'),
+    "data-p": $options.dataP
+  }, _ctx.ptm('detail')), toDisplayString($props.message.detail), 17, _hoisted_4)) : createCommentVNode("", true)], 16, _hoisted_2)], 64)) : (openBlock(), createBlock(resolveDynamicComponent($props.templates.message), {
     key: 1,
     message: $props.message
   }, null, 8, ["message"])), $props.message.closable !== false ? (openBlock(), createElementBlock("div", normalizeProps(mergeProps({
@@ -275,14 +296,19 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
     onClick: _cache[0] || (_cache[0] = function () {
       return $options.onCloseClick && $options.onCloseClick.apply($options, arguments);
     }),
-    autofocus: ""
+    autofocus: "",
+    "data-p": $options.dataP
   }, _objectSpread$1(_objectSpread$1({}, $props.closeButtonProps), _ctx.ptm('closeButton'))), [(openBlock(), createBlock(resolveDynamicComponent($props.templates.closeicon || 'TimesIcon'), mergeProps({
     "class": [_ctx.cx('closeIcon'), $props.closeIcon]
-  }, _ctx.ptm('closeIcon')), null, 16, ["class"]))], 16, _hoisted_1)), [[_directive_ripple]])], 16)) : createCommentVNode("", true)], 16))], 16);
+  }, _ctx.ptm('closeIcon')), null, 16, ["class"]))], 16, _hoisted_5)), [[_directive_ripple]])], 16)) : createCommentVNode("", true)], 16))], 16, _hoisted_1$1);
 }
 
 script$1.render = render$1;
 
+function _typeof$1(o) { "@babel/helpers - typeof"; return _typeof$1 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$1(o); }
+function _defineProperty$1(e, r, t) { return (r = _toPropertyKey$1(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; }
+function _toPropertyKey$1(t) { var i = _toPrimitive$1(t, "string"); return "symbol" == _typeof$1(i) ? i : i + ""; }
+function _toPrimitive$1(t, r) { if ("object" != _typeof$1(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != _typeof$1(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
@@ -355,6 +381,12 @@ var script = {
       }
     },
     onRemoveAllGroups: function onRemoveAllGroups() {
+      var _this = this;
+      this.messages.forEach(function (message) {
+        return _this.$emit('close', {
+          message: message
+        });
+      });
       this.messages = [];
     },
     onEnter: function onEnter() {
@@ -363,10 +395,10 @@ var script = {
       }
     },
     onLeave: function onLeave() {
-      var _this = this;
+      var _this2 = this;
       if (this.$refs.container && this.autoZIndex && isEmpty(this.messages)) {
         setTimeout(function () {
-          ZIndex.clear(_this.$refs.container);
+          ZIndex.clear(_this2.$refs.container);
         }, 200);
       }
     },
@@ -395,6 +427,11 @@ var script = {
       }
     }
   },
+  computed: {
+    dataP: function dataP() {
+      return cn(_defineProperty$1({}, this.position, this.position));
+    }
+  },
   components: {
     ToastMessage: script$1,
     Portal: Portal
@@ -407,6 +444,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var _hoisted_1 = ["data-p"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_ToastMessage = resolveComponent("ToastMessage");
   var _component_Portal = resolveComponent("Portal");
@@ -417,7 +455,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         "class": _ctx.cx('root'),
         style: _ctx.sx('root', true, {
           position: _ctx.position
-        })
+        }),
+        "data-p": $options.dataP
       }, _ctx.ptmi('root')), [createVNode(TransitionGroup, mergeProps({
         name: "p-toast-message",
         tag: "div",
@@ -445,7 +484,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           }), 128))];
         }),
         _: 1
-      }, 16, ["onEnter", "onLeave"])], 16)];
+      }, 16, ["onEnter", "onLeave"])], 16, _hoisted_1)];
     }),
     _: 1
   });