primevue-mirror/components/lib/inlinemessage/InlineMessage.vue

48 lines
1.3 KiB
Vue
Raw Normal View History

2022-09-06 12:03:37 +00:00
<template>
2024-02-11 08:10:29 +00:00
<div role="alert" aria-live="assertive" aria-atomic="true" :class="cx('root')" v-bind="ptmi('root')">
<slot name="icon">
2023-05-25 14:15:19 +00:00
<component :is="icon ? 'span' : iconComponent" :class="cx('icon')" v-bind="ptm('icon')"></component>
</slot>
2023-05-25 14:15:19 +00:00
<span :class="cx('text')" v-bind="ptm('text')">
2023-04-28 11:55:27 +00:00
<slot>&nbsp;</slot>
</span>
2022-09-06 12:03:37 +00:00
</div>
</template>
<script>
import CheckIcon from 'primevue/icons/check';
import ExclamationTriangleIcon from 'primevue/icons/exclamationtriangle';
import InfoCircleIcon from 'primevue/icons/infocircle';
import TimesCircleIcon from 'primevue/icons/timescircle';
import BaseInlineMessage from './BaseInlineMessage.vue';
2023-04-14 08:03:50 +00:00
2022-09-06 12:03:37 +00:00
export default {
name: 'InlineMessage',
2023-05-25 14:15:19 +00:00
extends: BaseInlineMessage,
2024-02-11 08:10:29 +00:00
inheritAttrs: false,
2022-09-06 12:03:37 +00:00
timeout: null,
data() {
return {
visible: true
2022-09-14 11:26:01 +00:00
};
2022-09-06 12:03:37 +00:00
},
mounted() {
if (!this.sticky) {
setTimeout(() => {
this.visible = false;
}, this.life);
}
},
computed: {
iconComponent() {
return {
info: InfoCircleIcon,
success: CheckIcon,
warn: ExclamationTriangleIcon,
error: TimesCircleIcon
}[this.severity];
2022-09-06 12:03:37 +00:00
}
}
2022-09-14 11:26:01 +00:00
};
2022-09-06 12:03:37 +00:00
</script>