fix: use ComponentProps, ComponentEmit to replace InstanceType

vue-final · Oct 30, 2023 · 67965a3 · 67965a3
1 parent 7bbb203
commit 67965a3
Show file tree

Hide file tree

Showing 9 changed files with 25 additions and 15 deletions.
diff --git a/packages/vue-final-modal/src/components/CoreModal/useBodyScrollLock.ts b/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>
 }) {

diff --git a/packages/vue-final-modal/src/components/CoreModal/useEvent.ts b/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':

diff --git a/packages/vue-final-modal/src/components/CoreModal/useFocusTrap.ts b/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>
   },

diff --git a/packages/vue-final-modal/src/components/CoreModal/useModelValue.ts b/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) => {

diff --git a/packages/vue-final-modal/src/components/CoreModal/useToClose.ts b/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>

diff --git a/packages/vue-final-modal/src/components/CoreModal/useTransition.ts b/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

diff --git a/packages/vue-final-modal/src/components/CoreModal/useZIndex.ts b/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>()
 

diff --git a/packages/vue-final-modal/src/useApi.ts b/packages/vue-final-modal/src/useApi.ts
@@ -1,6 +1,8 @@
 import { computed, inject, markRaw, nextTick, reactive, useAttrs } from 'vue'
 import { tryOnUnmounted } from '@vueuse/core'
 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'
@@ -9,7 +11,7 @@ import type { Constructor, InternalVfm, ModalSlot, ModalSlotOptions, RawProps, U
 import { activeVfm, getActiveVfm } from './plugin'
 import { isString } from '~/utils'
 
-type ComponentProps = ComponentPublicInstance['$props']
+type _ComponentProps = ComponentPublicInstance['$props']
 
 /**
  * Returns the vfm instance. Equivalent to using `$vfm` inside
@@ -65,7 +67,7 @@ function withMarkRaw<P>(options: Partial<UseModalOptions<P>>, DefaultComponent:
 /**
  * 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,
@@ -202,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 {
@@ -219,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

diff --git a/packages/vue-final-modal/src/useSwipeToClose.ts b/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>