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

Cosmetics on message demos

pull/5880/head
Cagatay Civici 2024-06-13 11:04:57 +03:00
parent 3a3a6f09ea
commit 3510636429
7 changed files with 29 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
apps/showcase/doc/message/DynamicDoc.vue
View File

@ -7,8 +7,8 @@
<Button label="Show" @click="addMessages()" /> <Button label="Show" @click="addMessages()" />
<Button label="Clear" severity="secondary" @click="clearMessages()" /> <Button label="Clear" severity="secondary" @click="clearMessages()" />
</div> </div>
<transition-group name="p-message" tag="div" class="flex flex-col gap-4"> <transition-group name="p-message" tag="div" class="flex flex-col">
<Message v-for="msg of messages" :key="msg.id" :severity="msg.severity">{{ msg.content }}</Message> <Message v-for="msg of messages" :key="msg.id" :severity="msg.severity" class="mt-4">{{ msg.content }}</Message>
</transition-group> </transition-group>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
@ -24,8 +24,8 @@ export default {
basic: ` basic: `
<Button label="Show" @click="addMessages()" /> <Button label="Show" @click="addMessages()" />
<Button label="Clear" severity="secondary" class="ml-2" @click="clearMessages()" /> <Button label="Clear" severity="secondary" class="ml-2" @click="clearMessages()" />
<transition-group name="p-message" tag="div" class="mt-4 flex flex-col gap-4"> <transition-group name="p-message" tag="div" class="flex flex-col">
<Message v-for="msg of messages" :key="msg.id" :severity="msg.severity">{{ msg.content }}</Message> <Message v-for="msg of messages" :key="msg.id" :severity="msg.severity" class="mt-4">{{ msg.content }}</Message>
</transition-group> </transition-group>
`, `,
options: ` options: `
@ -35,8 +35,8 @@ export default {
<Button label="Show" @click="addMessages()" /> <Button label="Show" @click="addMessages()" />
<Button label="Clear" severity="secondary" @click="clearMessages()" /> <Button label="Clear" severity="secondary" @click="clearMessages()" />
</div> </div>
<transition-group name="p-message" tag="div" class="flex flex-col gap-4"> <transition-group name="p-message" tag="div" class="flex flex-col">
<Message v-for="msg of messages" :key="msg.id" :severity="msg.severity">{{ msg.content }}</Message> <Message v-for="msg of messages" :key="msg.id" :severity="msg.severity" class="mt-4">{{ msg.content }}</Message>
</transition-group> </transition-group>
</div> </div>
</template> </template>
@ -72,8 +72,8 @@ export default {
<Button label="Show" @click="addMessages()" /> <Button label="Show" @click="addMessages()" />
<Button label="Clear" severity="secondary" @click="clearMessages()" /> <Button label="Clear" severity="secondary" @click="clearMessages()" />
</div> </div>
<transition-group name="p-message" tag="div" class="flex flex-col gap-4"> <transition-group name="p-message" tag="div" class="flex flex-col">
<Message v-for="msg of messages" :key="msg.id" :severity="msg.severity">{{ msg.content }}</Message> <Message v-for="msg of messages" :key="msg.id" :severity="msg.severity" class="mt-4">{{ msg.content }}</Message>
</transition-group> </transition-group>
</div> </div>
</template> </template>

8
apps/showcase/doc/message/FormDoc.vue
View File

@ -9,7 +9,7 @@
</div> </div>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<InputText placeholder="Email" aria-label="email" invalid /> <InputText placeholder="Email" aria-label="email" invalid />
<Message severity="error" /> <Message severity="error" icon="pi pi-times-circle" />
</div> </div>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
@ -27,7 +27,7 @@ export default {
</div> </div>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<InputText placeholder="Email" aria-label="email" invalid /> <InputText placeholder="Email" aria-label="email" invalid />
<Message severity="error" /> <Message severity="error" icon="pi pi-times-circle" />
</div> </div>
`, `,
options: ` options: `
@ -39,7 +39,7 @@ export default {
</div> </div>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<InputText placeholder="Email" aria-label="email" invalid /> <InputText placeholder="Email" aria-label="email" invalid />
<Message severity="error" /> <Message severity="error" icon="pi pi-times-circle" />
</div> </div>
</div> </div>
</template> </template>
@ -56,7 +56,7 @@ export default {
</div> </div>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<InputText placeholder="Email" aria-label="email" invalid /> <InputText placeholder="Email" aria-label="email" invalid />
<Message severity="error" /> <Message severity="error" icon="pi pi-times-circle" />
</div> </div>
</div> </div>
</template> </template>

10
apps/showcase/doc/message/CustomIconDoc.vue → apps/showcase/doc/message/IconDoc.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Icon property and the <i>messageicon</i> slots are available to customize the icon of the message</p> <p>Icon property and the <i>icon</i> slots are available to customize the icon of the message</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-center gap-4"> <div class="card flex justify-center gap-4">
<Message severity="info" icon="pi pi-send">Info Message</Message> <Message severity="info" icon="pi pi-send">Info Message</Message>
<Message severity="success"> <Message severity="success">
<template #messageicon> <template #icon>
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" /> <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
</template> </template>
<span class="ml-2">How may I help you?</span> <span class="ml-2">How may I help you?</span>
@ -22,7 +22,7 @@ export default {
basic: ` basic: `
<Message severity="info" icon="pi pi-send">Info Message</Message> <Message severity="info" icon="pi pi-send">Info Message</Message>
<Message severity="success"> <Message severity="success">
<template #messageicon> <template #icon>
<Avatar image="/images/avatar/amyelsner.png" shape="circle" /> <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
</template> </template>
<span class="ml-2">How may I help you?</span> <span class="ml-2">How may I help you?</span>
@ -33,7 +33,7 @@ export default {
<div class="card flex justify-center gap-4"> <div class="card flex justify-center gap-4">
<Message severity="info" icon="pi pi-send">Info Message</Message> <Message severity="info" icon="pi pi-send">Info Message</Message>
<Message severity="success"> <Message severity="success">
<template #messageicon> <template #icon>
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" /> <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
</template> </template>
<span class="ml-2">How may I help you?</span> <span class="ml-2">How may I help you?</span>
@ -49,7 +49,7 @@ export default {
<div class="card flex justify-center gap-4"> <div class="card flex justify-center gap-4">
<Message severity="info" icon="pi pi-send">Info Message</Message> <Message severity="info" icon="pi pi-send">Info Message</Message>
<Message severity="success"> <Message severity="success">
<template #messageicon> <template #icon>
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" /> <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
</template> </template>
<span class="ml-2">How may I help you?</span> <span class="ml-2">How may I help you?</span>

12
apps/showcase/pages/message/index.vue
View File

@ -6,9 +6,9 @@
import AccessibilityDoc from '@/doc/message/AccessibilityDoc.vue'; import AccessibilityDoc from '@/doc/message/AccessibilityDoc.vue';
import BasicDoc from '@/doc/message/BasicDoc.vue'; import BasicDoc from '@/doc/message/BasicDoc.vue';
import ClosabledDoc from '@/doc/message/ClosableDoc.vue'; import ClosabledDoc from '@/doc/message/ClosableDoc.vue';
import CustomIconDoc from '@/doc/message/CustomIconDoc.vue';
import DynamicDoc from '@/doc/message/DynamicDoc.vue'; import DynamicDoc from '@/doc/message/DynamicDoc.vue';
import FormDoc from '@/doc/message/FormDoc.vue'; import FormDoc from '@/doc/message/FormDoc.vue';
import IconDoc from '@/doc/message/IconDoc.vue';
import ImportDoc from '@/doc/message/ImportDoc.vue'; import ImportDoc from '@/doc/message/ImportDoc.vue';
import LifeDoc from '@/doc/message/LifeDoc.vue'; import LifeDoc from '@/doc/message/LifeDoc.vue';
import SeverityDoc from '@/doc/message/SeverityDoc.vue'; import SeverityDoc from '@/doc/message/SeverityDoc.vue';
@ -34,6 +34,11 @@ export default {
label: 'Severity', label: 'Severity',
component: SeverityDoc component: SeverityDoc
}, },
{
id: 'icon',
label: 'Icon',
component: IconDoc
},
{ {
id: 'form', id: 'form',
label: 'Form', label: 'Form',
@ -54,11 +59,6 @@ export default {
label: 'Life', label: 'Life',
component: LifeDoc component: LifeDoc
}, },
{
id: 'custom-icon',
label: 'Custom Icon',
component: CustomIconDoc
},
{ {
id: 'accessibility', id: 'accessibility',
label: 'Accessibility', label: 'Accessibility',

4
packages/primevue/src/message/Message.d.ts vendored
View File

@ -168,9 +168,9 @@ export interface MessageSlots {
default(): VNode[]; default(): VNode[];
/** /**
* Custom message icon template. * Custom message icon template.
* @param {Object} scope - messageicon slot's params. * @param {Object} scope - icon slot's params.
*/ */
messageicon(scope: { icon(scope: {
/** /**
* Style class of the item icon element. * Style class of the item icon element.
*/ */

4
packages/primevue/src/message/Message.vue
View File

@ -3,8 +3,8 @@
<div v-show="visible" :class="cx('root')" role="alert" aria-live="assertive" aria-atomic="true" v-bind="ptm('root')"> <div v-show="visible" :class="cx('root')" role="alert" aria-live="assertive" aria-atomic="true" v-bind="ptm('root')">
<slot v-if="$slots.container" name="container" :closeCallback="close"></slot> <slot v-if="$slots.container" name="container" :closeCallback="close"></slot>
<div v-else :class="cx('content')" v-bind="ptm('content')"> <div v-else :class="cx('content')" v-bind="ptm('content')">
<slot name="messageicon" class="p-message-icon"> <slot name="icon" class="p-message-icon">
<component :is="icon ? 'span' : iconComponent" :class="[cx('icon'), icon]" v-bind="ptm('icon')"></component> <component :is="icon ? 'span' : null" :class="[cx('icon'), icon]" v-bind="ptm('icon')"></component>
</slot> </slot>
<div v-if="$slots.default" class="p-message-text" :class="cx('text')" v-bind="ptm('text')"> <div v-if="$slots.default" class="p-message-text" :class="cx('text')" v-bind="ptm('text')">
<slot></slot> <slot></slot>

3
packages/primevue/src/message/style/MessageStyle.js
View File

@ -174,11 +174,12 @@ const theme = ({ dt }) => `
.p-message.p-message-leave-to { .p-message.p-message-leave-to {
max-height: 0; max-height: 0;
opacity: 0; opacity: 0;
margin: 0;
} }
.p-message-leave-active { .p-message-leave-active {
overflow: hidden; overflow: hidden;
transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s; transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.3s;
} }
.p-message-leave-active .p-message-close-button { .p-message-leave-active .p-message-close-button {