@citizenplane/pimp 7.0.2 → 7.0.4

package/src/libs/CoreDatepicker.vue

@@ -1,5 +1,5 @@
 <template>
-  <transition name="asd__fade">
+  <transition :name="transitionName">
     <div
       v-show="showDatepicker"
       :id="wrapperId"
@@ -7,6 +7,7 @@
       class="asd__wrapper"
       :class="wrapperClasses"
       :style="showFullscreen ? undefined : wrapperStyles"
+      @keydown.esc="closeDatepicker"
     >
       <div v-if="showFullscreen" class="asd__mobile-header asd__mobile-only">
         <button class="asd__mobile-close" type="button" @click="closeDatepicker">
@@ -16,10 +17,18 @@
         <h3>{{ mobileHeader || mobileHeaderFallback }}</h3>
       </div>
       <div class="asd__datepicker-header">
-        <button class="asd__change-month-button asd__change-month-button--previous" @click="previousMonth">
+        <button
+          class="asd__change-month-button asd__change-month-button--previous"
+          aria-label="previous month"
+          @click="previousMonth"
+        >
           <cp-icon type="chevron-left" />
         </button>
-        <button class="asd__change-month-button asd__change-month-button--next" @click="nextMonth">
+        <button
+          class="asd__change-month-button asd__change-month-button--next"
+          aria-label="next month"
+          @click="nextMonth"
+        >
           <cp-icon type="chevron-right" />
         </button>
         <div
@@ -89,13 +98,8 @@
                     :ref="`date-${dayDate}`"
                     class="asd__day"
                     :data-date="dayDate"
-                    :tabindex="isDateVisible(dayDate) && isSameDate(focusedDate, dayDate) ? 0 : -1"
                     :class="getDayClasses(dayNumber, dayDate)"
-                    @mouseover="
-                      () => {
-                        setHoverDate(dayDate)
-                      }
-                    "
+                    @mouseover="setHoverDate(dayDate)"
                   >
                     <button
                       v-if="dayNumber"
@@ -128,8 +132,6 @@ import ResizeSelect from '@/directives/ResizeSelect'
 
 import CpIcon from '@/components/visual/CpIcon.vue'
 
