/
Warning.vue
70 lines (62 loc) · 1.69 KB
/
Warning.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<template>
<Alert
v-model="show"
:dismissible="dismissible"
status="warning"
data-cy="warning-alert"
icon-classes="icon-dark-orange-400 h-16px w-16px"
:title="title"
:icon="ErrorOutlineIcon"
>
<div
ref="markdownTarget"
v-html="markdown"
/>
<Button
v-if="retryable"
size="md"
:prefix-icon="RefreshIcon"
prefix-icon-class="icon-dark-white"
@click="emits('retry')"
>
{{ t('warnings.retry') }}
</Button>
</Alert>
</template>
<script lang="ts" setup>
import ErrorOutlineIcon from '~icons/cy/status-errored-outline_x16.svg'
import { useMarkdown } from '@packages/frontend-shared/src/composables/useMarkdown'
import Alert from '@cy/components/Alert.vue'
import Button from '@cy/components/Button.vue'
import RefreshIcon from '~icons/cy/refresh_x16'
import { computed, ref } from 'vue'
import { useVModels } from '@vueuse/core'
import { useI18n } from '@cy/i18n'
const { t } = useI18n()
const emits = defineEmits<{
(eventName: 'update:modelValue', value: boolean): void
(eventName: 'retry'): void
}>()
const props = withDefaults(defineProps<{
title: string
message: string
details?: string | null
modelValue?: boolean
dismissible?: boolean
retryable?: boolean
}>(), {
modelValue: true,
details: undefined,
dismissible: true,
retryable: false,
})
const { modelValue: show } = useVModels(props, emits)
const markdownTarget = ref()
let message = computed(() => {
if (props.details) {
return [props.message, ` ${ props.details }`].join('\n\n')
}
return props.message
})
const { markdown } = useMarkdown(markdownTarget, message.value, { classes: { code: ['bg-warning-200'] } })
</script>