#301 - #301

exports/inlinemessage.js

@@ -0,0 +1,3 @@
+'use strict';
+module.exports = require('./components/inlinemessage/InlineMessage.vue');
+            

exports/inlinemessage.ts

@@ -0,0 +1 @@
+export * from './components/inlinemessage/InlineMessage';

exports/validationmessage.d.ts

@@ -1 +0,0 @@
-export * from './components/validationmessage/ValidationMessage';

exports/validationmessage.js

@@ -1,3 +0,0 @@
-'use strict';
-module.exports = require('./components/validationmessage/ValidationMessage.vue');
-            

src/components/inlinemessage/InlineMessage.d.ts

@@ -1,6 +1,6 @@
 import Vue, { VNode } from 'vue';
 
-export declare class ValidationMessage extends Vue {
+export declare class InlineMessage extends Vue {
     severity?: string;
     $slots: {
         '': VNode[];

src/components/inlinemessage/InlineMessage.vue

@@ -1,7 +1,7 @@
 <template>
     <div aria-live="polite" :class="containerClass">
         <span :class="iconClass"></span>
-        <span class="p-message-text"><slot>&nbsp;</slot></span>
+        <span class="p-inline-message-text"><slot>&nbsp;</slot></span>
     </div>
 </template>
 
@@ -28,10 +28,10 @@ export default {
     },
     computed: {
         containerClass() {
-            return ['p-message p-component p-message-' + this.severity, {'p-message-icon-only': !this.$scopedSlots.default}];
+            return ['p-inline-message p-component p-inline-message-' + this.severity, {'p-inline-message-icon-only': !this.$scopedSlots.default}];
         },
         iconClass() {
-            return ['p-message-icon pi', {
+            return ['p-inline-message-icon pi', {
                 'pi-info-circle': this.severity === 'info',
                 'pi-check': this.severity === 'success',
                 'pi-exclamation-triangle': this.severity === 'warn',
@@ -43,19 +43,19 @@ export default {
 </script>
 
 <style>
-.p-message {
+.p-inline-message {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     vertical-align: top;
 }
 
-.p-message-icon-only .p-message-text {
+.p-inline-message-icon-only .p-inline-message-text {
     visibility: hidden;
     width: 0;
 }
 
-.p-fluid .p-message {
+.p-fluid .p-inline-message {
     display: flex;
 }
 </style>

src/main.js

@@ -27,6 +27,7 @@ import Editor from './components/editor/Editor';
 import Fieldset from './components/fieldset/Fieldset';
 import FileUpload from './components/fileupload/FileUpload';
 import FullCalendar from './components/fullcalendar/FullCalendar';
+import InlineMessage from './components/inlinemessage/InlineMessage';
 import Inplace from './components/inplace/Inplace';
 import InputMask from './components/inputmask/InputMask';
 import InputNumber from './components/inputnumber/InputNumber';
@@ -71,7 +72,6 @@ import Toolbar from './components/toolbar/Toolbar';
 import Tooltip from './components/tooltip/Tooltip';
 import ToggleButton from './components/togglebutton/ToggleButton';
 import TriStateCheckbox from './components/tristatecheckbox/TriStateCheckbox';
-import ValidationMessage from './components/validationmessage/ValidationMessage';
 import Galleria from './components/galleria/Galleria';
 
 import CodeHighlight from './views/codehighlight/CodeHighlight';
@@ -117,6 +117,7 @@ Vue.component('Editor', Editor);
 Vue.component('Fieldset', Fieldset);
 Vue.component('FileUpload', FileUpload);
 Vue.component('FullCalendar', FullCalendar);
+Vue.component('InlineMessage', InlineMessage);
 Vue.component('Inplace', Inplace);
 Vue.component('InputMask', InputMask);
 Vue.component('InputNumber', InputNumber);
@@ -159,7 +160,6 @@ Vue.component('ToggleButton', ToggleButton);
 Vue.component('Tree', Tree);
 Vue.component('TreeTable', TreeTable);
 Vue.component('TriStateCheckbox', TriStateCheckbox);
-Vue.component('ValidationMessage', ValidationMessage);
 Vue.component('Galleria', Galleria);
 
 Vue.component('CodeHighlight', CodeHighlight);

src/views/message/MessageDemo.vue

@@ -24,15 +24,15 @@
             <h3>Auto Dismiss</h3>
             <Message severity="warn" :life="10000" :sticky="false">This message will hide in 10 seconds.</Message>
 
-            <h3>Validation Message</h3>
+            <h3>Inline Message</h3>
             <div class="p-grid">
                 <div class="p-col-12">
                     <InputText placeholder="Username" class="p-error" />
-                    <ValidationMessage>Field is required</ValidationMessage>
+                    <InlineMessage>Field is required</InlineMessage>
                 </div>
                 <div class="p-col-12">
                     <InputText placeholder="Email" class="p-error" :closable="false" />
-                    <ValidationMessage />
+                    <InlineMessage />
                 </div>
             </div>
         </div>

src/views/message/MessageDoc.vue

@@ -56,15 +56,15 @@ data() {
 <Message severity="warn" :life="5000" :sticky="false">This message will hide in 5 seconds.</Message>
 </CodeHighlight>
 
-				<h3>ValidationMessage Component</h3>
+				<h3>Inline Message Component</h3>
 <CodeHighlight lang="javascript">
-import Message from 'primevue/message';
+import InlineMessage from 'primevue/inlinemessage';
 </CodeHighlight>
 
-				<p>ValidationMessage component is useful in cases where a single message needs to be displayed related to an element such as forms. It has one property, <i>severity</i> of the message.</p>
+				<p>InlineMessage component is useful in cases where a single message needs to be displayed related to an element such as forms. It has one property, <i>severity</i> of the message.</p>
 <CodeHighlight>
 &lt;InputText placeholder="Username" class="p-error" /&gt;
-&lt;ValidationMessage&gt;Field is required&lt;/ValidationMessage&gt;
+&lt;InlineMessage&gt;Field is required&lt;/InlineMessage&gt;
 </CodeHighlight>
 
 
@@ -179,7 +179,7 @@ import Message from 'primevue/message';
 					</table>
 				</div>
 
-                <strong>ValidationMessage</strong>
+                <strong>InlineMessage</strong>
                 <div class="doc-tablewrapper">
 					<table class="doc-table">
 						<thead>
@@ -190,31 +190,31 @@ import Message from 'primevue/message';
 						</thead>
 						<tbody>
                             <tr>
-                                <td>p-message</td>
+                                <td>p-inline-message</td>
                                 <td>Container element.</td>
                             </tr>
                             <tr>
-                                <td>p-message-info</td>
+                                <td>p-inline-message-info</td>
                                 <td>Container element when displaying info messages.</td>
                             </tr>
                             <tr>
-                                <td>p-message-warn</td>
+                                <td>p-inline-message-warn</td>
                                 <td>Container element when displaying warning messages.</td>
                             </tr>
                             <tr>
-                                <td>p-message-error</td>
+                                <td>p-inline-message-error</td>
                                 <td>Container element when displaying error messages.</td>
                             </tr>
                             <tr>
-                                <td>p-message-success</td>
+                                <td>p-inline-message-success</td>
                                 <td>Container element when displaying success messages.</td>
                             </tr>
                             <tr>
-                                <td>p-message-icon</td>
+                                <td>p-inline-message-icon</td>
                                 <td>Severity icon.</td>
                             </tr>
                            <tr>
-                                <td>p-message-text</td>
+                                <td>p-inline-message-text</td>
                                 <td>Content of a message.</td>
                             </tr>
 						</tbody>
@@ -252,11 +252,11 @@ import Message from 'primevue/message';
 &lt;div class="p-grid"&gt;
     &lt;div class="p-col-12"&gt;
         &lt;InputText placeholder="Username" class="p-error" /&gt;
-        &lt;ValidationMessage&gt;Field is required&lt;/ValidationMessage&gt;
+        &lt;InlineMessage&gt;Field is required&lt;/InlineMessage&gt;
     &lt;/div&gt;
     &lt;div class="p-col-12"&gt;
         &lt;InputText placeholder="Email" class="p-error" :closable="false" /&gt;
-        &lt;ValidationMessage /&gt;
+        &lt;InlineMessage /&gt;
     &lt;/div&gt;
 &lt;/div&gt;
 </template>