From 2614bafa7425c3e65d8e12f33b4cf3d26c433ed7 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 13 Jun 2024 01:05:19 +0300
Subject: [PATCH] Update message demos

---
 apps/showcase/assets/menu/menu.json           |  8 --
 apps/showcase/doc/message/ClosableDoc.vue     | 10 +--
 apps/showcase/doc/message/CustomIconDoc.vue   |  6 +-
 apps/showcase/doc/message/DynamicDoc.vue      | 32 ++++---
 apps/showcase/doc/message/FormDoc.vue         | 71 ++++++++++++++++
 apps/showcase/doc/message/LifeDoc.vue         | 84 +++++++++++++++++++
 apps/showcase/doc/message/SeverityDoc.vue     |  6 +-
 apps/showcase/doc/message/StickyDoc.vue       | 70 ----------------
 apps/showcase/pages/message/index.vue         | 14 +++-
 packages/primevue/src/message/Message.vue     |  2 +-
 .../src/message/style/MessageStyle.js         |  2 +-
 .../themes/src/presets/aura/message/index.js  |  1 -
 .../themes/src/presets/lara/message/index.js  |  1 -
 .../themes/src/presets/nora/message/index.js  |  1 -
 14 files changed, 197 insertions(+), 111 deletions(-)
 create mode 100644 apps/showcase/doc/message/FormDoc.vue
 create mode 100644 apps/showcase/doc/message/LifeDoc.vue
 delete mode 100644 apps/showcase/doc/message/StickyDoc.vue

diff --git a/apps/showcase/assets/menu/menu.json b/apps/showcase/assets/menu/menu.json
index 1334a888b..aa48f3d79 100644
--- a/apps/showcase/assets/menu/menu.json
+++ b/apps/showcase/assets/menu/menu.json
@@ -361,10 +361,6 @@
                             "name": "PanelMenu",
                             "to": "/panelmenu"
                         },
-                        {
-                            "name": "Steps",
-                            "to": "/steps"
-                        },
                         {
                             "name": "TieredMenu",
                             "to": "/tieredmenu"
@@ -387,10 +383,6 @@
                             "name": "Message",
                             "to": "/message"
                         },
