Merge branch 'release/2.5.0'

chronotruck · Jun 20, 2020 · 4cb6ffe · 4cb6ffe
2 parents 76f841c + 6fb1ff4
commit 4cb6ffe
Show file tree

Hide file tree

Showing 20 changed files with 121 additions and 56 deletions.
diff --git a/docs/css/app.279467f4.css b/docs/css/app.279467f4.css
diff --git a/docs/css/app.bb77194d.css b/docs/css/app.bb77194d.css
diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"><link rel=icon href=favicon.ico><title>vue-ctk-date-time-picker</title><link href=css/app.bb77194d.css rel=preload as=style><link href=js/app.cb3df652.js rel=preload as=script><link href=js/chunk-vendors.5c79952b.js rel=preload as=script><link href=css/app.bb77194d.css rel=stylesheet></head><body><noscript><strong>We're sorry but vue-ctk-date-time-picker doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.5c79952b.js></script><script src=js/app.cb3df652.js></script></body></html>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"><link rel=icon href=favicon.ico><title>vue-ctk-date-time-picker</title><link href=css/app.279467f4.css rel=preload as=style><link href=js/app.ac586109.js rel=preload as=script><link href=js/chunk-vendors.a81c6b06.js rel=preload as=script><link href=css/app.279467f4.css rel=stylesheet></head><body><noscript><strong>We're sorry but vue-ctk-date-time-picker doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.a81c6b06.js></script><script src=js/app.ac586109.js></script></body></html>
diff --git a/docs/js/app.ac586109.js b/docs/js/app.ac586109.js
diff --git a/docs/js/app.ac586109.js.map b/docs/js/app.ac586109.js.map
diff --git a/docs/js/app.cb3df652.js b/docs/js/app.cb3df652.js
diff --git a/docs/js/app.cb3df652.js.map b/docs/js/app.cb3df652.js.map
diff --git a/docs/js/chunk-vendors.5c79952b.js b/docs/js/chunk-vendors.5c79952b.js
diff --git a/docs/js/chunk-vendors.5c79952b.js.map b/docs/js/chunk-vendors.5c79952b.js.map
diff --git a/docs/js/chunk-vendors.a81c6b06.js b/docs/js/chunk-vendors.a81c6b06.js
diff --git a/docs/js/chunk-vendors.a81c6b06.js.map b/docs/js/chunk-vendors.a81c6b06.js.map
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-ctk-date-time-picker",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "A vue component for select date & time (by Chronotruck)",
   "author": "Louis Mazel <[email protected]>",
   "scripts": {

diff --git a/src/VueCtkDateTimePicker/_subs/CustomButton/index.vue b/src/VueCtkDateTimePicker/_subs/CustomButton/index.vue
@@ -21,7 +21,7 @@
       class="custom-button-effect"
     />
     <span
-      class="custom-button-content flex align-center justify-content-center flex-1"
+      class="custom-button-content flex align-center justify-content-center"
       :style="[colorStyle]"
     >
       <slot :style="[colorStyle]" />

diff --git a/src/VueCtkDateTimePicker/_subs/CustomInput/index.vue b/src/VueCtkDateTimePicker/_subs/CustomInput/index.vue
@@ -88,7 +88,7 @@
           : null
       },
       hasClearButton () {
-        return !this.noClearButton && !this.disabled && this.value
+        return !this.noClearButton && !this.isDisabled && this.value
       },
       /**
        * Returns true if the field is disabled
@@ -164,6 +164,9 @@
     &-clear-button {
       position: absolute;
       right: 12px;
+      top: 0px;
+      bottom: 0px;
+      margin: auto 0;
     }
     &.has-error {
       .field-input {

diff --git a/src/VueCtkDateTimePicker/_subs/PickersContainer/_subs/DatePicker/index.vue b/src/VueCtkDateTimePicker/_subs/PickersContainer/_subs/DatePicker/index.vue
@@ -38,7 +38,7 @@
             <CustomButton
               v-for="m in [month]"
               :key="m.month"
-              class="date-buttons lm-fs-16 padding-button"
+              class="date-buttons lm-fs-16 padding-button flex-1"
               :color="color"
               :dark="dark"
               @click="selectingYearMonth = 'month'"
@@ -53,7 +53,7 @@
             <CustomButton
               v-for="y in [year]"
               :key="y"
-              class="date-buttons lm-fs-16 padding-button"
+              class="date-buttons lm-fs-16 padding-button flex-1"
               :color="color"
               :dark="dark"
               @click="selectingYearMonth = 'year'"

diff --git a/src/VueCtkDateTimePicker/_subs/PickersContainer/_subs/TimePicker.vue b/src/VueCtkDateTimePicker/_subs/PickersContainer/_subs/TimePicker.vue
@@ -145,21 +145,10 @@
         return ArrayMinuteRange(0, 60, twoDigit, this.minuteInterval, this._disabledMinutes)
       },
       apms () {
-        const ampm = this.isTwelveFormat
-          ? this.minTime
-            ? moment(this.minTime, 'hh:mm a').format('a')
-            : this.maxTime
-              ? moment(this.maxTime, 'hh:mm a').format('a')
-              : ''
-          : ''
-        const upper = ampm
-          ? [{ value: ampm.toUpperCase(), item: ampm.toUpperCase() }]
-          : [{ value: 'AM', item: 'AM' }, { value: 'PM', item: 'PM' }]
-        const lower = ampm
-          ? [{ value: ampm, item: ampm }]
-          : [{ value: 'am', item: 'am' }, { value: 'pm', item: 'pm' }]
         return this.isTwelveFormat
-          ? this.format.includes('A') ? upper : lower
+          ? this.format.includes('A')
+            ? [{ value: 'AM', item: 'AM' }, { value: 'PM', item: 'PM' }]
+            : [{ value: 'am', item: 'am' }, { value: 'pm', item: 'pm' }]
           : null
       },
       columns () {
@@ -288,9 +277,11 @@
       onScrollHours: debounce(function (scroll) {
         const value = this.getValue(scroll)
         const hour = this.isTwelveFormat
-          ? this.apm.toLowerCase() === 'am'
-            ? value + 1
-            : (value + 1 + 12)
+					? this.apm
+						? this.apm.toLowerCase() === 'am'
+							? value + 1
+							: (value + 1 + 12)
+						:value
           : value
         if (this.isHoursDisabled(hour)) return
         this.hour = hour === 24 && !this.isTwelveFormat ? 23 : hour
@@ -368,28 +359,30 @@
           return null
         }
       },
-      initPositionView () {
+      async initPositionView () {
         this.noScrollEvent = true
         const containers = ['hours', 'minutes']
         if (this.apms) containers.push('apms')
-        setTimeout(() => {
-          containers.forEach((container) => {
-            const elem = this.$refs[container][0]
-            elem.scrollTop = 0
-            const selected = elem.querySelector(`.time-picker-column-item.active`)
-            if (selected) {
-              const boundsSelected = selected.getBoundingClientRect()
-              const boundsElem = elem.getBoundingClientRect()
-              const timePickerHeight = this.$refs['time-picker'].clientHeight
-              if (boundsSelected && boundsElem) {
-                elem.scrollTop = (28 / 2) + boundsSelected.top - boundsElem.top - timePickerHeight / 2
-              }
+
+        await this.$nextTick()
+        containers.forEach((container) => {
+          const elem = this.$refs[container][0]
+          if (!elem) return false
+
+          elem.scrollTop = 0
+          const selected = elem.querySelector(`.time-picker-column-item.active`)
+          if (selected) {
+            const boundsSelected = selected.getBoundingClientRect()
+            const boundsElem = elem.getBoundingClientRect()
+            const timePickerHeight = this.$refs['time-picker'].clientHeight
+            if (boundsSelected && boundsElem) {
+              elem.scrollTop = (28 / 2) + boundsSelected.top - boundsElem.top - timePickerHeight / 2
             }
-            setTimeout(() => {
-              this.noScrollEvent = false
-            }, 500)
-          })
-        }, 0)
+          }
+          setTimeout(() => {
+            this.noScrollEvent = false
+          }, 500)
+        })
       },
       getAvailableHour () {
         const availableHours = this.hours.find((element) => {

diff --git a/src/VueCtkDateTimePicker/_subs/PickersContainer/index.vue b/src/VueCtkDateTimePicker/_subs/PickersContainer/index.vue
@@ -373,6 +373,9 @@
     }
   }
   @media screen and (max-width: 415px) {
+    $header-size: 58px;
+    $footer-size: 41px;
+
     .pickers-container {
       -webkit-flex-direction: column;
       -ms-flex-direction: column;
@@ -397,6 +400,11 @@
       bottom: 0;
       right: 0;
       left: 0;
+
+      .pickers-container {
+        height: calc(100% - #{$header-size} - #{$footer-size});
+      }
+
       .datepicker {
         border-radius: 0 !important;
         bottom: 0 !important;

diff --git a/src/VueCtkDateTimePicker/index.vue b/src/VueCtkDateTimePicker/index.vue
@@ -218,8 +218,10 @@
         updateMomentLocale(value, this.firstDayOfWeek)
       }
     },
-    mounted () {
+    created () {
       updateMomentLocale(this.locale, this.firstDayOfWeek)
+    },
+    mounted () {
       this.pickerPosition = this.getPosition()
       this.pickerOpen = this.open
       if (this.hasCustomElem) {

diff --git a/tests/unit/VueCtkDateTimePicker/CustomInput/index.spec.js b/tests/unit/VueCtkDateTimePicker/CustomInput/index.spec.js
@@ -1,6 +1,7 @@
 import { shallowMount } from '@vue/test-utils'
 
 import CustomInput from '@/VueCtkDateTimePicker/_subs/CustomInput'
+import CustomButton from '@/VueCtkDateTimePicker/_subs/CustomButton'
 
 describe('VueCtkDateTimePicker/CustomInput', () => {
   let wrapper
@@ -72,6 +73,64 @@ describe('VueCtkDateTimePicker/CustomInput', () => {
   /**
    * TODO: Add clear button test cases
    */
