Select Git revision
ArticleReference.vue
ArticleReference.vue 2.24 KiB
<script setup lang="ts">
import { useDisplay } from "vuetify";
export interface Props {
index?: number;
doi: string;
divider?: boolean;
enumerate?: boolean;
title?: string;
abstract?: string;
}
const props = withDefaults(defineProps<Props>(), {
enumerate: true,
divider: false,
});
const { article } = useFetchArticle(props.doi);
const { mobile } = useDisplay();
const articleTitle = computed(() => {
return props?.title ?? article?.value?.title ?? props.doi;
});
const articleAuthorsString = computed(() => {
// console.log(article.value)
// console.log(props.doi)
return article.value?.author?.length > 0 ? `${article.value.author[0].family} ${article.value.author[0].given} & al` : null
})
</script>
<template>
<v-list-item v-if="article" :href="article?.href" :id="`ref-${props.doi}`" :target="article?.target" density="compact" class="px-1">
<template #prepend v-if="!mobile && enumerate">
<v-avatar color="primary" size="small" density="compact" variant="tonal">
{{ props?.index ?? "#" }}
</v-avatar>
</template>
<template #title>
<span class="text-subtitle-1 font-weight-bold">{{
articleTitle
}}</span> <span class="text-caption">{{ articleAuthorsString }}</span>
</template>
<template #append v-if="!mobile">
<span> {{ article?.containerTitle ?? "no containerTitle" }} ({{
article?.year
}})</span>
</template>
<!-- <v-card flat color="transparent" density="compact" class="my-0">
<v-card-item density="compact" :class="mobile ? 'px-0' : null">
<v-card-title><span class="text-subtitle-1 font-weight-bold">{{
articleTitle
}}</span></v-card-title>
<v-card-subtitle>
{{ article?.subtitle ?? "no authors" }}</v-card-subtitle>
<v-card-subtitle>
{{ article?.containerTitle ?? "no containerTitle" }} ({{
article?.year
}})</v-card-subtitle>
</v-card-item>
</v-card> -->
</v-list-item>
<v-divider v-if="props.divider" inset></v-divider>
</template>