bootstrap-vue · Hiws · Mar 25, 2021 · Mar 25, 2021 · Apr 27, 2021 · May 4, 2021
diff --git a/src/components/modal/README.md b/src/components/modal/README.md
@@ -81,7 +81,7 @@ several methods, of which two are for showing and hiding modals:
 | Method                   | Description                            |
 | ------------------------ | -------------------------------------- |
 | `this.$bvModal.show(id)` | Show the modal with the specified `id` |
-| `this.$bvModal.hide(id)` | Hide the modal with the specified `id` |
+| `this.$bvModal.hide(id, trigger = "event")` | Hide the modal with the specified `id`, and optionally supply a `trigger` like `ok`. Which will cause the modal to close as if the `OK` button was clicked |
 
 Both methods return immediately after being called.
 
@@ -958,39 +958,70 @@ method to generate VNodes.
 <template>
   <div>
     <b-button @click="showMsgOk">Show OK message box with custom content</b-button>
+    Return value: {{ returnValue }}
   </div>
 </template>
 
 <script>
   export default {
+    data() {
+      return {
+        returnValue: ''
+      }
+    },
     methods: {
-      showMsgOk() {
+      async showMsgOk() {
         const h = this.$createElement
+        const modalId = "my-confirm-modal";
         // Using HTML string
         const titleVNode = h('div', { domProps: { innerHTML: 'Title from <i>HTML<i> string' } })
         // More complex structure
         const messageVNode = h('div', { class: ['foobar'] }, [
-          h('p', { class: ['text-center'] }, [
+          h('p', { staticClass: 'text-center' }, [
             ' Flashy ',
             h('strong', 'msgBoxOk'),
             ' message ',
           ]),
-          h('p', { class: ['text-center'] }, [h('b-spinner')]),
+          h('p', { staticClass: 'text-center' }, [h('b-spinner')]),
           h('b-img', {
             props: {
               src: 'https://picsum.photos/id/20/250/250',
               thumbnail: true,
               center: true,
               fluid: true, rounded: 'circle'
             }
-          })
+          }),
+          // You can use `$bvModal.hide` to hide the modal along with an optional trigger to create custom `ok` or `cancel`.
+          h('p', { staticClass: 'd-flex justify-content-around mt-2' }, [
+            h('b-button', {
+              props: { variant: 'danger' },
+              on: {
+                click: () => {
+                  this.$bvModal.hide(modalId, 'cancel')
+                }
+              }
+            }, 'Custom \'CANCEL\' button'),
+            h('b-button', {
+              props: { variant: 'primary' },
+              on: {
+                click: () => {
+                  this.$bvModal.hide(modalId, 'ok')
+                }
+              }
+            }, 'Custom \'OK\' button')
+          ])
         ])
         // We must pass the generated VNodes as arrays
-        this.$bvModal.msgBoxOk([messageVNode], {
-          title: [titleVNode],
-          buttonSize: 'sm',
-          centered: true, size: 'sm'
-        })
+        try {
+          this.returnValue = await this.$bvModal.msgBoxConfirm([messageVNode], {
+            id: modalId,
+            title: [titleVNode],
+            buttonSize: 'sm',
+            centered: true
+          })
+        } catch(err) {
+          // An error occurred
+        }        
       }
     }
   }
@@ -1190,4 +1221,4 @@ Notes on `v-b-modal` directive accessibility:
   then a `tabindex` of `0` will be added to the element to ensure accessibility, unless there is
   already a `tabindex` set.
 
-<!-- Component reference added automatically from component package.json -->
+<!-- Component reference added automatically from component package.json -->
diff --git a/src/components/modal/index.d.ts b/src/components/modal/index.d.ts
@@ -83,7 +83,7 @@ export interface BvModal {
   show: (id: string) => void
 
   // Hide a modal by id
-  hide: (id: string) => void
+  hide: (id: string, trigger?: string) => void
 }
 
 // --- Vue prototype injections ---

diff --git a/src/components/modal/modal.js b/src/components/modal/modal.js
@@ -697,9 +697,9 @@ export const BModal = /*#__PURE__*/ Vue.extend({
         this.show()
       }
     },
-    hideHandler(id) {
+    hideHandler(id, trigger = 'event') {
       if (id === this.modalId) {
-        this.hide('event')
+        this.hide(trigger)
       }
     },
     toggleHandler(id, triggerEl) {

diff --git a/src/components/modal/package.json b/src/components/modal/package.json
@@ -397,6 +397,11 @@
                 "arg": "modalId",
                 "type": "String",
                 "description": "ID of modal to hide"
+              },
+              {
+                "arg": "trigger",
+                "type": "String",
+                "description": "Specify which trigger the modal should use when hidden, like `ok`, `cancel` or event a custom trigger (optional)"
               }
             ]
           },