public/owltide
1
0
Fork 0
Code Issues 3 Pull requests Projects Releases Packages 1 Wiki Activity Actions

Render multi-line diff entries

Browse source 
Rework the rendering of the DiffEntry component to properly show
multiline entries as spanning multiple lines.
This commit is contained in:
Hornwitser 2025-09-06 16:50:41 +02:00
parent a8c62e6688
commit 6d9d937c70
2 changed files with 17 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

27
components/DiffEntry.vue
View file

@ -15,7 +15,12 @@
:key="index"
:class="type"
>
{{ text }}
<div class="symbol">
{{ { "removed": "- ", "added": "+ "}[type] }}
</div>
<div class="content">
{{ text }}
</div>
</div>
</div>
</template>
@ -33,20 +38,20 @@ defineProps<{
grid-template-columns: 5rem 1fr;
column-gap: 1rem;
}
.removed {
:is(.removed, .added) {
display: flex;
grid-column: 2 / 2;
white-space: pre-wrap;
}
:is(.removed, .added) .symbol {
display: block;
font-family: monospace;
flex: 0 0 auto;
}
.removed {
color: color-mix(in srgb, CanvasText, red 40%);
}
.removed::before {
content: "- ";
font-family: monospace;
}
.added {
grid-column: 2 / 2;
color: color-mix(in srgb, CanvasText, green 40%);
}
.added::before {
content: "+ ";
font-family: monospace;
}
</style>