From 1e08e914f99e896cef429db7552b1be993a65d93 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Sun, 26 Jan 2025 18:26:29 +0100
Subject: [PATCH] fix: button and icon types

`defineProps` somehow collided with the `IconProp` type of fontawesome:

> Expression produces a union type that is too complex to represent.

By using the original type the FontAwesome component types work again. Sadly autocompletion of the icon names doesn't work anymore (since the lib itself types it only as string), but I think because of that union problem that was already broken before.
---
 frontend/src/components/base/BaseButton.vue   | 12 +++---
 frontend/src/components/input/Button.vue      | 26 ++++++------
 frontend/src/components/misc/Card.vue         |  4 +-
 frontend/src/components/misc/CreateEdit.vue   |  4 +-
 frontend/src/components/misc/Dropdown.vue     |  4 +-
 frontend/src/components/misc/DropdownItem.vue |  6 +--
 frontend/src/components/misc/Icon.ts          |  5 +--
 frontend/src/components/misc/Subscription.vue |  4 +-
 frontend/src/types/global-components.d.ts     |  7 ++--
 frontend/src/types/vue-fontawesome.ts         | 40 -------------------
 10 files changed, 36 insertions(+), 76 deletions(-)
 delete mode 100644 frontend/src/types/vue-fontawesome.ts

diff --git a/frontend/src/components/base/BaseButton.vue b/frontend/src/components/base/BaseButton.vue
index 94e13bfa8..2c9c3bad4 100644
--- a/frontend/src/components/base/BaseButton.vue
+++ b/frontend/src/components/base/BaseButton.vue
@@ -43,7 +43,7 @@
 </template>
 
 <script lang="ts">
