primevue-mirror/components/inlinemessage/InlineMessage.vue

<template>
    <div aria-live="polite" :class="containerClass">
        <span :class="iconClass"></span>
        <span class="p-inline-message-text"><slot>&nbsp;</slot></span>
    </div>
</template>

<script>
export default {
    name: 'InlineMessage',
    props: {
        severity: {
            type: String,
            default: 'error'
        }
    },
    timeout: null,
    data() {
        return {
            visible: true
        };
    },
    mounted() {
        if (!this.sticky) {
            setTimeout(() => {
                this.visible = false;
            }, this.life);
        }
    },
    computed: {
        containerClass() {
            return ['p-inline-message p-component p-inline-message-' + this.severity, { 'p-inline-message-icon-only': !this.$slots.default }];
        },
        iconClass() {
            return [
                'p-inline-message-icon pi',
                {
                    'pi-info-circle': this.severity === 'info',
                    'pi-check': this.severity === 'success',
                    'pi-exclamation-triangle': this.severity === 'warn',
                    'pi-times-circle': this.severity === 'error'
                }
            ];
        }
    }
};
</script>

<style>
.p-inline-message {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: top;
}

.p-inline-message-icon-only .p-inline-message-text {
    visibility: hidden;
    width: 0;
}

.p-fluid .p-inline-message {
    display: flex;
}
</style>