feat: type global components and especially icon prop

src/components/misc/Icon.ts

@@ -70,6 +70,8 @@ import {
 } from '@fortawesome/free-regular-svg-icons'
 import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
 
+import type { FontAwesomeIcon as FontAwesomeIconFixedTypes } from '@/types/vue-fontawesome'
+
 library.add(faAlignLeft)
 library.add(faAngleRight)
 library.add(faArchive)
@@ -136,4 +138,5 @@ library.add(faTrashAlt)
 library.add(faUser)
 library.add(faUsers)
 
-export default FontAwesomeIcon
+// overwriting the wrong types
+export default FontAwesomeIcon as unknown as FontAwesomeIconFixedTypes

src/components/misc/card.vue

@@ -35,6 +35,9 @@
 </template>
 
 <script setup lang="ts">
+import type {PropType} from 'vue'
+import type {IconProp} from '@fortawesome/fontawesome-svg-core'
+
 import BaseButton from '@/components/base/BaseButton.vue'
 
 defineProps({
@@ -51,7 +54,7 @@ defineProps({
 		default: false,
 	},
 	closeIcon: {
-		type: String,
+		type: String as PropType<IconProp>,
 		default: 'times',
 	},
 	shadow: {

src/components/misc/create-edit.vue

@@ -46,6 +46,9 @@
 </template>
 
 <script setup lang="ts">
+import type {PropType} from 'vue'
+import type {IconProp} from '@fortawesome/fontawesome-svg-core'
+
 defineProps({
 	title: {
 		type: String,
@@ -55,7 +58,7 @@ defineProps({
 		type: String,
 	},
 	primaryIcon: {
-		type: String,
+		type: String as PropType<IconProp>,
 		default: 'plus',
 	},
 	primaryDisabled: {

src/components/misc/dropdown.vue

@@ -17,14 +17,15 @@
 </template>
 
 <script setup lang="ts">
-import {ref} from 'vue'
+import {ref, type PropType} from 'vue'
 import {onClickOutside} from '@vueuse/core'
+import type {IconProp} from '@fortawesome/fontawesome-svg-core'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 
 defineProps({
 	triggerIcon: {
-		type: String,
+		type: String as PropType<IconProp>,
 		default: 'ellipsis-h',
 	},
 })

src/components/misc/subscription.vue

@@ -44,6 +44,7 @@ import SubscriptionModel from '@/models/subscription'
 import type {ISubscription} from '@/modelTypes/ISubscription'
 
 import {success} from '@/message'
+import type { IconProp } from '@fortawesome/fontawesome-svg-core'
 
 const props = defineProps({
 	entity: String,
@@ -104,7 +105,7 @@ const tooltipText = computed(() => {
 })
 
 const buttonText = computed(() => props.modelValue ? t('task.subscription.unsubscribe') : t('task.subscription.subscribe'))
-const iconName = computed(() => props.modelValue ? ['far', 'bell-slash'] : 'bell')
+const iconName = computed<IconProp>(() => props.modelValue ? ['far', 'bell-slash'] : 'bell')
 const disabled = computed(() => props.modelValue && subscriptionEntity.value !== props.entity)
 
 function changeSubscription() {