Refactor #3832 Refactor #3833 - For InlineMessage

api-generator/components/inlinemessage.js

@@ -4,6 +4,19 @@ const InlineMessageProps = [
         type: 'string',
         default: 'error',
         description: 'Severity level of the message. Valid severities are "success", "info", "warn" and "error".'
+    },
+    {
+        name: 'icon',
+        type: 'string',
+        default: 'undefined',
+        description: 'Display a custom icon for the message.'
+    }
+];
+
+const MessageSlots = [
+    {
+        name: 'messageicon',
+        description: 'Custom message icon template.'
     }
 ];
 
@@ -12,6 +25,7 @@ module.exports = {
         name: 'InlineMessage',
         description: 'InlineMessage component is useful in cases where a single message needs to be displayed related to an element such as forms',
         'doc-url': 'message',
-        props: InlineMessageProps
+        props: InlineMessageProps,
+        slots: MessageSlots
     }
 };

api-generator/components/message.js

@@ -26,7 +26,7 @@ const MessageProps = [
     {
         name: 'icon',
         type: 'string',
-        default: 'null',
+        default: 'undefined',
         description: 'Display a custom icon for the message.'
     }
 ];

components/lib/inlinemessage/InlineMessage.d.ts

@@ -19,6 +19,10 @@ export interface InlineMessageProps {
      * @defaultValue info
      */
     severity?: 'success' | 'info' | 'warn' | 'error' | string | undefined;
+    /**
+     * Display a custom icon for the message.
+     */
+    icon?: string | undefined;
 }
 /**
  * Defines valid slots in InlineMessage slots.
@@ -28,6 +32,10 @@ export interface InlineMessageSlots {
      * Default custom slot.
      */
     default(): VNode[];
+    /**
+     * Custom message icon template.
+     */
+    messageicon(): VNode[];
 }
 
 export interface InlineMessageEmits {}

components/lib/inlinemessage/InlineMessage.vue

@@ -1,17 +1,27 @@
 <template>
     <div aria-live="polite" :class="containerClass">
-        <span :class="iconClass"></span>
+        <slot name="messageicon">
+            <component :is="icon ? 'i' : iconComponent" :class="['p-inline-message-icon', icon]"></component>
+        </slot>
         <span class="p-inline-message-text"><slot>&nbsp;</slot></span>
     </div>
 </template>
 
 <script>
+import InfoCircleIcon from 'primevue/icon/infocircle';
+import CheckIcon from 'primevue/icon/check';
+import ExclamationTriangleIcon from 'primevue/icon/exclamationtriangle';
+import TimesCircleIcon from 'primevue/icon/timescircle';
 export default {
     name: 'InlineMessage',
     props: {
         severity: {
             type: String,
             default: 'error'
+        },
+        icon: {
+            type: String,
+            default: undefined
         }
     },
     timeout: null,
@@ -31,16 +41,13 @@ export default {
         containerClass() {
             return ['p-inline-message p-component p-inline-message-' + this.severity, { 'p-inline-message-icon-only': !this.$slots.default }];
         },
-        iconClass() {
+        iconComponent() {
-            return [
+            return {
-                'p-inline-message-icon pi',
+                info: InfoCircleIcon,
-                {
+                success: CheckIcon,
-                    'pi-info-circle': this.severity === 'info',
+                warn: ExclamationTriangleIcon,
-                    'pi-check': this.severity === 'success',
+                error: TimesCircleIcon
-                    'pi-exclamation-triangle': this.severity === 'warn',
+            }[this.severity];
-                    'pi-times-circle': this.severity === 'error'
-                }
-            ];
         }
     }
 };