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

Update message demos

pull/5880/head
Cagatay Civici 2024-06-13 01:05:19 +03:00
parent deed42de60
commit 2614bafa74
14 changed files with 197 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/showcase/assets/menu/menu.json
View File

@ -361,10 +361,6 @@
"name": "PanelMenu", "name": "PanelMenu",
"to": "/panelmenu" "to": "/panelmenu"
}, },
{
"name": "Steps",
"to": "/steps"
},
{ {
"name": "TieredMenu", "name": "TieredMenu",
"to": "/tieredmenu" "to": "/tieredmenu"
@ -387,10 +383,6 @@
"name": "Message", "name": "Message",
"to": "/message" "to": "/message"
}, },
{
"name": "InlineMessage",
"to": "/inlinemessage"
},
{ {
"name": "Toast", "name": "Toast",
"to": "/toast" "to": "/toast"

10
apps/showcase/doc/message/ClosableDoc.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Messages are closable by default, disable <i>closable</i> option to remove the close button.</p> <p>Enable <i>closable</i> option to display an icon to remove a message.</p>
</DocSectionText> </DocSectionText>
<div class="card"> <div class="card">
<Message :closable="false">Not Closable</Message> <Message closable>Closable Message</Message>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -14,12 +14,12 @@ export default {
return { return {
code: { code: {
basic: ` basic: `
<Message :closable="false">Not Closable</Message> <Message closable>Closable Message</Message>
`, `,
options: ` options: `
<template> <template>
<div class="card"> <div class="card">
<Message :closable="false">Not Closable</Message> <Message closable>Closable Message</Message>
</div> </div>
</template> </template>
@ -29,7 +29,7 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card"> <div class="card">
<Message :closable="false">Not Closable</Message> <Message closable>Closable Message</Message>
</div> </div>
</template> </template>

6
apps/showcase/doc/message/CustomIconDoc.vue
View File

@ -2,7 +2,7 @@
<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>messageicon</i> slots are available to customize the icon of the message</p>
</DocSectionText> </DocSectionText>
<div class="card"> <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 #messageicon>
@ -30,7 +30,7 @@ export default {
`, `,
options: ` options: `
<template> <template>
<div class="card"> <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 #messageicon>
@ -46,7 +46,7 @@ export default {
`, `,
composition: ` composition: `
<template> <template>
<div class="card"> <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 #messageicon>

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

@ -2,10 +2,12 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Multiple messages can be displayed using the standard v-for directive.</p> <p>Multiple messages can be displayed using the standard v-for directive.</p>
</DocSectionText> </DocSectionText>
<div class="card"> <div class="card flex flex-col items-center justify-center gap-4">
<Button label="Show" @click="addMessages()" /> <div class="flex gap-2">
<Button label="Clear" severity="secondary" class="ml-2" @click="clearMessages()" /> <Button label="Show" @click="addMessages()" />
<transition-group name="p-message" tag="div"> <Button label="Clear" severity="secondary" @click="clearMessages()" />
</div>
<transition-group name="p-message" tag="div" class="flex flex-col gap-4">
<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">{{ msg.content }}</Message>
</transition-group> </transition-group>
</div> </div>
@ -22,16 +24,18 @@ 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"> <transition-group name="p-message" tag="div" class="mt-4 flex flex-col gap-4">
<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">{{ msg.content }}</Message>
</transition-group> </transition-group>
`, `,
options: ` options: `
<template> <template>
<div class="card"> <div class="card flex flex-col items-center justify-center gap-4">
<Button label="Show" @click="addMessages()" /> <div class="flex gap-2">
<Button label="Clear" severity="secondary" class="ml-2" @click="clearMessages()" /> <Button label="Show" @click="addMessages()" />
<transition-group name="p-message" tag="div"> <Button label="Clear" severity="secondary" @click="clearMessages()" />
</div>
<transition-group name="p-message" tag="div" class="flex flex-col gap-4">
<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">{{ msg.content }}</Message>
</transition-group> </transition-group>
</div> </div>
@ -63,10 +67,12 @@ export default {
`, `,
composition: ` composition: `
<template> <template>
<div class="card"> <div class="card flex flex-col items-center justify-center gap-4">
<Button label="Show" @click="addMessages()" /> <div class="flex gap-2">
<Button label="Clear" severity="secondary" class="ml-2" @click="clearMessages()" /> <Button label="Show" @click="addMessages()" />
<transition-group name="p-message" tag="div"> <Button label="Clear" severity="secondary" @click="clearMessages()" />
</div>
<transition-group name="p-message" tag="div" class="flex flex-col gap-4">
<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">{{ msg.content }}</Message>
</transition-group> </transition-group>
</div> </div>

71
apps/showcase/doc/message/FormDoc.vue Normal file
View File

@ -0,0 +1,71 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Validation errors in a form are displayed with the <i>error</i> severity.</p>
</DocSectionText>
<div class="card">
<div class="flex flex-wrap mb-4 gap-2">
<InputText placeholder="Username" aria-label="username" invalid />
<Message severity="error">Username is required</Message>
</div>
<div class="flex flex-wrap gap-2">
<InputText placeholder="Email" aria-label="email" invalid />
<Message severity="error" />
</div>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
code: {
basic: `
<div class="flex flex-wrap mb-4 gap-2">
<InputText placeholder="Username" aria-label="username" invalid />
<Message severity="error">Username is required</Message>
</div>
<div class="flex flex-wrap gap-2">
<InputText placeholder="Email" aria-label="email" invalid />
<Message severity="error" />
</div>
`,
options: `
<template>
<div class="card">
<div class="flex flex-wrap mb-4 gap-2">
<InputText placeholder="Username" aria-label="username" invalid />
<Message severity="error">Username is required</Message>
</div>
<div class="flex flex-wrap gap-2">
<InputText placeholder="Email" aria-label="email" invalid />
<Message severity="error" />
</div>
</div>
</template>
<script>
<\/script>
`,
composition: `
<template>
<div class="card">
<div class="flex flex-wrap mb-4 gap-2">
<InputText placeholder="Username" aria-label="username" invalid />
<Message severity="error">Username is required</Message>
</div>
<div class="flex flex-wrap gap-2">
<InputText placeholder="Email" aria-label="email" invalid />
<Message severity="error" />
</div>
</div>
</template>
<script setup>
<\/script>
`
}
};
}
};
</script>

84
apps/showcase/doc/message/LifeDoc.vue Normal file
View File

@ -0,0 +1,84 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Messages can disappear automatically by defined the <i>life</i> in milliseconds.</p>
</DocSectionText>
<div class="card flex flex-col items-center justify-center gap-4">
<Button label="Show" @click="showMessage" :disabled="visible" />
<Message v-if="visible" severity="success" :life="3000">Auto Disappear Message</Message>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
visible: false,
code: {
basic: `
<Button label="Show" @click="showMessage" :disabled="visible" />
<Message v-if="visible" severity="success" :life="3000">Auto Disappear Message</Message>
`,
options: `
<template>
<div class="card flex flex-col items-center justify-center gap-4">
<Button label="Show" @click="showMessage" :disabled="visible" />
<Message v-if="visible" severity="success" :life="3000">Auto Disappear Message</Message>
</div>
</template>
<script>
export default {
data() {
return {
visible: false
};
},
methods: {
showMessage() {
this.visible = true;
setTimeout(() => {
this.visible = false;
}, 3500);
}
}
};
<\/script>
`,
composition: `
<template>
<div class="card flex flex-col items-center justify-center gap-4">
<Button label="Show" @click="showMessage" :disabled="visible" />
<Message v-if="visible" severity="success" :life="3000">Auto Disappear Message</Message>
</div>
</template>
<script setup>
import { ref } from 'vue';
let visible = ref(false);
const showMessage() {
visible.value = true;
setTimeout(() => {
visible.value = false;
}, 3500);
}
<\/script>
`
}
};
},
methods: {
showMessage() {
this.visible = true;
setTimeout(() => {
this.visible = false;
}, 3500);
}
}
};
</script>

6
apps/showcase/doc/message/SeverityDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>The <i>severity</i> option specifies the type of the message.</p> <p>The <i>severity</i> option specifies the type of the message.</p>
</DocSectionText> </DocSectionText>
<div class="card"> <div class="card flex flex-wrap gap-4 justify-center">
<Message severity="success">Success Message</Message> <Message severity="success">Success Message</Message>
<Message severity="info">Info Message</Message> <Message severity="info">Info Message</Message>
<Message severity="warn">Warn Message</Message> <Message severity="warn">Warn Message</Message>
@ -28,7 +28,7 @@ export default {
`, `,
options: ` options: `
<template> <template>
<div class="card"> <div class="card flex flex-wrap gap-4 justify-center">
<Message severity="success">Success Message</Message> <Message severity="success">Success Message</Message>
<Message severity="info">Info Message</Message> <Message severity="info">Info Message</Message>
<Message severity="warn">Warn Message</Message> <Message severity="warn">Warn Message</Message>
@ -43,7 +43,7 @@ export default {
`, `,
composition: ` composition: `
<template> <template>
<div class="card"> <div class="card flex flex-wrap gap-4 justify-center">
<Message severity="success">Success Message</Message> <Message severity="success">Success Message</Message>
<Message severity="info">Info Message</Message> <Message severity="info">Info Message</Message>
<Message severity="warn">Warn Message</Message> <Message severity="warn">Warn Message</Message>

70
apps/showcase/doc/message/StickyDoc.vue
View File

@ -1,70 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Messages can disappear automatically by turning the <i>sticky</i> option off. The timeout duration is defined using the <i>life</i> property in milliseconds.</p>
</DocSectionText>
<div class="card">
<Button label="Turn off Sticky" @click="sticky = false" />
<Message severity="success" :sticky="sticky" :life="1000">Success Message</Message>
<Message severity="info" :sticky="sticky" :life="2000">Info Message</Message>
<Message severity="warn" :sticky="sticky" :life="3000">Warn Message</Message>
<Message severity="error" :sticky="sticky" :life="4000">Error Message</Message>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
sticky: true,
code: {
basic: `
<Button label="Turn off Sticky" @click="sticky = false" />
<Message severity="success" :sticky="sticky" :life="1000">Success Message</Message>
<Message severity="info" :sticky="sticky" :life="2000">Info Message</Message>
<Message severity="warn" :sticky="sticky" :life="3000">Warn Message</Message>
<Message severity="error" :sticky="sticky" :life="4000">Error Message</Message>
`,
options: `
<template>
<div class="card">
<Button label="Turn off Sticky" @click="sticky = false" />
<Message severity="success" :sticky="sticky" :life="1000">Success Message</Message>
<Message severity="info" :sticky="sticky" :life="2000">Info Message</Message>
<Message severity="warn" :sticky="sticky" :life="3000">Warn Message</Message>
<Message severity="error" :sticky="sticky" :life="4000">Error Message</Message>
</div>
</template>
<script>
export default {
data() {
return {
sticky: false
};
}
};
<\/script>
`,
composition: `
<template>
<div class="card">
<Button label="Turn off Sticky" @click="sticky.value = false" />
<Message severity="success" :sticky="sticky" :life="1000">Success Message</Message>
<Message severity="info" :sticky="sticky" :life="2000">Info Message</Message>
<Message severity="warn" :sticky="sticky" :life="3000">Warn Message</Message>
<Message severity="error" :sticky="sticky" :life="4000">Error Message</Message>
</div>
</template>
<script setup>
import { ref } from 'vue';
let sticky = ref(true);
<\/script>
`
}
};
}
};
</script>

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

@ -8,9 +8,10 @@ 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 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 ImportDoc from '@/doc/message/ImportDoc.vue'; import ImportDoc from '@/doc/message/ImportDoc.vue';
import LifeDoc from '@/doc/message/LifeDoc.vue';
import SeverityDoc from '@/doc/message/SeverityDoc.vue'; import SeverityDoc from '@/doc/message/SeverityDoc.vue';
import StickyDoc from '@/doc/message/StickyDoc.vue';
import PTComponent from '@/doc/message/pt/index.vue'; import PTComponent from '@/doc/message/pt/index.vue';
import ThemingDoc from '@/doc/message/theming/index.vue'; import ThemingDoc from '@/doc/message/theming/index.vue';
@ -33,6 +34,11 @@ export default {
label: 'Severity', label: 'Severity',
component: SeverityDoc component: SeverityDoc
}, },
{
id: 'form',
label: 'Form',
component: FormDoc
},
{ {
id: 'dynamic', id: 'dynamic',
label: 'Dynamic', label: 'Dynamic',
@ -44,9 +50,9 @@ export default {
component: ClosabledDoc component: ClosabledDoc
}, },
{ {
id: 'sticky', id: 'life',
label: 'Sticky', label: 'Life',
component: StickyDoc component: LifeDoc
}, },
{ {
id: 'custom-icon', id: 'custom-icon',

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

@ -6,7 +6,7 @@
<slot name="messageicon" class="p-message-icon"> <slot name="messageicon" class="p-message-icon">
<component :is="icon ? 'span' : iconComponent" :class="[cx('icon'), icon]" v-bind="ptm('icon')"></component> <component :is="icon ? 'span' : iconComponent" :class="[cx('icon'), icon]" v-bind="ptm('icon')"></component>
</slot> </slot>
<div 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>
</div> </div>
<button v-if="closable" v-ripple :class="cx('closeButton')" :aria-label="closeAriaLabel" type="button" @click="close($event)" v-bind="{ ...closeButtonProps, ...ptm('closeButton') }"> <button v-if="closable" v-ripple :class="cx('closeButton')" :aria-label="closeAriaLabel" type="button" @click="close($event)" v-bind="{ ...closeButtonProps, ...ptm('closeButton') }">

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

@ -2,7 +2,6 @@ import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => ` const theme = ({ dt }) => `
.p-message { .p-message {
margin: ${dt('message.margin')};
border-radius: ${dt('message.border.radius')}; border-radius: ${dt('message.border.radius')};
border-width: ${dt('message.border.width')}; border-width: ${dt('message.border.width')};
border-style: solid; border-style: solid;
@ -13,6 +12,7 @@ const theme = ({ dt }) => `
align-items: center; align-items: center;
padding: ${dt('message.content.padding')}; padding: ${dt('message.content.padding')};
gap: ${dt('message.content.gap')}; gap: ${dt('message.content.gap')};
height: 100%;
} }
.p-message-icon { .p-message-icon {

1
packages/themes/src/presets/aura/message/index.js
View File

@ -1,6 +1,5 @@
export default { export default {
root: { root: {
margin: '1rem 0',
borderRadius: '{content.border.radius}', borderRadius: '{content.border.radius}',
borderWidth: '1px', borderWidth: '1px',
transitionDuration: '{transition.duration}' transitionDuration: '{transition.duration}'

1
packages/themes/src/presets/lara/message/index.js
View File

@ -1,6 +1,5 @@
export default { export default {
root: { root: {
margin: '1.125rem 0',
borderRadius: '{content.border.radius}', borderRadius: '{content.border.radius}',
borderWidth: '0 0 0 6px', borderWidth: '0 0 0 6px',
transitionDuration: '{transition.duration}' transitionDuration: '{transition.duration}'

1
packages/themes/src/presets/nora/message/index.js
View File

@ -1,6 +1,5 @@
export default { export default {
root: { root: {
margin: '1rem 0',
borderRadius: '{content.border.radius}', borderRadius: '{content.border.radius}',
borderWidth: '1px', borderWidth: '1px',
transitionDuration: '{transition.duration}' transitionDuration: '{transition.duration}'