@ditojs/ui 3.2.0 → 3.3.0

package/src/components/DitoCalendar.vue

@@ -10,62 +10,70 @@
         v-if="currentMode === 'day'"
       )
         .dito-calendar-header
-          a.dito-calendar-step-prev.dito-calendar-step-year(
-            role="button"
-            tabindex="0"
+          button.dito-calendar-step-prev.dito-calendar-step-year(
+            type="button"
             aria-label="Previous year"
             @click="stepYear(-1)"
           )
-          a.dito-calendar-step-prev.dito-calendar-step-month(
-            role="button"
-            tabindex="0"
+          button.dito-calendar-step-prev.dito-calendar-step-month(
+            type="button"
             aria-label="Previous month"
             @click="stepMonth(-1)"
           )
           span
-            a.dito-calendar-select-year(
-              role="button"
-              tabindex="0"
+            button.dito-calendar-select-year(
+              type="button"
               aria-label="Switch to year selection"
               @click="setMode('year')"
             ) {{ dateToString(currentValue, { year: true }) }}
-            a.dito-calendar-select-month(
-              role="button"
-              tabindex="0"
+            button.dito-calendar-select-month(
+              type="button"
               aria-label="Switch to month selection"
               @click="setMode('month')"
             ) {{ dateToString(currentValue, { month: true }) }}
-          a.dito-calendar-step-next.dito-calendar-step-month(
-            role="button"
-            tabindex="0"
+          button.dito-calendar-step-next.dito-calendar-step-month(
+            type="button"
             aria-label="Next month"
             @click="stepMonth(1)"
           )
-          a.dito-calendar-step-next.dito-calendar-step-year(
-            role="button"
-            tabindex="0"
+          button.dito-calendar-step-next.dito-calendar-step-year(
+            type="button"
             aria-label="Next year"
             @click="stepYear(1)"
           )
         .dito-calendar-body
-          .dito-calendar-weekdays
-            span(
-              v-for="weekday in weekdayNames"
-            ) {{ weekday.short }}
-          .dito-calendar-dates(role="grid")
-            span(
-              v-for="date in dateRange"
-              :class="date.state && `dito-calendar-item-${date.state}`"
-              role="gridcell"
-              :aria-label="dateToString(date.date)"
-              :aria-selected="date.state === 'active'"
-              :aria-disabled="date.state === 'disabled'"
-              @click="date.state !== 'disabled' && selectDate(date.date)"
-            ) {{ date.text }}
+          .dito-calendar-dates(
+            role="grid"
+            :aria-label="monthLabel"
+            @keydown="onDatesKeyDown"
+          )
+            .dito-calendar-weekdays(role="row")
+              span(
+                v-for="weekday in weekdayNames"
+                role="columnheader"
+                :aria-label="weekday.long"
+              ) {{ weekday.short }}
+            .dito-calendar__week(
+              v-for="week in weeks"
+              :key="+week[0].date"
+              role="row"
+            )
+              button.dito-calendar__item(
+                v-for="item in week"
+                :key="+item.date"
+                :ref="item.isCursor ? 'cursorItem' : undefined"
+                type="button"
+                role="gridcell"
+                :tabindex="item.isCursor ? 0 : -1"
+                :class="item.state && `dito-calendar-item-${item.state}`"
+                :aria-label="dateToString(item.date)"
+                :aria-selected="item.state === 'active' ? 'true' : 'false'"
+                :aria-disabled="item.isDisabled ? 'true' : null"
+                @click="selectDay(item.date)"
+              ) {{ item.date.getDate() }}
         .dito-calendar-footer
-          a.dito-calendar-select-now(
-            role="button"
-            tabindex="0"
+          button.dito-calendar-select-now(
+            type="button"
             :aria-label="`Select today (${dateToString(new Date())})`"
             :title="dateToString(new Date())"
             @click="selectDate(new Date())"
@@ -74,72 +82,81 @@
         v-else-if="currentMode === 'month'"
       )
         .dito-calendar-header
-          a.dito-calendar-step-prev(
-            role="button"
-            tabindex="0"
+          button.dito-calendar-step-prev(
+            type="button"
             aria-label="Previous year"
             @click="stepYear(-1)"
           )
           span
-            a.dito-calendar-select-year(
-              role="button"
-              tabindex="0"
+            button.dito-calendar-select-year(
+              type="button"
               aria-label="Switch to year selection"
               @click="setMode('year')"
             ) {{ dateToString(currentValue, { year: true }) }}
-          a.dito-calendar-step-next(
-            role="button"
-            tabindex="0"
+          button.dito-calendar-step-next(
+            type="button"
             aria-label="Next year"
             @click="stepYear(1)"
           )
         .dito-calendar-body
-          .dito-calendar-months(
-            role="listbox"
-            aria-label="Month"
-          )
-            span(
+          .dito-calendar-months
+            button.dito-calendar__item(
               v-for="(month, index) in monthNames"
+              :ref="isCurrentMonth(index) ? 'cursorItem' : undefined"
+              type="button"
               :class="getMonthClass(index)"
-              role="option"
               :aria-label="month.long"
-              :aria-selected="getMonthClass(index)['dito-calendar-item-active']"
+              :aria-pressed="isActiveMonth(index) ? 'true' : 'false'"
               @click="selectMonth(index)"
             ) {{ month.short }}
       template(
         v-else-if="currentMode === 'year'"
       )
         .dito-calendar-header
-          a.dito-calendar-step-prev(
-            role="button"
-            tabindex="0"
+          button.dito-calendar-step-prev(
+            type="button"
             aria-label="Previous decade"
             @click="stepDecade(-1)"
           )
           span {{ decadeToString(currentValue) }}
-          a.dito-calendar-step-next(
-            role="button"
-            tabindex="0"
+          button.dito-calendar-step-next(
+            type="button"
             aria-label="Next decade"
             @click="stepDecade(1)"
           )
         .dito-calendar-body
-          .dito-calendar-years(
-            role="listbox"
-            aria-label="Year"
-          )
-            span(
+          .dito-calendar-years
+            button.dito-calendar__item(
               v-for="year in yearRange"
+              :ref="isCurrentYear(year) ? 'cursorItem' : undefined"
+              type="button"
               :class="getYearClass(year)"
-              role="option"
               :aria-label="String(year)"
-              :aria-selected="getYearClass(year)['dito-calendar-item-active']"
+              :aria-pressed="isActiveYear(year) ? 'true' : 'false'"
               @click="selectYear(year)"
             ) {{ year }}
 </template>
 
 <script>
-import { describeDate, alterDate } from '../utils/date.js'
+import { asArray } from '@ditojs/utils'
+import { alterDate, stepDate } from '../utils/date.js'
+import { getKeyNavigation } from '../utils/event.js'
+
+// Returns the start of the current day, as the date that the calendar shows
+// without a value, so that selecting a day selects it without a time.
+function getStartOfToday() {
+  return alterDate(new Date(), {
+    hour: 0,
+    minute: 0,
+    second: 0,
+    millisecond: 0
+  })
+}
+
+// The most steps that `navigate()` takes past disabled dates, in any date part
+// (day, month or year), before giving up, as a guard against `disabledDate`
+// disabling every date.
+const maxSkippedDateCount = 366
 
 export default {
   emits: ['update:modelValue', 'select'],
@@ -156,104 +173,182 @@ export default {
     return {
       weekdayNames,
       monthNames,
-      dateRange: [],
-      yearRange: [],
-      currentValue: (
-        this.modelValue ||
-        // If no value is provided, use current date but clear time fields:
-        alterDate(new Date(), { hour: 0, minute: 0, second: 0, millisecond: 0 })
-      ),
+      currentValue: this.modelValue || getStartOfToday(),
       currentMode: this.mode
     }
   },
 
-  watch: {
-    modelValue(to, from) {
-      if (+to !== +from) {
-        this.currentValue = to || new Date()
-        this.updateDateRange()
+  computed: {
+    // The 42 days of the six weeks shown for the month of `currentValue`.
+    dateRange() {
+      const { currentValue } = this
+      const year = currentValue.getFullYear()
+      const month = currentValue.getMonth()
+      // The weeks start on Sunday:
+      const firstDate = new Date(
+        year,
+        month,
+        1 - new Date(year, month).getDay()
+      )
+      const isSameDay = (date, other) => (
+        !!other &&
+        date.getDate() === other.getDate() &&
+        date.getMonth() === other.getMonth() &&
+        date.getFullYear() === other.getFullYear()
+      )
+      const now = new Date()
+      const items = []
+      for (let i = 0; i < 42; i++) {
+        const date = new Date(
+          firstDate.getFullYear(),
+          firstDate.getMonth(),
+          firstDate.getDate() + i
+        )
+        const isDisabled = this.disabledDate(date)
+        const state =
+          date.getMonth() !== month
+            ? isDisabled
+              ? 'disabled'
+              : 'gray'
+            : isSameDay(date, this.modelValue)
+              ? 'active'
+              : isSameDay(date, now)
+                ? 'today'
+                : isDisabled
+                  ? 'disabled'
+                  : isSameDay(date, currentValue)
+                    ? 'current'
+                    : null
+        items.push({
+          date,
+          state,
+          isDisabled,
+          isCursor: isSameDay(date, currentValue)
+        })
       }
+      return items
     },
 
-    currentValue(to, from) {
-      if (+to !== +from) {
-        this.updateDateRange()
+    monthLabel() {
+      return this.dateToString(this.currentValue, { year: true, month: true })
+    },
+
+    weeks() {
+      const weeks = []
+      for (let i = 0; i < this.dateRange.length; i += 7) {
+        weeks.push(this.dateRange.slice(i, i + 7))
       }
+      return weeks
     },
 
-    disabledDate: 'updateDateRange',
+    yearRange() {
+      const startYear = this.getFirstYearOfDecade(
+        this.currentValue.getFullYear()
+      )
+      return Array.from({ length: 10 }, (_, index) => startYear + index)
+    }
+  },
+
+  watch: {
+    modelValue(to, from) {
+      if (+to !== +from) {
+        this.currentValue = to || getStartOfToday()
+      }
+    },
 
     mode(mode) {
       this.currentMode = mode
     }
   },
 
-  mounted() {
-    this.updateDateRange()
-  },
-
   methods: {
+    isActiveMonth(month) {
+      return (
+        !!this.modelValue &&
+        month === this.modelValue.getMonth() &&
+        this.currentValue.getFullYear() === this.modelValue.getFullYear()
+      )
+    },
+
+    isCurrentMonth(month) {
+      return month === this.currentValue.getMonth()
+    },
+
+    isActiveYear(year) {
+      return !!this.modelValue && year === this.modelValue.getFullYear()
+    },
+
+    isCurrentYear(year) {
+      return year === this.currentValue.getFullYear()
+    },
+
     getMonthClass(month) {
       return {
-        'dito-calendar-item-active': (
-          this.modelValue &&
-          month === this.modelValue.getMonth() &&
-          this.currentValue.getFullYear() === this.modelValue.getFullYear()
-        ),
-        'dito-calendar-item-current': month === this.currentValue.getMonth()
+        'dito-calendar-item-active': this.isActiveMonth(month),
+        'dito-calendar-item-current': this.isCurrentMonth(month)
       }
     },
 
     getYearClass(year) {
       return {
-        'dito-calendar-item-active': (
-          this.modelValue && year === this.modelValue.getFullYear()
-        ),
-        'dito-calendar-item-current': year === this.currentValue.getFullYear()
+        'dito-calendar-item-active': this.isActiveYear(year),
+        'dito-calendar-item-current': this.isCurrentYear(year)
       }
     },
 
+    // Moves the cursor of the calendar to `date`, and also selects it if
+    // `update` is true.
     setDate(overrides, update = false) {
-      this.currentValue = alterDate(this.currentValue, overrides)
+      const date = alterDate(this.currentValue, overrides)
+      this.currentValue = date
       if (update) {
-        this.$emit('update:modelValue', this.currentValue)
+        this.commitDate(date)
+      }
+    },
+
+    // All changes of the value go through here, so disabled dates are never
+    // selected. Returns whether the date was selected.
+    commitDate(date) {
+      if (this.disabledDate(date)) {
+        return false
       }
+      this.currentValue = date
+      this.$emit('update:modelValue', date)
+      return true
     },
 
     stepDecade(step) {
-      this.setDate({
-        year: this.currentValue.getFullYear() + step * 10
-      })
+      this.currentValue = stepDate(this.currentValue, 'year', step * 10)
     },
 
     setMode(mode) {
       this.currentMode = mode
+      this.focusCursorItemIfFocused()
     },
 
     stepMonth(step) {
-      const { currentValue } = this
-      const { year, month } = this.getYearMonth(
-        currentValue.getFullYear(),
-        currentValue.getMonth() + step
-      )
-      this.setDate({
-        month,
-        day: Math.min(
-          this.getDaysInMonth(year, month),
-          this.currentValue.getDate()
-        )
-      })
+      this.currentValue = stepDate(this.currentValue, 'month', step)
     },
 
     stepYear(step) {
-      this.setDate({
-        year: this.currentValue.getFullYear() + step
-      })
+      this.currentValue = stepDate(this.currentValue, 'year', step)
     },
 
     selectDate(date) {
-      this.setDate(describeDate(date), true)
-      this.$emit('select')
+      if (this.commitDate(date)) {
+        this.$emit('select')
+      }
+    },
+
+    // Selects the day of `date`, keeping the time of the current value.
+    selectDay(date) {
+      this.selectDate(
+        alterDate(this.currentValue, {
+          year: date.getFullYear(),
+          month: date.getMonth(),
+          day: date.getDate()
+        })
+      )
     },
 
     selectMonth(month) {
@@ -268,17 +363,6 @@ export default {
       this.setDate({ year }, true)
     },
 
-    getYearMonth(year, month) {
-      if (month > 11) {
-        year++
-        month = 0
-      } else if (month < 0) {
-        year--
-        month = 11
-      }
-      return { year, month }
-    },
-
     dateToString(
       date,
       { year, month, day } = { year: true, month: true, day: true }
@@ -295,34 +379,37 @@ export default {
       return `${year} – ${year + 9}`
     },
 
-    getDaysInMonth(year, month) {
-      return new Date(year, month + 1, 0).getDate()
-    },
-
     getFirstYearOfDecade(year) {
       const yearStr = year.toString()
       return +`${yearStr.slice(0, -1)}0`
     },
 
+    // Steps the date part `mode` of the cursor by `step`, or confirms the
+    // cursor with `enter`. With `update`, the stepped date is also selected,
+    // skipping disabled dates. Returns whether anything happened.
     navigate({ step, enter, mode = this.currentMode, update = false }) {
-      const { currentValue } = this
       if (step) {
-        switch (mode) {
-          case 'day':
-            this.setDate({ day: currentValue.getDate() + step }, update)
-            break
-          case 'month':
-            this.setDate({ month: currentValue.getMonth() + step }, update)
-            break
-          case 'year':
-            this.setDate({ year: currentValue.getFullYear() + step }, update)
-            break
+        if (!['day', 'month', 'year'].includes(mode)) {
+          return false
+        }
+        let date = this.currentValue
+        let skippedCount = 0
+        do {
+          date = stepDate(date, mode, step)
+        } while (
+          update &&
+          this.disabledDate(date) &&
+          ++skippedCount < maxSkippedDateCount
+        )
+        if (update) {
+          return this.commitDate(date)
         }
+        this.currentValue = date
         return true
       } else if (enter) {
         switch (this.currentMode) {
           case 'day':
-            this.selectDate(currentValue)
+            this.selectDate(this.currentValue)
             break
           case 'month':
             this.setMode('day')
@@ -333,80 +420,54 @@ export default {
         }
         return true
       }
+      return false
     },
 
-    updateDateRange() {
-      this.dateRange = []
-      this.yearRange = []
-
-      const { currentValue } = this
-      const year = currentValue.getFullYear()
-      const month = currentValue.getMonth()
-      const startYear = this.getFirstYearOfDecade(year)
-      for (let i = 0; i < 10; i++) {
-        this.yearRange.push(startYear + i)
-      }
-      const currMonthFirstDay = new Date(year, month, 1)
-      let firstDayWeek = currMonthFirstDay.getDay() + 1
-      if (firstDayWeek === 0) {
-        firstDayWeek = 7
-      }
-      const numDays = this.getDaysInMonth(year, month)
-      if (firstDayWeek > 1) {
-        const prevMonth = this.getYearMonth(year, month - 1)
-        const prevMonthNumDays = this.getDaysInMonth(
-          prevMonth.year,
-          prevMonth.month
-        )
-        for (let i = 1; i < firstDayWeek; i++) {
-          const day = prevMonthNumDays - firstDayWeek + i + 1
-          const date = new Date(prevMonth.year, prevMonth.month, day)
-          this.dateRange.push({
-            text: day,
-            date,
-            state: this.disabledDate(date) ? 'disabled' : 'gray'
-          })
-        }
-      }
+    // Handles a keydown event of a picker's input, with the caret inside the
+    // date part `part`, and returns whether it was handled.
+    handleKey(event, part) {
+      const { ver: step, enter } = getKeyNavigation(event)
+      return step
+        ? !!part && this.navigate({ step, mode: part.name, update: true })
+        : this.navigate({ enter })
+    },
 
-      const now = new Date()
-      for (let i = 1; i <= numDays; i++) {
-        const date = new Date(year, month, i)
-        const isDay = date => (
-          date &&
-          date.getDate() === i &&
-          date.getFullYear() === year &&
-          date.getMonth() === month
-        )
-        const state = isDay(this.modelValue)
-          ? 'active'
-          : isDay(now)
-            ? 'today'
-            : this.disabledDate(date)
-              ? 'disabled'
-              : isDay(currentValue)
-                ? 'current'
-                : null
-        this.dateRange.push({
-          text: i,
-          date,
-          state
-        })
+    focusCursorItemIfFocused() {
+      if (this.$el?.contains(document.activeElement)) {
+        // Wait for the items of the current mode to be rendered.
+        this.$nextTick(() => asArray(this.$refs.cursorItem)[0]?.focus())
       }
+    },
 
-      const nextMonthNeed = 42 - this.dateRange.length
-      if (nextMonthNeed > 0) {
-        const nextMonth = this.getYearMonth(year, month + 1)
-        for (let i = 1; i <= nextMonthNeed; i++) {
-          const date = new Date(nextMonth.year, nextMonth.month, i)
-          const state = this.disabledDate(date) ? 'disabled' : 'gray'
-          this.dateRange.push({
-            text: i,
-            date,
-            state
-          })
+    onDatesKeyDown(event) {
+      const { key, shiftKey } = event
+      const { currentValue } = this
+      const day = currentValue.getDate()
+      const dayOffset = {
+        ArrowLeft: -1,
+        ArrowRight: 1,
+        ArrowUp: -7,
+        ArrowDown: 7
+      }[key]
+      if (dayOffset) {
+        this.setDate({ day: day + dayOffset })
+      } else if (key === 'PageUp' || key === 'PageDown') {
+        const step = key === 'PageUp' ? -1 : 1
+        if (shiftKey) {
+          this.stepYear(step)
+        } else {
+          this.stepMonth(step)
         }
+      } else if (key === 'Home') {
+        this.setDate({ day: 1 })
+      } else if (key === 'End') {
+        // Day 0 of the next month is the last day of the current one.
+        this.setDate({ month: currentValue.getMonth() + 1, day: 0 })
+      } else {
+        return
       }
+      event.preventDefault()
+      this.focusCursorItemIfFocused()
     }
   }
 }
@@ -448,6 +509,22 @@ function getLocaleNames(locale) {
 .dito-calendar {
   min-width: 240px;
   box-sizing: border-box;
+
+  button {
+    padding: 0;
+    border: 0;
+    font: inherit;
+    color: inherit;
+    background: none;
+    white-space: nowrap;
+    cursor: pointer;
+    @include user-select(none);
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: $shadow-focus;
+    }
+  }
 }
 
 .dito-calendar-popup {
@@ -461,17 +538,6 @@ function getLocaleNames(locale) {
 .dito-calendar-body {
   padding: 0 0.5em;
 
-  span {
-    display: inline-block;
-    width: calc(100% / 7);
-    height: $input-height;
-    line-height: calc($input-height - 2 * $border-width);
-    box-sizing: border-box;
-    border-radius: $border-radius;
-    border: $border-width solid transparent;
-    text-align: center;
-  }
-
   .dito-calendar-item-today {
     border: $border-width solid $color-active;
     color: $color-active;
@@ -496,39 +562,36 @@ function getLocaleNames(locale) {
   }
 }
 
+.dito-calendar-weekdays,
+.dito-calendar__week {
+  display: flex;
+}
+
+.dito-calendar-weekdays span,
+.dito-calendar__item {
+  display: inline-block;
+  width: calc(100% / 7);
+  height: $input-height;
+  line-height: calc($input-height - 2 * $border-width);
+  box-sizing: border-box;
+  border-radius: $border-radius;
+  border: $border-width solid transparent;
+  text-align: center;
+}
+
 .dito-calendar-months,
 .dito-calendar-years {
-  span {
+  .dito-calendar__item {
     width: calc(100% / 4);
     margin: 0.5em 0;
   }
 }
 
-.dito-calendar-years span {
+.dito-calendar-years .dito-calendar__item {
   width: calc(100% / 5);
 }
 
-.dito-calendar a,
-.dito-calendar-dates span,
-.dito-calendar-months span,
-.dito-calendar-years span {
-  @include user-select(none);
-
-  white-space: nowrap;
-  cursor: pointer;
-}
-
-.dito-calendar-header span {
-  cursor: default;
-
-  a {
-    padding: 0 0.2em;
-  }
-}
-
-.dito-calendar-dates span:hover,
-.dito-calendar-months span:hover,
-.dito-calendar-years span:hover,
+.dito-calendar__item:hover,
 .dito-calendar:not(:hover) .dito-calendar-item-current {
   background: $color-highlight;
 }
@@ -558,9 +621,14 @@ function getLocaleNames(locale) {
   > span {
     margin: auto;
     padding: 0 0.5em;
+    cursor: default;
+
+    button {
+      padding: 0 0.2em;
+    }
   }
 
-  a {
+  button {
     font-weight: bold;
 
     &:hover {
@@ -578,8 +646,10 @@ function getLocaleNames(locale) {
 
   &::after {
     position: absolute;
-    left: 0;
-    right: 0;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     font-size: 1.25em;
   }
 }