58 lines
1.2 KiB
Vue
58 lines
1.2 KiB
Vue
|
<script>
|
||
|
|
import Icon from '~/vue_shared/components/icon.vue';
|
||
|
|
import LineNumber from './line_number.vue';
|
||
|
|
import DurationBadge from './duration_badge.vue';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
Icon,
|
||
|
|
LineNumber,
|
||
|
|
DurationBadge,
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
line: {
|
||
|
|
type: Object,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
isClosed: {
|
||
|
|
type: Boolean,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
path: {
|
||
|
|
type: String,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
duration: {
|
||
|
|
type: String,
|
||
|
|
required: false,
|
||
|
|
default: '',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
iconName() {
|
||
|
|
return this.isClosed ? 'angle-right' : 'angle-down';
|
||
|
|
},
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleOnClick() {
|
||
|
|
this.$emit('toggleLine');
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div
|
||
|
|
class="log-line collapsible-line d-flex justify-content-between"
|
||
|
|
role="button"
|
||
|
|
@click="handleOnClick"
|
||
|
|
>
|
||
|
|
<icon :name="iconName" class="arrow position-absolute" />
|
||
|
|
<line-number :line-number="line.lineNumber" :path="path" />
|
||
|
|
<span v-for="(content, i) in line.content" :key="i" class="line-text" :class="content.style">{{
|
||
|
|
content.text
|
||
|
|
}}</span>
|
||
|
|
<duration-badge v-if="duration" :duration="duration" />
|
||
|
|
</div>
|
||
|
|
</template>
|