Merge f22779a into bf28bca

src/components/DateInput.vue

@@ -102,7 +102,7 @@ export default {
   },
   methods: {
     showCalendar () {
-      this.$emit('showCalendar')
+      this.$emit('show-calendar')
     },
     /**
      * Attempt to parse a typed date
@@ -121,7 +121,7 @@ export default {
         const typedDate = Date.parse(this.input.value)
         if (!isNaN(typedDate)) {
           this.typedDate = this.input.value
-          this.$emit('typedDate', new Date(this.typedDate))
+          this.$emit('typed-date', new Date(this.typedDate))
         }
       }
     },
@@ -136,13 +136,13 @@ export default {
         this.typedDate = null
       }
 
-      this.$emit('closeCalendar')
+      this.$emit('close-calendar')
     },
     /**
      * emit a clearDate event
      */
     clearDate () {
-      this.$emit('clearDate')
+      this.$emit('clear-date')
     }
   },
   mounted () {

src/components/Datepicker.vue

@@ -22,10 +22,10 @@
       :required="required"
       :bootstrapStyling="bootstrapStyling"
       :use-utc="useUtc"
-      @showCalendar="showCalendar"
-      @closeCalendar="close"
-      @typedDate="setTypedDate"
-      @clearDate="clearDate">
+      @show-calendar="showCalendar"
+      @close-calendar="close"
+      @typed-date="setTypedDate"
+      @clear-date="clearDate">
       <slot name="afterDateInput" slot="afterDateInput"></slot>
     </date-input>
 
@@ -48,10 +48,10 @@
       :mondayFirst="mondayFirst"
       :dayCellContent="dayCellContent"
       :use-utc="useUtc"
-      @changedMonth="handleChangedMonthFromDayPicker"
-      @selectDate="selectDate"
-      @showMonthCalendar="showMonthCalendar"
-      @selectedDisabled="selectDisabledDate">
+      @changed-month="handleChangedMonthFromDayPicker"
+      @select-date="selectDate"
+      @show-month-calendar="showMonthCalendar"
+      @selected-disabled="selectDisabledDate">
       <slot name="beforeCalendarHeader" slot="beforeCalendarHeader"></slot>
     </picker-day>
 
@@ -68,9 +68,9 @@
       :translation="translation"
       :isRtl="isRtl"
       :use-utc="useUtc"
-      @selectMonth="selectMonth"
-      @showYearCalendar="showYearCalendar"
-      @changedYear="setPageDate">
+      @select-month="selectMonth"
+      @show-year-calendar="showYearCalendar"
+      @changed-year="setPageDate">
       <slot name="beforeCalendarHeader" slot="beforeCalendarHeader"></slot>
     </picker-month>
 
@@ -87,8 +87,8 @@
       :translation="translation"
       :isRtl="isRtl"
       :use-utc="useUtc"
-      @selectYear="selectYear"
-      @changedDecade="setPageDate">
+      @select-year="selectYear"
+      @changed-decade="setPageDate">
       <slot name="beforeCalendarHeader" slot="beforeCalendarHeader"></slot>
     </picker-year>
   </div>
@@ -357,7 +357,7 @@ export default {
      * @param {Object} date
      */
     selectDisabledDate (date) {
-      this.$emit('selectedDisabled', date)
+      this.$emit('selected-disabled', date)
     },
     /**
      * @param {Object} month
@@ -366,7 +366,7 @@ export default {
       const date = new Date(month.timestamp)
       if (this.allowedToShowView('day')) {
         this.setPageDate(date)
-        this.$emit('changedMonth', month)
+        this.$emit('changed-month', month)
         this.showDayCalendar()
       } else {
         this.selectDate(month)
@@ -379,7 +379,7 @@ export default {
       const date = new Date(year.timestamp)
       if (this.allowedToShowView('month')) {
         this.setPageDate(date)
-        this.$emit('changedYear', year)
+        this.$emit('changed-year', year)
         this.showMonthCalendar()
       } else {
         this.selectDate(year)
@@ -420,7 +420,7 @@ export default {
      */
     handleChangedMonthFromDayPicker (date) {
       this.setPageDate(date)
-      this.$emit('changedMonth', date)
+      this.$emit('changed-month', date)
     },
     /**
      * Set the date from a typedDate event

src/components/PickerDay.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="[calendarClass, 'vdp-datepicker__calendar']" v-show="showDayView" :style="calendarStyle" @mousedown.prevent>
+  <div :class="[calendarClass, 'vdp-datepicker__calendar']" v-show="showDayView" :style="calendarStyle" @mousedown.prevent ref="datepicker">
     <slot name="beforeCalendarHeader"></slot>
     <header>
       <span
@@ -55,6 +55,31 @@ export default {
       utils: constructedDateUtils
     }
   },
+  watch: {
+    showDayView: function () {
+      if (this.showDayView) {
+        this.$nextTick(() => {
+          let parent = document.querySelector('#worklist')
+          if (parent) {
+            let calendar = this.$refs.datepicker
+
+            let outOfBoundsRight = calendar.getBoundingClientRect().right > parent.getBoundingClientRect().right
+            let outOfBoundsBottom = calendar.getBoundingClientRect().bottom > parent.getBoundingClientRect().bottom
+
+            if (outOfBoundsBottom) {
+              let bottom = (calendar.getBoundingClientRect().bottom - parent.getBoundingClientRect().bottom) + 15
+              calendar.style.top = `-${bottom}px`
+            }
+
+            if (outOfBoundsRight) {
+              let right = (calendar.getBoundingClientRect().right - parent.getBoundingClientRect().right) + 15
+              calendar.style.left = `-${right}px`
+            }
+          }
+        })
+      }
+    }
+  },
   computed: {
     /**
      * Returns an array of day names
@@ -157,10 +182,10 @@ export default {
   methods: {
     selectDate (date) {
       if (date.isDisabled) {
-        this.$emit('selectedDisabled', date)
+        this.$emit('selected-disabled', date)
         return false
       }
-      this.$emit('selectDate', date)
+      this.$emit('select-date', date)
     },
     /**
      * @return {Number}
@@ -172,7 +197,7 @@ export default {
      * Emit an event to show the month picker
      */
     showMonthCalendar () {
-      this.$emit('showMonthCalendar')
+      this.$emit('show-month-calendar')
     },
     /**
      * Change the page month
@@ -181,7 +206,7 @@ export default {
     changeMonth (incrementBy) {
       let date = this.pageDate
       this.utils.setMonth(date, this.utils.getMonth(date) + incrementBy)
-      this.$emit('changedMonth', date)
+      this.$emit('changed-month', date)
     },
     /**
      * Decrement the page month

src/components/PickerMonth.vue

@@ -96,7 +96,7 @@ export default {
       if (month.isDisabled) {
         return false
       }
-      this.$emit('selectMonth', month)
+      this.$emit('select-month', month)
     },
     /**
      * Changes the year up or down
@@ -105,7 +105,7 @@ export default {
     changeYear (incrementBy) {
       let date = this.pageDate
       this.utils.setFullYear(date, this.utils.getFullYear(date) + incrementBy)
-      this.$emit('changedYear', date)
+      this.$emit('changed-year', date)
     },
     /**
      * Decrements the year
@@ -147,7 +147,7 @@ export default {
      * Emits an event that shows the year calendar
      */
     showYearCalendar () {
-      this.$emit('showYearCalendar')
+      this.$emit('show-year-calendar')
     },
     /**
      * Whether the selected date is in this month

src/components/PickerYear.vue

@@ -95,12 +95,12 @@ export default {
       if (year.isDisabled) {
         return false
       }
-      this.$emit('selectYear', year)
+      this.$emit('select-year', year)
     },
     changeYear (incrementBy) {
       let date = this.pageDate
       this.utils.setFullYear(date, this.utils.getFullYear(date) + incrementBy)
-      this.$emit('changedDecade', date)
+      this.$emit('changed-decade', date)
     },
     previousDecade () {
       if (this.isPreviousDecadeDisabled()) {

test/unit/specs/DateInput/DateInput.spec.js

@@ -41,9 +41,9 @@ describe('DateInput', () => {
     expect(wrapper.find('input').element.value).toEqual('2016/1/15')
   })
 
-  it('emits showCalendar', () => {
+  it('emits show-calendar', () => {
     wrapper.vm.showCalendar()
-    expect(wrapper.emitted().showCalendar).toBeTruthy()
+    expect(wrapper.emitted('show-calendar')).toBeTruthy()
   })
 
   it('adds bootstrap classes', () => {
@@ -76,8 +76,8 @@ describe('DateInput', () => {
     expect(wrapper.find('input').element.value).toEqual('!')
   })
 
-  it('triggers closeCalendar on blur', () => {
+  it('triggers close-calendar on blur', () => {
     wrapper.find('input').trigger('blur')
-    expect(wrapper.emitted('closeCalendar')).toBeTruthy()
+    expect(wrapper.emitted('close-calendar')).toBeTruthy()
   })
 })

test/unit/specs/DateInput/typedDates.spec.js

@@ -33,8 +33,8 @@ describe('DateInput', () => {
     const input = wrapper.find('input')
     wrapper.vm.input.value = '2018-04-24'
     input.trigger('keyup')
-    expect(wrapper.emitted().typedDate).toBeDefined()
-    expect(wrapper.emitted().typedDate[0][0]).toBeInstanceOf(Date)
+    expect(wrapper.emitted('typed-date')).toBeDefined()
+    expect(wrapper.emitted('typed-date')[0][0]).toBeInstanceOf(Date)
   })
 
   it('emits closeCalendar when return is pressed', () => {
@@ -48,7 +48,7 @@ describe('DateInput', () => {
     const input = wrapper.find('input')
     wrapper.setData({typedDate: 'not a date'})
     input.trigger('blur')
-    expect(wrapper.emitted().clearDate).toBeDefined()
+    expect(wrapper.emitted('clear-date')).toBeDefined()
   })
 
   it('doesn\'t emit the date if typeable=false', () => {
@@ -63,6 +63,6 @@ describe('DateInput', () => {
     wrapper.vm.input.value = '2018-04-24'
     input.trigger('keydown')
     input.trigger('keyup')
-    expect(wrapper.emitted().typedDate).not.toBeDefined()
+    expect(wrapper.emitted('typed-date')).not.toBeDefined()
   })
 })

test/unit/specs/Datepicker/Datepicker.spec.js

@@ -102,7 +102,7 @@ describe('Datepicker mounted', () => {
   it('should emit selectedDisabled on a disabled timestamp', () => {
     const date = new Date(2016, 9, 1)
     wrapper.vm.selectDisabledDate({timestamp: date.getTime()})
-    expect(wrapper.emitted().selectedDisabled).toBeTruthy()
+    expect(wrapper.emitted('selected-disabled')).toBeTruthy()
   })
 
   it('can select a day', () => {
@@ -117,17 +117,17 @@ describe('Datepicker mounted', () => {
   it('can select a month', () => {
     const date = new Date(2016, 9, 9)
     wrapper.vm.selectMonth({timestamp: date.getTime()})
-    expect(wrapper.emitted().changedMonth).toBeTruthy()
-    expect(wrapper.emitted().changedMonth[0][0].timestamp).toEqual(date.getTime())
+    expect(wrapper.emitted('changed-month')).toBeTruthy()
+    expect(wrapper.emitted('changed-month')[0][0].timestamp).toEqual(date.getTime())
     expect(new Date(wrapper.vm.pageTimestamp).getMonth()).toEqual(date.getMonth())
     expect(wrapper.vm.showDayView).toEqual(true)
   })
 
   it('can select a year', () => {
     const date = new Date(2018, 9, 9)
     wrapper.vm.selectYear({timestamp: date.getTime()})
-    expect(wrapper.emitted().changedYear).toBeTruthy()
-    expect(wrapper.emitted().changedYear[0][0].timestamp).toEqual(date.getTime())
+    expect(wrapper.emitted('changed-year')).toBeTruthy()
+    expect(wrapper.emitted('changed-year')[0][0].timestamp).toEqual(date.getTime())
     expect(new Date(wrapper.vm.pageTimestamp).getFullYear()).toEqual(date.getFullYear())
     expect(wrapper.vm.showMonthView).toEqual(true)
   })
@@ -204,7 +204,7 @@ describe('Datepicker mounted', () => {
   it('should emit changedMonth on a month change received from PickerDay', () => {
     const date = new Date(2016, 9, 1)
     wrapper.vm.handleChangedMonthFromDayPicker({timestamp: date.getTime()})
-    expect(wrapper.emitted().changedMonth).toBeTruthy()
+    expect(wrapper.emitted('changed-month')).toBeTruthy()
   })
 })
 

test/unit/specs/PickerDay/changeMonths.spec.js

@@ -17,13 +17,13 @@ describe('PickerDay: changing months', () => {
 
   it('can set the next month', () => {
     wrapper.vm.nextMonth()
-    expect(wrapper.emitted().changedMonth).toBeTruthy()
-    expect(wrapper.emitted().changedMonth[0][0].getMonth()).toEqual(2)
+    expect(wrapper.emitted('changed-month')).toBeTruthy()
+    expect(wrapper.emitted('changed-month')[0][0].getMonth()).toEqual(2)
   })
 
   it('can set the previous month', () => {
     wrapper.vm.previousMonth()
-    expect(wrapper.emitted().changedMonth).toBeTruthy()
-    expect(wrapper.emitted().changedMonth[0][0].getMonth()).toEqual(0)
+    expect(wrapper.emitted('changed-month')).toBeTruthy()
+    expect(wrapper.emitted('changed-month')[0][0].getMonth()).toEqual(0)
   })
 })

test/unit/specs/PickerDay/disabledDates.spec.js

@@ -109,6 +109,6 @@ describe('PickerDay: disabled', () => {
 
   it('should emit a selectedDisabled event for a disabled date', () => {
     expect(wrapper.vm.selectDate({isDisabled: true})).toEqual(false)
-    expect(wrapper.emitted().selectedDisabled).toBeTruthy()
+    expect(wrapper.emitted('selected-disabled')).toBeTruthy()
   })
 })

test/unit/specs/PickerDay/pickerDay.spec.js

@@ -26,7 +26,7 @@ describe('PickerDay: DOM', () => {
 
   it('emits an event when selected', () => {
     wrapper.vm.selectDate({isDisabled: false})
-    expect(wrapper.emitted().selectDate).toBeTruthy()
+    expect(wrapper.emitted('select-date')).toBeTruthy()
   })
 
   it('knows the current page month', () => {
@@ -36,6 +36,6 @@ describe('PickerDay: DOM', () => {
   it('emits show year calendar event when clicked on the year', () => {
     const yearBtn = wrapper.find('.day__month_btn')
     yearBtn.trigger('click')
-    expect(wrapper.emitted().showMonthCalendar).toBeTruthy()
+    expect(wrapper.emitted('show-month-calendar')).toBeTruthy()
   })
 })

test/unit/specs/PickerMonth/pickerMonth.spec.js

@@ -26,24 +26,24 @@ describe('PickerMonth', () => {
 
   it('can set the next year', () => {
     wrapper.vm.nextYear()
-    expect(wrapper.emitted().changedYear[0][0].getFullYear()).toEqual(2019)
+    expect(wrapper.emitted('changed-year')[0][0].getFullYear()).toEqual(2019)
   })
 
   it('can set the previous year', () => {
     wrapper.vm.previousYear()
-    expect(wrapper.emitted().changedYear[0][0].getFullYear()).toEqual(2017)
+    expect(wrapper.emitted('changed-year')[0][0].getFullYear()).toEqual(2017)
   })
 
   it('emits date on selection', () => {
     const time = new Date().getTime()
     wrapper.vm.selectMonth({timestamp: time})
-    expect(wrapper.emitted().selectMonth).toBeTruthy()
-    expect(wrapper.emitted().selectMonth[0][0].timestamp).toEqual(time)
+    expect(wrapper.emitted('select-month')).toBeTruthy()
+    expect(wrapper.emitted('select-month')[0][0].timestamp).toEqual(time)
   })
 
   it('emits show year calendar event when clicked on the year', () => {
     const yearBtn = wrapper.find('.month__year_btn')
     yearBtn.trigger('click')
-    expect(wrapper.emitted().showYearCalendar).toBeTruthy()
+    expect(wrapper.emitted('show-year-calendar')).toBeTruthy()
   })
 })