pull/7055/head
tugcekucukoglu 2025-01-07 14:28:22 +03:00
parent 450a68787d
commit 3f56ca656d
3 changed files with 22 additions and 11 deletions

View File

@ -57,6 +57,10 @@ export default {
onMouseLeave: {
type: Function,
default: undefined
},
onClick: {
type: Function,
default: undefined
}
},
style: ToastStyle,

View File

@ -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.
*/
@ -250,14 +262,6 @@ export interface ToastProps {
* @defaultValue false
*/
unstyled?: boolean;
/**
* 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;
}
/**

View File

@ -1,5 +1,5 @@
<template>
<div :class="[cx('message'), message.styleClass]" role="alert" aria-live="assertive" aria-atomic="true" v-bind="ptm('message')" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
<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">
@ -99,8 +99,11 @@ export default {
this.closeTimeout = null;
}
},
onMessageClick(event) {
this.props.onClick && this.props.onClick({ originalEvent: event, message: this.message });
},
onMouseEnter(event) {
this.props.onMouseEnter && this.props.onMouseEnter(event);
this.props.onMouseEnter && this.props.onMouseEnter({ originalEvent: event, message: this.message });
if (event.defaultPrevented) {
return;
@ -113,7 +116,7 @@ export default {
}
},
onMouseLeave(event) {
this.props.onMouseLeave && this.props.onMouseLeave(event);
this.props.onMouseLeave && this.props.onMouseLeave({ originalEvent: event, message: this.message });
if (event.defaultPrevented) {
return;