From 14bc7abc04da4b6366689a62cf8a2f6ca7bf5ab1 Mon Sep 17 00:00:00 2001
From: malkja <orlin.malkja@sub.uni-goettingen.de>
Date: Fri, 17 May 2024 15:11:29 +0200
Subject: [PATCH 1/2] refactor: the 'base' and a few 'header' components

---
 src/components/base/BaseButton.vue     | 52 +++++++++++---------------
 src/components/base/BaseCheckbox.vue   |  4 +-
 src/components/base/BaseIcon.vue       |  9 ++++-
 src/components/header/GlobalHeader.vue | 27 ++++++-------
 src/components/header/Language.vue     | 21 +++++++----
 5 files changed, 58 insertions(+), 55 deletions(-)

diff --git a/src/components/base/BaseButton.vue b/src/components/base/BaseButton.vue
index 0a62f2ae..ef1a89a4 100644
--- a/src/components/base/BaseButton.vue
+++ b/src/components/base/BaseButton.vue
@@ -1,37 +1,27 @@
-<script setup>
+<script setup lang="ts">
 import { watch } from 'vue';
 import BaseIcon from '@/components/base/BaseIcon.vue';
 
-const props = defineProps({
-  text: {
-    type: String,
-    default: '',
-  },
-  display: {
-    type: String,
-    default: 'filled',
-  },
-  size: {
-    type: String,
-    default: 'normal',
-  },
-  icon: {
-    type: String,
-    default: null,
-  },
-  iconPosition: {
-    type: String,
-    default: 'left',
-  },
-  rounded: {
-    type: Boolean,
-    default: null,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-});
+export interface Props {
+  text: string,
+  display: string,
+  size: string,
+  icon: string | null,
+  iconPosition: string | null,
+  rounded: boolean | null,
+  disabled: boolean,
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  text: '',
+  display: 'filled',
+  size: 'normal',
+  icon: null,
+  iconPosition: 'left',
+  rounded: null,
+  disabled: false
+})
+
 
 let _icon;
 watch(() => props.icon, (value) => _icon = value, { immediate: true });
diff --git a/src/components/base/BaseCheckbox.vue b/src/components/base/BaseCheckbox.vue
index 48d21a30..59116499 100644
--- a/src/components/base/BaseCheckbox.vue
+++ b/src/components/base/BaseCheckbox.vue
@@ -48,7 +48,9 @@ const pt = {
   }
 }
 
-function getAriaChecked() {
+type AriaChecked = 'mixed' | 'true' | 'false'
+
+function getAriaChecked(): AriaChecked {
   if (props.modelValue === null) return 'mixed';
   if (props.modelValue === true) return 'true';
   else return 'false';
diff --git a/src/components/base/BaseIcon.vue b/src/components/base/BaseIcon.vue
index 2c9327f5..25b5f006 100644
--- a/src/components/base/BaseIcon.vue
+++ b/src/components/base/BaseIcon.vue
@@ -1,7 +1,12 @@
-<script setup>
+<script setup lang="ts">
 import { getIcon } from '@/utils/icons';
 
-const props = defineProps(['name']);
+//const props = defineProps(['name']);
+export interface Props {
+  name: string
+}
+
+const props = defineProps<Props>()
 </script>
 
 <template>
diff --git a/src/components/header/GlobalHeader.vue b/src/components/header/GlobalHeader.vue
index 8602ead0..dcd98324 100644
--- a/src/components/header/GlobalHeader.vue
+++ b/src/components/header/GlobalHeader.vue
@@ -16,7 +16,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed } from 'vue';
 import { useStore } from 'vuex';
 import Navbar from '@/components/header/Navbar.vue';
@@ -24,19 +24,20 @@ import TitleBar from '@/components/header/TitleBar.vue';
 import PanelsToggle from '@/components/header/PanelsToggle.vue';
 import Tools from '@/components/header/Tools.vue';
 
-const props = defineProps({
-  configErrorTitle: {
-    type: String,
-    default: () => '',
-  },
-});
 
-const store = useStore();
+export interface Props {
+  configErrorTitle: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  configErrorTitle: ''
+})
 
-const show = computed(() => config.value?.header?.show);
-const manifests = computed(() => store.getters['contents/manifests']);
+const store = useStore();
 const config = computed(() => store.getters['config/config']);
-const item = computed(() => store.getters['contents/item']);
-const showNavbar = computed(() => config.value?.header?.navigation || true);
-const showPanelsToggle = computed(() => (config.value?.header?.panelsToggle !== undefined ? config.value?.header?.panelsToggle : true));
+const show = computed<boolean | undefined>(() => config.value?.header?.show);
+const manifests = computed<Manifest[]>(() => store.getters['contents/manifests']);
+const item = computed<Item>(() => store.getters['contents/item']);
+const showNavbar = computed<boolean>(() => config.value?.header?.navigation || true);
+const showPanelsToggle = computed<boolean | undefined>(() => (config.value?.header?.panelsToggle !== undefined ? config.value?.header?.panelsToggle : true));
 </script>
diff --git a/src/components/header/Language.vue b/src/components/header/Language.vue
index 1cf57272..99a65423 100644
--- a/src/components/header/Language.vue
+++ b/src/components/header/Language.vue
@@ -17,7 +17,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import {
   computed, onMounted, ref, watch,
 } from 'vue';
@@ -25,21 +25,26 @@ import { useStore } from 'vuex';
 import { useI18n } from 'vue-i18n';
 import BaseDropdown from '@/components/base/BaseDropdown.vue';
 
+interface Language {
+  label: string,
+  value: string
+}
+
 const store = useStore();
 const { locale: i18nLocale } = useI18n();
 
-const langs = ref([
+const langs = ref<Language[]>([
   { label: 'DE', value: 'de-de' },
   { label: 'EN', value: 'en-US' },
 ]);
-const selectedLang = ref(langs.value[0]);
-const showDropdown = ref(false);
+const selectedLang = ref<Language>(langs.value[0]);
+const showDropdown = ref<boolean>(false);
 const config = computed(() => store.getters['config/config']);
 
 watch(
   selectedLang,
   (lang) => {
-    i18nLocale.value = lang;
+    i18nLocale.value = lang.value;
   },
 );
 
@@ -47,7 +52,7 @@ onMounted(() => {
   selectedLang.value = config.value.lang || 'en-US';
 });
 
-function handleLanguageChange(lang) {
-  selectedLang.value = lang.value;
+function handleLanguageChange(lang: Language) {
+  selectedLang.value = lang;
 }
-</script>
+</script>
\ No newline at end of file

From e7b17f3690bfc3f75bd87f1816b8c63b85ca19bf Mon Sep 17 00:00:00 2001
From: malkja <orlin.malkja@sub.uni-goettingen.de>
Date: Tue, 21 May 2024 12:17:07 +0200
Subject: [PATCH 2/2] style: minor

---
 src/components/base/BaseIcon.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/base/BaseIcon.vue b/src/components/base/BaseIcon.vue
index 25b5f006..19ff40a0 100644
--- a/src/components/base/BaseIcon.vue
+++ b/src/components/base/BaseIcon.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { getIcon } from '@/utils/icons';
 
-//const props = defineProps(['name']);
 export interface Props {
   name: string
 }