82 lines
1.5 KiB
Vue
82 lines
1.5 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-icon" aria-hidden="true">✗</span>
|
|||
|
|
<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>
|