refactor: code cleanup

Author: hunterliu1003

packages/vue-final-modal/src/components/VueFinalModal/VueFinalModal.vue

@@ -53,40 +53,15 @@ const { disablePageScroll, enablePageScroll } = useScrollLock(props, {
 
 const {
   visible,
-
-  contentVisible,
-  contentListeners,
-  contentTransition,
-
-  overlayVisible,
-  overlayListeners,
-  overlayTransition,
-
-  enterTransition,
-  leaveTransition,
+  contentVisible, contentListeners, contentTransition,
+  overlayVisible, overlayListeners, overlayTransition,
+  enterTransition, leaveTransition,
 } = useTransition(props, {
   modelValueLocal,
-  onEntering() {
-    nextTick(() => {
-      disablePageScroll()
-      focus()
-    })
-  },
-  onEnter() {
-    emit('opened')
-    // eslint-disable-next-line vue/custom-event-name-casing
-    emit('_opened')
-    resolveToggle('opened')
-  },
-  onLeave() {
-    arrayRemoveItem(openedModals, modalExposed)
-    resetZIndex()
-    enablePageScroll()
-    emit('closed')
-    // eslint-disable-next-line vue/custom-event-name-casing
-    emit('_closed')
-    resolveToggle('closed')
-  },
+  onEntering,
+  onEnter,
+  onLeave,
+
 })
 
 const { modalExposed, resolveToggle } = useInternalExposed(props, { modelValueLocal, overlayVisible })
@@ -109,6 +84,29 @@ onBeforeUnmount(() => {
   openLastOverlay()
 })
 
+function onEntering() {
+  nextTick(() => {
+    disablePageScroll()
+    focus()
+  })
+}
+
+function onEnter() {
+  emit('opened')
+  // eslint-disable-next-line vue/custom-event-name-casing
+  emit('_opened')
+  resolveToggle('opened')
+}
+function onLeave() {
+  arrayRemoveItem(openedModals, modalExposed)
+  resetZIndex()
+  enablePageScroll()
+  emit('closed')
+  // eslint-disable-next-line vue/custom-event-name-casing
+  emit('_closed')
+  resolveToggle('closed')
+}
+
 function open(): boolean {
   let shouldStop = false
   emit('beforeOpen', { stop: () => shouldStop = true })

packages/vue-final-modal/src/components/VueFinalModal/VueFinalModalProps.ts

@@ -6,7 +6,7 @@ import type { ModalId, StyleValue } from '~/Modal'
  * @see [Microsoft/TypeScript#29729](https://github.com/Microsoft/TypeScript/issues/29729)
  */
 type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>)
-type VfmTransition = LiteralUnion<'vfm-fade' | 'vfm-slide-down' | 'vfm-slide-up' | 'vfm-slide-right' | 'vfm-slide-left'>
+export type VfmTransition = LiteralUnion<'vfm-fade' | 'vfm-slide-down' | 'vfm-slide-up' | 'vfm-slide-right' | 'vfm-slide-left'>
 
 export const vueFinalModalProps = {
   /**

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

@@ -1,6 +1,7 @@
-import type { ComputedRef, Ref, TransitionProps } from 'vue'
+import type { Ref, TransitionProps } from 'vue'
 import { computed, nextTick, ref, watch } from 'vue'
 import type VueFinalModal from './VueFinalModal.vue'
+import type { VfmTransition } from './VueFinalModalProps'
 import type { ComponentProps } from '~/Component'
 
 export enum TransitionState {
@@ -40,34 +41,15 @@ export function useTransition(
     onLeaving?: () => void
     onLeave?: () => void
   },
-): {
-    visible: Ref<boolean>
-    contentVisible: Ref<boolean>
-    contentListeners: TransitionListeners
-    contentTransition: ComputedRef<TransitionProps>
-    overlayVisible: Ref<boolean>
-    overlayListeners: TransitionListeners
-    overlayTransition: ComputedRef<TransitionProps>
-    enterTransition: () => void
-    leaveTransition: () => void
-  } {
+) {
   const { modelValueLocal, onEntering, onEnter, onLeaving, onLeave } = options
   const visible = ref(modelValueLocal.value)
 
   const [contentVisible, contentState, contentListeners] = useTransitionState(visible.value)
   const [overlayVisible, overlayState, overlayListeners] = useTransitionState(visible.value)
 
-  const contentTransition = computed<TransitionProps>(() => {
-    if (typeof props.contentTransition === 'string')
-      return { name: props.contentTransition, appear: true }
-    return { appear: true, ...props.contentTransition }
-  })
-
-  const overlayTransition = computed<TransitionProps>(() => {
-    if (typeof props.overlayTransition === 'string')
-      return { name: props.overlayTransition, appear: true }
-    return { appear: true, ...props.overlayTransition }
-  })
+  const contentTransition = computed<TransitionProps>(() => mergeTransition(props.contentTransition))
+  const overlayTransition = computed<TransitionProps>(() => mergeTransition(props.overlayTransition))
 
   const isReadyToBeDestroyed = computed(() =>
     (props.hideOverlay || overlayState.value === TransitionState.Leave)
@@ -127,3 +109,9 @@ export function useTransition(
     leaveTransition,
   }
 }
+
+function mergeTransition(transition?: VfmTransition | TransitionProps) {
+  if (typeof transition === 'string')
+    return { name: transition, appear: true }
+  return { appear: true, ...transition }
+}