feat: support v-on for slot component in dynamic modal

Author: hunterliu1003

dist/VueFinalModal.esm.js

@@ -45,13 +45,14 @@ To show dynamic modal you can use the API `$vfm.show` function.
 
 ```ts
 type dynamicModalOptions = {
-  component?: string | Component | AsyncComponent, // modal component
+  component?: string | Component | AsyncComponent // modal component
   bind?: { [key: string]: any}, // bind props and attrs to modal
-  on?: { [key: string]: Function | Function[] }, // register events to modal
+  on?: { [key: string]: Function | Function[] } // register events to modal
   slots?: {
     [key: string]: { // slot name
       component: string | Component | AsyncComponent // slot component
-      bind: { [key: string]: any } // bind props and attrs to slot component
+      bind?: { [key: string]: any } // bind props and attrs to slot component
+      on?: { [key: string]: Function | Function[] } // register events to slot component
     }
   }
 }
@@ -200,16 +201,16 @@ export default {
             close()
           },
           // event by vue-final-modal
-          clickOutside() {
+          'click-outside'() {
             console.log('@click-outside')
           },
-          beforeOpen() {
+          'before-open'() {
             console.log('@before-open')
           },
           opened() {
             console.log('@opened')
           },
-          beforeClose() {
+          'before-close'() {
             console.log('@before-close')
           },
           closed() {

dist/VueFinalModal.esm.js.map

@@ -45,13 +45,14 @@ To show dynamic modal you can use the API `$vfm.show` function.
 
 ```ts
 type dynamicModalOptions = {
-  component?: string | Component | AsyncComponent, // modal component
+  component?: string | Component | AsyncComponent // modal component
   bind?: { [key: string]: any}, // bind props and attrs to modal
-  on?: { [key: string]: Function | Function[] }, // register events to modal
+  on?: { [key: string]: Function | Function[] } // register events to modal
   slots?: {
     [key: string]: { // slot name
       component: string | Component | AsyncComponent // slot component
-      bind: { [key: string]: any } // bind props and attrs to slot component
+      bind?: { [key: string]: any } // bind props and attrs to slot component
+      on?: { [key: string]: Function | Function[] } // register events to slot component
     }
   }
 }
@@ -200,16 +201,16 @@ export default {
             close()
           },
           // event by vue-final-modal
-          clickOutside() {
+          'click-outside'() {
             console.log('@click-outside')
           },
-          beforeOpen() {
+          'before-open'() {
             console.log('@before-open')
           },
           opened() {
             console.log('@opened')
           },
-          beforeClose() {
+          'before-close'() {
             console.log('@before-close')
           },
           closed() {

dist/VueFinalModal.umd.js

@@ -27,6 +27,8 @@
     <v-stop-before-open></v-stop-before-open>
     <h2 class="text-3xl py-2">Dynamic modal</h2>
     <v-dynamic></v-dynamic>
+    <h2 class="text-3xl py-2">Advanced dynamic modal</h2>
+    <v-dynamic-advanced></v-dynamic-advanced>
 
     <modals-container></modals-container>
     <div v-for="i in 100" :key="i">{{ i }}</div>

dist/VueFinalModal.umd.js.map

@@ -24,16 +24,16 @@ export default {
             close()
           },
           // event by vue-final-modal
-          clickOutside() {
+          'click-outside'() {
             console.log('@click-outside')
           },
-          beforeOpen() {
+          'before-open'() {
             console.log('@before-open')
           },
           opened() {
             console.log('@opened')
           },
-          beforeClose() {
+          'before-close'() {
             console.log('@before-close')
           },
           closed() {

docs/content/en/dynamic-modal.md

@@ -11,7 +11,7 @@
       @before-open="e => beforeOpen(e, modal)"
     >
       <template v-for="(slot, key) in modal.slots" v-slot:[key]>
-        <component :key="key" :is="slot.component" v-bind="slot.bind" />
+        <component :key="key" :is="slot.component" v-bind="slot.bind" v-on="slot.on" />
       </template>
     </component>
   </div>

docs/content/zh-Hant/dynamic-modal.md

@@ -3,7 +3,7 @@ import './lib'
 
 export class VueFinalModalComponant extends Vue {
   $refs: {
-    vfmContainer: HTMLDivElement,
+    vfmContainer: HTMLDivElement
   }
 }
 
@@ -15,14 +15,14 @@ export interface DynamicModalOptions {
   /**
    * bind props and attrs to modal
    */
-  bind?: {[key: string]: any}
+  bind?: { [key: string]: any }
   /**
    * register events to modal
    */
   on?: VNodeData['on']
   /**
    * modal component slot
-   * 
+   *
    * @example
    * ```js
    * {
@@ -40,7 +40,8 @@ export interface DynamicModalOptions {
   slots?: {
     [key: string]: {
       component: string | Component | AsyncComponent
-      bind: {[key: string]: any}
+      bind?: { [key: string]: any }
+      on?: { [key: string]: Function | Function[] }
     }
   }
 }
@@ -54,7 +55,7 @@ interface DynamicModalData extends DynamicModalOptions {
 export interface VueFinalModalProperty {
   readonly dynamicModals: DynamicModalData[]
   readonly openedModals: VueFinalModalComponant[]
-  readonly modals: VueFinalModalComponant[],
+  readonly modals: VueFinalModalComponant[]
   get(...names: string[]): VueFinalModalComponant[]
 
   show(name: string, params?: any): void
@@ -67,19 +68,18 @@ export interface VueFinalModalProperty {
   toggle(name: string | string[], show?: boolean, params?: any): void
 }
 
-
 declare module 'vue/types/vue' {
   interface Vue {
     readonly $vfm: VueFinalModalProperty
   }
 }
 
 export interface VfmOptions {
-  dynamicContainerName?: string,
-  componentName?: string,
+  dynamicContainerName?: string
+  componentName?: string
   key?: string
 }
 
 declare const VfmPlugin: () => PluginObject<VfmOptions>
 
-export default VfmPlugin
+export default VfmPlugin