refactor: extract useInternalExposed and cleanup useZIndex

Author: hunterliu1003

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

@@ -8,12 +8,6 @@ The exported types in VueFinalModal.
 export type ModalId = number | string | symbol
 ```
 
-## StyleValue
-
-```ts
-export type StyleValue = string | CSSProperties | (string | CSSProperties)[]
-```
-
 ## C2VOptions
 
 ```ts
@@ -32,7 +26,12 @@ export type C2VOptions<T extends Component> = {
 export type UseModalOptions<T extends Component> = {
   defaultModelValue?: boolean
   keepAlive?: boolean
-} & C2VOptions<T>
+  component?: T
+  attrs?: ComponentProps<T>
+  slots?: {
+    [K in keyof ComponentSlots<T>]?: string | Component | C2VOptions<Component>
+  }
+}
 ```
 
 ## UseModalOptionsPrivate
@@ -63,15 +62,27 @@ export interface UseModalReturnType<T extends Component> {
 ```ts
 export type Vfm = {
   install(app: App): void
-  modals: ComponentInternalInstance[]
-  openedModals: ComponentInternalInstance[]
-  openedModalOverlays: ComponentInternalInstance[]
-  dynamicModals: VNode[]
-  modalsContainers: Ref<symbol[]>
-  get: (modalId: ModalId) => undefined | ComponentInternalInstance
+  modals: ComputedRef<ModalExposed>[]
+  openedModals: ComputedRef<ModalExposed>[]
+  openedModalOverlays: ComputedRef<ModalExposed>[]
+  vNodesContainer: VNodesContainer
+  get: (modalId: ModalId) => undefined | ComputedRef<ModalExposed>
   toggle: (modalId: ModalId, show?: boolean) => undefined | Promise<string>
   open: (modalId: ModalId) => undefined | Promise<string>
   close: (modalId: ModalId) => undefined | Promise<string>
   closeAll: () => Promise<PromiseSettledResult<string>[]>
 }
 ```
+
+## ModalExposed
+
+```ts
+export type ModalExposed = {
+  modalId?: Ref<undefined | ModalId>
+  hideOverlay?: Ref<undefined | boolean>
+  overlayBehavior: Ref<'auto' | 'persist'>
+  overlayVisible: Ref<boolean>
+  toggle: (show?: boolean) => Promise<string>
+}
+
+```

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

@@ -1,4 +1,4 @@
-import type { App, CSSProperties, Component, ComponentInternalInstance, Ref } from 'vue'
+import type { App, CSSProperties, Component, ComputedRef, Ref } from 'vue'
 import type { ComponentProps, ComponentSlots } from './Component'
 import type { VNodesContainer } from './useVNodesContainer'
 
@@ -40,21 +40,21 @@ export interface UseModalReturnType<T extends Component> {
 
 export type Vfm = {
   install(app: App): void
-  modals: ComponentInternalInstance[]
-  openedModals: ComponentInternalInstance[]
-  openedModalOverlays: ComponentInternalInstance[]
+  modals: ComputedRef<ModalExposed>[]
+  openedModals: ComputedRef<ModalExposed>[]
+  openedModalOverlays: ComputedRef<ModalExposed>[]
   vNodesContainer: VNodesContainer
-  get: (modalId: ModalId) => undefined | ComponentInternalInstance
+  get: (modalId: ModalId) => undefined | ComputedRef<ModalExposed>
   toggle: (modalId: ModalId, show?: boolean) => undefined | Promise<string>
   open: (modalId: ModalId) => undefined | Promise<string>
   close: (modalId: ModalId) => undefined | Promise<string>
   closeAll: () => Promise<PromiseSettledResult<string>[]>
 }
 
 export type ModalExposed = {
-  modalId?: Ref<undefined | ModalId>
-  hideOverlay?: Ref<undefined | boolean>
-  overlayBehavior: Ref<'auto' | 'persist'>
+  modalId: Ref<undefined | ModalId>
+  hideOverlay: Ref<undefined | boolean>
+  overlayBehavior: Ref<undefined | 'auto' | 'persist'>
   overlayVisible: Ref<boolean>
   toggle: (show?: boolean) => Promise<string>
 }

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, getCurrentInstance, nextTick, onBeforeUnmount, onMounted, ref, toRef, useAttrs, watch } from 'vue'
+import { nextTick, onBeforeUnmount, onMounted, ref, useAttrs } from 'vue'
 import { vueFinalModalProps } from './VueFinalModalProps'
 import { useTransition } from './useTransition'
 import { useToClose } from './useToClose'
@@ -8,11 +8,10 @@ import { useFocusTrap } from './useFocusTrap'
 import { useScrollLock } from './useScrollLock'
 import { useZIndex } from './useZIndex'
 import { vVisible } from './vVisible'
-import { arrayMoveItemToLast, arrayRemoveItem, noop, once } from '~/utils'
-import { type ModalExposed } from '~/Modal'
+import { useInternalExposed } from './useInternalExposed'
+import { arrayMoveItemToLast, arrayRemoveItem } from '~/utils'
 import { useSwipeToClose } from '~/useSwipeToClose'
 import { useVfm } from '~/useVfm'
-import { getModalExposed } from '~/plugin'
 
 export interface VueFinalModalEmits {
   (e: 'update:modelValue', modelValue: boolean): void
@@ -35,8 +34,6 @@ const props = defineProps(vueFinalModalProps)
 const emit = defineEmits<VueFinalModalEmits>()
 const attrs = useAttrs()
 
-const instance = getCurrentInstance()
-
 defineSlots<{
   'default'?(props: { close: () => boolean }): void
   'swipe-banner'?(): void
@@ -48,15 +45,12 @@ const vfmRootEl = ref<HTMLDivElement>()
 const vfmContentEl = ref<HTMLDivElement>()
 
 const { focus, blur } = useFocusTrap(props, { focusEl: vfmRootEl })
-const { zIndex, refreshZIndex, resetZIndex } = useZIndex(props)
 const { modelValueLocal } = useModelValue(props, emit, { open, close })
 const { disablePageScroll, enablePageScroll } = useScrollLock(props, {
   lockScrollEl: vfmRootEl,
   modelValueLocal,
 })
 
-let resolveToggle: (res: string) => void = (noop)
-
 const {
   visible,
 
@@ -85,7 +79,7 @@ const {
     resolveToggle('opened')
   },
   onLeave() {
-    arrayRemoveItem(openedModals, instance)
+    arrayRemoveItem(openedModals, modalExposed)
     resetZIndex()
     enablePageScroll()
     emit('closed')
@@ -95,36 +89,33 @@ const {
   },
 })
 
+const { modalExposed, resolveToggle } = useInternalExposed(props, { modelValueLocal, overlayVisible })
+const { zIndex, resetZIndex } = useZIndex(props, { visible, modalExposed, openedModals })
 const { onEsc, onMouseupRoot, onMousedown } = useToClose(props, emit, { vfmRootEl, vfmContentEl, visible, modelValueLocal })
+const { swipeBannerEl, bindSwipe, onTouchStartSwipeBanner } = useSwipeToClose(props, { vfmContentEl, modelValueLocal })
 
-const {
-  swipeBannerEl,
-  bindSwipe,
-  onTouchStartSwipeBanner,
-} = useSwipeToClose(props, { vfmContentEl, modelValueLocal })
-
-const index = computed(() => instance ? openedModals.indexOf(instance) : -1)
-
-watch([() => props.zIndexFn, index], () => {
-  if (!visible.value)
-    return
-  refreshZIndex(index.value)
-})
+if (props.modelValue)
+  modelValueLocal.value = true
 
 onMounted(() => {
-  arrayMoveItemToLast(modals, instance)
+  arrayMoveItemToLast(modals, modalExposed)
 })
 
-if (props.modelValue)
-  modelValueLocal.value = true
+onBeforeUnmount(() => {
+  enablePageScroll()
+  arrayRemoveItem(modals, modalExposed)
+  arrayRemoveItem(openedModals, modalExposed)
+  blur()
+  openLastOverlay()
+})
 
 function open(): boolean {
   let shouldStop = false
   emit('beforeOpen', { stop: () => shouldStop = true })
   if (shouldStop)
     return false
-  arrayMoveItemToLast(openedModals, instance)
-  arrayMoveItemToLast(openedModalOverlays, instance)
+  arrayMoveItemToLast(openedModals, modalExposed)
+  arrayMoveItemToLast(openedModalOverlays, modalExposed)
   openLastOverlay()
   enterTransition()
   return true
@@ -135,58 +126,24 @@ function close(): boolean {
   emit('beforeClose', { stop: () => shouldStop = true })
   if (shouldStop)
     return false
-  arrayRemoveItem(openedModalOverlays, instance)
+  arrayRemoveItem(openedModalOverlays, modalExposed)
   openLastOverlay()
   blur()
   leaveTransition()
   return true
 }
 
-onBeforeUnmount(() => {
-  enablePageScroll()
-  arrayRemoveItem(modals, instance)
-  arrayRemoveItem(openedModals, instance)
-  blur()
-  openLastOverlay()
-})
-
 async function openLastOverlay() {
   await nextTick()
   // Found the modals which has overlay and has `auto` overlayBehavior
   const openedModalsOverlaysAuto = openedModalOverlays.filter((modal) => {
-    const modalExposed = getModalExposed(modal)
-    return modalExposed?.value.overlayBehavior.value === 'auto' && !modalExposed?.value.hideOverlay?.value
+    return modal.value.overlayBehavior.value === 'auto' && !modal.value.hideOverlay?.value
   })
   // Only keep the last overlay open
   openedModalsOverlaysAuto.forEach((modal, index) => {
-    const modalExposed = getModalExposed(modal)
-    if (!modalExposed?.value)
-      return
-    modalExposed.value.overlayVisible.value = index === openedModalsOverlaysAuto.length - 1
+    modal.value.overlayVisible.value = index === openedModalsOverlaysAuto.length - 1
   })
 }
-
-const modalId = toRef(() => props.modalId)
-const hideOverlay = toRef(() => props.hideOverlay)
-const overlayBehavior = toRef(() => props.overlayBehavior)
-const modalExposed = computed<ModalExposed>(() => ({
-  modalId,
-  hideOverlay,
-  overlayBehavior,
-  overlayVisible,
-  toggle(show?: boolean): Promise<string> {
-    return new Promise((resolve) => {
-      resolveToggle = once((res: string) => resolve(res))
-
-      const value = typeof show === 'boolean' ? show : !modelValueLocal.value
-      modelValueLocal.value = value
-    })
-  },
-}))
-
-defineExpose({
-  modalExposed,
-})
 </script>
 
 <script lang="ts">

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

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

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

@@ -0,0 +1,42 @@
+import type { Ref } from 'vue'
+import { computed, toRef } from 'vue'
+import type { ComponentProps, ModalExposed, VueFinalModal } from '~/index'
+import { noop, once } from '~/utils'
+
+export const useInternalExposed = function (
+  props: ComponentProps<typeof VueFinalModal>,
+  options: {
+    overlayVisible: Ref<boolean>
+    modelValueLocal: Ref<boolean>
+  },
+) {
+  const { overlayVisible, modelValueLocal } = options
+
+  const modalId = toRef(() => props.modalId)
+  const hideOverlay = toRef(() => props.hideOverlay)
+  const overlayBehavior = toRef(() => props.overlayBehavior)
+
+  let resolveToggle: (res: string) => void = noop
+
+  function toggle(show?: boolean): Promise<string> {
+    return new Promise((resolve) => {
+      resolveToggle = once((res: string) => resolve(res))
+
+      const value = typeof show === 'boolean' ? show : !modelValueLocal.value
+      modelValueLocal.value = value
+    })
+  }
+
+  const modalExposed = computed<ModalExposed>(() => ({
+    modalId,
+    hideOverlay,
+    overlayBehavior,
+    overlayVisible,
+    toggle,
+  }))
+
+  return {
+    resolveToggle,
+    modalExposed,
+  }
+}

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

@@ -1,10 +1,11 @@
 import { nextTick, ref, watch } from 'vue'
 import type { Ref } from 'vue'
 import type VueFinalModal from './VueFinalModal.vue'
+import type { ComponentEmit, ComponentProps } from '~/Component'
 
 export function useModelValue(
-  props: InstanceType<typeof VueFinalModal>['$props'],
-  emit: InstanceType<typeof VueFinalModal>['$emit'],
+  props: ComponentProps<typeof VueFinalModal>,
+  emit: ComponentEmit<typeof VueFinalModal>,
   options: {
     open: () => boolean
     close: () => boolean

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

@@ -3,8 +3,9 @@ import type { Ref } from 'vue'
 import { onBeforeUnmount, watch } from 'vue'
 import type VueFinalModal from './VueFinalModal.vue'
 import { noop, once } from '~/utils'
+import type { ComponentProps } from '~/Component'
 
-export function useScrollLock(props: InstanceType<typeof VueFinalModal>['$props'], options: {
+export function useScrollLock(props: ComponentProps<typeof VueFinalModal>, options: {
   lockScrollEl: Ref<undefined | HTMLElement>
   modelValueLocal: Ref<boolean>
 }) {

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

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

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

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