vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-08 16:37:15 +00:00
Code Issues Projects Releases Packages Wiki Activity

Refactor #3832 Refactor #3833 - icon & .d.ts. updates

Browse source
This commit is contained in:
Tuğçe Küçükoğlu 2023-04-18 13:51:10 +03:00
parent f93e2be93d
commit cd7ef52319
32 changed files with 239 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

16
components/lib/message/Message.d.ts vendored
View file

@ -40,10 +40,12 @@ export interface MessageProps {
icon?: string | undefined;
/**
* Icon to display in the message close button.
* @deprecated since v3.27.0. Use 'closeicon' slot.
*/
closeIcon?: string | undefined;
/**
* Uses to pass all properties of the HTMLButtonElement to the close button.
* @deprecated since v3.26.0. Use 'pt' property.
*/
closeButtonProps?: ButtonHTMLAttributes | undefined;
}
@ -59,11 +61,21 @@ export interface MessageSlots {
/**
* Custom message icon template.
*/
messageicon(): VNode[];
messageicon(scope: {
/**
* Style class of the item icon element.
*/
class: any;
}): VNode[];
/**
* Custom close icon template.
*/
closeicon(): VNode[];
closeicon(scope: {
/**
* Style class of the item icon element.
*/
class: any;
}): VNode[];
}
/**

7
components/lib/message/Message.vue
View file

@ -2,15 +2,16 @@
<transition name="p-message" appear>
<div v-show="visible" :class="containerClass" role="alert" aria-live="assertive" aria-atomic="true">
<div class="p-message-wrapper">
<slot name="messageicon">
<slot name="messageicon" class="p-message-icon">
<component :is="icon ? 'span' : iconComponent" :class="['p-message-icon', icon]"></component>
</slot>
<div class="p-message-text">
<slot></slot>
</div>
<button v-if="closable" v-ripple class="p-message-close p-link" :aria-label="closeAriaLabel" type="button" @click="close($event)" v-bind="closeButtonProps">
<slot name="closeicon">
<component :is="closeIcon ? 'i' : 'TimesIcon'" :class="['p-message-close-icon', closeIcon]"></component>
<slot name="closeicon" class="p-message-close-icon">
<i v-if="closeIcon" :class="['p-message-close-icon', closeIcon]" />
<TimesIcon v-else class="p-message-close-icon" />
</slot>
</button>
</div>