-const BASE_BUTTON_TYPES_MAP = {
+export const BASE_BUTTON_TYPES_MAP = {
 	BUTTON: 'button',
 	SUBMIT: 'submit',
 } as const
@@ -58,16 +58,16 @@ export type BaseButtonTypes = typeof BASE_BUTTON_TYPES_MAP[keyof typeof BASE_BUT
 
 // the component tries to heuristically determine what it should be checking the props 
 
-// NOTE: Do NOT use buttons with @click to push routes. => Use router-links instead!
+// NOTE: Do NOT use buttons with @click to push routes. => Define the `to` prop instead to use router-links instead!
 
 import {unrefElement} from '@vueuse/core'
-import {ref, type HTMLAttributes} from 'vue'
-import type {RouteLocationRaw} from 'vue-router'
+import {ref} from 'vue'
+import type {RouterLinkProps} from 'vue-router'
 
-export interface BaseButtonProps extends /* @vue-ignore */ HTMLAttributes {
+export interface BaseButtonProps {
 	type?: BaseButtonTypes
 	disabled?: boolean
-	to?: RouteLocationRaw
+	to?: RouterLinkProps['to']
 	href?: string
 	openExternalInNewTab?: boolean
 }
diff --git a/frontend/src/components/input/Button.vue b/frontend/src/components/input/Button.vue
index b5a697d0d..36afde7cb 100644
--- a/frontend/src/components/input/Button.vue
+++ b/frontend/src/components/input/Button.vue
@@ -33,16 +33,24 @@
 	</BaseButton>
 </template>
 
+<script lang="ts">
+export const VARIANT_CLASS_MAP = {
+	primary: 'is-primary',
+	secondary: 'is-outlined',
+	tertiary: 'is-text is-inverted underline-none',
+} as const
+
+export type ButtonTypes = keyof typeof VARIANT_CLASS_MAP | undefined
+</script>
+
 <script setup lang="ts">
 import {computed} from 'vue'
-import BaseButton, {type BaseButtonProps} from '@/components/base/BaseButton.vue'
-import type {IconProp} from '@fortawesome/fontawesome-svg-core'
+import BaseButton, { type BaseButtonProps } from '@/components/base/BaseButton.vue'
+import type {FontAwesomeIconProps} from '@fortawesome/vue-fontawesome'
 
-export type ButtonTypes = keyof typeof VARIANT_CLASS_MAP
-
-export interface ButtonProps extends /* @vue-ignore */ BaseButtonProps {
+export interface ButtonProps extends BaseButtonProps {
 	variant?: ButtonTypes
-	icon?: IconProp
+	icon?: FontAwesomeIconProps['icon']
 	iconColor?: string
 	loading?: boolean
 	disabled?: boolean
@@ -62,12 +70,6 @@ const props = withDefaults(defineProps<ButtonProps>(), {
 
 defineOptions({name: 'XButton'})
 
-const VARIANT_CLASS_MAP = {
-	primary: 'is-primary',
-	secondary: 'is-outlined',
-	tertiary: 'is-text is-inverted underline-none',
-} as const
-
 const variantClass = computed(() => VARIANT_CLASS_MAP[props.variant])
 </script>
 
diff --git a/frontend/src/components/misc/Card.vue b/frontend/src/components/misc/Card.vue
index ca7c40ee9..4287426db 100644
--- a/frontend/src/components/misc/Card.vue
+++ b/frontend/src/components/misc/Card.vue
@@ -44,14 +44,14 @@
 </template>
 
 <script setup lang="ts">
-import type {IconProp} from '@fortawesome/fontawesome-svg-core'
+import type {FontAwesomeIconProps} from '@fortawesome/vue-fontawesome'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 
 withDefaults(defineProps<{
 	title?: string
 	padding?: boolean
-	closeIcon?: IconProp
+	closeIcon?: FontAwesomeIconProps['icon']
 	shadow?: boolean
 	hasContent?: boolean
 	loading?: boolean
diff --git a/frontend/src/components/misc/CreateEdit.vue b/frontend/src/components/misc/CreateEdit.vue
index f83b180a8..482c73b39 100644
--- a/frontend/src/components/misc/CreateEdit.vue
+++ b/frontend/src/components/misc/CreateEdit.vue
@@ -49,12 +49,12 @@
 </template>
 
 <script setup lang="ts">
-import type {IconProp} from '@fortawesome/fontawesome-svg-core'
+import type {FontAwesomeIconProps} from '@fortawesome/vue-fontawesome'
 
 withDefaults(defineProps<{
 	title: string,
 	primaryLabel?: string,
-	primaryIcon?: IconProp,
+	primaryIcon?: FontAwesomeIconProps['icon'],
 	primaryDisabled?: boolean,
 	hasPrimaryAction?: boolean,
 	tertiary?: string,
diff --git a/frontend/src/components/misc/Dropdown.vue b/frontend/src/components/misc/Dropdown.vue
index 07c5a9f04..5efe65193 100644
--- a/frontend/src/components/misc/Dropdown.vue
+++ b/frontend/src/components/misc/Dropdown.vue
@@ -39,13 +39,13 @@
 <script setup lang="ts">
 import {ref} from 'vue'
 import {onClickOutside} from '@vueuse/core'
-import type {IconProp} from '@fortawesome/fontawesome-svg-core'
+import type {FontAwesomeIconProps} from '@fortawesome/vue-fontawesome'
 
 import CustomTransition from '@/components/misc/CustomTransition.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 
 withDefaults(defineProps<{
-	triggerIcon?: IconProp
+	triggerIcon?: FontAwesomeIconProps['icon']
 }>(), {
 	triggerIcon: 'ellipsis-h',
 })
diff --git a/frontend/src/components/misc/DropdownItem.vue b/frontend/src/components/misc/DropdownItem.vue
index 1affd68e1..2dc44ac71 100644
--- a/frontend/src/components/misc/DropdownItem.vue
+++ b/frontend/src/components/misc/DropdownItem.vue
@@ -20,10 +20,10 @@
 <script lang="ts" setup>
 import BaseButton, {type BaseButtonProps} from '@/components/base//BaseButton.vue'
 import Icon from '@/components/misc/Icon'
-import type {IconProp} from '@fortawesome/fontawesome-svg-core'
+import type {FontAwesomeIconProps} from '@fortawesome/vue-fontawesome'
 
-export interface DropDownItemProps extends /* @vue-ignore */ BaseButtonProps {
-	icon?: IconProp,
+export interface DropDownItemProps extends BaseButtonProps {
+	icon?: FontAwesomeIconProps['icon'],
 	iconClass?: object | string,
 	disabled?: boolean,
 }
diff --git a/frontend/src/components/misc/Icon.ts b/frontend/src/components/misc/Icon.ts
index ebd9ce7cd..071e97f8e 100644
--- a/frontend/src/components/misc/Icon.ts
+++ b/frontend/src/components/misc/Icon.ts
@@ -94,8 +94,6 @@ import {
 } from '@fortawesome/free-regular-svg-icons'
 import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
 
-import type {FontAwesomeIcon as FontAwesomeIconFixedTypes} from '@/types/vue-fontawesome'
-
 library.add(faBold)
 library.add(faUndo)
 library.add(faRedo)
@@ -195,4 +193,5 @@ library.add(faUnderline)
 library.add(faFaceLaugh)
 
 // overwriting the wrong types
-export default FontAwesomeIcon as unknown as FontAwesomeIconFixedTypes
\ No newline at end of file
+// export default FontAwesomeIcon as unknown as FontAwesomeIconFixedTypes
+export default FontAwesomeIcon
diff --git a/frontend/src/components/misc/Subscription.vue b/frontend/src/components/misc/Subscription.vue
index 503385fb1..c73fc054b 100644
--- a/frontend/src/components/misc/Subscription.vue
+++ b/frontend/src/components/misc/Subscription.vue
@@ -44,7 +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'
+import type {FontAwesomeIconProps} from '@fortawesome/vue-fontawesome'
 
 const props = withDefaults(defineProps<{
 	modelValue: ISubscription | null,
@@ -92,7 +92,7 @@ const tooltipText = computed(() => {
 })
 
 const buttonText = computed(() => props.modelValue ? t('task.subscription.unsubscribe') : t('task.subscription.subscribe'))
-const iconName = computed<IconProp>(() => props.modelValue ? ['far', 'bell-slash'] : 'bell')
+const iconName = computed<FontAwesomeIconProps['icon']>(() => props.modelValue ? ['far', 'bell-slash'] : 'bell')
 const disabled = computed(() => props.modelValue && subscriptionEntity.value !== props.entity || false)
 
 function changeSubscription() {
diff --git a/frontend/src/types/global-components.d.ts b/frontend/src/types/global-components.d.ts
index cfc2d8727..7fbc00dc3 100644
--- a/frontend/src/types/global-components.d.ts
+++ b/frontend/src/types/global-components.d.ts
@@ -1,7 +1,6 @@
 import type { FunctionalComponent } from 'vue'
 import type { Notifications } from '@kyvg/vue3-notification'
-// import FontAwesomeIcon from '@/components/misc/Icon'
-import type { FontAwesomeIcon as FontAwesomeIconFixedTypes } from './vue-fontawesome'
+import type FontAwesomeIcon from '@/components/misc/Icon'
 import type XButton from '@/components/input/Button.vue'
 import type Modal from '@/components/misc/Modal.vue'
 import type Card from '@/components/misc/Card.vue'
@@ -10,8 +9,8 @@ import type Card from '@/components/misc/Card.vue'
 // See: https://github.com/vuejs/language-tools/wiki/Global-Component-Types
 declare module 'vue' {
 	export interface GlobalComponents {
-		Icon: FontAwesomeIconFixedTypes
-		Notifications: FunctionalComponent<Notifications>
+		Icon: typeof FontAwesomeIcon
+		Toaster: FunctionalComponent<Notifications>
 		XButton: typeof XButton,
 		Modal: typeof Modal,
 		Card: typeof Card,
diff --git a/frontend/src/types/vue-fontawesome.ts b/frontend/src/types/vue-fontawesome.ts
deleted file mode 100644
index 44c73340c..000000000
--- a/frontend/src/types/vue-fontawesome.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-// 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