Merge pull request #415 from vue-final/feat/4.5

Feat/4.5

Author: hunterliu1003

README.md

@@ -45,6 +45,9 @@ pnpm build:vfm
 # Run both docs and viteplay
 pnpm dev
 
+# Run dev for vue-final-modal
+pnpm dev:vfm
+
 # Run docs: http://localhost:3000/
 pnpm dev:docs
 

docs/app.config.ts

@@ -2,19 +2,21 @@ export default defineAppConfig({
   docus: {
     title: 'Vue Final Modal',
     description: 'Vue Final Modal is the most powerful yet most light-weight modal library for Vue 3',
-    layout: 'docs',
+    layout: 'default',
     image: 'https://vue-final-modal.org/preview.png',
     url: 'https://vue-final-modal.org',
     socials: {
       twitter: '@hunterliu1003',
       github: 'vue-final/vue-final-modal',
     },
-    github: true,
     aside: {
       level: 1,
     },
     header: {
-      logo: true,
+      logo: {
+        dark: '/logo-new.svg',
+        light: '/logo-new.svg',
+      },
     },
     footer: {},
   },

docs/components/content/LoginFormVorms.vue

@@ -33,7 +33,9 @@ const { value: remember, attrs: rememberAttrs } = register('remember')
 </script>
 
 <template>
-  <h1 class="text-2xl mb-4">Login</h1>
+  <h1 class="text-2xl mb-4">
+    Login
+  </h1>
   <form @submit="handleSubmit">
     <div class="field">
       <input

docs/components/content/Logo.vue

@@ -16,7 +16,9 @@ defineProps<{
     <h1 class="text-xl">
       {{ title }}
     </h1>
-    <div class="text-3xl">Swipe down to close the modal</div>
+    <div class="text-3xl">
+      Swipe down to close the modal
+    </div>
     <slot />
   </VueFinalModal>
 </template>

docs/components/content/ModalBottom.vue

@@ -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
 

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

@@ -125,11 +125,6 @@ open()
 `params` is not a good practice and hard to keep type-save in Typescript.
 So if you are using `params`, you have to re-written it with [useModal()](/api/composables/use-modal) composable.
 
-### Removed `event.stop()` from both `@before-close` and `@before-open`
-
-`event.stop()` made the source code hard to read and maintain.
-It's easy to have a condition before open or before close the modal. So it's not a required feature.
-
 ### Delete Drag & Resize
 
 To keep vue-final-modal simple and easier to maintain, I decided to remove the Drag & Resize feature.

docs/content/2.get-started/1.guide/3.migration-guide.md

@@ -2,12 +2,6 @@
 
 The exported types in VueFinalModal.
 
-## ComponentProps
-
-```ts
-export type ComponentProps = ComponentPublicInstance['$props']
-```
-
 ## ModalId
 
 ```ts
@@ -23,18 +17,18 @@ export type StyleValue = string | CSSProperties | (string | CSSProperties)[]
 ## ModalSlot
 
 ```ts
-export interface ModalSlotOptions { component: Raw<Component>; attrs?: Record<string, any> }
-export type ModalSlot = string | Component | ModalSlotOptions
+export interface ModalSlotOptions { component: Raw<ComponentType>; attrs?: Record<string, any> }
+export type ModalSlot = string | ComponentType | ModalSlotOptions
 ```
 
 ## UseModalOptions
 
 ```ts
-export type UseModalOptions<P> = {
+export type UseModalOptions<T extends ComponentType> = {
   defaultModelValue?: boolean
   keepAlive?: boolean
-  component?: Constructor<P>
-  attrs?: (RawProps & P) | ({} extends P ? null : never)
+  component?: T
+  attrs?: ComponentProps<T>
   slots?: {
     [key: string]: ModalSlot
   }
@@ -55,11 +49,11 @@ export type UseModalOptionsPrivate = {
 ## UseModalReturnType
 
 ```ts
-export interface UseModalReturnType<P> {
-  options: UseModalOptions<P> & UseModalOptionsPrivate
+export interface UseModalReturnType<T extends ComponentType> {
+  options: UseModalOptions<T> & UseModalOptionsPrivate
   open: () => Promise<string>
   close: () => Promise<string>
-  patchOptions: (options: Partial<UseModalOptions<P>>) => void
+  patchOptions: (options: Partial<UseModalOptions<T>>) => void
   destroy: () => void
 }
 ```

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

@@ -228,14 +228,28 @@ When set `:preventNavigationGestures="true"`{lang=ts}, there will be two invisib
 
 ## Events
 
-- `(e: 'beforeOpen'): void`{lang=ts}: Emits while modal is still invisible, but before transition starting.
+- `(e: 'beforeOpen', event: { stop: () => void }): void`{lang=ts}: Emits while modal is still invisible, but before transition starting.
+  - `event.stop()` is use to prevent the modal from opening.
 - `(e: 'opened'): void`{lang=ts}: Emits after modal became visible and transition ended.
-- `(e: 'beforeClose'): void`{lang=ts}: Emits before modal is going to be closed.
+- `(e: 'beforeClose', event: { stop: () => void }): void`{lang=ts}: Emits before modal is going to be closed.
+  - `event.stop()` is use to prevent the modal from closing.
 - `(e: 'closed'): void`{lang=ts}: Emits right before modal is destroyed.
 - `(e: 'clickOutside'): void`{lang=ts}: Emits while `.vfm` element on click.
 
 ## Slots
 
 - The `default`{lang=ts} slot can be used to render the modal content.
 
+You can also use scoped slots to close modal, for example:
+
+```html
+<VueFinalModal>
+  <template #default="{ close }">
+    <button @click="() => close()">
+      Cancel
+    </button>
+  </template>
+</VueFinalModal>
+```
+
 - The `swipe-banner`{lang=ts} slot can be used to define the area that can be swipe to close

docs/content/3.api/1.components/1.vue-final-modal.md

@@ -44,6 +44,7 @@ const { open, close, destroy, options, patchOptions } = useModal({
     clickToClose: true,
     escToClose: true,
     // Bind events to the modal component (VueFinalModal in this case).
+    // Any custom events can be listened for when prefixed with "on", e.g. "onEventName".
     onBeforeOpen() { /* on before open */ },
     onOpened() { /* on opened */ },
     onBeforeClose() { /* on before close */ },

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

@@ -9,9 +9,9 @@
     "preview": "nuxi preview"
   },
   "devDependencies": {
-    "@nuxt-themes/docus": "^1.10.1",
-    "@nuxtjs/tailwindcss": "^6.6.4",
-    "nuxt": "^3.3.2"
+    "@nuxt-themes/docus": "^1.15.0",
+    "@nuxtjs/tailwindcss": "^6.10.1",
+    "nuxt": "^3.8.2"
   },
   "dependencies": {
     "@vorms/core": "^1.1.0",

docs/package.json

@@ -1,5 +1,4 @@
 export default defineNuxtConfig({
   extends: '@nuxt-themes/docus',
-  modules: ['@nuxtjs/tailwindcss'],
-  css: ['vue-final-modal/style.css'],
+  modules: ['@nuxtjs/tailwindcss', '@vue-final-modal/nuxt'],
 })

examples/nuxt3/nuxt.config.ts

@@ -9,9 +9,9 @@
     "postinstall": "nuxt prepare"
   },
   "devDependencies": {
-    "@nuxt-themes/docus": "^1.6.0",
-    "@nuxtjs/tailwindcss": "^6.2.0",
-    "nuxt": "3.1.0"
+    "@nuxt-themes/docus": "^1.15.0",
+    "@nuxtjs/tailwindcss": "^6.10.1",
+    "nuxt": "3.8.2"
   },
   "dependencies": {
     "@vue-final-modal/nuxt": "^1.0.2",

examples/nuxt3/package.json

@@ -5,21 +5,20 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vue-tsc && vite build",
+    "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.3.4",
+    "vue": "^3.3.7",
     "vue-final-modal": "^4.4.6"
   },
   "devDependencies": {
-    "@iconify/vue": "^4.0.0",
-    "@vitejs/plugin-vue": "^4.2.3",
-    "autoprefixer": "^10.4.13",
-    "postcss": "^8.4.21",
-    "tailwindcss": "^3.2.4",
-    "typescript": "^5.1.6",
-    "vite": "^4.3.9",
-    "vue-tsc": "^1.8.3"
+    "@iconify/vue": "^4.1.1",
+    "@vitejs/plugin-vue": "^4.5.0",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.31",
+    "tailwindcss": "^3.3.5",
+    "typescript": "^5.3.2",
+    "vite": "^5.0.3"
   }
 }

examples/nuxt3/plugins/vfm.ts

@@ -2,7 +2,7 @@
   "name": "vfm",
   "private": true,
   "scripts": {
-    "dev": "concurrently \"pnpm:dev:*\"",
+    "dev": "concurrently \"pnpm:dev:docs\" \"pnpm:dev:viteplay\"",
     "dev:docs": "pnpm --filter docs dev",
     "build:docs": "pnpm --filter docs build",
     "generate:docs": "pnpm --filter docs generate",
@@ -18,19 +18,18 @@
     "postinstall": "pnpm build:vfm && pnpm prepare:module"
   },
   "dependencies": {
-    "vue": "^3.3.4"
+    "vue": "^3.3.7"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.37.0",
-    "@types/node": "^18.15.10",
-    "@vitejs/plugin-vue": "^4.2.3",
+    "@types/node": "^20.10.0",
+    "@vitejs/plugin-vue": "^4.5.0",
     "@vue/test-utils": "^2.3.2",
-    "concurrently": "^7.6.0",
+    "concurrently": "^8.2.2",
     "eslint": "^8.36.0",
-    "pnpm": "^8.10.2",
-    "sass": "^1.60.0",
-    "typescript": "^5.1.6",
-    "vite": "^4.3.9",
-    "vue-tsc": "^1.8.3"
+    "pnpm": "^8.11.0",
+    "typescript": "^5.3.2",
+    "vite": "^5.0.3",
+    "vue-tsc": "1.8.20"
   }
 }

examples/vue3/package.json

@@ -23,14 +23,14 @@
     "release": "pnpm prepack && release-it"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.3.2",
+    "@nuxt/kit": "^3.8.2",
     "vue-final-modal": "^4.4.6"
   },
   "devDependencies": {
-    "@nuxt/module-builder": "^0.2.1",
-    "@nuxt/schema": "^3.3.2",
-    "@nuxtjs/eslint-config-typescript": "^12.0.0",
-    "nuxt": "^3.3.2",
+    "@nuxt/module-builder": "^0.5.4",
+    "@nuxt/schema": "^3.8.2",
+    "@nuxtjs/eslint-config-typescript": "^12.1.0",
+    "nuxt": "^3.8.2",
     "release-it": "^16.1.3"
   },
   "peerDependencies": {

package.json

@@ -6,10 +6,10 @@ export default defineNuxtModule({
     configKey: 'vue-final-modal',
   },
   setup(options, nuxt) {
-    const resolver = createResolver(import.meta.url)
+    const { resolve } = createResolver(import.meta.url)
 
     // Transpile runtime
-    nuxt.options.build.transpile.push(resolver.resolve('./runtime'))
+    nuxt.options.build.transpile.push(resolve('./runtime'))
 
     nuxt.hook('prepare:types', ({ references }) => {
       references.push({ types: '@vue-final-modal/nuxt' })
@@ -18,7 +18,7 @@ export default defineNuxtModule({
     // Add runtime plugin before the router plugin
     // https://github.com/nuxt/framework/issues/9130
     nuxt.hook('modules:done', () => {
-      addPlugin(resolver.resolve('./runtime/plugin'))
+      addPlugin(resolve('./runtime/plugin'))
     })
 
     nuxt.options.css.push('vue-final-modal/style.css')

packages/nuxt/package.json

@@ -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')
     })