Fix optional props

components/PfamChips.vue

@@ -4,7 +4,7 @@ import { usePfamStore } from "@/stores/pfam";
 const { pfam: pfamStore } = usePfamStore();
 export interface Props {
   pfamString: string | null;
-  itemsToDisplay: number;
+  itemsToDisplay?: number;
 }
 
 const props = withDefaults(defineProps<Props>(), {

components/content/ArticleDoi.vue

 <script setup lang="ts">
-import { useDisplay } from 'vuetify'
+import { useDisplay } from "vuetify";
 
 export interface Props {
-    index: number
-    doi: string
-    divider: boolean
-    enumerate: boolean
-    title?: string
-    abstract?: string
+  index?: number;
+  doi: string;
+  divider?: boolean;
+  enumerate?: boolean;
+  title?: string;
+  abstract?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    enumerate: true,
-})
-const { article } = useFetchArticle(props.doi)
-const { mobile } = useDisplay()
-const show = ref(false)
-
-const articleTitle = computed(() => { return props?.title ?? article.value?.title ?? props.doi })
-const articleAbstract = computed(() => { return props.abstract ?? article.value?.abstract })
+  enumerate: true,
+  divider: false,
+});
+const { article } = useFetchArticle(props.doi);
+const { mobile } = useDisplay();
+const show = ref(false);
 
+const articleTitle = computed(() => {
+  return props?.title ?? article.value?.title ?? props.doi;
+});
+const articleAbstract = computed(() => {
+  return props.abstract ?? article.value?.abstract;
+});
 </script>
 <template>
-    <v-list-item :href="article?.href" :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 #append v-if="!mobile">
+  <v-list-item
+    :href="article?.href"
+    :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 #append v-if="!mobile">
             <v-avatar>
                 <v-icon>{{ article?.prependIcon }}</v-icon>
             </v-avatar>
         </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-item density="compact" :class="mobile ? 'px-0' : null">
-                <v-btn v-if="articleAbstract" size="x-small" variant="outlined"
-                    :append-icon="show ? 'mdi-chevron-up' : 'mdi-chevron-down'"
-                    @click.stop.prevent="show = !show">Abstract</v-btn>
-            </v-card-item>
-            <v-expand-transition>
-                <v-card v-show="show" flat color="transparent">
-                    <v-card-text>
-                        {{ articleAbstract }}
-                    </v-card-text>
-                </v-card>
-
-            </v-expand-transition>
+    <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-item density="compact" :class="mobile ? 'px-0' : null">
+        <v-btn
+          v-if="articleAbstract"
+          size="x-small"
+          variant="outlined"
+          :append-icon="show ? 'mdi-chevron-up' : 'mdi-chevron-down'"
+          @click.stop.prevent="show = !show"
+          >Abstract</v-btn
+        >
+      </v-card-item>
+      <v-expand-transition>
+        <v-card v-show="show" flat color="transparent">
+          <v-card-text>
+            {{ articleAbstract }}
+          </v-card-text>
         </v-card>
-    </v-list-item>
-    <v-divider v-if="props.divider" inset></v-divider>
+      </v-expand-transition>
+    </v-card>
+  </v-list-item>
+  <v-divider v-if="props.divider" inset></v-divider>
 </template>
\ No newline at end of file

components/content/ListSystems.vue

@@ -4,7 +4,7 @@ import { usePfamStore } from "@/stores/pfam";
 export interface Props {
   headers: Array<Object>;
   systems: Array<Object>;
-  height: number;
+  height?: number;
 }
 
 const props = withDefaults(defineProps<Props>(), {