refactor: implement prop types

StreamAwesome/src/components/IconCanvas.vue

@@ -6,11 +6,9 @@ import { useFontsStatusStore } from '@/stores/fontStatus'
 
 const fontStatusStore = useFontsStatusStore()
 const iconCanvas = ref<HTMLCanvasElement | null>(null)
-const props = defineProps({
-  icon: {
-    type: Object as () => CustomIcon
-  }
-})
+const props = defineProps<{
+  icon: CustomIcon
+}>()
 
 onMounted(() => {
   waitForRequiredInitialization(createGenerator)

StreamAwesome/src/components/browser/InputGroup.vue

@@ -1,13 +1,8 @@
 <script setup lang="ts">
-defineProps({
-  label: {
-    type: String
-  },
-  inputId: {
-    required: true,
-    type: String
-  }
-})
+defineProps<{
+  label: string
+  inputId: string
+}>()
 defineEmits<{
   onInput: [inputValue: string]
 }>()

StreamAwesome/src/components/settings/GeneralOptions.vue

@@ -13,11 +13,9 @@ import type { FontAwesomeIcon } from '@/model/fontAwesomeIcon'
 import { fontAwesomeVersionInfo } from '@/model/versions'
 import { reactive } from 'vue'
 
-const props = defineProps({
-  icon: {
-    type: Object as () => CustomIcon
-  }
-})
+const props = defineProps<{
+  icon: CustomIcon
+}>()
 
 const currentIcon = reactive(props.icon ?? ({} as CustomIcon))
 

StreamAwesome/src/components/settings/IconSettings.vue

@@ -3,12 +3,10 @@ import type { CustomIcon } from '@/model/customIcon'
 import PresetOptions from '@/components/settings/PresetOptions.vue'
 import GeneralOptions from '@/components/settings/GeneralOptions.vue'
 import DownloadButton from '@/components/settings/DownloadButton.vue'
-defineProps({
-  icon: {
-    type: Object as () => CustomIcon
-  }
-})
 
+defineProps<{
+  icon: CustomIcon
+}>()
 defineEmits<{
   downloadIcon: []
 }>()

StreamAwesome/src/components/settings/PresetOptions.vue

@@ -2,11 +2,10 @@
 import type { CustomIcon } from '@/model/customIcon'
 import ElgatoClassic from '@/components/settings/presets/ElgatoClassic.vue'
 import { ref } from 'vue'
-defineProps({
-  icon: {
-    type: Object as () => CustomIcon
-  }
-})
+
+defineProps<{
+  icon: CustomIcon
+}>()
 
 // TODO: Move somewhere else in the refactoring of the model
 const availablePresets = ['Elgato Classic', 'Other']

StreamAwesome/src/components/settings/presets/ElgatoClassic.vue

@@ -3,11 +3,9 @@ import { reactive, ref } from 'vue'
 import chroma from 'chroma-js'
 import type { CustomIcon, ColorValue } from '@/model/customIcon'
 
-const props = defineProps({
-  icon: {
-    type: Object as () => CustomIcon
-  }
-})
+const props = defineProps<{
+  icon: CustomIcon
+}>()
 
 const currentIcon = reactive(props.icon ?? ({} as CustomIcon))
 const color = chroma(props.icon?.foregroundColor ?? '#000000')

StreamAwesome/src/components/utils/IconDisplay.vue

@@ -2,12 +2,9 @@
 import type { FontAwesomeIcon } from '@/model/fontAwesomeIcon'
 import { FontAwesomeIconType } from '@/model/fontAwesomeIconType'
 
-const props = defineProps({
-  fontAwesomeIcon: {
-    required: true,
-    type: Object as () => FontAwesomeIcon
-  }
-})
+const props = defineProps<{
+  fontAwesomeIcon: FontAwesomeIcon
+}>()
 </script>
 
 <template>