nidus-sync/ts/rmo/components/ErrorNotification.vue

<style scoped>
.error-notification {
	background-color: #f8d7da;
	border: 1px solid #f5c6cb;
	border-radius: 0.375rem;
	padding: 1rem 1.25rem;
	margin-bottom: 1rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.error-icon {
	font-size: 1.25rem;
	flex-shrink: 0;
}
.error-text {
	color: #721c24;
	flex: 1;
}
.error-dismiss {
	background: none;
	border: none;
	color: #721c24;
	font-size: 1.25rem;
	cursor: pointer;
	padding: 0 0.25rem;
	line-height: 1;
	opacity: 0.7;
}
.error-dismiss:hover {
	opacity: 1;
}
</style>

<template>
	<div v-if="visible" class="error-notification" role="alert">
		<span class="error-text">{{ message }}</span>
		<button
			v-if="dismissible"
			type="button"
			class="error-dismiss"
			aria-label="Dismiss error"
			@click="dismiss"
		>
			×
		</button>
	</div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const props = withDefaults(
	defineProps<{
		message?: string;
		dismissible?: boolean;
	}>(),
	{
		message:
			"Something went wrong. Your request could not be completed. Please try again.",
		dismissible: true,
	},
);

const emit = defineEmits<{
	dismissed: [];
}>();

const visible = ref(true);

function dismiss() {
	visible.value = false;
	emit("dismissed");
}

function show() {
	visible.value = true;
}

defineExpose({ show, dismiss });
</script>