From 0b6a582417e810ef6e154174b88012e58bafe609 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 6 Mar 2025 13:47:11 +0300
Subject: [PATCH] Initiated Message

---
 apps/volt/assets/data/menu.json           |  4 ++
 apps/volt/doc/message/BasicDoc.vue        | 26 ++++++++
 apps/volt/doc/message/ClosableDoc.vue     | 26 ++++++++
 apps/volt/doc/message/DynamicDoc.vue      | 26 ++++++++
 apps/volt/doc/message/FormsDoc.vue        | 26 ++++++++
 apps/volt/doc/message/IconDoc.vue         | 26 ++++++++
 apps/volt/doc/message/ImportDoc.vue       | 11 +++
 apps/volt/doc/message/LifeDoc.vue         | 26 ++++++++
 apps/volt/doc/message/OutlinedDoc.vue     | 26 ++++++++
 apps/volt/doc/message/SeverityDoc.vue     | 26 ++++++++
 apps/volt/doc/message/SimpleDoc.vue       | 26 ++++++++
 apps/volt/doc/message/SizesDoc.vue        | 26 ++++++++
 apps/volt/pages/message/index.vue         | 81 +++++++++++++++++++++++
 apps/volt/volt/message/index.vue          | 35 ++++++++++
 packages/primevue/src/badge/Badge.vue     |  2 +-
 packages/primevue/src/message/Message.vue | 11 ++-
 16 files changed, 402 insertions(+), 2 deletions(-)
 create mode 100644 apps/volt/doc/message/BasicDoc.vue
 create mode 100644 apps/volt/doc/message/ClosableDoc.vue
 create mode 100644 apps/volt/doc/message/DynamicDoc.vue
 create mode 100644 apps/volt/doc/message/FormsDoc.vue
 create mode 100644 apps/volt/doc/message/IconDoc.vue
 create mode 100644 apps/volt/doc/message/ImportDoc.vue
 create mode 100644 apps/volt/doc/message/LifeDoc.vue
 create mode 100644 apps/volt/doc/message/OutlinedDoc.vue
 create mode 100644 apps/volt/doc/message/SeverityDoc.vue
 create mode 100644 apps/volt/doc/message/SimpleDoc.vue
 create mode 100644 apps/volt/doc/message/SizesDoc.vue
 create mode 100644 apps/volt/pages/message/index.vue
 create mode 100644 apps/volt/volt/message/index.vue

diff --git a/apps/volt/assets/data/menu.json b/apps/volt/assets/data/menu.json
index 169199d56..bba685960 100644
--- a/apps/volt/assets/data/menu.json
+++ b/apps/volt/assets/data/menu.json
@@ -66,6 +66,10 @@
                     "name": "InputText",
                     "to": "/inputtext"
                 },
