feat(pickers): Extract UpButton.vue & convert span to button

Author: mst101

src/components/Datepicker.vue

@@ -63,6 +63,7 @@
               <slot name="beforeCalendarHeader" />
               <Component
                 :is="picker"
+                :bootstrap-styling="bootstrapStyling"
                 class="picker-view"
                 :day-cell-content="dayCellContent"
                 :disabled-dates="disabledDates"

src/components/PickerDay.vue

@@ -4,19 +4,21 @@
 
     <PickerHeader
       v-if="showHeader"
+      :bootstrap-styling="bootstrapStyling"
       :is-next-disabled="isNextDisabled"
       :is-previous-disabled="isPreviousDisabled"
       :is-rtl="isRtl"
       @page-change="changePage($event)"
     >
       <slot slot="prevIntervalBtn" name="prevIntervalBtn" />
-      <span
-        :class="{ up: !isUpDisabled }"
-        class="day__month_btn"
-        @click="$emit('set-view', 'month')"
+      <UpButton
+        ref="up"
+        :class="{ btn: bootstrapStyling }"
+        :is-disabled="isUpDisabled"
+        @select="$emit('set-view', 'month')"
       >
         {{ pageTitleDay }}
-      </span>
+      </UpButton>
       <slot slot="nextIntervalBtn" name="nextIntervalBtn" />
     </PickerHeader>
 
@@ -55,10 +57,11 @@ import pickerMixin from '~/mixins/pickerMixin.vue'
 import DisabledDate from '~/utils/DisabledDate'
 import HighlightedDate from '~/utils/HighlightedDate'
 import PickerCells from './PickerCells.vue'
