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 */ },