refactor: the 'base' and a few 'header' components

subugoe · May 17, 2024 · 14bc7ab · 14bc7ab
1 parent 75e04b2
commit 14bc7ab
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 55 deletions.
diff --git 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
@@ -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
@@ -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
@@ -16,27 +16,28 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed } from 'vue';
 import { useStore } from 'vuex';
 import Navbar from '@/components/header/Navbar.vue';
 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
@@ -17,37 +17,42 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import {
   computed, onMounted, ref, watch,
 } from 'vue';
 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;
   },
 );
 
 onMounted(() => {
   selectedLang.value = config.value.lang || 'en-US';
 });
 
-function handleLanguageChange(lang) {
-  selectedLang.value = lang.value;
+function handleLanguageChange(lang: Language) {
+  selectedLang.value = lang;
 }
-</script>
+</script>