V5

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

@@ -8,37 +8,36 @@ The exported types in VueFinalModal.
 export type ModalId = number | string | symbol
 ```
 
-## StyleValue
+## Template
 
 ```ts
-export type StyleValue = string | CSSProperties | (string | CSSProperties)[]
-```
-
-## ModalSlot
-
-```ts
-export interface ModalSlotOptions { component: Raw<ComponentType>; attrs?: Record<string, any> }
-export type ModalSlot = string | ComponentType | ModalSlotOptions
+export type Template<T extends Component> = {
+  component: T
+  attrs?: ComponentProps<T>
+  slots?: {
+    [K in keyof ComponentSlots<T>]?: string | Component | Template<Component>
+  }
+}
 ```
 
-## UseModalOptions
+## UseModalTemplate
 
 ```ts
-export type UseModalOptions<T extends ComponentType> = {
+export type UseModalTemplate<T extends Component> = {
   defaultModelValue?: boolean
   keepAlive?: boolean
   component?: T
   attrs?: ComponentProps<T>
   slots?: {
-    [key: string]: ModalSlot
+    [K in keyof ComponentSlots<T>]?: string | Component | Template<Component>
   }
 }
 ```
 
-## UseModalOptionsPrivate
+## UseModalTemplatePrivate
 
 ```ts
-export type UseModalOptionsPrivate = {
+export type UseModalTemplatePrivate = {
   id: symbol
   modelValue: boolean
   resolveOpened: () => void
@@ -49,11 +48,11 @@ export type UseModalOptionsPrivate = {
 ## UseModalReturnType
 
 ```ts
-export interface UseModalReturnType<T extends ComponentType> {
-  options: UseModalOptions<T> & UseModalOptionsPrivate
+export interface UseModalReturnType<T extends Component> {
+  template: UseModalTemplate<T> & UseModalTemplatePrivate
   open: () => Promise<string>
   close: () => Promise<string>
-  patchOptions: (options: Partial<UseModalOptions<T>>) => void
+  patchTemplate: (template: Partial<UseModalTemplate<T>>) => void
   destroy: () => void
 }
 ```
@@ -63,26 +62,46 @@ export interface UseModalReturnType<T extends ComponentType> {
 ```ts
 export type Vfm = {
   install(app: App): void
-  modals: ComputedRef<Modal>[]
-  openedModals: ComputedRef<Modal>[]
-  openedModalOverlays: ComputedRef<Modal>[]
-  dynamicModals: (UseModalOptions<any> & UseModalOptionsPrivate)[]
-  modalsContainers: Ref<symbol[]>
-  get: (modalId: ModalId) => undefined | ComputedRef<Modal>
+  modals: ComputedRef<ModalExposed>[]
+  openedModals: ComputedRef<ModalExposed>[]
+  openedModalOverlays: ComputedRef<ModalExposed>[]
+  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<Promise<string>[]>]>
-}
+  closeAll: () => Promise<PromiseSettledResult<string>[]>
+} & Partial<CreateContainer>
 ```
 
-## Modal
+## ModalExposed
 
 ```ts
-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>
 }
 ```
+
+## CreateContainer
+
+```ts
+export type CreateContainer = {
+  Container: Component
+  useTemplate: UseTemplate
+}
+```
+
+## UseTemplate
+
+```ts
+export type UseTemplate = <T extends Component>(
+  template: Template<T>,
+  options?: { onUnmounted?: (() => void) }
+) => {
+  show: () => Promise<void>
+  hide: () => Promise<void>
+}
+```

docs/content/3.api/2.composables/1.use-modal.md

@@ -115,15 +115,15 @@ const modalInstance = useModal({
 #### with `Component`, `Props` and `Events`
 
 ```ts
-import { VueFinalModal, useModal, useModalSlot } from 'vue-final-modal'
+import { VueFinalModal, useModal, h } from 'vue-final-modal'
 // ModalContent is the component you want to put into the modal content
 import ModalContent from './ModalContent.vue'
 
 const modalInstance = useModal({
   component: VueFinalModal,
   attrs: { ... },
   slots: {
-    default: useModalSlot({
+    default: h({
       component: ModalContent,
       attrs: {
         // Bind ModalContent props
@@ -137,7 +137,7 @@ const modalInstance = useModal({
 ```
 
 ::alert{type=info}
-`useModalSlot()` is a function that provides better DX for type checking. It just returns the same object you passed in.
+`h()` is a function that provides better DX for type checking. It just returns the same object you passed in.
 ::
 
 ## Type Declarations

docs/package.json

@@ -16,7 +16,7 @@
   "dependencies": {
     "@vorms/core": "^1.1.0",
     "@vue-final-modal/nuxt": "workspace:1.0.3",
-    "vue-final-modal": "workspace:4.5.2",
+    "vue-final-modal": "workspace:5.0.0-beta.5",
     "vue3-drag-resize": "^2.0.5"
   }
 }

examples/nuxt3/package.json

@@ -15,6 +15,6 @@
   },
   "dependencies": {
     "@vue-final-modal/nuxt": "^1.0.3",
-    "vue-final-modal": "^4.5.2"
+    "vue-final-modal": "^4.5.3"
   }
 }

examples/vue3/package.json

@@ -9,8 +9,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.3.7",
-    "vue-final-modal": "^4.5.2"
+    "vue": "3.3.7",
+    "vue-final-modal": "^4.5.3"
   },
   "devDependencies": {
     "@iconify/vue": "^4.1.1",

package.json

@@ -17,9 +17,6 @@
     "prepare:module": "pnpm --filter @vue-final-modal/nuxt dev:prepare && pnpm --filter @vue-final-modal/nuxt prepack",
     "postinstall": "pnpm build:vfm && pnpm prepare:module"
   },
-  "dependencies": {
-    "vue": "^3.3.7"
-  },
   "devDependencies": {
     "@antfu/eslint-config": "^0.37.0",
     "@types/node": "^20.10.0",

packages/nuxt/package.json

@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@nuxt/kit": "^3.8.2",
-    "vue-final-modal": "^4.5.2"
+    "vue-final-modal": "^4.5.3"
   },
   "devDependencies": {
     "@nuxt/module-builder": "^0.5.4",

packages/vue-final-modal/CHANGELOG.md

@@ -1,5 +1,21 @@
 
 
+# [5.0.0-beta.5](https://github.com/vue-final/vue-final-modal/compare/v5.0.0-beta.4...v5.0.0-beta.5) (2024-01-31)
+
+# [5.0.0-beta.4](https://github.com/vue-final/vue-final-modal/compare/v5.0.0-beta.3...v5.0.0-beta.4) (2024-01-30)
+
+# [5.0.0-beta.3](https://github.com/vue-final/vue-final-modal/compare/v5.0.0-beta.2...v5.0.0-beta.3) (2024-01-30)
+
+# [5.0.0-beta.2](https://github.com/vue-final/vue-final-modal/compare/v5.0.0-beta.1...v5.0.0-beta.2) (2024-01-11)
+
+# [5.0.0-beta.1](https://github.com/vue-final/vue-final-modal/compare/v5.0.0-beta.0...v5.0.0-beta.1) (2024-01-11)
+
+# [5.0.0-beta.0](https://github.com/vue-final/vue-final-modal/compare/v4.5.3...v5.0.0-beta.0) (2024-01-11)
+
+### Features
+
+* replace body-scroll-lock with scroll-lock [#403](https://github.com/vue-final/vue-final-modal/issues/403) ([a9a2e8a](https://github.com/vue-final/vue-final-modal/commit/a9a2e8a7794c6d9c67eb7650a74f6894b2b558b0))
+
 ## [4.5.3](https://github.com/vue-final/vue-final-modal/compare/v4.5.2...v4.5.3) (2023-12-15)
 
 ## [4.5.2](https://github.com/vue-final/vue-final-modal/compare/v4.5.1...v4.5.2) (2023-12-15)

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

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { VueFinalModal } from '~/index'
+</script>
+
+<template>
+  <VueFinalModal v-slot="{ close }">
+    <button @click="() => close()">
+      Close
+    </button>
+  </VueFinalModal>
+</template>

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

@@ -0,0 +1,27 @@
+import App from './App.vue'
+import ModalCloseByScopedSlot from './ModalCloseByScopedSlot.vue'
+import { createVfm, useModal } from '~/index'
+
+describe('Test scopedSlot', () => {
+  it('close() scoped slot ', () => {
+    const vfm = createVfm()
+
+    cy.mount(App, {
+      global: {
+        plugins: [vfm],
+        stubs: { transition: false },
+      },
+    }).as('app')
+
+    const modalName = 'modal-close-by-scoped-slot'
+    useModal({
+      defaultModelValue: true,
+      component: ModalCloseByScopedSlot,
+      attrs: { class: modalName },
+    })
+
+    cy.get(`.${modalName}`).should('exist')
+    cy.get(`.${modalName}`).find('button').click()
+    cy.get(`.${modalName}`).should('not.exist')
+  })
+})

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

@@ -42,7 +42,7 @@ describe('Test useZIndex()', () => {
     })
 
     cy.get('@app').then(() => {
-      thirdModal.patchOptions({
+      thirdModal.patchTemplate({
         attrs: {
           zIndexFn: ({ index }) => 1234 + 2 * index,
         },

packages/vue-final-modal/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-final-modal",
   "private": false,
-  "version": "4.5.3",
+  "version": "5.0.0-beta.5",
   "type": "module",
   "source": "src/index.ts",
   "main": "./dist/index.umd.js",
@@ -24,32 +24,28 @@
   "scripts": {
     "dev": "vite build -w",
     "build": "vite build",
-    "cypress:open": "cypress open --browser chrome --component",
+    "cypress:open": "cypress open --browser electron --component",
     "cypress:run": "cypress run --browser chrome --component",
     "typecheck": "vue-tsc --noEmit",
     "release": "pnpm build && pnpm cypress:run && release-it"
   },
-  "dependencies": {
-    "@vueuse/core": "^10.5.0",
-    "@vueuse/integrations": "^10.5.0",
-    "focus-trap": "^7.5.4"
-  },
   "devDependencies": {
-    "@cypress/vue": "^5.0.5",
     "@release-it/conventional-changelog": "^5.1.1",
-    "@vue-macros/volar": "^0.8.4",
-    "cypress": "^13.6.0",
+    "@vueuse/core": "^10.7.1",
+    "@vueuse/integrations": "^10.7.1",
+    "cypress": "^13.6.4",
+    "focus-trap": "^7.5.4",
     "release-it": "^16.1.3",
-    "unplugin-vue-define-options": "^1.3.8",
-    "unplugin-vue-macros": "^2.3.0",
     "vite-plugin-dts": "^3.6.3",
-    "vue": "^3.3.7"
+    "vue": "3.3.7",
+    "vue-use-template": "0.0.0-beta.5"
   },
   "peerDependencies": {
     "@vueuse/core": ">=10.0.0",
     "@vueuse/integrations": ">=10.0.0",
     "focus-trap": ">=7.2.0",
-    "vue": ">=3.2.0"
+    "vue": ">=3.0.0",
+    "vue-use-template": "0.0.0-beta.5"
   },
   "homepage": "https://vue-final-modal.org/",
   "bugs": {

packages/vue-final-modal/src/components/ModalsContainer.ts

@@ -0,0 +1,3 @@
+import { Container } from 'vue-use-template'
+
+export const ModalsContainer = Container