Skip to content

Commit 653f041

Browse files
DsaquelDsaquel
committed
chore: stack console args 🚧
1 parent ebbc462 commit 653f041

File tree

8 files changed

+273
-183
lines changed

8 files changed

+273
-183
lines changed

‎src/output/Console.vue

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
<script setup lang="ts">
2-
import { CommandData } from '../types';
3-
import ConsoleLine from './ConsoleLine.vue';
4-
5-
6-
const props = defineProps<{ logs: CommandData[] }>()
2+
import { CommandData } from '../types'
3+
import ConsoleLine from './ConsoleLine.vue'
74
5+
defineProps<{ logs: CommandData[] }>()
86
</script>
97

108
<template>

‎src/output/ConsoleLine.vue

Lines changed: 143 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,45 @@
11
<script setup lang="ts">
2-
import { ref } from 'vue';
3-
import { CommandData } from '../types';
4-
import JsonTree from './JsonTree.vue';
2+
import { ref } from 'vue'
3+
import { CommandData } from '../types'
4+
import JsonTree from './JsonTree.vue'
5+
import JsonNode from './JsonNode.vue'
56
67
defineProps<{ log: CommandData }>()
78
const level = ref(1)
89
// function toggleGroupCollapse() {
910
// log.collapsed = !log.collapsed;
1011
// }
12+
//<ConsoleTable :data="log.args[0]" :columns="log.args[1]" />
1113
</script>
1214

1315
<template>
14-
<div
15-
v-if="log.level === 'table'"
16+
<div v-if="log.level === 'table'">table desu</div>
17+
<div
18+
:class="`log console-${log.level}`"
19+
:style="{ paddingLeft: level * 15 + 'px' }"
1620
>
17-
<ConsoleTable :data="log.args[0]" :columns="log.args[1]" />
18-
</div>
19-
<div
20-
class="log console-{{ log.level }}"
21-
:style="{ paddingLeft: level * 15 + 'px' }"
22-
>
23-
<span v-if="log.count && log.count > 1" class="count">{{ log.count }}x</span>
21+
<span v-if="log.count && log.count > 1" class="count"
22+
>{{ log.count }}x</span
23+
>
2424

25-
<div
26-
v-if="log.level === 'trace' || log.level === 'assert'"
27-
class="arrow"
28-
>▶</div>
25+
<div v-if="log.level === 'trace' || log.level === 'assert'" class="arrow">
26+
▶
27+
</div>
2928

3029
<span v-if="log.level === 'assert'" class="assert">Assertion failed:</span>
3130

3231
<span v-if="log.level === 'clear'" class="info">Console was cleared</span>
33-
<span v-if="log.level === 'unclonable'" class="info error">Message could not be cloned. Open devtools to see it</span>
34-
<div v-if="log.level === 'group'" class="arrow" :class="{ expand: !log.collapsed }" @click="toggleGroupCollapse">▶</div>
32+
<span v-if="log.level === 'unclonable'" class="info error"
33+
>Message could not be cloned. Open devtools to see it</span
34+
>
35+
<div
36+
v-if="log.level === 'group'"
37+
class="arrow"
38+
:class="{ expand: !log.collapsed }"
39+
@click="toggleGroupCollapse"
40+
>
41+
▶
42+
</div>
3543
<span v-if="log.level === 'group'" class="title">{{ log.label }}</span>
3644

3745
<span v-if="log.level.startsWith('system')">
@@ -40,118 +48,129 @@ const level = ref(1)
4048
</template>
4149
</span>
4250

43-
<JSONNode v-if="log.level === 'table'" :value="log.args[0]" />
51+
<JsonNode
52+
v-if="log.level === 'table'"
53+
:value="log.args[0]"
54+
:margin-offset="0"
55+
/>
4456
<template v-else>
45-
<template v-for="arg in log.args">
46-
<JsonTree :data="arg" />
47-
</template>
57+
<JsonTree
58+
v-for="arg in log.args"
59+
:data="arg"
60+
:margin-offset="0"
61+
:increment="0"
62+
/>
4863
</template>
4964

50-
<div
51-
v-for="(_, idx) in new Array(level - 1)"
52-
class="outline"
53-
:style="{ left: idx * 15 + 15 + 'px' }"
65+
<div
66+
v-for="(_, idx) in new Array(level - 1)"
67+
class="outline"
68+
:style="{ left: idx * 15 + 15 + 'px' }"
5469
/>
5570
</div>
56-
5771
</template>
5872

