Merge pull request #7 from subugoe/omalkja/use-typescript--#3

refactor: the remaining 'header' and a few 'panels' components

src/components/header/Navbar.vue

@@ -23,7 +23,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed } from 'vue';
 import { useStore } from 'vuex';
 import { useI18n } from 'vue-i18n';
@@ -32,11 +32,11 @@ import BaseButton from '@/components/base/BaseButton.vue';
 const store = useStore();
 const { t } = useI18n();
 
-const manifest = computed(() => store.getters['contents/manifest']);
-const manifests = computed(() => store.getters['contents/manifests']);
-const itemUrl = computed(() => store.getters['contents/itemUrl']);
-const itemIndex = computed(() => (manifest.value ? manifest.value.sequence.findIndex(({ id }) => id === itemUrl.value) : -1));
-const hasPrev = computed(() => {
+const manifest = computed<Manifest>(() => store.getters['contents/manifest']);
+const manifests = computed<Manifest[]>(() => store.getters['contents/manifests']);
+const itemUrl = computed<string>(() => store.getters['contents/itemUrl']);
+const itemIndex = computed<number>(() => (manifest.value ? manifest.value.sequence.findIndex(({ id }) => id === itemUrl.value) : -1));
+const hasPrev = computed<boolean>(() => {
   const prevIndex = itemIndex.value - 1;
   if (prevIndex < 0) {
     if (manifests.value === null) return false;
@@ -46,7 +46,7 @@ const hasPrev = computed(() => {
 
   return true;
 });
-const hasNext = computed(() => {
+const hasNext = computed<boolean>(() => {
   const nextIndex = itemIndex.value + 1;
   if (nextIndex > manifest.value.sequence.length - 1) {
     if (manifests.value === null) return false;
@@ -55,16 +55,17 @@ const hasNext = computed(() => {
   }
   return true;
 });
-const nextButtonLabel = computed(() => (itemIndex.value === manifest.value.sequence.length - 1
-  ? `${t('next')} ${t(labels.value.manifest)}`
-  : `${t('next')} ${t(labels.value.item)}`));
-const prevButtonLabel = computed(() => (itemIndex.value === 0
-  ? `${t('prev')} ${t(labels.value.manifest)}`
-  : `${t('prev')} ${t(labels.value.item)}`));
-const labels = computed(() => store.getters['config/config'].labels || {
+const labels = computed<Labels>(() => store.getters['config/config'].labels || {
   manifest: 'manifest',
   item: 'item',
 });
+const nextButtonLabel = computed<string>(() => (itemIndex.value === manifest.value.sequence.length - 1
+  ? `${t('next')} ${t(labels.value.manifest ? labels.value.manifest: 'Manuscript')}`
+  : `${t('next')} ${t(labels.value.item)}`));
+const prevButtonLabel = computed<string>(() => (itemIndex.value === 0
+  ? `${t('prev')} ${t(labels.value.manifest ? labels.value.manifest: 'Manuscript')}`
+  : `${t('prev')} ${t(labels.value.item)}`));
+
 
 function prev() {
   const prevIndex = itemIndex.value - 1;

src/components/header/TitleBar.vue

@@ -33,24 +33,26 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed } from 'vue';
 import { useStore } from 'vuex';
 import BaseIcon from '@/components/base/BaseIcon.vue';
 
-const props = defineProps({
-  item: {
-    type: Object,
-    default: () => {},
-  },
-});
+
+export interface Props {
+  item: Item
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  item: () => <Item>{}
+})
 
 const store = useStore();
 
-const collectionTitle = computed(() => store.getters['contents/collectionTitle']);
-const manifestTitle = computed(() => store.getters['contents/manifest']?.label);
-const labels = computed(() => store.getters['config/config'].labels || {
+const collectionTitle = computed<string | null>(() => store.getters['contents/collectionTitle']);
+const manifestTitle = computed<string | undefined>(() => store.getters['contents/manifest']?.label);
+const labels = computed<Labels>(() => store.getters['config/config'].labels || {
   manifest: 'manifest',
   item: 'item',
 });
-</script>
+</script>

src/components/panels/Panel.vue

@@ -90,7 +90,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import {
   computed, nextTick, ref, watch,
 } from 'vue';
@@ -143,7 +143,7 @@ export default {
     const unsubscribe = ref(null);
     const isLoading = ref(false);
 
-    const item = computed(() => store.getters['contents/item']);
+    const item = computed<Item>(() => store.getters['contents/item']);
 
     watch(
       () => props.activeView,
@@ -198,7 +198,7 @@ export default {
       const { component } = findComponent(connector.id);
 
       const type = connector.options?.type;
-      const url = getContentUrl(type);
+      const url: string | null = getContentUrl(type);
       if (!url) return;
 
       const fontSize = 16;
@@ -228,7 +228,7 @@ export default {
       const { connector, label } = view;
       const { component } = findComponent(connector.id);
 
-      const url = item.value?.annotationCollection;
+      const url: string | undefined = item.value?.annotationCollection;
 
       if (!url) return;
 
@@ -311,8 +311,8 @@ export default {
       }];
     }
 
-    function getContentUrl(type) {
-      let contentItem = null;
+    function getContentUrl(type: string): string | null {
+      let contentItem: Content | null = null;
       if (!type) {
         [contentItem] = item.value.content;
         // TODO: this should be moved to loading time in order dynamically recognize all content types

src/components/panels/actions/PanelImageAction.vue

@@ -14,11 +14,17 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed } from 'vue';
 import BaseButton from '@/components/base/BaseButton.vue';
 
-const buttons = computed(() => ([
+interface Button {
+  id: string,
+  icon: string,
+  tooltip: string
+}
+
+const buttons = computed<Button[]>(() => ([
   { id: 'zoom-in', icon: 'zoomIn', tooltip: 'zoom_in' },
   { id: 'zoom-out', icon: 'zoomOut', tooltip: 'zoom_out' },
   { id: 'fullscreen', icon: 'fullscreen', tooltip: 'switch_to_fullscreen' },