-                        {
-                            "name": "InlineMessage",
-                            "to": "/inlinemessage"
-                        },
                         {
                             "name": "Toast",
                             "to": "/toast"
diff --git a/apps/showcase/doc/message/ClosableDoc.vue b/apps/showcase/doc/message/ClosableDoc.vue
index adcaa92b0..bcc286f5a 100644
--- a/apps/showcase/doc/message/ClosableDoc.vue
+++ b/apps/showcase/doc/message/ClosableDoc.vue
@@ -1,9 +1,9 @@
 <template>
     <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>
     <div class="card">
-        <Message :closable="false">Not Closable</Message>
+        <Message closable>Closable Message</Message>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -14,12 +14,12 @@ export default {
         return {
             code: {
                 basic: `
-<Message :closable="false">Not Closable</Message>
+<Message closable>Closable Message</Message>
 `,
                 options: `
 <template>
     <div class="card">
-        <Message :closable="false">Not Closable</Message>
+        <Message closable>Closable Message</Message>
     </div>
 </template>
 
@@ -29,7 +29,7 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <Message :closable="false">Not Closable</Message>
+        <Message closable>Closable Message</Message>
     </div>
 </template>
 
diff --git a/apps/showcase/doc/message/CustomIconDoc.vue b/apps/showcase/doc/message/CustomIconDoc.vue
index 7039dfbce..b99db1908 100644
--- a/apps/showcase/doc/message/CustomIconDoc.vue
+++ b/apps/showcase/doc/message/CustomIconDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Icon property and the <i>messageicon</i> slots are available to customize the icon of the message</p>
     </DocSectionText>
-    <div class="card">
+    <div class="card flex justify-center gap-4">
         <Message severity="info" icon="pi pi-send">Info Message</Message>
         <Message severity="success">
             <template #messageicon>
@@ -30,7 +30,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card">
+    <div class="card flex justify-center gap-4">
         <Message severity="info" icon="pi pi-send">Info Message</Message>
         <Message severity="success">
             <template #messageicon>
@@ -46,7 +46,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card">
+    <div class="card flex justify-center gap-4">
         <Message severity="info" icon="pi pi-send">Info Message</Message>
         <Message severity="success">
             <template #messageicon>
diff --git a/apps/showcase/doc/message/DynamicDoc.vue b/apps/showcase/doc/message/DynamicDoc.vue
index 5da14028c..dacdcd49c 100644
--- a/apps/showcase/doc/message/DynamicDoc.vue
+++ b/apps/showcase/doc/message/DynamicDoc.vue
@@ -2,10 +2,12 @@
     <DocSectionText v-bind="$attrs">
         <p>Multiple messages can be displayed using the standard v-for directive.</p>
     </DocSectionText>
-    <div class="card">
-        <Button label="Show" @click="addMessages()" />
-        <Button label="Clear" severity="secondary" class="ml-2" @click="clearMessages()" />
-        <transition-group name="p-message" tag="div">
+    <div class="card flex flex-col items-center justify-center gap-4">
+        <div class="flex gap-2">
+            <Button label="Show" @click="addMessages()" />
+            <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>
         </transition-group>
     </div>
@@ -22,16 +24,18 @@ export default {
                 basic: `
 <Button label="Show" @click="addMessages()" />
 <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>
 </transition-group>
 `,
                 options: `
 <template>
-    <div class="card">
-        <Button label="Show" @click="addMessages()" />
-        <Button label="Clear" severity="secondary" class="ml-2" @click="clearMessages()" />
-        <transition-group name="p-message" tag="div">
+    <div class="card flex flex-col items-center justify-center gap-4">
+        <div class="flex gap-2">
+            <Button label="Show" @click="addMessages()" />
+            <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>
         </transition-group>
     </div>
@@ -63,10 +67,12 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card">
-        <Button label="Show" @click="addMessages()" />
-        <Button label="Clear" severity="secondary" class="ml-2" @click="clearMessages()" />
-        <transition-group name="p-message" tag="div">
+    <div class="card flex flex-col items-center justify-center gap-4">
+        <div class="flex gap-2">
+            <Button label="Show" @click="addMessages()" />
+            <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>
         </transition-group>
     </div>
diff --git a/apps/showcase/doc/message/FormDoc.vue b/apps/showcase/doc/message/FormDoc.vue
new file mode 100644
index 000000000..c56d9578a
--- /dev/null
+++ b/apps/showcase/doc/message/FormDoc.vue
@@ -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>
diff --git a/apps/showcase/doc/message/LifeDoc.vue b/apps/showcase/doc/message/LifeDoc.vue
new file mode 100644
index 000000000..54a43f9df
--- /dev/null
+++ b/apps/showcase/doc/message/LifeDoc.vue
@@ -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>
diff --git a/apps/showcase/doc/message/SeverityDoc.vue b/apps/showcase/doc/message/SeverityDoc.vue
index 34e890d96..1273078bc 100644
--- a/apps/showcase/doc/message/SeverityDoc.vue
+++ b/apps/showcase/doc/message/SeverityDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>The <i>severity</i> option specifies the type of the message.</p>
     </DocSectionText>
-    <div class="card">
+    <div class="card flex flex-wrap gap-4 justify-center">
         <Message severity="success">Success Message</Message>
         <Message severity="info">Info Message</Message>
         <Message severity="warn">Warn Message</Message>
@@ -28,7 +28,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card">
+    <div class="card flex flex-wrap gap-4 justify-center">
         <Message severity="success">Success Message</Message>
         <Message severity="info">Info Message</Message>
         <Message severity="warn">Warn Message</Message>
@@ -43,7 +43,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card">
+    <div class="card flex flex-wrap gap-4 justify-center">
         <Message severity="success">Success Message</Message>
         <Message severity="info">Info Message</Message>
         <Message severity="warn">Warn Message</Message>
diff --git a/apps/showcase/doc/message/StickyDoc.vue b/apps/showcase/doc/message/StickyDoc.vue
deleted file mode 100644
index cbb34f33b..000000000
--- a/apps/showcase/doc/message/StickyDoc.vue
+++ /dev/null
@@ -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>
diff --git a/apps/showcase/pages/message/index.vue b/apps/showcase/pages/message/index.vue
index 5c28eeb51..e556cf294 100755
--- a/apps/showcase/pages/message/index.vue
+++ b/apps/showcase/pages/message/index.vue
@@ -8,9 +8,10 @@ import BasicDoc from '@/doc/message/BasicDoc.vue';
 import ClosabledDoc from '@/doc/message/ClosableDoc.vue';
 import CustomIconDoc from '@/doc/message/CustomIconDoc.vue';
 import DynamicDoc from '@/doc/message/DynamicDoc.vue';
+import FormDoc from '@/doc/message/FormDoc.vue';
 import ImportDoc from '@/doc/message/ImportDoc.vue';
+import LifeDoc from '@/doc/message/LifeDoc.vue';
 import SeverityDoc from '@/doc/message/SeverityDoc.vue';
-import StickyDoc from '@/doc/message/StickyDoc.vue';
 import PTComponent from '@/doc/message/pt/index.vue';
 import ThemingDoc from '@/doc/message/theming/index.vue';
 
@@ -33,6 +34,11 @@ export default {
                     label: 'Severity',
                     component: SeverityDoc
                 },
+                {
+                    id: 'form',
+                    label: 'Form',
+                    component: FormDoc
+                },
                 {
                     id: 'dynamic',
                     label: 'Dynamic',
@@ -44,9 +50,9 @@ export default {
                     component: ClosabledDoc
                 },
                 {
-                    id: 'sticky',
-                    label: 'Sticky',
-                    component: StickyDoc
+                    id: 'life',
+                    label: 'Life',
+                    component: LifeDoc
                 },
                 {
                     id: 'custom-icon',
diff --git a/packages/primevue/src/message/Message.vue b/packages/primevue/src/message/Message.vue
index c5835e132..a627b3647 100755
--- a/packages/primevue/src/message/Message.vue
+++ b/packages/primevue/src/message/Message.vue
@@ -6,7 +6,7 @@
                 <slot name="messageicon" class="p-message-icon">
                     <component :is="icon ? 'span' : iconComponent" :class="[cx('icon'), icon]" v-bind="ptm('icon')"></component>
                 </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>
                 </div>
                 <button v-if="closable" v-ripple :class="cx('closeButton')" :aria-label="closeAriaLabel" type="button" @click="close($event)" v-bind="{ ...closeButtonProps, ...ptm('closeButton') }">
diff --git a/packages/primevue/src/message/style/MessageStyle.js b/packages/primevue/src/message/style/MessageStyle.js
index c419f1614..0ff3ac97c 100644
--- a/packages/primevue/src/message/style/MessageStyle.js
+++ b/packages/primevue/src/message/style/MessageStyle.js
@@ -2,7 +2,6 @@ import BaseStyle from '@primevue/core/base/style';
 
 const theme = ({ dt }) => `
 .p-message {
-    margin: ${dt('message.margin')};
     border-radius: ${dt('message.border.radius')};
     border-width: ${dt('message.border.width')};
     border-style: solid;
@@ -13,6 +12,7 @@ const theme = ({ dt }) => `
     align-items: center;
     padding: ${dt('message.content.padding')};
     gap: ${dt('message.content.gap')};
+    height: 100%;
 }
 
 .p-message-icon {
diff --git a/packages/themes/src/presets/aura/message/index.js b/packages/themes/src/presets/aura/message/index.js
index 2c99cb04c..f4072c4c8 100644
--- a/packages/themes/src/presets/aura/message/index.js
+++ b/packages/themes/src/presets/aura/message/index.js
@@ -1,6 +1,5 @@
 export default {
     root: {
-        margin: '1rem 0',
         borderRadius: '{content.border.radius}',
         borderWidth: '1px',
         transitionDuration: '{transition.duration}'
diff --git a/packages/themes/src/presets/lara/message/index.js b/packages/themes/src/presets/lara/message/index.js
index 792d9e0d6..2ba7a2c6d 100644
--- a/packages/themes/src/presets/lara/message/index.js
+++ b/packages/themes/src/presets/lara/message/index.js
@@ -1,6 +1,5 @@
 export default {
     root: {
-        margin: '1.125rem 0',
         borderRadius: '{content.border.radius}',
         borderWidth: '0 0 0 6px',
         transitionDuration: '{transition.duration}'
diff --git a/packages/themes/src/presets/nora/message/index.js b/packages/themes/src/presets/nora/message/index.js
index 7fdabb6a5..ea6c6261b 100644
--- a/packages/themes/src/presets/nora/message/index.js
+++ b/packages/themes/src/presets/nora/message/index.js
@@ -1,6 +1,5 @@
 export default {
     root: {
-        margin: '1rem 0',
         borderRadius: '{content.border.radius}',
         borderWidth: '1px',
         transitionDuration: '{transition.duration}'