60 lines
2.1 KiB
Vue
60 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
withDefaults(
|
|
defineProps<{
|
|
severity?: 'info' | 'success' | 'warn' | 'error' | 'secondary'
|
|
closable?: boolean
|
|
}>(),
|
|
{
|
|
severity: 'info',
|
|
closable: false,
|
|
},
|
|
)
|
|
|
|
defineEmits<{ close: [] }>()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="nych-message" :data-p="severity" role="status">
|
|
<div class="nych-message-content">
|
|
<span v-if="severity === 'info'" class="nych-message-icon">
|
|
<svg viewBox="0 0 18 18" fill="none" aria-hidden="true" width="18" height="18">
|
|
<path d="M9 8.5v5M9 5.5h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
|
|
</svg>
|
|
</span>
|
|
<span v-else-if="severity === 'success'" class="nych-message-icon">
|
|
<svg viewBox="0 0 18 18" fill="none" aria-hidden="true" width="18" height="18">
|
|
<path
|
|
d="M4 9.5L7.5 13L14 5.5"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
fill="none"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
<span v-else-if="severity === 'warn'" class="nych-message-icon">
|
|
<svg viewBox="0 0 18 18" fill="none" aria-hidden="true" width="18" height="18">
|
|
<path d="M9 4v6M9 13.5h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
|
|
</svg>
|
|
</span>
|
|
<span v-else-if="severity === 'error'" class="nych-message-icon">
|
|
<svg viewBox="0 0 18 18" fill="none" aria-hidden="true" width="18" height="18">
|
|
<path d="M5.5 5.5l7 7M12.5 5.5l-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
|
|
</svg>
|
|
</span>
|
|
<span class="nych-message-text"><slot /></span>
|
|
<button
|
|
v-if="closable"
|
|
type="button"
|
|
class="nych-message-closeButton"
|
|
aria-label="Dismiss"
|
|
@click="$emit('close')"
|
|
>
|
|
<svg class="nych-message-closeIcon" viewBox="0 0 12 12" fill="none" aria-hidden="true">
|
|
<path d="M3 3l6 6M9 3l-6 6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|