diff --git a/exports/inlinemessage.js b/exports/inlinemessage.js
new file mode 100644
index 000000000..b79fd5996
--- /dev/null
+++ b/exports/inlinemessage.js
@@ -0,0 +1,3 @@
+'use strict';
+module.exports = require('./components/inlinemessage/InlineMessage.vue');
+
\ No newline at end of file
diff --git a/exports/inlinemessage.ts b/exports/inlinemessage.ts
new file mode 100644
index 000000000..879bc2666
--- /dev/null
+++ b/exports/inlinemessage.ts
@@ -0,0 +1 @@
+export * from './components/inlinemessage/InlineMessage';
\ No newline at end of file
diff --git a/exports/validationmessage.d.ts b/exports/validationmessage.d.ts
deleted file mode 100644
index 4fe1b938f..000000000
--- a/exports/validationmessage.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/validationmessage/ValidationMessage';
\ No newline at end of file
diff --git a/exports/validationmessage.js b/exports/validationmessage.js
deleted file mode 100644
index e214b64ef..000000000
--- a/exports/validationmessage.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-module.exports = require('./components/validationmessage/ValidationMessage.vue');
-
\ No newline at end of file
diff --git a/src/components/validationmessage/ValidationMessage.d.ts b/src/components/inlinemessage/InlineMessage.d.ts
similarity index 64%
rename from src/components/validationmessage/ValidationMessage.d.ts
rename to src/components/inlinemessage/InlineMessage.d.ts
index d8de635f1..250b68253 100755
--- a/src/components/validationmessage/ValidationMessage.d.ts
+++ b/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[];
diff --git a/src/components/validationmessage/ValidationMessage.vue b/src/components/inlinemessage/InlineMessage.vue
similarity index 74%
rename from src/components/validationmessage/ValidationMessage.vue
rename to src/components/inlinemessage/InlineMessage.vue
index 511bf1a8b..96a1c7d41 100755
--- a/src/components/validationmessage/ValidationMessage.vue
+++ b/src/components/inlinemessage/InlineMessage.vue
@@ -1,7 +1,7 @@
-
+
@@ -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 {
diff --git a/src/main.js b/src/main.js
index 82b01110d..f309b239c 100644
--- a/src/main.js
+++ b/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);
diff --git a/src/views/message/MessageDemo.vue b/src/views/message/MessageDemo.vue
index d013b4caf..a3b8ca631 100755
--- a/src/views/message/MessageDemo.vue
+++ b/src/views/message/MessageDemo.vue
@@ -24,15 +24,15 @@
Auto Dismiss
This message will hide in 10 seconds.
- Validation Message
+ Inline Message
- Field is required
+ Field is required
-
+
diff --git a/src/views/message/MessageDoc.vue b/src/views/message/MessageDoc.vue
index 257edccf4..f8ba5f08d 100755
--- a/src/views/message/MessageDoc.vue
+++ b/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>
- ValidationMessage Component
+ Inline Message Component
-import Message from 'primevue/message';
+import InlineMessage from 'primevue/inlinemessage';
- 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, severity of the message.
+ 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, severity of the message.
<InputText placeholder="Username" class="p-error" />
-<ValidationMessage>Field is required</ValidationMessage>
+<InlineMessage>Field is required</InlineMessage>
@@ -179,7 +179,7 @@ import Message from 'primevue/message';
- ValidationMessage
+ InlineMessage
@@ -190,31 +190,31 @@ import Message from 'primevue/message';
- p-message |
+ p-inline-message |
Container element. |
- p-message-info |
+ p-inline-message-info |
Container element when displaying info messages. |
- p-message-warn |
+ p-inline-message-warn |
Container element when displaying warning messages. |
- p-message-error |
+ p-inline-message-error |
Container element when displaying error messages. |
- p-message-success |
+ p-inline-message-success |
Container element when displaying success messages. |
- p-message-icon |
+ p-inline-message-icon |
Severity icon. |
- p-message-text |
+ p-inline-message-text |
Content of a message. |
@@ -252,11 +252,11 @@ import Message from 'primevue/message';
<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>