Hornwitser
6d9d937c70
Rework the rendering of the DiffEntry component to properly show multiline entries as spanning multiple lines.
57 lines
1,008 B
Vue
57 lines
1,008 B
Vue
<!--
|
|
SPDX-FileCopyrightText: © 2025 Hornwitser <code@hornwitser.no>
|
|
SPDX-License-Identifier: AGPL-3.0-or-later
|
|
-->
|
|
<template>
|
|
<div
|
|
v-if="entries.length"
|
|
class="diffEntry"
|
|
>
|
|
<div class="title">
|
|
{{ title }}:
|
|
</div>
|
|
<div
|
|
v-for="[type, text], index in entries"
|
|
:key="index"
|
|
:class="type"
|
|
>
|
|
<div class="symbol">
|
|
{{ { "removed": "- ", "added": "+ "}[type] }}
|
|
</div>
|
|
<div class="content">
|
|
{{ text }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
defineProps<{
|
|
title: string,
|
|
entries: (["removed" | "added", string][]);
|
|
}>();
|
|
</script>
|
|
|
|
<style scoped>
|
|
.diffEntry {
|
|
display: grid;
|
|
grid-template-columns: 5rem 1fr;
|
|
column-gap: 1rem;
|
|
}
|
|
: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%);
|
|
}
|
|
.added {
|
|
color: color-mix(in srgb, CanvasText, green 40%);
|
|
}
|
|
</style>
|