Improve modals API

Pooya Parsa · Pooya Parsa · commit 70827691198f · 2017-03-20T13:16:47.000+03:30
diff --git a/docs/pages/docs/components/modals.vue b/docs/pages/docs/components/modals.vue
@@ -22,6 +22,24 @@
                 return {
                     component: 'bModal',
                     jsfiddle: 'bofh9aaa',
+                    events: [
+                        {
+                            event: 'shown',
+                            description: 'always emits when modal is shown'
+                        },
+                        {
+                            event: 'hidden',
+                            description: 'always emits when modal is hidden'
+                        },
+                        {
+                            event: 'ok',
+                            description: 'when default ok button pressed'
+                        },
+                        {
+                            event: 'cancel',
+                            description: 'when default cancel button pressed'
+                        }
+                    ],
                     slots: [
                         {
                             name: 'modal-header',
diff --git a/examples/modals/demo.html b/examples/modals/demo.html
@@ -1,14 +1,23 @@
 <div id="app">
     <b-btn @click="$root.$emit('show::modal','modal1')">Launch demo modal</b-btn>
 
+    <!-- Main UI -->
     <div class="mt-3 mb-3">
         Submitted Names:
         <ul>
             <li v-for="n in names">{{n}}</li>
         </ul>
     </div>
 
-    <b-modal id="modal1" title="Submit your name" :on-save="onSave" save-title="Submit">
-        <b-form-input type="text" placeholder="Enter your name" v-model="name"></b-form-input>
+    <!-- Modal Component -->
+    <b-modal id="modal1"
+             title="Submit your name"
+             @ok="submit"
+             @shown="clearName"
+    >
+        <b-form-input type="text"
+                      placeholder="Enter your name" v-model="name"
+        ></b-form-input>
     </b-modal>
+
 </div>
diff --git a/examples/modals/demo.js b/examples/modals/demo.js
@@ -5,7 +5,10 @@ window.app = new Vue({
         names: []
     },
     methods: {
-        onSave() {
+        clearName() {
+            this.name = "";
+        },
+        submit() {
             if (!this.name) {
                 /* eslint-disable no-alert */
                 alert('Please enter your name');
diff --git a/lib/components/modal.vue b/lib/components/modal.vue
@@ -11,7 +11,8 @@
             <div key="modal" :id="id"
                  v-show="visible"
                  :class="['modal',{fade :fade}]"
-                 @click="onClickOut($event)">
+                 @click="onClickOut($event)"
+            >
 
                 <div :class="['modal-dialog','modal-'+size]">
                     <div class="modal-content">
@@ -33,8 +34,8 @@
 
                         <div class="modal-footer" v-if="!hideFooter">
                             <slot name="modal-footer">
-                                <b-btn variant="secondary" @click="$close">{{closeTitle}}</b-btn>
-                                <b-btn variant="primary" @click="$save">{{saveTitle}}</b-btn>
+                                <b-btn variant="secondary" @click="hide(false)">{{closeTitle}}</b-btn>
+                                <b-btn variant="primary" @click="hide(true)">{{okTitle}}</b-btn>
                             </slot>
                         </div>
 
@@ -54,9 +55,8 @@
 
     /* Make modal display as block instead of inline style, and because Vue's v-show deletes inline "display" style*/
     .modal {
-        display:block;
+        display: block;
     }
-
 </style>
 
 <script>
@@ -80,7 +80,7 @@
             },
             title: {
                 type: String,
-                default: 'Save'
+                default: ''
             },
             size: {
                 type: String,
@@ -94,18 +94,10 @@
                 type: String,
                 default: 'Close'
             },
-            onClose: {
-                type: Function,
-                default: null
-            },
-            saveTitle: {
+            okTitle: {
                 type: String,
                 default: 'OK'
             },
-            onSave: {
-                type: Function,
-                default: null
-            },
             closeOnBackdrop: {
                 type: Boolean,
                 default: true
@@ -127,29 +119,23 @@
                 this.visible = true;
                 this.$root.$emit('shown::modal', this.id);
                 this.body.classList.add('modal-open');
+                this.$emit('shown');
             },
-            hide() {
+            hide(isOK) {
                 if (!this.visible) {
                     return;
                 }
                 this.visible = false;
                 this.$root.$emit('hidden::modal', this.id);
                 this.body.classList.remove('modal-open');
-            },
-            $save() {
-                if (this.onSave) {
-                    if (this.onSave() === false) {
-                        // Cancel event
-                        return;
-                    }
-                }
-                this.hide();
-            },
-            $close() {
-                if (this.onClose) {
-                    this.onClose();
+
+                this.$emit('hidden', isOK);
+
+                if (isOK === true) {
+                    this.$emit('ok');
+                } else if (isOK === false) {
+                    this.$emit('cancel');
                 }
-                this.hide();
             },
             onClickOut(e) {
                 // If backdrop clicked, hide modal
