Support Ref<T> in attrs props for better reactivity and type safety with Nuxt/Vue 3

[milospp]

Version

vue-final-modal: 4.5.5
vue: 3.5.12
nuxt: 3.14.159

OS

Mac Sequoia 15.5 (24F74)

Reproduction Link

Cannot reproduce in stackblitz (doesn't see types from lib)

Steps to reproduce

LoadingComponent.vue

const props = defineProps<{
    loading: boolean;
}>();

Button.vue

const reactiveLoading = ref(false)
const { open: openModal, close: closeModal } = useModal({
    component: LoadingComponent,
    attrs: {
        loading: reactiveLoading,
    },
})

Type 'Ref<boolean, boolean>' is not assignable to type 'boolean'.ts-plugin(2322)
(property) loading: globalThis.Ref<boolean, boolean>

What is Expected?

It should accept both T and Ref, the code works, there is only type safety issue

What is actually happening?

ComponentProps should be updated

export type ComponentProps<T> = T extends new () => {
    $props: infer P;
} ? NonNullable<P> : T extends (props: infer P, ...args: any) => any ? P : {};

Updated version to make props accept both T or Ref

type MaybeRefProps<P> = {
    [K in keyof P]: Ref<P[K]> | P[K];
}

export type ComponentProps<T> = T extends new () => {
    $props: infer P;
} ? MaybeRefProps<NonNullable<P>> : T extends (props: infer P, ...args: any) => any ? P : {};