From a2c1702eef64dd779c86940898bd49fc2c96233f Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Mon, 17 Oct 2022 13:22:10 +0200
Subject: [PATCH] feat: type global components and especially icon prop

---
 src/components/misc/Icon.ts          |  5 +++-
 src/components/misc/card.vue         |  5 +++-
 src/components/misc/create-edit.vue  |  5 +++-
 src/components/misc/dropdown.vue     |  5 ++--
 src/components/misc/subscription.vue |  3 ++-
 src/types/global-components.d.ts     | 21 +++++++++++++++
 src/types/vue-fontawesome.ts         | 40 ++++++++++++++++++++++++++++
 tsconfig.app.json                    |  2 +-
 8 files changed, 79 insertions(+), 7 deletions(-)
 create mode 100644 src/types/global-components.d.ts
 create mode 100644 src/types/vue-fontawesome.ts

diff --git a/src/components/misc/Icon.ts b/src/components/misc/Icon.ts
index be5ef27eb..b1ce58ee4 100644
--- a/src/components/misc/Icon.ts
+++ b/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
\ No newline at end of file
+// overwriting the wrong types
+export default FontAwesomeIcon as unknown as FontAwesomeIconFixedTypes
\ No newline at end of file
diff --git a/src/components/misc/card.vue b/src/components/misc/card.vue
index 7ca3a3df7..0d96916d3 100644
--- a/src/components/misc/card.vue
+++ b/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: {
diff --git a/src/components/misc/create-edit.vue b/src/components/misc/create-edit.vue
index 1e07fe42e..3b69716c4 100644
--- a/src/components/misc/create-edit.vue
+++ b/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: {
diff --git a/src/components/misc/dropdown.vue b/src/components/misc/dropdown.vue
index 438bdc018..f44465de6 100644
--- a/src/components/misc/dropdown.vue
+++ b/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',
 	},
 })
diff --git a/src/components/misc/subscription.vue b/src/components/misc/subscription.vue
index ccfa358f4..50f1f0719 100644
--- a/src/components/misc/subscription.vue
+++ b/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() {
diff --git a/src/types/global-components.d.ts b/src/types/global-components.d.ts
new file mode 100644
index 000000000..54dd2861f
--- /dev/null
+++ b/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 {}
diff --git a/src/types/vue-fontawesome.ts b/src/types/vue-fontawesome.ts
new file mode 100644
index 000000000..44c73340c
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 6ee6a26b2..67aa6abf7 100644
--- a/tsconfig.app.json
+++ b/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,