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() {

src/types/global-components.d.ts

@@ -0,0 +1,21 @@
+// import FontAwesomeIcon from '@/components/misc/Icon'
+import type { FontAwesomeIcon as FontAwesomeIconFixedTypes } from './vue-fontawesome'
+import type XButton from '@/components/input/button.vue'
+import type Modal from '@/components/misc/modal.vue'
+import type Card from '@/components/misc/card.vue'
+
+// Here we define globally imported components
+// See:
+// https://github.com/johnsoncodehk/volar/blob/2ca8fd3434423c7bea1c8e08132df3b9ce84eea7/extensions/vscode-vue-language-features/README.md#usage
+// Under the hidden collapsible "Define Global Components"
+
+declare module '@vue/runtime-core' {
+	export interface GlobalComponents {
+		Icon: FontAwesomeIconFixedTypes
+		XButton: typeof XButton,
+		Modal: typeof Modal,
+		Card: typeof Card,
+	}
+}
+
+export {}

src/types/vue-fontawesome.ts

@@ -0,0 +1,40 @@
+// copied and slightly modified from unmerged pull request that corrects types
+// https://github.com/FortAwesome/vue-fontawesome/pull/355
+
+import type { FaSymbol, FlipProp, IconLookup, IconProp, PullProp, SizeProp, Transform } from '@fortawesome/fontawesome-svg-core'
+import type { DefineComponent } from 'vue'
+
+
+interface FontAwesomeIconProps {
+	border?: boolean
+	fixedWidth?: boolean
+	flip?: FlipProp
+	icon: IconProp
+	mask?: IconLookup
+	listItem?: boolean
+	pull?: PullProp
+	pulse?: boolean
+	rotation?: 90 | 180 | 270 | '90' | '180' | '270'
+	swapOpacity?: boolean
+	size?: SizeProp
+	spin?: boolean
+	transform?: Transform
+	symbol?: FaSymbol
+	title?: string | string[]
+	inverse?: boolean
+}
+
+interface FontAwesomeLayersProps {
+	fixedWidth?: boolean
+}
+
+interface FontAwesomeLayersTextProps {
+	value: string | number
+	transform?: object | string
+	counter?: boolean
+	position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'
+}
+
+export type FontAwesomeIcon = DefineComponent<FontAwesomeIconProps>
+export type FontAwesomeLayers = DefineComponent<FontAwesomeLayersProps>
+export type FontAwesomeLayersText = DefineComponent<FontAwesomeLayersTextProps>

tsconfig.app.json

@@ -1,6 +1,6 @@
 {
   "extends": "@vue/tsconfig/tsconfig.web.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "src/i18n/lang/*.json"],
+  "include": ["env.d.ts", "src/**/*.d.ts", "src/**/*", "src/**/*.vue", "src/i18n/lang/*.json"],
   "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
     "composite": true,