@rupe/v-datepicker 1.0.0-alpha.2 → 1.0.0-beta.1

package/package.json

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

package/src/components/Calendar/CalendarMonthYearOverlay.vue

@@ -1,23 +1,43 @@
-<script setup lang="ts">
-import { computed } from "vue";
-import { Primitive, type PrimitiveProps } from "../Primitive";
-import { injectCalendarRootContext } from "./CalendarRoot.vue";
-import DismissableLayer from "../DismissableLayer/DismissableLayer.vue";
+<script lang="ts">
+import { createContext } from "../../shared";
 
 export interface CalendarMonthYearOverlayProps extends PrimitiveProps {
   type: "month" | "year";
+  itemsPerRow?: number;
 }
 
-const props = defineProps<CalendarMonthYearOverlayProps>();
+type CalendarMonthYearOverlayContext = {
+  itemsPerRow: ComputedRef<number>;
+};
+
+export const [
+  injectCalendarMonthYearOverlayContext,
+  provideCalendarMonthYearOverlayContext,
+] = createContext<CalendarMonthYearOverlayContext>("CalendarMonthYearOverlay");
+</script>
+
+<script setup lang="ts">
+import { computed, type ComputedRef } from "vue";
+import { Primitive, type PrimitiveProps } from "../Primitive";
+import { injectCalendarRootContext } from "./CalendarRoot.vue";
+import DismissableLayer from "../DismissableLayer/DismissableLayer.vue";
+import { chunk } from "../../shared";
 
 defineOptions({
   inheritAttrs: false,
 });
 
+const props = withDefaults(defineProps<CalendarMonthYearOverlayProps>(), {
+  itemsPerRow: 4,
+});
+
+const itemsPerRow = computed(() => props.itemsPerRow);
 const rootContext = injectCalendarRootContext();
 
-const months = computed(() => rootContext.months.value);
-const years = computed(() => rootContext.years.value);
+const months = computed(() =>
+  chunk(rootContext.months.value, props.itemsPerRow),
+);
+const years = computed(() => chunk(rootContext.years.value, props.itemsPerRow));
 
 const isOpen = computed(
   () => rootContext.monthYearOverlayState.value === props.type,
@@ -26,6 +46,10 @@ const isOpen = computed(
 function onEscapeKeyDown() {
   rootContext.monthYearOverlayState.value = false;
 }
+
+provideCalendarMonthYearOverlayContext({
+  itemsPerRow,
+});
 </script>
 
 <template>
@@ -41,7 +65,6 @@ function onEscapeKeyDown() {
         zIndex: '1000',
       }"
       role="dialog"
-      tabindex="0"
     >
       <slot
         :months="months"

package/src/components/Calendar/CalendarOverlayItem.vue

@@ -1,30 +1,148 @@
 <script setup lang="ts">
+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";
+import { injectCalendarMonthYearOverlayContext } from "./CalendarMonthYearOverlay.vue";
 
 export interface CalendarOverlayItemProps extends PrimitiveProps {
-  date: DateValue;
+  // TODO: extract DateValue & { monthName: string }
+  date: DateValue & { monthName: string };
+  disabled?: boolean;
+  type: "month" | "year";
 }
 
 const props = withDefaults(defineProps<CalendarOverlayItemProps>(), {
-  as: "button",
+  as: "div",
 });
 
 const rootContext = injectCalendarRootContext();
+const years = computed(() => rootContext.years.value);
+const overlayContext = injectCalendarMonthYearOverlayContext();
+const dataValue = computed(() => `${props.type}-${props.date[props.type]}`);
+
+const { primitiveElement, currentElement } = usePrimitiveElement();
+
+const isFocusedDate = computed(() => {
+  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() {
-  if (rootContext.isDateDisabled(props.date) || rootContext.isDateUnavailable?.(props.date))
-    return;
+  if (!isDateSelectable(props.date)) return;
 
   rootContext.onDateChange(props.date);
-  rootContext.monthYearOverlayState.value = false;
+  closeOverlay();
+}
+
+const kbd = useKbd();
+
+function handleKeydown(e: KeyboardEvent) {
+  if (props.disabled) return;
+  e.preventDefault();
+  e.stopPropagation();
+  const parentElement = rootContext.parentElement.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);
+  }
+
+  switch (e.code) {
+    case kbd.ARROW_RIGHT:
+      shiftFocus(sign);
+      break;
+    case kbd.ARROW_LEFT:
+      shiftFocus(-sign);
+      break;
+    case kbd.ARROW_UP:
+      shiftFocus(-itemsPerRow);
+      break;
+    case kbd.ARROW_DOWN:
+      shiftFocus(itemsPerRow);
+      break;
+    case kbd.HOME: {
+      const firstValue = props.type === "month" ? 1 : years.value[0]!.year;
+      focusItem(firstValue);
+      break;
+    }
+    case kbd.END: {
+      const lastValue =
+        props.type === "month" ? 12 : years.value[years.value.length - 1]!.year;
+      focusItem(lastValue);
+      break;
+    }
+    case kbd.ENTER:
+    case kbd.SPACE_CODE:
+      if (isDateSelectable(props.date)) {
+        rootContext.onDateChange(props.date);
+        closeOverlay();
+      }
+  }
 }
 </script>
 
 <template>
-  <Primitive v-bind="props" @click="handleClick">
+  <Primitive
+    v-bind="props"
+    @click="handleClick"
+    ref="primitiveElement"
+    role="button"
+    :aria-label="ariaLabel"
+    :aria-disabled="disabled"
+    :data-value="dataValue"
+    @keydown.up.down.left.right.space.enter.home.end="handleKeydown"
+    @keydown.enter.prevent
+    :tabindex="isFocusedDate ? 0 : -1"
+  >
     <slot />
   </Primitive>
 </template>

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(() => {
@@ -410,8 +400,6 @@ export function useCalendar(props: UseCalendarProps) {
       numberOfMonths: 12,
     });
 
-    
-
     return monthsArray.map((month) => {
       const date = month.value.copy() as DateValue & { monthName: string };
       date.monthName = `${formatter.fullMonth(toDate(date), headingFormatOptions.value)}`;
@@ -419,12 +407,11 @@ 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 });
-    
-    return createYearRange({ start: startDate, end: endDate })
+    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 });
   });
 
   const fullCalendarLabel = computed(

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>