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'; - + - + - + - + - + - + - + @@ -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>
p-messagep-inline-message Container element.
p-message-infop-inline-message-info Container element when displaying info messages.
p-message-warnp-inline-message-warn Container element when displaying warning messages.
p-message-errorp-inline-message-error Container element when displaying error messages.
p-message-successp-inline-message-success Container element when displaying success messages.
p-message-iconp-inline-message-icon Severity icon.
p-message-textp-inline-message-text Content of a message.