Merge branch 'fix/362' into feat/4.5

docs/content/2.get-started/1.guide/2.setup.md

@@ -60,7 +60,7 @@ export default defineNuxtPlugin((nuxtApp) => {
 
 ## Import required CSS
 
-vue-final-modal 4 has tiny size of required CSS (gzipped 0.49kb). All classes have a `.vfm-` prefix, so you don't have to worry about any CSS pollution. _[See style of `<VueFinalModal>`.](https://github.com/vue-final/vue-final-modal/blob/v4/packages/vue-final-modal/src/components/CoreModal/CoreModal.vue#L184-L217)_
+vue-final-modal 4 has tiny size of required CSS (gzipped 0.49kb). All classes have a `.vfm-` prefix, so you don't have to worry about any CSS pollution.
 
 ### Vue 3
 

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

@@ -25,24 +25,22 @@ describe('Test useZIndex()', () => {
         stubs: { transition: false },
       },
     }).as('app')
-    cy.get('@app').then(() => {
-      firstModal.open()
-    })
+
+    cy.get('@app').then(() => firstModal.open())
     cy.get('.first-modal').should(($el) => {
       expect($el).to.have.css('zIndex', '1000')
     })
-    cy.get('@app').then(() => {
-      secondModal.open()
-    })
+
+    cy.get('@app').then(() => secondModal.open())
     cy.get('.second-modal').should(($el) => {
       expect($el).to.have.css('zIndex', '1002')
     })
-    cy.get('@app').then(() => {
-      thirdModal.open()
-    })
+
+    cy.get('@app').then(() => thirdModal.open())
     cy.get('.third-modal').should(($el) => {
       expect($el).to.have.css('zIndex', '1004')
     })
+
     cy.get('@app').then(() => {
       thirdModal.patchOptions({
         attrs: {
@@ -53,9 +51,8 @@ describe('Test useZIndex()', () => {
     cy.get('.third-modal').should(($el) => {
       expect($el).to.have.css('zIndex', '1238')
     })
-    cy.get('@app').then(() => {
-      firstModal.close()
-    })
+
+    cy.get('@app').then(() => firstModal.close())
     cy.get('.second-modal').should(($el) => {
       expect($el).to.have.css('zIndex', '1000')
     })

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

@@ -1,4 +1,4 @@
-import type { App, CSSProperties, ComputedRef, FunctionalComponent, Raw, Ref } from 'vue'
+import type { App, CSSProperties, ComponentInternalInstance, FunctionalComponent, Raw, Ref } from 'vue'
 
 export type ModalId = number | string | symbol
 export type StyleValue = string | CSSProperties | (string | CSSProperties)[]
@@ -8,7 +8,7 @@ type Constructor<P = any> = {
   __isFragment?: never
   __isTeleport?: never
   __isSuspense?: never
-  new (...args: any[]): { $props: P }
+  new(...args: any[]): { $props: P }
 }
 
 export interface ModalSlotOptions { component: Raw<ComponentType>; attrs?: Record<string, any> }
@@ -52,32 +52,22 @@ export interface UseModalReturnType<T extends ComponentType> {
 
 export type Vfm = {
   install(app: App): void
-  modals: ComputedRef<Modal>[]
-  openedModals: ComputedRef<Modal>[]
-  openedModalOverlays: ComputedRef<Modal>[]
+  modals: ComponentInternalInstance[]
+  openedModals: ComponentInternalInstance[]
+  openedModalOverlays: ComponentInternalInstance[]
   dynamicModals: (UseModalOptions<any> & UseModalOptionsPrivate)[]
   modalsContainers: Ref<symbol[]>
-  get: (modalId: ModalId) => undefined | ComputedRef<Modal>
+  get: (modalId: ModalId) => undefined | ComponentInternalInstance
   toggle: (modalId: ModalId, show?: boolean) => undefined | Promise<string>
   open: (modalId: ModalId) => undefined | Promise<string>
   close: (modalId: ModalId) => undefined | Promise<string>
-  closeAll: () => Promise<[PromiseSettledResult<Promise<string>[]>]>
+  closeAll: () => Promise<PromiseSettledResult<string>[]>
 }
 
-export type InternalVfm = {
-  deleteFromModals: (modal: ComputedRef<Modal>) => void
-  moveToLastOpenedModals: (modal: ComputedRef<Modal>) => void
-  deleteFromOpenedModals: (modal: ComputedRef<Modal>) => void
-  moveToLastOpenedModalOverlays: (modal: ComputedRef<Modal>) => void
-  deleteFromOpenedModalOverlays: (modal: ComputedRef<Modal>) => void
-  openLastOverlay: () => Promise<void>
-  resolvedClosed: (index: number) => void
-  resolvedOpened: (index: number) => void
-}
-
-export type Modal = {
-  modalId?: ModalId
-  hideOverlay: Ref<boolean | undefined> | undefined
+export type ModalExposed = {
+  modalId?: Ref<undefined | ModalId>
+  hideOverlay?: Ref<undefined | boolean>
+  overlayBehavior: Ref<'auto' | 'persist'>
   overlayVisible: Ref<boolean>
   toggle: (show?: boolean) => Promise<string>
 }