frontend/app/components/VersionComponent.vue
2026-04-25 22:20:46 +02:00

66 lines
1.8 KiB
Vue

<template>
<div class="content-l">
<h2>Dependency</h2>
<div class="tile-m" v-for="dependency in [formatDependency(artifact, version)]">
<Codebox :content="dependency"></Codebox>
</div>
<div>
<div class="content-m">
<h2>Files</h2>
<div class="file-container">
<p class="tile-m pointer file" v-if="version.jars" v-for="jar in version.jars" @click="Download.download(jar.url)">{{ jar.filename }} <span class="jar">JAR</span></p>
<a class="tile-m file" v-if="version.pom" :href="'/api/maven2/' + version.pom.url" target="_blank">{{ version.pom.filename }} <span class="pom">POM</span></a>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import {Download} from "~/utils/Download";
import Codebox from "~/components/artifact/Codebox.vue";
import {Artifact, type Version} from "~/components/artifact/Artifact";
defineProps<{
artifact: Artifact,
version: Version
}>();
const formatDependency = (artifact: Artifact, version: Version) => {
const template = [
"<dependency>",
"\t<groupId>" + artifact.groupId + "</groupId>",
"\t<artifactId>" + artifact.artifactId + "</artifactId>",
"\t<version>" + version.version + "</version>",
"</dependency>"
]
return template.join("\n");
};
</script>
<style scoped>
.file {
border-radius: 2rem;
padding: 0.5rem 0.75rem;
padding-right: 0.5rem;
width: auto;
}
.file-container
{
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.jar {
background-color: #ac088a;
color: white;
padding: 0.125rem 0.45rem;
border-radius: 2rem;
}
.pom {
background-color: #049c00;
color: white;
padding: 0.125rem 0.45rem;
border-radius: 2rem;
}
</style>