primevue 4.2.5 → 4.3.0

package/tieredmenu/style/index.mjs

@@ -1,22 +1,19 @@
+import { style } from '@primeuix/styles/tieredmenu';
 import BaseStyle from '@primevue/core/base/style';
 
-var theme = function theme(_ref) {
-  var dt = _ref.dt;
-  return "\n.p-tieredmenu {\n    background: ".concat(dt('tieredmenu.background'), ";\n    color: ").concat(dt('tieredmenu.color'), ";\n    border: 1px solid ").concat(dt('tieredmenu.border.color'), ";\n    border-radius: ").concat(dt('tieredmenu.border.radius'), ";\n    min-width: 12.5rem;\n}\n\n.p-tieredmenu-root-list,\n.p-tieredmenu-submenu {\n    margin: 0;\n    padding: ").concat(dt('tieredmenu.list.padding'), ";\n    list-style: none;\n    outline: 0 none;\n    display: flex;\n    flex-direction: column;\n    gap: ").concat(dt('tieredmenu.list.gap'), ";\n}\n\n.p-tieredmenu-submenu {\n    position: absolute;\n    min-width: 100%;\n    z-index: 1;\n    background: ").concat(dt('tieredmenu.background'), ";\n    color: ").concat(dt('tieredmenu.color'), ";\n    border: 1px solid ").concat(dt('tieredmenu.border.color'), ";\n    border-radius: ").concat(dt('tieredmenu.border.radius'), ";\n    box-shadow: ").concat(dt('tieredmenu.shadow'), ";\n}\n\n.p-tieredmenu-item {\n    position: relative;\n}\n\n.p-tieredmenu-item-content {\n    transition: background ").concat(dt('tieredmenu.transition.duration'), ", color ").concat(dt('tieredmenu.transition.duration'), ";\n    border-radius: ").concat(dt('tieredmenu.item.border.radius'), ";\n    color: ").concat(dt('tieredmenu.item.color'), ";\n}\n\n.p-tieredmenu-item-link {\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    text-decoration: none;\n    overflow: hidden;\n    position: relative;\n    color: inherit;\n    padding: ").concat(dt('tieredmenu.item.padding'), ";\n    gap: ").concat(dt('tieredmenu.item.gap'), ";\n    user-select: none;\n    outline: 0 none;\n}\n\n.p-tieredmenu-item-label {\n    line-height: 1;\n}\n\n.p-tieredmenu-item-icon {\n    color: ").concat(dt('tieredmenu.item.icon.color'), ";\n}\n\n.p-tieredmenu-submenu-icon {\n    color: ").concat(dt('tieredmenu.submenu.icon.color'), ";\n    margin-left: auto;\n    font-size: ").concat(dt('tieredmenu.submenu.icon.size'), ";\n    width: ").concat(dt('tieredmenu.submenu.icon.size'), ";\n    height: ").concat(dt('tieredmenu.submenu.icon.size'), ";\n}\n\n.p-tieredmenu-submenu-icon:dir(rtl) {\n    margin-left: 0;\n    margin-right: auto;\n}\n\n.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content {\n    color: ").concat(dt('tieredmenu.item.focus.color'), ";\n    background: ").concat(dt('tieredmenu.item.focus.background'), ";\n}\n\n.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content .p-tieredmenu-item-icon {\n    color: ").concat(dt('tieredmenu.item.icon.focus.color'), ";\n}\n\n.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon {\n    color: ").concat(dt('tieredmenu.submenu.icon.focus.color'), ";\n}\n\n.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover {\n    color: ").concat(dt('tieredmenu.item.focus.color'), ";\n    background: ").concat(dt('tieredmenu.item.focus.background'), ";\n}\n\n.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover .p-tieredmenu-item-icon {\n    color: ").concat(dt('tieredmenu.item.icon.focus.color'), ";\n}\n\n.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover .p-tieredmenu-submenu-icon {\n    color: ").concat(dt('tieredmenu.submenu.icon.focus.color'), ";\n}\n\n.p-tieredmenu-item-active > .p-tieredmenu-item-content {\n    color: ").concat(dt('tieredmenu.item.active.color'), ";\n    background: ").concat(dt('tieredmenu.item.active.background'), ";\n}\n\n.p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-item-icon {\n    color: ").concat(dt('tieredmenu.item.icon.active.color'), ";\n}\n\n.p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon {\n    color: ").concat(dt('tieredmenu.submenu.icon.active.color'), ";\n}\n\n.p-tieredmenu-separator {\n    border-block-start: 1px solid ").concat(dt('tieredmenu.separator.border.color'), ";\n}\n\n.p-tieredmenu-overlay {\n    box-shadow: ").concat(dt('tieredmenu.shadow'), ";\n}\n\n.p-tieredmenu-enter-from,\n.p-tieredmenu-leave-active {\n    opacity: 0;\n}\n\n.p-tieredmenu-enter-active {\n    transition: opacity 250ms;\n}\n\n.p-tieredmenu-mobile .p-tieredmenu-submenu {\n    position: static;\n    box-shadow: none;\n    border: 0 none;\n    padding-inline-start: ").concat(dt('tieredmenu.submenu.mobile.indent'), ";\n    padding-inline-end: 0;\n}\n\n.p-tieredmenu-mobile .p-tieredmenu-submenu:dir(rtl) {\n    padding-inline-start: 0;\n    padding-inline-end: ").concat(dt('tieredmenu.submenu.mobile.indent'), ";\n}\n\n.p-tieredmenu-mobile .p-tieredmenu-submenu-icon {\n    transition: transform 0.2s;\n    transform: rotate(90deg);\n}\n\n.p-tieredmenu-mobile .p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon {\n    transform: rotate(-90deg);\n}\n");
-};
 var inlineStyles = {
-  submenu: function submenu(_ref2) {
-    var instance = _ref2.instance,
-      processedItem = _ref2.processedItem;
+  submenu: function submenu(_ref) {
+    var instance = _ref.instance,
+      processedItem = _ref.processedItem;
     return {
       display: instance.isItemActive(processedItem) ? 'flex' : 'none'
     };
   }
 };
 var classes = {
-  root: function root(_ref3) {
-    var props = _ref3.props,
-      instance = _ref3.instance;
+  root: function root(_ref2) {
+    var props = _ref2.props,
+      instance = _ref2.instance;
     return ['p-tieredmenu p-component', {
       'p-tieredmenu-overlay': props.popup,
       'p-tieredmenu-mobile': instance.queryMatches
@@ -24,9 +21,9 @@ var classes = {
   },
   start: 'p-tieredmenu-start',
   rootList: 'p-tieredmenu-root-list',
-  item: function item(_ref4) {
-    var instance = _ref4.instance,
-      processedItem = _ref4.processedItem;
+  item: function item(_ref3) {
+    var instance = _ref3.instance,
+      processedItem = _ref3.processedItem;
     return ['p-tieredmenu-item', {
       'p-tieredmenu-item-active': instance.isItemActive(processedItem),
       'p-focus': instance.isItemFocused(processedItem),
@@ -44,7 +41,7 @@ var classes = {
 };
 var TieredMenuStyle = BaseStyle.extend({
   name: 'tieredmenu',
-  theme: theme,
+  style: style,
   classes: classes,
   inlineStyles: inlineStyles
 });

package/tieredmenu/style/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/tieredmenu/style/TieredMenuStyle.js"],"sourcesContent":["import BaseStyle from '@primevue/core/base/style';\n\nconst theme = ({ dt }) => `\n.p-tieredmenu {\n    background: ${dt('tieredmenu.background')};\n    color: ${dt('tieredmenu.color')};\n    border: 1px solid ${dt('tieredmenu.border.color')};\n    border-radius: ${dt('tieredmenu.border.radius')};\n    min-width: 12.5rem;\n}\n\n.p-tieredmenu-root-list,\n.p-tieredmenu-submenu {\n    margin: 0;\n    padding: ${dt('tieredmenu.list.padding')};\n    list-style: none;\n    outline: 0 none;\n    display: flex;\n    flex-direction: column;\n    gap: ${dt('tieredmenu.list.gap')};\n}\n\n.p-tieredmenu-submenu {\n    position: absolute;\n    min-width: 100%;\n    z-index: 1;\n    background: ${dt('tieredmenu.background')};\n    color: ${dt('tieredmenu.color')};\n    border: 1px solid ${dt('tieredmenu.border.color')};\n    border-radius: ${dt('tieredmenu.border.radius')};\n    box-shadow: ${dt('tieredmenu.shadow')};\n}\n\n.p-tieredmenu-item {\n    position: relative;\n}\n\n.p-tieredmenu-item-content {\n    transition: background ${dt('tieredmenu.transition.duration')}, color ${dt('tieredmenu.transition.duration')};\n    border-radius: ${dt('tieredmenu.item.border.radius')};\n    color: ${dt('tieredmenu.item.color')};\n}\n\n.p-tieredmenu-item-link {\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    text-decoration: none;\n    overflow: hidden;\n    position: relative;\n    color: inherit;\n    padding: ${dt('tieredmenu.item.padding')};\n    gap: ${dt('tieredmenu.item.gap')};\n    user-select: none;\n    outline: 0 none;\n}\n\n.p-tieredmenu-item-label {\n    line-height: 1;\n}\n\n.p-tieredmenu-item-icon {\n    color: ${dt('tieredmenu.item.icon.color')};\n}\n\n.p-tieredmenu-submenu-icon {\n    color: ${dt('tieredmenu.submenu.icon.color')};\n    margin-left: auto;\n    font-size: ${dt('tieredmenu.submenu.icon.size')};\n    width: ${dt('tieredmenu.submenu.icon.size')};\n    height: ${dt('tieredmenu.submenu.icon.size')};\n}\n\n.p-tieredmenu-submenu-icon:dir(rtl) {\n    margin-left: 0;\n    margin-right: auto;\n}\n\n.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content {\n    color: ${dt('tieredmenu.item.focus.color')};\n    background: ${dt('tieredmenu.item.focus.background')};\n}\n\n.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content .p-tieredmenu-item-icon {\n    color: ${dt('tieredmenu.item.icon.focus.color')};\n}\n\n.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon {\n    color: ${dt('tieredmenu.submenu.icon.focus.color')};\n}\n\n.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover {\n    color: ${dt('tieredmenu.item.focus.color')};\n    background: ${dt('tieredmenu.item.focus.background')};\n}\n\n.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover .p-tieredmenu-item-icon {\n    color: ${dt('tieredmenu.item.icon.focus.color')};\n}\n\n.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover .p-tieredmenu-submenu-icon {\n    color: ${dt('tieredmenu.submenu.icon.focus.color')};\n}\n\n.p-tieredmenu-item-active > .p-tieredmenu-item-content {\n    color: ${dt('tieredmenu.item.active.color')};\n    background: ${dt('tieredmenu.item.active.background')};\n}\n\n.p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-item-icon {\n    color: ${dt('tieredmenu.item.icon.active.color')};\n}\n\n.p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon {\n    color: ${dt('tieredmenu.submenu.icon.active.color')};\n}\n\n.p-tieredmenu-separator {\n    border-block-start: 1px solid ${dt('tieredmenu.separator.border.color')};\n}\n\n.p-tieredmenu-overlay {\n    box-shadow: ${dt('tieredmenu.shadow')};\n}\n\n.p-tieredmenu-enter-from,\n.p-tieredmenu-leave-active {\n    opacity: 0;\n}\n\n.p-tieredmenu-enter-active {\n    transition: opacity 250ms;\n}\n\n.p-tieredmenu-mobile .p-tieredmenu-submenu {\n    position: static;\n    box-shadow: none;\n    border: 0 none;\n    padding-inline-start: ${dt('tieredmenu.submenu.mobile.indent')};\n    padding-inline-end: 0;\n}\n\n.p-tieredmenu-mobile .p-tieredmenu-submenu:dir(rtl) {\n    padding-inline-start: 0;\n    padding-inline-end: ${dt('tieredmenu.submenu.mobile.indent')};\n}\n\n.p-tieredmenu-mobile .p-tieredmenu-submenu-icon {\n    transition: transform 0.2s;\n    transform: rotate(90deg);\n}\n\n.p-tieredmenu-mobile .p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon {\n    transform: rotate(-90deg);\n}\n`;\n\nconst inlineStyles = {\n    submenu: ({ instance, processedItem }) => ({ display: instance.isItemActive(processedItem) ? 'flex' : 'none' })\n};\n\nconst classes = {\n    root: ({ props, instance }) => [\n        'p-tieredmenu p-component',\n        {\n            'p-tieredmenu-overlay': props.popup,\n            'p-tieredmenu-mobile': instance.queryMatches\n        }\n    ],\n    start: 'p-tieredmenu-start',\n    rootList: 'p-tieredmenu-root-list',\n    item: ({ instance, processedItem }) => [\n        'p-tieredmenu-item',\n        {\n            'p-tieredmenu-item-active': instance.isItemActive(processedItem),\n            'p-focus': instance.isItemFocused(processedItem),\n            'p-disabled': instance.isItemDisabled(processedItem)\n        }\n    ],\n    itemContent: 'p-tieredmenu-item-content',\n    itemLink: 'p-tieredmenu-item-link',\n    itemIcon: 'p-tieredmenu-item-icon',\n    itemLabel: 'p-tieredmenu-item-label',\n    submenuIcon: 'p-tieredmenu-submenu-icon',\n    submenu: 'p-tieredmenu-submenu',\n    separator: 'p-tieredmenu-separator',\n    end: 'p-tieredmenu-end'\n};\n\nexport default BaseStyle.extend({\n    name: 'tieredmenu',\n    theme,\n    classes,\n    inlineStyles\n});\n"],"names":["theme","_ref","dt","concat","inlineStyles","submenu","_ref2","instance","processedItem","display","isItemActive","classes","root","_ref3","props","popup","queryMatches","start","rootList","item","_ref4","isItemFocused","isItemDisabled","itemContent","itemLink","itemIcon","itemLabel","submenuIcon","separator","end","BaseStyle","extend","name"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../../src/tieredmenu/style/TieredMenuStyle.js"],"sourcesContent":["import { style } from '@primeuix/styles/tieredmenu';\nimport BaseStyle from '@primevue/core/base/style';\n\nconst inlineStyles = {\n    submenu: ({ instance, processedItem }) => ({ display: instance.isItemActive(processedItem) ? 'flex' : 'none' })\n};\n\nconst classes = {\n    root: ({ props, instance }) => [\n        'p-tieredmenu p-component',\n        {\n            'p-tieredmenu-overlay': props.popup,\n            'p-tieredmenu-mobile': instance.queryMatches\n        }\n    ],\n    start: 'p-tieredmenu-start',\n    rootList: 'p-tieredmenu-root-list',\n    item: ({ instance, processedItem }) => [\n        'p-tieredmenu-item',\n        {\n            'p-tieredmenu-item-active': instance.isItemActive(processedItem),\n            'p-focus': instance.isItemFocused(processedItem),\n            'p-disabled': instance.isItemDisabled(processedItem)\n        }\n    ],\n    itemContent: 'p-tieredmenu-item-content',\n    itemLink: 'p-tieredmenu-item-link',\n    itemIcon: 'p-tieredmenu-item-icon',\n    itemLabel: 'p-tieredmenu-item-label',\n    submenuIcon: 'p-tieredmenu-submenu-icon',\n    submenu: 'p-tieredmenu-submenu',\n    separator: 'p-tieredmenu-separator',\n    end: 'p-tieredmenu-end'\n};\n\nexport default BaseStyle.extend({\n    name: 'tieredmenu',\n    style,\n    classes,\n    inlineStyles\n});\n"],"names":["inlineStyles","submenu","_ref","instance","processedItem","display","isItemActive","classes","root","_ref2","props","popup","queryMatches","start","rootList","item","_ref3","isItemFocused","isItemDisabled","itemContent","itemLink","itemIcon","itemLabel","submenuIcon","separator","end","BaseStyle","extend","name","style"],"mappings":";;;AAGA,IAAMA,YAAY,GAAG;AACjBC,EAAAA,OAAO,EAAE,SAATA,OAAOA,CAAAC,IAAA,EAAA;AAAA,IAAA,IAAKC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;MAAEC,aAAa,GAAAF,IAAA,CAAbE,aAAa;IAAA,OAAQ;MAAEC,OAAO,EAAEF,QAAQ,CAACG,YAAY,CAACF,aAAa,CAAC,GAAG,MAAM,GAAG;KAAQ;AAAA;AAClH,CAAC;AAED,IAAMG,OAAO,GAAG;AACZC,EAAAA,IAAI,EAAE,SAANA,IAAIA,CAAAC,KAAA,EAAA;AAAA,IAAA,IAAKC,KAAK,GAAAD,KAAA,CAALC,KAAK;MAAEP,QAAQ,GAAAM,KAAA,CAARN,QAAQ;IAAA,OAAO,CAC3B,0BAA0B,EAC1B;MACI,sBAAsB,EAAEO,KAAK,CAACC,KAAK;MACnC,qBAAqB,EAAER,QAAQ,CAACS;AACpC,KAAC,CACJ;AAAA,GAAA;AACDC,EAAAA,KAAK,EAAE,oBAAoB;AAC3BC,EAAAA,QAAQ,EAAE,wBAAwB;AAClCC,EAAAA,IAAI,EAAE,SAANA,IAAIA,CAAAC,KAAA,EAAA;AAAA,IAAA,IAAKb,QAAQ,GAAAa,KAAA,CAARb,QAAQ;MAAEC,aAAa,GAAAY,KAAA,CAAbZ,aAAa;IAAA,OAAO,CACnC,mBAAmB,EACnB;AACI,MAAA,0BAA0B,EAAED,QAAQ,CAACG,YAAY,CAACF,aAAa,CAAC;AAChE,MAAA,SAAS,EAAED,QAAQ,CAACc,aAAa,CAACb,aAAa,CAAC;AAChD,MAAA,YAAY,EAAED,QAAQ,CAACe,cAAc,CAACd,aAAa;AACvD,KAAC,CACJ;AAAA,GAAA;AACDe,EAAAA,WAAW,EAAE,2BAA2B;AACxCC,EAAAA,QAAQ,EAAE,wBAAwB;AAClCC,EAAAA,QAAQ,EAAE,wBAAwB;AAClCC,EAAAA,SAAS,EAAE,yBAAyB;AACpCC,EAAAA,WAAW,EAAE,2BAA2B;AACxCtB,EAAAA,OAAO,EAAE,sBAAsB;AAC/BuB,EAAAA,SAAS,EAAE,wBAAwB;AACnCC,EAAAA,GAAG,EAAE;AACT,CAAC;AAED,sBAAeC,SAAS,CAACC,MAAM,CAAC;AAC5BC,EAAAA,IAAI,EAAE,YAAY;AAClBC,EAAAA,KAAK,EAALA,KAAK;AACLtB,EAAAA,OAAO,EAAPA,OAAO;AACPP,EAAAA,YAAY,EAAZA;AACJ,CAAC,CAAC;;;;"}

package/timeline/index.d.ts

@@ -99,6 +99,10 @@ export interface TimelineContext {
      * Current index of the item as a number.
      */
     index: number;
+    /**
+     * Total number of items in the timeline.
+     */
+    count: number;
 }
 
 /**

package/timeline/index.mjs

@@ -1,7 +1,7 @@
 import { resolveFieldData } from '@primeuix/utils/object';
 import BaseComponent from '@primevue/core/basecomponent';
 import TimelineStyle from 'primevue/timeline/style';
-import { openBlock, createElementBlock, mergeProps, Fragment, renderList, createElementVNode, renderSlot, createCommentVNode } from 'vue';
+import { createElementBlock, openBlock, mergeProps, Fragment, renderList, createElementVNode, renderSlot, createCommentVNode } from 'vue';
 
 var script$1 = {
   name: 'BaseTimeline',

package/timeline/style/index.mjs

@@ -1,12 +1,9 @@
+import { style } from '@primeuix/styles/timeline';
 import BaseStyle from '@primevue/core/base/style';
 
-var theme = function theme(_ref) {
-  var dt = _ref.dt;
-  return "\n.p-timeline {\n    display: flex;\n    flex-grow: 1;\n    flex-direction: column;\n    direction: ltr;\n}\n\n.p-timeline-left .p-timeline-event-opposite {\n    text-align: right;\n}\n\n.p-timeline-left .p-timeline-event-content {\n    text-align: left;\n}\n\n.p-timeline-right .p-timeline-event {\n    flex-direction: row-reverse;\n}\n\n.p-timeline-right .p-timeline-event-opposite {\n    text-align: left;\n}\n\n.p-timeline-right .p-timeline-event-content {\n    text-align: right;\n}\n\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) {\n    flex-direction: row-reverse;\n}\n\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite {\n    text-align: right;\n}\n\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content {\n    text-align: left;\n}\n\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite {\n    text-align: left;\n}\n\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content {\n    text-align: right;\n}\n\n.p-timeline-vertical .p-timeline-event-opposite,\n.p-timeline-vertical .p-timeline-event-content {\n    padding: ".concat(dt('timeline.vertical.event.content.padding'), ";\n}\n\n.p-timeline-vertical .p-timeline-event-connector {\n    width: ").concat(dt('timeline.event.connector.size'), ";\n}\n\n.p-timeline-event {\n    display: flex;\n    position: relative;\n    min-height: ").concat(dt('timeline.event.min.height'), ";\n}\n\n.p-timeline-event:last-child {\n    min-height: 0;\n}\n\n.p-timeline-event-opposite {\n    flex: 1;\n}\n\n.p-timeline-event-content {\n    flex: 1;\n}\n\n.p-timeline-event-separator {\n    flex: 0;\n    display: flex;\n    align-items: center;\n    flex-direction: column;\n}\n\n.p-timeline-event-marker {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    align-self: baseline;\n    border-width: ").concat(dt('timeline.event.marker.border.width'), ";\n    border-style: solid;\n    border-color: ").concat(dt('timeline.event.marker.border.color'), ";\n    border-radius: ").concat(dt('timeline.event.marker.border.radius'), ";\n    width: ").concat(dt('timeline.event.marker.size'), ";\n    height: ").concat(dt('timeline.event.marker.size'), ";\n    background: ").concat(dt('timeline.event.marker.background'), ";\n}\n\n.p-timeline-event-marker::before {\n    content: \" \";\n    border-radius: ").concat(dt('timeline.event.marker.content.border.radius'), ";\n    width: ").concat(dt('timeline.event.marker.content.size'), ";\n    height:").concat(dt('timeline.event.marker.content.size'), ";\n    background: ").concat(dt('timeline.event.marker.content.background'), ";\n}\n\n.p-timeline-event-marker::after {\n    content: \" \";\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    border-radius: ").concat(dt('timeline.event.marker.border.radius'), ";\n    box-shadow: ").concat(dt('timeline.event.marker.content.inset.shadow'), ";\n}\n\n.p-timeline-event-connector {\n    flex-grow: 1;\n    background: ").concat(dt('timeline.event.connector.color'), ";\n}\n\n.p-timeline-horizontal {\n    flex-direction: row;\n}\n\n.p-timeline-horizontal .p-timeline-event {\n    flex-direction: column;\n    flex: 1;\n}\n\n.p-timeline-horizontal .p-timeline-event:last-child {\n    flex: 0;\n}\n\n.p-timeline-horizontal .p-timeline-event-separator {\n    flex-direction: row;\n}\n\n.p-timeline-horizontal .p-timeline-event-connector {\n    width: 100%;\n    height: ").concat(dt('timeline.event.connector.size'), ";\n}\n\n.p-timeline-horizontal .p-timeline-event-opposite,\n.p-timeline-horizontal .p-timeline-event-content {\n    padding: ").concat(dt('timeline.horizontal.event.content.padding'), ";\n}\n\n.p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) {\n    flex-direction: column-reverse;\n}\n\n.p-timeline-bottom .p-timeline-event {\n    flex-direction: column-reverse;\n}\n");
-};
 var classes = {
-  root: function root(_ref2) {
-    var props = _ref2.props;
+  root: function root(_ref) {
+    var props = _ref.props;
     return ['p-timeline p-component', 'p-timeline-' + props.align, 'p-timeline-' + props.layout];
   },
   event: 'p-timeline-event',
@@ -18,7 +15,7 @@ var classes = {
 };
 var TimelineStyle = BaseStyle.extend({
   name: 'timeline',
-  theme: theme,
+  style: style,
   classes: classes
 });
 

package/timeline/style/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/timeline/style/TimelineStyle.js"],"sourcesContent":["import BaseStyle from '@primevue/core/base/style';\n\nconst theme = ({ dt }) => `\n.p-timeline {\n    display: flex;\n    flex-grow: 1;\n    flex-direction: column;\n    direction: ltr;\n}\n\n.p-timeline-left .p-timeline-event-opposite {\n    text-align: right;\n}\n\n.p-timeline-left .p-timeline-event-content {\n    text-align: left;\n}\n\n.p-timeline-right .p-timeline-event {\n    flex-direction: row-reverse;\n}\n\n.p-timeline-right .p-timeline-event-opposite {\n    text-align: left;\n}\n\n.p-timeline-right .p-timeline-event-content {\n    text-align: right;\n}\n\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) {\n    flex-direction: row-reverse;\n}\n\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite {\n    text-align: right;\n}\n\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content {\n    text-align: left;\n}\n\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite {\n    text-align: left;\n}\n\n.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content {\n    text-align: right;\n}\n\n.p-timeline-vertical .p-timeline-event-opposite,\n.p-timeline-vertical .p-timeline-event-content {\n    padding: ${dt('timeline.vertical.event.content.padding')};\n}\n\n.p-timeline-vertical .p-timeline-event-connector {\n    width: ${dt('timeline.event.connector.size')};\n}\n\n.p-timeline-event {\n    display: flex;\n    position: relative;\n    min-height: ${dt('timeline.event.min.height')};\n}\n\n.p-timeline-event:last-child {\n    min-height: 0;\n}\n\n.p-timeline-event-opposite {\n    flex: 1;\n}\n\n.p-timeline-event-content {\n    flex: 1;\n}\n\n.p-timeline-event-separator {\n    flex: 0;\n    display: flex;\n    align-items: center;\n    flex-direction: column;\n}\n\n.p-timeline-event-marker {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    align-self: baseline;\n    border-width: ${dt('timeline.event.marker.border.width')};\n    border-style: solid;\n    border-color: ${dt('timeline.event.marker.border.color')};\n    border-radius: ${dt('timeline.event.marker.border.radius')};\n    width: ${dt('timeline.event.marker.size')};\n    height: ${dt('timeline.event.marker.size')};\n    background: ${dt('timeline.event.marker.background')};\n}\n\n.p-timeline-event-marker::before {\n    content: \" \";\n    border-radius: ${dt('timeline.event.marker.content.border.radius')};\n    width: ${dt('timeline.event.marker.content.size')};\n    height:${dt('timeline.event.marker.content.size')};\n    background: ${dt('timeline.event.marker.content.background')};\n}\n\n.p-timeline-event-marker::after {\n    content: \" \";\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    border-radius: ${dt('timeline.event.marker.border.radius')};\n    box-shadow: ${dt('timeline.event.marker.content.inset.shadow')};\n}\n\n.p-timeline-event-connector {\n    flex-grow: 1;\n    background: ${dt('timeline.event.connector.color')};\n}\n\n.p-timeline-horizontal {\n    flex-direction: row;\n}\n\n.p-timeline-horizontal .p-timeline-event {\n    flex-direction: column;\n    flex: 1;\n}\n\n.p-timeline-horizontal .p-timeline-event:last-child {\n    flex: 0;\n}\n\n.p-timeline-horizontal .p-timeline-event-separator {\n    flex-direction: row;\n}\n\n.p-timeline-horizontal .p-timeline-event-connector {\n    width: 100%;\n    height: ${dt('timeline.event.connector.size')};\n}\n\n.p-timeline-horizontal .p-timeline-event-opposite,\n.p-timeline-horizontal .p-timeline-event-content {\n    padding: ${dt('timeline.horizontal.event.content.padding')};\n}\n\n.p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) {\n    flex-direction: column-reverse;\n}\n\n.p-timeline-bottom .p-timeline-event {\n    flex-direction: column-reverse;\n}\n`;\n\nconst classes = {\n    root: ({ props }) => ['p-timeline p-component', 'p-timeline-' + props.align, 'p-timeline-' + props.layout],\n    event: 'p-timeline-event',\n    eventOpposite: 'p-timeline-event-opposite',\n    eventSeparator: 'p-timeline-event-separator',\n    eventMarker: 'p-timeline-event-marker',\n    eventConnector: 'p-timeline-event-connector',\n    eventContent: 'p-timeline-event-content'\n};\n\nexport default BaseStyle.extend({\n    name: 'timeline',\n    theme,\n    classes\n});\n"],"names":["theme","_ref","dt","concat","classes","root","_ref2","props","align","layout","event","eventOpposite","eventSeparator","eventMarker","eventConnector","eventContent","BaseStyle","extend","name"],"mappings":";;AAEA,IAAMA,KAAK,GAAG,SAARA,KAAKA,CAAAC,IAAA,EAAA;AAAA,EAAA,IAAMC,EAAE,GAAAD,IAAA,CAAFC,EAAE;AAAA,EAAA,OAAA,0uCAAA,CAAAC,MAAA,CAkDJD,EAAE,CAAC,yCAAyC,CAAC,EAAAC,yEAAAA,CAAAA,CAAAA,MAAA,CAI/CD,EAAE,CAAC,+BAA+B,CAAC,EAAA,4FAAA,CAAA,CAAAC,MAAA,CAM9BD,EAAE,CAAC,2BAA2B,CAAC,EAAAC,sdAAAA,CAAAA,CAAAA,MAAA,CA4B7BD,EAAE,CAAC,oCAAoC,CAAC,EAAA,iDAAA,CAAA,CAAAC,MAAA,CAExCD,EAAE,CAAC,oCAAoC,CAAC,EAAAC,wBAAAA,CAAAA,CAAAA,MAAA,CACvCD,EAAE,CAAC,qCAAqC,CAAC,EAAA,gBAAA,CAAA,CAAAC,MAAA,CACjDD,EAAE,CAAC,4BAA4B,CAAC,EAAAC,iBAAAA,CAAAA,CAAAA,MAAA,CAC/BD,EAAE,CAAC,4BAA4B,CAAC,EAAA,qBAAA,CAAA,CAAAC,MAAA,CAC5BD,EAAE,CAAC,kCAAkC,CAAC,EAAAC,sFAAAA,CAAAA,CAAAA,MAAA,CAKnCD,EAAE,CAAC,6CAA6C,CAAC,EAAA,gBAAA,CAAA,CAAAC,MAAA,CACzDD,EAAE,CAAC,oCAAoC,CAAC,EAAAC,gBAAAA,CAAAA,CAAAA,MAAA,CACxCD,EAAE,CAAC,oCAAoC,CAAC,EAAA,qBAAA,CAAA,CAAAC,MAAA,CACnCD,EAAE,CAAC,0CAA0C,CAAC,EAAAC,mJAAAA,CAAAA,CAAAA,MAAA,CAQ3CD,EAAE,CAAC,qCAAqC,CAAC,EAAA,qBAAA,CAAA,CAAAC,MAAA,CAC5CD,EAAE,CAAC,4CAA4C,CAAC,EAAAC,4EAAAA,CAAAA,CAAAA,MAAA,CAKhDD,EAAE,CAAC,gCAAgC,CAAC,EAAA,kZAAA,CAAA,CAAAC,MAAA,CAsBxCD,EAAE,CAAC,+BAA+B,CAAC,EAAAC,+HAAAA,CAAAA,CAAAA,MAAA,CAKlCD,EAAE,CAAC,2CAA2C,CAAC,EAAA,qNAAA,CAAA;AAAA,CAU7D;AAED,IAAME,OAAO,GAAG;AACZC,EAAAA,IAAI,EAAE,SAANA,IAAIA,CAAAC,KAAA,EAAA;AAAA,IAAA,IAAKC,KAAK,GAAAD,KAAA,CAALC,KAAK;AAAA,IAAA,OAAO,CAAC,wBAAwB,EAAE,aAAa,GAAGA,KAAK,CAACC,KAAK,EAAE,aAAa,GAAGD,KAAK,CAACE,MAAM,CAAC;AAAA,GAAA;AAC1GC,EAAAA,KAAK,EAAE,kBAAkB;AACzBC,EAAAA,aAAa,EAAE,2BAA2B;AAC1CC,EAAAA,cAAc,EAAE,4BAA4B;AAC5CC,EAAAA,WAAW,EAAE,yBAAyB;AACtCC,EAAAA,cAAc,EAAE,4BAA4B;AAC5CC,EAAAA,YAAY,EAAE;AAClB,CAAC;AAED,oBAAeC,SAAS,CAACC,MAAM,CAAC;AAC5BC,EAAAA,IAAI,EAAE,UAAU;AAChBlB,EAAAA,KAAK,EAALA,KAAK;AACLI,EAAAA,OAAO,EAAPA;AACJ,CAAC,CAAC;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/timeline/style/TimelineStyle.js"],"sourcesContent":["import { style } from '@primeuix/styles/timeline';\nimport BaseStyle from '@primevue/core/base/style';\n\nconst classes = {\n    root: ({ props }) => ['p-timeline p-component', 'p-timeline-' + props.align, 'p-timeline-' + props.layout],\n    event: 'p-timeline-event',\n    eventOpposite: 'p-timeline-event-opposite',\n    eventSeparator: 'p-timeline-event-separator',\n    eventMarker: 'p-timeline-event-marker',\n    eventConnector: 'p-timeline-event-connector',\n    eventContent: 'p-timeline-event-content'\n};\n\nexport default BaseStyle.extend({\n    name: 'timeline',\n    style,\n    classes\n});\n"],"names":["classes","root","_ref","props","align","layout","event","eventOpposite","eventSeparator","eventMarker","eventConnector","eventContent","BaseStyle","extend","name","style"],"mappings":";;;AAGA,IAAMA,OAAO,GAAG;AACZC,EAAAA,IAAI,EAAE,SAANA,IAAIA,CAAAC,IAAA,EAAA;AAAA,IAAA,IAAKC,KAAK,GAAAD,IAAA,CAALC,KAAK;AAAA,IAAA,OAAO,CAAC,wBAAwB,EAAE,aAAa,GAAGA,KAAK,CAACC,KAAK,EAAE,aAAa,GAAGD,KAAK,CAACE,MAAM,CAAC;AAAA,GAAA;AAC1GC,EAAAA,KAAK,EAAE,kBAAkB;AACzBC,EAAAA,aAAa,EAAE,2BAA2B;AAC1CC,EAAAA,cAAc,EAAE,4BAA4B;AAC5CC,EAAAA,WAAW,EAAE,yBAAyB;AACtCC,EAAAA,cAAc,EAAE,4BAA4B;AAC5CC,EAAAA,YAAY,EAAE;AAClB,CAAC;AAED,oBAAeC,SAAS,CAACC,MAAM,CAAC;AAC5BC,EAAAA,IAAI,EAAE,UAAU;AAChBC,EAAAA,KAAK,EAALA,KAAK;AACLf,EAAAA,OAAO,EAAPA;AACJ,CAAC,CAAC;;;;"}

package/toast/BaseToast.vue

@@ -49,6 +49,18 @@ export default {
         closeButtonProps: {
             type: null,
             default: null
+        },
+        onMouseEnter: {
+            type: Function,
+            default: undefined
+        },
+        onMouseLeave: {
+            type: Function,
+            default: undefined
+        },
+        onClick: {
+            type: Function,
+            default: undefined
         }
     },
     style: ToastStyle,

package/toast/ToastMessage.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="[cx('message'), message.styleClass]" role="alert" aria-live="assertive" aria-atomic="true" v-bind="ptm('message')">
+    <div :class="[cx('message'), message.styleClass]" role="alert" aria-live="assertive" aria-atomic="true" 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">
@@ -34,6 +34,8 @@ export default {
     extends: BaseComponent,
     emits: ['close'],
     closeTimeout: null,
+    createdAt: null,
+    lifeRemaining: null,
     props: {
         message: {
             type: null,
@@ -70,15 +72,20 @@ export default {
     },
     mounted() {
         if (this.message.life) {
-            this.closeTimeout = setTimeout(() => {
-                this.close({ message: this.message, type: 'life-end' });
-            }, this.message.life);
+            this.lifeRemaining = this.message.life;
+            this.startTimeout();
         }
     },
     beforeUnmount() {
         this.clearCloseTimeout();
     },
     methods: {
+        startTimeout() {
+            this.createdAt = new Date().valueOf();
+            this.closeTimeout = setTimeout(() => {
+                this.close({ message: this.message, type: 'life-end' });
+            }, this.lifeRemaining);
+        },
         close(params) {
             this.$emit('close', params);
         },
@@ -91,6 +98,33 @@ export default {
                 clearTimeout(this.closeTimeout);
                 this.closeTimeout = null;
             }
+        },
+        onMessageClick(event) {
+            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 (event.defaultPrevented) {
+                return;
+            }
+
+            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 (event.defaultPrevented) {
+                return;
+            }
+
+            if (this.message.life) {
+                this.startTimeout();
+            }
         }
     },
     computed: {

package/toast/index.d.ts

@@ -231,6 +231,18 @@ export interface ToastProps {
      * @type {ToastMessageOptions}
      */
     message?: ToastMessageOptions;
+    /**
+     * Used to specify a callback function to be run when the mouseenter event is fired on the message component.
+     */
+    onMouseEnter?: Function | undefined;
+    /**
+     * Used to specify a callback function to be run when the mouseleave event is fired on the message component.
+     */
+    onMouseLeave?: Function | undefined;
+    /**
+     * Used to specify a callback function to be run when the click event is fired on the message component.
+     */
+    onClick?: Function | undefined;
     /**
      * It generates scoped CSS variables using design tokens for the component.
      */

package/toast/index.mjs

@@ -11,7 +11,7 @@ import InfoCircleIcon from '@primevue/icons/infocircle';
 import TimesIcon from '@primevue/icons/times';
 import TimesCircleIcon from '@primevue/icons/timescircle';
 import Ripple from 'primevue/ripple';
-import { resolveDirective, openBlock, createElementBlock, mergeProps, createBlock, resolveDynamicComponent, Fragment, createElementVNode, toDisplayString, normalizeProps, withDirectives, createCommentVNode, resolveComponent, withCtx, createVNode, TransitionGroup, renderList } from 'vue';
+import { resolveDirective, createElementBlock, openBlock, mergeProps, createBlock, resolveDynamicComponent, createCommentVNode, Fragment, createElementVNode, toDisplayString, normalizeProps, withDirectives, resolveComponent, withCtx, createVNode, TransitionGroup, renderList } from 'vue';
 
 var script$2 = {
   name: 'BaseToast',
@@ -60,6 +60,18 @@ var script$2 = {
     closeButtonProps: {
       type: null,
       "default": null
+    },
+    onMouseEnter: {
+      type: Function,
+      "default": undefined
+    },
+    onMouseLeave: {
+      type: Function,
+      "default": undefined
+    },
+    onClick: {
+      type: Function,
+      "default": undefined
     }
   },
   style: ToastStyle,
@@ -77,6 +89,8 @@ var script$1 = {
   "extends": BaseComponent,
   emits: ['close'],
   closeTimeout: null,
+  createdAt: null,
+  lifeRemaining: null,
   props: {
     message: {
       type: null,
@@ -112,20 +126,25 @@ var script$1 = {
     }
   },
   mounted: function mounted() {
-    var _this = this;
     if (this.message.life) {
-      this.closeTimeout = setTimeout(function () {
-        _this.close({
-          message: _this.message,
-          type: 'life-end'
-        });
-      }, this.message.life);
+      this.lifeRemaining = this.message.life;
+      this.startTimeout();
     }
   },
   beforeUnmount: function beforeUnmount() {
     this.clearCloseTimeout();
   },
   methods: {
+    startTimeout: function startTimeout() {
+      var _this = this;
+      this.createdAt = new Date().valueOf();
+      this.closeTimeout = setTimeout(function () {
+        _this.close({
+          message: _this.message,
+          type: 'life-end'
+        });
+      }, this.lifeRemaining);
+    },
     close: function close(params) {
       this.$emit('close', params);
     },
@@ -141,6 +160,41 @@ var script$1 = {
         clearTimeout(this.closeTimeout);
         this.closeTimeout = null;
       }
+    },
+    onMessageClick: function onMessageClick(event) {
+      var _this$props;
+      ((_this$props = this.props) === null || _this$props === void 0 ? void 0 : _this$props.onClick) && this.props.onClick({
+        originalEvent: event,
+        message: this.message
+      });
+    },
+    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();
+      }
+    },
+    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();
+      }
     }
   },
   computed: {
@@ -170,10 +224,10 @@ 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 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), !0).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: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+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 || "default"); if ("object" != _typeof$1(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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 render$1(_ctx, _cache, $props, $setup, $data, $options) {
   var _directive_ripple = resolveDirective("ripple");
@@ -182,7 +236,17 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
     role: "alert",
     "aria-live": "assertive",
     "aria-atomic": "true"
-  }, _ctx.ptm('message')), [$props.templates.container ? (openBlock(), createBlock(resolveDynamicComponent($props.templates.container), {
+  }, _ctx.ptm('message'), {
+    onClick: _cache[1] || (_cache[1] = function () {
+      return $options.onMessageClick && $options.onMessageClick.apply($options, arguments);
+    }),
+    onMouseenter: _cache[2] || (_cache[2] = function () {
+      return $options.onMouseEnter && $options.onMouseEnter.apply($options, arguments);
+    }),
+    onMouseleave: _cache[3] || (_cache[3] = function () {
+      return $options.onMouseLeave && $options.onMouseLeave.apply($options, arguments);
+    })
+  }), [$props.templates.container ? (openBlock(), createBlock(resolveDynamicComponent($props.templates.container), {
     key: 0,
     message: $props.message,
     closeCallback: $options.onCloseClick
@@ -339,10 +403,10 @@ var script = {
 
 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 ownKeys(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(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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 || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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); }
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_ToastMessage = resolveComponent("ToastMessage");
   var _component_Portal = resolveComponent("Portal");