File size: 2,525 Bytes
4d70170 |
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 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
<script lang="ts">
import type { PropType } from 'vue'
import { computed, defineComponent } from 'vue'
import { formatTime } from '@front/util/format'
import type { TimelineEvent } from './composable'
import { useInspectedEvent } from './composable'
export default defineComponent({
props: {
event: {
type: Object as PropType<TimelineEvent>,
required: true,
},
selected: {
type: Boolean,
default: false,
},
},
emits: ['inspect', 'select'],
setup(props) {
const time = computed(() => formatTime(props.event.time / 1000))
const {
inspectedEvent,
} = useInspectedEvent()
const isInspected = computed(() => inspectedEvent.value === props.event)
return {
time,
isInspected,
}
},
})
</script>
<template>
<div
class="event flex items-center space-x-2 pl-3 pr-2 text-xs cursor-pointer select-none"
:class="{
'inspected bg-green-500 text-white': isInspected,
'hover:bg-gray-100 dark:hover:bg-gray-900 text-gray-800 dark:text-gray-200': !isInspected,
}"
@click="$emit('inspect')"
@dblclick="$emit('select')"
>
<span class="flex-1 font-mono truncate space-x-1">
<span
class="font-medium"
:class="{
'text-purple-600 dark:text-purple-400': !isInspected,
}"
>
<span>{{ event.title || 'Event' }}</span>
<VueIcon
v-if="event.logType === 'error'"
icon="error"
class="w-4 h-4 ml-1"
:class="{
'text-red-500': !isInspected,
'text-white': isInspected,
}"
/>
<VueIcon
v-if="event.logType === 'warning'"
icon="warning"
class="w-4 h-4 ml-1"
:class="{
'text-yellow-500': !isInspected,
'text-white': isInspected,
}"
/>
</span>
<span
v-if="event.subtitle"
class="opacity-75"
v-html="event.subtitle"
/>
</span>
<span
v-if="selected"
class="flex-none text-2xs px-1 py-0.5 leading-none rounded-full text-green-500 border"
:class="{
'bg-white border-transparent': isInspected,
'bg-green-100 dark:bg-green-900 border-green-200 dark:border-green-800': !isInspected,
}"
>
selected
</span>
<span class="event-time flex-none text-2xs font-mono opacity-50">
{{ time }}
</span>
</div>
</template>
<style lang="postcss" scoped>
.event {
height: 34px;
}
</style>
|