fix: CCol and CModal

Author: rakieta2015

src/components/grid/CCol.vue

@@ -11,6 +11,7 @@ export default {
     md: [ Boolean, String, Number, Object ],
     lg: [ Boolean, String, Number, Object ],
     xl: [ Boolean, String, Number, Object ],
+    xxl: [ Boolean, String, Number, Object ],
     tag: {
       type: String,
       default: 'div'
@@ -24,7 +25,8 @@ export default {
       'sm': '-sm', 
       'md': '-md', 
       'lg': '-lg', 
-      'xl': '-xl'
+      'xl': '-xl',
+      'xxl': '-xxl',
     }
     Object.keys(suffixes).forEach((key) => {
       const prop = props[key]

src/components/grid/tests/CCol.spec.js

@@ -9,7 +9,8 @@ const customWrapper = mount(Component, {
     sm: 12,
     md: { size: 6, offset: 3, order: 1},
     lg: {},
-    xl: true
+    xl: true,
+    xxl: { size: 4, offset: 2, order: 1}
   },
   slots: {
     default: 'CCol content'

src/components/grid/tests/__snapshots__/CCol.spec.js.snap

@@ -8,7 +8,7 @@ exports[`CCol renders correctly 1`] = `
 
 exports[`CCol renders correctly 2`] = `
 <div
-  class="col-sm-12 col-md-6 offset-md-3 order-md-1 col-xl"
+  class="col-sm-12 col-md-6 offset-md-3 order-md-1 col-xl col-xxl-4 offset-xxl-2 order-xxl-1"
 >
   <template>
     CCol content

src/components/index.d.ts

@@ -286,6 +286,7 @@ export declare class CCol extends Vue {
   md?:  boolean | string | number | object 
   lg?:  boolean | string | number | object 
   xl?:  boolean | string | number | object 
+  xxl?:  boolean | string | number | object
   tag?: string
 }
 

src/components/modal/CModal.vue

@@ -84,7 +84,8 @@ export default {
       type: Boolean,
       default: true
     },
-    addContentClasses: [String, Array, Object]
+    addContentClasses: [String, Array, Object],
+    onKey: Function,
   },
   data () {
     return {
@@ -147,9 +148,26 @@ export default {
     },
     hide (e, accept = false) {
       this.$emit('update:show', false, e, accept)
+      if(this.visible){
+        window.removeEventListener("keydown", this.hideEsc ); 
+      }
+    },
+    hideEsc (event){
+      if(typeof this.onKey != 'undefined'){
+        if(this.onKey('', event.keyCode)!==false){
+          this.hide(event)
+        }
+      }else{
+        if(event.keyCode == '27'){
+          this.hide(event)
+        }
+      }
     },
     toggle (newVal) {
       setTimeout(() => { this.visible = newVal }, 0)
+      if(newVal){
+        window.addEventListener('keydown', this.hideEsc );
+      }
       if (this.fade) {
         this.isTransitioning = true
         clearTimeout(this.timeout)
@@ -158,6 +176,11 @@ export default {
         }, 150)
       }
     }
+  },
+  mounted: function(){
+    if(this.show){
+      window.addEventListener('keydown', this.hideEsc );
+    }
   }
 }
 </script>

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

@@ -2,7 +2,16 @@ import { mount } from '@vue/test-utils'
 import Component from '../CModal'
 
 const ComponentName = 'CModal'
-const defaultWrapper = mount(Component)
+const defaultWrapper = mount(Component, { attachToDocument: true })
+const defaultWrapper2 = mount(Component, { 
+  propsData: {
+    show: true,
+    onKey: function(type, key){
+      return key===32
+    }
+  },
+  attachToDocument: true 
+})
 const customWrapper = mount(Component, {
   propsData: {
     show: true,
@@ -14,7 +23,7 @@ const customWrapper = mount(Component, {
     fade: true,
     backdrop: true,
     closeOnBackdrop: false,
-    addContentClasses: 'additional-content-class'
+    addContentClasses: 'additional-content-class',
   },
   slots: {
     default: 'CModal body'
@@ -58,4 +67,16 @@ describe(ComponentName, () => {
     }, 200)
     jest.runAllTimers()
   })
+  it('Close on default key -> ESC (modal donot show=true on mounted)', () => {
+    defaultWrapper.setProps(
+    { 
+      show: true, 
+    })
+    defaultWrapper.trigger('keydown.esc')
+    expect(defaultWrapper.emitted()['update:show']).toBeTruthy()
+  })
+  it('Close on key defined in onKey function (modal show=true on mounted)', () => {
+    defaultWrapper2.trigger('keydown.space')
+    expect(defaultWrapper2.emitted()['update:show']).toBeTruthy()
+  })
 })