owltide/components/DiffEntry.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%);
}
.removed .content{
	text-decoration-line: line-through;
}
.added {
	color: color-mix(in srgb, CanvasText, green 40%);
}
</style>