-const MOBILE_SIZE = 768
-
 export default {
   name: 'CoreDatepicker',
   components: {
@@ -290,22 +292,27 @@ export default {
       viewportWidth: undefined,
       isMobile: undefined,
       triggerElement: undefined,
-      isInline: this.inline || false,
     }
   },
   computed: {
+    transitionName() {
+      return this.inline ? '' : 'asd__fade'
+    },
     wrapperClasses() {
-      return {
-        'asd__wrapper--datepicker-open': this.showDatepicker,
-        'asd__wrapper--full-screen': this.showFullscreen,
-        'asd__wrapper--isInline': this.isInline,
-        'asd__wrapper--showOneMonth': this.monthsToShow === 1,
-      }
+      return [
+        this.$attrs.class,
+        {
+          'asd__wrapper--datepicker-open': this.showDatepicker,
+          'asd__wrapper--full-screen': this.showFullscreen,
+          'asd__wrapper--isInline': this.inline,
+          'asd__wrapper--showOneMonth': this.monthsToShow === 1,
+        },
+      ]
     },
     wrapperStyles() {
       return {
         width: this.width * this.showMonths + 'px',
-        zIndex: this.isInline ? '' : '100',
+        zIndex: this.inline ? '' : '100',
       }
     },
     innerStyles() {
@@ -371,7 +378,6 @@ export default {
     },
     selectedDate2(newValue) {
       const newDate = !newValue || newValue === '' ? '' : newValue
-      if (newValue && this.selectedDate1 && !this.isDateVisible(newDate)) this.nextMonth()
       this.$emit('date-two-selected', newDate)
     },
     mode() {
@@ -424,7 +430,7 @@ export default {
     this.generateMonths()
     this.generateYears()
 
-    if (this.startOpen || this.isInline) {
+    if (this.startOpen || this.inline) {
       this.openDatepicker()
     }
 
@@ -438,17 +444,10 @@ export default {
   methods: {
     handleDatepickerSizing() {
       this.viewportWidth = window.innerWidth + 'px'
-      this._isWindowLessThan = (width) => {
-        return window.innerWidth <= width || screen.width <= width
-      }
-
-      this.isInline = this.inline || this._isWindowLessThan(MOBILE_SIZE)
-      this.$emit('is-inline', this.isInline)
 
       this._handleWindowResizeEvent = this.debounce(() => {
-        this.isInline = this.inline || this._isWindowLessThan(MOBILE_SIZE)
-        this.isInline ? this.openDatepicker() : this.closeDatepicker()
-        this.$emit('is-inline', this.isInline)
+        this.inline ? this.openDatepicker() : this.closeDatepicker()
+        this.$emit('is-inline', this.inline)
         this.positionDatepicker()
         this.setStartDates()
       }, 200)
@@ -527,7 +526,7 @@ export default {
       return null
     },
     handleClickOutside(event) {
-      if (event.target.id === this.triggerElementId || !this.showDatepicker || this.isInline || this.isRecurrent) {
+      if (event.target.id === this.triggerElementId || !this.showDatepicker || this.inline || this.isRecurrent) {
         return
       }
       this.closeDatepicker()
@@ -595,6 +594,12 @@ export default {
       }
     },
     setStartDates() {
+      // Set dates if initialized
+      if (this.mode === 'range') {
+        if (this.dateOne) this.selectDate(this.dateOne)
+        if (this.dateTwo) this.selectDate(this.dateTwo)
+      }
+
       let startDate = this.dateOne ? DateTime.fromISO(this.dateOne) : DateTime.local()
       const minDate = DateTime.fromISO(this.minDate)
 
@@ -731,20 +736,12 @@ export default {
         const targetMonth = DateTime.fromISO(this.visibleMonths[visibleMonthIdx])
         const monthIdx = targetMonth.month
         const year = targetMonth.year
-        this.focusedDate = DateTime.fromISO(this.focusedDate).set({ month: monthIdx }).set({ year }).toISODate()
+        this.focusedDate = DateTime.fromISO(this.focusedDate).set({ month: monthIdx, year }).toISODate()
       }
     },
     isToday(date) {
       return DateTime.local().toISODate() === date
     },
-    isSameDate(date1, date2) {
-      if (!date1) {
-        return false
-      }
-      const dtDate1 = typeof date1 === 'object' ? DateTime.fromJSDate(date1) : DateTime.fromISO(date1)
-
-      return dtDate1.toISODate() === date2
-    },
     isSelected(date) {
       if (!date) {
         return
@@ -918,7 +915,7 @@ export default {
       this.initialDate2 = this.dateTwo
       this.$emit('opened')
       this.$nextTick(() => {
-        if (!this.isInline) this.setFocusedDate(this.focusedDate)
+        if (!this.inline) this.setFocusedDate(this.focusedDate)
       })
     },
     closeDatepickerCancel() {
@@ -930,7 +927,7 @@ export default {
       }
     },
     closeDatepicker() {
-      if (this.isInline) {
+      if (this.inline) {
         return
       }
       this.showDatepicker = false
@@ -953,6 +950,7 @@ export default {
 
       const viewportWidth = document.documentElement.clientWidth || window.innerWidth
       this.viewportWidth = viewportWidth + 'px'
+
       this.isMobile = viewportWidth < 768
 
       if (this.isMobile) {
@@ -979,8 +977,11 @@ export default {
   },
 }
 </script>
+<style lang="scss">
+@include popover-desktop('asd__fade');
+</style>
 
-<style lang="stylus" scoped>
+<style lang="stylus">
 $tablet = 768px
 
 $background-grey-color = #f7f7f7
@@ -995,14 +996,6 @@ degrade()
   position absolute
   z-index -1
 
-// fade in
-.asd__fade-enter-active,
-.asd__fade-leave-active
-  transition all 0.2s ease
-
-.asd__fade-enter-from,
-.asd__fade-leave-active
-  opacity 0
 // datepicker
 .asd__list-complete-enter-from,
 .asd__list-complete-leave-to
@@ -1015,8 +1008,6 @@ degrade()
 
 .asd
   &__wrapper
-    left: 50%;
-    transform: translateX(-50%);
     border-radius 10px
     white-space nowrap
     text-align center
@@ -1024,25 +1015,13 @@ degrade()
     overflow hidden
 
     &:not(&--isInline) {
-      box-shadow 0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.2)
-    }
-
-    @media (min-width: $tablet) {
-      position absolute
-      margin-top 10px
+      box-shadow 0 9px 24px rgba(62, 62, 91, 20%), 0 4px 4px rgba(62, 62, 91, 10%);
     }
 
     &--isInline {
-      position relative
-      margin-top 16px
+      position relative !important
     }
 
-    @media (max-width: $tablet) {
-      position relative
-      margin-top 16px
-    }
-
-
     &:before
       // Line between the two months
       @media (min-width: $tablet)
@@ -1054,7 +1033,7 @@ degrade()
         bottom 0
         margin auto
         width 1px
-        background $neutral-dark-5
+        background $neutral-dark-4
         z-index -1
 
     &--showOneMonth {
@@ -1082,6 +1061,13 @@ degrade()
   &__change-month-button
     position absolute
     z-index 10
+    top 16px
+    border-radius: 100%;
+
+    &:focus-visible {
+      outline: 2px solid $secondary-color;
+      outline-offset: 2px;
+    }
 
     i
       color $neutral-dark
@@ -1093,32 +1079,40 @@ degrade()
     @media (min-width: $tablet)
       top 22px
 
-    &--previous
-      left 0
+    &--previous {
+      left 16px
 
-      @media (min-width: $tablet)
-        padding-left 24px
+      @media (min-width: $tablet) {
+        left 24px
+      }
+    }
 
-    &--next
-      right 0
+    &--next {
+      right 16px
 
-      @media (min-width: $tablet)
-        padding-right 24px
+      @media (min-width: $tablet) {
+        right 24px
+      }
+    }
 
-  &__days-legend
+  &__days-legend {
     position absolute
     font-size 12px
     line-height 15px
     user-select none
 
-    @media (min-width: $tablet)
-      top 60px
+    @media (min-width: $tablet) {
       padding 0 24px
+      top 60px
+    }
 
-    @media (max-width: $tablet)
-      top 36px
+    @media (max-width: $tablet - 1px) {
+      top 56px
+      padding: 0 16px;
+    }
+  }
 
-  &__day-title
+  &__day-title {
     display inline-block
     width percentage(1 / 7)
     text-align center
@@ -1126,23 +1120,38 @@ degrade()
     font-size 14px
     line-height 18px
     margin-left -1px
+  }
 
-  &__month-table
+  &__month-table {
     border-spacing 0 6px
     width 100%
     max-width 100%
+  }
+
+  &__wrapper:not(&__wrapper--isInline) &__month {
+    padding-left: 16px;
+    padding-right: 16px;
 
-  &__month
+    @media (min-width: $tablet) {
+      padding-left: 24px;
+      padding-right: 24px;
+    }
+  }
+
+  &__month {
     transition all $transition-time ease
     display inline-block
+    padding 16px 16px 8px
 
-    @media (min-width: $tablet)
-      padding 24px
-      padding-bottom 12px
+    @media (min-width: $tablet) {
+      padding 24px 24px 12px;
+    }
 
-    &--hidden
+    &--hidden {
       height 275px
       visibility hidden
+    }
+  }
 
   &__month-name
     font-size 16px
@@ -1199,8 +1208,8 @@ degrade()
 
     &--hovered
       .asd__day--end-week
-      border-top-right-radius 5px
-      border-bottom-right-radius 5px
+        border-top-right-radius 5px
+        border-bottom-right-radius 5px
 
       .asd__day--start-week
         border-top-left-radius 5px
@@ -1277,8 +1286,8 @@ degrade()
     &--empty .asd__day-number
       color $neutral-dark-3 !important
 
-      button
-        cursor default
+    &--disabled *
+      cursor not-allowed !important
 
     &--today .asd__day-button .asd__day-number
       color $primary-color
@@ -1317,7 +1326,6 @@ degrade()
     width 35px
     height 35px
     border none
-    cursor pointer
     user-select none
     font-size 14px
 
@@ -1326,31 +1334,6 @@ degrade()
       position relative
       color $neutral-dark
 
-  &__action-buttons
-    min-height 50px
-    padding-top 10px
-    margin-bottom 12px
-
-    button
-      display block
-      position relative
-      background transparent
-      border none
-      font-weight bold
-      font-size 15px
-      cursor pointer
-
-      &:hover
-        text-decoration underline
-
-      &:nth-child(1)
-        float left
-        left 15px
-
-      &:nth-child(2)
-        float right
-        right 15px
-
   &__mobile-header
     border-bottom $border-normal
     position relative