Support all modal events.

Author: zemkogabor

dev/pages/Home.vue

@@ -129,6 +129,7 @@
   <bs-modal
     v-if="modalShown"
     title="Modal"
+    @hide="onModalHide"
     @hidden="modalShown = false"
   >
     <template #body>
@@ -352,6 +353,11 @@ export default defineComponent({
     onCheckboxChange(): void {
       console.log('Checkbox change, value: ' + this.inputCheckbox)
     },
+    onModalHide(event: Event): void {
+      // if you want to prevent the modal from closing, you can use event.preventDefault()
+      // event.preventDefault()
+      console.log(event)
+    },
   },
 })
 </script>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bootstrap-vue-wrapper",
-  "version": "2.1.16",
+  "version": "2.1.17",
   "description": "Bootstrap 5 components in Vue3 wrapper.",
   "module": "./dist/bootstrap-vue-wrapper.js",
   "types": "./dist/index.d.ts",

src/components/bs-modal/BsModal.vue

@@ -58,13 +58,17 @@ export default defineComponent({
       default: false,
     },
   },
-  emits: ['shown', 'hidden'],
+  emits: ['show', 'shown', 'hide', 'hidden', 'hidePrevented'],
   mounted() {
     const modalElement = this.$refs.modalRef as HTMLElement
     Modal.getOrCreateInstance(modalElement).show()
 
-    modalElement.addEventListener('shown.bs.modal', this.onShown)
-    modalElement.addEventListener('hidden.bs.modal', this.onHidden)
+    // https://getbootstrap.com/docs/5.3/components/modal/#events
+    modalElement.addEventListener('show.bs.modal', (e) => this.$emit('show', e))
+    modalElement.addEventListener('shown.bs.modal', (e) => this.$emit('shown', e))
+    modalElement.addEventListener('hide.bs.modal', (e) => this.$emit('hide', e))
+    modalElement.addEventListener('hidden.bs.modal', (e) => this.$emit('hidden', e))
+    modalElement.addEventListener('hidePrevented.bs.modal', (e) => this.$emit('hidePrevented', e))
   },
   methods: {
     /**
@@ -75,18 +79,6 @@ export default defineComponent({
 
       Modal.getOrCreateInstance(modalElement).hide()
     },
-    /**
-     * Shown event.
-     */
-    onShown(): void {
-      this.$emit('shown')
-    },
-    /**
-     * Hidden event.
-     */
-    onHidden(): void {
-      this.$emit('hidden')
-    },
   },
 })
 </script>