49 lines
754 B
Vue
49 lines
754 B
Vue
|
<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"
|
||
|
|
>
|
||
|
|
{{ text }}
|
||
|
|
</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;
|
||
|
|
}
|
||
|
|
.removed {
|
||
|
|
grid-column: 2 / 2;
|
||
|
|
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>
|