/
FrameGroup.vue
94 lines (91 loc) · 3.22 KB
/
FrameGroup.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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<template>
<li
v-if="!frameGroup.expanded && frameGroup.type === 'vendor'"
class="stack-frame-group stack-frame-group-vendor"
@click="$emit('expand')"
>
<div class="stack-frame | cursor-pointer">
<button class="stack-frame-number">
<PlusIcon class="align-middle text-gray-500" />
</button>
<div class="span-2 stack-frame-text">
<button class="text-left text-gray-500">
{{
frameGroup.frames.length > 1
? `${frameGroup.frames.length} vendor frames…`
: '1 vendor frame…'
}}
</button>
</div>
</div>
</li>
<li
v-else-if="frameGroup.type === 'unknown'"
class="stack-frame-group stack-frame-group-unknown"
>
<div class="stack-frame">
<button class="stack-frame-number"></button>
<div class="span-2 stack-frame-text">
<span class="text-left text-gray-500">
{{
frameGroup.frames.length > 1
? `${frameGroup.frames.length} unknown frames`
: '1 unknown frame'
}}
</span>
</div>
</div>
</li>
<li v-else>
<ul
class="stack-frame-group"
:class="frameGroup.type === 'vendor' ? 'stack-frame-group-vendor' : ''"
>
<li
v-for="(frame, i) in frameGroup.frames"
:key="i"
class="stack-frame | cursor-pointer"
:class="frame.selected ? 'stack-frame-selected' : ''"
@click="$emit('select', frame.frame_number)"
>
<div class="stack-frame-number">{{ frame.frame_number }}</div>
<div class="stack-frame-text">
<header
v-if="i === 0"
class="stack-frame-header"
:class="frame.class ? 'mb-1' : ''"
>
<FilePath
:pathClass="
frameGroup.type === 'vendor' ? 'text-gray-800' : 'text-purple-800'
"
class="stack-frame-path"
:file="frame.relative_file"
/>
</header>
<span v-if="frame.class" class="stack-frame-exception-class">
<ExceptionClass class="stack-frame-exception-class" :name="frame.class" />
</span>
</div>
<div class="stack-frame-line">
<LineNumber :lineNumber="frame.line_number" />
</div>
</li>
</ul>
</li>
</template>
<script>
import ExceptionClass from '../Shared/ExceptionClass.vue';
import FilePath from '../Shared/FilePath.vue';
import LineNumber from '../Shared/LineNumber.vue';
export default {
props: {
frameGroup: { required: true },
},
components: {
ExceptionClass,
FilePath,
LineNumber,
},
};
</script>