feat(pickers): Add slide transition on page change

Author: mst101

src/components/Datepicker.vue

@@ -72,13 +72,15 @@
           :show-edge-dates="showEdgeDates"
           :show-full-month-name="fullMonthName"
           :show-header="showHeader"
+          :transition-name="transitionName"
           :translation="translation"
           :use-utc="useUtc"
           :view="view || computedInitialView"
           :year-range="yearPickerRange"
           @page-change="handlePageChange"
           @select="handleSelect"
           @select-disabled="handleSelectDisabled"
+          @set-transition-name="setTransitionName($event)"
           @set-view="setView"
         >
           <template v-for="slotKey of calendarSlots">
@@ -226,6 +228,7 @@ export default {
        * {Date}
        */
       selectedDate: null,
+      transitionName: '',
       utils,
       view: '',
     }
@@ -477,6 +480,19 @@ export default {
       }
       this.pageTimestamp = this.utils.setDate(new Date(dateTemp), 1)
     },
+    /**
+     * Sets the direction of the slide transition
+     * @param {Number} plusOrMinus Positive for the future; negative for the past
+     */
+    setTransitionName(plusOrMinus) {
+      const isInTheFuture = plusOrMinus > 0
+
+      if (this.isRtl) {
+        this.transitionName = isInTheFuture ? 'slide-left' : 'slide-right'
+      } else {
+        this.transitionName = isInTheFuture ? 'slide-right' : 'slide-left'
+      }
+    },
     /**
      * Set the datepicker value
      * @param {Date|String|Number|null} date

src/components/PickerCells.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="picker-cells">
     <span
       v-for="cell in cells"
       :key="cell.timestamp"
@@ -23,12 +23,37 @@ export default {
       type: Boolean,
       default: true,
     },
+    transitionName: {
+      type: String,
+      default: '',
+    },
     view: {
       type: String,
       validator: (val) => ['day', 'month', 'year'].includes(val),
       required: true,
     },
   },
+  data() {
+    return {
+      cellHeight: 0,
+    }
+  },
+  computed: {
+    wrapperHeight() {
+      const columns = this.view === 'day' ? 7 : 3
+      const rows = Math.ceil(this.cells.length / columns)
+
+      return rows * this.cellHeight
+    },
+  },
+  watch: {
+    wrapperHeight() {
+      this.$parent.$refs.cellsWrapper.style.height = `${this.wrapperHeight}px`
+    },
+  },
+  mounted() {
+    this.cellHeight = this.getCellHeight()
+  },
   methods: {
     /**
      * Set the classes for a specific cell
@@ -57,6 +82,22 @@ export default {
         },
       ]
     },
+
+    /**
+     * Get the cell height
+     */
+    /* eslint no-param-reassign: 0 */
+    getCellHeight() {
+      const popup = this.$parent.$parent.$el
+      const originalDisplay = popup.style.display
+      const originalVisibility = popup.style.visibility
+      popup.style.display = 'block'
+      popup.style.visibility = 'hidden'
+      const height = this.$el.children[0].offsetHeight
+      popup.style.display = originalDisplay
+      popup.style.visibility = originalVisibility
+      return height
+    },
   },
 }
 </script>

src/components/PickerDay.vue

@@ -27,17 +27,21 @@
         </span>
       </div>
 
-      <PickerCells
-        ref="cells"
-        :key="pageTitleDay"
-        v-slot="{ cell }"
-        :cells="cells"
-        :show-edge-dates="showEdgeDates"
-        view="day"
-        @select="select($event)"
-      >
-        {{ dayCellContent(cell) }}
-      </PickerCells>
+      <div ref="cellsWrapper" class="cells-wrapper">
+        <Transition :name="transitionName">
+          <PickerCells
+            ref="cells"
+            :key="pageTitleDay"
+            v-slot="{ cell }"
+            :cells="cells"
+            :show-edge-dates="showEdgeDates"
+            view="day"
+            @select="select($event)"
+          >
+            {{ dayCellContent(cell) }}
+          </PickerCells>
+        </Transition>
+      </div>
     </div>
 
     <slot name="calendarFooterDay" />

src/components/PickerMonth.vue

@@ -20,16 +20,20 @@
       <slot slot="nextIntervalBtn" name="nextIntervalBtn" />
     </PickerHeader>
 
-    <PickerCells
-      ref="cells"
-      :key="pageTitleMonth"
-      v-slot="{ cell }"
-      :cells="cells"
-      view="month"
-      @select="select($event)"
-    >
-      {{ cell.month }}
-    </PickerCells>
+    <div ref="cellsWrapper" class="cells-wrapper">
+      <Transition :name="transitionName">
+        <PickerCells
+          ref="cells"
+          :key="pageTitleMonth"
+          v-slot="{ cell }"
+          :cells="cells"
+          view="month"
+          @select="select($event)"
+        >
+          {{ cell.month }}
+        </PickerCells>
+      </Transition>
+    </div>
 
     <slot name="calendarFooterMonth" />
   </div>

src/components/PickerYear.vue

@@ -16,16 +16,20 @@
       <slot slot="nextIntervalBtn" name="nextIntervalBtn" />
     </PickerHeader>
 
