refactor: CModal

- rename visible prop to show,
- add header, body, footer wrapper slots enabling full customization,
- replace 'accepted' event with 'hide',
- stop sharing hide method in slots,
component should be controlled only by show prop

Author: woothu

src/components/Modal/CModal.vue

@@ -8,46 +8,54 @@
     >
       <div :class="dialogClasses" role="document">
         <div :class="contentClasses">
-          <div v-if="!noHeader" class="modal-header" >
-            <slot name="header" :hide="hide">
+          <slot v-if="!noHeader" name="header-wrapper"
+          >
+            <header  class="modal-header">
+              <slot name="header">
                 <h5 class="modal-title">
                   {{title}}
                 </h5>
                 <button
                   type="button"
                   class="close"
                   aria-label="Close"
-                  @click="hide()"
+                  @click="hide($event)"
                 >
                   <span>&times;</span>
                 </button>
-            </slot>
-          </div>
-          <div v-if="!noBody" class="modal-body">
-            <slot :hide="hide"></slot>
-          </div>
-          <div v-if="!noFooter" class="modal-footer">
-            <slot name="footer" :hide="hide">
-              <button
-                type="button"
-                class="btn btn-secondary" @click="hide()"
-              >
-                Cancel
-              </button>
-              <button
-                type="button"
-                :class="btnClasses"
-                @click="hide(true)"
-              >
-                OK
-              </button>
-            </slot>
-          </div>
+              </slot>
+            </header>
+          </slot>
+          <slot v-if="!noBody" name="body-wrapper">
+            <div class="modal-body">
+              <slot></slot>
+            </div>
+          </slot>
+          <slot v-if="!noFooter" name="footer-wrapper">
+            <footer class="modal-footer">
+              <slot name="footer">
+                <button
+                  type="button"
+                  class="btn btn-secondary" 
+                  @click="hide($event)"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="button"
+                  :class="btnClasses"
+                  @click="hide($event)"
+                >
+                  OK
+                </button>
+              </slot>
+            </footer>
+          </slot>
         </div>
       </div>
     </div>
     <div
-      v-if="!noBackdrop && (isVisible || isTransitioning)"
+      v-if="!noBackdrop && (visible || isTransitioning)"
       :class="backdropClasses"
     >
     </div>
@@ -58,7 +66,7 @@
 export default {
   name: 'CModal',
   props: {
-    visible: Boolean,
+    show: Boolean,
     centered: Boolean,
     title: String,
     size: {
@@ -79,7 +87,7 @@ export default {
   },
   data () {
     return {
-      isVisible: this.visible,
+      visible: this.show,
       isTransitioning: false,
       timeout: null,
     }
@@ -89,7 +97,7 @@ export default {
       return {
         'modal-backdrop': true,
         'fade': !this.noFade,
-        'show': this.isVisible || this.noFade
+        'show': this.visible || this.noFade
       }
     },
     modalClasses () {
@@ -99,8 +107,8 @@ export default {
         {
           // 'close-modal': !this.noCloseOnBackdrop,
           'fade': !this.noFade,
-          'show': this.isVisible,
-          'd-block': this.isVisible || this.isTransitioning,
+          'show': this.visible,
+          'd-block': this.visible || this.isTransitioning,
           [`modal-${this.variant}`]: Boolean(this.variant)
         }
       ]
@@ -129,22 +137,22 @@ export default {
     }
   },
   watch: {
-    visible (val) {
+    show (val) {
       this.toggle(val)
     }
   },
   methods: {
     modalClick (e) {
       if (e.target === this.$el.firstElementChild && !this.noCloseOnBackdrop) {
-        this.hide()
+        this.hide(e)
       }
     },
-    hide (accepted = false) {
-      this.$emit('update:visible', false)
-      this.$emit('accepted', accepted)
+    hide (e) {
+      this.$emit('update:show', false)
+      this.$emit('hide', e)
     },
     toggle (newVal) {
-      setTimeout(() => { this.isVisible = newVal }, 0)
+      setTimeout(() => { this.visible = newVal }, 0)
       if (!this.noFade) {
         this.isTransitioning = true
         clearTimeout(this.timeout)

src/components/Modal/tests/CModal.spec.js

@@ -5,7 +5,7 @@ const ComponentName = 'CModal'
 const defaultWrapper = mount(Component)
 const customWrapper = mount(Component, {
   propsData: {
-    visible: true,
+    show: true,
     centered: true,
     title: 'modal title',
     size: 'lg',
@@ -37,11 +37,11 @@ describe(ComponentName, () => {
   it('hides on backdrop click', () => {
     const click = () => customWrapper.find('.modal').trigger('click')
     click()
-    expect(customWrapper.emitted().accepted).not.toBeTruthy()
+    expect(customWrapper.emitted().hide).not.toBeTruthy()
 
     customWrapper.setProps({ noCloseOnBackdrop: false })
     click()
-    expect(customWrapper.emitted().accepted).toBeTruthy()
+    expect(customWrapper.emitted().hide).toBeTruthy()
   })
   it('doesnt animate when noFade prop is set', () => {
     defaultWrapper.setProps({ noFade: true })
@@ -51,7 +51,7 @@ describe(ComponentName, () => {
   it('toggles visibility correctly', () => {
     jest.useFakeTimers()
 
-    customWrapper.setProps({ visible: false })
+    customWrapper.setProps({ show: false })
     expect(customWrapper.vm.isTransitioning).toBe(true)
     jest.runAllTimers()
 

src/components/Modal/tests/__snapshots__/CModal.spec.js.snap

@@ -14,7 +14,7 @@ exports[`CModal renders correctly 1`] = `
       <div
         class="modal-content"
       >
-        <div
+        <header
           class="modal-header"
         >
           <h5
@@ -34,33 +34,33 @@ exports[`CModal renders correctly 1`] = `
               ×
             </span>
           </button>
-        </div>
+        </header>
          
         <div
           class="modal-body"
         />
          
-        <div
+        <footer
           class="modal-footer"
         >
           <button
             class="btn btn-secondary"
             type="button"
           >
             
-              Cancel
-            
+                Cancel
+              
           </button>
            
           <button
             class="btn btn-primary"
             type="button"
           >
             
-              OK
-            
+                OK
+              
           </button>
-        </div>
+        </footer>
       </div>
     </div>
   </div>
@@ -83,7 +83,7 @@ exports[`CModal renders correctly 2`] = `
       <div
         class="additional-content-class modal-content border-success"
       >
-        <div
+        <header
           class="modal-header"
         >
           <h5
@@ -103,7 +103,7 @@ exports[`CModal renders correctly 2`] = `
               ×
             </span>
           </button>
-        </div>
+        </header>
          
         <div
           class="modal-body"

src/components/index.d.ts

@@ -369,7 +369,7 @@ export declare class CMedia extends Vue {
 }
 
 export declare class CModal extends Vue {
-  visible: boolean
+  show: boolean
   centered: boolean
   title: string
   size: string
@@ -571,7 +571,7 @@ export declare class CTabs extends Vue {
 }
 
 export declare class CTab extends Vue {
-  titleHtml: string, 
+  titleHtml: string 
   active: boolean
   disabled: boolean
 }