vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactor #3965 - For Toast

pull/4004/head
Bahadır Sofuoğlu 2023-05-26 00:53:07 +03:00
parent b96dff4711
commit 41c4194b27
5 changed files with 266 additions and 220 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

174
components/lib/toast/BaseToast.vue Normal file
View File

@ -0,0 +1,174 @@
<script>
import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.p-toast {
position: fixed;
width: 25rem;
}
.p-toast-message-content {
display: flex;
align-items: flex-start;
}
.p-toast-message-text {
flex: 1 1 auto;
}
.p-toast-top-right {
top: 20px;
right: 20px;
}
.p-toast-top-left {
top: 20px;
left: 20px;
}
.p-toast-bottom-left {
bottom: 20px;
left: 20px;
}
.p-toast-bottom-right {
bottom: 20px;
right: 20px;
}
.p-toast-top-center {
top: 20px;
left: 50%;
transform: translateX(-50%);
}
.p-toast-bottom-center {
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.p-toast-center {
left: 50%;
top: 50%;
min-width: 20vw;
transform: translate(-50%, -50%);
}
.p-toast-icon-close {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
.p-toast-icon-close.p-link {
cursor: pointer;
}
/* Animations */
.p-toast-message-enter-from {
opacity: 0;
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
transform: translateY(50%);
}
.p-toast-message-leave-from {
max-height: 1000px;
}
.p-toast .p-toast-message.p-toast-message-leave-to {
max-height: 0;
opacity: 0;
margin-bottom: 0;
overflow: hidden;
}
.p-toast-message-enter-active {
-webkit-transition: transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
}
.p-toast-message-leave-active {
-webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s;
transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s;
}
`;
const classes = {
root: ({ props, instance }) => [
'p-toast p-component p-toast-' + props.position,
{
'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
'p-ripple-disabled': instance.$primevue.config.ripple === false
}
]
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_toast_style', manual: true });
export default {
name: 'BaseToast',
extends: BaseComponent,
props: {
group: {
type: String,
default: null
},
position: {
type: String,
default: 'top-right'
},
autoZIndex: {
type: Boolean,
default: true
},
baseZIndex: {
type: Number,
default: 0
},
breakpoints: {
type: Object,
default: null
},
closeIcon: {
type: String,
default: undefined
},
infoIcon: {
type: String,
default: undefined
},
warnIcon: {
type: String,
default: undefined
},
errorIcon: {
type: String,
default: undefined
},
successIcon: {
type: String,
default: undefined
},
closeButtonProps: {
type: null,
default: null
}
},
css: {
classes
},
watch: {
isUnstyled: {
immediate: true,
handler(newValue) {
!newValue && loadStyle();
}
}
}
};
</script>

73
components/lib/toast/BaseToastMessage.vue Normal file
View File

@ -0,0 +1,73 @@
<script>
import BaseComponent from 'primevue/basecomponent';
const classes = {
container: ({ props }) => [
'p-toast-message',
props.message.styleClass,
{
'p-toast-message-info': props.message.severity === 'info',
'p-toast-message-warn': props.message.severity === 'warn',
'p-toast-message-error': props.message.severity === 'error',
'p-toast-message-success': props.message.severity === 'success'
}
],
content: ({ props }) => 'p-toast-message-content ' + props.message.contentStyleClass || '',
icon: ({ props }) => [
'p-toast-message-icon',
{
[props.infoIcon]: props.message.severity === 'info',
[props.warnIcon]: props.message.severity === 'warn',
[props.errorIcon]: props.message.severity === 'error',
[props.successIcon]: props.message.severity === 'success'
}
],
text: 'p-toast-message-text',
summary: 'p-toast-summary',
detail: 'p-toast-detail',
button: 'p-toast-icon-close p-link',
buttonIcon: ({ props }) => ['p-toast-icon-close-icon', props.closeIcon]
};
export default {
name: 'BaseToast',
extends: BaseComponent,
props: {
message: {
type: null,
default: null
},
templates: {
type: Object,
default: null
},
closeIcon: {
type: String,
default: null
},
infoIcon: {
type: String,
default: null
},
warnIcon: {
type: String,
default: null
},
errorIcon: {
type: String,
default: null
},
successIcon: {
type: String,
default: null
},
closeButtonProps: {
type: null,
default: null
}
},
css: {
classes
}
};
</script>

5
components/lib/toast/Toast.d.ts vendored
View File

@ -206,6 +206,11 @@ export interface ToastProps {
* @type {ToastPassThroughOptions}
*/
pt?: ToastPassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
*/
unstyled?: boolean;
}
/**

158
components/lib/toast/Toast.vue
View File

@ -1,6 +1,6 @@
<template>
<Portal>
<div ref="container" :class="containerClass" v-bind="{ ...$attrs, ...ptm('root') }">
<div ref="container" :class="cx('root')" v-bind="{ ...$attrs, ...ptm('root') }">
<transition-group name="p-toast-message" tag="div" @enter="onEnter" @leave="onLeave" v-bind="ptm('message')">
<ToastMessage
v-for="msg of messages"
@ -22,7 +22,7 @@
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import BaseToast from './BaseToast.vue';
import Portal from 'primevue/portal';
import ToastEventBus from 'primevue/toasteventbus';
import { ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
@ -32,55 +32,10 @@ var messageIdx = 0;
export default {
name: 'Toast',
extends: BaseComponent,
extends: BaseToast,
inheritAttrs: false,
emits: ['close', 'life-end'],
props: {
group: {
type: String,
default: null
},
position: {
type: String,
default: 'top-right'
},
autoZIndex: {
type: Boolean,
default: true
},
baseZIndex: {
type: Number,
default: 0
},
breakpoints: {
type: Object,
default: null
},
closeIcon: {
type: String,
default: undefined
},
infoIcon: {
type: String,
default: undefined
},
warnIcon: {
type: String,
default: undefined
},
errorIcon: {
type: String,
default: undefined
},
successIcon: {
type: String,
default: undefined
},
closeButtonProps: {
type: null,
default: null
}
},
data() {
return {
messages: []
@ -190,15 +145,6 @@ export default {
}
},
computed: {
containerClass() {
return [
'p-toast p-component p-toast-' + this.position,
{
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
'p-ripple-disabled': this.$primevue.config.ripple === false
}
];
},
attributeSelector() {
return UniqueComponentId();
}
@ -209,99 +155,3 @@ export default {
}
};
</script>
<style>
.p-toast {
position: fixed;
width: 25rem;
}
.p-toast-message-content {
display: flex;
align-items: flex-start;
}
.p-toast-message-text {
flex: 1 1 auto;
}
.p-toast-top-right {
top: 20px;
right: 20px;
}
.p-toast-top-left {
top: 20px;
left: 20px;
}
.p-toast-bottom-left {
bottom: 20px;
left: 20px;
}
.p-toast-bottom-right {
bottom: 20px;
right: 20px;
}
.p-toast-top-center {
top: 20px;
left: 50%;
transform: translateX(-50%);
}
.p-toast-bottom-center {
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.p-toast-center {
left: 50%;
top: 50%;
min-width: 20vw;
transform: translate(-50%, -50%);
}
.p-toast-icon-close {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
.p-toast-icon-close.p-link {
cursor: pointer;
}
/* Animations */
.p-toast-message-enter-from {
opacity: 0;
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
transform: translateY(50%);
}
.p-toast-message-leave-from {
max-height: 1000px;
}
.p-toast .p-toast-message.p-toast-message-leave-to {
max-height: 0;
opacity: 0;
margin-bottom: 0;
overflow: hidden;
}
.p-toast-message-enter-active {
-webkit-transition: transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
}
.p-toast-message-leave-active {
-webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s;
transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s;
}
</style>

76
components/lib/toast/ToastMessage.vue
View File

@ -1,17 +1,17 @@
<template>
<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')">
<div :class="cx('container')" role="alert" aria-live="assertive" aria-atomic="true" v-bind="ptm('container')">
<div :class="cx('content')" 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" 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>
<component :is="templates.icon ? templates.icon : iconComponent.name ? iconComponent : 'span'" :class="cx('icon')" v-bind="ptm('icon')" />
<div :class="cx('text')" v-bind="ptm('text')">
<span :class="cx('summary')" v-bind="ptm('summary')">{{ message.summary }}</span>
<div :class="cx('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" 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 v-ripple :class="cx('button')" type="button" :aria-label="closeAriaLabel" @click="onCloseClick" autofocus v-bind="{ ...closeButtonProps, ...ptm('button') }">
<component :is="templates.closeicon || 'TimesIcon'" :class="cx('buttonIcon')" v-bind="ptm('buttonIcon')" />
</button>
</div>
</div>
@ -19,7 +19,7 @@
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import BaseToastMessage from './BaseToastMessage.vue';
import CheckIcon from 'primevue/icons/check';
import ExclamationTriangleIcon from 'primevue/icons/exclamationtriangle';
import InfoCircleIcon from 'primevue/icons/infocircle';
@ -29,42 +29,8 @@ import Ripple from 'primevue/ripple';
export default {
name: 'ToastMessage',
extends: BaseComponent,
extends: BaseToastMessage,
emits: ['close'],
props: {
message: {
type: null,
default: null
},
templates: {
type: Object,
default: null
},
closeIcon: {
type: String,
default: null
},
infoIcon: {
type: String,
default: null
},
warnIcon: {
type: String,
default: null
},
errorIcon: {
type: String,
default: null
},
successIcon: {
type: String,
default: null
},
closeButtonProps: {
type: null,
default: null
}
},
closeTimeout: null,
mounted() {
if (this.message.life) {
@ -92,18 +58,6 @@ export default {
}
},
computed: {
containerClass() {
return [
'p-toast-message',
this.message.styleClass,
{
'p-toast-message-info': this.message.severity === 'info',
'p-toast-message-warn': this.message.severity === 'warn',
'p-toast-message-error': this.message.severity === 'error',
'p-toast-message-success': this.message.severity === 'success'
}
];
},
iconComponent() {
return {
info: !this.infoIcon && InfoCircleIcon,
@ -112,16 +66,6 @@ export default {
error: !this.errorIcon && TimesCircleIcon
}[this.message.severity];
},
iconClass() {
return [
{
[this.infoIcon]: this.message.severity === 'info',
[this.warnIcon]: this.message.severity === 'warn',
[this.errorIcon]: this.message.severity === 'error',
[this.successIcon]: this.message.severity === 'success'
}
];
},
closeAriaLabel() {
return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
}