🔨 refactoring

src/App.vue

@@ -232,7 +232,6 @@
     background-color: #FFF;
     color: #bd4147;
     border: 1px solid #CCC;
-    /* display: inline-block; */
     border-radius: 4px;
     outline: none;
     font-size: 85%;

src/vue-ctk-date-time-picker/_subs/CtkDatePickerAgenda.vue

@@ -222,17 +222,14 @@
         return moment(this.dateTime).locale(this.locale).format('ddd D MMM')
       },
       selectTime (dateTime) {
-        this.transitionDayName = 'slidevprev'
-        if (dateTime > this.dateTime) {
-          this.transitionDayName = 'slidevnext'
-        }
+        const isBigger = dateTime > this.dateTime
+        this.transitionDayName = isBigger ? 'slidevnext' : 'slidevprev'
         this.$emit('change-date', dateTime)
       },
       selectDate (dateTime) {
-        this.transitionDayName = 'slidevnext'
-        if (dateTime.isBefore(this.dateTime)) {
-          this.transitionDayName = 'slidevprev'
-        }
+        const isBefore = dateTime.isBefore(this.dateTime)
+        this.transitionDayName = isBefore ? 'slidevprev' : 'slidevnext'
+
         dateTime.add(this.dateTime.hour(), 'hours')
         dateTime.add(this.dateTime.minute(), 'minutes')
         this.$emit('change-date', dateTime)
@@ -250,18 +247,13 @@
         this.$emit('validate')
       },
       dateTimeWidth () {
-        let width
-        let result
-        if (this.$refs.timePickerComponent && this.$refs.timePickerComponent.$el.clientWidth) {
-          width = this.$refs.timePickerComponent.$el.clientWidth
-        } else {
-          width = 160
-        }
-        result = {
-          flex: '0 0 ' + width + 'px',
-          width: width + 'px',
-          minWidth: width + 'px',
-          maxWidth: width + 'px'
+        const timePickerComponentPresent = this.$refs.timePickerComponent && this.$refs.timePickerComponent.$el.clientWidth
+        const width = timePickerComponentPresent ? this.$refs.timePickerComponent.$el.clientWidth : 160
+        const result = {
+          flex: `0 0 ${width}px`,
+          width: `${width}px`,
+          minWidth: `${width}px`,
+          maxWidth: `${width}px`
         }
         return result
       }

src/vue-ctk-date-time-picker/_subs/_subs/CtkDatePicker.vue

@@ -135,11 +135,9 @@
         }
       },
       endEmptyDays () {
-        if ((this.monthDays.length + this.weekDay) > 35) {
-          return 42 - this.monthDays.length - this.weekDay
-        } else {
-          return 35 - this.monthDays.length - this.weekDay
-        }
+        const getDays = (this.monthDays.length + this.weekDay) > 35
+        const number = getDays ? 42 : 35
+        return number - this.monthDays.length - this.weekDay
       },
       monthDays () {
         return this.month.getMonthDays()
@@ -174,13 +172,14 @@
         this.$emit('change-date', day)
       },
       changeMonth (val) {
-        this.transitionDaysName = 'slide' + val
-        this.transitionLabelName = 'slidev' + val
+        this.transitionDaysName = `slide${val}`
+        this.transitionLabelName = `slidev${val}`
         this.$emit('change-month', val)
       }
     }
   }
 </script>
+
 <style lang="scss" scoped>
   @import "../../assets/animation.scss";
   #CtkDatePicker {

src/vue-ctk-date-time-picker/_subs/_subs/CtkTimePicker.vue