5973
<style>
60-
.log {
61-
border-bottom: 1px solid #eee;
62-
padding: 5px 10px 0px;
63-
display: flex;
64-
position: relative;
65-
font-size: 12px;
66-
font-family: var(--font-mono);
67-
}
68-
69-
.log > :global(*) {
70-
margin-right: 10px;
71-
font-family: var(--font-mono);
72-
}
73-
74-
.console-warn, .console-system-warn {
75-
background: #fffbe6;
76-
border-color: #fff4c4;
77-
}
78-
79-
.console-error, .console-assert {
80-
background: #fff0f0;
81-
border-color: #fed6d7;
82-
}
83-
84-
.console-group, .arrow {
85-
cursor: pointer;
86-
user-select: none;
87-
}
88-
89-
.console-trace, .console-assert {
90-
border-bottom: none;
91-
}
92-
93-
.console-assert + .trace {
94-
background: #fff0f0;
95-
border-color: #fed6d7;
96-
}
97-
98-
.trace {
99-
border-bottom: 1px solid #eee;
100-
font-size: 12px;
101-
font-family: var(--font-mono);
102-
padding: 4px 0 2px;
103-
}
104-
105-
.trace > :global(div) {
106-
margin-left: 15px;
107-
}
108-
109-
.count {
110-
color: #999;
111-
font-size: 12px;
112-
line-height: 1.2;
113-
}
114-
115-
.info {
116-
color: #666;
117-
font-family: var(--font) !important;
118-
font-size: 12px;
119-
}
120-
121-
.error {
122-
color: #da106e; /* todo make this a var */
123-
}
124-
125-
.outline {
126-
border-left: 1px solid #9c9cab;
127-
position: absolute;
128-
top: 0;
129-
bottom: -1px;
130-
}
131-
132-
.arrow {
133-
position: absolute;
134-
font-size: 0.6em;
135-
transition: 150ms;
136-
transform-origin: 50% 50%;
137-
transform: translateY(1px) translateX(-50%);
138-
}
139-
140-
.arrow.expand {
141-
transform: translateY(1px) translateX(-50%) rotateZ(90deg);
142-
}
143-
144-
.title {
145-
font-family: var(--font-mono);
146-
font-size: 13px;
147-
font-weight: bold;
148-
padding-left: 11px;
149-
height: 19px;
150-
}
151-
152-
.assert {
153-
padding-left: 11px;
154-
font-weight: bold;
155-
color: #da106e;
156-
}
74+
.log {
75+
border-bottom: 1px solid #eee;
76+
padding: 5px 10px;
77+
display: flex;
78+
position: relative;
79+
font-size: 0.8rem;
80+
font-family: var(--font-mono);
81+
flex-wrap: wrap;
82+
}
83+
84+
.log > * {
85+
/* margin-right: 10px; */
86+
font-family: var(--font-mono);
87+
}
88+
89+
.console-warn,
90+
.console-system-warn {
91+
background: #fffbe6;
92+
border-color: #fff4c4;
93+
}
94+
95+
.console-error,
96+
.console-assert {
97+
background: #fff0f0;
98+
border-color: #fed6d7;
99+
}
100+
101+
.console-group,
102+
.arrow {
103+
cursor: pointer;
104+
user-select: none;
105+
}
106+
107+
.console-trace,
108+
.console-assert {
109+
border-bottom: none;
110+
}
111+
112+
.console-assert + .trace {
113+
background: #fff0f0;
114+
border-color: #fed6d7;
115+
}
116+
117+
.trace {
118+
border-bottom: 1px solid #eee;
119+
font-size: 0.8rem;
120+
font-family: var(--font-mono);
121+
padding: 4px 0 2px;
122+
}
123+
124+
.trace > div {
125+
margin-left: 15px;
126+
}
127+
128+
.count {
129+
color: #999;
130+
font-size: 0.8rem;
131+
line-height: 1.2;
132+
}
133+
134+
.info {
135+
color: #666;
136+
font-family: var(--font) !important;
137+
font-size: 0.8rem;
138+
}
139+
140+
.error {
141+
color: #da106e; /* todo make this a var */
142+
}
143+
144+
.outline {
145+
border-left: 1px solid #9c9cab;
146+
position: absolute;
147+
top: 0;
148+
bottom: -1px;
149+
}
150+
151+
.arrow {
152+
position: absolute;
153+
font-size: 0.6em;
154+
transition: 150ms;
155+
transform-origin: 50% 50%;
156+
transform: translateY(1px) translateX(-50%);
157+
}
158+
159+
.arrow.expand {
160+
transform: translateY(1px) translateX(-50%) rotateZ(90deg);
161+
}
162+
163+
.title {
164+
font-family: var(--font-mono);
165+
font-size: 1em;
166+
font-weight: bold;
167+
padding-left: 11px;
168+
height: 19px;
169+
}
170+
171+
.assert {
172+
padding-left: 11px;
173+
font-weight: bold;
174+
color: #da106e;
175+
}
157176
</style>

0 commit comments

Comments
 (0)