Merge branch 'alanbosco-feature-backdrop' into v1.x

* alanbosco-feature-backdrop:
  Added new props for and hide backdrop
  Added new props for backdrop-click

Author: mariomka

README.md

@@ -119,6 +119,8 @@ auto | `Boolean` | `false` | Auto continue/close on select.
 week-start | `Number` | auto from locale if _weekstart_ is available or `1` | First day of the week. 1 is Monday and 7 is Sunday.
 flow | `Array` | Depends of *type* | Customize steps flow, steps available: time, date, month, year. Example: ['year', 'date', 'time']
 title | `String` | `''` | Popup title.
+hide-backdrop | `Boolean` | `false` | Show/Hide backdrop.
+backdrop-click | `Boolean` | `true` | Enable/Disable backdrop click to cancel (outside click).
 
 Input inherits all props not defined above but `style` and `class` will be inherited by root element. [See inheritAttrs option](https://vuejs.org/v2/api/#inheritAttrs)
 

src/Datetime.vue

@@ -14,7 +14,7 @@
     <input v-if="hiddenName" type="hidden" :name="hiddenName" :value="value" @input="setValue">
     <slot name="after"></slot>
     <transition-group name="vdatetime-fade" tag="div">
-      <div key="overlay" v-if="isOpen" class="vdatetime-overlay" @click.self="cancel"></div>
+      <div key="overlay" v-if="isOpen && !hideBackdrop" class="vdatetime-overlay" @click.self="clickOutside"></div>
       <datetime-popup
           key="popup"
           v-if="isOpen"
@@ -134,6 +134,14 @@ export default {
     },
     title: {
       type: String
+    },
+    hideBackdrop: {
+      type: Boolean,
+      default: false
+    },
+    backdropClick: {
+      type: Boolean,
+      default: true
     }
   },
 
@@ -217,6 +225,9 @@ export default {
     cancel () {
       this.close()
     },
+    clickOutside () {
+      if (this.backdropClick === true) { this.cancel() }
+    },
     newPopupDatetime () {
       let datetime = DateTime.utc().setZone(this.zone).set({ seconds: 0, milliseconds: 0 })
 

test/specs/Datetime.spec.js

@@ -875,6 +875,40 @@ describe('Datetime.vue', function () {
         })
       })
     })
+
+    it('should not close when clicking the overlay', function (done) {
+      const vm = createVM(this,
+        `<Datetime :backdropClick="false"></Datetime>`,
+        {
+          components: { Datetime }
+        })
+
+      vm.$('.vdatetime-input').click()
+
+      vm.$nextTick(() => {
+        vm.$('.vdatetime-overlay').click()
+        vm.$nextTick(() => {
+          expect(vm.$('.vdatetime-overlay')).to.exist
+          expect(vm.$('.vdatetime-popup')).to.exist
+          done()
+        })
+      })
+    })
+
+    it('should not render overlay', function (done) {
+      const vm = createVM(this,
+        `<Datetime :hideBackdrop="true"></Datetime>`,
+        {
+          components: { Datetime }
+        })
+
+      vm.$('.vdatetime-input').click()
+
+      vm.$nextTick(() => {
+        expect(vm.$('.vdatetime-overlay')).to.not.exist
+        done()
+      })
+    })
   })
 
   describe('events', function () {