Fix/type of generic component

docs/content/2.get-started/1.guide/4.types.md

@@ -2,12 +2,6 @@
 
 The exported types in VueFinalModal.
 
-## ComponentProps
-
-```ts
-export type ComponentProps = ComponentPublicInstance['$props']
-```
-
 ## ModalId
 
 ```ts
@@ -33,8 +27,8 @@ export type ModalSlot = string | Component | ModalSlotOptions
 export type UseModalOptions<P> = {
   defaultModelValue?: boolean
   keepAlive?: boolean
-  component?: Constructor<P>
-  attrs?: (RawProps & P) | ({} extends P ? null : never)
+  component?: Component<P>
+  attrs?: ComponentProps<Component<P>>
   slots?: {
     [key: string]: ModalSlot
   }

examples/vue3/package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.3.4",
+    "vue": "^3.3.7",
     "vue-final-modal": "^4.4.5"
   },
   "devDependencies": {

package.json

@@ -18,7 +18,7 @@
     "postinstall": "pnpm build:vfm && pnpm prepare:module"
   },
   "dependencies": {
-    "vue": "^3.3.4"
+    "vue": "^3.3.7"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.37.0",
@@ -27,7 +27,7 @@
     "@vue/test-utils": "^2.3.2",
     "concurrently": "^7.6.0",
     "eslint": "^8.36.0",
-    "pnpm": "^8.5.1",
+    "pnpm": "^8.10.0",
     "sass": "^1.60.0",
     "typescript": "^5.1.6",
     "vite": "^4.3.9",

packages/vue-final-modal/cypress/components/GenericComp.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts" generic="T extends string">
+defineProps<{
+  title: T
+}>()
+</script>
+
+<template>
+  <div>{{ title }}</div>
+</template>

packages/vue-final-modal/cypress/components/focusTrap.spec.ts

@@ -8,7 +8,7 @@ describe('Test focusTrap', () => {
 
     const firstModal = useModal({
       component: VueFinalModal,
-      attrs: { contentClass: 'first-modal-content' },
+      attrs: { background: 'this should have type error', contentClass: 'first-modal-content' },
       slots: {
         default: Form,
       },

packages/vue-final-modal/package.json

@@ -32,7 +32,8 @@
     "@vueuse/core": "^9.13.0",
     "@vueuse/integrations": "^9.13.0",
     "focus-trap": "^7.4.0",
-    "vue": "^3.3.4"
+    "vue": "^3.3.7",
+    "vue-component-type-helpers": "^1.8.22"
   },
   "devDependencies": {
     "@cypress/vue": "^5.0.5",

packages/vue-final-modal/src/Modal.ts

@@ -1,32 +1,17 @@
-import type { App, CSSProperties, Component, ComponentPublicInstance, ComputedRef, Raw, Ref, VNodeProps } from 'vue'
-
-export type ComponentProps = ComponentPublicInstance['$props']
+import type { App, CSSProperties, Component, ComputedRef, Raw, Ref } from 'vue'
+import type { ComponentProps } from 'vue-component-type-helpers'
 
 export type ModalId = number | string | symbol
 export type StyleValue = string | CSSProperties | (string | CSSProperties)[]
 
-export interface Constructor<P = any> {
-  __isFragment?: never
-  __isTeleport?: never
-  __isSuspense?: never
-  new (...args: any[]): { $props: P }
-}
-
-export type RawProps = VNodeProps & {
-  // used to differ from a single VNode object as children
-  __v_isVNode?: never
-  // used to differ from Array children
-  [Symbol.iterator]?: never
-} & Record<string, any>
-
 export interface ModalSlotOptions { component: Raw<Component>; attrs?: Record<string, any> }
 export type ModalSlot = string | Component | ModalSlotOptions
 
 export type UseModalOptions<P> = {
   defaultModelValue?: boolean
   keepAlive?: boolean
-  component?: Constructor<P>
-  attrs?: (RawProps & P) | ({} extends P ? null : never)
+  component?: Component<P>
+  attrs?: ComponentProps<Component<P>>
   slots?: {
     [key: string]: ModalSlot
   }

packages/vue-final-modal/src/components/CoreModal/useBodyScrollLock.ts

@@ -1,5 +1,6 @@
 import type { Ref } from 'vue'
 import { onBeforeUnmount, watch } from 'vue'
+import type { ComponentProps } from 'vue-component-type-helpers'
 import type CoreModal from './CoreModal.vue'
 
 type BodyScrollOptions = {
@@ -233,7 +234,7 @@ export const enableBodyScroll = (targetElement?: HTMLElement) => {
   }
 }
 
-export function useLockScroll(props: InstanceType<typeof CoreModal>['$props'], options: {
+export function useLockScroll(props: ComponentProps<typeof CoreModal>, options: {
   lockScrollEl: Ref<undefined | HTMLElement>
   modelValueLocal: Ref<boolean>
 }) {

packages/vue-final-modal/src/components/CoreModal/useEvent.ts

@@ -1,8 +1,9 @@
+import type { ComponentEmit } from 'vue-component-type-helpers'
 import type CoreModal from './CoreModal.vue'
 
 type Event = 'beforeOpen' | 'beforeClose' | 'opened' | 'closed'
 
-export function useEvent(emit: InstanceType<typeof CoreModal>['$emit']) {
+export function useEvent(emit: ComponentEmit<typeof CoreModal>) {
   function emitEvent(e: Event) {
     switch (e) {
       case 'beforeOpen':

packages/vue-final-modal/src/components/CoreModal/useFocusTrap.ts

@@ -1,9 +1,10 @@
 import type { Ref } from 'vue'
 import { useFocusTrap as _useFocusTrap } from '@vueuse/integrations/useFocusTrap'
+import type { ComponentProps } from 'vue-component-type-helpers'
 import type CoreModal from './CoreModal.vue'
 
 export function useFocusTrap(
-  props: InstanceType<typeof CoreModal>['$props'],
+  props: ComponentProps<typeof CoreModal>,
   options: {
     focusEl: Ref<undefined | HTMLDivElement>
   },

packages/vue-final-modal/src/components/CoreModal/useModelValue.ts

@@ -1,10 +1,11 @@
 import type { Ref } from 'vue'
 import { ref, watch } from 'vue'
+import type { ComponentEmit, ComponentProps } from 'vue-component-type-helpers'
 import type CoreModal from './CoreModal.vue'
 
 export function useModelValue(
-  props: InstanceType<typeof CoreModal>['$props'],
-  emit: InstanceType<typeof CoreModal>['$emit'],
+  props: ComponentProps<typeof CoreModal>,
+  emit: ComponentEmit<typeof CoreModal>,
 ): { modelValueLocal: Ref<boolean> } {
   const modelValueLocal = ref<boolean>(!!props.modelValue)
   watch(() => props.modelValue, (val) => {

packages/vue-final-modal/src/components/CoreModal/useToClose.ts

@@ -1,10 +1,11 @@
 import type { Ref } from 'vue'
 import { ref } from 'vue'
+import type { ComponentEmit, ComponentProps } from 'vue-component-type-helpers'
 import type CoreModal from './CoreModal.vue'
 
 export function useToClose(
-  props: InstanceType<typeof CoreModal>['$props'],
-  emit: InstanceType<typeof CoreModal>['$emit'],
+  props: ComponentProps<typeof CoreModal>,
+  emit: ComponentEmit<typeof CoreModal>,
   options: {
     vfmRootEl: Ref<HTMLDivElement | undefined>
     vfmContentEl: Ref<HTMLDivElement | undefined>

packages/vue-final-modal/src/components/CoreModal/useTransition.ts

@@ -1,4 +1,5 @@
 import type { ComputedRef, Ref, TransitionProps } from 'vue'
+import type { ComponentProps } from 'vue-component-type-helpers'
 import { computed, nextTick, ref, watch } from 'vue'
 import type CoreModal from './CoreModal.vue'
 
@@ -31,7 +32,7 @@ function useTransitionState(_visible = false): [Ref<boolean>, Ref<undefined | Tr
 }
 
 export function useTransition(
-  props: InstanceType<typeof CoreModal>['$props'],
+  props: ComponentProps<typeof CoreModal>,
   options: {
     modelValueLocal: Ref<boolean>
     onEntering?: () => void

packages/vue-final-modal/src/components/CoreModal/useZIndex.ts

@@ -1,8 +1,9 @@
 import { ref } from 'vue'
+import type { ComponentProps } from 'vue-component-type-helpers'
 import type CoreModal from './CoreModal.vue'
 
 export function useZIndex(
-  props: InstanceType<typeof CoreModal>['$props'],
+  props: ComponentProps<typeof CoreModal>,
 ) {
   const zIndex = ref<undefined | number>()
 

packages/vue-final-modal/src/useApi.ts

@@ -1,14 +1,18 @@
 import { computed, inject, markRaw, nextTick, reactive, useAttrs } from 'vue'
 import { tryOnUnmounted } from '@vueuse/core'
-import type { Component } from 'vue'
+import type { Component, ComponentPublicInstance } from 'vue'
+import type { ComponentEmit, ComponentProps } from 'vue-component-type-helpers'
+
 import VueFinalModal from './components/VueFinalModal/VueFinalModal.vue'
 import type CoreModal from './components/CoreModal/CoreModal.vue'
 import { internalVfmSymbol } from './injectionSymbols'
 
-import type { ComponentProps, Constructor, InternalVfm, ModalSlot, ModalSlotOptions, RawProps, UseModalOptions, UseModalOptionsPrivate, UseModalReturnType, Vfm } from './Modal'
+import type { InternalVfm, ModalSlot, ModalSlotOptions, UseModalOptions, UseModalOptionsPrivate, UseModalReturnType, Vfm } from './Modal'
 import { activeVfm, getActiveVfm } from './plugin'
 import { isString } from '~/utils'
 
+type _ComponentProps = ComponentPublicInstance['$props']
+
 /**
  * Returns the vfm instance. Equivalent to using `$vfm` inside
  * templates.
@@ -55,15 +59,15 @@ function withMarkRaw<P>(options: Partial<UseModalOptions<P>>, DefaultComponent:
 
   return {
     ...rest,
-    component: markRaw(component || DefaultComponent) as Constructor<P>,
+    component: markRaw(component || DefaultComponent) as Component<P>,
     slots,
   }
 }
 
 /**
  * Create a dynamic modal.
  */
-export function useModal<P = InstanceType<typeof VueFinalModal>['$props']>(_options: UseModalOptions<P>): UseModalReturnType<P> {
+export function useModal<P = ComponentProps<typeof VueFinalModal>>(_options: UseModalOptions<P>): UseModalReturnType<P> {
   const options = reactive({
     id: Symbol('useModal'),
     modelValue: !!_options?.defaultModelValue,
@@ -183,8 +187,8 @@ export function useModal<P = InstanceType<typeof VueFinalModal>['$props']>(_opti
 }
 
 export function useModalSlot<P>(options: {
-  component: Constructor<P>
-  attrs?: (RawProps & P) | ({} extends P ? null : never)
+  component: Component<P>
+  attrs?: ComponentProps<Component<P>>
 }) {
   return options
 }
@@ -200,7 +204,7 @@ export function pickModalProps(props: any, modalProps: any) {
   }, {} as Record<string, any>)
 }
 
-export function byPassAllModalEvents(emit?: InstanceType<typeof CoreModal>['$emit']) {
+export function byPassAllModalEvents(emit?: ComponentEmit<typeof CoreModal>) {
   if (!emit)
     return {}
   return {
@@ -217,8 +221,8 @@ export function byPassAllModalEvents(emit?: InstanceType<typeof CoreModal>['$emi
 }
 
 export function useVfmAttrs(options: {
-  props: ComponentProps
-  modalProps: ComponentProps
+  props: _ComponentProps
+  modalProps: _ComponentProps
   emit?: any
 }) {
   const { props, modalProps, emit } = options

packages/vue-final-modal/src/useSwipeToClose.ts

@@ -1,12 +1,13 @@
 import { useEventListener } from '@vueuse/core'
 import type { Ref } from 'vue'
 import { computed, ref, watch } from 'vue'
+import type { ComponentProps } from 'vue-component-type-helpers'
 import type CoreModal from './components/CoreModal/CoreModal.vue'
 import { useSwipeable } from './useSwipeable'
 import { clamp, noop } from './utils'
 
 export function useSwipeToClose(
-  props: InstanceType<typeof CoreModal>['$props'],
+  props: ComponentProps<typeof CoreModal>,
   options: {
     vfmContentEl: Ref<HTMLDivElement | undefined>
     modelValueLocal: Ref<boolean>