@rupe/v-datepicker 1.0.0-beta.0 → 1.0.0-beta.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rupe/v-datepicker",
   "type": "module",
-  "version": "1.0.0-beta.0",
+  "version": "1.0.0-beta.3",
   "description": "A Vue 3 datepicker component",
   "packageManager": "pnpm@10.13.1",
   "author": "Anja Rupnik",

package/src/components/Calendar/CalendarMonthYearOverlay.vue

@@ -65,7 +65,6 @@ provideCalendarMonthYearOverlayContext({
         zIndex: '1000',
       }"
       role="dialog"
-      tabindex="0"
     >
       <slot
         :months="months"

package/src/components/Calendar/CalendarOverlayItem.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, onMounted, nextTick } from "vue";
 import type { DateValue } from "@internationalized/date";
-import { Primitive } from "../Primitive";
+import { Primitive, usePrimitiveElement } from "../Primitive";
 import type { PrimitiveProps } from "../Primitive";
 import { injectCalendarRootContext } from "./CalendarRoot.vue";
 import { useKbd } from "../../shared";
@@ -20,29 +20,55 @@ const props = withDefaults(defineProps<CalendarOverlayItemProps>(), {
 
 const rootContext = injectCalendarRootContext();
 const years = computed(() => rootContext.years.value);
-const maxValue = computed(() =>
-  props.type === "month" ? 12 : years.value.length,
-);
 const overlayContext = injectCalendarMonthYearOverlayContext();
 const dataValue = computed(() => `${props.type}-${props.date[props.type]}`);
 
+const { primitiveElement, currentElement } = usePrimitiveElement();
+
 const isFocusedDate = computed(() => {
-  if (props.type === "month")
+  const selected = rootContext.modelValue.value;
+  const selectedDate = Array.isArray(selected)
+    ? selected[selected.length - 1]
+    : selected;
+
+  if (selectedDate) {
+    if (props.type === "month") return selectedDate.month === props.date.month;
+    return selectedDate.year === props.date.year;
+  }
+
+  if (props.type === "month") {
     return rootContext.currentMonth.value === props.date.monthName;
+  }
+
   return rootContext.currentYear.value === props.date.year.toString();
 });
 
+const ariaLabel = computed(() => {
+  if (props.type === "month") return props.date.monthName;
+  return props.date.year.toString();
+});
+
+onMounted(() => {
+  if (isFocusedDate.value) {
+    nextTick(() => {
+      currentElement.value?.focus();
+      currentElement.value?.scrollIntoView({ block: "nearest" });
+    });
+  }
+});
+
+function isDateSelectable(date: DateValue) {
+  return (
+    !rootContext.isDateDisabled(date) && !rootContext.isDateUnavailable?.(date)
+  );
+}
+
 function closeOverlay() {
   rootContext.monthYearOverlayState.value = false;
 }
 
 function handleClick() {
-  // TODO: double check if disabled and unavailable works properly for a month
-  if (
-    rootContext.isDateDisabled(props.date) ||
-    rootContext.isDateUnavailable?.(props.date)
-  )
-    return;
+  if (!isDateSelectable(props.date)) return;
 
   rootContext.onDateChange(props.date);
   closeOverlay();
@@ -50,52 +76,68 @@ function handleClick() {
 
 const kbd = useKbd();
 
-function handleArrowKey(e: KeyboardEvent) {
+function handleKeydown(e: KeyboardEvent) {
   if (props.disabled) return;
   e.preventDefault();
   e.stopPropagation();
   const parentElement = rootContext.parentElement.value!;
 
-  const indexIncrementation = overlayContext.itemsPerRow.value;
+  const itemsPerRow = overlayContext.itemsPerRow.value;
   const sign = rootContext.dir.value === "rtl" ? -1 : 1;
+  const currentValue = props.date[props.type];
+
+  function focusItem(value: number) {
+    const candidate = parentElement.querySelector<HTMLElement>(
+      `[data-value='${props.type}-${value}']`,
+    );
+    candidate?.focus();
+    candidate?.scrollIntoView({ block: "nearest" });
+  }
+
+  function shiftFocus(add: number) {
+    let nextValue = currentValue + add;
+
+    if (props.type === "month") {
+      nextValue = ((nextValue - 1 + 12) % 12) + 1;
+    } else {
+      const minYear = years.value[0]!.year;
+      const maxYear = years.value[years.value.length - 1]!.year;
+      nextValue = Math.max(minYear, Math.min(nextValue, maxYear));
+    }
+
+    focusItem(nextValue);
+  }
 
-  // TODO: check how we can reuse code with CalendarCellTrigger
   switch (e.code) {
     case kbd.ARROW_RIGHT:
-      shiftFocus(props.date, sign);
+      shiftFocus(sign);
       break;
     case kbd.ARROW_LEFT:
-      shiftFocus(props.date, -sign);
+      shiftFocus(-sign);
       break;
     case kbd.ARROW_UP:
-      shiftFocus(props.date, -indexIncrementation);
+      shiftFocus(-itemsPerRow);
       break;
     case kbd.ARROW_DOWN:
-      shiftFocus(props.date, indexIncrementation);
+      shiftFocus(itemsPerRow);
+      break;
+    case kbd.HOME: {
+      const firstValue = props.type === "month" ? 1 : years.value[0]!.year;
+      focusItem(firstValue);
       break;
-    case kbd.ENTER:
-    case kbd.SPACE_CODE:
-      rootContext.onDateChange(props.date);
-      closeOverlay();
-  }
-
-  function shiftFocus(date: DateValue, add: number) {
-    let nextDate = date[props.type] + add;
-
-    // TODO: fix for years
-    if (nextDate <= 0) {
-      nextDate = maxValue.value + nextDate;
     }
-
-    if (nextDate > years.value[maxValue.value - 1].year) {
-      nextDate = nextDate - maxValue.value;
+    case kbd.END: {
+      const lastValue =
+        props.type === "month" ? 12 : years.value[years.value.length - 1]!.year;
+      focusItem(lastValue);
+      break;
     }
-
-    const candidateDay = parentElement.querySelector<HTMLElement>(
-      `[data-value='${props.type}-${nextDate}']`,
-    );
-
-    candidateDay?.focus();
+    case kbd.ENTER:
+    case kbd.SPACE_CODE:
+      if (isDateSelectable(props.date)) {
+        rootContext.onDateChange(props.date);
+        closeOverlay();
+      }
   }
 }
 </script>
@@ -106,9 +148,10 @@ function handleArrowKey(e: KeyboardEvent) {
     @click="handleClick"
     ref="primitiveElement"
     role="button"
+    :aria-label="ariaLabel"
     :aria-disabled="disabled"
     :data-value="dataValue"
-    @keydown.up.down.left.right.space.enter="handleArrowKey"
+    @keydown.up.down.left.right.space.enter.home.end="handleKeydown"
     @keydown.enter.prevent
     :tabindex="isFocusedDate ? 0 : -1"
   >

package/src/components/Calendar/CalendarRoot.vue

@@ -109,6 +109,10 @@ export interface CalendarRootProps extends PrimitiveProps {
   multiple?: boolean;
   /** Whether or not to disable days outside the current view. */
   disableDaysOutsideCurrentView?: boolean;
+  /** The minimum year displayed in the year overlay */
+  minYear?: number;
+  /** The maximum year displayed in the year overlay */
+  maxYear?: number;
 }
 
 export type CalendarRootEmits = {
@@ -144,6 +148,8 @@ const props = withDefaults(defineProps<CalendarRootProps>(), {
   isDateDisabled: undefined,
   isDateUnavailable: undefined,
   disableDaysOutsideCurrentView: false,
+  minYear: 1900,
+  maxYear: 2100,
 });
 const emits = defineEmits<CalendarRootEmits>();
 defineSlots<{
@@ -187,6 +193,8 @@ const {
   dir: propDir,
   locale: propLocale,
   disableDaysOutsideCurrentView,
+  minYear,
+  maxYear,
 } = toRefs(props);
 
 const { primitiveElement, currentElement: parentElement } =
@@ -249,6 +257,8 @@ const {
   calendarLabel,
   nextPage: propsNextPage,
   prevPage: propsPrevPage,
+  minYear,
+  maxYear,
 });
 
 const { isInvalid, isDateSelected } = useCalendarState({

package/src/components/Calendar/useCalendar.ts

@@ -34,6 +34,8 @@ export type UseCalendarProps = {
   calendarLabel: Ref<string | undefined>;
   nextPage: Ref<((placeholder: DateValue) => DateValue) | undefined>;
   prevPage: Ref<((placeholder: DateValue) => DateValue) | undefined>;
+  minYear: Ref<number>;
+  maxYear: Ref<number>;
 };
 
 export type UseCalendarStateProps = {
@@ -110,6 +112,10 @@ function handlePrevPage(
 export function useCalendar(props: UseCalendarProps) {
   const formatter = useDateFormatter(props.locale.value);
 
+  watch(props.locale, (newLocale) => {
+    formatter.setLocale(newLocale);
+  });
+
   const headingFormatOptions = computed(() => {
     const options: DateFormatterOptions = {
       calendar: props.placeholder.value.calendar.identifier,
@@ -329,10 +335,7 @@ export function useCalendar(props: UseCalendarProps) {
   );
 
   const headingValue = computed(() => {
-    if (!grid.value.length) return "";
-
-    if (props.locale.value !== formatter.getLocale())
-      formatter.setLocale(props.locale.value);
+    if (!grid.value.length || !grid.value[0]) return "";
 
     if (grid.value.length === 1) {
       const month = grid.value[0].value;
@@ -340,7 +343,8 @@ export function useCalendar(props: UseCalendarProps) {
     }
 
     const startMonth = toDate(grid.value[0].value);
-    const endMonth = toDate(grid.value[grid.value.length - 1].value);
+    const lastMonth = grid.value[grid.value.length - 1];
+    const endMonth = toDate(lastMonth ? lastMonth.value : grid.value[0].value);
 
     const startMonthName = formatter.fullMonth(
       startMonth,
@@ -367,36 +371,22 @@ export function useCalendar(props: UseCalendarProps) {
     return content;
   });
 
-  // TODO: rewrite (a lot of duplication)
-  const currentMonth = computed(() => {
+  function formatGridDate(fn: (date: Date) => string): string {
     if (!grid.value.length) return "";
 
-    if (props.locale.value !== formatter.getLocale())
-      formatter.setLocale(props.locale.value);
-
     const date = grid.value[0]?.value;
+    if (!date) return "";
 
-    if (date) {
-      return `${formatter.fullMonth(toDate(date), headingFormatOptions.value)}`;
-    }
-
-    return "";
-  });
-
-  const currentYear = computed(() => {
-    if (!grid.value.length) return "";
-
-    if (props.locale.value !== formatter.getLocale())
-      formatter.setLocale(props.locale.value);
-
-    const date = grid.value[0]?.value;
+    return fn(toDate(date));
+  }
 
-    if (date) {
-      return `${formatter.fullYear(toDate(date), headingFormatOptions.value)}`;
-    }
+  const currentMonth = computed(() =>
+    formatGridDate((d) => formatter.fullMonth(d, headingFormatOptions.value)),
+  );
 
-    return "";
-  });
+  const currentYear = computed(() =>
+    formatGridDate((d) => formatter.fullYear(d, headingFormatOptions.value)),
+  );
 
   // TODO: look if there is a better way to create months with locale month name
   const months = computed(() => {
@@ -417,10 +407,9 @@ export function useCalendar(props: UseCalendarProps) {
     });
   });
 
-  // TODO: add min and max for years and maybe we should switch to date object here as well for consistency
   const years = computed(() => {
-    const startDate = props.placeholder.value.set({ year: 1875 });
-    const endDate = props.placeholder.value.set({ year: 2100 });
+    const startDate = props.placeholder.value.set({ year: props.minYear.value });
+    const endDate = props.placeholder.value.set({ year: props.maxYear.value });
 
     return createYearRange({ start: startDate, end: endDate });
   });

package/src/components/DatePicker/DatePickerCalendar.vue

@@ -27,6 +27,8 @@ const rootContext = injectDatePickerRootContext();
       readonly: rootContext.readonly.value,
       preventDeselect: rootContext.preventDeselect.value,
       dir: rootContext.dir.value,
+      minYear: rootContext.minYear.value,
+      maxYear: rootContext.maxYear.value,
     }"
     :model-value="rootContext.modelValue.value"
     :placeholder="rootContext.placeholder.value"

package/src/components/DatePicker/DatePickerRoot.vue

@@ -44,6 +44,8 @@ type DatePickerRootContext = {
   dir: Ref<Direction>;
   step: Ref<DateStep | undefined>;
   closeOnSelect: Ref<boolean>;
+  minYear: Ref<number>;
+  maxYear: Ref<number>;
 };
 
 export type DatePickerRootProps = DateFieldRootProps &
@@ -57,6 +59,8 @@ export type DatePickerRootProps = DateFieldRootProps &
     | "fixedWeeks"
     | "numberOfMonths"
     | "preventDeselect"
+    | "minYear"
+    | "maxYear"
   > & {
     /** Whether or not to close the popover on date select */
     closeOnSelect?: boolean;
@@ -96,6 +100,8 @@ const props = withDefaults(defineProps<DatePickerRootProps>(), {
   isDateDisabled: undefined,
   isDateUnavailable: undefined,
   closeOnSelect: false,
+  minYear: 1900,
+  maxYear: 2100,
 });
 const emits = defineEmits<DatePickerRootEmits & PopoverRootEmits>();
 const {
@@ -123,6 +129,8 @@ const {
   dir: propDir,
   step,
   closeOnSelect,
+  minYear,
+  maxYear,
 } = toRefs(props);
 
 const dir = useDirection(propDir);
@@ -206,6 +214,8 @@ provideDatePickerRootContext({
     placeholder.value = date.copy();
   },
   closeOnSelect,
+  minYear,
+  maxYear,
 });
 </script>