81 lines
1.3 KiB
Vue
81 lines
1.3 KiB
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>
|