+import UpButton from './UpButton.vue'
 
 export default {
   name: 'PickerDay',
-  components: { PickerCells },
+  components: { PickerCells, UpButton },
   mixins: [pickerMixin],
   props: {
     dayCellContent: {

src/components/PickerHeader.vue

@@ -1,31 +1,39 @@
 <template>
   <header>
-    <span
+    <button
       class="prev"
-      :class="{ disabled: isPreviousDisabled, rtl: isRtl }"
+      :class="{ btn: bootstrapStyling, rtl: isRtl }"
+      :disabled="isPreviousDisabled"
+      type="button"
       @click="isPreviousDisabled ? null : $emit('page-change', -1)"
     >
       <slot name="prevIntervalBtn">
         <span class="default">&lt;</span>
       </slot>
-    </span>
+    </button>
     <slot />
-    <span
+    <button
       class="next"
-      :class="{ disabled: isNextDisabled, rtl: isRtl }"
+      :class="{ btn: bootstrapStyling, rtl: isRtl }"
+      :disabled="isNextDisabled"
+      type="button"
       @click="isNextDisabled ? null : $emit('page-change', 1)"
     >
       <slot name="nextIntervalBtn">
         <span class="default">&gt;</span>
       </slot>
-    </span>
+    </button>
   </header>
 </template>
 
 <script>
 export default {
   name: 'PickerHeader',
   props: {
+    bootstrapStyling: {
+      type: Boolean,
+      default: false,
+    },
     isNextDisabled: {
       type: Boolean,
       required: true,

src/components/PickerMonth.vue

@@ -4,19 +4,21 @@
 
     <PickerHeader
       v-if="showHeader"
+      :bootstrap-styling="bootstrapStyling"
       :is-next-disabled="isNextDisabled"
       :is-previous-disabled="isPreviousDisabled"
       :is-rtl="isRtl"
       @page-change="changePage($event)"
     >
       <slot slot="prevIntervalBtn" name="prevIntervalBtn" />
-      <span
-        class="month__year_btn"
-        :class="{ up: !isUpDisabled }"
-        @click="$emit('set-view', 'year')"
+      <UpButton
+        ref="up"
+        :class="{ btn: bootstrapStyling }"
+        :is-disabled="isUpDisabled"
+        @select="$emit('set-view', 'year')"
       >
         {{ pageTitleMonth }}
-      </span>
+      </UpButton>
       <slot slot="nextIntervalBtn" name="nextIntervalBtn" />
     </PickerHeader>
 
@@ -43,10 +45,11 @@
 import pickerMixin from '~/mixins/pickerMixin.vue'
 import DisabledDate from '~/utils/DisabledDate'
 import PickerCells from './PickerCells.vue'
+import UpButton from './UpButton.vue'
 
 export default {
   name: 'PickerMonth',
-  components: { PickerCells },
+  components: { PickerCells, UpButton },
   mixins: [pickerMixin],
   computed: {
     /**

src/components/PickerYear.vue

@@ -4,15 +4,16 @@
 
     <PickerHeader
       v-if="showHeader"
+      :bootstrap-styling="bootstrapStyling"
       :is-next-disabled="isNextDisabled"
       :is-previous-disabled="isPreviousDisabled"
       :is-rtl="isRtl"
       @page-change="changePage($event)"
     >
       <slot slot="prevIntervalBtn" name="prevIntervalBtn" />
-      <span>
+      <UpButton ref="up" :class="{ btn: bootstrapStyling }" :is-disabled="true">
         {{ pageTitleYear }}
-      </span>
+      </UpButton>
       <slot slot="nextIntervalBtn" name="nextIntervalBtn" />
     </PickerHeader>
 
@@ -39,10 +40,11 @@
 import pickerMixin from '~/mixins/pickerMixin.vue'
 import DisabledDate from '~/utils/DisabledDate'
 import PickerCells from './PickerCells.vue'
+import UpButton from './UpButton.vue'
 
 export default {
   name: 'PickerYear',
-  components: { PickerCells },
+  components: { PickerCells, UpButton },
   mixins: [pickerMixin],
   props: {
     yearRange: {

src/components/UpButton.vue

@@ -0,0 +1,22 @@
+<template>
+  <button
+    class="vdp-datepicker__up"
+    :disabled="isDisabled"
+    type="button"
+    @click="$emit('select')"
+  >
+    <slot />
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'UpButton',
+  props: {
+    isDisabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+}
+</script>

src/mixins/pickerMixin.vue

@@ -7,6 +7,10 @@ export default {
   components: { PickerHeader },
   inheritAttrs: false,
   props: {
+    bootstrapStyling: {
+      type: Boolean,
+      default: false,
+    },
     disabledDates: {
       type: Object,
       default() {

src/styles/style.scss

@@ -43,13 +43,20 @@
 
   header {
     display: flex;
+    height: 40px;
     justify-content: space-between;
-    line-height: 40px;
 
-    span {
-      display: inline-block;
-      text-align: center;
-      width: 71.42857142857143%;
+    button {
+      border: none;
+
+      &:hover:not(:disabled) {
+        background: #eee;
+      }
+
+      &.vdp-datepicker__up {
+        color: #000;
+        flex-grow: 5;
+      }
     }
 
     .prev,
@@ -59,6 +66,7 @@
       width: 14.285714285714286%;
 
       .default {
+        display: flex;
         text-indent: -10000px;
 
         &:after {
@@ -82,9 +90,13 @@
           border-right: 10px solid #000;
           margin-left: -5px;
         }
+      }
 
-        &.disabled:after {
-          border-right: 10px solid #ddd;
+      &:disabled {
+        .default {
+          &:after {
+            border-right: 10px solid #ddd;
+          }
         }
       }
     }
@@ -95,33 +107,18 @@
           border-left: 10px solid #000;
           margin-left: 5px;
         }
-
-        &.disabled:after {
-          border-left: 10px solid #ddd;
-        }
       }
-    }
-
-    .prev:not(.disabled),
-    .next:not(.disabled),
-    .up:not(.disabled) {
-      cursor: pointer;
 
-      &:hover {
-        background: #eee;
+      &:disabled {
+        .default {
+          &:after {
+            border-left: 10px solid #ddd;
+          }
+        }
       }
     }
   }
 
-  .disabled {
-    color: #ddd;
-    cursor: default;
-
-    //&.selected {
-    //  color: #104756;
-    //}
-  }
-
   .cell {
     border: 1px solid transparent;
     display: inline-block;

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

@@ -62,12 +62,12 @@ describe('Datepicker with restricted views', () => {
     expect(wrapper.vm.allowedToShowView('month')).toEqual(true)
     expect(wrapper.vm.picker).toBe('PickerDay')
 
-    let upButton = wrapper.find('.day__month_btn')
+    let upButton = wrapper.find('.vdp-datepicker__up')
     await upButton.trigger('click')
     expect(wrapper.vm.picker).toBe('PickerMonth')
 
-    upButton = wrapper.find('.month__year_btn')
-    expect(upButton.element.tabIndex).toBe(-1)
+    upButton = wrapper.find('.vdp-datepicker__up')
+    expect(upButton.element.disabled).toBe(true)
 
     await wrapper.setProps({
       minimumView: 'month',

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

@@ -64,7 +64,7 @@ describe('PickerDay', () => {
   })
 
   it('emits set-view event with `month` when the up button is clicked', async () => {
-    const upButton = wrapper.find('.day__month_btn')
+    const upButton = wrapper.find('.vdp-datepicker__up')
     await upButton.trigger('click')
     expect(wrapper.emitted('set-view')[0][0]).toBe('month')
   })