+  describe('clear button', () => {
+    it('should be defined if the "noClearButton" prop is not defined, the input is not disabled and there is a value', () => {
+      const wrapper = shallowMount(CustomInput, {
+        propsData: {
+          value: '2020-06-20 12:00:00',
+          noClearButton: false
+        },
+        attrs: {
+          disabled: false
+        }
+      })
+
+      const button = wrapper.find(CustomButton)
+      expect(button.exists()).toBeTruthy()
+      expect(button.is(CustomButton)).toBeTruthy()
+    })
+
+    it('should undefined if the "noClearButton" prop is defined or the input is disabled or there is no value', () => {
+      let wrapper = shallowMount(CustomInput, {
+        propsData: {
+          value: '2020-06-20 12:00:00',
+          noClearButton: true
+        },
+        attrs: {
+          disabled: false
+        }
+      })
+
+      let button = wrapper.find('.field-clear-button')
+      expect(button.exists()).toBeFalsy()
+
+      wrapper = shallowMount(CustomInput, {
+        propsData: {
+          value: null,
+          noClearButton: false
+        },
+        attrs: {
+          disabled: false
+        }
+      })
+
+      button = wrapper.find('.field-clear-button')
+      expect(button.exists()).toBeFalsy()
+
+      wrapper = shallowMount(CustomInput, {
+        propsData: {
+          value: '2020-06-20 12:00:00',
+          noClearButton: false
+        },
+        attrs: {
+          disabled: true
+        }
+      })
+
+      button = wrapper.find('.field-clear-button')
+      expect(button.exists()).toBeFalsy()
+    })
+  })
 
   afterEach(() => {
     wrapper.destroy()