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

Refactor #3965 - For Message

pull/3997/head
Bahadır Sofuoğlu 2023-05-25 16:22:28 +03:00
parent e0b7838863
commit ac5f627637
3 changed files with 122 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
components/lib/message/BaseMessage.vue Normal file
View File

@ -0,0 +1,107 @@
<script>
import BaseComponent from 'primevue/basecomponent';
import { useStyle } from 'primevue/usestyle';
const styles = `
.p-message-wrapper {
display: flex;
align-items: center;
}
.p-message-close {
display: flex;
align-items: center;
justify-content: center;
}
.p-message-close.p-link {
margin-left: auto;
overflow: hidden;
position: relative;
}
.p-message-enter-from {
opacity: 0;
}
.p-message-enter-active {
transition: opacity 0.3s;
}
.p-message.p-message-leave-from {
max-height: 1000px;
}
.p-message.p-message-leave-to {
max-height: 0;
opacity: 0;
margin: 0 !important;
}
.p-message-leave-active {
overflow: hidden;
transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s;
}
.p-message-leave-active .p-message-close {
display: none;
}
`;
const classes = {
root: ({ props }) => 'p-message p-component p-message-' + props.severity,
wrapper: 'p-message-wrapper',
icon: ({ props }) => ['p-message-icon', props.icon],
text: 'p-message-text',
button: 'p-message-close p-link',
buttonIcon: ({ props }) => ['p-message-close-icon', props.closeIcon]
};
const { load: loadStyle } = useStyle(styles, { id: 'primevue_message_style', manual: true });
export default {
name: 'BaseMessage',
extends: BaseComponent,
props: {
severity: {
type: String,
default: 'info'
},
closable: {
type: Boolean,
default: true
},
sticky: {
type: Boolean,
default: true
},
life: {
type: Number,
default: 3000
},
icon: {
type: String,
default: undefined
},
closeIcon: {
type: String,
default: undefined
},
closeButtonProps: {
type: null,
default: null
}
},
css: {
classes
},
watch: {
isUnstyled: {
immediate: true,
handler(newValue) {
!newValue && loadStyle();
}
}
}
};
</script>

5
components/lib/message/Message.d.ts vendored
View File

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

99
components/lib/message/Message.vue
View File

@ -1,17 +1,17 @@
<template>
<transition name="p-message" appear>
<div v-show="visible" :class="containerClass" role="alert" aria-live="assertive" aria-atomic="true" v-bind="ptm('root')">
<div class="p-message-wrapper" v-bind="ptm('wrapper')">
<div v-show="visible" :class="cx('root')" role="alert" aria-live="assertive" aria-atomic="true" v-bind="ptm('root')">
<div :class="cx('wrapper')" v-bind="ptm('wrapper')">
<slot name="messageicon" class="p-message-icon">
<component :is="icon ? 'span' : iconComponent" :class="['p-message-icon', icon]" v-bind="ptm('icon')"></component>
<component :is="icon ? 'span' : iconComponent" :class="cx('icon')" v-bind="ptm('icon')"></component>
</slot>
<div class="p-message-text" v-bind="ptm('text')">
<div class="p-message-text" :class="cx('icon')" v-bind="ptm('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, ...ptm('button') }">
<slot name="closeicon" class="p-message-close-icon">
<i v-if="closeIcon" :class="['p-message-close-icon', closeIcon]" v-bind="ptm('buttonIcon')" />
<TimesIcon v-else class="p-message-close-icon" v-bind="ptm('buttonIcon')" />
<button v-if="closable" v-ripple :class="cx('button')" :aria-label="closeAriaLabel" type="button" @click="close($event)" v-bind="{ ...closeButtonProps, ...ptm('button') }">
<slot name="closeicon">
<i v-if="closeIcon" :class="cx('buttonIcon')" v-bind="ptm('buttonIcon')" />
<TimesIcon v-else :class="cx('buttonIcon')" v-bind="ptm('buttonIcon')" />
</slot>
</button>
</div>
@ -20,7 +20,7 @@
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import BaseMessage from './BaseMessage.vue';
import CheckIcon from 'primevue/icons/check';
import ExclamationTriangleIcon from 'primevue/icons/exclamationtriangle';
import InfoCircleIcon from 'primevue/icons/infocircle';
@ -30,38 +30,8 @@ import Ripple from 'primevue/ripple';
export default {
name: 'Message',
extends: BaseComponent,
extends: BaseMessage,
emits: ['close'],
props: {
severity: {
type: String,
default: 'info'
},
closable: {
type: Boolean,
default: true
},
sticky: {
type: Boolean,
default: true
},
life: {
type: Number,
default: 3000
},
icon: {
type: String,
default: undefined
},
closeIcon: {
type: String,
default: undefined
},
closeButtonProps: {
type: null,
default: null
}
},
timeout: null,
data() {
return {
@ -85,9 +55,6 @@ export default {
}
},
computed: {
containerClass() {
return 'p-message p-component p-message-' + this.severity;
},
iconComponent() {
return {
info: InfoCircleIcon,
@ -112,49 +79,3 @@ export default {
}
};
</script>
<style>
.p-message-wrapper {
display: flex;
align-items: center;
}
.p-message-close {
display: flex;
align-items: center;
justify-content: center;
}
.p-message-close.p-link {
margin-left: auto;
overflow: hidden;
position: relative;
}
.p-message-enter-from {
opacity: 0;
}
.p-message-enter-active {
transition: opacity 0.3s;
}
.p-message.p-message-leave-from {
max-height: 1000px;
}
.p-message.p-message-leave-to {
max-height: 0;
opacity: 0;
margin: 0 !important;
}
.p-message-leave-active {
overflow: hidden;
transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s;
}
.p-message-leave-active .p-message-close {
display: none;
}
</style>