+                {
+                    "name": "Message",
+                    "to": "/message"
+                },
                 {
                     "name": "Panel",
                     "to": "/panel"
diff --git a/apps/volt/doc/message/BasicDoc.vue b/apps/volt/doc/message/BasicDoc.vue
new file mode 100644
index 000000000..f6b542717
--- /dev/null
+++ b/apps/volt/doc/message/BasicDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Message component requires a content to display.</p>
+    </DocSectionText>
+    <div class="card">
+        <Message>Message Content</Message>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Message from '@/volt/message';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card">
+        <Message>Message Content</Message>
+    </div>
+</template>
+
+<script setup>
+import Message from '@/volt/message';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/message/ClosableDoc.vue b/apps/volt/doc/message/ClosableDoc.vue
new file mode 100644
index 000000000..f6b542717
--- /dev/null
+++ b/apps/volt/doc/message/ClosableDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Message component requires a content to display.</p>
+    </DocSectionText>
+    <div class="card">
+        <Message>Message Content</Message>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Message from '@/volt/message';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card">
+        <Message>Message Content</Message>
+    </div>
+</template>
+
+<script setup>
+import Message from '@/volt/message';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/message/DynamicDoc.vue b/apps/volt/doc/message/DynamicDoc.vue
new file mode 100644
index 000000000..f6b542717
--- /dev/null
+++ b/apps/volt/doc/message/DynamicDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Message component requires a content to display.</p>
+    </DocSectionText>
+    <div class="card">
+        <Message>Message Content</Message>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Message from '@/volt/message';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card">
+        <Message>Message Content</Message>
+    </div>
+</template>
+
+<script setup>
+import Message from '@/volt/message';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/message/FormsDoc.vue b/apps/volt/doc/message/FormsDoc.vue
new file mode 100644
index 000000000..f6b542717
--- /dev/null
+++ b/apps/volt/doc/message/FormsDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Message component requires a content to display.</p>
+    </DocSectionText>
+    <div class="card">
+        <Message>Message Content</Message>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Message from '@/volt/message';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card">
+        <Message>Message Content</Message>
+    </div>
+</template>
+
+<script setup>
+import Message from '@/volt/message';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/message/IconDoc.vue b/apps/volt/doc/message/IconDoc.vue
new file mode 100644
index 000000000..f6b542717
--- /dev/null
+++ b/apps/volt/doc/message/IconDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Message component requires a content to display.</p>
+    </DocSectionText>
+    <div class="card">
+        <Message>Message Content</Message>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Message from '@/volt/message';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card">
+        <Message>Message Content</Message>
+    </div>
+</template>
+
+<script setup>
+import Message from '@/volt/message';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/message/ImportDoc.vue b/apps/volt/doc/message/ImportDoc.vue
new file mode 100644
index 000000000..c75b95032
--- /dev/null
+++ b/apps/volt/doc/message/ImportDoc.vue
@@ -0,0 +1,11 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" lang="script" />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const code = ref(`import InputText from '@/volt/inputtext';
+`);
+</script>
diff --git a/apps/volt/doc/message/LifeDoc.vue b/apps/volt/doc/message/LifeDoc.vue
new file mode 100644
index 000000000..f6b542717
--- /dev/null
+++ b/apps/volt/doc/message/LifeDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Message component requires a content to display.</p>
+    </DocSectionText>
+    <div class="card">
+        <Message>Message Content</Message>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Message from '@/volt/message';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card">
+        <Message>Message Content</Message>
+    </div>
+</template>
+
+<script setup>
+import Message from '@/volt/message';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/message/OutlinedDoc.vue b/apps/volt/doc/message/OutlinedDoc.vue
new file mode 100644
index 000000000..f6b542717
--- /dev/null
+++ b/apps/volt/doc/message/OutlinedDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Message component requires a content to display.</p>
+    </DocSectionText>
+    <div class="card">
+        <Message>Message Content</Message>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Message from '@/volt/message';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card">
+        <Message>Message Content</Message>
+    </div>
+</template>
+
+<script setup>
+import Message from '@/volt/message';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/message/SeverityDoc.vue b/apps/volt/doc/message/SeverityDoc.vue
new file mode 100644
index 000000000..f6b542717
--- /dev/null
+++ b/apps/volt/doc/message/SeverityDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Message component requires a content to display.</p>
+    </DocSectionText>
+    <div class="card">
+        <Message>Message Content</Message>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Message from '@/volt/message';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card">
+        <Message>Message Content</Message>
+    </div>
+</template>
+
+<script setup>
+import Message from '@/volt/message';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/message/SimpleDoc.vue b/apps/volt/doc/message/SimpleDoc.vue
new file mode 100644
index 000000000..f6b542717
--- /dev/null
+++ b/apps/volt/doc/message/SimpleDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Message component requires a content to display.</p>
+    </DocSectionText>
+    <div class="card">
+        <Message>Message Content</Message>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Message from '@/volt/message';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card">
+        <Message>Message Content</Message>
+    </div>
+</template>
+
+<script setup>
+import Message from '@/volt/message';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/message/SizesDoc.vue b/apps/volt/doc/message/SizesDoc.vue
new file mode 100644
index 000000000..f6b542717
--- /dev/null
+++ b/apps/volt/doc/message/SizesDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Message component requires a content to display.</p>
+    </DocSectionText>
+    <div class="card">
+        <Message>Message Content</Message>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Message from '@/volt/message';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card">
+        <Message>Message Content</Message>
+    </div>
+</template>
+
+<script setup>
+import Message from '@/volt/message';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/pages/message/index.vue b/apps/volt/pages/message/index.vue
new file mode 100644
index 000000000..5331ace0f
--- /dev/null
+++ b/apps/volt/pages/message/index.vue
@@ -0,0 +1,81 @@
+<template>
+    <DocComponent title="Vue Message Component" header="Message" description="Message component is used to display inline messages." :componentDocs="docs" />
+</template>
+
+<script>
+import BasicDoc from '@/doc/message/BasicDoc.vue';
+import ClosabledDoc from '@/doc/message/ClosableDoc.vue';
+import DynamicDoc from '@/doc/message/DynamicDoc.vue';
+import FormsDoc from '@/doc/message/FormsDoc.vue';
+import IconDoc from '@/doc/message/IconDoc.vue';
+import ImportDoc from '@/doc/message/ImportDoc.vue';
+import LifeDoc from '@/doc/message/LifeDoc.vue';
+import OutlinedDoc from '@/doc/message/OutlinedDoc.vue';
+import SimpleDoc from '@/doc/message/SimpleDoc.vue';
+import SeverityDoc from '@/doc/message/SeverityDoc.vue';
+import SizesDoc from '@/doc/message/SizesDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'severity',
+                    label: 'Severity',
+                    component: SeverityDoc
+                },
+                {
+                    id: 'icon',
+                    label: 'Icon',
+                    component: IconDoc
+                },
+                {
+                    id: 'outlined',
+                    label: 'Outlined',
+                    component: OutlinedDoc
+                },
+                {
+                    id: 'simple',
+                    label: 'Simple',
+                    component: SimpleDoc
+                },
+                {
+                    id: 'sizes',
+                    label: 'Sizes',
+                    component: SizesDoc
+                },
+                {
+                    id: 'forms',
+                    label: 'Forms',
+                    component: FormsDoc
+                },
+                {
+                    id: 'dynamic',
+                    label: 'Dynamic',
+                    component: DynamicDoc
+                },
+                {
+                    id: 'closable',
+                    label: 'Closable',
+                    component: ClosabledDoc
+                },
+                {
+                    id: 'life',
+                    label: 'Life',
+                    component: LifeDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/volt/volt/message/index.vue b/apps/volt/volt/message/index.vue
new file mode 100644
index 000000000..970eddd70
--- /dev/null
+++ b/apps/volt/volt/message/index.vue
@@ -0,0 +1,35 @@
+<template>
+    <Message
+        unstyled
+        :pt="theme"
+        :ptOptions="{
+            mergeProps: ptViewMerge
+        }"
+    >
+        <template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
+            <slot :name="slotName" v-bind="slotProps ?? {}" />
+        </template>
+    </Message>
+</template>
+
+<script setup>
+import Message from 'primevue/message';
+import { ref } from 'vue';
+import { ptViewMerge } from '../utils';
+
+const theme = ref({
+    root: ``,
+    content: ``,
+    icon: ``,
+    text: ``,
+    closeButton: ``,
+    closeIcon: ``,
+    transition: {
+        enterFromClass: 'opacity-0',
+        enterActiveClass: 'transition-opacity duration-300',
+        leaveFromClass: 'max-h-40',
+        leaveActiveClass: 'overflow-hidden transition-all duration-300 ease-in',
+        leaveToClass: 'max-h-0 opacity-0 !m-0'
+    }
+});
+</script>
diff --git a/packages/primevue/src/badge/Badge.vue b/packages/primevue/src/badge/Badge.vue
index 3127abcde..033740edb 100644
--- a/packages/primevue/src/badge/Badge.vue
+++ b/packages/primevue/src/badge/Badge.vue
@@ -1,5 +1,5 @@
 <template>
-    <span :class="cx('root')" :data-p="dataP" data-badge v-bind="ptmi('root')">
+    <span :class="cx('root')" :data-p="dataP" v-bind="ptmi('root')">
         <slot>{{ value }}</slot>
     </span>
 </template>
diff --git a/packages/primevue/src/message/Message.vue b/packages/primevue/src/message/Message.vue
index 5ed2b2e27..b6d08cda6 100755
--- a/packages/primevue/src/message/Message.vue
+++ b/packages/primevue/src/message/Message.vue
@@ -1,6 +1,6 @@
 <template>
     <transition name="p-message" appear v-bind="ptmi('transition')">
-        <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" :data-p="dataP" v-bind="ptm('root')">
             <slot v-if="$slots.container" name="container" :closeCallback="close"></slot>
             <div v-else :class="cx('content')" v-bind="ptm('content')">
                 <slot name="icon" :class="cx('icon')">
@@ -21,6 +21,7 @@
 </template>
 
 <script>
+import { cn } from '@primeuix/utils';
 import TimesIcon from '@primevue/icons/times';
 import Ripple from 'primevue/ripple';
 import BaseMessage from './BaseMessage.vue';
@@ -53,6 +54,14 @@ export default {
     computed: {
         closeAriaLabel() {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
+        },
+        dataP() {
+            return cn({
+                outlined: this.variant === 'outlined',
+                simple: this.variant === 'simple',
+                [this.severity]: this.severity,
+                [this.size]: this.size
+            });
         }
     },
     directives: {