2026-04-11 16:53:01 +02:00

74 lines
2.6 KiB
Vue

<template>
<div v-if="artifact" class="content-l">
<h1>Artifact</h1>
<div class="col-2">
<p class="tile-m">{{ artifact.groupId }}</p>
<p class="tile-m">{{ artifact.artifactId }}</p>
</div>
<div class="artifact-page">
<div class="content-m" v-if="selectedVersion">
<h2>Dependency</h2>
<div class="tile-m" v-if="dependency">
<Codebox :content="dependency"></Codebox>
</div>
<div class="content-m">
<h2>Files</h2>
<p class="tile-m" v-if="selectedVersion.jars" v-for="jar in selectedVersion.jars" @click="Download.download(jar.url)">{{ jar.filename }}</p>
<a class="tile-m" v-if="selectedVersion.pom" :href="'/api/maven2/' + selectedVersion.pom.url" target="_blank">{{ selectedVersion.pom.filename }}</a>
</div>
</div>
<div class="content-m">
<h2>Versions</h2>
<p class="tile-m pointer" v-for="version in artifact.versions" :class="{ active: (selectedVersion != null && version.id === selectedVersion.id) }" @click="() => { selectedVersion = version }">{{ version.version }}</p>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import {Artifact, Version} from "~/components/artifact/Artifact";
import Codebox from "~/components/artifact/Codebox.vue";
import {Download} from "~/utils/Download";
const artifact: Ref<Artifact | undefined> = ref(undefined);
const selectedVersion: Ref<Version | undefined> = ref(undefined);
onMounted(() => {
const id = useRoute().params.id as string;
Artifact.getById(id, (_artifact: Artifact) => {
artifact.value = _artifact;
const _version = _artifact.versions.at(0);
if (_version != null)
{
selectedVersion.value = _version;
}
})
})
const dependency = computed(() => {
if (selectedVersion.value)
{
const template = [
"<dependency>",
"\t<groupId>" + selectedVersion.value.groupId + "</groupId>",
"\t<artifactId>" + selectedVersion.value.artifactId + "</artifactId>",
"\t<version>" + selectedVersion.value.version + "</version>",
"</dependency>"
]
return template.join("\n").replace(/</g, "&lt;").replace(/>/g, "&gt;");
}
return undefined;
});
</script>
<style scoped>
.artifact-page {
display: grid;
grid-template-columns: 1fr 10rem;
gap: 1rem;
}
.active {
background-color: #3c74ff;
color: white;
border: none;
}
</style>