feat: type global components and especially icon prop
This commit is contained in:
parent
599e28e5e5
commit
a2c1702eef
|
@ -70,6 +70,8 @@ import {
|
||||||
} from '@fortawesome/free-regular-svg-icons'
|
} from '@fortawesome/free-regular-svg-icons'
|
||||||
import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
|
import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
|
||||||
|
|
||||||
|
import type { FontAwesomeIcon as FontAwesomeIconFixedTypes } from '@/types/vue-fontawesome'
|
||||||
|
|
||||||
library.add(faAlignLeft)
|
library.add(faAlignLeft)
|
||||||
library.add(faAngleRight)
|
library.add(faAngleRight)
|
||||||
library.add(faArchive)
|
library.add(faArchive)
|
||||||
|
@ -136,4 +138,5 @@ library.add(faTrashAlt)
|
||||||
library.add(faUser)
|
library.add(faUser)
|
||||||
library.add(faUsers)
|
library.add(faUsers)
|
||||||
|
|
||||||
export default FontAwesomeIcon
|
// overwriting the wrong types
|
||||||
|
export default FontAwesomeIcon as unknown as FontAwesomeIconFixedTypes
|
|
@ -35,6 +35,9 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import type {PropType} from 'vue'
|
||||||
|
import type {IconProp} from '@fortawesome/fontawesome-svg-core'
|
||||||
|
|
||||||
import BaseButton from '@/components/base/BaseButton.vue'
|
import BaseButton from '@/components/base/BaseButton.vue'
|
||||||
|
|
||||||
defineProps({
|
defineProps({
|
||||||
|
@ -51,7 +54,7 @@ defineProps({
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
closeIcon: {
|
closeIcon: {
|
||||||
type: String,
|
type: String as PropType<IconProp>,
|
||||||
default: 'times',
|
default: 'times',
|
||||||
},
|
},
|
||||||
shadow: {
|
shadow: {
|
||||||
|
|
|
@ -46,6 +46,9 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import type {PropType} from 'vue'
|
||||||
|
import type {IconProp} from '@fortawesome/fontawesome-svg-core'
|
||||||
|
|
||||||
defineProps({
|
defineProps({
|
||||||
title: {
|
title: {
|
||||||
type: String,
|
type: String,
|
||||||
|
@ -55,7 +58,7 @@ defineProps({
|
||||||
type: String,
|
type: String,
|
||||||
},
|
},
|
||||||
primaryIcon: {
|
primaryIcon: {
|
||||||
type: String,
|
type: String as PropType<IconProp>,
|
||||||
default: 'plus',
|
default: 'plus',
|
||||||
},
|
},
|
||||||
primaryDisabled: {
|
primaryDisabled: {
|
||||||
|
|
|
@ -17,14 +17,15 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import {ref} from 'vue'
|
import {ref, type PropType} from 'vue'
|
||||||
import {onClickOutside} from '@vueuse/core'
|
import {onClickOutside} from '@vueuse/core'
|
||||||
|
import type {IconProp} from '@fortawesome/fontawesome-svg-core'
|
||||||
|
|
||||||
import BaseButton from '@/components/base/BaseButton.vue'
|
import BaseButton from '@/components/base/BaseButton.vue'
|
||||||
|
|
||||||
defineProps({
|
defineProps({
|
||||||
triggerIcon: {
|
triggerIcon: {
|
||||||
type: String,
|
type: String as PropType<IconProp>,
|
||||||
default: 'ellipsis-h',
|
default: 'ellipsis-h',
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
|
@ -44,6 +44,7 @@ import SubscriptionModel from '@/models/subscription'
|
||||||
import type {ISubscription} from '@/modelTypes/ISubscription'
|
import type {ISubscription} from '@/modelTypes/ISubscription'
|
||||||
|
|
||||||
import {success} from '@/message'
|
import {success} from '@/message'
|
||||||
|
import type { IconProp } from '@fortawesome/fontawesome-svg-core'
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
entity: String,
|
entity: String,
|
||||||
|
@ -104,7 +105,7 @@ const tooltipText = computed(() => {
|
||||||
})
|
})
|
||||||
|
|
||||||
const buttonText = computed(() => props.modelValue ? t('task.subscription.unsubscribe') : t('task.subscription.subscribe'))
|
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)
|
const disabled = computed(() => props.modelValue && subscriptionEntity.value !== props.entity)
|
||||||
|
|
||||||
function changeSubscription() {
|
function changeSubscription() {
|
||||||
|
|
21
src/types/global-components.d.ts
vendored
Normal file
21
src/types/global-components.d.ts
vendored
Normal file
|
@ -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 {}
|
40
src/types/vue-fontawesome.ts
Normal file
40
src/types/vue-fontawesome.ts
Normal file
|
@ -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>
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"extends": "@vue/tsconfig/tsconfig.web.json",
|
"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__/*"],
|
"exclude": ["src/**/__tests__/*"],
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"composite": true,
|
"composite": true,
|
||||||
|
|
Reference in New Issue
Block a user