@@ -126,7 +126,7 @@
             const containers = ['hours', 'minutes']
             containers.forEach((container) => {
               const elem = this.$refs[`${container}`]
-              const selected = this.$refs[`${container}`].querySelector('.item.active')
+              const selected = this.$refs[`${container}`].querySelector(`.item.active`)
               if (selected) {
                 elem.scrollTop = 0
                 const boundsSelected = selected.getBoundingClientRect()
@@ -146,17 +146,13 @@
     methods: {
       formatValue: function (type, i) {
         switch (type) {
-        case 'H':
-        case 'm':
+        case 'H': case 'm':
           return String(i)
-        case 'HH':
-        case 'mm':
+          case 'HH': case 'mm':
           return i < 10 ? `0${i}` : String(i)
-        case 'h':
-        case 'k':
+        case 'h': case 'k':
           return String(i + 1)
-        case 'hh':
-        case 'kk':
+        case 'hh': case 'kk':
           return (i + 1) < 10 ? `0${i + 1}` : String(i + 1)
         default:
           return ''

src/vue-ctk-date-time-picker/vue-ctk-date-time-picker.vue

@@ -72,10 +72,12 @@
 <script>
   import moment from 'moment'
   import CtkDatePickerAgenda from './_subs/CtkDatePickerAgenda.vue'
-  function nearestMinutes (interval, someMoment, m) {
+
+  const nearestMinutes = (interval, someMoment, m) => {
     const roundedMinutes = Math.ceil(someMoment.minute() / interval) * interval
     return m(someMoment.clone().minute(roundedMinutes).second(0))
   }
+
   export default {
     name: 'VueCtkDateTimePicker',
     components: {
@@ -125,42 +127,19 @@
           borderColor: this.color
         }
       },
-      dateTime: {
-        get () {
-          if (this.disableDate) {
-            if (this.value) {
-              let date
-              if (this.disableDate) {
-                date = moment(moment().format('YYYY-MM-DD') + ' ' + this.value)
-              } else {
-                date = moment(this.value)
-              }
-              return nearestMinutes(this.minuteInterval, date, moment)
-            } else {
-              return nearestMinutes(this.minuteInterval, moment(), moment)
-            }
-          }
-          return nearestMinutes(this.minuteInterval, this.value ? moment(this.value) : moment(), moment)
-        }
+      dateTime () {
+        const date = this.disableDate
+          ? this.value ? moment(`${moment().format('YYYY-MM-DD')} ${this.value}`) : moment()
+          : this.value ? moment(this.value) : moment()
+        return nearestMinutes(this.minuteInterval, date, moment)
       },
-      dateFormatted: {
-        get () {
-          let dateFormat
-          if (this.value) {
-            if (this.disableDate) {
-              dateFormat = moment(moment().format('YYYY-MM-DD') + ' ' + this.value)
-            } else {
-              dateFormat = moment(this.value)
-            }
-          } else {
-            dateFormat = null
-          }
-          if (dateFormat) {
-            return nearestMinutes(this.minuteInterval, dateFormat, moment).locale(this.locale).format(this.formatted)
-          } else {
-            return null
-          }
-        }
+      dateFormatted () {
+        let dateFormat = this.value
+          ? this.disableDate
+            ? moment(`${moment().format('YYYY-MM-DD')} ${this.value}`)
+            : moment(this.value)
+          : null
+        return dateFormat ? nearestMinutes(this.minuteInterval, dateFormat, moment).locale(this.locale).format(this.formatted) : null
       }
     },
     created () {
@@ -177,23 +156,18 @@
         }
       },
       showDatePicker () {
-        if (this.disabled) {
-          return
-        }
+        if (this.disabled) return
+
         const rect = this.$refs.parent.getBoundingClientRect()
         const windowHeight = window.innerHeight
         let datePickerHeight = 428
-        if (!this.enableButtonValidate) {
-          datePickerHeight = datePickerHeight - 46
-        }
-        if (this.withoutHeader) {
-          datePickerHeight = datePickerHeight - 65
-        }
-        if (((windowHeight - (rect.top + rect.height)) > datePickerHeight) || ((windowHeight - rect.top) > windowHeight / 2 + rect.height)) {
-          this.agendaPosition = 'top'
-        } else {
-          this.agendaPosition = 'bottom'
-        }
+
+        datePickerHeight = !this.enableButtonValidate ? 428 - 46 : datePickerHeight
+        datePickerHeight = this.withoutHeader ? 428 - 65 : datePickerHeight
+
+        const position = ((windowHeight - (rect.top + rect.height)) > datePickerHeight) || ((windowHeight - rect.top) > windowHeight / 2 + rect.height)
+        this.agendaPosition = position ? 'top' : 'bottom'
+
         this.isVisible = true
       },
       hideDatePicker () {