feat: renamed after-open and after-close events

BREAKING CHANGE
- the `after-open` event has been renamed to `opened`
- the `after-close` event has been renamed to `closed`

Author: kouts

README.md

@@ -20,7 +20,7 @@ If you're looking for a Vue.js 2 compatible version of vue-modal, [please check
 - Includes sensible default styling but it's also highly customizable via user CSS classes and styles
 - Override modal title and content via slots
 - Modal intro and outro effects using CSS animation classes
-- Exposes Component events - before-open, opening, after-open, before-close, closing, after-close, update:modelValue (close)
+- Exposes Component events - before-open, opening, opened, before-close, closing, closed, update:modelValue (close)
 - Scrollable when it's contents exceed screen height
 - Closeable by clicking on the upper right "x", the overlay or the `esc` key
 - **Stackable** - Multiple modal windows on top of each other

docs/index.md

@@ -21,7 +21,7 @@ A customizable, stackable, and lightweight modal component for Vue.js 3.
 - Includes sensible default styling but it's also highly customizable via user CSS classes and styles
 - Override modal title and content via slots
 - Modal intro and outro effects using CSS animation classes
-- Exposes Component events - before-open, opening, after-open, before-close, closing, after-close, update:modelValue (close)
+- Exposes Component events - before-open, opening, opened, before-close, closing, closed, update:modelValue (close)
 - Scrollable when it's contents exceed screen height
 - Closeable by clicking on the upper right "x", the overlay or the `esc` key
 - **Stackable** - Multiple modal windows on top of each other

docs/options/index.md

@@ -4,8 +4,8 @@ Pass a `Boolean` value to the `v-model` directive to show and hide the modal win
 
 ## Plugin API
 
-In order to use the Plugin API you need to import and register the `modalPlugin`.  
-The Plugin API exposes `show`/`hide` functions that can be called within any component to show and hide the modal window with the given name.
+The Plugin API exposes `show`/`hide` functions that can be called within any component to show and hide the modal window with the given name.  
+In order to use the Plugin API you need to import and register the `modalPlugin`.
 
 The functions are available through:
 
@@ -14,9 +14,9 @@ The functions are available through:
 
 ### Functions
 
-**`show(name)`** - Shows the modal with the given name  
-**`hide(name)`** - Hides the modal with the given name  
-**`hideAll()`** - Hides all modals
+**`show(name: string): void`** : Shows the modal with the given `name` prop  
+**`hide(name: string): void`** : Hides the modal with the given `name` prop  
+**`hideAll(): void`** - Hides all modals
 
 ## Props
 
@@ -178,32 +178,32 @@ Default value:
   </thead>
   <tbody>
     <tr>
-      <td>close</td>
-      <td>Event that fires when dialog closes</td>
+      <td>update:modelValue</td>
+      <td>Event that is emitted when the component’s model changes</td>
     </tr>
     <tr>
       <td>before-open</td>
-      <td>Event that fires before the modal opening transition starts</td>
+      <td>Event that is emitted before the modal opening transition starts</td>
     </tr>
     <tr>
       <td>opening</td>
-      <td>Event that fires while the modal opening transition is in progress</td>
+      <td>Event that is emitted while the modal opening transition is in progress</td>
     </tr>
     <tr>
-      <td>after-open</td>
-      <td>Event that fires when the modal opening transition is finished</td>
+      <td>opened</td>
+      <td>Event that is emitted when the modal is visible and the opening transition ended</td>
     </tr>
     <tr>
       <td>before-close</td>
-      <td>Event that fires before the modal closing transition starts</td>
+      <td>Event that is emitted before the modal closing transition starts</td>
     </tr>
     <tr>
       <td>closing</td>
-      <td>Event that fires while the modal closing transition is in progress</td>
+      <td>Event that is emitted while the modal closing transition is in progress</td>
     </tr>
     <tr>
-      <td>after-close</td>
-      <td>Event that fires when the modal closing transition is finished</td>
+      <td>closed</td>
+      <td>Event that is emitted when the modal is no longer visible and the closing transition ended</td>
     </tr>    
   </tbody>
 </table>

docs/usage/index.md

@@ -46,7 +46,7 @@ const app = Vue.createApp({...})
 app.use(modalPlugin)
 ```
 
-To control the visibility of the modal with the name `prop` you use the and `show`/`hide` functions.
+To control the visibility of the modal with the name `prop` you use the `show`/`hide` functions.
 
 **Composition API**
 

src/Modal.vue

@@ -15,10 +15,10 @@
       :leave-active-class="outClass"
       @before-enter="beforeOpen"
       @enter="opening"
-      @after-enter="afterOpen"
+      @after-enter="opened"
       @before-leave="beforeClose"
       @leave="closing"
-      @after-leave="afterClose"
+      @after-leave="closed"
     >
       <div
         v-show="show"
@@ -116,7 +116,7 @@ export default {
       default: 'Close'
     }
   },
-  emits: ['before-open', 'opening', 'after-open', 'before-close', 'closing', 'after-close', 'update:modelValue'],
+  emits: ['before-open', 'opening', 'opened', 'before-close', 'closing', 'closed', 'update:modelValue'],
   data() {
     return {
       zIndex: 0,
@@ -227,10 +227,10 @@ export default {
       // console.log('opening');
       this.$emit('opening')
     },
-    afterOpen() {
-      // console.log('afterOpen');
+    opened() {
+      // console.log('opened');
       this.handleFocus(this.$refs['vm-wrapper'])
-      this.$emit('after-open')
+      this.$emit('opened')
     },
     beforeClose() {
       // console.log('beforeClose');
@@ -240,8 +240,8 @@ export default {
       // console.log('closing');
       this.$emit('closing')
     },
-    afterClose() {
-      // console.log('afterClose');
+    closed() {
+      // console.log('closed');
       this.zIndex = 0
       if (!this.live) {
         this.mount = false
@@ -272,7 +272,7 @@ export default {
             }
           }
           animatingZIndex = 0
-          this.$emit('after-close')
+          this.$emit('closed')
         })
       })
     }

tests/unit/ModalEvents.spec.js

@@ -21,7 +21,7 @@ describe('Modal events', () => {
     document.body.innerHTML = ''
   })
 
-  it.each(['before-open', 'opening', 'after-open'])('emits a %s event when opening', async (eventName) => {
+  it.each(['before-open', 'opening', 'opened'])('emits a %s event when opening', async (eventName) => {
     const wrapper = createWrapper()
 
     await wrapper.setProps({ modelValue: true })
@@ -31,7 +31,7 @@ describe('Modal events', () => {
     wrapper.unmount()
   })
 
-  it.each(['before-close', 'closing', 'after-close'])('emits a %s event when closing', async (eventName) => {
+  it.each(['before-close', 'closing', 'closed'])('emits a %s event when closing', async (eventName) => {
     const wrapper = createWrapper()
 
     await wrapper.setProps({ modelValue: true })