-    <PickerCells
-      ref="cells"
-      :key="pageTitleYear"
-      v-slot="{ cell }"
-      :cells="cells"
-      view="year"
-      @select="select($event)"
-    >
-      {{ cell.year }}
-    </PickerCells>
+    <div ref="cellsWrapper" class="cells-wrapper">
+      <Transition :name="transitionName">
+        <PickerCells
+          ref="cells"
+          :key="pageTitleYear"
+          v-slot="{ cell }"
+          :cells="cells"
+          view="year"
+          @select="select($event)"
+        >
+          {{ cell.year }}
+        </PickerCells>
+      </Transition>
+    </div>
 
     <slot name="calendarFooterYear" />
   </div>

src/mixins/pickerMixin.vue

@@ -33,6 +33,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    transitionName: {
+      type: String,
+      default: '',
+    },
     translation: {
       type: Object,
       default() {
@@ -79,6 +83,8 @@ export default {
       const units =
         this.view === 'year' ? incrementBy * this.yearRange : incrementBy
 
+      this.$emit('set-transition-name', incrementBy)
+
       if (this.view === 'day') {
         utils.setMonth(pageDate, utils.getMonth(pageDate) + units)
       } else {
@@ -88,15 +94,24 @@ export default {
       this.$emit('page-change', pageDate)
     },
     /**
-     * Emits a 'select' or 'select-disabled' event
+     * Determines which transition to use (for edge dates) and emits a 'select' or 'select-disabled' event
      * @param {Object} cell
      */
     select(cell) {
       if (cell.isDisabled) {
         this.$emit('select-disabled', cell)
-      } else {
-        this.$emit('select', cell)
+        return
       }
+
+      if (cell.isPreviousMonth) {
+        this.$emit('set-transition-name', -1)
+      }
+
+      if (cell.isNextMonth) {
+        this.$emit('set-transition-name', 1)
+      }
+
+      this.$emit('select', cell)
     },
   },
 }

src/styles/style.scss

@@ -190,6 +190,42 @@
 
   .picker-view {
     width: inherit;
+
+    .cells-wrapper {
+      overflow: hidden;
+      position: relative;
+      transition-duration: 250ms;
+      transition-timing-function: ease-in-out;
+
+      .picker-cells {
+        transition-duration: 250ms;
+        transition-timing-function: ease-in-out;
+      }
+    }
+
+    .slide-right-leave-active,
+    .slide-right-enter-active {
+      position: absolute;
+      top: 0;
+    }
+    .slide-right-enter {
+      transform: translate(100%, 0);
+    }
+    .slide-right-leave-to {
+      transform: translate(-100%, 0);
+    }
+
+    .slide-left-leave-active,
+    .slide-left-enter-active {
+      position: absolute;
+      top: 0;
+    }
+    .slide-left-enter {
+      transform: translate(-100%, 0);
+    }
+    .slide-left-leave-to {
+      transform: translate(100%, 0);
+    }
   }
 }
 

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

@@ -353,6 +353,22 @@ describe('Datepicker shallowMounted', () => {
     expect(wrapperTemp.vm.selectedDate).toEqual(null)
     expect(wrapperTemp.emitted('input')).toBeTruthy()
   })
+
+  it('sets the transition correctly', () => {
+    wrapper.vm.setTransitionName(1)
+    expect(wrapper.vm.transitionName).toBe('slide-right')
+
+    wrapper.vm.setTransitionName(-1)
+    expect(wrapper.vm.transitionName).toBe('slide-left')
+
+    wrapper.setData({ translation: { rtl: true } })
+
+    wrapper.vm.setTransitionName(1)
+    expect(wrapper.vm.transitionName).toBe('slide-left')
+
+    wrapper.vm.setTransitionName(-1)
+    expect(wrapper.vm.transitionName).toBe('slide-right')
+  })
 })
 
 describe('Datepicker.vue set by string', () => {

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

@@ -1,12 +1,12 @@
-import { shallowMount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import PickerDay from '~/components/PickerDay.vue'
 import { en } from '~/locale'
 
 describe('PickerDay: disabled', () => {
   let wrapper
 
   beforeEach(() => {
-    wrapper = shallowMount(PickerDay, {
+    wrapper = mount(PickerDay, {
       propsData: {
         translation: en,
         disabledDates: {

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

@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import PickerDay from '~/components/PickerDay.vue'
 import { en } from '~/locale'
 import makeDateUtils from '~/utils/DateUtils'
@@ -9,7 +9,7 @@ describe('PickerDay: Set first day of week', () => {
   let wrapper
 
   beforeEach(() => {
-    wrapper = shallowMount(PickerDay, {
+    wrapper = mount(PickerDay, {
       propsData: {
         firstDayOfWeek: 'mon',
         translation: en,
@@ -61,7 +61,7 @@ describe('PickerDay: Datepicker with Saturday as first day of week', () => {
   let wrapper
 
   beforeEach(() => {
-    wrapper = shallowMount(PickerDay, {
+    wrapper = mount(PickerDay, {
       propsData: {
         firstDayOfWeek: 'sat',
         translation: en,