buefy 0.7.9 → 0.8.2

package/src/components/datepicker/Datepicker.vue

@@ -107,6 +107,7 @@
                         :day-names="dayNames"
                         :month-names="monthNames"
                         :first-day-of-week="firstDayOfWeek"
+                        :rules-for-first-week="rulesForFirstWeek"
                         :min-date="minDate"
                         :max-date="maxDate"
                         :focused="focusedDateData"
@@ -120,6 +121,8 @@
                         :type-month="isTypeMonth"
                         :nearby-month-days="nearbyMonthDays"
                         :nearby-selectable-month-days="nearbySelectableMonthDays"
+                        :show-week-number="showWeekNumber"
+                        :range="range"
                         @close="togglePicker(false)"/>
                 </div>
                 <div v-else>
@@ -162,6 +165,7 @@
             :min="formatNative(minDate)"
             :disabled="disabled"
             :readonly="false"
+            :show-week-number="showWeekNumber"
             v-bind="$attrs"
             :use-html5-validation="useHtml5Validation"
             @change.native="onChangeNativePicker"
@@ -186,12 +190,15 @@ import DatepickerTable from './DatepickerTable'
 import DatepickerMonth from './DatepickerMonth'
 
 const defaultDateFormatter = (date, vm) => {
-    const yyyyMMdd = date.getFullYear() +
-        '/' + (date.getMonth() + 1) +
-        '/' + date.getDate()
-    const d = new Date(yyyyMMdd)
-    return !vm.isTypeMonth ? d.toLocaleDateString()
-        : d.toLocaleDateString(undefined, { year: 'numeric', month: '2-digit' })
+    const targetDates = Array.isArray(date) ? date : [date]
+    return targetDates.map((date) => {
+        const yyyyMMdd = date.getFullYear() +
+            '/' + (date.getMonth() + 1) +
+            '/' + date.getDate()
+        const d = new Date(yyyyMMdd)
+        return !vm.isTypeMonth ? d.toLocaleDateString()
+            : d.toLocaleDateString(undefined, { year: 'numeric', month: '2-digit' })
+    }).join(' - ')
 }
 
 const defaultDateParser = (date, vm) => {
@@ -222,7 +229,9 @@ export default {
     mixins: [FormElementMixin],
     inheritAttrs: false,
     props: {
-        value: Date,
+        value: {
+            type: [Date, Array]
+        },
         dayNames: {
             type: Array,
             default: () => {
@@ -351,10 +360,24 @@ export default {
         nearbySelectableMonthDays: {
             type: Boolean,
             default: () => config.defaultDatepickerNearbySelectableMonthDays
+        },
+        showWeekNumber: {
+            type: Boolean,
+            default: () => config.defaultDatepickerShowWeekNumber
+        },
+        rulesForFirstWeek: {
+            type: Number,
+            default: () => 4
+        },
+        range: {
+            type: Boolean,
+            default: false
         }
     },
     data() {
-        const focusedDate = this.value || this.focusedDate || this.dateCreator()
+        const focusedDate = Array.isArray(this.value)
+            ? this.value[0]
+            : (this.value || this.focusedDate || this.dateCreator())
 
         return {
             dateSelected: this.value,
@@ -384,12 +407,12 @@ export default {
         listOfYears() {
             let latestYear = this.focusedDateData.year + this.yearsRange[1]
             if (this.maxDate && this.maxDate.getFullYear() < latestYear) {
-                latestYear = this.maxDate.getFullYear()
+                latestYear = Math.max(this.maxDate.getFullYear(), this.focusedDateData.year)
             }
 
             let earliestYear = this.focusedDateData.year + this.yearsRange[0]
             if (this.minDate && this.minDate.getFullYear() > earliestYear) {
-                earliestYear = this.minDate.getFullYear()
+                earliestYear = Math.min(this.minDate.getFullYear(), this.focusedDateData.year)
             }
 
             const arrayOfYears = []
@@ -478,11 +501,11 @@ export default {
         * Format date into string
         */
         formatValue(value) {
-            if (value && !isNaN(value)) {
-                return this.dateFormatter(value, this)
-            } else {
-                return null
+            if (Array.isArray(value)) {
+                const isArrayWithValidDates = Array.isArray(value) && value.every((v) => !isNaN(v))
+                return isArrayWithValidDates ? this.dateFormatter(value, this) : null
             }
+            return (value && !isNaN(value)) ? this.dateFormatter(value, this) : null
         },
 
         /*
@@ -563,11 +586,13 @@ export default {
         */
         onChangeNativePicker(event) {
             const date = event.target.value
-            this.computedValue = date ? new Date(date) : null
+            this.computedValue = date ? new Date(date + ' 00:00:00') : null
         },
 
         updateInternalState(value) {
-            const currentDate = !value ? this.dateCreator() : value
+            const currentDate = Array.isArray(value)
+                ? value[0]
+                : (!value ? this.dateCreator() : value)
             this.focusedDateData = {
                 month: currentDate.getMonth(),
                 year: currentDate.getFullYear()
@@ -601,7 +626,9 @@ export default {
         */
         toggle() {
             if (this.mobileNative && this.isMobile) {
-                this.$refs.input.$el.click()
+                const input = this.$refs.input.$refs.input
+                input.focus()
+                input.click()
                 return
             }
             this.$refs.dropdown.toggle()
@@ -617,8 +644,8 @@ export default {
         },
 
         /**
-        * Keypress event that is bound to the document.
-        */
+         * Keypress event that is bound to the document.
+         */
         keyPress(event) {
             // Esc key
             if (this.$refs.dropdown && this.$refs.dropdown.isActive && event.keyCode === 27) {

package/src/components/datepicker/DatepickerTable.spec.js

@@ -1,6 +1,5 @@
 import { shallowMount } from '@vue/test-utils'
 import BDatepickerTable from '@components/datepicker/DatepickerTable'
-
 import config, {setOptions} from '@utils/config'
 
 describe('BDatepickerTable', () => {
@@ -36,12 +35,118 @@ describe('BDatepickerTable', () => {
                 dayNames: config.defaultDayNames,
                 monthNames: config.defaultMonthNames,
                 events: [new Date('July 22, 2018 07:22:13'), new Date('July 23, 2018 00:00:00')],
+                focused: {
+                    month: 6,
+                    year: 2018
+                }
+            }
+        })
+        expect(wrapper.vm.eventsInThisWeek(wrapper.vm.weeksInThisMonth[3]).length).toEqual(2)
+    })
+
+    it('emit input event with selected date as payload when updateSelectedDate is called', () => {
+        const wrapper = shallowMount(BDatepickerTable, {
+            propsData: {
+                dayNames: config.defaultDayNames,
+                monthNames: config.defaultMonthNames,
                 focused: {
                     month: config.focusedDate.getMonth(),
                     year: config.focusedDate.getFullYear()
                 }
             }
         })
-        expect(wrapper.vm.eventsInThisWeek(wrapper.vm.weeksInThisMonth[3]).length).toEqual(2)
+        const newDate = new Date()
+        wrapper.vm.updateSelectedDate(newDate)
+        const valueEmitted = wrapper.emitted()['input'][0]
+        expect(valueEmitted).toContainEqual(newDate)
+    })
+
+    describe('#hoveredDateRange', () => {
+        const selectedBeginDate = new Date(2019, 3, 10)
+        const threeDaysAfterBeginDate = new Date(2019, 3, 13)
+        const threeDaysBeforeBeginDate = new Date(2019, 3, 7)
+
+        const defaultProps = () => ({
+            dayNames: config.defaultDayNames,
+            monthNames: config.defaultMonthNames,
+            focused: {
+                month: config.focusedDate.getMonth(),
+                year: config.focusedDate.getFullYear()
+            }
+        })
+
+        it('should return an empty array when props range is false', () => {
+            const wrapper = shallowMount(BDatepickerTable, {
+                propsData: {
+                    ...defaultProps(),
+                    range: false
+                }
+            })
+            expect(wrapper.vm.hoveredDateRange).toEqual([])
+        })
+
+        it('should return an empty array when selectedEndDate exists', () => {
+            const wrapper = shallowMount(BDatepickerTable, {
+                propsData: {
+                    ...defaultProps(),
+                    range: true
+                }
+            })
+            wrapper.setData({
+                selectedBeginDate,
+                selectedEndDate: threeDaysAfterBeginDate
+            })
+            expect(wrapper.vm.hoveredDateRange).toEqual([])
+        })
+
+        it('should return an array of two dates', () => {
+            const wrapper = shallowMount(BDatepickerTable, {
+                propsData: {
+                    ...defaultProps(),
+                    range: true
+                }
+            })
+            wrapper.setData({
+                selectedBeginDate,
+                hoveredEndDate: threeDaysAfterBeginDate
+            })
+            expect(wrapper.vm.hoveredDateRange).toEqual([
+                selectedBeginDate,
+                threeDaysAfterBeginDate
+            ])
+        })
+
+        it('should return the earlier date as the first element', () => {
+            const wrapper = shallowMount(BDatepickerTable, {
+                propsData: {
+                    ...defaultProps(),
+                    range: true
+                }
+            })
+            wrapper.setData({
+                selectedBeginDate,
+                hoveredEndDate: threeDaysBeforeBeginDate
+            })
+            expect(wrapper.vm.hoveredDateRange).toEqual([
+                threeDaysBeforeBeginDate,
+                selectedBeginDate
+            ])
+        })
+
+        it('should filter only defined values', () => {
+            const wrapper = shallowMount(BDatepickerTable, {
+                propsData: {
+                    ...defaultProps(),
+                    range: true
+                }
+            })
+            wrapper.setData({
+                selectedBeginDate,
+                hoveredEndDate: undefined
+            })
+            expect(wrapper.vm.hoveredDateRange).toEqual([
+                selectedBeginDate
+            ])
+        })
     })
 })

package/src/components/datepicker/DatepickerTable.vue

@@ -26,7 +26,13 @@
                 :date-creator="dateCreator"
                 :nearby-month-days="nearbyMonthDays"
                 :nearby-selectable-month-days="nearbySelectableMonthDays"
-                @select="updateSelectedDate"/>
+                :show-week-number="showWeekNumber"
+                :first-day-of-week="firstDayOfWeek"
+                :rules-for-first-week="rulesForFirstWeek"
+                :range="range"
+                :hovered-date-range="hoveredDateRange"
+                @select="updateSelectedDate"
+                @rangeHoverEndDate="setRangeHoverEndDate"/>
         </div>
     </section>
 </template>
@@ -34,13 +40,17 @@
 <script>
 import DatepickerTableRow from './DatepickerTableRow'
 
+const isDefined = (d) => d !== undefined
+
 export default {
     name: 'BDatepickerTable',
     components: {
         [DatepickerTableRow.name]: DatepickerTableRow
     },
     props: {
-        value: Date,
+        value: {
+            type: [Date, Array]
+        },
         dayNames: Array,
         monthNames: Array,
         firstDayOfWeek: Number,
@@ -55,7 +65,23 @@ export default {
         unselectableDaysOfWeek: Array,
         selectableDates: Array,
         nearbyMonthDays: Boolean,
-        nearbySelectableMonthDays: Boolean
+        nearbySelectableMonthDays: Boolean,
+        showWeekNumber: {
+            type: Boolean,
+            default: () => false
+        },
+        rulesForFirstWeek: {
+            type: Number,
+            default: () => 4
+        },
+        range: Boolean
+    },
+    data() {
+        return {
+            selectedBeginDate: undefined,
+            selectedEndDate: undefined,
+            hoveredEndDate: undefined
+        }
     },
     computed: {
         visibleDayNames() {
@@ -66,6 +92,7 @@ export default {
                 visibleDayNames.push(currentDayName)
                 index++
             }
+            if (this.showWeekNumber) visibleDayNames.unshift('')
             return visibleDayNames
         },
 
@@ -129,6 +156,18 @@ export default {
             }
 
             return weeksInThisMonth
+        },
+        hoveredDateRange() {
+            if (!this.range) {
+                return []
+            }
+            if (!isNaN(this.selectedEndDate)) {
+                return []
+            }
+            if (this.hoveredEndDate < this.selectedBeginDate) {
+                return [this.hoveredEndDate, this.selectedBeginDate].filter(isDefined)
+            }
+            return [this.selectedBeginDate, this.hoveredEndDate].filter(isDefined)
         }
     },
     methods: {
@@ -136,7 +175,33 @@ export default {
         * Emit input event with selected date as payload for v-model in parent
         */
         updateSelectedDate(date) {
-            this.$emit('input', date)
+            if (!this.range) {
+                this.$emit('input', date)
+            } else {
+                this.handleSelectRangeDate(date)
+            }
+        },
+
+        /*
+        * If both begin and end dates are set, reset the end date and set the begin date.
+        * If only begin date is selected, emit an array of the begin date and the new date.
+        * If not set, only set the begin date.
+        */
+        handleSelectRangeDate(date) {
+            if (this.selectedBeginDate && this.selectedEndDate) {
+                this.selectedBeginDate = date
+                this.selectedEndDate = undefined
+            } else if (this.selectedBeginDate && !this.selectedEndDate) {
+                if (this.selectedBeginDate > date) {
+                    this.selectedEndDate = this.selectedBeginDate
+                    this.selectedBeginDate = date
+                } else {
+                    this.selectedEndDate = date
+                }
+                this.$emit('input', [this.selectedBeginDate, this.selectedEndDate])
+            } else {
+                this.selectedBeginDate = date
+            }
         },
 
         /*
@@ -185,6 +250,10 @@ export default {
 
                 return week.some((weekDate) => weekDate.getTime() === timed)
             })
+        },
+
+        setRangeHoverEndDate(day) {
+            this.hoveredEndDate = day
         }
     }
 }

package/src/components/datepicker/DatepickerTableRow.spec.js

@@ -1,26 +1,136 @@
 import { shallowMount } from '@vue/test-utils'
 import BDatepickerTableRow from '@components/datepicker/DatepickerTableRow'
 
+const propsData = {
+    week: [
+        new Date('Sun Dec 31 2017 00:00:00 GMT-0200 (-02)'),
+        new Date('Mon Jan 01 2018 00:00:00 GMT-0200 (-02)'),
+        new Date('Tue Jan 02 2018 00:00:00 GMT-0200 (-02)'),
+        new Date('Wed Jan 03 2018 00:00:00 GMT-0200 (-02)'),
+        new Date('Thu Jan 04 2018 00:00:00 GMT-0200 (-02)'),
+        new Date('Fri Jan 05 2018 00:00:00 GMT-0200 (-02)'),
+        new Date('Sat Jan 06 2018 00:00:00 GMT-0200 (-02)')
+    ],
+    month: 12,
+    dateCreator: function () {
+        return new Date()
+    }
+}
+
 describe('BDatepickerTableRow', () => {
     it('is called', () => {
-        const wrapper = shallowMount(BDatepickerTableRow, {
-            propsData: {
-                week: [
-                    new Date('Sun Dec 31 2017 00:00:00 GMT-0200 (-02)'),
-                    new Date('Mon Jan 01 2018 00:00:00 GMT-0200 (-02)'),
-                    new Date('Tue Jan 02 2018 00:00:00 GMT-0200 (-02)'),
-                    new Date('Wed Jan 03 2018 00:00:00 GMT-0200 (-02)'),
-                    new Date('Thu Jan 04 2018 00:00:00 GMT-0200 (-02)'),
-                    new Date('Fri Jan 05 2018 00:00:00 GMT-0200 (-02)'),
-                    new Date('Sat Jan 06 2018 00:00:00 GMT-0200 (-02)')
-                ],
-                month: 12,
-                dateCreator: function () {
-                    return new Date()
-                }
-            }
-        })
+        const wrapper = shallowMount(BDatepickerTableRow, { propsData })
         expect(wrapper.name()).toBe('BDatepickerTableRow')
         expect(wrapper.isVueInstance()).toBeTruthy()
     })
+
+    describe('classObject', function () {
+        it('should have is-selected class for all range of dates selected', function () {
+            const wrapper = shallowMount(BDatepickerTableRow, {
+                propsData: {
+                    ...propsData,
+                    selectedDate: [propsData.week[1], propsData.week[5]]
+                }
+            })
+            expect(wrapper.findAll('.is-selected').length).toBe(5)
+        })
+
+        it('should have is-first-selected class for the first date selected within the range', function () {
+            const wrapper = shallowMount(BDatepickerTableRow, {
+                propsData: {
+                    ...propsData,
+                    selectedDate: [propsData.week[1], propsData.week[5]]
+                }
+            })
+            const {wrappers: [firstSelectedCell]} = wrapper.findAll('.is-selected')
+            expect(firstSelectedCell.classes()).toContain('is-first-selected')
+        })
+
+        it('should have is-within-selected class for the dates selected within the range', function () {
+            const wrapper = shallowMount(BDatepickerTableRow, {
+                propsData: {
+                    ...propsData,
+                    selectedDate: [propsData.week[1], propsData.week[5]]
+                }
+            })
+            const withinSelectedRangeCells = wrapper.findAll('.is-selected.is-within-selected')
+            expect(withinSelectedRangeCells.length).toBe(3)
+        })
+
+        it('should have is-last-selected class for the last date selected within the range', function () {
+            const wrapper = shallowMount(BDatepickerTableRow, {
+                propsData: {
+                    ...propsData,
+                    selectedDate: [propsData.week[1], propsData.week[5]]
+                }
+            })
+            // wrappers should return 5 elements. Destructure to get the last one
+            const {wrappers: [, , , , lastSelectedCell]} = wrapper.findAll('.is-selected')
+            expect(lastSelectedCell.classes()).toContain('is-last-selected')
+        })
+
+        it('should has is-selected class for all range of dates selected', function () {
+            const wrapper = shallowMount(BDatepickerTableRow, {
+                propsData: {
+                    ...propsData,
+                    selectedDate: [propsData.week[1], propsData.week[5]]
+                }
+            })
+            expect(wrapper.findAll('.is-selected').length).toBe(5)
+        })
+
+        it('should have is-within-hovered-range class for all range of dates hovered', function () {
+            const wrapper = shallowMount(BDatepickerTableRow, {
+                propsData: {
+                    ...propsData,
+                    selectedDate: [propsData.week[1], propsData.week[5]]
+                }
+            })
+            expect(wrapper.findAll('.is-selected').length).toBe(5)
+        })
+
+        it('should have is-first-hovered class for the first date hovered within the range', function () {
+            const wrapper = shallowMount(BDatepickerTableRow, {
+                propsData: {
+                    ...propsData,
+                    hoveredDateRange: [propsData.week[1], propsData.week[2]]
+                }
+            })
+            const {wrappers: [firstHoveredCell]} = wrapper.findAll('.is-within-hovered-range')
+            expect(firstHoveredCell.classes()).toContain('is-first-hovered')
+        })
+
+        it('should have is-within-hovered class for the dates hovered within the range', function () {
+            const wrapper = shallowMount(BDatepickerTableRow, {
+                propsData: {
+                    ...propsData,
+                    hoveredDateRange: [propsData.week[1], propsData.week[5]]
+                }
+            })
+            const withinHoveredRangeCells = wrapper.findAll('.is-within-hovered-range.is-within-hovered')
+            expect(withinHoveredRangeCells.length).toBe(3)
+        })
+
+        it('should have is-last-hovered class for the last date hovered within the range', function () {
+            const wrapper = shallowMount(BDatepickerTableRow, {
+                propsData: {
+                    ...propsData,
+                    hoveredDateRange: [propsData.week[1], propsData.week[5]]
+                }
+            })
+            // wrappers should return 5 elements. Destructure to get the last one
+            const {wrappers: [, , , , lastHoveredCell]} = wrapper.findAll('.is-within-hovered-range')
+            expect(lastHoveredCell.classes()).toContain('is-last-hovered')
+        })
+
+        it('should has is-within-hovered-range class for all range of dates hovered', function () {
+            const wrapper = shallowMount(BDatepickerTableRow, {
+                propsData: {
+                    ...propsData,
+                    hoveredDateRange: [propsData.week[1], propsData.week[5]]
+                }
+            })
+            expect(wrapper.findAll('.is-within-hovered-range').length).toBe(5)
+        })
+    })
 })