Expansion panel article

expandable card to display abstract

components/content/ArticleDoi.vue

+<script setup lang="ts">
+const props = defineProps<{
+    doi: string;
+}>();
+
+const { article } = useFetchArticle(props.doi)
+
+const show = ref(false)
+console.log(article)
+
+</script>
+<template>
+    <v-list-item :href="article?.href" :target="article?.target">
+        <template #prepend>
+            <v-avatar>
+                <v-icon>{{ article?.prependIcon }}</v-icon>
+            </v-avatar>
+        </template>
+        <v-card flat color="transparent" density="compact">
+
+            <v-card-item density="compact">
+                <v-card-title><span class="text-subtitle-1 font-weight-bold">{{ article?.title ?? 'no title' }}</span></v-card-title>
+                <v-card-subtitle> {{ article?.subtitle ?? "no subtitle" }}</v-card-subtitle>
+                <v-card-subtitle> {{ article?.containerTitle ?? "no containerTitle" }} ({{ article?.year
+                }})</v-card-subtitle>
+            </v-card-item>
+            <v-card-actions v-if="article?.abstract" density="compact">
+                <v-btn size="x-small" variant="outlined" :append-icon="show ? 'mdi-chevron-up' : 'mdi-chevron-down'"
+                    @click.stop.prevent="show = !show">Abstract</v-btn>
+            </v-card-actions>
+
+            <v-expand-transition>
+                <v-card v-show="show" flat color="transparent">
+                    <v-card-text>
+                        {{ article?.abstract }}
+                    </v-card-text>
+                </v-card>
+
+            </v-expand-transition>
+        </v-card>
+    </v-list-item>
+    <v-divider inset></v-divider>
+</template>
\ No newline at end of file