mirror of
https://github.com/vitest-dev/vitest.git
synced 2025-12-08 18:26:03 +00:00
57 lines
1.1 KiB
Vue
57 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { onKeyStroke } from '@vueuse/core'
|
|
import IconButton from '../IconButton.vue'
|
|
|
|
defineProps<{
|
|
file: string
|
|
name: string
|
|
url?: string
|
|
}>()
|
|
const emit = defineEmits<{ (e: 'close'): void }>()
|
|
|
|
onKeyStroke('Escape', () => {
|
|
emit('close')
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div w-350 max-w-screen h-full flex flex-col>
|
|
<div p-4 relative border="base b">
|
|
<p>Screenshot error</p>
|
|
<p op50 font-mono text-sm>
|
|
{{ file }}
|
|
</p>
|
|
<p op50 font-mono text-sm>
|
|
{{ name }}
|
|
</p>
|
|
<IconButton
|
|
icon="i-carbon:close"
|
|
title="Close"
|
|
absolute
|
|
top-5px
|
|
right-5px
|
|
text-2xl
|
|
@click="emit('close')"
|
|
/>
|
|
</div>
|
|
|
|
<div class="scrolls" grid="~ cols-1 rows-[min-content]" p-4>
|
|
<img
|
|
v-if="url"
|
|
:src="url"
|
|
:alt="`Screenshot error for '${name}' test in file '${file}'`"
|
|
border="base t r b l dotted red-500"
|
|
>
|
|
<div v-else>
|
|
Something was wrong, the image cannot be resolved.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.scrolls {
|
|
place-items: center;
|
|
}
|
|
</style>
|